<template>
|
<view class="container">
|
<form @submit="submit" id="list">
|
<view class="input-group-row">
|
<text class="label">会员头像</text>
|
<view class="right-text flex align-center justify-end" @click="showUploadImage">
|
<image :src="formData.photo?formData.photo:'../../static/images/default-avatar.png'" class="avatar"></image>
|
<text class="iconfont iconarrow-backimg gray"></text>
|
</view>
|
</view>
|
<view class="input-group-row">
|
<text class="label">会员姓名<text class="require">*</text></text>
|
<input name="vipName" v-model="formData.vipName" type="text" maxlength="20" placeholder="请填写会员姓名" placeholder-class='placeholder'/>
|
</view>
|
<view class="input-group-row">
|
<text class="label">会员编号<text class="require">*</text></text>
|
<input name="vipNo" v-model="formData.vipNo" type="text" maxlength="10" placeholder="请填写会员编号" placeholder-class='placeholder'/>
|
</view>
|
<view class="input-group-row">
|
<text class="label">资金密码<text class="require">*</text></text>
|
<input name="password" v-model="formData.password" type="password" maxlength="6" placeholder="6位数字格式密码" placeholder-class='placeholder'/>
|
</view>
|
<view class="input-group-row">
|
<text class="label">手机号码<text class="require">*</text></text>
|
<input name="phone" v-model="formData.phone" type="number" maxlength="11" placeholder="请填写手机号码" placeholder-class='placeholder'/>
|
</view>
|
<view class="input-group-row">
|
<text class="label">性别<text class="require">*</text></text>
|
<view class="right-text">
|
<radio-group name="sex" @change="sexChange">
|
<label><radio value="男" color="#518EFF" class="radio" :checked="formData.sex==='男'"/>男</label>
|
<label><radio value="女" color="#518EFF" class="radio" :checked="formData.sex==='女'"/>女</label>
|
</radio-group>
|
</view>
|
</view>
|
<view class="input-group-row">
|
<text class="label">生日</text>
|
<view class="right-text">
|
<picker mode="date" @change="dateChange" :end="endDate">
|
<text :class="formData.birthday?'':'gray'">{{formData.birthday?formData.birthday:'请选择生日'}}</text>
|
</picker>
|
</view>
|
</view>
|
<view class="input-group-row">
|
<text class="label">省市区</text>
|
<view @click="openAddres" class="right-text">
|
<text :class="formData.areas?'':'gray'">{{formData.areas?formData.areas:'请选择省市区'}}</text>
|
</view>
|
</view>
|
<view class="input-group-row">
|
<text class="label">详细地址</text>
|
<input name="address" v-model="formData.address" type="text" value="" placeholder="请填写详细地址" placeholder-class='placeholder'/>
|
</view>
|
<view class="input-group-row">
|
<text class="label">到店途径</text>
|
<view class="right-text">
|
<picker mode="selector" range-key="value" :range="arrivalWayList" @change="wayChange">
|
<view>
|
<text :class="formData.arrivalWay?'':'gray'">{{formData.arrivalWay?formData.arrivalWay:'请选择到店途径'}}</text>
|
<text class="iconfont iconjiantouarrow486 gray"></text>
|
</view>
|
</picker>
|
</view>
|
</view>
|
<view class="input-group-row">
|
<text class="label">推荐人</text>
|
<navigator :url="'./selectCustomer?selectId='+formData.recommendId" hover-class="none" class="right-text">
|
<text :class="recommendName?'':'gray'">{{recommendName?recommendName:'请选择推荐人'}}</text>
|
<text class="iconfont iconarrow-backimg gray"></text>
|
</navigator>
|
</view>
|
<view class="input-group-row">
|
<text class="label">备注</text>
|
<input name="remark" v-model="formData.remark" maxlength="60" type="text" placeholder="请填写备注" placeholder-class='placeholder'/>
|
</view>
|
<navigator url="./addLabel" hover-class="none" class="input-group-row">
|
<text class="label">标签</text>
|
<view class="right-text">
|
<text class="tag" v-for="item in formData.labels">{{item.label}}</text>
|
</view>
|
</navigator>
|
<view class="footer">
|
<button form-type="submit" :disabled="isDisabled" class="blue-btn ">保存</button>
|
</view>
|
</form>
|
<region ref="simpleAddress" @onConfirm="addressChange" themeColor="#518EFF" cancelColor="#8c9fad"></region>
|
</view>
|
</template>
|
|
<script>
|
import imageUploadUtils from '../../common/jssdk/uploadImg.js'
|
import region from '../../components/simple-address/simple-address.vue';
|
export default{
|
components:{
|
region
|
},
|
data(){
|
return {
|
formData: {
|
vipName: '',
|
vipNo: '',
|
phone: '',
|
sex: '女',
|
birthday: '',
|
areas: '',
|
address: '',
|
arrivalWay: '',
|
recommendId: '',
|
remark: '',
|
labels: [],
|
photo: '',
|
password: ''
|
},
|
id: '',
|
isDisabled: false,
|
arrivalWayList: [],
|
recommendName: ''
|
}
|
},
|
onLoad(options) {
|
if(options.id){
|
this.id = options.id;
|
uni.setNavigationBarTitle({
|
title: '编辑会员'
|
});
|
this.getMemberInfo()
|
}
|
this.loadArrivalWayList();
|
this.loadReferrerList();
|
},
|
computed: {
|
endDate() {
|
return this.getDate('end');
|
}
|
},
|
methods:{
|
// 加载到店途径列表
|
loadArrivalWayList(){
|
this.$httpUtils.request('/api/vip/findArrivalWayList').then((res) => {
|
if(res.status == 200){
|
this.arrivalWayList = res.rows;
|
}
|
})
|
},
|
// 加载推荐人列表
|
loadReferrerList(){
|
this.$httpUtils.request('/api/vip/findAllVipInfo').then((res) => {
|
if(res.status == 200){
|
let result = res.rows;
|
if(this.id){
|
for(var i in result){
|
if(result[i].id === this.formData.recommendId){
|
this.recommendName = result[i].vipName;
|
break;
|
}
|
}
|
}
|
}
|
})
|
},
|
// 查询会员详情
|
getMemberInfo(){
|
this.$httpUtils.request('/api/vip/findVipInfoDetailById/'+this.id).then((res) => {
|
if(res.status == 200){
|
const result = res.mapInfo.vipInfo;
|
const {province, city, area} = result;
|
for(var key in this.formData){
|
this.formData[key] = result[key];
|
}
|
let arr = [province, city, area].filter((item) => {
|
return item
|
})
|
this.formData.areas = arr.join('-')
|
}
|
})
|
},
|
showUploadImage(){
|
imageUploadUtils.show((res) => {
|
this.formData.photo = res;
|
})
|
},
|
sexChange(e){
|
this.formData.sex = e.detail.value;
|
},
|
dateChange(e){
|
this.formData.birthday = e.detail.value;
|
},
|
getDate(type) {
|
const date = new Date();
|
let year = date.getFullYear();
|
let month = date.getMonth() + 1;
|
let day = date.getDate();
|
|
if (type === 'start') {
|
year = year - 70;
|
}
|
month = month > 9 ? month : '0' + month;;
|
day = day > 9 ? day : '0' + day;
|
return `${year}-${month}-${day}`;
|
},
|
openAddres(){
|
this.$refs.simpleAddress.open();
|
},
|
addressChange(e){
|
this.formData.areas = e.labelArr.join('-');
|
},
|
wayChange(e){
|
this.formData.arrivalWay = this.arrivalWayList[e.detail.value].value;
|
},
|
valid(){
|
const {vipName, vipNo,password, phone, sex} = this.formData;
|
if(!vipName){
|
this.$toast.info('请填写会员姓名');
|
return false;
|
}
|
if(!vipNo){
|
this.$toast.info('请填写会员编号');
|
return false;
|
}
|
if(!/^\d{6}$/.test(password)){
|
this.$toast.info('请填写6位数字格式的密码');
|
return false;
|
}
|
if(!this.$utils.checkPhone(phone)){
|
this.$toast.info('请填写正确的手机号码');
|
return false;
|
}
|
if(!sex){
|
this.$toast.info('请选择性别');
|
return false;
|
}
|
},
|
submit(e){
|
let url = '';
|
if(this.valid() === false){
|
return;
|
}
|
this.isDisabled = true;
|
if(this.id){
|
url = '/api/vip/modifyVip';
|
Object.assign(this.formData, {vipId: this.id})
|
} else {
|
url = '/api/vip/addVip';
|
}
|
let labels = this.formData.labels.map((item) => {
|
return item.label
|
});
|
this.formData.labels = labels;
|
this.$httpUtils.request(url, this.formData, 'POST').then((res) => {
|
if(res.status == 200){
|
uni.navigateBack()
|
}
|
this.$toast.info(res.info);
|
this.isDisabled = false;
|
}).catch(() => {
|
this.isDisabled = false;
|
})
|
},
|
setData(selectItem){
|
selectItem.forEach((item) => {
|
this.recommendName = item.vipName;
|
this.formData.recommendId = item.id;
|
});
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.container{
|
padding: 10px 10px;
|
}
|
.avatar{
|
width: 44px;
|
height: 44px;
|
border-radius: 50%;
|
}
|
.footer{
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
background: #FFFFFF;
|
padding: 0 10px 20px;
|
}
|
</style>
|
