增加服务时间修改

src/components/order/change-time.vue

@@ -0,0 +1,118 @@
+<template>
+    <view class="components-order-change-time">
+        <widget-modal title="修改时间" @close="close">
+            <view class="common-form-container form-widget modal">
+                <view class="input-item">
+                    <view class="common-form-widget-group">
+                        <view class="input-box">
+                            <view class="widget-item">
+                                <text class="iconfont icon-shijian icon"></text>
+                                <picker mode="date" @change="bindDateChange" class="picker">
+                                    <text class="title">
+                                        <text class="limit-line clamp-1">
+                                            {{ changeTimeData.date ? changeTimeData.date : "选择期望上门日期" }}
+                                        </text>
+                                    </text>
+                                </picker>
+                                <text class="iconfont icon-jinru more"></text>
+                            </view>
+                            <view class="widget-item">
+                                <text class="iconfont icon-shijian icon"></text>
+                                <picker mode="time" @change="bindTimeChange" class="picker">
+                                    <text class="title">
+                                        <text class="limit-line clamp-1">
+                                            {{ changeTimeData.time ? changeTimeData.time : "选择期望上门时间" }}
+                                        </text>
+                                    </text>
+                                </picker>
+                                <text class="iconfont icon-jinru more"></text>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+                <view class="btn" @click="submit">提交</view>
+            </view>
+        </widget-modal>
+    </view>
+</template>
+
+<script>
+import WidgetModal from "@/components/widgets/modal";
+export default {
+    name: "order-change-time",
+    data() {
+        return {
+            changeTimeData: {
+                date: "",
+                time: "",
+            },
+        };
+    },
+    props: {
+        id: {
+            type: [Number, String],
+            default: 0,
+        },
+    },
+    components: {
+        WidgetModal,
+    },
+    created() {},
+    mounted() {},
+    destroyed() {},
+    watch: {
+        id() {
+            this.changeTimeData = {
+                date: "",
+                time: "",
+            };
+        },
+    },
+    methods: {
+        bindDateChange(e) {
+            this.changeTimeData.date = e.detail.value;
+        },
+        bindTimeChange(e) {
+            this.changeTimeData.time = e.detail.value;
+        },
+        close() {
+            this.$emit("close");
+        },
+        submit() {
+            this.$emit("submit", this.changeTimeData);
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.components-order-change-time {
+    .common-form-container.modal {
+        width: 100%;
+        .btn {
+            width: 300rpx;
+            height: 60rpx;
+            line-height: 60rpx;
+            background-color: #7286f1;
+            color: #ffffff;
+            text-align: center;
+            font-size: 28rpx;
+            margin: 30rpx auto 0 auto;
+        }
+        .input-item {
+            height: auto;
+            .input-box {
+                padding: 0;
+            }
+        }
+        .common-form-widget-group {
+            .widget-item {
+                padding: 30rpx;
+                .title {
+                    padding: 30rpx 80rpx 30rpx 100rpx;
+                }
+            }
+        }
+    }
+}
+</style>

src/components/order/item.vue

@@ -32,6 +32,12 @@
             <view class="order-desc-row">
                 <text class="title">服务时间：</text>
                 <text class="text">{{ order.serviceTime }}</text>
+                <block v-if="order.listType == 't2'">
+                    <view class="btn" @click.stop="changeTime">
+                        <text class="iconfont icon-bianji"></text>
+                        <text class="btn-desc">修改时间</text>
+                    </view>
+                </block>
             </view>
             <!-- 购买订单|报/议价订单|货运订单 可展示师傅信息 -->
             <block v-if="order.listType == 't1' || order.listType == 't2' || order.listType == 't3'">
@@ -124,6 +130,9 @@ export default {
                 },
             });
         },
+        changeTime() {
+            this.$emit("changeTime");
+        },
     },
 };
 </script>
@@ -179,6 +188,22 @@ export default {
             color: #8194f2;
             margin-left: 24rpx;
         }
+        .btn {
+            position: absolute;
+            top: 0;
+            right: 0;
+            display: flex;
+            align-items: center;
+            line-height: 30rpx;
+            color: #999999;
+        }
+        .btn-desc {
+            font-size: 24rpx;
+        }
+        .iconfont {
+            font-size: 30rpx;
+            margin-right: 4rpx;
+        }
     }
     .order-desc-row:last-child {
         margin-bottom: 0;

src/core/apis.js

@@ -281,6 +281,19 @@ export default {
                 url: ""
             }
         },
+        changeServiceTime: {
+            t1: {
+                url: "",
+            },
+            t2: {
+                url: "/wxapp/orderb/saveordrbyid",
+                showLoading: true,
+                auth: true,
+            },
+            t3: {
+                url: ""
+            }
+        },
         chooseWorker: {
             url: "/wxapp/orderb/chooseshifu",
             showLoading: true,

src/core/models/order.js

@@ -345,5 +345,18 @@ export default {
                 return reject(response.msg);
             }).catch(e => { });
         });
-    }
+    },
+    /**
+     * 修改服务时间
+     */
+    changeServiceTime(options) {
+        return new Promise((resolve, reject) => {
+            prototype.$request(options.request).then(response => {
+                if (response.code == 1) {
+                    return resolve(response);
+                }
+                return reject(response.msg);
+            }).catch(e => { });
+        });
+    },
 }

src/pages/order/detail.vue

@@ -79,6 +79,12 @@
                             <view class="info-row">
                                 <text class="title">服务时间：</text>
                                 <text class="text">{{ order.serviceTime }}</text>
+                                <block v-if="order.listType == 't2'">
+                                    <view class="btn" @click.stop="changeTime(order)">
+                                        <text class="iconfont icon-bianji"></text>
+                                        <text class="btn-desc">修改时间</text>
+                                    </view>
+                                </block>
                             </view>
                         </block>
                         <block v-if="listType == 't3'">
@@ -162,6 +168,12 @@
             </view>
         </view>
         <widget-service :showService="showService" @close="showService = false" />
+        <app-order-change-time
+            v-show="changeTimeData.changeTimeModal"
+            :id="changeTimeData.data.id"
+            @close="changeTimeData.changeTimeModal = false"
+            @submit="submit"
+        />
     </app-layout>
 </template>
 
@@ -171,6 +183,7 @@ import WorkerItem from "@/components/worker/item";
 import ServiceInsurance from "@/components/service/insurance";
 import OrderAction from "@/components/order/action";
 import WidgetService from "@/components/widgets/service";
+import AppOrderChangeTime from "@/components/order/change-time";
 export default {
     name: "order-detail",
     data() {
@@ -191,6 +204,10 @@ export default {
             },
             showDetail: false,
             showList: false,
+            changeTimeData: {
+                changeTimeModal: false,
+                data: {},
+            },
         };
     },
     components: {
@@ -199,6 +216,7 @@ export default {
         ServiceInsurance,
         OrderAction,
         WidgetService,
+        AppOrderChangeTime,
     },
     async onLoad(e) {
         this.pageConfig = getApp().globalData.pageConfig;
@@ -332,6 +350,39 @@ export default {
                 current: index,
             });
         },
+        /**
+         * 修改服务时间
+         */
+        changeTime(item) {
+            this.changeTimeData.data = item;
+            this.changeTimeData.changeTimeModal = true;
+        },
+        /**
+         * 提交修改
+         */
+        submit(data) {
+            if (!data.date || !data.time) {
+                return this.$utils.toast("请选择日期和时间");
+            }
+            let datetime = data.date + " " + data.time;
+            this.$models.order
+                .changeServiceTime({
+                    request: {
+                        api: "order.changeServiceTime." + this.listType,
+                        data: {
+                            id: this.changeTimeData.data.id,
+                            times: datetime,
+                        },
+                    },
+                })
+                .then(() => {
+                    this.changeTimeData.data.serviceTime = datetime;
+                    this.changeTimeData.changeTimeModal = false;
+                })
+                .catch((e) => {
+                    this.$utils.toast(e);
+                });
+        },
     },
 };
 </script>
@@ -486,6 +537,22 @@ export default {
             color: #8194f2;
             margin-left: 24rpx;
         }
+        .btn {
+            position: absolute;
+            top: 0;
+            right: 0;
+            display: flex;
+            align-items: center;
+            line-height: 30rpx;
+            color: #999999;
+        }
+        .btn-desc {
+            font-size: 24rpx;
+        }
+        .iconfont {
+            font-size: 30rpx;
+            margin-right: 4rpx;
+        }
     }
     .info-row:last-child {
         margin-bottom: 0;
@@ -528,20 +595,4 @@ export default {
         }
     }
 }
-.common-bottom-components {
-    .service {
-        display: flex;
-        align-items: center;
-        .iconfont {
-            font-size: 60rpx;
-            color: #999999;
-        }
-        .text {
-            display: inline-block;
-            font-size: 28rpx;
-            color: #999999;
-            margin-left: 10rpx;
-        }
-    }
-}
 </style>

src/pages/order/order.vue

@@ -29,7 +29,7 @@
                                     :key="index"
                                     @click="toDetail(item.id, item.state, item.listType, item.orderType)"
                                 >
-                                    <order-item :order="item" :index="index">
+                                    <order-item :order="item" :index="index" @changeTime="changeTime(item)">
                                         <view class="action-group">
                                             <view class="price">
                                                 <block v-if="item.listType == 't1' || item.listType == 't3'">
@@ -49,6 +49,12 @@
                 </block>
             </swiper>
         </view>
+        <app-order-change-time
+            v-show="changeTimeData.changeTimeModal"
+            :id="changeTimeData.data.id"
+            @close="changeTimeData.changeTimeModal = false"
+            @submit="submit"
+        />
     </app-layout>
 </template>
 
@@ -57,6 +63,7 @@ import AppLayout from "@/components/layout/layout";
 import OrderItem from "@/components/order/item";
 import OrderAction from "@/components/order/action";
 import WidgetLoadMore from "@/components/widgets/loadmore";
+import AppOrderChangeTime from "@/components/order/change-time";
 import { mapState } from "vuex";
 export default {
     name: "order",
@@ -64,6 +71,10 @@ export default {
         return {
             tabIndex: 0,
             tabHeight: 0,
+            changeTimeData: {
+                changeTimeModal: false,
+                data: {},
+            },
             tabList: [
                 {
                     listType: "t1",
@@ -94,6 +105,7 @@ export default {
         OrderItem,
         OrderAction,
         WidgetLoadMore,
+        AppOrderChangeTime,
     },
     computed: {
         ...mapState({
@@ -198,6 +210,40 @@ export default {
         refresh() {
             this.switchTab(this.tabIndex);
         },
+        /**
+         * 修改服务时间
+         */
+        changeTime(item) {
+            this.changeTimeData.data = item;
+            this.changeTimeData.changeTimeModal = true;
+        },
+        /**
+         * 提交修改
+         */
+        submit(data) {
+            if (!data.date || !data.time) {
+                return this.$utils.toast("请选择日期和时间");
+            }
+            let currentTab = this.tabList[this.tabIndex];
+            let datetime = data.date + " " + data.time;
+            this.$models.order
+                .changeServiceTime({
+                    request: {
+                        api: "order.changeServiceTime." + currentTab.listType,
+                        data: {
+                            id: this.changeTimeData.data.id,
+                            times: datetime,
+                        },
+                    },
+                })
+                .then(() => {
+                    this.changeTimeData.data.serviceTime = datetime;
+                    this.changeTimeData.changeTimeModal = false;
+                })
+                .catch((e) => {
+                    this.$utils.toast(e);
+                });
+        },
     },
 };
 </script>