完善订单页面

src/components/order/action.vue

@@ -0,0 +1,101 @@
+<template>
+    <view class="order-action">
+        <block
+            v-if="
+                order.state == $models.order.state.NO_PAY ||
+                order.state == $models.order.state.NO_PRICE ||
+                order.state == $models.order.state.NO_SELECT_WORKER
+            "
+        >
+            <view class="btn" @click.stop="cancelOrder" :class="{ active: false }">
+                <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 }">
+                <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 }">
+                <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 }">
+                <text>重新申请</text>
+            </view>
+        </block>
+        <block v-if="order.state == $models.order.state.ORDER_CLOSE || order.state == $models.order.state.ALL_FINISH">
+            <view class="del" v-if="true" @click.stop="delOrder">
+                <text class="iconfont icon-shanchu"></text>
+            </view>
+        </block>
+    </view>
+</template>
+
+<script>
+export default {
+    name: "order-action",
+    data() {
+        return {};
+    },
+    props: {
+        order: {
+            type: Object,
+            default: () => {},
+        },
+    },
+    components: {},
+    created() {},
+    mounted() {},
+    destroyed() {},
+    methods: {
+        cancelOrder() {
+            this.$emit("cancelOrder");
+        },
+        delOrder() {
+            this.$emit("delOrder");
+        },
+        appraiseOrder() {
+            this.$emit("appraiseOrder");
+        },
+        drawbackOrder() {
+            this.$emit("drawbackOrder");
+        },
+        reapplyOrder() {
+            this.$emit("reapplyOrder");
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.order-action {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    .btn,
+    .del {
+        margin-left: 30rpx;
+    }
+    .btn {
+        display: inline-block;
+        background: rgba(139, 155, 235, 0);
+        border: 1px solid #999999;
+        border-radius: 28rpx;
+        padding: 15rpx 26rpx;
+        font-size: 26rpx;
+        color: #999999;
+        line-height: 26rpx;
+    }
+    .btn.active {
+        color: #666666;
+    }
+    .del {
+        color: #b5b5b5;
+        font-size: 40rpx;
+    }
+}
+</style>

src/components/order/item.vue

@@ -0,0 +1,148 @@
+<template>
+    <!-- @click="$utils.toPage('/pages/order/detail?id=' + order.id)" -->
+    <view class="order-item">
+        <view class="order-header">
+            <view class="state-text">
+                <text>{{ $models.order.parseOrderStateText(order.state) }}</text>
+            </view>
+            <view class="more">
+                <text class="text">详情</text>
+                <text class="iconfont icon-jinru"></text>
+            </view>
+        </view>
+        <view class="order-body">
+            <view class="row">
+                <text class="title">订单编号：</text>
+                <text class="text">{{ order.orderId }}</text>
+                <text class="copy" @click.stop="copyOrderId(order.orderId)">复制</text>
+            </view>
+            <view class="row">
+                <text class="title">服务分类：</text>
+                <text class="text">{{ order.cate }}</text>
+            </view>
+            <view class="row limit-line clamp-1">
+                <text class="title">需求内容：</text>
+                <text class="text">{{ order.explain }}</text>
+            </view>
+            <view class="row">
+                <text class="title">下单时间：</text>
+                <text class="text">{{ order.createTime }}</text>
+            </view>
+            <view class="row">
+                <text class="title">服务时间：</text>
+                <text class="text">{{ order.serviceTime }}</text>
+            </view>
+            <view class="worker-box">
+                <block
+                    v-if="
+                        order.orderType == $models.order.type.NORMAL ||
+                        order.orderType == $models.order.type.CUSTOM_PRICE ||
+                        (order.orderType == $models.order.type.WORKER_PRICE && order.state == $models.order.state.NO_SERVICE)
+                    "
+                >
+                    单个师傅
+                </block>
+                <block v-else>
+                    师傅列表
+                </block>
+            </view>
+        </view>
+        <view class="order-footer">
+            <slot></slot>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    name: "order-order-item",
+    data() {
+        return {};
+    },
+    props: {
+        order: {
+            type: Object,
+            default: () => {},
+        },
+    },
+    components: {},
+    created() {},
+    mounted() {},
+    destroyed() {},
+    methods: {
+        copyOrderId(orderId) {
+            const that = this;
+            uni.setClipboardData({
+                data: orderId,
+                success(result) {
+                    that.$utils.toast("内容已复制");
+                },
+                fail(error) {
+                    that.$utils.toast("复制失败");
+                },
+            });
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.order-item {
+    width: 100%;
+    padding: 0 30rpx;
+    box-sizing: border-box;
+    background-color: #ffffff;
+    .order-header {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        line-height: 32rpx;
+        padding: 30rpx 0 18rpx 0;
+        .state-text {
+            font-size: 30rpx;
+            font-weight: bold;
+            color: #000000;
+        }
+        .more {
+            font-size: 26rpx;
+            color: #666666;
+            display: flex;
+            align-items: center;
+        }
+        .iconfont {
+            color: #a7a7a7;
+            font-size: 32rpx;
+            margin-left: 8rpx;
+        }
+    }
+}
+.order-body {
+    width: 100%;
+    border-bottom: 2rpx solid #e8e7e7;
+    padding: 18rpx 0;
+    .row {
+        position: relative;
+        width: 100%;
+        font-size: 28rpx;
+        line-height: 30rpx;
+        margin-bottom: 22rpx;
+        .title {
+            color: #999999;
+        }
+        .text {
+            color: #000000;
+        }
+        .copy {
+            color: #8194f2;
+            margin-left: 24rpx;
+        }
+    }
+    .row:last-child {
+        margin-bottom: 0;
+    }
+}
+.order-footer {
+    width: 100%;
+}
+</style>

src/components/order/order-item.vue

@@ -1,21 +0,0 @@
-<template>
-    <view class="order-item">
-        
-    </view>
-</template>
-
-<script>
-export default {
-    name: "order-order-item",
-    data() {
-        return {};
-    },
-    components: {},
-    created() {},
-    mounted() {},
-    destroyed() {},
-    methods: {},
-};
-</script>
-
-<style lang="less" scoped></style>

src/core/models/order.js

@@ -1,9 +1,17 @@
 export default {
+    type: {
+        NORMAL: 1,
+        WORKER_PRICE: 2,
+        CUSTOM_PRICE: 3,
+    },
     state: {
+        ORDER_CLOSE: -2,
         NO_PAY: -1,
         NO_PRICE: 0,
         NO_SELECT_WORKER: 1,
         NO_SERVICE: 2,
+        NO_APPRAISE: 3,
+        ALL_FINISH: 4,
     },
     parseOrderStateText(state) {
         switch (state) {

src/pages/order/order.vue

@@ -23,44 +23,16 @@
                     <swiper-item>
                         <view class="tab-item" :class="['tab' + tabIdx]">
                             <view class="order-list">
-                                <block v-for="(item, index) in tabItem.list" :key="index">
+                                <view class="order-item" v-for="(item, index) in tabItem.list" :key="index">
-                                    <view class="order-item" @click="$utils.toPage('/pages/order/detail?id=' + item.id)">
+                                    <order-item :order="item" :index="index">
-                                        <view class="order-header">
+                                        <view class="action-group">
-                                            <view class="state-text">
+                                            <order-action :order="item" />
-                                                <text>等待师傅报价</text>
-                                            </view>
-                                            <view class="more">
-                                                <text class="text">详情</text>
-                                                <text class="iconfont icon-jinru"></text>
-                                            </view>
                                         </view>
-                                        <view class="order-body">
+                                    </order-item>
-                                            <view class="row">
+                                </view>
-                                                <text class="title">订单编号：</text>
+                            </view>
-                                                <text class="text">{{ item.orderId }}</text>
+                            <view class="more-list">
-                                                <text class="copy" @click.stop="copyOrderId(item.orderId)">复制</text>
+                                <widget-load-more :hasMore="tabItem.more" />
-                                            </view>
-                                            <view class="row">
-                                                <text class="title">服务分类：</text>
-                                                <text class="text">{{ item.cate }}</text>
-                                            </view>
-                                            <view class="row limit-line clamp-1">
-                                                <text class="title">需求内容：</text>
-                                                <text class="text">{{ item.explain }}</text>
-                                            </view>
-                                            <view class="row">
-                                                <text class="title">下单时间：</text>
-                                                <text class="text">{{ item.createTime }}</text>
-                                            </view>
-                                            <view class="row">
-                                                <text class="title">服务时间：</text>
-                                                <text class="text">{{ item.serviceTime }}</text>
-                                            </view>
-                                            <view class="worker-list"></view>
-                                        </view>
-                                        <view class="order-footer"></view>
-                                    </view>
-                                </block>
                             </view>
                         </view>
                     </swiper-item>
@@ -72,6 +44,9 @@
 
 <script>
 import AppLayout from "@/components/layout/layout";
+import OrderItem from "@/components/order/item";
+import OrderAction from "@/components/order/action";
+import WidgetLoadMore from "@/components/widgets/loadmore";
 export default {
     name: "order",
     data() {
@@ -82,6 +57,7 @@ export default {
                 {
                     type: "all",
                     name: "全部订单",
+                    more: true,
                     list: [
                         {
                             id: 1,
@@ -90,8 +66,8 @@ export default {
                             explain: "我想要安装一个书柜，需要上墙啊啊啊啊",
                             createTime: "2022-10-18 10:56:34",
                             serviceTime: "2022-10-18 10:56:34",
-                            orderType: 1,
+                            orderType: 2,
-                            status: 0,
+                            state: 1,
                             worker: {
                                 id: 1,
                                 name: "张师傅",
@@ -128,7 +104,7 @@ export default {
                             createTime: "2022-10-18 10:56:34",
                             serviceTime: "2022-10-18 10:56:34",
                             orderType: 1,
-                            status: 1,
+                            state: 1,
                             worker: {
                                 id: 1,
                                 name: "张师傅",
@@ -146,13 +122,39 @@ export default {
                 {
                     type: "drawback",
                     name: "退款记录",
-                    list: [],
+                    more: true,
+                    list: [
+                        {
+                            id: 3,
+                            orderId: "xxgfdkgn1224",
+                            cate: "家具安装",
+                            explain: "我想要安装一个书柜，需要上墙啊啊啊啊",
+                            createTime: "2022-10-18 10:56:34",
+                            serviceTime: "2022-10-18 10:56:34",
+                            orderType: 1,
+                            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: [],
+                        },
+                    ],
                 },
             ],
         };
     },
     components: {
         AppLayout,
+        OrderItem,
+        OrderAction,
+        WidgetLoadMore,
     },
     onLoad() {
         this.$nextTick(() => {
@@ -185,18 +187,6 @@ export default {
             });
         },
         loadData() {},
-        copyOrderId(orderId) {
-            const t = this;
-            uni.setClipboardData({
-                data: orderId,
-                success(result) {
-                    t.$utils.toast("内容已复制");
-                },
-                fail(error) {
-                    t.$utils.toast("复制失败");
-                },
-            });
-        },
     },
 };
 </script>
@@ -230,64 +220,20 @@ export default {
 }
 .order-list-group {
     width: 100%;
-    touch-action: none;
     .list-tab-list {
         width: 100%;
     }
-}
+    .more-list {
-.order-item {
-    width: 100%;
-    padding: 30rpx;
-    box-sizing: border-box;
-    background-color: #ffffff;
-    margin-bottom: 30rpx;
-    .order-header {
         width: 100%;
-        display: flex;
+        padding-bottom: 12px;
-        align-items: center;
-        justify-content: space-between;
-        line-height: 32rpx;
-        .state-text {
-            font-size: 30rpx;
-            font-weight: bold;
-            color: #000000;
-        }
-        .more {
-            font-size: 26rpx;
-            color: #666666;
-            display: flex;
-            align-items: center;
-        }
-        .iconfont {
-            color: #a7a7a7;
-            font-size: 32rpx;
-            margin-left: 8rpx;
-        }
     }
-}
+    .order-item {
-.order-body {
-    width: 700rpx;
-    border-bottom: 2rpx solid #e8e7e7;
-    padding: 35rpx 0 18rpx 0;
-    .row {
-        position: relative;
         width: 100%;
-        font-size: 28rpx;
+        margin-bottom: 30rpx;
-        line-height: 30rpx;
-        margin-bottom: 22rpx;
-        .title {
-            color: #999999;
-        }
-        .text {
-            color: #000000;
-        }
-        .copy {
-            color: #8194f2;
-            margin-left: 24rpx;
-        }
     }
-    .row:last-child {
+    .action-group {
-        margin-bottom: 0;
+        width: 100%;
+        padding: 30rpx 0;
     }
 }
 </style>