feat: 修改评价逻辑。新增查看评价页面

guzijian
1 parent 96200802
Showing 7 changed files with 175 additions and 8 deletions
garbage-removal/src/apis/evaluate.js
garbage-removal/src/pages.json
garbage-removal/src/pages/home/index.vue
garbage-removal/src/pages/order/detail/index.vue
garbage-removal/src/pages/order/evaluate-info/index.vue
garbage-removal/src/pages/order/swiper-list-item/index.vue
garbage-removal/src/pages/wode/index.vue
+import { request } from "@/utils/request";
+
+// 评价
+export async function queryEvaluateDetail(orderId) {
+  return await request.get(`/order/evaluate/detail/${orderId}`);
+}
@@ -42,6 +42,14 @@
 				"enablePullDownRefresh": false
 			}
 		},{
+			"path": "pages/order/evaluate-info/index",
+			"style": {
+				"navigationBarTitleText": "评价详情",
+				"navigationBarTextStyle": "white",
+				"navigationBarBackgroundColor": "#53c21d",
+				"enablePullDownRefresh": false
+			}
+		},{
 			"path": "pages/order/evaluate/index",
 			"style": {
 				"navigationBarTitleText": "写评价",
 <template>
   <view class="home-container">
-
     <view class="top-swiper-image-scroll">
       <u-swiper :list="swiperImageList" keyName="image" :autoplay="true" circular></u-swiper>
       <view :style="{
@@ -23,6 +23,7 @@
       <!-- 派单信息 -->
       <view class="order-detail-container-box-card">
         <view class="order-detail-container-header-card-title">
+          <view class="order-detail-container-header-card-uicon"></view>
           派单信息
         </view>
         <view class="order-detail-container-header-item">
@@ -66,6 +67,7 @@
       <!-- 派单记录 -->
       <view class="order-detail-container-box-card">
         <view class="order-detail-container-header-card-title">
+          <view class="order-detail-container-header-card-uicon"></view>
           派单人员
         </view>
         <!-- <view class="order-detail-container-header-item">
@@ -104,6 +106,7 @@
       <!-- 处理信息 -->
       <view class="order-detail-container-box-card">
         <view class="order-detail-container-header-card-title">
+          <view class="order-detail-container-header-card-uicon"></view>
           处理信息
         </view>
         <view v-if="dataGram.garOrderHandlerId" style="width: 100%;">
@@ -167,6 +170,9 @@
           <u-button @click="handleEvaluate(orderId, userType)"
             v-if="dataGram.garHandlerEvaluateFlag === 0 && userType === '管理负责人'" shape="circle" color="#a9e08f"
             text="去评价"></u-button>
+          <u-button @click="handleEvaluateDetail(orderId, userType)"
+            v-if="dataGram.garHandlerEvaluateFlag === 1 && userType === '管理负责人'" shape="circle" color="#a9e08f"
+            text="查看评价"></u-button>
           <u-button
             v-if="dataGram.garOrderHandlerStatus === 1 && dataGram.putOnImages.length != 0 && dataGram.putDownImages.length != 0 && dataGram.garCancelFlag === 0"
             @click="handleSubmitSuccess(orderId)" shape="circle" color="#a9e08f" text="完成派单"></u-button>
@@ -225,6 +231,10 @@ onLoad((options) =&gt; {
 const handleClose = (e) => {
   cancelShow.value = false
 }
+const handleEvaluateDetail = (orderId, userType) => {
+  uni.$u.route(`pages/order/evaluate-info/index`,
+    { orderId: orderId, userType: userType })
+}
 const selectClick = (index) => {
   currentCancelName.value = index.name;
 }
@@ -409,6 +419,15 @@ $custom-bottom-height: 200rpx;
         border-bottom: 3rpx solid $u-info-light;
         margin-bottom: $custom-marin-bottom;
         color: $u-primary;
+        display: flex;
+        align-items: center;
+
+        .order-detail-container-header-card-uicon {
+          background-color: $u-primary;
+          margin-right: 10rpx;
+          height: 35rpx;
+          width: 15rpx;
+        }
       }
  
       .order-detail-container-header-item {
+<template>
+  <view class="page-evaluate">
+    <view class="evaluate-user-box">
+      <view class="user-info-title">
+        <u-avatar :src="pic" size="70"></u-avatar>
+        <view class="user-name">
+          居民用户
+        </view>
+      </view>
+      <view v-if="evaluateUser" class="evaluate-content">
+        <view class="evaluate-score">
+          <u-icon v-for="todo in maxStar" :name="evaluateUser.garEvaluateScore > todo ? 'star-fill' : 'star'" :key="todo"
+            color="#f9ae3d" size="28"></u-icon>
+        </view>
+        <view class="evaluate-txt">
+          {{ evaluateUser.garEvaluateContent }}
+        </view>
+      </view>
+      <view class="evaluate-empty" v-else>
+        暂无评价~~
+      </view>
+    </view>
+    <view class="evaluate-user-box">
+      <view class="user-info-title">
+        <u-avatar :src="pic" size="70"></u-avatar>
+        <view class="user-name">
+          管理负责人
+        </view>
+      </view>
+      <view v-if="evaluateManager" class="evaluate-content">
+        <view class="evaluate-score">
+          <u-icon v-for="todo in maxStar" :name="evaluateManager.garEvaluateScore > todo ? 'star-fill' : 'star'"
+            :key="todo" color="#f9ae3d" size="28"></u-icon>
+        </view>
+        <view class="evaluate-txt">
+          {{ evaluateManager.garEvaluateContent }}
+        </view>
+      </view>
+      <view class="evaluate-empty" v-else>
+        暂无评价~~
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { queryEvaluateDetail } from "@/apis/evaluate";
+import headImg from "@/static/image/st_pic.png";
+import { onLoad } from '@dcloudio/uni-app';
+import { ref } from 'vue';
+const pic = ref(headImg)
+// 定义最大积分
+let maxScore = 5
+const maxStar = ref([])
+
+// 用户评价对象
+const evaluateUser = ref()
+// 管理负责人评价
+const evaluateManager = ref()
+onLoad((options) => {
+  for (let index = 0; index < maxScore; index++) {
+    maxStar.value.push(index);
+  }
+  // 查询评价
+  queryEvaluateDetail(options.orderId).then(res => {
+
+    res.data.data.forEach(element => {
+      if (element.garEvaluateTarget == 0) {
+        evaluateUser.value = element
+      }
+      if (element.garEvaluateTarget == 1) {
+        evaluateManager.value = element
+      }
+    });
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+$page-padding: 20rpx;
+
+.page-evaluate {
+  height: 100%;
+  width: 100%;
+  padding: $page-padding;
+  background-color: #ffffff;
+  box-sizing: border-box;
+
+  .evaluate-user-box {
+    box-sizing: border-box;
+    color: $u-main-color;
+    width: 100%;
+    padding: $page-padding;
+    border-radius: $page-padding;
+    border: 2rpx solid $u-border-color;
+    margin: 40rpx 0;
+    min-height: 300rpx;
+
+    .user-info-title {
+      display: flex;
+      align-items: center;
+
+      .user-name {
+        margin-left: 20rpx;
+        box-sizing: border-box;
+      }
+    }
+
+    .evaluate-content {
+      margin: 20rpx 0;
+      box-sizing: border-box;
+
+      .evaluate-score {
+        display: flex;
+      }
+
+      .evaluate-txt {
+        color: $u-info;
+      }
+    }
+
+    .evaluate-empty {
+      margin: 20rpx 0;
+      box-sizing: border-box;
+      color: $u-info;
+    }
+  }
+}
+</style>
@@ -68,6 +68,7 @@
 <script setup>
 import { queryOrderList, updateOrder } from "@/apis/order.js";
 import { useMainStore } from '@/stores/index.js';
+import { onShow } from "@dcloudio/uni-app";
 import { computed, ref, watch } from 'vue';
 const props = defineProps({
   tabIndex: {
@@ -178,6 +179,18 @@ const queryList = (pageNo, pageSize) =&gt; {
     paging.value.complete(false);
   })
 }
+
+onShow(() => {
+  if (props.currentIndex == props.tabIndex) {
+    if (firstLoaded.value) {
+      setTimeout(() => {
+        paging.value.reload();
+      }, 50);
+    }
+  }
+})
+
+// 重写load的方法，自动刷新
 watch(() => props.currentIndex, (val1, val2) => {
   if (props.currentIndex == props.tabIndex) {
     if (!firstLoaded.value) {
@@ -6,14 +6,7 @@
       </view>
       <view class="u-flex-1">
         <view class="u-font-18 u-p-b-20">普通用户</view>
-        <!-- <view class="u-font-14 u-tips-color"></view> -->
       </view>
-      <!-- <view class="u-m-l-10 u-p-10">
-        <u-icon name="scan" color="#969799" size="28"></u-icon>
-      </view>
-      <view class="u-m-l-10 u-p-10">
-        <u-icon name="arrow-right" color="#969799" size="28"></u-icon>
-      </view> -->
     </view>
  
     <view class="u-m-t-20">