From 36fee17b9c4d1856ebd965bec2af33916fcb3f65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?TOP=E7=B3=AF=E7=B1=B3?= <1130395124@qq.com>
Date: Sat, 4 Mar 2023 01:01:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=A4=A7=E5=8E=85=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=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     |   4 +-
 src/components/get/post-price.vue | 115 ++++++++++++++++++++++++++++++
 src/components/order/action.vue   |   6 +-
 src/pages/get/detail.vue          |  24 -------
 src/pages/get/index.vue           |  16 +++--
 src/pages/order/detail.vue        |  32 +++++++--
 src/pages/order/order.vue         |   8 +--
 src/store/modules/order.js        |   7 ++
 8 files changed, 167 insertions(+), 45 deletions(-)
 create mode 100644 src/components/get/post-price.vue
 delete mode 100644 src/pages/get/detail.vue

diff --git a/src/components/get/action.vue b/src/components/get/action.vue
index 195afc5..8ab56f1 100644
--- a/src/components/get/action.vue
+++ b/src/components/get/action.vue
@@ -1,9 +1,9 @@
 <template>
     <view class="component-get-action">
-        <view class="btn active" @click="getOrder" v-if="order.orderType == models.order.type.NORMAL">
+        <view class="btn active" @click.stop="getOrder" v-if="order.orderType == models.order.type.NORMAL">
             <text>立即抢单</text>
         </view>
-        <view class="btn active" @click="postPrice" v-if="order.orderType == models.order.type.WORKER_PRICE">
+        <view class="btn active" @click.stop="postPrice" v-if="order.orderType == models.order.type.WORKER_PRICE">
             <text>立即报价</text>
         </view>
     </view>
diff --git a/src/components/get/post-price.vue b/src/components/get/post-price.vue
new file mode 100644
index 0000000..dee155a
--- /dev/null
+++ b/src/components/get/post-price.vue
@@ -0,0 +1,115 @@
+<template>
+    <view class="get-post-price">
+        <widget-modal title="提交报价" @close="closeModal">
+            <view class="modal-content">
+                <view class="input-row">
+                    <text class="title">需要支付</text>
+                    <input class="input" type="number" v-model="price" @input="price = parseFloat(price)" />
+                    <text class="unit">
+                        <text class="iconfont icon-qingchu" @click="price = 0"></text>
+                        <text class="text">元</text>
+                    </text>
+                </view>
+                <view class="desc">
+                    <text class="text">1)哈哈哈哈</text>
+                    <text class="text">2)哈哈哈哈哈哈哈哈</text>
+                </view>
+                <view class="btn" @click="confirmPrice">确认</view>
+            </view>
+        </widget-modal>
+    </view>
+</template>
+
+<script>
+import WidgetModal from "@/components/widgets/modal";
+import { mapState } from "vuex";
+export default {
+    name: "get-post-price",
+    data() {
+        return {
+            price: 0,
+        };
+    },
+    props: {},
+    computed: {
+        ...mapState("order", {
+            postId: (state) => state.postId,
+        }),
+    },
+    components: {
+        WidgetModal,
+    },
+    created() {},
+    mounted() {},
+    destroyed() {},
+    watch: {},
+    methods: {
+        closeModal() {
+            this.$store.commit("order/setConfirmId", 0);
+            this.price = 0;
+            this.$emit("close");
+        },
+        confirmPrice() {
+            console.log("当前id：" + this.postId + "，价格：" + this.price);
+            this.$emit("confirm");
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.get-post-price {
+    .modal-content {
+        width: 100%;
+        .desc {
+            padding: 24rpx 0;
+            .text {
+                display: block;
+                font-size: 24rpx;
+                color: #999999;
+                line-height: 36rpx;
+            }
+        }
+        .btn {
+            width: 100%;
+            height: 68rpx;
+            line-height: 68rpx;
+            text-align: center;
+            font-size: 32rpx;
+            color: #ffffff;
+            background-color: #7286f1;
+            margin-top: 15rpx;
+        }
+    }
+    .input-row {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 40rpx 0;
+        border-bottom: 4rpx solid #f5f5f5;
+        .title {
+            font-size: 28rpx;
+            color: #666666;
+        }
+        .input {
+            width: 308rpx;
+            height: 72rpx;
+            box-sizing: border-box;
+            border: 1px solid #d8d8d8;
+            text-align: center;
+        }
+        .unit {
+            color: #333333;
+        }
+        .iconfont {
+            display: inline-block;
+            font-size: 30rpx;
+            margin-right: 22rpx;
+        }
+        .text {
+            font-size: 28rpx;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/order/action.vue b/src/components/order/action.vue
index 1bee75f..db2e8ec 100644
--- a/src/components/order/action.vue
+++ b/src/components/order/action.vue
@@ -3,7 +3,7 @@
         <view class="btn">
             <text>立即抢单</text>
         </view>
-        <view class="btn" @click.stop="setPrice">
+        <view class="btn" @click.stop="confirmPrice">
             <text>尾款确认</text>
         </view>
         <view v-if="false" class="btn">
@@ -40,8 +40,8 @@ export default {
     mounted() {},
     destroyed() {},
     methods: {
-        setPrice() {
-            this.$emit("setPrice");
+        confirmPrice() {
+            this.$emit("confirmPrice");
         },
     },
 };
diff --git a/src/pages/get/detail.vue b/src/pages/get/detail.vue
deleted file mode 100644
index 445742c..0000000
--- a/src/pages/get/detail.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<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 2560b57..4abbca4 100644
--- a/src/pages/get/index.vue
+++ b/src/pages/get/index.vue
@@ -20,7 +20,7 @@
                 <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">
+                            <view class="order-item-box" v-for="(v, k) in item.list" :key="k" @click.stop="toDetail(v.id)">
                                 <order-item :order="v">
                                     <view class="order-action">
                                         <view class="price">¥ 306.00</view>
@@ -43,7 +43,7 @@
                 <text class="text">刷新列表</text>
             </view>
         </view>
-        <widget-modal title="报价" :show="postModal" @close="postModal = false"> 开始报价 </widget-modal>
+        <get-post-price v-show="showPriceModal" @close="showPriceModal = false" @confirm="showPriceModal = false" />
     </app-layout>
 </template>
 
@@ -51,13 +51,13 @@
 import AppLayout from "@/components/layout/layout";
 import GetAction from "@/components/get/action";
 import OrderItem from "@/components/order/item";
-import WidgetModal from "@/components/widgets/modal";
+import GetPostPrice from "@/components/get/post-price";
 export default {
     name: "get-index",
     data() {
         return {
             utils: this.$utils,
-            postModal: false,
+            showPriceModal: false,
             safePt: 0,
             tabIndex: 0,
             tabHeight: 0,
@@ -139,7 +139,7 @@ export default {
         AppLayout,
         GetAction,
         OrderItem,
-        WidgetModal,
+        GetPostPrice,
     },
     onLoad() {
         this.$nextTick(() => {
@@ -170,7 +170,8 @@ export default {
             });
         },
         postPrice(id) {
-            this.postModal = true;
+            this.$store.commit("order/setPostId", id);
+            this.showPriceModal = true;
         },
         setting() {
             console.log("设置");
@@ -178,6 +179,9 @@ export default {
         refresh() {
             console.log("刷新");
         },
+        toDetail(id) {
+            this.$utils.toPage("/pages/order/detail?type=preview&id=" + id);
+        },
     },
 };
 </script>
diff --git a/src/pages/order/detail.vue b/src/pages/order/detail.vue
index 5c6e270..f50bdda 100644
--- a/src/pages/order/detail.vue
+++ b/src/pages/order/detail.vue
@@ -78,17 +78,25 @@
                 <text class="text">客服</text>
             </view>
             <view class="action">
-                <order-action :order="order" @setPrice="showPriceModal(order.id)" />
+                <block v-if="type == 'detail'">
+                    <order-action :order="order" @confirmPrice="confirmPrice(order.id)" />
+                </block>
+                <block v-if="type == 'preview'">
+                    <get-action :order="order" @postPrice="postPrice(order.id)" />
+                </block>
             </view>
         </view>
-        <order-confirm-price v-show="showModal" @close="showModal = false" @confirm="showModal = false" />
+        <order-confirm-price v-show="showConfirmModal" @close="showConfirmModal = false" @confirm="showConfirmModal = false" />
+        <get-post-price v-show="showPriceModal" @close="showPriceModal = false" @confirm="showPriceModal = false" />
     </app-layout>
 </template>
 
 <script>
 import AppLayout from "@/components/layout/layout";
 import OrderAction from "@/components/order/action";
+import GetAction from "@/components/get/action";
 import OrderConfirmPrice from "@/components/order/confirm-price";
+import GetPostPrice from "@/components/get/post-price";
 import { mapState } from "vuex";
 export default {
     name: "order-detail",
@@ -96,7 +104,9 @@ export default {
         return {
             utils: this.$utils,
             models: this.$models,
-            showModal: false,
+            showPriceModal: false,
+            showConfirmModal: false,
+            type: "detail",
             order: {
                 id: 1,
                 orderId: "xxgfdkgn1223",
@@ -107,7 +117,7 @@ export default {
                     date: "2022-10-18",
                     time: ["14:00", "18:00"],
                 },
-                orderType: 1,
+                orderType: 2,
                 state: 1,
                 price: 306,
                 username: "李先生",
@@ -131,7 +141,9 @@ export default {
     components: {
         AppLayout,
         OrderAction,
+        GetAction,
         OrderConfirmPrice,
+        GetPostPrice,
     },
     computed: {
         ...mapState({
@@ -143,6 +155,10 @@ export default {
             this.id = e.id;
         } else {
             this.$utils.toast("参数错误");
+            return;
+        }
+        if (e.type == "preview") {
+            this.type = e.type;
         }
     },
     onShow() {},
@@ -162,9 +178,13 @@ export default {
                 },
             });
         },
-        showPriceModal(id) {
+        confirmPrice(id) {
             this.$store.commit("order/setConfirmId", id);
-            this.showModal = true;
+            this.showConfirmModal = true;
+        },
+        postPrice(id) {
+            this.$store.commit("order/setPostId", id);
+            this.showPriceModal = true;
         },
     },
 };
diff --git a/src/pages/order/order.vue b/src/pages/order/order.vue
index 4cc586c..fbaf5e9 100644
--- a/src/pages/order/order.vue
+++ b/src/pages/order/order.vue
@@ -47,7 +47,7 @@
                 </swiper>
             </view>
         </view>
-        <order-confirm-price v-show="showModal" @close="showModal = false" @confirm="showModal = false" />
+        <order-confirm-price v-show="showConfirmModal" @close="showConfirmModal = false" @confirm="showConfirmModal = false" />
     </app-layout>
 </template>
 
@@ -62,7 +62,7 @@ export default {
     data() {
         return {
             utils: this.$utils,
-            showModal: false,
+            showConfirmModal: false,
             safePt: 0,
             tabIndex: 0,
             tabHeight: 0,
@@ -188,10 +188,10 @@ export default {
         },
         showPriceModal(id) {
             this.$store.commit("order/setConfirmId", id);
-            this.showModal = true;
+            this.showConfirmModal = true;
         },
         toDetail(id) {
-            this.$utils.toPage("/pages/order/detail?id=" + id);
+            this.$utils.toPage("/pages/order/detail?type=detail&id=" + id);
         },
     },
 };
diff --git a/src/store/modules/order.js b/src/store/modules/order.js
index 97996a7..520bca6 100644
--- a/src/store/modules/order.js
+++ b/src/store/modules/order.js
@@ -2,15 +2,22 @@ export default {
     namespaced: true,
     state: {
         confirmId: 0,
+        postId: 0,
     },
     getters: {
         getConfirmId(state) {
             return state.confirmId;
+        },
+        getPostId(state) {
+            return state.postId;
         }
     },
     mutations: {
         setConfirmId(state, data) {
             state.confirmId = data;
+        },
+        setPostId(state, data) {
+            state.postId = data;
         }
     },
     actions: {}