|
<!--
|
新增门店
|
-->
|
|
<template>
|
<div class="stores-add-box h-100-g">
|
|
<v-navbar title="新增门店" fixed></v-navbar>
|
<div class="cell-group">
|
<v-cell v-model="form.storeName" :max="20" label='门店名称' icon='iconyonghu' placeholder='请输入门店名称'></v-cell>
|
<v-cell label='所在地区' icon='icondingwei' @click.native="isShowArea = true;" placeholder='请选择'>
|
<div slot="v-cell-right" class="flex-center-g">
|
<div v-if="form.areaText">{{form.areaText}}</div>
|
<div v-else style="color: #a2a2a2">请选择 </div>
|
<svg class="icon" aria-hidden="true" style="width:18px;height:18px;fill:#999;">
|
<use xlink:href="#iconyou"></use>
|
</svg>
|
</div>
|
</v-cell>
|
<v-cell v-model="form.dtlAddr" :max="30" label='详细地址' icon='icontishi' placeholder='请输入详细地址'></v-cell>
|
</div>
|
|
<div class="cell-group">
|
<v-cell v-model="form.priName" :max="6" label='负责人姓名' placeholder='请输入姓名'></v-cell>
|
<v-cell v-model="form.priMblNo" :max="11" type="tel" label='负责人手机号' placeholder='请输入手机号'></v-cell>
|
<v-cell v-model="form.priIdNo" :max="18" label='负责人身份证号' placeholder='请输入身份证号'></v-cell>
|
<v-cell v-model="form.outChanNo" :max="20" label='渠道编码' placeholder='请输入渠道编码'></v-cell>
|
</div>
|
<p class="tip">*该手机号将作为登录用户名，密码将通过短信发至手机</p>
|
|
<div class="cell-group">
|
<v-cell v-model="form.priEmail" :max="50" label='联系邮箱' placeholder='请输入邮箱地址'></v-cell>
|
</div>
|
|
<footer class="flex-center-g footer">
|
<van-button class="btn" @click="addStore">新增门店</van-button>
|
</footer>
|
|
|
<van-popup v-model="isShowArea" position="bottom" :close-on-click-overlay="false">
|
<van-area ref='Area' :area-list='areaList' @cancel="closeAreaModal" @confirm="setAreaValue"></van-area>
|
</van-popup>
|
|
</div>
|
</template>
|
|
<script>
|
import { mapState } from 'vuex';
|
export default {
|
name: "stores-add",
|
data(){
|
return {
|
isShowArea:false,
|
Btn:false,
|
form:{
|
areaText:'', //地区文字展示
|
storeName:'', //门店名称
|
dtlAddr:'', //详细地址
|
priName:'', //负责人姓名
|
priEmail:'', //联系邮箱
|
priMblNo:'', //负责人手机
|
priIdNo: '', //身份证号
|
provCode: '',
|
cityCode: '',
|
areaCode: '',
|
outChanNo: '',
|
},
|
|
rule:[
|
{key:"storeName",message:"请输入门店名称",type:"isEmpty"},
|
{key:"areaText",message:"请选择地址",type:"isEmpty"},
|
{key:"dtlAddr",message:"请输入详细地址",type:"isEmpty"},
|
{key:"priName",message:"请输入负责人姓名",type:"isEmpty"},
|
{key:"priName",message:"请输入正确的负责人姓名",rule:/^[\u4e00-\u9fa50-9a-zA-Z]{1,6}$/},
|
{key:"priMblNo",message:"请输入负责人手机号",type:"isEmpty"},
|
{key:"priMblNo",message:"请输入正确的手机号",type:"isTel"},
|
{key:"priIdNo",message:"请输入负责人身份证号",type:"isEmpty"},
|
{key:"priIdNo",message:"请输入正确的身份证号",type:"checkIDCard"},
|
{key:"priEmail",message:"请输入联系邮箱",type:"isEmpty"},
|
{key:"priEmail",message:"请输入正确的联系邮箱",type:"isEmail"},
|
]
|
|
}
|
},
|
computed:{
|
...mapState(['areaList'])
|
},
|
created() {
|
this.merId = this.$route.query.merId;
|
},
|
methods:{
|
// 验证form参数
|
validatorForm(){
|
let v = this.$tool;
|
if(v.checkValEmpty(this.form.outChanNo)){
|
v.toast('请输入渠道编码');
|
return false;
|
}
|
return this.$validator(this.form,this.rule).check(item=>{
|
this.$notify(item.message)
|
})
|
},
|
|
//关闭地区弹窗
|
closeAreaModal(){
|
this.isShowArea = false;
|
this.$refs.Area.reset()
|
},
|
|
//保存 地区选择
|
setAreaValue(arr){
|
this.form.areaText = arr[0].name + '-' +arr[1].name +'-'+ arr[2].name;
|
this.form.provCode= arr[0].code;
|
this.form.cityCode= arr[1].code;
|
this.form.areaCode= arr[2].code;
|
this.form.provName= arr[0].name;
|
this.form.cityName= arr[1].name;
|
this.form.areaName= arr[2].name;
|
this.isShowArea = false;
|
this.$refs.Area.reset()
|
},
|
|
|
// 新增门店
|
addStore(){
|
if(!this.validatorForm()) return
|
if(this.Btn)return
|
let list = {
|
storeName: this.form.storeName,
|
addr:{
|
province:{
|
code:this.form.provCode,
|
name:this.form.provName
|
},
|
city:{
|
code:this.form.cityCode,
|
name:this.form.cityName
|
},
|
area:{
|
code:this.form.areaCode,
|
name:this.form.areaName
|
},
|
dtlAddr:this.form.dtlAddr
|
},
|
priName: this.form.priName,
|
priMblNo: this.form.priMblNo,
|
priEmail: this.form.priEmail,
|
priIdNo: this.form.priIdNo,
|
outChanNo: this.form.outChanNo,
|
};
|
if(this.merId){
|
list.merId = this.merId;
|
}
|
this.$api.storeAdd(list).then(() => {
|
this.$notify('新增成功');
|
this.Btn = true;
|
setTimeout(() => this.$router.go(-1), 1000);
|
});
|
}
|
|
|
|
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
.stores-add-box{
|
background-color: @c-bg-f5;
|
padding-top: 44px;
|
.tip {
|
margin: 10px 0 15px 21px;
|
font-size: @font-12;
|
color: @c-text-999;
|
}
|
}
|
|
|
.cell-group {
|
margin: 10px 8px 0;
|
}
|
|
.btn {
|
width: 340px;
|
height: 44px;
|
border: none;
|
font-size: @font-16;
|
border-radius: 22px;
|
background-color: @c-bg-default;
|
color: @c-text-fff;
|
|
}
|
|
.footer {
|
margin-top: 60px;
|
padding-bottom: 30px;
|
}
|
|
|
</style>
|
