增加服务评价

src/components/appraise/group.vue

@@ -1,42 +1,46 @@
 <template>
     <view class="component-appraise-group">
         <view class="group-cate-group">
-            <view class="cate-item" :class="{ active: cate == 0 }" @click="cate = 0">
+            <view
-                <text>全部</text>
+                class="cate-item"
-            </view>
+                v-for="(item, index) in cate"
-            <view class="cate-item" :class="{ active: cate == 1 }" @click="cate = 1">
+                :key="index"
-                <text>有图</text>
+                :class="{ active: currentCate == index }"
-            </view>
+                @click="changeCate(index)"
-            <view class="cate-item" :class="{ active: cate == 2 }" @click="cate = 2">
+            >
-                <text>文字</text>
+                <text
+                    >{{ item.name }} <text v-if="item.count > 0">({{ item.count }})</text></text
+                >
             </view>
         </view>
         <view class="appraise-list-box">
-            <view class="appraise-item" v-for="(item, index) in list" :key="index">
+            <view v-show="currentCate == index" v-for="(item, index) in cate" :key="index">
-                <view class="appraise-left">
+                <view class="appraise-item" :class="['tab' + index]" v-for="(v, k) in item.list" :key="k">
-                    <image class="avatar" :src="item.avatar" mode="aspectFill" />
+                    <view class="appraise-left">
-                </view>
+                        <image class="avatar" :src="v.avatar" mode="aspectFill" />
-                <view class="appraise-right">
+                    </view>
-                    <view class="head">
+                    <view class="appraise-right">
-                        <text class="nickname">{{ item.nickname }}</text>
+                        <view class="head">
-                        <text class="date">{{ item.createTime }}</text>
+                            <text class="nickname">{{ v.nickname }}</text>
-                        <text class="desc">
+                            <text class="date">{{ v.createTime }}</text>
-                            <text class="area">{{ item.area }}</text>
+                            <text class="desc">
-                            <text class="worker">服务人员：{{ item.worker }}</text>
+                                <text class="area">{{ v.area }}</text>
-                        </text>
+                                <text class="worker">服务人员：{{ v.worker }}</text>
-                        <view class="grade">
+                            </text>
-                            <uni-rate :readonly="true" :value="item.grade" :allowHalf="false" :size="utils.rpx2px(40)" />
+                            <view class="grade">
+                                <uni-rate :readonly="true" :value="v.grade" :allowHalf="false" :size="utils.rpx2px(40)" />
+                            </view>
                         </view>
-                    </view>
+                        <view class="tags">
-                    <view class="tags">
+                            <view class="tag" v-for="(tag, tagIdx) in v.tags" :key="tagIdx">{{ tag }}</view>
-                        <view class="tag" v-for="(tag, tagIdx) in item.tags" :key="tagIdx">{{ tag }}</view>
+                        </view>
-                    </view>
+                        <view v-show="v.content != ''" class="content">
-                    <view v-show="item.content != ''" class="content">
+                            <rich-text :nodes="v.content"></rich-text>
-                        <rich-text :nodes="item.content"></rich-text>
+                        </view>
-                    </view>
+                        <view v-show="v.images.length > 0" class="image-group">
-                    <view v-show="item.images.length > 0" class="image-group">
+                            <view class="image-item" v-for="(image, imageIdx) in v.images" :key="imageIdx">
-                        <view class="image-item" v-for="(image, imageIdx) in item.images" :key="imageIdx">
+                                <image class="image" :src="image" mode="aspectFill" @click="previewImage(v.images, imageIdx)" />
-                            <image class="image" :src="image" mode="aspectFill" @click="previewImage(item.images, imageIdx)" />
+                            </view>
                         </view>
                     </view>
                 </view>
@@ -52,29 +56,15 @@ export default {
     data() {
         return {
             utils: this.$utils,
-            tabHeight: 0,
+            currentCate: 0,
-            cate: 0,
-            list: [
-                {
-                    id: 1,
-                    avatar: "https://xiongxiong.vipwjf.com/upload/portal/20230215/93a0f7f676b470c40e25cc3b5c16db3e.png",
-                    nickname: "李先生",
-                    createTime: "2022-10-20 22:48:13",
-                    tags: ["技术专业", "技术专业", "技术专业"],
-                    area: "四川省绵阳市",
-                    worker: "李师傅",
-                    grade: 5,
-                    images: [
-                        "https://xiongxiong.vipwjf.com/upload/portal/20230215/93a0f7f676b470c40e25cc3b5c16db3e.png",
-                        "https://xiongxiong.vipwjf.com/upload/portal/20230215/93a0f7f676b470c40e25cc3b5c16db3e.png",
-                        "https://xiongxiong.vipwjf.com/upload/portal/20230215/93a0f7f676b470c40e25cc3b5c16db3e.png",
-                        "https://xiongxiong.vipwjf.com/upload/portal/20230215/93a0f7f676b470c40e25cc3b5c16db3e.png",
-                    ],
-                    content: "测试评价内容",
-                },
-            ],
         };
     },
+    props: {
+        cate: {
+            type: Array,
+            default: [],
+        },
+    },
     components: {
         UniRate,
     },
@@ -82,9 +72,16 @@ export default {
     mounted() {},
     destroyed() {},
     methods: {
+        /**
+         * 修改分类
+         */
         changeCate(index) {
-            this.cateIndex = index;
+            this.currentCate = index;
+            this.$emit("changeCate", this.cate[index], index);
         },
+        /**
+         * 预览图片
+         */
         previewImage(list, index) {
             uni.previewImage({
                 urls: list,
@@ -98,110 +95,110 @@ export default {
 <style lang="less" scoped>
 .component-appraise-group {
     width: 100%;
-    .group-cate-group {
+}
-        width: 100%;
+.group-cate-group {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    line-height: 32rpx;
+    margin-bottom: 40rpx;
+    .cate-item {
+        font-size: 24rpx;
+        color: #333333;
+        margin-right: 40rpx;
+    }
+    .cate-item.active {
+        font-size: 32rpx;
+        font-weight: bold;
+        color: #333333;
+    }
+}
+.appraise-list-box {
+    width: 100%;
+    .appraise-item {
+        box-sizing: border-box;
+        padding: 30rpx;
+        border: 2rpx solid #d7d7d7;
         display: flex;
-        flex-wrap: wrap;
+        align-items: flex-start;
-        line-height: 32rpx;
+        justify-content: space-between;
-        margin-bottom: 40rpx;
+        margin-bottom: 22rpx;
-        .cate-item {
-            font-size: 24rpx;
-            color: #333333;
-            margin-right: 40rpx;
-            transition: all 0.35s;
-        }
-        .cate-item.active {
-            font-size: 32rpx;
-            font-weight: bold;
-            color: #333333;
-        }
     }
-    .appraise-list-box {
+}
+.appraise-left {
+    .avatar {
+        width: 70rpx;
+        height: 70rpx;
+        box-sizing: border-box;
+        border: 2rpx solid #999999;
+    }
+}
+.appraise-right {
+    width: 525rpx;
+    .head {
+        position: relative;
         width: 100%;
-        .appraise-item {
-            box-sizing: border-box;
-            padding: 30rpx;
-            border: 2rpx solid #d7d7d7;
-            display: flex;
-            align-items: flex-start;
-            justify-content: space-between;
-        }
     }
-    .appraise-left {
+    .nickname,
-        .avatar {
+    .date,
-            width: 70rpx;
+    .desc {
-            height: 70rpx;
+        display: block;
-            box-sizing: border-box;
-            border: 2rpx solid #999999;
-        }
     }
-    .appraise-right {
+    .nickname {
-        width: 525rpx;
+        font-size: 30rpx;
-        .head {
+        line-height: 30rpx;
-            position: relative;
+        color: #333333;
-            width: 100%;
-        }
-        .nickname,
-        .date,
-        .desc {
-            display: block;
-        }
-        .nickname {
-            font-size: 30rpx;
-            line-height: 30rpx;
-            color: #333333;
-        }
-        .date {
-            font-size: 22rpx;
-            line-height: 22rpx;
-            color: #999999;
-            margin: 18rpx 0;
-        }
-        .desc {
-            font-size: 22rpx;
-            line-height: 22rpx;
-            color: #999999;
-        }
-        .area {
-            margin-right: 30rpx;
-        }
-        .tags {
-            width: 100%;
-            margin: 30rpx 0;
-        }
-        .tag {
-            display: inline-block;
-            font-size: 22rpx;
-            line-height: 22rpx;
-            color: #666666;
-            padding: 12rpx 24rpx;
-            background: #f6f6f6;
-            border-radius: 23rpx;
-            margin-right: 24rpx;
-        }
     }
-    .grade {
+    .date {
-        position: absolute;
+        font-size: 22rpx;
-        top: 0;
+        line-height: 22rpx;
-        right: 0;
+        color: #999999;
+        margin: 18rpx 0;
     }
-    .content {
+    .desc {
-        font-size: 28rpx;
+        font-size: 22rpx;
-        font-size: #666666;
+        line-height: 22rpx;
+        color: #999999;
     }
-    .image-group {
+    .area {
+        margin-right: 30rpx;
+    }
+    .tags {
         width: 100%;
-        margin-top: 20rpx;
+        margin: 30rpx 0;
     }
-    .image-item {
+    .tag {
         display: inline-block;
-        width: 110rpx;
+        font-size: 22rpx;
-        height: 110rpx;
+        line-height: 22rpx;
-        margin-right: 20rpx;
+        color: #666666;
-        .image {
+        padding: 12rpx 24rpx;
-            width: 100%;
+        background: #f6f6f6;
-            height: 100%;
+        border-radius: 23rpx;
-        }
+        margin-right: 24rpx;
+    }
+}
+.grade {
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+.content {
+    font-size: 28rpx;
+    font-size: #666666;
+}
+.image-group {
+    width: 100%;
+    margin-top: 20rpx;
+}
+.image-item {
+    display: inline-block;
+    width: 110rpx;
+    height: 110rpx;
+    margin-right: 20rpx;
+    .image {
+        width: 100%;
+        height: 100%;
     }
 }
 </style>

src/components/appraise/section.vue

@@ -7,7 +7,7 @@
             </view>
         </view>
         <div class="appraise-group-box">
-            <appraise-group />
+            <appraise-group :cate="cate" @changeCate="changeCate" />
         </div>
     </view>
 </template>
@@ -17,31 +17,21 @@ import AppraiseGroup from "@/components/appraise/group";
 export default {
     name: "appraise-section",
     data() {
-        return {
+        return {};
-            total: 12345,
+    },
-            tags: [
+    props: {
-                {
+        total: {
-                    name: "技术专业",
+            type: [Number, String],
-                    count: 100,
+            default: 0,
-                },
+        },
-                {
+        tags: {
-                    name: "礼貌热情",
+            type: Array,
-                    count: 100,
+            default: [],
-                },
+        },
-                {
+        cate: {
-                    name: "认真负责",
+            type: Array,
-                    count: 100,
+            default: [],
-                },
+        },
-                {
-                    name: "快速完工",
-                    count: 100,
-                },
-                {
-                    name: "按时上门",
-                    count: 100,
-                },
-            ],
-        };
     },
     components: {
         AppraiseGroup,
@@ -49,7 +39,14 @@ export default {
     created() {},
     mounted() {},
     destroyed() {},
-    methods: {},
+    methods: {
+        /**
+         * 修改分类
+         */
+        changeCate(cate, index) {
+            this.$emit("changeCate", cate, index);
+        },
+    },
 };
 </script>
 

src/core/apis.js

@@ -286,5 +286,19 @@ export default {
             showLoading: true,
             auth: true,
         }
-    }
+    },
+    appraise: {
+        count: {
+            service: {
+                url: "/wxapp/index/seeworkerevaluation",
+                showLoading: true,
+            }
+        },
+        list: {
+            service: {
+                url: "/wxapp/index/goodsevaluation",
+                showLoading: true,
+            }
+        }
+    },
 }

src/core/models.js

@@ -4,6 +4,7 @@ import worker from "@/core/models/worker";
 import service from "@/core/models/service";
 import cart from "@/core/models/cart";
 import system from "@/core/models/system";
+import appraise from "@/core/models/appraise";
 
 export default {
     order,
@@ -12,4 +13,5 @@ export default {
     service,
     cart,
     system,
+    appraise,
 }

src/core/models/appraise.js

@@ -0,0 +1,55 @@
+import Vue from "vue"
+let prototype = Vue.prototype;
+
+export default {
+    count: {
+        service(id) {
+            return new Promise((resolve, reject) => {
+                prototype.$request({
+                    api: "appraise.count.service",
+                    data: {
+                        id: id,
+                    }
+                }).then(response => {
+                    if (response.code == 1) {
+                        return resolve(response.data);
+                    }
+                    return reject(response.msg);
+                }).catch(e => { });
+            });
+        }
+    },
+    list: {
+        /**
+         * 服务评价
+         */
+        service(data) {
+            return new Promise((resolve, reject) => {
+                prototype.$request({
+                    api: "appraise.list.service",
+                    data: data
+                }).then(response => {
+                    if (response.code == 1) {
+                        let list = [];
+                        response.data.forEach((data) => {
+                            list.push({
+                                id: data.id,
+                                avatar: data.u_avatar,
+                                nickname: data.u_name,
+                                createTime: data.time,
+                                tags: data.msg.split(","),
+                                area: "-",
+                                worker: data.wid,
+                                grade: data.score,
+                                images: data.img,
+                                content: data.desc,
+                            });
+                        });
+                        return resolve(list);
+                    }
+                    return reject(response.msg);
+                }).catch(e => { });
+            });
+        }
+    },
+}

src/pages/service/detail.vue

@@ -61,7 +61,12 @@
             </view>
             <view v-if="tabIndex == 1" class="tab-item tab1">
                 <view class="reviews">
-                    <app-appraise-section />
+                    <app-appraise-section
+                        :total="appraise.total"
+                        :tags="appraise.tags"
+                        :cate="appraise.cate"
+                        @changeCate="changeAppraiseCate"
+                    />
                 </view>
             </view>
         </view>
@@ -76,10 +81,9 @@ export default {
     data() {
         return {
             pageConfig: {},
-            tabIndex: 1, // 1评价
+            tabIndex: 0, // 1评价
-            tabHeight: 0,
             currentBanner: 1,
-            pageTitle: "服务详情",
+            pageTitle: "",
             timer: null,
             id: 0,
             detail: {
@@ -89,13 +93,19 @@ export default {
                 content: "",
                 price: 0,
             },
+            currentAppraiseCateIndex: 0,
+            appraise: {
+                total: 0,
+                tags: [],
+                cate: [],
+            },
         };
     },
     components: {
         AppLayout,
         AppAppraiseSection,
     },
-    onLoad(e) {
+    async onLoad(e) {
         this.pageConfig = getApp().globalData.pageConfig;
 
         if (e.id) {
@@ -105,6 +115,7 @@ export default {
             return;
         }
 
+        // 详情
         this.$models.service.getServiceDetail(this.id).then((response) => {
             this.detail = {
                 title: response.goods.post_title,
@@ -114,12 +125,43 @@ export default {
                 price: response.goods.money,
             };
         });
+
+        // 评价
+        await this.$models.appraise.count.service(this.id).then((data) => {
+            data.tags.forEach((item) => {
+                this.appraise.tags.push({
+                    count: item.count,
+                    name: item.name,
+                });
+            });
+            data.cate.forEach((item) => {
+                this.appraise.cate.push({
+                    name: item.name,
+                    count: item.count,
+                    status: item.status,
+                    page: 1,
+                    more: true,
+                    list: [],
+                });
+            });
+            this.appraise.total = this.appraise.cate[0].count;
+            this.changeAppraiseCate(this.appraise.cate[0], 0);
+        });
     },
     onShow() {},
     onReady() {},
-    onReachBottom() {},
+    onReachBottom() {
+        if (this.tabIndex == 0) return;
+        let currentCate = this.appraise.cate[this.currentAppraiseCateIndex];
+        if (currentCate.more) {
+            this.loadAppraiseData(currentCate);
+        }
+    },
     onPullDownRefresh() {},
     methods: {
+        /**
+         * 分享
+         */
         share() {
             uni.showToast({
                 title: "分享",
@@ -146,12 +188,47 @@ export default {
             ];
             this.$utils.toPage("/pages/order/create?orderData=" + encodeURIComponent(JSON.stringify(orderdata)));
         },
+        /**
+         * 切换详情/评价
+         */
         changeTab(e) {
             this.tabIndex = e.detail.current;
         },
+        /**
+         * 滑动banner
+         */
         changeBanner(e) {
             this.currentBanner = e.detail.current + 1;
         },
+        /**
+         * 切换评价分类
+         */
+        changeAppraiseCate(currentCate, index) {
+            this.currentAppraiseCateIndex = index;
+            currentCate.list = [];
+            currentCate.more = true;
+            currentCate.page = 1;
+            this.loadAppraiseData(currentCate);
+        },
+        /**
+         * 加载评价数据
+         */
+        loadAppraiseData(currentCate) {
+            this.$models.appraise.list
+                .service({
+                    id: this.id,
+                    status: currentCate.status,
+                    page: currentCate.page,
+                })
+                .then((list) => {
+                    if (list.length > 0) {
+                        currentCate.page++;
+                        currentCate.list = currentCate.list.concat(list);
+                    } else {
+                        currentCate.more = false;
+                    }
+                });
+        },
     },
 };
 </script>