From 7e059570b5e78273d2de8d4893f2b8b3d6254c4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?TOP=E7=B3=AF=E7=B1=B3?= <1130395124@qq.com>
Date: Thu, 2 Mar 2023 21:49:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=8E=A5=E5=8D=95=E5=A4=A7?=
 =?UTF-8?q?=E5=8E=85=E9=83=A8=E5=88=86=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/get/action.vue |  25 +++++
 src/pages/get/detail.vue      |  24 +++++
 src/pages/get/index.vue       | 187 ++++++++++++++++++++++++++++++++--
 3 files changed, 229 insertions(+), 7 deletions(-)
 create mode 100644 src/components/get/action.vue
 create mode 100644 src/pages/get/detail.vue

diff --git a/src/components/get/action.vue b/src/components/get/action.vue
new file mode 100644
index 0000000..7219c64
--- /dev/null
+++ b/src/components/get/action.vue
@@ -0,0 +1,25 @@
+<template>
+    <view class="component-get-action"> </view>
+</template>
+
+<script>
+export default {
+    name: "component-get-action",
+    data() {
+        return {};
+    },
+    props: {
+        date: {
+            type: Object,
+            default: () => {},
+        },
+    },
+    components: {},
+    created() {},
+    mounted() {},
+    destroyed() {},
+    methods: {},
+};
+</script>
+
+<style lang="less" scoped></style>
\ No newline at end of file
diff --git a/src/pages/get/detail.vue b/src/pages/get/detail.vue
new file mode 100644
index 0000000..445742c
--- /dev/null
+++ b/src/pages/get/detail.vue
@@ -0,0 +1,24 @@
+<template>
+    <app-layout title="接单详情"> </app-layout>
+</template>
+
+<script>
+import AppLayout from "@/components/layout/layout";
+export default {
+    name: "get-detail",
+    data() {
+        return {};
+    },
+    components: {
+        AppLayout,
+    },
+    onLoad() {},
+    onShow() {},
+    onReady() {},
+    onReachBottom() {},
+    onPullDownRefresh() {},
+    methods: {},
+};
+</script>
+
+<style lang="less" scoped></style>
\ No newline at end of file
diff --git a/src/pages/get/index.vue b/src/pages/get/index.vue
index d87ba55..b972c01 100644
--- a/src/pages/get/index.vue
+++ b/src/pages/get/index.vue
@@ -1,8 +1,42 @@
 <template>
-    <app-layout title="接单大厅">
+    <app-layout v-model="safePt" title="接单大厅">
         <view class="getorder-container">
-            <view class="tab-cate-group">
-                
+            <view class="scroll-cate" :style="{ top: safePt + 'px' }">
+                <scroll-view scroll-x>
+                    <view class="cate-group">
+                        <view
+                            class="cate-item"
+                            v-for="(item, index) in tabList"
+                            :key="index"
+                            :class="{ active: tabIndex == index }"
+                            @click="tabIndex = index"
+                        >
+                            {{ item.name }}
+                        </view>
+                    </view>
+                </scroll-view>
+            </view>
+            <view class="order-group">
+                <swiper :current="tabIndex" :style="{ height: tabHeight + 'px' }" @change="changeTab">
+                    <swiper-item v-for="(item, index) in tabList" :key="index">
+                        <view :class="['tab' + index]">
+                            <view
+                                class="order-item"
+                                v-for="(v, k) in item.list"
+                                :key="k"
+                                @click="utils.toPage('/pages/get/detail?id=' + v.id)"
+                            >
+                                <view class="order-head">
+                                    <view class="title">{{ v.username }}-{{ v.cate }}</view>
+                                    <view class="more">
+                                        <text class="text">详情</text>
+                                        <text class="iconfont icon-jinru"></text>
+                                    </view>
+                                </view>
+                            </view>
+                        </view>
+                    </swiper-item>
+                </swiper>
             </view>
         </view>
     </app-layout>
@@ -10,23 +44,162 @@
 
 <script>
 import AppLayout from "@/components/layout/layout";
+import GetAction from "@/components/get/action";
 export default {
     name: "get-index",
     data() {
-        return {};
+        return {
+            utils: this.$utils,
+            safePt: 0,
+            tabIndex: 0,
+            tabHeight: 0,
+            tabList: [
+                {
+                    id: 1,
+                    name: "一口价订单",
+                    list: [
+                        {
+                            id: 1,
+                            orderId: "xxgfdkgn1223",
+                            cate: "家具安装",
+                            content: "我想要安装一个书柜，需要上墙啊啊啊啊",
+                            createTime: "2022-10-18 10:56:34",
+                            serviceTime: "2022-10-18 10:56:34",
+                            orderType: 1,
+                            state: 1,
+                            price: 306,
+                            username: "李先生",
+                        },
+                        {
+                            id: 2,
+                            orderId: "xxgfdkgn1223",
+                            cate: "家具安装",
+                            content: "我想要安装一个书柜，需要上墙啊啊啊啊",
+                            createTime: "2022-10-18 10:56:34",
+                            serviceTime: "2022-10-18 10:56:34",
+                            orderType: 1,
+                            state: 1,
+                            price: 306,
+                            username: "李先生",
+                        },
+                    ],
+                },
+                {
+                    id: 2,
+                    name: "报价订单",
+                    list: [],
+                },
+                {
+                    id: 3,
+                    name: "指派订单",
+                    list: [],
+                },
+                {
+                    id: 4,
+                    name: "配送订单",
+                    list: [],
+                },
+            ],
+        };
     },
     components: {
         AppLayout,
+        GetAction,
+    },
+    onLoad() {
+        this.$nextTick(() => {
+            this.setTabHeight();
+        });
     },
-    onLoad() {},
     onShow() {},
     onReady() {},
     onReachBottom() {},
     onPullDownRefresh() {},
-    methods: {},
+    methods: {
+        switchTab(index) {
+            this.tabIndex = index;
+            this.$nextTick(() => {
+                this.setTabHeight();
+            });
+        },
+        changeTab(e) {
+            this.switchTab(e.detail.current);
+        },
+        setTabHeight() {
+            let query = uni.createSelectorQuery().in(this);
+            query.select(".tab" + this.tabIndex).boundingClientRect();
+            query.exec((res) => {
+                if (res && res[0]) {
+                    this.tabHeight = res[0].height;
+                }
+            });
+            console.log(this.tabHeight);
+        },
+    },
 };
 </script>
 
 <style lang="less" scoped>
-
+.getorder-container {
+    width: 100%;
+}
+.scroll-cate {
+    z-index: 15;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background-color: #7286f1;
+}
+.cate-group {
+    width: 100%;
+    height: 96rpx;
+    white-space: nowrap;
+    box-sizing: border-box;
+    padding: 5rpx 0;
+    .cate-item {
+        display: inline-block;
+        height: 86rpx;
+        line-height: 86rpx;
+        margin: 0 20rpx;
+        color: #ffffff;
+    }
+    .cate-item.active {
+        box-sizing: border-box;
+        border-bottom: 7rpx solid #ffffff;
+    }
+}
+.order-group {
+    z-index: 10;
+    position: relative;
+    padding-top: 131rpx;
+    width: 100%;
+    .order-item {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0 28rpx;
+        background-color: #ffffff;
+        margin-bottom: 35rpx;
+    }
+    .order-item:last-child {
+        margin-bottom: 0;
+    }
+    .order-head {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .title {
+            font-size: 30rpx;
+            font-weight: bold;
+            color: #000000;
+            line-height: 30rpx;
+        }
+        .more {
+            font-size: 26rpx;
+            font-weight: bold;
+            color: #666666;
+            line-height: 26rpx;
+        }
+    }
+}
 </style>
\ No newline at end of file