完善接单大厅页面

src/App.vue

@@ -114,4 +114,22 @@ export default {
         color: #ffffff;
     }
 }
+// 底部固定按钮
+.common-bottom-components {
+    z-index: 20;
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    max-width: 750px;
+    width: 100%;
+    height: 100rpx;
+    margin: 0 auto;
+    box-sizing: border-box;
+    padding: 0 40rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: #ffffff;
+}
 </style>

src/components/get/action.vue

@@ -1,12 +1,21 @@
 <template>
-    <view class="component-get-action"> </view>
+    <view class="component-get-action">
+        <view class="btn" @click="getOrder" v-if="order.orderType == models.order.type.NORMAL">
+            <text>立即抢单</text>
+        </view>
+        <view class="btn" @click="postPrice" v-if="order.orderType == models.order.type.WORKER_PRICE">
+            <text>立即报价</text>
+        </view>
+    </view>
 </template>
 
 <script>
 export default {
     name: "component-get-action",
     data() {
-        return {};
+        return {
+            models: this.$models,
+        };
     },
     props: {
         date: {
@@ -14,12 +23,40 @@ export default {
             default: () => {},
         },
     },
+    props: {
+        order: {
+            type: Object,
+            default: () => {},
+        },
+    },
     components: {},
     created() {},
     mounted() {},
     destroyed() {},
-    methods: {},
+    methods: {
+        getOrder() {
+            console.log("获取" + this.order.id);
+        },
+        postPrice() {
+            this.$emit("postPrice");
+        },
+    },
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.component-get-action {
+    width: 100%;
+    text-align: right;
+    .btn {
+        display: inline-block;
+        font-size: 26rpx;
+        color: #ffffff;
+        padding: 18rpx 30rpx;
+        line-height: 26rpx;
+        background-color: #8b9beb;
+        border-radius: 30rpx;
+        margin-left: 20rpx;
+    }
+}
+</style>

src/components/order/item.vue

@@ -0,0 +1,124 @@
+<template>
+    <view class="component-order-item">
+        <view class="order-head">
+            <view class="title">{{ order.username }}-{{ order.cate }}</view>
+            <view class="more">
+                <text class="text">详情</text>
+                <text class="iconfont icon-jinru"></text>
+            </view>
+        </view>
+        <view class="order-body">
+            <view class="order-desc-row datetime">
+                <text class="text">{{ order.createTime }}</text>
+            </view>
+            <view class="order-desc-row">
+                <text class="title">订单编号：</text>
+                <text class="text">{{ order.orderId }}</text>
+            </view>
+            <view class="order-desc-row">
+                <text class="title">服务分类：</text>
+                <text class="text">{{ order.cate }}</text>
+            </view>
+            <view class="order-desc-row limit-line clamp-1">
+                <text class="title">需求内容：</text>
+                <text class="text">{{ order.content }}</text>
+            </view>
+            <view class="order-desc-row">
+                <text class="title">下单时间：</text>
+                <text class="text">{{ order.createTime }}</text>
+            </view>
+            <view class="order-desc-row">
+                <text class="title">服务时间：</text>
+                <text class="text">{{ order.serviceTime }}</text>
+            </view>
+        </view>
+        <view class="order-footer">
+            <slot></slot>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    name: "component-order-item",
+    data() {
+        return {};
+    },
+    props: {
+        order: {
+            type: Object,
+            default: () => {},
+        },
+    },
+    components: {},
+    created() {},
+    mounted() {},
+    destroyed() {},
+    methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.component-order-item {
+    .order-item {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0 28rpx;
+        background-color: #ffffff;
+        margin-bottom: 26rpx;
+    }
+    .order-item:last-child {
+        margin-bottom: 0;
+    }
+    .order-head {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding-top: 40rpx;
+        .title {
+            font-size: 30rpx;
+            font-weight: bold;
+            color: #000000;
+            line-height: 30rpx;
+        }
+        .more {
+            font-size: 26rpx;
+            font-weight: bold;
+            color: #666666;
+            line-height: 32rpx;
+        }
+    }
+    .order-body {
+        width: 100%;
+        border-bottom: 2rpx solid #e8e7e7;
+        padding: 24rpx 0;
+    }
+    .order-desc-row {
+        position: relative;
+        width: 100%;
+        font-size: 28rpx;
+        line-height: 30rpx;
+        margin-bottom: 22rpx;
+        .title {
+            color: #999999;
+        }
+        .text {
+            color: #000000;
+        }
+    }
+    .order-desc-row:last-child {
+        margin-bottom: 0;
+    }
+    .order-desc-row.datetime {
+        margin-bottom: 40rpx;
+        .text {
+            color: #999999;
+        }
+    }
+    .order-footer {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 24rpx 0;
+    }
+}
+</style>

src/pages/get/index.vue

@@ -20,36 +20,44 @@
                 <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 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>
+                                        <get-action :order="v" @postPrice="postPrice(v.id)" />
                                     </view>
-                                </view>
+                                </order-item>
                             </view>
                         </view>
                     </swiper-item>
                 </swiper>
             </view>
         </view>
+        <view class="common-bottom-components">
+            <view class="setting-btn" @click="setting">
+                <text class="iconfont icon-shezhi"></text>
+                <text class="text">接单设置</text>
+            </view>
+            <view class="refresh-btn" @click="refresh">
+                <text class="iconfont icon-shuaxin"></text>
+                <text class="text">刷新列表</text>
+            </view>
+        </view>
+        <widget-modal title="报价" :show="postModal" @close="postModal = false"> 开始报价 </widget-modal>
     </app-layout>
 </template>
 
 <script>
 import AppLayout from "@/components/layout/layout";
 import GetAction from "@/components/get/action";
+import OrderItem from "@/components/order/item";
+import WidgetModal from "@/components/widgets/modal";
 export default {
     name: "get-index",
     data() {
         return {
             utils: this.$utils,
+            postModal: false,
             safePt: 0,
             tabIndex: 0,
             tabHeight: 0,
@@ -82,12 +90,37 @@ export default {
                             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: [],
+                    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,
@@ -105,6 +138,8 @@ export default {
     components: {
         AppLayout,
         GetAction,
+        OrderItem,
+        WidgetModal,
     },
     onLoad() {
         this.$nextTick(() => {
@@ -133,7 +168,15 @@ export default {
                     this.tabHeight = res[0].height;
                 }
             });
-            console.log(this.tabHeight);
+        },
+        postPrice(id) {
+            this.postModal = true;
+        },
+        setting() {
+            console.log("设置");
+        },
+        refresh() {
+            console.log("刷新");
         },
     },
 };
@@ -142,6 +185,7 @@ export default {
 <style lang="less" scoped>
 .getorder-container {
     width: 100%;
+    padding-bottom: 120rpx;
 }
 .scroll-cate {
     z-index: 15;
@@ -172,33 +216,57 @@ export default {
 .order-group {
     z-index: 10;
     position: relative;
-    padding-top: 131rpx;
     width: 100%;
-    .order-item {
-        width: 100%;
-        box-sizing: border-box;
-        padding: 0 28rpx;
+    box-sizing: border-box;
+    padding-top: 122rpx;
+    .order-item-box {
+        margin-bottom: 26rpx;
         background-color: #ffffff;
-        margin-bottom: 35rpx;
+        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;
+        }
     }
-    .order-item:last-child {
-        margin-bottom: 0;
-    }
-    .order-head {
+}
+.common-bottom-components {
+    .setting-btn {
         display: flex;
         align-items: center;
-        justify-content: space-between;
-        .title {
-            font-size: 30rpx;
-            font-weight: bold;
-            color: #000000;
-            line-height: 30rpx;
+        flex-direction: column;
+        color: #999999;
+        .iconfont {
+            font-size: 46rpx;
         }
-        .more {
-            font-size: 26rpx;
-            font-weight: bold;
-            color: #666666;
-            line-height: 26rpx;
+        .text {
+            font-size: 24rpx;
+        }
+    }
+    .refresh-btn {
+        width: 520rpx;
+        height: 76rpx;
+        border: 1px solid #999999;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #999999;
+        .iconfont {
+            font-size: 46rpx;
+            margin-right: 24rpx;
+        }
+        .text {
+            font-size: 36rpx;
         }
     }
 }