|
|
@@ -0,0 +1,266 @@
|
|
|
+<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">
|
|
|
+ <div class="order-info">
|
|
|
+ <div class="title-h">意向商品</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">x1</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" @success="handleStore"></goodsMain>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import goodsMain from './goodOff';
|
|
|
+export default {
|
|
|
+ components:{
|
|
|
+ goodsMain
|
|
|
+ },
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ isSaveing: false,
|
|
|
+ mode:"add",
|
|
|
+ titleMap:{
|
|
|
+ add:"修改预约地址",
|
|
|
+ edit:"修改预约地址"
|
|
|
+ },
|
|
|
+ visible:false,
|
|
|
+ formData:{},
|
|
|
+ deptsProps:{
|
|
|
+ value: "value",
|
|
|
+ label: "text"
|
|
|
+ },
|
|
|
+ formOrder:null,
|
|
|
+ categoryData:[],
|
|
|
+ doneGoods:[],
|
|
|
+ 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;
|
|
|
+ this.doneGoods = [];
|
|
|
+ return this
|
|
|
+ },
|
|
|
+ selectGoods(){
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.goodsMain.open("add").setData(this.formOrder)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleStore(data){
|
|
|
+ this.doneGoods = [];
|
|
|
+ this.doneGoods.push(data);
|
|
|
+ },
|
|
|
+ //表单注入数据
|
|
|
+ setData(data){
|
|
|
+ this.formOrder = JSON.parse(JSON.stringify(data));
|
|
|
+ this.getCityData()
|
|
|
+ this.getAddressDetail()
|
|
|
+ },
|
|
|
+ async getTemplate(v){
|
|
|
+ const nodes = this.$refs.cascaderRef.getCheckedNodes()
|
|
|
+ this.formData.cityLabel = nodes[0].pathLabels
|
|
|
+ },
|
|
|
+ async getCityData(){
|
|
|
+ var resp = await this.$API.merOrder.city.get();
|
|
|
+ this.categoryData = resp.data;
|
|
|
+ },
|
|
|
+ async getAddressDetail(){
|
|
|
+ this.loading = true;
|
|
|
+ var resp = await this.$API.merOrder.addressDetail.get({"order":this.formOrder.out_order_no});
|
|
|
+ this.loading = false;
|
|
|
+ if (resp.code == 0) {
|
|
|
+ this.$message.error(resp.msg);
|
|
|
+ this.visible = false;
|
|
|
+ return ;
|
|
|
+ }
|
|
|
+ this.formData = resp.data;
|
|
|
+ this.formData.city = resp.data.city_code;
|
|
|
+ this.doneGoods.push(resp.data.goods)
|
|
|
+ },
|
|
|
+ async submit(){
|
|
|
+ var validate = await this.$refs.dialogForm.validate().catch(()=>{});
|
|
|
+ if(!validate){ return false }
|
|
|
+ this.isSaveing = true;
|
|
|
+ let submitData = JSON.parse(JSON.stringify(this.formData));
|
|
|
+ submitData.goods = JSON.stringify(this.doneGoods);
|
|
|
+ var resp = await this.$API.merOrder.addressEdit.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;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+.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>
|
Zory