订单部分完成

ghs/src/admin/home/order.vue

@@ -75,7 +75,7 @@
                 :key="s.type"
               >
                 <button
-                  @click="openBt(s)"
+                  @click.stop="openBt(s,item)"
                   v-if="s.disable == 1"
                   class="admin-button-com bule" >
                   {{s.type==='item'?'花材':s.type==='selfGet'?'自取':'发货'}}
@@ -99,31 +99,6 @@
       :size="32"
       padding="30rpx 30rpx"
     ></modal-module>
-
-		<!-- 选取分类 -->
-		<!-- <modal-module :show="classifyModal" :maskClosable="false" @cancel="modalCancel" @click="confirmClassify" title="订单分类" padding="30rpx 30rpx">
-			<template v-slot:content>
-				<div class="upload-confirm-wrap">
-					<div class="sel-wrap">
-						<div class="sel-tit">类型</div>
-						<div class="sel-btn">
-							<block v-for="(item, index) in categoryData" :key="index">
-								<button class="admin-button-com" :class="[classifyForm.categoryId == item.id ? '' : 'default']" @click="selCategoryFn(item)">{{ item.categoryName || '暂无' }}</button>
-							</block>
-						</div>
-					</div>
-					<div class="sel-wrap">
-						<div class="sel-tit">用途</div>
-						<div class="sel-btn">
-							<block v-for="(item, index) in usageData" :key="index">
-								<button class="admin-button-com" :class="[classifyForm.usageId == item.id ? '' : 'default']" @click="selUsageFn(item)">{{ item.usageName || '暂无' }}</button>
-							</block>
-						</div>
-					</div>
-				</div>
-			</template>
-		</modal-module> -->
-
   </div>
 </template>
 
@@ -218,11 +193,11 @@ export default {
 	},
   onLoad: function() {},
   onShow() {
-    let tabIndex = uni.getStorageSync("switchTabQuery") || null;
-    if (tabIndex) {
-      uni.removeStorageSync("switchTabQuery");
-      this.tabIndex = parseInt(tabIndex.tabIndex);
-    }
+    // let tabIndex = uni.getStorageSync("switchTabQuery") || null;
+    // if (tabIndex) {
+    //   uni.removeStorageSync("switchTabQuery");
+    //   this.tabIndex = parseInt(tabIndex.tabIndex);
+    // }
   },
   methods: {
     statusFormat(status){
@@ -248,9 +223,24 @@ export default {
           default:
               return ''
       } 
-    },
-    openBt(val){
+    }, // 操作按钮
+    openBt(val,item){
+      // 花材
+      if(s.item === 'item') {
 
+        // 自取
+      }else if(s.item === 'selfGet') {
+        this.freeShipModal = true;
+        this.operateData = item;
+        //发货 
+      }else if(s.item === 'send') {
+        this.pageTo({
+           url: '/pagesOrder/ship',
+            query: {
+              id: item.id
+            }
+        })
+      }
     },
     selectSussess(val){
       console.log(val)
@@ -287,19 +277,20 @@ export default {
       }
     },
     // 免发货
-    freeShippingFn(item, index) {
-      this.operateIndex = index;
-      this.operateData = item;
-      this.freeShipModal = true;
-    },
+    // freeShippingFn(item, index) {
+    //   // this.operateIndex = index;
+    //   this.operateData = item;
+    //   this.freeShipModal = true;
+    // },
     // 免发货
     freeShipModalClick(e) {
       if (e.index === 0) {
         this.modalCancel();
       } else {
-        this.$set(this.list.data[this.operateIndex], "status", 5);
-        this.$set(this.list.data[this.operateIndex], "sendType", 1);
-        freeShipping({ id: this.list.data[this.operateIndex].id }).then(res => {
+        // this.$set(this.list.data[this.operateIndex], "status", 5);
+        // this.$set(this.list.data[this.operateIndex], "sendType", 1);
+        freeShipping({ id: this.operateData.id }).then(res => {
+          this.init();
           this.$msg("操作成功！");
           this.modalCancel();
         });

ghs/src/api/order/index.js

@@ -119,3 +119,12 @@ export const orderClass = data => {
 export const orderUpdatePrice = data => {
 	return https.get('/order/update-price', data)
 }
+// =====================  new ========================
+// 计算运费
+export const freight = data => https.get('/order/freight', data)
+// 发快递
+export const thirdSend = data => https.get('/order/third-send', data)
+//  本店送
+export const selfSend = data => https.get('/order/self-send', data)
+
+export const reachOrder = data => https.get('/order/reach', data)

ghs/src/pagesClient/official/warn.vue

@@ -18,7 +18,7 @@
                     </view>
                     <view 
                         class="step-content_box">
-                        <tempelte v-if="index === 0">
+                        <template v-if="index === 0">
                             <view class="button-box">
                                 <button 
                                     @bindcontact="handleContact"
@@ -26,10 +26,10 @@
                                     open-type="contact">打开聊天框</button>
                             </view>
                             
-                        </tempelte>
-                        <tempelte v-else>
+                        </template>
+                        <template v-else>
                             <image class="step-img" :src="item.images" mode="widthFix"></image>
-                        </tempelte>
+                        </template>
                     </view>
                 </view>
             </view>

ghs/src/pagesOrder/components/stepShip.vue

@@ -0,0 +1,258 @@
+<template>
+    <view class="step-content_box">
+        <view 
+            v-if="!$util.isEmpty(orderComData)"
+            class="step-view_box">
+            <view 
+                v-for="(item,index) in orderComData"
+                :key="index"
+                class="step-li_box">
+                <view class="step-head_box">
+                    <view 
+                        v-if="index == 0"
+                        class="step-icon_num">
+                       <view class="dot"></view>
+                   </view>
+                    <view 
+                         v-else
+                        class="step-icon-def">
+                        <view class="dot"></view>
+                    </view>
+                   <view v-if="stepList.length - 1  !== index " class="step-line"></view>
+                </view>
+                <view class="step-main_box">
+                    <view class="step-tit">
+                        {{item.actionName}}
+                    </view>
+                    <view class="step-content_box">
+                        <!-- 送达 -->
+                        <template v-if="item.actionSign === 'reach'">
+                            <view class="reach-content_box">
+                                <button 
+                                    @click="affirmSend(item)"
+                                    v-if="item.status == 0"
+                                    class="admin-button-com blue big">
+                                    确认送达
+                                </button>
+                                <view 
+                                v-else
+                                class="reach-time_box">
+                                    {{item.finishTime}}
+                                </view>
+                            </view>
+                        </template>
+                        <!-- 发货 -->
+                        <template v-else-if="item.actionSign === 'deliver'">
+                            <!-- 没有选择发货方式0 -->
+                            <view 
+                                v-if="item.option == 0&&item.status == 0"
+                                class="deliver-opiton_0">
+                                <button 
+                                    @click="selfSend"
+                                    class="admin-button-com blue big">
+                                    本店送
+                                </button>
+                                <button 
+                                    @click="sendParcel"
+                                    class="admin-button-com blue big">
+                                    发快递
+                                </button>  
+                            </view>
+                            <view 
+                                v-else-if="item.option == 2"
+                                class="deliver-opiton_1">
+                                <view class="shipments-status_box">
+                                    <view>
+                                        配送方: {{sendInfo.sendSide}}
+                                    </view>
+                                    <view>
+                                        距离: {{sendInfo.distance}}
+                                    </view>
+                                    <view>
+                                        消费: {{sendInfo.distance}}
+                                    </view>
+                                    <view>
+                                        小费: {{sendInfo.tip}}
+                                    </view>
+                                    <view
+                                        :class="[sendInfo.status=='待接单'?'colorRed':'colorBlue']"
+                                        >
+                                        状态: {{sendInfo.status}}
+                                    </view>
+                                </view>
+                            </view>
+                            <!-- template -->
+                        </template>
+                        <!-- 下单 -->
+                        <template v-if="item.actionSign === 'placeOrder'">
+                            <view class="placeOrder-cotent_box">
+                                {{item.addTime}}
+                            </view>
+                        </template>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script> 
+    export default {
+        name:'stepShip',
+        comments:{
+        },
+        props:{
+            orderComData:{
+                type:Array,
+                default:()=>[]
+            }
+        },
+        data(){
+            return {
+                
+            }
+        },
+        methods:{
+            // 发快递
+            sendParcel(){
+                this.$emit('sendParcel')
+            }, // 本店送
+            selfSend(){
+                this.$emit('selfSend',{
+                    type:0,
+                    text:'确认自己送货?'
+                })
+            }, //确认送达
+            affirmSend(){
+                //  "option": 【0没有选择 1本店送 2发快递】
+                this.$emit('affirmSend',{
+                    type:1,
+                    text: item.option == 1?'确认送到了吗？':'快递送到后会自动帮你确认,确认要自己操作吗？'
+                })
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .step-content_box {
+        padding-bottom: 50upx;
+    }
+    .step-view_box {
+        margin-top: 20px;
+        padding:40px 25px 0px 20px;
+        background-color: #FFFFFF;
+        & .step-li_box {
+            display: flex;
+            & > .step-head_box {
+                position: relative;
+                & > .step-icon-def {
+                    width: 40px;
+                    height: 40px;
+                    background-color: transparent;
+                    position: relative;
+                    & .dot {
+                        width: 12upx;
+                        height: 12upx;
+                        background-color: #D8D8D8;
+                        border-radius: 50%;
+                        position: absolute;
+                        left: 50%;
+                        top: 50%;
+                        transform: translate(-50%,-50%);
+                    }
+                    
+                }
+                & > .step-icon_num {
+                    width: 40px;
+                    height: 40px;
+                    border-radius: 50%;
+                    background-color: #FDC3B8;
+                    // color: #FFFFFF;
+                    // font-size: 28px;
+                    position: relative;
+                    z-index: 50;
+                    & > .dot {
+                        width: 22upx;
+                        height: 22upx;
+                        border-radius: 50%;
+                        background-color: #F51608;
+                        position: absolute;
+                        left: 50%;
+                        top: 50%;
+                        transform: translate(-50%,-50%);
+                    }
+                }
+                & > .step-line {
+                    height: 100%;
+                    width: 0px;
+                    border-left: 1px solid #E2E4E8;;
+                    position: absolute;
+                    left: 50%;
+                    top: 50%;
+                    transform: translate(-50%, -50%);
+                    z-index: 45;
+                    
+                }
+            }
+            & > .step-main_box {
+                flex: 1;
+                padding-left: 20px;
+                & .step-tit {
+                    color: #141F25;
+                    font-size: 32px;
+                    font-weight: 600;
+                }
+                & .step-content_box {
+                    & .reach-content_box {
+                        padding:40upx 0 0upx;
+                        & > .admin-button-com {
+                            width: 100%;
+                        }
+                        & > .reach-time_box {
+                            color: #333333;
+                            font-size: 24;
+                            font-weight: 600;
+                        }
+                    }
+                    & .deliver-opiton_0 {
+                        padding: 60px 0 0px;
+                        & > .admin-button-com:nth-child(1){
+                            margin-right: 20px;
+                        }
+                        & > .admin-button-com {
+                            width: 310px;
+                            height: 90px;
+                            padding: 0;
+                            line-height: 90px;
+                            text-align: center;
+
+                        }
+                    }
+                    & .shipments-status_box {
+                        padding-top: 20px;
+                        & > view {
+                            color: #666666;
+                            font-size: 24px;
+                            font-weight: 400;
+                            line-height: 50px;
+                            &.colorRed {
+                                color: #F51608;
+                            }
+                            & .colorBlue{
+                                color: #049E2C;
+                            }
+                        }
+                    }
+                    & .placeOrder-cotent_box {
+                        color: #666666;
+                        font-size: 24upx;
+                        font-weight: 600;
+                        padding-top: 20upx;
+                    }
+
+                }
+            }
+        }
+    }
+</style>

ghs/src/pagesOrder/detail.vue

@@ -56,6 +56,12 @@
                   <view>2020 11-22</view>
               </view> -->
            </view>
+           <view class="content-box shipping-address">
+               <view>
+                   配送进展：<text>骑手已接单，取货中</text>
+               </view>
+               <i class="iconfont iconqishouyinying"></i>
+           </view>
            <view class="title">
                商品信息
            </view>
@@ -128,21 +134,31 @@
               >
            <button
                 :key="s.type"
-                @click="openBt(s)"
+                @click="openBt(s,detailInfo)"
                 v-if="s.disable == 1"
                 class="admin-button-com default" >
                 {{s.type==='item'?'花材':s.type==='selfGet'?'自取':'发货'}}
             </button>
         </template>
        </div>
+       <!-- 免发货弹窗 -->
+        <modal-module
+        :show="freeShipModal"
+        @cancel="modalCancel"
+        @click="freeShipModalClick"
+        content="确认已自取？"
+        color="#333"
+        :size="32"
+        padding="30rpx 30rpx"
+        ></modal-module>
     </view>
 </template>
 
 <script>
     import stepStatus from './components/stepStatus'
     import TuiListCell from '@/components/plugin/list-cell'
-    import { getDetail } from '@/api/order/index'
-    import {orderBtn} from '@/mixins'
+    import { getDetail,freeShipping } from '@/api/order/index'
+    // import {orderBtn} from '@/mixins'
     // import { copyText } from '@/utils/common'
     export default {
         name:'orderDetail',
@@ -150,17 +166,50 @@
             stepStatus,
             TuiListCell
         },
-        mixins:[orderBtn],
+        // mixins:[orderBtn],
         data(){
             return {
                 stepActive: 0,
                 form: {
                     name:''
                 },
-                detailInfo:{}
+                detailInfo:{},
+                freeShipModal: false,
             }
         },
         methods:{
+            freeShipModalClick(e){
+                if (e.index === 0) {
+                    this.modalCancel();
+                } else {
+                    freeShipping({ id: this.detailInfo.id }).then(res => {
+                    this.init();
+                    this.$msg("操作成功！");
+                    this.modalCancel();
+                    });
+                }
+            },
+            modalCancel(){
+                this.freeShipModal = false
+            },
+            openBt(s,item) {
+                    // 花材
+                    if(s.item === 'item') {
+
+                        // 自取
+                    }else if(s.item === 'selfGet') {
+                        this.freeShipModal = true;
+                        // this.operateData = item;
+                        //发货 
+                    }else if(s.item === 'send') {
+                        this.pageTo({
+                        url: '/pagesOrder/ship',
+                            query: {
+                            id: item.id
+                            }
+                        })
+                    }
+            },
             copy(val){
                const self = this
                 uni.setClipboardData({
@@ -342,6 +391,29 @@
 				}
 			}
         }
+        .shipping-address {
+            display: flex;
+            align-items: center;
+            margin-top: 20px;
+            & > view:nth-child(1) {
+                color: #999999;
+                font-size: 28upx;
+                font-weight: 400;
+                display: inline-block;
+                padding: 30upx 0 30upx 20upx;
+                flex: 1;
+                & > text {
+                    color: #333333;
+                    font-weight: 600;
+                    
+                }
+            }
+            & > view:nth-child(2) {
+                font-size: 60px;
+                color: #D6E7FF;
+                margin-right: 10px;
+            }
+        }
         .price-detail {
             margin-top: 20px;
             margin-bottom: 20px;

ghs/src/pagesOrder/ship.vue

@@ -4,7 +4,7 @@
 			<view class="order-info-list">
 				<view class="list-item">
 					<text>订单号</text>
-					<text>2929323</text>
+					<text>{{orderInfo.orderSn}}</text>
 				</view>
 				<view class="list-item">
 					<text>下单时间</text>
@@ -23,22 +23,174 @@
 				src="/static/images/default-img.png" mode="scaleToFill">
 			</image>
 		</view>
+		<view class="step-content_box">
+			<stepShip
+				@affirmSend="affirmSend"
+				@selfSend="selfSend"
+				@sendParcel="sendParcel"
+				:orderComData="orderComData">
+			</stepShip>
+		</view>
+		<!-- 快递送 -->
+        <modal-module
+			:show="shipModal"
+			:maskClosable="false"
+			@cancel="modalCancel"
+			@click="shipModalClick"
+			title="发快递"
+			padding="30rpx 30rpx"
+        >
+        <template v-slot:content>
+		  <view class="order-fa_box">
+			  <view class="order-fa_info">
+				  <view class="order-fa_top">
+					  <view>
+						  收
+					  </view>
+					  <view class="">
+						  {{orderInfo.receiveProvince + orderInfo.receiveCity}}
+					  </view>
+				  </view>
+				  <view>
+					  {{orderInfo.receiveAddress}}
+				  </view>
+				  <view>
+					  {{orderInfo.customName}}({{orderInfo.customMobile}})
+				  </view>
+			  </view>
+		  </view>
+          <view class="app-modal-input-wrap ship-modal">
+			<view class="inp-list-line">
+                <view class="line-label">配送方</view>
+                <view class="line-input">
+                <picker
+                    mode="selector"
+                    :range="deliveryList"
+                    @change="changeDeliveryFn"
+                    range-key="text"
+                    class="inp-select"
+                >
+                    <view v-if="form.sendSide">{{ sendSideText }}</view>
+                    <view class="tui-placeholder" v-else>请选择</view>
+                </picker>
+                </view>
+            </view>
+            <view class="inp-list-line">
+                <view class="line-label">送花时间</view>
+                <view class="line-input">
+					<picker
+						mode="multiSelector"
+						:range="timeList"
+						:value="timeValue"
+						@change="changeTimeFn"
+						class="inp-select"
+					>
+						<view v-if="form.sendTime">{{ form.sendTime }}</view>
+						<view class="tui-placeholder" v-else>默认10分钟后配送</view>
+					</picker>
+                </view>
+            </view>
+			<view class="inp-list-line">
+                <view class="line-label">运费</view>
+                <view class="line-input">
+					<view class="">
+						{{form.sendCost}}
+					</view>
+                </view>
+            </view>
+        	</view>
+        </template>
+        </modal-module>
+		<modal-module
+			:show="showSubmitModel"
+			@cancel="modalCancel"
+			@click="submitEvent"
+			:title="titText"
+			color="#333"
+			:size="32"
+			padding="30rpx 30rpx"
+		>
+		</modal-module>
 	</view>
 </template>
 
 <script>
-
-
-import { getDetB, orderSendDet } from '@/api/order'
+import stepShip from './components/stepShip'
+import { getDetB,
+ orderSendDet,
+ freight,
+ thirdSend,
+ selfSend,
+ reachOrder
+ } from '@/api/order'
+import ModalModule from "@/components/plugin/modal";
 export default {
 	name: 'admin-ship',
 	components: {
-
+		stepShip,
+		ModalModule
 	},
 	data() {
 		return {
+			showSubmitModel: false,
+			titText:'',
 			orderInfo: {},
-			orderComData: []
+			orderComData: [],
+			shipModal: false,
+                form:{
+                    sendTime:'',
+					sendSide: 2,
+					sendCost: 0
+                },
+                sendSideText:'达达配送',
+                deliveryList: [
+                    {
+                    text: "达达配送",
+                    key: 2
+					},
+					{
+                    text: "顺丰同城",
+                    key: 3
+					},
+					{
+                    text: "闪送",
+                    key: 4
+					},
+					{
+                    text: "美团",
+                    key: 5
+                    }
+				],
+				timeList: [
+					[
+					"1",
+					"2",
+					"3",
+					"4",
+					"5",
+					"6",
+					"7",
+					"8",
+					"9",
+					"10",
+					"11",
+					"12",
+					"13",
+					"14",
+					"15",
+					"16",
+					"17",
+					"18",
+					"19",
+					"20",
+					"21",
+					"22",
+					"23",
+					"24"
+					],
+					["00", "10", "20", "30", "40", "50"]
+			  ],
+			  currentTitType: {}
 		}
 	},
 	onLoad() {
@@ -53,14 +205,14 @@ export default {
 	},
 	methods: {
 		init() {
-			this.showIndex = this.option.pageStatus || 0
+			// this.showIndex = this.option.pageStatus || 0
 			this._getDet()
 			this._orderComDet()
-
+			this.freightCount()
 		},
 		_getDet() {
 			// this.option.id
-			return getDetB({ id: 78 }).then(res => {
+			return getDetB({ id: this.option.id }).then(res => {
 				this.orderInfo = res.data
 			})
 		},
@@ -69,6 +221,74 @@ export default {
 				this.orderComData = res.data
 			})
 		},
+		// 快递送
+		sendParcel(){
+			this.shipModal = true;
+		},
+		// 计算运费
+		freightCount(){
+			freight({
+				id: this.option.id,
+				sendSide: this.form.sendSide,
+			}).then(res=>{
+				this.form.sendCost = res.data.sndCost
+			})
+		},
+		//发货
+		shipModalClick(e){
+			if (e.index === 0){
+				this.modalCancel()
+			}else{
+				thirdSend({
+					id:this.option.id,
+					...this.form
+				}).then(res=>{
+					this.$msg('发货成功')
+					this.init()
+					this.modalCancel();
+				})
+			}
+			
+		},//关闭
+		modalCancel(){
+			this.shipModal = false;
+			this.showSubmitModel = false
+		}, // 自己送
+		selfSend(val){
+			this.currentTitType = val
+			this.titText = val.text;
+			this.showSubmitModel = true
+		}, // 确认
+		affirmSend(val){
+			this.currentTitType = val
+			this.titText = val.text;
+			this.showSubmitModel = true
+		}, // 确认送达 和 本店送
+		submitEvent(e){
+			if(e.index === 0) {
+				this.modalCancel()
+			}else{
+				let updateStatue = this.currentTitType.type == 0? selfSend:reachOrder
+				updateStatue({
+					id:this.option.id
+				}).then(res=>{
+					this.modalCancel()
+					this.$msg('发货状态已更新')
+					this.init()
+				})
+			}
+		},
+		changeTimeFn(e){
+			let oneIndex = e.detail.value[0] || 0;
+			let twoIndex = e.detail.value[1] || 0;
+			this.form.sendTime = this.timeList[0][oneIndex] + ":" + this.timeList[1][twoIndex];
+		},
+		changeDeliveryFn(e){
+			this.form.sendSide = this.deliveryList[e.detail.value].key;
+			this.sendSideText = this.deliveryList[e.detail.value].text;
+			// 平台不同运费重新计算
+			this.freightCount()
+		},
 	}
 }
 </script>
@@ -76,6 +296,11 @@ export default {
 <style lang="scss" scoped>
 	.app-content {
 		// background-color: #fff;
+		.ship-modal {
+		.line-label {
+			width: 140px;
+		}
+		}
 	}
 	.order-info_box {
 		display: flex;
@@ -102,4 +327,51 @@ export default {
 			height: 146px;
 		}
 	}
+	.order-fa_box {
+		padding:20upx;
+		border: 1upx solid #DDDDDD;
+		border-radius: 4upx;
+		margin-bottom: 20upx;
+		& > .order-fa_info {
+			padding-left: 20upx;
+			& > .order-fa_top {
+				display: flex;
+				align-items: center;
+				& > view:nth-child(1) {
+					width: 40upx;
+					height: 40upx;
+					line-height: 40upx;
+					text-align: center;
+					background-color: #3385FF;
+					color: #FFFFFF;
+					font-size: 24upx;
+					margin-right: 20upx;
+					border-radius: 50%;
+				}
+				& > view:nth-child(2) {
+					color: #333333;
+					font-size: 32upx;
+					font-weight: 600;
+					color: #333333;
+
+				}
+			}
+			& > view:nth-child(2) {
+				padding-left: 60upx;
+				text-align: left;
+				color: #999999;
+				font-size: 24upx;
+				font-weight: 400;
+				margin:25upx 0 19upx;
+			}
+			& > view:nth-child(3) {
+				padding-left: 60upx;
+				text-align: left;
+				color: #333333;
+				font-size: 24upx;
+				font-weight: 400;
+				margin:25upx 0 19upx;
+			}
+		}
+	}
 </style>