<!--
|
* @Author: 小明丶
|
* @Date: 2019-08-15 16:25:46
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-11-17 09:38:26
|
* @Description: 新增渠道页面
|
-->
|
<template>
|
<div class="channel-detail-box h-100-g">
|
<v-navbar :title="isAdd ? '新增渠道':'渠道详情'" fixed>
|
<div slot='right' v-if="!isAdd" @click="updateChannel">
|
保存
|
</div>
|
</v-navbar>
|
<div class="cell-group">
|
<v-cell :readonly="!isAdd" v-model.trim="form.chanName" max='20' label='渠道名称' icon='iconyonghu' placeholder='请输入渠道名称'></v-cell>
|
<v-cell :readonly="!isAdd" v-model.trim="form.licenseNo" max='20' label='营业执照号' icon='iconmobanguanliliebiao' placeholder='请输入营业执照号'></v-cell>
|
<v-cell :readonly="!isAdd" v-model.trim="form.priIdNo" max='18' label='身份证号' icon='iconyinhangka' placeholder='请输入身份证号'></v-cell>
|
<v-cell :value="form.areaText" label='所在地区' icon='icondingwei' isLink readonly placeholder='请选择' @click.native="isShowArea = true;"></v-cell>
|
<v-cell v-model.trim="form.dtlAddr" max='30' label='详细地址' icon='icontishi' placeholder='请输入详细地址'></v-cell>
|
</div>
|
|
<div class="cell-group">
|
<v-cell :readonly="!isAdd" v-model.trim="form.priName" max='6' label='负责人姓名' placeholder='请输入姓名'></v-cell>
|
<v-cell :readonly="!isAdd" v-model.trim="form.priMblNo" type='tel' max='11' label='负责人手机号' placeholder='请输入手机号'></v-cell>
|
</div>
|
<p class="tip" v-if="isAdd">*该手机号将作为登录用户名，密码将通过短信发至手机</p>
|
|
<div class="cell-group" v-if="isAdd">
|
<v-cell v-model.trim="form.priEmail" max='50' label='联系邮箱' placeholder='请输入邮箱地址'></v-cell>
|
</div>
|
|
<footer class="flex-center-g footer" v-if="isAdd">
|
<van-button class="btn-submit" :color="$store.state.backColor" @click="addChannel">新增渠道</van-button>
|
</footer>
|
|
<footer class="flex-center-g footer" v-else>
|
<van-button class="btn left" @click="openDialog">{{form.freezeStatus?'冻结':'启用'}}渠道</van-button>
|
<van-button class="btn right" :color="$store.state.backColor" @click="go">商户查询</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, mapMutations} from 'vuex';
|
export default {
|
data() {
|
return {
|
isShowArea:false,
|
form:{
|
areaText:'',//地区文字展示
|
chanName:'',
|
licenseNo:'',
|
priIdNo:'',
|
dtlAddr:'',
|
priName:'',
|
priMblNo:'',
|
priEmail:'',
|
provCode: '',
|
cityCode: '',
|
areaCode: '',
|
},
|
rule:[
|
{key:"chanName",message:"请输入渠道名称",type:"isEmpty"},
|
{key:"chanName",message:"请输入正确的渠道名称",rule:/^[\u4e00-\u9fa50-9a-zA-Z]{1,20}$/},
|
{key:"licenseNo",message:"请输入营业执照号",type:"isEmpty"},
|
{key:"licenseNo",message:"请输入正确的营业执照号",rule:/^[0-9a-zA-Z]{1,20}$/},
|
{key:"priIdNo",message:"请输入身份证号",type:"isEmpty"},
|
// {key:"priIdNo",message:"请输入正确的身份证号",type:"isIdCard"},
|
{key:"areaText",message:"请选择地址",type:"isEmpty"},
|
{key:"dtlAddr",message:"请输入详细地址",type:"isEmpty"},
|
{key:"dtlAddr",message:"请输入正确的详细地址",rule:/^[\u4e00-\u9fa50-9a-zA-Z]{1,30}$/},
|
{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:"priEmail",message:"请输入联系邮箱",type:"isEmpty"},
|
{key:"priEmail",message:"请输入正确的联系邮箱",type:"isEmail"},
|
]
|
}
|
},
|
computed:{
|
...mapState(['areaList']),
|
// 判断是 添加 还是 详情
|
isAdd(){
|
return this.$route.query.isAdd =='1';
|
}
|
},
|
created(){
|
if(!this.isAdd){
|
this.getChannelInfo()
|
}
|
},
|
methods:{
|
go(){
|
this.$router.push({
|
path: '/mine/mer-manager',
|
query: {
|
chanId: this.form.chanId
|
}
|
});
|
},
|
//关闭地区弹窗
|
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()
|
},
|
// 冻结启用 渠道
|
openDialog(){
|
let {chanId,freezeStatus} = this.form;
|
this.$dialog.confirm({
|
message: `请问是否确认${freezeStatus ? '冻结' : '启用'}该渠道？`
|
}).then(() => {
|
let statusType = freezeStatus ? 0 : 1;
|
this.$api.channSwitchStatus({
|
orgId: chanId,
|
orgType: 2,
|
statusType
|
}).then((res) => {
|
let text = statusType ? '启用成功' : '冻结成功';
|
this.form.freezeStatus = statusType;
|
this.$notify_success(text)
|
}).catch((err) => {
|
|
});
|
}).catch(() => {
|
// on cancel
|
});
|
},
|
// 获取渠道详情
|
getChannelInfo(){
|
this.$api.getChannelInfo(this.$route.query.chanId).then(({body}) => {
|
this.form = {...body}
|
this.form.areaText = body.provName + '-' +body.cityName +'-'+ body.areaName;
|
}).catch((err) => {
|
|
});
|
},
|
//更新渠道信息
|
updateChannel(){
|
if(!this.validatorForm()) return
|
this.$api.updateChan(this.form).then((res) => {
|
this.$notify('保存成功')
|
}).catch((err) => {
|
});
|
},
|
// 验证form参数
|
validatorForm(){
|
return this.$validator(this.form,this.rule).check(item=>{
|
this.$notify(item.message)
|
})
|
},
|
// 新增渠道
|
addChannel() {
|
if(!this.validatorForm()) return
|
this.$api.addChan(this.form).then(() => {
|
this.$notify('新增成功')
|
setTimeout(() => this.$router.go(-1), 1000);
|
});
|
},
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
.channel-detail-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-submit {
|
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: 20px;
|
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>
|
