21323440004

src/api/model/merOrder.js

@@ -9,4 +9,11 @@ export default {
             return await http.get(this.url, params);
         },
     },
+    detail: {
+        url: `${config.API_URL}/merchant/order/detail`,
+        name: "-",
+        get: async function (params) {
+            return await http.get(this.url, params);
+        },
+    },
 }

src/components/imFloat/imFloat.vue

@@ -214,6 +214,7 @@
             </el-main>
         </el-container>
     </el-drawer>
+    <orderDetail ref="orderDetail" @success="orderSuccess"></orderDetail>
 </template>
 
 <script>
@@ -230,11 +231,13 @@ import {
 	formatDate,
 	to as tofn
 } from '@/util/index.js';
+import orderDetail from '@/components/imFloat/order';
 let imageList = [];
 export default {
     name: 'GlobalIM',
     components:{
-        item
+        item,
+        orderDetail
     },
     props: {
         user: { type: Object, default: () => {} }
@@ -329,6 +332,14 @@ export default {
         this.$refs.messageListRef.removeEventListener('scroll', this.handleScroll)
     },
     methods: {
+        orderSuccess(type,data){
+            console.log(data)
+            switch(type) {
+                case "address":
+                    this.sendAddress(data)
+                    break;
+            }
+        },
         async submitPrice(){
             var { priceForm,message } = this;
             var validate = await this.$refs.priceForm.validate().catch(()=>{});
@@ -385,7 +396,19 @@ export default {
         },
         onLongpress(){},
         onItem(data){
-            console.log(data)
+            switch(data.type)
+            {
+                case "order":
+                    this.$nextTick(() => {
+                        this.$refs.orderDetail.open("add").setData(data.payload.order)
+                    })
+                    break;
+                case "address":
+                    this.$nextTick(() => {
+                        this.$refs.orderDetail.open("add").setData(data.payload.address)
+                    })
+                    break;
+            }
         },
         chooseEmoji(data){
             this.inputMessage += data;

src/components/imFloat/order.vue

@@ -0,0 +1,197 @@
+<template>
+    <el-drawer v-model="visible" title="在线客服" size="500px" destroy-on-close :with-header="false">
+        <el-container class="flex-column">
+            <div class="drawer-detail-main">
+                <div class="drawer-detail-header">
+                    <div class="drawer-detail-header-body">
+                        <div class="drawer-detail-header-left">{{titleMap[mode]}}</div>
+                        <div class="drawer-detail-header-left">
+                            <el-button type="default" icon="el-icon-close" @click="visible=false"></el-button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <el-main class="nopadding" v-if="orderData">
+                <div class="order-detail">
+                    <div class="order-status">
+                        <div class="status-name" v-if="orderData.status == 0 && orderTime">
+                            待支付
+                            <template v-if="orderTime.min>0&&orderTime.sec>=0">
+                                ，剩余时间
+                                
+                            </template>
+                            <template v-else>，已超时</template>
+                        </div>
+                        <div class="status-name" v-if="orderData.status == 1">待使用</div>
+                        <div class="status-name success" v-if="orderData.status == 2">已完成</div>
+                        <div class="status-name" v-if="orderData.status == 3">已退款</div>
+                        <div class="status-name" v-if="orderData.status == 4">退款中</div>
+                        <div class="status-name" v-if="orderData.status == 5">已关闭</div>
+                        
+                        <div class="status-desc" v-if="orderData.status == 0">超过30分钟未支付，订单将自动取消</div>
+                        <div class="status-desc" v-if="orderData.status == 1">待使用</div>
+                        <div class="status-desc success" v-if="orderData.status == 2">服务已完成,欢迎您再次使用</div>
+                        <div class="status-desc" v-if="orderData.status == 3">{{ $TOOL.money(orderData.pay_money) }} 已原路退回</div>
+                        <div class="status-desc" v-if="orderData.status == 4">已申请退款，钱款预计1-3个自然日到账</div>
+                        <div class="status-desc" v-if="orderData.status == 5">订单已取消或已关闭</div>
+                        
+                    </div>
+                    <div class="order-goods">
+                        <div class="goods-img"><img :src="orderData.img" /></div>
+                        <div class="goods-info">
+                            <div class="name">{{ orderData.product.product_name }}</div>
+                            <div class="desc">
+                                <div class="time" v-if="orderData.end_at">有效期至：{{ orderData.end_at }} </div>
+                                <div class="num">x {{ orderData.number }}</div>
+                            </div>
+                            <div class="total">合计：{{ $TOOL.money(orderData.price) }}</div>
+                        </div>
+                    </div>
+                    <div class="order-info">
+                        <div class="title">下单用户</div>
+                        <div class="info-item">
+                            <div class="name">昵称</div>
+                            <div class="right">{{ orderData.user.nickname }} </div>
+                        </div>
+                        <div class="info-item">
+                            <div class="name">OpenId</div>
+                            <div class="right">{{ orderData.user.openid }} </div>
+                        </div>
+                        <div class="info-item">
+                            <div class="name">手机号码</div>
+                            <div class="right">{{ orderData.user.mobile }} </div>
+                        </div>
+                        <div class="info-item">
+                            <div class="name">注册时间</div>
+                            <div class="right">{{ orderData.user.create_at }} </div>
+                        </div>
+                    </div>
+                    <div class="order-info">
+                        <div class="title">订单信息</div>
+                        <div class="info-item">
+                            <div class="name">来客订单号</div>
+                            <div class="right">{{ orderData.order_sn }} </div>
+                        </div>
+                        <div class="info-item">
+                            <div class="name">订单编号</div>
+                            <div class="right">{{ orderData.out_order_no }}</div>
+                        </div>
+                        <div class="info-item">
+                            <div class="name">下单时间</div>
+                            <div class="right">{{ orderData.create_at }}</div>
+                        </div>
+                        <div class="info-item" v-if="orderData.status == 4">
+                            <div class="name">退款时间</div>
+                            <div class="right">{{ orderData.refund_at }}</div>
+                        </div>
+                    </div>
+                    <div class="order-info" v-if="orderData.address">
+                        <div class="title">收货地址</div>
+                        <div class="info-item">
+                            <div class="name">收件人</div>
+                            <div class="right">{{ orderData.address.nickname }} </div>
+                        </div>
+                        <div class="info-item">
+                            <div class="name">联系电话</div>
+                            <div class="right">{{ orderData.address.mobile }}</div>
+                        </div>
+                        <div class="info-item">
+                            <div class="name">收货地址</div>
+                            <div class="right">{{ orderData.address }}</div>
+                        </div>
+                        <div class="info-item">
+                            <div class="name">详细地址</div>
+                            <div class="right">{{ orderData.address }}</div>
+                        </div>
+                    </div>
+                    <div class="order-info" v-else>
+                        <div class="title">收货地址</div>
+                        <div class="empty-data-item" v-if="mode == 'add'">
+                            <el-button @click="sendAddress">收集地址</el-button>
+                            <div class="el-form-item-msg">收集地址将发送消息给用户，由用户填写完成后即完成核销</div>
+                        </div>
+                    </div>
+                    <div class="order-info" v-if="orderData.express">
+                    </div>
+                    <div class="order-info" v-else>
+                        <div class="title">快递信息</div>
+                        <div class="empty-data-item" v-if="mode == 'add'">
+                            <el-button>一键呼叫快递</el-button>
+                            <div class="el-form-item-msg">必须先收集完地址后方可进行呼叫快递，确保地址正确</div>
+                        </div>
+                    </div>
+
+                </div>
+            </el-main>
+            <el-footer v-if="orderData && orderData.status == 1">
+                <el-button size="large" type="primary" @click="submit()">手动核销订单</el-button>
+            </el-footer>
+        </el-container>
+    </el-drawer>
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            loading: false,
+            isSaveing: false,
+            mode:"add",
+            titleMap:{
+                add:"订单详情",
+                edit:"订单详情"
+            },
+            visible:false,
+            orderData:null,
+			orderTime:null
+        }
+    },
+    methods: {
+        open(mode = 'add'){
+            this.mode = mode;
+            this.visible = true;
+            return this
+        },
+        //表单注入数据
+        setData(data){
+            this.formData = JSON.parse(JSON.stringify(data));
+            this.getOrderDetail()
+        },
+        async getOrderDetail(){
+            var resp = await this.$API.merOrder.detail.get({"order":this.formData.order});
+            if (resp.code == 0) {
+                this.$message.error(resp.msg);
+                this.visible = false;
+                return ;
+            }
+            this.orderData = resp.data;
+            this.orderTime = resp.data.end_time
+        },
+        sendAddress(){
+            this.$emit("success",'address',this.orderData);
+        }
+    }
+}
+</script>
+
+<style>
+.border-none{border: 0;}
+.order-detail{padding: 10px;}
+.order-detail .order-goods{display: flex;align-items: flex-start;background-color: #fff;border-bottom: 1px solid #f8f8f8;}
+.order-detail .order-goods .goods-img{width: 80px;overflow: hidden;}
+.order-detail .order-goods img{width: 80px;border-radius: 5px;}
+.order-detail .goods-info{margin-left: 10px;font-size: 12px;flex: 1;padding: 10px 0;}
+.order-detail .goods-info .name{font-size: 16px;color: #333;}
+.order-detail .goods-info .desc{font-size: 12px;color: #999;display: flex;align-items: center;justify-content: space-between;margin: 10px 0;}
+.order-detail .goods-info .total{font-size: 16px;color: #333;text-align: right;font-weight: bold;}
+.order-detail .order-info{background-color: #fff;padding: 10px;margin-top: 10px;}
+.order-detail .order-info .title{font-size: 16px;color: #333;font-weight: bold;padding-bottom: 10px;border-bottom: 1px solid #f8f8f8;}
+.order-detail .order-info .info-item{height: 40px;line-height: 40px;font-size: 12px;display: flex;align-items: center;border-bottom: 1px solid #f8f8f8;}
+.order-detail .order-info .info-item .right{color: #666;margin-left: auto;margin-right: 0;}
+.order-detail .order-info .info-item .right text{border: 1px solid #ccc;color: #333;font-size: 12px;padding: 0 15upx;margin-left: 10px;border-radius: 5px;}
+.empty-data-item{margin-top: 10px;}
+
+.order-detail .order-status{padding: 20px 10px;text-align: center;background-color: #f8f8f8;margin-bottom: 10px;}
+.order-detail .order-status .status-name{text-align: center;font-size: 16px;color: #333;font-weight: bold;display: flex;align-items: center;justify-content: center;}
+.order-detail .order-status .status-desc{font-size: 12px;color: #666;margin-top: 10px;}
+</style>

src/views/service/order/index/components/table.vue

@@ -86,15 +86,19 @@
             <template #default="scope">
                 <el-button-group>
                     <el-button size="small" text @click="table_view(scope.row)">详情</el-button>
-                    <el-button type="danger" text size="small" @click="table_del(scope.row)">删除</el-button>
                 </el-button-group>
             </template>
         </el-table-column>
     </scTable>
+    <orderDetail ref="orderDetail" @success="orderSuccess"></orderDetail>
 </template>
 
 <script>
+import orderDetail from "@/components/imFloat/order";
 export default {
+    components:{
+        orderDetail
+    },
     data(){
         return {
             list: {
@@ -107,7 +111,10 @@ export default {
     },
     methods: {
         table_view(data){
-
+            this.$nextTick(() => {
+                data.order = data.out_order_no
+                this.$refs.orderDetail.open("edit").setData(data)
+            })
         },
         table_del(data){