<template>
|
<div class="stores-detail h-100-g">
|
<v-navbar title="门店详情" fixed rightText="保存" @right-click="Save"></v-navbar>
|
|
<div class="cell-group">
|
<v-cell v-model="form.storeName" :max="20" label="门店名称" :readonly="true" icon="iconyonghu" placeholder="门店名称"></v-cell>
|
<v-cell label="所在地区" icon="icondingwei" placeholder="所在地区" @click.native="isShowArea = true">
|
<div slot="v-cell-right" class="flex-center-g">
|
<div>{{ form.areaText }}</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.priEmail" :max="50" label="联系邮箱" placeholder="联系邮箱"></v-cell>
|
<v-cell v-model="form.priIdNo" :max="18" label="负责人身份证号" placeholder="负责人身份证号"></v-cell>
|
<v-cell v-model="form.outChanNo" :max="18" label="渠道编码" :readonly="true" placeholder="渠道编码"></v-cell>
|
</div>
|
|
<footer class="flex-center-g footer">
|
<van-button class="btn left" @click="freeze">{{ menText }}</van-button>
|
<van-button class="btn right" @click="orderSearch()">订单查询</van-button>
|
</footer>
|
|
<van-dialog class="setting-box-dialog" v-model="dialogShow" show-cancel-button :message="Msg" @confirm="onConfirm"> </van-dialog>
|
|
<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-detail",
|
data() {
|
return {
|
isShowArea: false,
|
dialogShow: false,
|
menText: "",
|
Status: null,
|
Msg: "",
|
Btn: false,
|
|
form: {
|
areaText: "", //地区文字展示
|
storeName: "", //门店名称
|
dtlAddr: "", //详细地址
|
priName: "", //负责人姓名
|
priEmail: "", //联系邮箱
|
priMblNo: "", //负责人手机
|
priIdNo: "", //负责人身份证号
|
provCode: "",
|
cityCode: "",
|
areaCode: "",
|
outChanNo: "",
|
},
|
|
rule: [{ key: "dtlAddr", message: "请输入详细地址", type: "isEmpty" }],
|
};
|
},
|
computed: {
|
...mapState(["areaList"]),
|
},
|
created() {
|
this.init();
|
},
|
methods: {
|
init() {
|
this.$api.storeDtl({ storeId: this.$route.query.storeId }).then((res) => {
|
let data = res.body,
|
addr = data.addr;
|
this.Status = data.freezeStatus;
|
data.freezeStatus ? (this.menText = "冻结门店") : (this.menText = "启用门店");
|
this.form = {
|
areaText: addr.province.name + "-" + addr.city.name + "-" + addr.area.name, //地区文字展示
|
storeName: data.storeName, //门店名称
|
dtlAddr: addr.dtlAddr, //详细地址
|
priName: data.priName, //负责人姓名
|
priEmail: data.priEmail, //联系邮箱
|
priMblNo: data.priMblNo, //负责人手机
|
priIdNo: data.priIdNo, //负责人身份证号
|
provCode: addr.province.code,
|
cityCode: addr.city.code,
|
areaCode: addr.area.code,
|
provName: addr.province.name,
|
cityName: addr.city.name,
|
areaName: addr.area.name,
|
outChanNo: data.outChanNo,
|
};
|
});
|
},
|
|
freeze() {
|
this.dialogShow = !this.dialogShow;
|
this.Msg = `请问是否确认${this.Status ? "冻结" : "启用"}该门店？`;
|
},
|
|
//冻结/启用 门店
|
onConfirm() {
|
if (this.Btn2) {
|
return;
|
}
|
this.Btn2 = true;
|
this.$api
|
.channSwitchStatus({
|
orgId: this.$route.query.storeId,
|
orgType: 4,
|
statusType: this.Status ? 0 : 1,
|
})
|
.then((res) => {
|
this.Btn2 = false;
|
this.$notify_success(`${this.Status ? "冻结" : "启用"}门店成功`);
|
this.Status = this.Status ? 0 : 1;
|
this.menText = this.Status ? "冻结门店" : "启用门店";
|
});
|
},
|
|
// 保存门店
|
Save() {
|
if (this.Btn) {
|
return;
|
}
|
this.Btn = true;
|
let list = {
|
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,
|
},
|
priEmail:this.form.priEmail,
|
priIdNo:this.form.priIdNo,
|
priMblNo:this.form.priMblNo,
|
priName:this.form.priName,
|
storeId: this.$route.query.storeId,
|
};
|
|
if (
|
this.$validator(list.addr, this.rule).check((item) => {
|
this.$notify(item.message);
|
})
|
) {
|
this.$api.storeEdit(list).then((res) => {
|
this.Btn = false;
|
this.$notify_success("保存成功！");
|
});
|
}
|
},
|
|
//关闭地区弹窗
|
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.isShowArea = false;
|
this.$refs.Area.reset();
|
},
|
orderSearch() {
|
this.$router.push({ path: "/order/wxScore", query: { storeId: this.$route.query.storeId } });
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
.stores-detail {
|
background-color: @c-bg-f5;
|
padding-top: 44px;
|
|
.cell-group {
|
margin: 10px 8px 0;
|
}
|
|
.footer {
|
margin-top: 60px;
|
padding-bottom: 30px;
|
.btn {
|
width: 170px;
|
height: 44px;
|
border: none;
|
font-size: @font-16;
|
&.left {
|
background-color: @c-bg-eee;
|
color: @c-text-666;
|
border-radius: 22px 0px 0px 22px;
|
}
|
&.right {
|
background-color: @c-bg-default;
|
color: @c-text-fff;
|
border-radius: 0px 22px 22px 0px;
|
}
|
}
|
}
|
}
|
</style>
|
