<template>
|
<view class="activity-container" :data-theme='theme()' :class="theme() || ''">
|
<form @submit="formSubmit" @reset="formReset">
|
<view class="activity-form p20 pb150" v-if="!loading">
|
<view class="form-section bg-white radius24">
|
<view class="form-item d-b-c border-b-e">
|
<view class="item-title">分会名称</view>
|
<input type="text" v-model="formData.name" class="tr flex-1" placeholder='请输入分会名称' />
|
</view>
|
<view class="form-item d-b-c border-b-e">
|
<view class="item-title">所在区域</view>
|
<view class="d-s-c flex-1" @click="showMulLinkageThreePicker">
|
<input class="tr flex-1" type="text" placeholder="请选择所在区域" placeholder-class="gray9" v-model="selectCity"
|
disabled="true" />
|
<view class="icon iconfont icon-jiantou f24"></view>
|
</view>
|
</view>
|
<view class="form-item d-b-c border-b-e">
|
<view class="item-title">绑定会长</view>
|
<view class="d-s-c" @click="openUser">
|
<view class="make-item input-box flex-1">{{user_name||'请选择'}}</view>
|
<view class="icon iconfont icon-jiantou f24"></view>
|
</view>
|
</view>
|
<view class="form-item d-b-c border-b-e">
|
<view class="item-title">登录账号</view>
|
<input type="text" v-model="formData.user_name" class="tr flex-1" placeholder='请输入登录账号' />
|
</view>
|
<view class="form-item d-b-c border-b-e">
|
<view class="item-title">登录密码</view>
|
<input type="password" v-model="formData.password" class="tr flex-1" placeholder='请输入登录密码，如不修改请留空' />
|
</view>
|
<view class="form-item d-b-c border-b-e">
|
<view class="item-title">联系人</view>
|
<input type="text" v-model="formData.link_name" class="tr flex-1" placeholder='请输入联系人' />
|
</view>
|
<view class="form-item d-b-c border-b-e">
|
<view class="item-title">联系电话</view>
|
<input type="text" v-model="formData.link_phone" class="tr flex-1" placeholder='请输入联系电话' />
|
</view>
|
</view>
|
</view>
|
<view class="footer-btn p20 bg-white">
|
<button class="theme-btn" form-type="submit" type="default">提交</button>
|
</view>
|
</form>
|
<!-- 区域选择 -->
|
<mpvue-city-picker v-if="is_loaded" ref="mpvueCityPicker" :province="province" :city="city" :area="area" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
|
<!-- 用户弹窗 -->
|
<User :isOpenUser="open_user" @close="closeUserFunc"></User>
|
</view>
|
</template>
|
|
<script>
|
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
|
import User from './popup/user';
|
export default {
|
components: {
|
mpvueCityPicker,
|
User
|
},
|
data() {
|
return {
|
loading: false,
|
cityPickerValueDefault: [0, 0, 0],
|
selectCity: '选择省,市,区',
|
formData: {
|
name: '',
|
user_id: 0,
|
user_name: '',
|
password: '',
|
link_name: '',
|
link_phone: '',
|
branch_type: 20, // 类型 10总会 20分会
|
parent_branch_id: '', // 所属总会
|
province_id: '',
|
city_id: '',
|
region_id: '',
|
description: '',
|
},
|
open_user: false,
|
user_info: {},
|
is_loaded: false,
|
province: [],
|
city: [],
|
area: [],
|
user_name: '', // 选择的会长昵称
|
};
|
},
|
onLoad(e) {
|
this.branch_id = e.branch_id;
|
},
|
mounted() {
|
this.getData();
|
},
|
methods: {
|
// 获取省市区
|
getData(){
|
let self = this;
|
self.loading = true;
|
self._get('branch.admin.branch/edit', {branch_id: self.branch_id}, function(res) {
|
self.formData = res.data.model;
|
self.formData.password = '';
|
if(self.formData.superUser){
|
self.formData.user_name = self.formData.superUser.user_name;
|
if (self.formData.superUser.user) {
|
self.user_name = self.formData.superUser.user.nickName;
|
}
|
}
|
let region = self.formData.region;
|
self.selectCity = region.province + region.city + region.region;
|
self.province = res.data.regionData[0];
|
self.city = res.data.regionData[1];
|
self.area = res.data.regionData[2];
|
self.is_loaded = true;
|
self.loading = false;
|
});
|
},
|
|
// 提交
|
formSubmit() {
|
let self = this;
|
let formData = this.formData;
|
if (formData.name == '') {
|
uni.showToast({
|
title: '请输入分会名称',
|
duration: 1000,
|
icon: 'none'
|
});
|
return false;
|
}
|
if (formData.province_id == '' || formData.city_id == '') {
|
uni.showToast({
|
title: '请选择所在区域',
|
duration: 1000,
|
icon: 'none'
|
});
|
return false;
|
}
|
if (formData.user_name == '') {
|
uni.showToast({
|
title: '请选输入登录账号',
|
duration: 1000,
|
icon: 'none'
|
});
|
return false;
|
}
|
if (formData.link_name == '') {
|
uni.showToast({
|
title: '请输入联系人姓名',
|
duration: 1000,
|
icon: 'none'
|
});
|
return false;
|
}
|
if (formData.link_phone == '') {
|
uni.showToast({
|
title: '请输入联系电话',
|
duration: 1000,
|
icon: 'none'
|
});
|
return false;
|
}
|
let reg = /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/;
|
if (!reg.test(formData.link_phone)) {
|
uni.showToast({
|
title: '联系电话格式不正确',
|
duration: 1000,
|
icon: 'none'
|
});
|
return false;
|
}
|
uni.showLoading({
|
title: '正在提交',
|
mask: true
|
});
|
self._post('branch.admin.branch/edit', {branch_id: self.branch_id, formData: JSON.stringify(formData)}, function(res) {
|
self.showSuccess(res.msg, function() {
|
self.gotoPage('/pages/branch/admin/branch/index')
|
}, null, function(){
|
uni.hideLoading();
|
});
|
});
|
},
|
|
/*三级联动选择*/
|
showMulLinkageThreePicker() {
|
this.$refs.mpvueCityPicker.show();
|
},
|
|
/*确定选择的省市区*/
|
onConfirm(e) {
|
this.selectCity = e.label;
|
this.formData.province_id = e.cityCode[0];
|
this.formData.city_id = e.cityCode[1];
|
this.formData.region_id = e.cityCode[2];
|
},
|
|
openUser() {
|
this.open_user = true;
|
},
|
|
closeUserFunc(e) {
|
if (e != null) {
|
this.formData.user_id = e.user_id;
|
this.user_name = e.nickName;
|
if (e.real_name) {
|
this.user_name += '('+ e.real_name +')';
|
}
|
}
|
this.open_user = false;
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.activity-form {
|
|
.form-section {
|
padding: 0 20rpx;
|
|
+ .form-section {
|
margin-top: 20rpx;
|
}
|
|
.form-item {
|
padding: 30rpx 0;
|
font-size: 26rpx;
|
|
.upload-btn {
|
height: 300rpx;
|
border-radius: 12rpx;
|
overflow: hidden;
|
border: 1rpx solid #eee;
|
|
image {
|
width: 360rpx;
|
height: 300rpx;
|
}
|
|
.delete-img {
|
position: absolute;
|
width: 50rpx;
|
height: 50rpx;
|
background: rgba(0,0,0,.5);
|
border-radius: 50rpx;
|
line-height: 50rpx;
|
right: 0;
|
top: 0;
|
}
|
}
|
}
|
}
|
|
}
|
.footer-btn {
|
position: fixed;
|
left: 0;
|
bottom: 0;
|
width: 100%;
|
box-sizing: border-box;
|
z-index: 9;
|
border-top: 1rpx solid #eeeeee;
|
}
|
</style>
|
