From 6be5f2a51e8d8d993d78c5851c05ca88c5aa6942 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?TOP=E7=B3=AF=E7=B1=B3?= <1130395124@qq.com>
Date: Fri, 3 Mar 2023 00:26:01 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=AE=A2=E5=8D=95=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/order/action.vue     |  78 ++++++++++
 src/components/widgets/loadmore.vue |  51 +++++++
 src/pages/order/order.vue           | 222 +++++++++++++++++++++++++++-
 3 files changed, 345 insertions(+), 6 deletions(-)
 create mode 100644 src/components/order/action.vue
 create mode 100644 src/components/widgets/loadmore.vue

diff --git a/src/components/order/action.vue b/src/components/order/action.vue
new file mode 100644
index 0000000..289843a
--- /dev/null
+++ b/src/components/order/action.vue
@@ -0,0 +1,78 @@
+<template>
+    <view class="component-order-action">
+        <view class="btn">
+            <text>立即抢单</text>
+        </view>
+        <view class="btn active">
+            <text>立即报价</text>
+        </view>
+        <view v-if="false" class="btn normal">
+            <text>已完成</text>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    name: "component-order-action",
+    data() {
+        return {
+            models: this.$models,
+        };
+    },
+    props: {
+        date: {
+            type: Object,
+            default: () => {},
+        },
+    },
+    props: {
+        order: {
+            type: Object,
+            default: () => {},
+        },
+    },
+    components: {},
+    created() {},
+    mounted() {},
+    destroyed() {},
+    methods: {
+        getOrder() {
+            console.log("获取" + this.order.id);
+        },
+        postPrice() {
+            this.$emit("postPrice");
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.component-order-action {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    .btn {
+        display: block;
+        font-size: 26rpx;
+        padding: 16rpx 30rpx;
+        line-height: 26rpx;
+        border-radius: 30rpx;
+        margin-left: 20rpx;
+        color: #999999;
+        box-sizing: border-box;
+        border: 1px solid #999999;
+    }
+    .btn.active {
+        color: #ffffff;
+        background-color: #8b9beb;
+        border: 1px solid #8b9beb;
+    }
+    .btn.normal {
+        color: #999999;
+        background-color: unset;
+        padding: 0;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/widgets/loadmore.vue b/src/components/widgets/loadmore.vue
new file mode 100644
index 0000000..86c4fa8
--- /dev/null
+++ b/src/components/widgets/loadmore.vue
@@ -0,0 +1,51 @@
+<template>
+    <view class="component-widgets-loadmore">
+        <view class="text" v-if="!hasMore" @click="loadmore">
+            <text>我已经到底了~</text>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    name: "component-widgets-loadmore",
+    data() {
+        return {
+            page: 1,
+        };
+    },
+    props: {
+        hasMore: {
+            type: Boolean,
+            default: true,
+        },
+        initPage: {
+            type: Number,
+            default: 1,
+        },
+    },
+    components: {},
+    created() {
+        this.page = this.initPage;
+    },
+    mounted() {},
+    destroyed() {},
+    methods: {
+        loadmore() {
+            this.$emit("loadmore", this.page);
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.component-widgets-loadmore {
+    width: 100%;
+    text-align: center;
+    .text {
+        font-size: 22rpx;
+        font-weight: bold;
+        color: #a0a0a0;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/order/order.vue b/src/pages/order/order.vue
index 96acea5..501c3fb 100644
--- a/src/pages/order/order.vue
+++ b/src/pages/order/order.vue
@@ -1,24 +1,234 @@
 <template>
-    <app-layout title="订单" btnType="unset"></app-layout>
+    <app-layout v-model="safePt" title="订单" btnType="unset">
+        <view class="order-container">
+            <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-box" v-for="(v, k) in item.list" :key="k">
+                                <order-item :order="v">
+                                    <view class="order-action">
+                                        <view class="price">¥ 306.00</view>
+                                        <order-action :order="v" @postPrice="postPrice(v.id)" />
+                                    </view>
+                                </order-item>
+                            </view>
+                            <view class="loadmore-box">
+                                <load-more :hasMore="false" />
+                            </view>
+                        </view>
+                    </swiper-item>
+                </swiper>
+            </view>
+        </view>
+    </app-layout>
 </template>
 
 <script>
 import AppLayout from "@/components/layout/layout";
+import OrderItem from "@/components/order/item";
+import OrderAction from "@/components/order/action";
+import LoadMore from "@/components/widgets/loadmore";
 export default {
-    name: "order",
+    name: "get-index",
     data() {
-        return {};
+        return {
+            utils: this.$utils,
+            postModal: false,
+            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: 3,
+                            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: 2,
+                            orderId: "xxgfdkgn1223",
+                            cate: "家具安装",
+                            content: "我想要安装一个书柜，需要上墙啊啊啊啊",
+                            createTime: "2022-10-18 10:56:34",
+                            serviceTime: "2022-10-18 10:56:34",
+                            orderType: 2,
+                            state: 1,
+                            price: 306,
+                            username: "李先生",
+                        },
+                    ],
+                },
+                {
+                    id: 3,
+                    name: "服务中",
+                    list: [],
+                },
+                {
+                    id: 4,
+                    name: "完工/关闭",
+                    list: [],
+                },
+                {
+                    id: 5,
+                    name: "退款",
+                    list: [],
+                },
+            ],
+        };
     },
     components: {
         AppLayout,
+        OrderItem,
+        OrderAction,
+        LoadMore,
+    },
+    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;
+                }
+            });
+        },
+    },
 };
 </script>
 
-<style lang="less" scoped></style>
\ No newline at end of file
+<style lang="less" scoped>
+.order-container {
+    width: 100%;
+    padding-bottom: 50rpx;
+}
+.scroll-cate {
+    z-index: 15;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background-color: #f7a134;
+}
+.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;
+    width: 100%;
+    box-sizing: border-box;
+    padding-top: 122rpx;
+    .order-item-box {
+        margin-bottom: 26rpx;
+        background-color: #ffffff;
+        box-sizing: border-box;
+        padding: 0 40rpx;
+        .order-action {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+        .price {
+            width: 250rpx;
+            font-size: 42rpx;
+            font-weight: bold;
+            color: #ec7655;
+            line-height: 42rpx;
+            flex-shrink: 0;
+        }
+    }
+    .loadmore-box {
+        padding: 20rpx 0;
+    }
+}
+</style>
\ No newline at end of file