jiaoyi-vue/src/components/imFloat/order.vue

<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-loading="loading">
                <div class="order-detail" v-if="orderData">
                    <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-name" v-if="orderData.status == 6">部分退款</div>
                        <div class="status-name" v-if="orderData.status == 7">履约中</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 class="status-desc" v-if="orderData.status == 6">部分退款中</div>
                        <div class="status-desc" v-if="orderData.status == 7">货物运输中</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.pay_money) }}</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.mobile?orderData.mobile:'-' }}</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">收货地址<span v-copy="orderData.address.nickname+','+orderData.address.mobile+','+orderData.address.city_text+orderData.address.address">一键复制</span></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.city_text }}</div>
                        </div>
                        <div class="info-item">
                            <div class="name">详细地址</div>
                            <div class="right">{{ orderData.address.address }}</div>
                        </div>
                    </div>
                    <div class="order-info" v-else>
                        <div class="title">收货地址</div>
                        <div class="empty-data-item" v-if="mode == 'add'">
                            <div class="el-form-item-msg">请发起预约或代客预约后地址方可显示</div>
                        </div>
                    </div>
                    <div class="order-info" v-if="orderData.express">
                        <div class="title">物流信息</div>
                        <div class="empty-data-item">
                            <el-button @click="showExpress">查看完整物流信息</el-button>
                        </div>
                    </div>
                </div>
            </el-main>
        </el-container>
    </el-drawer>
    <expressData ref="expressData"></expressData>
</template>

<script>
import expressData  from "./express";
export default {
    components:{
        expressData
    },
    data(){
        return {
            loading: false,
            isSaveing: false,
            isDoneing:false,
            mode:"add",
            titleMap:{
                add:"订单详情",
                edit:"订单详情"
            },
            visible:false,
            orderData:null,
			orderTime:null
        }
    },
    methods: {
        open(mode = 'add'){
            this.mode = mode;
            this.visible = true;
            return this
        },
        showExpress(){
            this.$nextTick(() => {
                this.$refs.expressData.open("edit").setData(this.orderData.express)
            })
        },
        //表单注入数据
        setData(data){
            this.formData = JSON.parse(JSON.stringify(data));
            this.getOrderDetail()
        },
        doneOrder(){
            this.$confirm(`手动核销订单后，该订单不支持线上退款，如需退款请线下沟通后进行`, '提示', {
                type: 'warning'
            }).then(async ()=>{
                this.isDoneing = true;
                var resp = await this.$API.merOrder.done.post({"id":this.orderData.order_sn});
                this.isDoneing = false;
                if (resp.code == 0) {
                    return this.$message.error(resp.msg);
                }
                this.$message.success(resp.msg);
                this.visible = false;
                this.$emit("success");
            }).catch(()=>{})
        },
        async getOrderDetail(){
            this.loading = true;
            var resp = await this.$API.merOrder.detail.get({"order":this.formData.order});
            this.loading = false;
            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;display: flex;align-items: center;justify-content: space-between;}
.order-detail .order-info .title span{font-size: 12px;color: #333;font-weight: normal;border: 1px solid #ededed;padding: 5px 10px;cursor: pointer;}

.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>