完善订单页面

src/components/order/action.vue

@@ -7,22 +7,22 @@
                 order.state == $models.order.state.NO_SELECT_WORKER
             "
         >
-            <view class="btn" @click.stop="cancelOrder" :class="{ active: false }">
+            <view class="btn" @click.stop="cancelOrder" :class="{ active: true }">
                 <text>取消订单</text>
             </view>
         </block>
         <block v-if="order.state == $models.order.state.NO_APPRAISE">
-            <view class="btn" v-if="false" @click.stop="appraiseOrder" :class="{ active: false }">
+            <view class="btn" v-if="false" @click.stop="appraiseOrder">
                 <text>评价师傅</text>
             </view>
         </block>
         <block v-if="order.state == $models.order.state.NO_SERVICE">
-            <view class="btn" v-if="false" @click.stop="drawbackOrder" :class="{ active: false }">
+            <view class="btn" v-if="false" @click.stop="drawbackOrder">
                 <text>申请退款</text>
             </view>
         </block>
         <block v-if="order.state == $models.order.state.ORDER_CLOSE">
-            <view class="btn" v-if="false" @click.stop="reapplyOrder" :class="{ active: false }">
+            <view class="btn" v-if="false" @click.stop="reapplyOrder">
                 <text>重新申请</text>
             </view>
         </block>

src/components/order/item.vue

@@ -1,9 +1,8 @@
 <template>
-    <!-- @click="$utils.toPage('/pages/order/detail?id=' + order.id)" -->
+    <view class="order-item" @click="toDetail">
-    <view class="order-item">
         <view class="order-header">
-            <view class="state-text">
+            <view class="state-text" :style="{ color: $models.order.getOrderStateTextColor(order.state) }">
-                <text>{{ $models.order.parseOrderStateText(order.state) }}</text>
+                <text>{{ $models.order.getOrderStateText(order.state) }}</text>
             </view>
             <view class="more">
                 <text class="text">详情</text>
@@ -40,10 +39,23 @@
                         (order.orderType == $models.order.type.WORKER_PRICE && order.state == $models.order.state.NO_SERVICE)
                     "
                 >
-                    单个师傅
+                    <view class="worker-item-box">
+                        <worker-item :data="order.worker" />
+                    </view>
                 </block>
                 <block v-else>
-                    师傅列表
+                    <view class="worker-list-group">
+                        <view class="list-group">
+                            <view class="list-item" v-for="(item, index) in previewWorkerList" :key="index">
+                                <image class="cover" :src="item.cover" mode="aspectFill" />
+                                <text class="price">¥ {{ item.price }}</text>
+                            </view>
+                        </view>
+                        <view class="more-worker">
+                            <text class="text">{{ order.workerList.length }}位师傅已报价</text>
+                            <text class="iconfont icon-jinru"></text>
+                        </view>
+                    </view>
                 </block>
             </view>
         </view>
@@ -54,10 +66,13 @@
 </template>
 
 <script>
+import WorkerItem from "@/components/worker/item";
 export default {
     name: "order-order-item",
     data() {
-        return {};
+        return {
+            previewWorkerList: [],
+        };
     },
     props: {
         order: {
@@ -65,8 +80,18 @@ export default {
             default: () => {},
         },
     },
-    components: {},
+    components: {
-    created() {},
+        WorkerItem,
+    },
+    created() {
+        for (let index = 0; index < 3; index++) {
+            if (this.order.workerList[index]) {
+                this.previewWorkerList.push(this.order.workerList[index]);
+            } else {
+                break;
+            }
+        }
+    },
     mounted() {},
     destroyed() {},
     methods: {
@@ -82,6 +107,13 @@ export default {
                 },
             });
         },
+        toDetail() {
+            let type = "detail";
+            if (this.order.status == this.$models.order.state.NO_SELECT_WORKER) {
+                type = "worker";
+            }
+            this.$utils.toPage("/pages/order/detail?type=" + type + "&id=" + this.order.id);
+        },
     },
 };
 </script>
@@ -102,7 +134,6 @@ export default {
         .state-text {
             font-size: 30rpx;
             font-weight: bold;
-            color: #000000;
         }
         .more {
             font-size: 26rpx;
@@ -141,8 +172,60 @@ export default {
     .row:last-child {
         margin-bottom: 0;
     }
+    .worker-box {
+        width: 100%;
+    }
 }
 .order-footer {
     width: 100%;
 }
+.worker-list-group {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    padding: 20rpx 0 10rpx 0;
+    .list-group {
+        display: flex;
+    }
+    .list-item:first-child {
+        margin-left: 0;
+    }
+    .list-item {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        margin-left: 36rpx;
+        .cover {
+            width: 110rpx;
+            height: 110rpx;
+            box-sizing: border-box;
+            border-radius: 50%;
+            overflow: hidden;
+            margin-bottom: 8rpx;
+        }
+        .price {
+            font-size: 26rpx;
+            font-weight: bold;
+            color: #ec7655;
+        }
+    }
+    .more-worker {
+        display: flex;
+        align-items: center;
+        .text {
+            font-size: 26rpx;
+            font-weight: bold;
+            color: #666666;
+        }
+        .iconfont {
+            font-size: 32rpx;
+            color: #a7a7a7;
+        }
+    }
+}
+.worker-item-box {
+    width: 100%;
+    padding: 20rpx 0 10rpx 0;
+}
 </style>

src/components/worker/item.vue

@@ -0,0 +1,104 @@
+<template>
+    <view class="worker-item">
+        <view class="head">
+            <image class="cover" :src="data.cover" mode="aspectFill" />
+            <text v-if="showPrice" class="price">¥ {{ data.price }}</text>
+        </view>
+        <view class="desc">
+            <view class="name">
+                <text>{{ data.name }}</text>
+            </view>
+            <view class="type" :style="{ color: $models.worker.getWorkerTypeTextColor(data.type) }">
+                <text>{{ $models.worker.getWorkerTypeText(data.type) }}</text>
+            </view>
+            <view class="detail">
+                <text class="section-text">服务{{ data.times }}次</text>
+                <text class="section-text">好评率{{ data.favorable_rate }}%</text>
+                <text class="section-text">评分{{ data.grade }}/5.0 </text>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    name: "worker-item",
+    data() {
+        return {};
+    },
+    props: {
+        showPrice: {
+            type: Boolean,
+            default: true,
+        },
+        data: {
+            type: Object,
+            default: () => {},
+        },
+    },
+    components: {},
+    created() {},
+    mounted() {},
+    destroyed() {},
+    methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.worker-item {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    .head {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        margin-right: 28rpx;
+        .cover {
+            width: 110rpx;
+            height: 110rpx;
+            box-sizing: border-box;
+            border-radius: 50%;
+            overflow: hidden;
+            margin-bottom: 8rpx;
+        }
+        .price {
+            font-size: 26rpx;
+            font-weight: bold;
+            color: #ec7655;
+        }
+    }
+    .desc {
+        display: flex;
+        align-items: flex-start;
+        flex-direction: column;
+        line-height: 28rpx;
+        .name {
+            font-size: 28rpx;
+            color: #010101;
+        }
+        .type,
+        .detail {
+            font-size: 24rpx;
+            font-weight: bold;
+        }
+        .type {
+            display: inline-block;
+            // color: #d9a019;
+            margin: 20rpx 0;
+        }
+        .detail {
+            color: #999999;
+        }
+        .section-text::after {
+            display: inline-block;
+            content: "|";
+            margin: 0 10rpx;
+        }
+        .section-text:last-child::after {
+            display: none;
+            content: "";
+        }
+    }
+}
+</style>

src/core/models.js

@@ -1,7 +1,9 @@
 import order from "@/core/models/order";
 import user from "@/core/models/user";
+import worker from "@/core/models/worker";
 
 export default {
     order,
     user,
+    worker,
 }

src/core/models/order.js

@@ -13,7 +13,21 @@ export default {
         NO_APPRAISE: 3,
         ALL_FINISH: 4,
     },
-    parseOrderStateText(state) {
+    getOrderStateTextColor(state) {
+        switch (state) {
+            case this.state.NO_PAY:
+                return '#000000';
+            case this.state.NO_PRICE:
+                return '#000000';
+            case this.state.NO_SELECT_WORKER:
+                return '#000000';
+            case this.state.NO_SERVICE:
+                return '#000000';
+            default:
+                return '#ff0000';
+        }
+    },
+    getOrderStateText(state) {
         switch (state) {
             case this.state.NO_PAY:
                 return '待支付';

src/core/models/worker.js

@@ -0,0 +1,26 @@
+export default {
+    type: {
+        NORMAL: 1,
+        SETTLE: 2,
+    },
+    getWorkerTypeTextColor(type) {
+        switch (type) {
+            case this.type.NORMAL:
+                return '#179C43';
+            case this.type.SETTLE:
+                return '#D9A019';
+            default:
+                return '#999999';
+        }
+    },
+    getWorkerTypeText(type) {
+        switch (type) {
+            case this.type.NORMAL:
+                return '普通师傅';
+            case this.type.SETTLE:
+                return '入驻师傅';
+            default:
+                return '未知';
+        }
+    }
+}

src/pages/order/detail.vue

@@ -1,6 +1,35 @@
 <template>
-    <app-layout headerBackgroundColor="#00418c" textColor="light">
+    <app-layout headerBackgroundColor="#F6F6F6" backgroundColor="#F6F6F6" title="订单详情" textColor="dark">
-        订单详情
+        <view class="state-textbox">
+            <text class="state-text">等待您选择师傅</text>
+            <text class="state-desc">为保证师傅按时上门，建议尽快选择师傅并完成支付 </text>
+        </view>
+        <view class="order-detail-header">
+            <view class="select-group">
+                <view class="select-item" :class="{ active: tabIndex == 0 }" @click="tabIndex = 0">
+                    <text class="text">服务师傅</text>
+                </view>
+                <view class="select-item" :class="{ active: tabIndex == 1 }" @click="tabIndex = 1">
+                    <text class="text">订单详情</text>
+                </view>
+            </view>
+        </view>
+        <view class="order-detail-body">
+            <swiper
+                class="list-tab-list"
+                :current="tabIndex"
+                :duration="300"
+                @change="changeTab"
+                :style="{ height: tabHeight + 'px' }"
+            >
+                <swiper-item>
+                    <view class="detail-tab tab0">选择师傅</view>
+                </swiper-item>
+                <swiper-item>
+                    <view class="detail-tab tab1">2</view>
+                </swiper-item>
+            </swiper>
+        </view>
     </app-layout>
 </template>
 
@@ -9,18 +38,146 @@ import AppLayout from "@/components/layout/layout";
 export default {
     name: "order-detail",
     data() {
-        return {};
+        return {
+            tabIndex: 0,
+            tabHeight: 0,
+            order: {
+                id: 1,
+                orderId: "xxgfdkgn1223",
+                cate: "家具安装",
+                explain: "我想要安装一个书柜，需要上墙啊啊啊啊",
+                createTime: "2022-10-18 10:56:34",
+                serviceTime: "2022-10-18 10:56:34",
+                orderType: 2,
+                state: 1,
+                worker: {
+                    id: 1,
+                    name: "张师傅",
+                    cover: require("@/static/temp/order/1.png"),
+                    price: 306.0,
+                    type: 1,
+                    times: 687,
+                    favorable_rate: 99.8,
+                    grade: 4.5,
+                },
+                workerList: [
+                    {
+                        id: 1,
+                        name: "张师傅",
+                        cover: require("@/static/temp/order/1.png"),
+                        price: 306.0,
+                        type: 1,
+                        times: 687,
+                        favorable_rate: 99.8,
+                        grade: 4.5,
+                    },
+                    {
+                        id: 1,
+                        name: "王师傅",
+                        cover: require("@/static/temp/order/1.png"),
+                        price: 306.0,
+                        type: 1,
+                        times: 687,
+                        favorable_rate: 99.8,
+                        grade: 4.5,
+                    },
+                    {
+                        id: 1,
+                        name: "李师傅",
+                        cover: require("@/static/temp/order/1.png"),
+                        price: 306.0,
+                        type: 1,
+                        times: 687,
+                        favorable_rate: 99.8,
+                        grade: 4.5,
+                    },
+                ],
+            },
+        };
     },
     components: {
         AppLayout,
     },
-    onLoad() {},
+    onLoad(e) {
+        if (e.type && e.type == "detail") {
+            this.switchTab(1);
+        } else {
+            this.switchTab(0);
+        }
+    },
     onShow() {},
     onReady() {},
     onReachBottom() {},
     onPullDownRefresh() {},
-    methods: {},
+    methods: {
+        switchTab(index) {
+            this.tabIndex = index;
+            this.$nextTick(() => {
+                this.setTabHeight();
+            });
+        },
+        changeTab(e) {
+            this.switchTab(e.detail.current);
+        },
+        setTabHeight() {
+            let element = ".tab" + this.tabIndex;
+            let query = uni.createSelectorQuery().in(this);
+            query.select(element).boundingClientRect();
+            query.exec((res) => {
+                if (res && res[0]) {
+                    this.tabHeight = res[0].height;
+                }
+            });
+        },
+    },
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.state-textbox {
+    width: 750rpx;
+    box-sizing: border-box;
+    background: #8c9bec;
+    padding: 30rpx;
+    color: #ffffff;
+    text-align: center;
+    .state-text {
+        display: block;
+        font-size: 40rpx;
+        font-weight: bold;
+        line-height: 40rpx;
+        margin-bottom: 26rpx;
+    }
+    .state-desc {
+        display: block;
+        font-size: 24rpx;
+        line-height: 24rpx;
+    }
+}
+.select-group {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #ffffff;
+    margin-bottom: 20rpx;
+    .select-item {
+        width: 210rpx;
+        height: 115rpx;
+        box-sizing: border-box;
+        text-align: center;
+        .text {
+            font-size: 30rpx;
+            color: #999999;
+            line-height: 115rpx;
+        }
+    }
+    .select-item.active {
+        border-bottom: 7rpx solid #8b9aeb;
+        .text {
+            font-weight: bold;
+            color: #8b9aeb;
+        }
+    }
+}
+</style>

src/pages/order/order.vue

@@ -1,6 +1,6 @@
 <template>
     <app-layout headerBackgroundColor="#F6F6F6" backgroundColor="#F6F6F6" title="订单" textColor="dark" btnType="unset">
-        <view class="order-select-group">
+        <view class="select-group">
             <view
                 class="select-item"
                 v-for="(selectItem, selectIndex) in tabList"
@@ -81,18 +81,33 @@ export default {
                             workerList: [
                                 {
                                     id: 1,
+                                    name: "张师傅",
                                     cover: require("@/static/temp/order/1.png"),
-                                    price: "306.00",
+                                    price: 306.0,
+                                    type: 1,
+                                    times: 687,
+                                    favorable_rate: 99.8,
+                                    grade: 4.5,
                                 },
                                 {
-                                    id: 2,
+                                    id: 1,
+                                    name: "王师傅",
                                     cover: require("@/static/temp/order/1.png"),
-                                    price: "306.00",
+                                    price: 306.0,
+                                    type: 1,
+                                    times: 687,
+                                    favorable_rate: 99.8,
+                                    grade: 4.5,
                                 },
                                 {
-                                    id: 3,
+                                    id: 1,
+                                    name: "李师傅",
                                     cover: require("@/static/temp/order/1.png"),
-                                    price: "306.00",
+                                    price: 306.0,
+                                    type: 1,
+                                    times: 687,
+                                    favorable_rate: 99.8,
+                                    grade: 4.5,
                                 },
                             ],
                         },
@@ -110,7 +125,7 @@ export default {
                                 name: "张师傅",
                                 cover: require("@/static/temp/order/1.png"),
                                 price: 306.0,
-                                type: 1,
+                                type: 2,
                                 times: 687,
                                 favorable_rate: 99.8,
                                 grade: 4.5,
@@ -192,7 +207,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.order-select-group {
+.select-group {
     width: 100%;
     display: flex;
     align-items: center;