1

pages/work-order/index.vue

@@ -8,44 +8,71 @@
         </template>
         <!--下拉刷新区域-->
         <z-paging ref="pageRef" :style="pagingStyle" v-model="dataList" @query="getDataList">
-            <template v-for="item in dataList" :key="item.id">
-                <view class="relative bg-white mb-2 p-3">
-                    <view class="hc-flex">
-                        <view class="hc-flex-center mr-3">
-                            <hc-img class="round" :width="40" :height="40" :src="item.avatar" v-if="item.avatar"/>
-                            <hc-img class="round" :width="40" :height="40" src="/static/image/avatar.png" v-else/>
+            <uni-collapse>
+                <template v-for="item in dataList" :key="item.id">
+                    <view class="relative bg-white mb-2 p-3">
+                        <view class="hc-flex">
+                            <view class="hc-flex-center mr-3">
+                                <hc-img class="round" :width="40" :height="40" :src="item.avatar" v-if="item.avatar"/>
+                                <hc-img class="round" :width="40" :height="40" src="/static/image/avatar.png" v-else/>
+                            </view>
+                            <view class="relative flex-1">
+                                <view class="text-black mb-1">{{item['createUserName'] ?? '用户名异常'}}</view>
+                                <view class="text-24 text-gray-4">{{item['createTime']}}</view>
+                            </view>
+                            <view class="text-24 text-gray-5" v-if="parseInt(item['isSolve']) === 1">已解决</view>
                         </view>
-                        <view class="relative flex-1">
-                            <view class="text-black mb-1">{{item['createUserName'] ?? '用户名异常'}}</view>
-                            <view class="text-24 text-gray-4">{{item['createTime']}}</view>
+                        <view class="relative ml-12.5 text-gray-5">
+                            <view class="relative mt-3" v-html="item['opinionContent']"/>
+                            <view class="mt-3" v-if="item['returnFiles']?.length > 0">
+                                <hc-row :gutter="10">
+                                    <hc-col :span="8" class="h-125" v-for="(img, index) in item['returnFiles']">
+                                        <hc-image class="radius" un-border="1 solid gray-2" :src="img" @click="previewImage(item['returnFiles'], index)"/>
+                                    </hc-col>
+                                </hc-row>
+                            </view>
                         </view>
-                        <view class="text-24 text-gray-5" v-if="parseInt(item['isSolve']) === 1">已解决</view>
-                    </view>
-                    <view class="relative ml-12.5 text-gray-5">
-                        <view class="relative mt-3" v-html="item['opinionContent']"/>
-                        <view class="mt-3" v-if="item['returnFiles']?.length > 0">
-                            <hc-row :gutter="10">
-                                <hc-col :span="8" class="h-125" v-for="(img, index) in item['returnFiles']">
-                                    <hc-image class="radius" un-border="1 solid gray-2" :src="img" @click="previewImage(item['returnFiles'], index)"/>
-                                </hc-col>
-                            </hc-row>
-                        </view>
-                    </view>
-                    <view class="hc-flex ml-12.5 mt-4 text-gray-5">
-                        <view class="hc-flex text-34" @click="commentExpanded(item)">
-                            <text class="i-ri-message-2-fill" v-if="item['commentExpanded']"/>
-                            <text class="i-ri-message-2-line" v-else/>
-                            <text class="text-26 text-gray-5 ml-1" v-if="item['commentsNumber'] >= 1">{{ item['commentsNumber'] }}</text>
-                        </view>
-                        <view class="flex-1"/>
-                        <view class="hc-flex text-34" @click="goodLikeClick(item)">
-                            <text class="i-ri-thumb-up-fill" v-if="item['currentUserGood']"/>
-                            <text class="i-ri-thumb-up-line" v-else/>
-                            <text class="text-26 text-gray-5 ml-1" v-if="item['goodNumber'] >= 1">{{ item['goodNumber'] }}</text>
+                        <view class="hc-flex ml-12.5 mt-4 text-gray-5">
+                            <view class="hc-flex text-34" @click="commentExpanded(item)">
+                                <text class="i-ri-message-2-fill" v-if="item['commentExpanded']"/>
+                                <text class="i-ri-message-2-line" v-else/>
+                                <text class="text-26 text-gray-5 ml-1" v-if="item['commentsNumber'] >= 1">{{ item['commentsNumber'] }}</text>
+                            </view>
+                            <view class="flex-1"/>
+                            <view class="hc-flex text-34" @click="goodLikeClick(item)">
+                                <text class="i-ri-thumb-up-fill" v-if="item['currentUserGood']"/>
+                                <text class="i-ri-thumb-up-line" v-else/>
+                                <text class="text-26 text-gray-5 ml-1" v-if="item['goodNumber'] >= 1">{{ item['goodNumber'] }}</text>
+                            </view>
                         </view>
+                        <!--评论区域-->
+                        <uni-collapse-item :class="item['commentExpanded']?'mt-3':''" title="评论区" :open="item['commentExpanded'] ?? false">
+                            <view class="relative pt-3" un-border-t="1 solid gray-2">
+                                <view class="relative flex items-end mb-5">
+                                    <view class="relative flex-1">
+                                        <textarea v-model="item.userCommentContent" class="hc-textarea p-2 text-26" placeholder="请输入评论内容" auto-height />
+                                    </view>
+                                    <button class="cu-btn text-24 ml-2" :class="item['userCommentContent']?'bg-blue-5 text-white':''" @click="submitComment(item)">提交</button>
+                                </view>
+                                <view class="relative flex items-start" v-for="(items, index) in item['expandedCommentList']" :key="items.id">
+                                    <view class="mr-2">
+                                        <hc-img class="round" :width="24" :height="24" :src="items.avatar" v-if="items.avatar"/>
+                                        <hc-img class="round" :width="24" :height="24" src="/static/image/avatar.png" v-else/>
+                                    </view>
+                                    <view class="relative flex-1">
+                                        <view class="flex items-start">
+                                            <view class="flex-1 text-28 text-gray-7">{{items['userName'] ?? '用户名异常'}}</view>
+                                            <text class="text-24 text-gray-4">{{items['createTime']}}</text>
+                                        </view>
+                                        <view class="text-24 text-gray-4 mt-1" v-html="items['replyContent']"/>
+                                        <view class="relative my-3" un-border-b="1 solid gray-2" v-if="(item['expandedCommentList'].length - 1) !==  index"/>
+                                    </view>
+                                </view>
+                            </view>
+                        </uni-collapse-item>
                     </view>
-                </view>
-            </template>
+                </template>
+            </uni-collapse>
         </z-paging>
     </hc-sys>
 </template>
@@ -127,12 +154,79 @@ const previewImage = (imgs, index) => {
 
 //评论展开或收起
 const commentExpanded = (item) => {
+    if (!item['commentExpanded']) {
+        queryCommentsList(item)
+    } else {
+        item['commentExpanded'] = false
+    }
+}
+
+//获取评论列表
+const queryCommentsList = async (item) => {
+    uni.showLoading({title: '获取评论数据中...', mask: true});
+    //关闭其他评论区
+    for (let i = 0; i < dataList.value.length; i++) {
+        const item = dataList.value[i]
+        if (item['commentExpanded']) {
+            item['commentExpanded'] = false
+        }
+    }
+    //发起请求
+    const {data} = await mainApi.queryCommentsList({
+        userOpinionId: item.id
+    })
+    item['expandedCommentList'] = getArrValue(data)
+    item['commentExpanded'] = true
+    uni.hideLoading();
+}
 
+//提交评论
+const submitComment = async (item) => {
+    if (!item['userCommentContent']) {
+        errorToast('请先填写评论内容')
+        return
+    }
+    //发起请求
+    uni.showLoading({title: '提交数据中...', mask: true});
+    const {error, code} = await mainApi.saveUserComments({
+        userOpinionId: item.id,
+        replyContent: item['userCommentContent'],
+        projectId: projectId.value,
+        contractId: contractId.value,
+    })
+    uni.hideLoading();
+    if (!error && code === 200) {
+        item['userCommentContent'] = ''
+        queryCommentsList(item).then()
+    } else {
+        errorToast('评论失败')
+    }
 }
 
 //点赞或取消点赞
-const goodLikeClick = (item) => {
-
+const goodLikeClick = async (item) => {
+    if (item['currentUserGood']) {
+        const {error, code} = await mainApi.cancelGood({
+            userOpinionId: item.id
+        })
+        if (!error && code === 200) {
+            item['currentUserGood'] = false
+            item['goodNumber']--
+        } else {
+            errorToast('取消点赞失败')
+        }
+    } else {
+        const {error, code} = await mainApi.addGoodNumber({
+            userOpinionId: item.id,
+            good: 1
+        })
+        if (!error && code === 200) {
+            item['currentUserGood'] = true
+            item['goodNumber']++
+        } else {
+            errorToast('点赞失败')
+        }
+    }
 }
 </script>
 

style/work-order/index.scss

@@ -10,4 +10,24 @@
         color: white;
         --hc-nav-back: white;
     }
+    :deep(.uni-collapse) {
+        background-color: transparent;
+    }
+    :deep(.uni-collapse-item__title) {
+        display: none;
+    }
+    :deep(.uni-collapse-item__wrap-content) {
+        border: 0;
+    }
+    :deep(.hc-textarea) {
+        background: #eee;
+        overflow: auto;
+        width: 100%;
+        max-height: 200rpx;
+        border-radius: 6rpx;
+    }
+    .cu-btn {
+        height: 2.1rem;
+        border-radius: 6rpx;
+    }
 }