<template>
|
<!--
|
作者：luoyiming
|
时间：2020-04-26
|
描述：门店-编辑门店
|
-->
|
<div class="product-add">
|
<!--form表单-->
|
<el-form size="small" ref="form" :model="form" label-width="80px">
|
<!--编辑门店-->
|
<div class="common-form">编辑门店</div>
|
<el-form-item label="门店名称" prop="store_name" :rules="[{required: true,message: ' '}]">
|
<el-input v-model="form.store_name" placeholder="请输入门店名称" class="max-w460"></el-input>
|
</el-form-item>
|
<el-form-item label="门店logo">
|
<el-row>
|
<el-button icon="el-icon-picture-outline" @click="openUpload">选择图片</el-button>
|
<div v-if="file_path!=''" class="img">
|
<img :src="file_path" width="100" />
|
</div>
|
</el-row>
|
</el-form-item>
|
<el-form-item label="联系人" prop="linkman" :rules="[{required: true,message: ' '}]">
|
<el-input v-model="form.linkman" placeholder="请输入门店联系人" class="max-w460"></el-input>
|
</el-form-item>
|
<el-form-item label="联系电话" prop="phone" :rules="[{required: true,message: ' '}]">
|
<el-input v-model="form.phone" placeholder="请输入门店联系电话" class="max-w460"></el-input>
|
</el-form-item>
|
<!-- <el-form-item label="营业时间" prop="shop_hours" :rules="[{required: true,message: ' '}]">
|
<el-input v-model="form.shop_hours" placeholder="请输入营业时间,例如:8:30-17:30" class="max-w460"></el-input>
|
</el-form-item> -->
|
<el-form-item label="配送范围" prop="delivery_scope" :rules="[{required: true,message: '请输入配送范围'}]">
|
<el-input type="number" :precision="1" :step="1" :min="0" :max="100" placeholder="请输入配送范围" v-model="form.delivery_scope" class="max-w460">
|
<template slot="append">公里</template>
|
</el-input>
|
<div class="tips">客户下单时选择门店配送方式，如果收货地址超出设置的配送范围，则不允许下单</div>
|
</el-form-item>
|
<el-form-item label="提成比例" prop="commission_rate" :rules="[{required: true,message: '请输入提成比例'}]">
|
<el-input type="number" :precision="1" :step="1" :min="0" :max="100" placeholder="请输入提成比例" v-model="form.commission_rate" class="max-w460">
|
<template slot="append">%</template>
|
</el-input>
|
<div class="tips">门店提成 =（订单金额-分销佣金）* 提成比例</div>
|
</el-form-item>
|
<el-form-item label="配送费结算">
|
<el-radio-group v-model="form.delivery_type">
|
<el-radio :label="0">按比例</el-radio>
|
<el-radio :label="1">按固定金额</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item v-if="form.delivery_type==0" label="配送比例" prop="delivery_rate" :rules="[{required: true,message: '请输入配送费比例'}]">
|
<el-input type="number" :precision="1" :step="1" :min="0" :max="100" placeholder="请输入配送费比例" v-model="form.delivery_rate" class="max-w460">
|
<template slot="append">%</template>
|
</el-input>
|
<div class="tips">配送费 =（订单金额-分销佣金）* 配送费比例</div>
|
</el-form-item>
|
<el-form-item v-if="form.delivery_type==1" label="配送金额" prop="delivery_fee" :rules="[{required: true,message: '请输入配送金额'}]">
|
<el-input type="number" :precision="1" :step="1" :min="0" :max="100" placeholder="请输入配送金额" v-model="form.delivery_fee" class="max-w460">
|
<template slot="append">元/单</template>
|
</el-input>
|
<div class="tips">配送费 =配送金额* 配送订单数</div>
|
</el-form-item>
|
<el-form-item label="小票打印" style="display: none;">
|
<div>
|
<el-radio v-model="form.is_printer_open" :label="1">开启</el-radio>
|
<el-radio v-model="form.is_printer_open" :label="0">关闭</el-radio>
|
</div>
|
</el-form-item>
|
<el-form-item label="选择打印机" style="display: none;">
|
<el-select v-model="form.printer_id" placeholder="请选择">
|
<el-option v-for="(item,index) in printerList" :key="index" :label="item.printer_name" :value="item.printer_id"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="门店区域">
|
<el-select v-model="form.province_id" placeholder="省" @change="initCity">
|
<el-option :label="item.name" :value="item.id" v-for="(item,index) in areaList" :key='index'></el-option>
|
</el-select>
|
<el-select v-if="form.province_id!=''" v-model="form.city_id" placeholder="市" @change="initRegion">
|
<el-option :label="item1.name" :value="item1.id" v-for="(item1,index1) in areaList[form.province_id]['city']"
|
:key='index1'></el-option>
|
</el-select>
|
<el-select v-if="form.city_id!=''" v-model="form.region_id" placeholder="区">
|
<el-option :label="item2.name" :value="item2.id" v-for="(item2,index2) in areaList[form.province_id]['city'][form.city_id]['region']"
|
:key='index2'></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="详细地址" prop="address" :rules="[{required: true,message: ' '}]">
|
<el-input v-model="form.address" placeholder="请输入详细地址" class="max-w460"></el-input>
|
</el-form-item>
|
<el-form-item label="门店坐标">
|
<el-row class="mb16">
|
<el-col :span="24">
|
<el-input v-model="form.coordinate" class="max-w460"></el-input>
|
</el-col>
|
</el-row>
|
<el-row class="mb16">
|
<el-col :span="24">
|
<Getpoint :form="form" @getMapdata="getMapdataFunc" @chose="choseFunc"></Getpoint>
|
</el-col>
|
</el-row>
|
|
</el-form-item>
|
<el-form-item label="门店简介">
|
<el-input type="textarea" v-model="form.summary" placeholder="请输入门店简介" class="max-w460"></el-input>
|
</el-form-item>
|
<el-form-item label="门店排序">
|
<el-input type="number" v-model="form.sort" placeholder="请输入门店排序" class="max-w460"></el-input>
|
</el-form-item>
|
<el-form-item label="自提核销">
|
<el-radio-group v-model="form.is_check">
|
<el-radio :label="1">支持</el-radio>
|
<el-radio :label="0">不支持</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="门店状态">
|
<el-radio-group v-model="form.status">
|
<el-radio :label="1">启用</el-radio>
|
<el-radio :label="0">禁用</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<!--提交-->
|
<div class="common-button-wrapper">
|
<el-button size="small" type="info" @click="cancelFunc">取消</el-button>
|
<el-button size="small" type="primary" @click="onSubmit" :loading="loading">提交</el-button>
|
</div>
|
</el-form>
|
<!--上传图片组件-->
|
<Upload v-if="isupload" :isupload="isupload" :type="type" @returnImgs="returnImgsFunc">上传图片</Upload>
|
<!--管理用户-->
|
<GetUser :is_open="open_user" @close="closeDialogFunc($event, 'add')"></GetUser>
|
</div>
|
</template>
|
|
<script>
|
import Getpoint from '@/components/map/Getpoint.vue';
|
import StoreApi from '@/api/store.js';
|
import DataApi from '@/api/data.js';
|
import Upload from '@/components/file/Upload';
|
import { formatModel } from '@/utils/base.js';
|
import GetUser from '@/components/user/GetUser.vue';
|
export default {
|
components: {
|
/*腾讯地图拾取器*/
|
Getpoint,
|
Upload,
|
GetUser
|
},
|
data() {
|
return {
|
/*form表单数据*/
|
form: {
|
store_id:null,
|
store_name: 0,
|
store_name: '',
|
linkman: '',
|
phone: '',
|
shop_hours: '',
|
province_id: '',
|
city_id: '',
|
region_id: '',
|
address: '',
|
coordinate: '',
|
summary: '',
|
sort: '',
|
is_check: '',
|
status: '',
|
logo_image_id: 0,
|
delivery_scope:'',
|
commission_rate:0,
|
delivery_type:0,
|
delivery_rate:0,
|
delivery_fee:0,
|
is_printer_open: '',
|
printer_id: '',
|
},
|
/*省市区*/
|
areaList: [],
|
/*查询信息*/
|
list: [],
|
printerList: [],
|
/*是否上传图片*/
|
isupload: false,
|
loading: false,
|
file_path: '',
|
open_user: false,
|
user_info: {}
|
};
|
},
|
created() {
|
|
this.form.store_id =this.$route.query.store_id;
|
this.getPrinter();
|
this.getData();
|
|
},
|
|
methods: {
|
/*修改*/
|
onSubmit() {
|
let self = this;
|
let form = self.form;
|
self.$refs.form.validate((valid) => {
|
if (valid) {
|
self.loading = true;
|
StoreApi.editShop(form, true)
|
.then(data => {
|
self.loading = false;
|
self.$message({
|
message: '恭喜你，门店修改成功',
|
type: 'success'
|
});
|
self.$router.push('/store/store/index');
|
}).catch(error => {
|
self.loading = false;
|
});
|
}
|
});
|
},
|
/*初始化城市id*/
|
initCity() {
|
this.form.city_id = ''
|
},
|
/*初始化区id*/
|
initRegion() {
|
this.form.region_id = ''
|
},
|
|
/*获取经纬度*/
|
getMapdataFunc(e) {
|
this.form.coordinate = e.data[0].toFixed(6) + ',' + e.data[1].toFixed(6);
|
},
|
|
/*获取参数*/
|
getData() {
|
let self = this;
|
StoreApi.shopDetail({
|
store_id: self.form.store_id
|
}, true)
|
.then(res => {
|
self.areaList = res.data.regionData;
|
self.form = formatModel(self.form, res.data.model);
|
self.file_path = res.data.model.logo.file_path;
|
self.form.is_check = res.data.model.is_check.value;
|
self.form.status = res.data.model.status.value;
|
})
|
.catch(error => {
|
|
});
|
|
},
|
getPrinter(){
|
let self = this;
|
DataApi.getPrinter({}, true)
|
.then(res => {
|
self.printerList = res.data.list;
|
})
|
.catch(error => {
|
|
});
|
},
|
|
/*上传*/
|
openUpload(e) {
|
this.type = e;
|
this.isupload = true;
|
},
|
|
/*获取图片*/
|
returnImgsFunc(e) {
|
if (e != null) {
|
this.file_path = e[0].file_path;
|
this.form.logo_image_id = e[0].file_id;
|
}
|
this.isupload = false;
|
},
|
|
/*选择的地址*/
|
choseFunc(e){
|
this.form.coordinate=e.location.lat+','+e.location.lng;
|
this.form.address=e.address;
|
},
|
|
/*取消*/
|
cancelFunc() {
|
this.$router.back(-1);
|
},
|
|
/*打开弹出层*/
|
userClick() {
|
this.open_user = true;
|
},
|
|
/*关闭获取用户弹窗*/
|
closeDialogFunc(e) {
|
if (e.type != 'error') {
|
this.user_info = e.params[0];
|
this.form.user_id = e.params[0].user_id;
|
}
|
this.open_user = false;
|
},
|
}
|
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.basic-setting-content {}
|
|
.product-add {
|
padding-bottom: 50px;
|
}
|
|
.img {
|
margin-top: 10px;
|
}
|
</style>
|
