<!--
|
新增门店
|
-->
|
|
<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="100" 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" />
|
</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>
|
