<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='负责人姓名' :readonly="true" placeholder='负责人姓名'></v-cell>
|
<v-cell v-model="form.priMblNo" :max="11" type="tel" label='负责人手机号' :readonly="true" placeholder='负责人手机号'></v-cell>
|
<v-cell v-model="form.priEmail" :max="50" label='联系邮箱' :readonly="true" placeholder='联系邮箱'></v-cell>
|
<v-cell v-model="form.priIdNo" :max="18" label='负责人身份证号' :readonly="true" 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="$router.push('/main/home')">订单查询</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
|
},
|
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()
|
},
|
|
|
|
}
|
}
|
</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>
|
