<template>
|
<view class="activity-container" :data-theme='theme()' :class="theme() || ''">
|
<form @submit="formSubmit" @reset="formReset">
|
<view class="activity-form p20 pb150">
|
<view class="form-section bg-white radius24">
|
<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" v-if="formData.user_id">
|
<text>{{user_info.name}}</text>
|
</view>
|
<view class="make-item input-box flex-1 gray9" v-else>请选择</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>
|
<view class="upload-btn tr flex-1 pr" @click="openUpload()">
|
<template v-if="formData.avatarUrl!=''">
|
<image :src="formData.avatarUrl" mode="aspectFit"></image>
|
<view class="delete-img tc" @click.stop="deleteImg()">
|
<text class="iconfont icon-guanbi"></text>
|
</view>
|
</template>
|
<template v-else>
|
<view class="icon iconfont icon-zhanghumingcheng f60"></view>
|
</template>
|
</view>
|
</view>
|
<view class="form-item d-b-c border-b-e">
|
<view class="item-title">姓名</view>
|
<input type="text" v-model="formData.real_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.mobile" class="tr flex-1" placeholder='请输入手机号' />
|
</view>
|
<view class="form-item d-b-c border-b-e">
|
<view class="item-title">成员身份</view>
|
<picker class="" value="" @change="changePosition" :range="positionList" range-key='name' :value="position_index">
|
<view class="d-s-c">
|
<view class="make-item input-box flex-1">{{positionList[position_index].name|| '请选择'}}</view>
|
<view class="icon iconfont icon-jiantou f24"></view>
|
</view>
|
</picker>
|
</view>
|
<view class="form-item d-b-c border-b-e">
|
<view class="item-title">所属企业</view>
|
<view class="d-s-c" @click="selectSupplier()">
|
<view class="make-item input-box flex-1">{{supplier_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>
|
<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">
|
<textarea class="ww100 lh150 p20 radius12 box-s-b" placeholder-class="grary9" style=" background-color: #f7f7f7;
|
height: 150rpx;" v-model="formData.describe" placeholder="请输入个人简介（选填）"></textarea>
|
</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>
|
<!-- 上传图片 -->
|
<Upload v-if="isupload" @getImgs="returnImgsFunc"></Upload>
|
<!-- 企业弹窗 -->
|
<Supplier :isOpenSupplier="open_supplier" @close="closeSupplierFunc"></Supplier>
|
<!-- 用户弹窗 -->
|
<User :isOpenUser="open_user" @close="closeUserFunc"></User>
|
</view>
|
</template>
|
|
<script>
|
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
|
import Upload from '@/components/upload/upload.vue';
|
import Supplier from './popup/supplier';
|
import User from './popup/user';
|
export default {
|
components: {
|
mpvueCityPicker,
|
User,
|
Upload,
|
Supplier
|
},
|
data() {
|
return {
|
loading: false,
|
cityPickerValueDefault: [0, 0, 0],
|
selectCity: '选择省,市,区',
|
formData: {
|
user_id: 0,
|
real_name: '',
|
mobile: '',
|
position_id: '',
|
shop_supplier_id: '', // 所属企业
|
describe: '',
|
province_id: '',
|
city_id: '',
|
region_id: '',
|
avatarUrl: '',
|
},
|
open_supplier: false,
|
supplier_name: '', // 所属企业
|
open_user: false,
|
user_info: {}, // 选择的用户
|
is_loaded: false,
|
province: [],
|
city: [],
|
area: [],
|
positionList: [], // 职务列表
|
isupload: false,
|
position_index: '',
|
};
|
},
|
created() {
|
this.getData();
|
},
|
methods: {
|
// 获取省市区
|
getData(){
|
let self = this;
|
self._get('branch.admin.member/add', {}, function(res) {
|
self.province = res.data.regionData[0];
|
self.city = res.data.regionData[1];
|
self.area = res.data.regionData[2];
|
self.positionList = res.data.positionList;
|
self.is_loaded = true;
|
});
|
},
|
|
// 提交
|
formSubmit() {
|
let self = this;
|
let formData = this.formData;
|
if (!formData.user_id) {
|
uni.showToast({
|
title: '请绑定用户',
|
duration: 1000,
|
icon: 'none'
|
});
|
return false;
|
}
|
if (formData.avatarUrl == '') {
|
uni.showToast({
|
title: '请上传头像',
|
duration: 1000,
|
icon: 'none'
|
});
|
return false;
|
}
|
if (formData.real_name == '') {
|
uni.showToast({
|
title: '请输入姓名',
|
duration: 1000,
|
icon: 'none'
|
});
|
return false;
|
}
|
if (formData.mobile == '') {
|
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.mobile)) {
|
uni.showToast({
|
title: '手机号格式不正确',
|
duration: 1000,
|
icon: 'none'
|
});
|
return false;
|
}
|
if (!formData.position_id) {
|
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;
|
}
|
|
uni.showLoading({
|
title: '正在提交',
|
mask: true
|
});
|
self._post('branch.admin.member/add', {formData: JSON.stringify(formData)}, function(res) {
|
self.showSuccess(res.msg, function() {
|
self.gotoPage('/pages/branch/admin/member/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_info.name = e.real_name ? e.real_name : e.nickName;
|
this.user_info.avatarUrl = e.avatarUrl;
|
if (!this.formData.avatarUrl) {
|
this.formData.avatarUrl = e.avatarUrl;
|
}
|
}
|
this.open_user = false;
|
},
|
|
/*上传*/
|
openUpload() {
|
this.isupload = true;
|
},
|
|
/*获取图片*/
|
returnImgsFunc(e) {
|
let self = this;
|
if (e != null) {
|
this.formData.avatarUrl = e[0].file_path;
|
}
|
this.isupload = false;
|
},
|
|
/*删除图片*/
|
deleteImg(){
|
this.formData.avatarUrl = this.user_info.avatarUrl != this.formData.avatarUrl ? this.user_info.avatarUrl : '';
|
},
|
|
// 选择职务
|
changePosition(e) {
|
this.position_index = e.target.value;
|
this.formData.position_id = this.positionList[this.position_index].position_id;
|
},
|
|
// 打开企业选择弹窗
|
selectSupplier() {
|
this.open_supplier = true;
|
},
|
|
// 关闭企业选择弹窗
|
closeSupplierFunc(e) {
|
if (e != null) {
|
this.formData.shop_supplier_id = e.shop_supplier_id;
|
this.supplier_name = e.name;
|
}
|
this.open_supplier = 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 {
|
|
image {
|
width: 90rpx;
|
height: 90rpx;
|
border-radius: 90rpx;
|
display: inline-block;
|
}
|
|
>.iconfont {
|
font-size: 90rpx;
|
}
|
|
.delete-img {
|
position: absolute;
|
width: 40rpx;
|
height: 40rpx;
|
background: rgba(0,0,0,.5);
|
border-radius: 40rpx;
|
line-height: 40rpx;
|
right: -10rpx;
|
top: 0;
|
|
.iconfont {
|
font-size: 24rpx;
|
}
|
}
|
}
|
}
|
}
|
|
}
|
.footer-btn {
|
position: fixed;
|
left: 0;
|
bottom: 0;
|
width: 100%;
|
box-sizing: border-box;
|
z-index: 9;
|
border-top: 1rpx solid #eeeeee;
|
}
|
</style>
|
