zz--front/pages2/wd/info.vue

<template>
	<view style="padding: 30rpx;">
		<view style="display: flex;align-items: center;justify-content: space-between;">
			<view class="tip">
				请填写真实信息，以便我们后续为您提供完善的
				<br />
				个人职业成长定制服务！
			</view>
			<view style="display: flex;align-items: center;">
				<view class="btn" style="margin-right: 5rpx;" :style="form.certified === 1 ? isStatus : ''" @click="form.certified === 0 ? certification() : iscertification()">
					{{ form.certified === 0 ? '认证' : '已认证' }}
				</view>
				<view class="btn">编辑</view>
			</view>
		</view>
		<view class="form">
			<u-form :model="form" ref="uForm">
				<u-form-item label="姓名" prop="realname"><u-input :disabled="form.certified === 1" v-model="userInfo.realname" /></u-form-item>
				<u-form-item label="手机号码" prop="telphone" :label-width="auto"><u-input :disabled="form.certified === 1" v-model="form.telphone" /></u-form-item>
				<u-form-item label="身份证号" prop="idCard" :label-width="auto"><u-input :disabled="form.certified === 1" v-model="form.idCard" /></u-form-item>
				<u-form-item label="性别" prop="sex">
					<picker @change="bindPickerChangeSex" :value="form.sex" :range="array_sex">
						<view class="picker">{{ array_sex[form.sex] }}</view>
					</picker>
				</u-form-item>
				<u-form-item label="邮箱" prop="email" :label-width="auto"><u-input v-model="form.email" /></u-form-item>
				<u-form-item label="出生日期" prop="userBirth" :label-width="auto">
					<picker mode="date" :value="form.userBirth" @change="bindDateChange">
						<view class="picker">{{ form.userBirth }}</view>
					</picker>
				</u-form-item>
				<!-- <u-form-item label="身份"></u-form-item> -->
				<u-form-item label="户籍">
					<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
						<view class="picker">{{ form.houseProvince }} {{ form.houseCity }} {{ form.houseDistrict }}</view>
					</pick-regions>
				</u-form-item>
				<u-form-item label="婚姻状况" prop="marry" :label-width="auto">
					<picker @change="bindPickerChangeMarry" :value="form.marry" :range="array_marry">
						<view class="picker">{{ array_marry[form.marry] }}</view>
					</picker>
				</u-form-item>
				<u-form-item label="所在城市" :label-width="auto">
					<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion2">
						<view class="picker">{{ form.province }} {{ form.city }} {{ form.district }}</view>
					</pick-regions>
				</u-form-item>
				<u-form-item label="政治面貌" :label-width="auto" prop="politic">
					<picker @change="bindPickerChangePolitic" :value="form.politic" :range="array_politic">
						<view class="picker">{{ array_politic[form.politic] }}</view>
					</picker>
				</u-form-item>
				<u-form-item label="一寸头像" prop="fileList" :label-width="auto" label-position="top">
					<u-upload
						:auto-upload="false"
						custom-btn="true"
						:action="action"
						:file-list="fileList"
						width="120"
						height="169"
						size-type="['compressed']"
						max-count="1"
						@on-list-change="changePhotoListHeader"
					>
						<template v-slot:addBtn>
							<image :src="form.oneInchPhotos ? $method.splitImgHost( form.oneInchPhotos) : '/static/info_1.png'" style="width: 120rpx; height: 169rpx;"></image>
						</template>
					</u-upload>
				</u-form-item>
				<!-- <u-form-item label="身份证人像面" :label-width="auto" label-position="top">
					<u-upload
						:auto-upload="false"
						custom-btn="true"
						:action="action"
						:file-list="fileList1"
						width="120"
						height="82"
						size-type="['compressed']"
						max-count="1"
						@on-list-change="changePhotoListZ"
					>
						<template v-slot:addBtn>
							<image src="/static/info_2.png" style="width: 120rpx; height: 82rpx;"></image>
						</template>
					</u-upload>
				</u-form-item>
				<u-form-item label="身份证国徽面" :label-width="auto" label-position="top">
					<u-upload
						:auto-upload="false"
						custom-btn="true"
						:action="action"
						:file-list="fileList2"
						width="120"
						height="82"
						size-type="['compressed']"
						max-count="1"
						@on-list-change="changePhotoListF"
					>
						<template v-slot:addBtn>
							<image src="/static/info_3.png" style="width: 120rpx; height: 82rpx;"></image>
						</template>
					</u-upload>
				</u-form-item> -->
			</u-form>
		</view>
		<button  @click="resultForm" class="submit_btn">提交</button>
	</view>
</template>

<script>
import {mapGetters} from 'vuex';
export default {
	data() {
		return {
			isStatus: 'background-color:#a8a8a8;',
			BizToken: '',
			action: '33',
			fileList: [],
			defaultRegionCode: '440112',
			form: {
				realname: '',
				telphone: '',
				idCard: '',
				email: '',
				sex: 0,
				marry: 0,
				politic: 0,
				userBirth: '1990-01-01',
				houseProvince: '', //户籍省
				houseCity: '', //户籍市
				houseDistrict: '', //户籍区
				province: '', //城市省
				city: '', //市
				district: '', //区
				// region1: ['广东省', '广州市', '天河区'],
				// region2: ['广东省', '广州市', '天河区'],
				oneInchPhotos: ''
			},
			// index_sex: 0,
			array_sex: ['男', '女'],
			array_marry: ['未婚', '已婚'],
			array_politic: ['群众', '团员', '党员'],
			rules: {
				realname: [
					{
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					}
				],
				telphone: [
					{
						required: true,
						message: '请输入手机号码',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur'
					}
				],
				idCard: [
					{
						required: true,
						message: '请输入身份证号码',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur'
					}
				],
				width: 0,
				height: 0,
			}
		};
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
		if(this.form.houseProvince === ''){
			this.form.houseProvince = '广东省'
		}
		if(this.form.houseCity === ''){
			this.form.houseCity = '广州市'
		}
		if(this.form.houseDistrict === ''){
			this.form.houseDistrict = '天河区'
		}
		if(this.form.province === ''){
			this.form.province = '广东省'
		}
		if(this.form.city === ''){
			this.form.city = '广州市'
		}
		if(this.form.district === ''){
			this.form.district = '天河区'
		}
	},
	onLoad(option) {
		const Verify = require('@/wxcomponents/verify_mpsdk/main.js');
		Verify.init();
	},
	methods: {
		// getUserInfos() {
		// 	this.$api.getInfo().then(res => {
		// 		this.form = res.data.data;
		// 	});
		// },
		changePhotoListHeader(lists, name) {
			this.fileList = lists;
		},
		resultForm() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					this.submitForm();
				} else {
					console.log('验证失败');
				}
			});
		},
		iscertification() {},
		async certification() {
			var self = this;
			const faceBiz = await self.$api.faceBizToken();
			self.BizToken = faceBiz.data.data.bizToken;
			wx.startVerify({
				data: {
					token: self.BizToken
				},
				success: result => {
					setTimeout(() => {
						self.$api.facecertification(self.BizToken).then(faceRec => {
							//刷新用户信息
							self.$api.refreshUserInfo() 
						});
					}, 500);
				},
				fail: err => {
					setTimeout(() => {
						uni.showModal({
							title: '提示',
							content: err,
							showCancel: false
						});
					}, 500);
				}
			});
		},
		imageInfos() {
			var self = this
			return new Promise((resolve, reject) => {
				uni.getImageInfo({
					src: self.fileList[0].url,
					success: async res => {
						let canvasWidth = res.width; //图片原始长宽
						let canvasHeight = res.height;
						if (canvasWidth > 1000 || canvasHeight > 1000) {
							uni.compressImage({
								src: self.fileList[0].url,
								quality: 75,
								width: '50%',
								height: '50%',
								success: async rest => {
									const waitUpload = await self.uploadFile(rest.tempFilePath, 0);
									resolve()
								} 
							});
						} else {
							console.log('无需压缩');
							const waitUpload = await self.uploadFile(self.fileList[0].url, 0);
							resolve()
						}
					}
				});
			});
		},
		async submitForm() {
			var self = this;
			if (this.fileList.length > 0) {
				const waitYS = await this.imageInfos();
			}
			var data = {
				userId: this.form.userId,
				email: this.form.email,
				houseProvince: this.form.houseProvince, //户籍省份
				idCard: this.form.idCard,
				houseCity: this.form.houseCity,
				houseDistrict: this.form.houseDistrict,
				province: this.form.province, //城市省份
				city: this.form.city, //城市
				district: this.form.district, //区
				realname: this.form.realname, //姓名
				sex: this.form.sex, //性别
				telphone: this.form.telphone, //手机号
				userBirth: this.form.userBirth, //出生日期
				marry: this.form.marry, //结婚状态
				politic: this.form.politic, //政治面貌
				oneInchPhotos: this.form.oneInchPhotos //一寸照
			};
			this.$api.appuserInfo(data).then(res => {
				if (res.data.code === 200) {
					uni.showToast({
						title: '提交成功',
						icon: 'none'
					});
					self.$api.refreshUserInfo() 
				}
			});
		},
		uploadFile(options, int) {
			return new Promise((resolve, reject) => {
				var self = this;
				var data = {
					imageStatus: int
				};
				this.$api.aliyunpolicy(data).then(res => {
					console.log(res);
					var ossToken = res.data.data.resultContent;
					uni.uploadFile({
						url: ossToken.host,
						name: 'file',
						filePath: options,
						fileType: 'image',
						header: {
							AuthorizationToken: 'WX ' + uni.getStorageSync('token')
						},
						formData: {
							key: ossToken.dir,
							OSSAccessKeyId: ossToken.accessid,
							policy: ossToken.policy,
							Signature: ossToken.signature,
							callback: ossToken.callback,
							success_action_status: 200
						},
						success: result => {
							if (result.statusCode === 200) {
								self.form.oneInchPhotos = ossToken.dir;
								resolve();
							} else {
								uni.showToast({
									title: '一寸头像上传失败',
									icon: 'none'
								});
								return;
							}
						},
						fail: error => {
							uni.showToast({
								title: '上传接口报错',
								icon: 'none'
							});
							return;
						}
					});
				});
			});
		},
		bindPickerChangeSex(e) {
			this.form.sex = e.detail.value;
		},
		bindPickerChangePolitic(e) {
			this.form.politic = e.detail.value;
		},
		bindPickerChangeMarry(e) {
			this.form.marry = e.detail.value;
		},
		//城市
		handleGetRegion2(region) {
			this.form.province = region[0].name;
			this.form.city = region[1].name;
			this.form.district = region[2].name;
		},
		// 籍贯获取选择的地区
		handleGetRegion(region) {
			console.log(region)
			this.form.houseProvince = region[0].name;
			this.form.houseCity = region[1].name;
			this.form.houseDistrict = region[2].name;
		},
		bindDateChange(e) {
			console.log(e.detail.value);
			this.form.userBirth = e.detail.value;
			// var year = this.form.userBirth.substr(0, 4);
			// var month = this.userBirth.substr(5, 2);
			// var day = this.userBirth.substr(8, 2);
		},
		actionSheetCallback(index) {
			uni.hideKeyboard();
			this.form.sex_text = this.actionSheetList[index].text;
		}
	},
	computed: {...mapGetters(['userInfo'])},
	watch:{
		userInfo(val, oldVal){
			this.form = val
		}
	}
};
</script>


<style scope>
	.submit_btn{
		background-color: #32467B !important;
		border-color: #32467B !important;
		color: #FFFFFF;
		font-size: 30rpx;
		padding: 5rpx;
	}
.u-form-item__message.data-v-5e7216f1 {
	padding: 0px !important;
}
.picker {
	text-align: right;
}
input {
	text-align: right;
}
.form {
	background: #ffffff;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
	border-radius: 32rpx;
	margin: 20rpx 0;
	padding: 15rpx;
}
.btn {
	width: 96rpx;
	height: 48rpx;
	background: #32467b;
	border-radius: 16rpx;
	font-size: 24rpx;
	color: #ffffff;
	line-height: 48rpx;
	text-align: center;
}

page {
	background: #fdfdfd;
}
.tip {
	width: 70%;
	font-size: 20rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #32467b;
}
</style>