新增订单详情页面

src/pages.json

@@ -49,6 +49,12 @@
 				"navigationBarTitleText": "我的订单"
 			}
 		},
+		{
+			"path": "pages/order/detail",
+			"style": {
+				"navigationBarTitleText": "订单详情"
+			}
+		},
 		{
 			"path": "pages/demand/demand",
 			"style": {

src/pages/order/detail.vue

@@ -0,0 +1,26 @@
+<template>
+    <app-layout headerBackgroundColor="#00418c" textColor="light">
+        订单详情
+    </app-layout>
+</template>
+
+<script>
+import AppLayout from "@/components/layout/layout";
+export default {
+    name: "order-detail",
+    data() {
+        return {};
+    },
+    components: {
+        AppLayout,
+    },
+    onLoad() {},
+    onShow() {},
+    onReady() {},
+    onReachBottom() {},
+    onPullDownRefresh() {},
+    methods: {},
+};
+</script>
+
+<style lang="less" scoped></style>

src/pages/order/order.vue

@@ -1,40 +1,29 @@
 <template>
-    <app-layout
+    <app-layout headerBackgroundColor="#F6F6F6" backgroundColor="#F6F6F6" title="订单" textColor="dark" btnType="unset">
-        headerBackgroundColor="#F6F6F6"
+        <view class="order-select-group">
-        backgroundColor="#F6F6F6"
-        title="订单"
-        textColor="dark"
-    >
-        <view class="order-menu">
             <view
-                class="menu-item"
+                class="select-item"
-                :class="[tabIndex == 0 ? 'active' : '']"
+                v-for="(selectItem, selectIndex) in tabList"
-                @click="tabIndex = 0"
+                :key="selectIndex"
+                :class="[tabIndex == selectIndex ? 'active' : '']"
+                @click="switchTab(selectIndex)"
             >
-                <text class="text">全部订单</text>
+                <text class="text">{{ selectItem.name }}</text>
-            </view>
-            <view
-                class="menu-item"
-                :class="[tabIndex == 1 ? 'active' : '']"
-                @click="tabIndex = 1"
-            >
-                <text class="text">退款记录</text>
             </view>
         </view>
-        <view class="order-list-container">
+        <view class="order-list-group">
-            <swiper
+            <swiper class="list-tab-list" :current="tabIndex" :duration="300" @change="changeTab" :style="{ height: tabHeight + 'px' }">
-                class="list-container"
+                <block v-for="(tabItem, tabIdx) in tabList" :key="tabIdx">
-                :current="tabIndex"
-                :duration="300"
-                @change="changeTab"
-                :style="{ height: tabHeight + 'px' }"
-            >
                     <swiper-item>
-                    <view class="tab-item tab0">1</view>
+                        <view class="tab-item" :class="['tab' + tabIdx]">
-                </swiper-item>
+                            <view class="order-list">
-                <swiper-item>
+                                <block v-for="(item, index) in tabItem.list" :key="index">
-                    <view class="tab-item tab1">2</view>
+                                    <view class="order-item" @click="$utils.toPage('/pages/order/detail?id=' + item.id)"> </view>
+                                </block>
+                            </view>
+                        </view>
                     </swiper-item>
+                </block>
             </swiper>
         </view>
     </app-layout>
@@ -47,29 +36,127 @@ export default {
     data() {
         return {
             tabIndex: 0,
+            tabHeight: 0,
+            tabList: [
+                {
+                    type: "all",
+                    name: "全部订单",
+                    list: [
+                        {
+                            id: 1,
+                            orderId: "xxgfdkgn1223",
+                            cate: "家具安装",
+                            explain: "我想要安装一个书柜，需要上墙啊啊啊啊",
+                            createTime: "2022-10-18 10:56:34",
+                            serviceTime: "2022-10-18 10:56:34",
+                            orderType: 1,
+                            status: 0,
+                            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,
+                                    cover: require("@/static/temp/order/1.png"),
+                                    price: "306.00",
+                                },
+                                {
+                                    id: 2,
+                                    cover: require("@/static/temp/order/1.png"),
+                                    price: "306.00",
+                                },
+                                {
+                                    id: 3,
+                                    cover: require("@/static/temp/order/1.png"),
+                                    price: "306.00",
+                                },
+                            ],
+                        },
+                        {
+                            id: 2,
+                            orderId: "xxgfdkgn1224",
+                            cate: "家具安装",
+                            explain: "我想要安装一个书柜，需要上墙啊啊啊啊",
+                            createTime: "2022-10-18 10:56:34",
+                            serviceTime: "2022-10-18 10:56:34",
+                            orderType: 1,
+                            status: 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: [],
+                        },
+                    ],
+                },
+                {
+                    type: "drawback",
+                    name: "退款记录",
+                    list: [],
+                },
+            ],
         };
     },
     components: {
         AppLayout,
     },
-    onLoad() {},
+    onLoad() {
+        this.$nextTick(() => {
+            this.setTabHeight();
+        });
+    },
     onShow() {},
     onReady() {},
     onReachBottom() {},
     onPullDownRefresh() {},
-    methods: {},
+    methods: {
+        switchTab(index) {
+            this.tabIndex = index;
+            this.loadData();
+            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;
+                }
+            });
+        },
+        loadData() {},
+    },
 };
 </script>
 
 <style lang="less" scoped>
-.order-menu {
+.order-select-group {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: #ffffff;
     margin-bottom: 20rpx;
-    .menu-item {
+    .select-item {
         width: 210rpx;
         height: 115rpx;
         box-sizing: border-box;
@@ -80,7 +167,7 @@ export default {
             line-height: 115rpx;
         }
     }
-    .menu-item.active {
+    .select-item.active {
         border-bottom: 7rpx solid #8b9aeb;
         .text {
             font-weight: bold;
@@ -88,12 +175,17 @@ export default {
         }
     }
 }
-.order-list-container {
+.order-list-group {
     width: 100%;
-    height: 500rpx;
     background-color: #ffffff;
-    .list-container {
+    touch-action: none;
+    .list-tab-list {
         width: 100%;
     }
 }
+.order-item {
+    width: 100%;
+    padding: 30rpx;
+    background-color: #ffffff;
+}
 </style>