jiaoyi-vue/src/views/service/chat/components/keeps.vue

<template>
    <el-drawer v-model="visible" size="500px" destroy-on-close :close-on-click-modal="false" :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-goods">
                        <div class="goods-img"><img :src="orderData.img" /></div>
                        <div class="goods-info">
                            <div class="name" v-if="orderData.product.is_new == 1">{{orderData.product.price}}元代{{orderData.product.line_price}}元商场权益券{{ orderData.product.product_name }}</div>
                            <div class="name" v-else>{{ 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-h">意向商品<span>(可选{{orderData.number}}份)</span></div>
                        <div class="goods-item" v-for="(item,indx) in doneGoods" :key="indx">
                            <div class="item-goods" style="padding: 5px;background-color: #f8f8f8;">
                                <div class="item-goods-body">
                                    <div class="image">
                                        <el-image style="width: 60px;height: 60px;" :src="item.image"></el-image>
                                    </div>
                                    <div class="info">
                                        <div class="title">
                                            <div class="name">{{ item.title }}</div>
                                        </div>
                                        <div class="tags">
                                            <div></div>
                                            <div class="price">x{{ item.number }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="goods-item-check" @click="selectGoods">{{doneGoods.length == 0 ? '请选择': '更换其他'}}</div>
                    </div>
                    <div class="order-info">
                        <div class="title-h">地址信息</div>
                        <el-form ref="dialogForm" :model="formData" :rules="rules" label-width="100px" label-position="top">
                            <el-form-item label="姓名" prop="nickname">
                                <el-input v-model="formData.nickname" clearable placeholder="请输入"></el-input>
                                <div class="el-form-item-msg"></div>
                            </el-form-item>
                            <el-form-item label="手机号码" prop="mobile">
                                <el-input v-model="formData.mobile" clearable placeholder="请输入"></el-input>
                                <div class="el-form-item-msg"></div>
                            </el-form-item>
                            <el-form-item label="所属地区" prop="city">
                                <el-cascader ref="cascaderRef" v-model="formData.city" :options="categoryData" :props="deptsProps" @change="getTemplate" clearable style="width: 100%;" />
                                <div class="el-form-item-msg"></div>
                            </el-form-item>
                            <el-form-item label="详细地址" prop="address">
                                <el-input type="textarea" rows="3" v-model="formData.address" clearable placeholder="请输入"></el-input>
                                <div class="el-form-item-msg"></div>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </el-main>
            <el-footer style="text-align: right;">
                <el-button @click="visible=false" size="large">取 消</el-button>
                <el-button v-if="mode!='show'" size="large" type="primary" :loading="isSaveing" @click="submit()">确 认</el-button>
            </el-footer>
        </el-container>
    </el-drawer>
    <goodsMain ref="goodsMain" :multiple="false"></goodsMain>
</template>

<script>
import goodsMain from './goodOff';
export default {
    components:{
        goodsMain
    },
    data(){
        return {
            loading: false,
            isSaveing: false,
            isDoneing:false,
            mode:"add",
            titleMap:{
                add:"代客预约",
                edit:"代客预约"
            },
            visible:false,
            orderData:null,
			orderTime:null,
            formOrder:null,
            doneGoods:[],
            deptsProps:{
                value: "value",
                label: "text"
            },
            categoryData:[],
            formData:{},
            rules:{
                nickname: [
                    {required: true, message: '请输入'}
                ],
                mobile: [
                    {required: true, message: '请输入'}
                ],
                address: [
                    {required: true, message: '请输入'}
                ],
                city: [
                    {required: true, message: '请选择'}
                ]
            }
        }
    },
    methods: {
        open(mode = 'add'){
            this.mode = mode;
            this.visible = true;
            return this
        },
        selectGoods(data){
            this.$nextTick(() => {
                this.$refs.goodsMain.open("add").setData(data)
            })
        },
        async getCityData(){
            var resp = await this.$API.merOrder.city.get();
            this.categoryData = resp.data;
        },
        async getTemplate(v){
            const nodes = this.$refs.cascaderRef.getCheckedNodes()
            this.formData.cityLabel = nodes[0].pathLabels
        },
        //表单注入数据
        setData(data){
            this.formOrder = JSON.parse(JSON.stringify(data));
            this.getOrderDetail()
            this.getCityData()
        },
        async getOrderDetail(){
            this.loading = true;
            var resp = await this.$API.merOrder.detail.get({"order":this.formOrder.out_order_no});
            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
        },
        async submit(){
            var validate = await this.$refs.dialogForm.validate().catch(()=>{});
            if(!validate){ return false }
            this.isSaveing = true;
            this.formData.order = this.OrderData.out_order_no;
            let submitData = JSON.parse(JSON.stringify(this.formData));
            var resp = await this.$API.merOrder.address.post(submitData);
            this.isSaveing = false;
            if (resp.code == 0) {
                return this.$message.error(resp.msg);
            }
            this.$message.success(resp.msg);
            this.visible = false;
            this.formData = {};
            this.submitState = false;
            this.$emit("success");
        }
    }
}
</script>

<style lang="scss" scoped>
.order-info{
    border-radius: 10px;
    background-color: #fff;padding: 10px;margin-top: 10px;
    .title-h{
        font-size: 16px;color: #333;font-weight: bold;margin-bottom: 10px;
        span {
            font-size: 14px;
            color: #666;
            font-weight: normal;
            margin-left: 10px;
        }
    }
}
.goods-item-check{
	border: 1px solid #475569;
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-size: 14px;
	color: #475569;
	border-radius: 5px;
    cursor: pointer;
}
.item-goods{
    background-color: #fff;
    margin-top: 10px;
    border-radius: 10px;
    padding: 10px;
    .item-goods-body{
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .stock{
        text-align: right;
    }
    .image {
        height: 70px;
        overflow: hidden;display: flex;align-items: center;min-width: 70px;
        position: relative;
        image {
            width: 70px;
            border-radius: 5px;
            height: 100%;
        }
    }
    .info{
        flex: 1 1 0%;
        overflow: hidden;
        .title{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .name {
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 16px;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                color: #333;
                font-weight: 900;
            }
        }
        .price-right{
            text-align: right;
            color: #ff5a25;
            margin-top: 10px;
            font-size: 14px;
            text {
                font-size: 15px;
                font-weight: 800;
            }
        }
        .tags {
            color: #94a3b8;
            font-size: 12px;
            margin: 5px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .price {
                font-size: 14px;
                color: #475569;
                font-weight: 600;
            }
        }
    }
}
</style>