junzitang/pagesT/user/editUserInfo.vue

<template>
	<view :class="['qn-page-' + theme]">
		<view class="user-pic-view">
			<QiniuUpload @uploadSuccess="uploadSuccess" :images="user_info.avatar" @handleRemove="imgRemove" :flag="true">
				<!-- <div slot="cont">
					<view class="user-img-view"><img class="user-pic" :src="user_info.avatar" alt="" /></view>
					<p>修改头像</p>
				</div> -->
			</QiniuUpload>
		</view>
		<view class="info-edit-ul" v-if="customer_field.includes('真实姓名')">
			<view class="info-edit-li">
				<p class="edit-label">
					真实姓名
					<text class="start-icon">*</text>
				</p>
				<input type="text" placeholder="请输入真实姓名" v-model="user_info.name" placeholder-class="placeholderClass" />
			</view>

			<view class="info-edit-li" v-if="customer_field.includes('电话')">
				<p class="edit-label">
					电话
					<text class="start-icon">*</text>
				</p>
				<input type="number" placeholder="请输入您的手机号" v-model="user_info.mobile" placeholder-class="placeholderClass" />
			</view>
			<RegionSel @pickerRegionChange="pickerRegionChange" v-if="customer_field.includes('地址')">
				<view class="info-edit-li">
					<p class="edit-label">
						区域
						<text class="start-icon">*</text>
					</p>
					<view style="padding: 10rpx 0;">
						<span v-if="region_name" style="font-size: 28rpx;">{{ region_name }}</span>
						<span v-else style="color: #999;font-size: 28rpx;">请选择</span>
					</view>
				</view>
			</RegionSel>
			<view class="info-edit-li" v-if="customer_field.includes('地址')">
				<p class="edit-label">
					详细地址
					<text class="start-icon">*</text>
				</p>
				<input type="text" placeholder="请输入详细地址" v-model="user_info.address" placeholder-class="placeholderClass" @blur="addressBlur" />
			</view>
			<view class="info-edit-li" v-if="customer_field.includes('客户类型')">
				<p class="edit-label">
					客户类型
					<text class="start-icon">*</text>
				</p>
				<picker style="width: 680rpx;padding: 20upx 0;" class="clearfix" @change="typeChange" :value="tyIndex" :range="type_list" range-key="title">
					<block v-if="type_list[tyIndex]">
						<text class="uni-input" style="color:#000000">{{ type_list[tyIndex].title }}</text>
					</block>
					<block v-else><text class="uni-input">请选择客户类型</text></block>
				</picker>
			</view>
			<view class="info-edit-li" v-if="customer_field.includes('营业执照')">
				<p class="edit-label">
					营业执照
					<text class="start-icon" v-if="isEvidence === 5">*</text>
				</p>
				<QiniuUpload @uploadSuccess="uploadLicense" :images="user_info.extend.license" :flag="true">
					<!-- <div slot="cont">
						<view class="user-img-license">
							<img v-if="user_info.extend.license" class="license-pic" :src="user_info.extend.license" alt="" />
							<text v-else>+</text>
						</view>
					</div> -->
				</QiniuUpload>
			</view>
			<!-- <view class="info-edit-li">
				<p class="edit-label">生日</p>
				<picker mode="date" :value="date" @change="bindDateChange">
					<view v-if="user_info.birthday" style="color:#000000" class="uni-input">{{ birthday }}</view>
					<view v-else class="uni-input">请选择</view>
				</picker>
			</view> -->
			<view class="info-edit-li" v-if="customer_field.includes('备注')">
				<p class="edit-label">备注</p>
				<input type="text" placeholder="备注" v-model="user_info.remark" placeholder-class="placeholderClass" />
			</view>
		</view>
		<view class="btn-view"><view class="sub-btn primary-btn" @click="updateInfo">保存</view></view>
	</view>
</template>

<script>
import QiniuUpload from '../components/qiniu/QiniuUpload.vue';
import webUrl from '@/config.js';
import RegionSel from '../components/region/RegionSel.vue';
import { getEnToken } from '@/access/common.js';
export default {
	components: {
		QiniuUpload,
		RegionSel
	},
	data() {
		return {
			date: '1990-01-01',
			region_name: '',
			user_info: {
				name: '',
				avatar: '',
				remark: '',
				provinceCode: '',
				cityCode: '',
				districtCode: '',
				longitude: '',
				latitude: '',
				birthday: '',
				type: '',
				extend: {
					license: []
				},
				contact: {
					name: '',
					provinceCode: '',
					cityCode: '',
					districtCode: '',
					address: '',
					mobile: ''
				}
			},
			type_list: [],
			tyIndex: '',
			user_id: 0,
			uploadtoken: '',
			img_url: '',
			mobileO: '',
			base_set_info: {},
			isEvidence: 4,
			birthday: '',
			customer_field: []
		};
	},
	async onLoad(options) {
		this.user_info.avatar = [this.$common.getAvator()];
		this.user_info.mobile = this.$common.getphoneNumber() || '';
		// 获取用户注册的手机号，避免用户二次输入
		this.mobileO = this.$common.getphoneNumber() || '';
		this.base_set_info = this.$store.state.baseSet;
		await this.getUserInfo();
		await this.getBasicField();
	},
	methods: {
		getBasicField() {
			this.$u.api
				.getBasicField({
					field: ['customerData']
				})
				.then(res => {
					this.customer_field = res.data.customerData;
					if (this.customer_field.includes('客户类型')) {
						this.getCustomerSourceList();
					}
				});
		},
		// 选择生日
		bindDateChange(e) {
			this.birthday = e.target.value;
			this.user_info.birthday = this.$_utils.dateToStamp(e.target.value);
		},
		typeChange(e) {
			this.tyIndex = e.detail.value;
			this.user_info.type = this.type_list[this.tyIndex].id;
			this.isEvidence = this.type_list[this.tyIndex].isEvidence;
		},
		// 获取客户类型
		getCustomerSourceList() {
			this.$u.api.getCustomerSourceList().then(({ data }) => {
				this.type_list = data.map(item => {
					return {
						...item,
						id: item.id,
						title: item.name
					};
				});
				if (this.user_info.type) {
					this.tyIndex = this.type_list.findIndex(item => item.id === this.user_info.type);
				} else {
					const indexT = this.type_list.findIndex(item => item.defaultStatus === 5);
					if (indexT > -1) {
						this.tyIndex = indexT;
						this.user_info.type = this.type_list[indexT].id;
						this.isEvidence = this.type_list[indexT].isEvidence;
					}
				}
			});
		},
		pickerRegionChange(row) {
			this.user_info.provinceCode = row[0].value;
			this.user_info.cityCode = row[1].value;
			this.user_info.districtCode = row[2].value;
			this.user_info.contact.provinceCode = row[0].value;
			this.user_info.contact.cityCode = row[1].value;
			this.user_info.contact.districtCode = row[2].value;
			this.region_name = row[0].label + '-' + row[1].label + '-' + row[2].label;
		},
		addressBlur() {
			if (!this.region_name) {
				this.$api.msg('请选择所属区域');
				return;
			}
		},
		uploadSuccess(res) {
			const uploadPicUrl = `${webUrl.QINIU_URL}/${res.key}`;
			this.user_info.avatar = [uploadPicUrl];
		},
		uploadLicense(res) {
			const uploadPicUrl = `${webUrl.QINIU_URL}/${res.key}`;
			this.user_info.extend.license = [uploadPicUrl];
		},
		// 获取用户个人信息
		getUserInfo(Refresh) {
			this.$u.api.getCustomerInfo().then(({ data }) => {
				this.user_info = {
					...this.user_info,
					...data,
					mobile: this.mobileO || data.mobile,
					avatar: [data.avatar],
					extend: data.extend || {
						license: []
					},
					address: data.contact[0] ? data.contact[0].address : '',
					contact: data.contact[0] || {
						provinceCode: '',
						cityCode: '',
						districtCode: '',
						address: '',
						name: '',
						mobile: this.mobileO || data.mobile
					}
				};
				console.log(this.user_info);
				if (data.contact[0]) {
					this.user_info.provinceCode = data.contact[0].provinceCode;
					this.user_info.cityCode = data.contact[0].cityCode;
					this.user_info.districtCode = data.contact[0].districtCode;
				}
				this.avatar = this.user_info.avatar;
				this.birthday = this.user_info.birthday ? this.$_utils.formatDate(this.user_info.birthday, 'yyyy-MM-dd') : '';
				if (data.contact.length) {
					this.region_name = data.contact[0].area.provinceName + '-' + data.contact[0].area.cityName + '-' + data.contact[0].area.districtName;
				}
				this.$store.commit('commit_userStatus', data);
				if (Refresh) {
					if (this.base_set_info.personnelReview === 4) {
						this.goPage('/pages/index/index', 'switchTab');
					} else {
						if (data.status === 1) {
							uni.showModal({
								title: '账号正在审核中，您可以',
								content: '联系电话：' + (data.enterpriseMobile || ''),
								confirmText: '联系客服',
								cancelText: '去逛逛',
								success: res => {
									if (res.confirm) {
										uni.makePhoneCall({
											phoneNumber: data.enterpriseMobile,
											complete: () => {
												this.goPage('/pages/index/index', 'switchTab');
											}
										});
									} else {
										this.goPage('/pages/index/index', 'switchTab');
									}
								}
							});
						} else if (data.status === 2) {
							this.goPage('/pages/index/index', 'switchTab');
						} else if (data.status === 3) {
							// 说明资料不完善，跳转到完善资料的页面
							uni.showModal({
								title: '审核未通过审核，请重新修改资料',
								content: data.auditFailReason || '',
								cancelText: '取消',
								confirmText: '修改资料',
								success: res => {}
							});
						} else if (data.status === 0) {
							uni.showModal({
								title: '请完善信息后再进行操作',
								content: '商家需要对客户资料进行审核，请您完善信息后再次进行操作',
								confirmText: '完善信息',
								cancelText: '取消',
								success: res => {}
							});
						}
					}
				}
			});
		},
		//修改个人信息
		updateInfo() {
			if (!this.user_info.name) {
				this.$api.msg('请填写个人名称');
				return;
			} else if (this.customer_field.includes('电话') && !this.user_info.mobile) {
				this.$api.msg('请填写电话');
				return;
			} else if (this.customer_field.includes('地址') && !this.user_info.districtCode) {
				this.$api.msg('请选择所属区域');
				return;
			} else if (this.customer_field.includes('地址') && !this.user_info.address) {
				this.$api.msg('请补充完详细地址');
				return;
			} else if (this.customer_field.includes('客户类型') && !this.user_info.type) {
				this.$api.msg('请选择客户类型');
				return;
			} else if (this.customer_field.includes('营业执照') && parseInt(this.isEvidence) === 5 && !this.user_info.extend.license) {
				this.$api.msg('由于您选择的客户类型是零售商或者是批发商，所以必须上传营业执照');
				return;
			}
			const params = {
				...this.user_info,
				avatar: this.user_info.avatar[0],
				contact: {
					...this.user_info.contact,
					name: this.user_info.name,
					mobile: this.user_info.mobile,
					address: this.user_info.address
				}
			};
			// return
			this.$u.api.editCustomerInfo(params).then(res => {
				this.getUserInfo('Refresh');
				if (this.customer_field.includes('地址')) {
					this.addAddress();
				}
			});
		},
		// 客户地址添加
		addAddress() {
			this.$u.api
				.addShippingAddress({
					name: this.user_info.name,
					mobile: this.user_info.mobile,
					defaultStatus: 5,
					provinceCode: this.user_info.provinceCode,
					cityCode: this.user_info.cityCode,
					districtCode: this.user_info.districtCode,
					address: this.user_info.address
				})
				.then(res => {});
		},
		imgRemove(arr) {
			this.user_info.avatar = arr;
		}
	}
};
</script>

<style lang="scss">
uni-page-body,
page {
	background: #fff;
}

.uni-input {
	font-size: 28rpx;
	color: #999999;
	padding: 10upx 0;
}

.uni-input-input {
	width: 80%;
	padding: 10upx 0;
}

.user-pic-view {
	text-align: center;
}

.user-img-view {
	width: 120upx;
	height: 120upx;
	border-radius: 100%;
	margin: 32upx auto;
	background: #eee;
}

.user-img-license {
	width: 120upx;
	height: 120upx;
	border-radius: 8upx;
	border: 2upx #999999 dashed;
	margin: 32upx auto;
	background: #eee;
	text-align: center;
	line-height: 100upx;
	color: #666;
	font-size: 100rpx;
	font-weight: 300;
}

.license-pic {
	width: 120upx;
	height: 120upx;
}

.user-pic {
	width: 120upx;
	height: 120upx;
	border-radius: 100%;
}

.info-edit-ul {
	padding: 25upx 25upx 200upx 25upx;
}

.edit-label {
	color: #6a6a6a;
	font-size: 24upx;
}

.info-edit-li .edit-val {
	padding: 12upx 0 24upx;
	font-size: 28upx;
}

.info-edit-li {
	position: relative;
	border-bottom: 1upx solid #ddd;
	padding-top: 24upx;
}

.info-edit-li > input {
	margin: 10upx 0;
	font-size: 28upx;
	width: 80%;
}

.more-icon {
	width: 36upx;
	height: 36upx;
	position: absolute;
	top: 50upx;
	right: 10upx;
}

.sub-btn {
	font-size: 30upx;
	text-align: center;
	color: #ffffff;
	width: 645upx;
	height: 72upx;
	background: $base-btn-bg;
	border-radius: 10rpx;
	line-height: 72upx;
	margin: 0 auto;
}

.btn-view {
	padding: 30upx 0;
	position: fixed;
	background: #ffffff;
	width: 100%;
	bottom: 0;
	left: 0;
	z-index: 9;
	box-shadow: 15upx 12upx 42upx 0upx rgba(113, 113, 113, 0.2);
}

.start-icon {
	font-size: 24upx;
	color: #f53c28;
}
</style>