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

<template>
	<view style="padding: 30rpx;">
		<view style="position: relative;">
			<view class="tip">
				请填写真实信息，以便我们后续为您提供完善的
				<br />
				个人职业成长定制服务！
			</view>
			<view class="btn" style="position: absolute;right: 20rpx;top: 0;">编辑</view>
		</view>
		<view class="form">
			<u-form :model="form" ref="uForm">
				<u-form-item label="姓名"><u-input v-model="form.name" /></u-form-item>
				<u-form-item label="手机号码" :label-width="auto"><u-input v-model="form.tel" /></u-form-item>
				<u-form-item label="身份证号" :label-width="auto"><u-input v-model="form.id" /></u-form-item>
				<u-form-item label="性别">
					<picker @change="bindPickerChangeSex" :value="index_sex" :range="array_sex">
						<view class="picker">{{ array_sex[index_sex] }}</view>
					</picker>
				</u-form-item>
				<u-form-item label="邮箱" :label-width="auto"><u-input v-model="form.email" /></u-form-item>
				<u-form-item label="出生日期" prop="birth" :label-width="auto">
					<picker mode="date" :value="form.date" @change="bindDateChange">
						<view class="picker">{{ form.date }}</view>
					</picker>
				</u-form-item>
				<u-form-item label="身份"></u-form-item>
				<u-form-item label="户籍" prop="xz">
					<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
						<view class="picker">{{ form.region1[0] }} {{ form.region1[1] }} {{ form.region1[2] }}</view>
					</pick-regions>
				</u-form-item>
				<u-form-item label="婚姻状况" :label-width="auto">
					<picker @change="bindPickerChangeMarry" :value="index_marry" :range="array_marry">
						<view class="picker">{{ array_marry[index_marry] }}</view>
					</picker>
				</u-form-item>
				<u-form-item label="所在城市" prop="xz" :label-width="auto">
					<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion2">
						<view class="picker">{{ form.region2[0] }} {{ form.region2[1] }} {{ form.region2[2] }}</view>
					</pick-regions>
				</u-form-item>
				<u-form-item label="政治面貌" :label-width="auto">
					<picker @change="bindPickerChangePolitic" :value="index_politic" :range="array_politic">
						<view class="picker">{{ array_politic[index_politic] }}</view>
					</picker>
				</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="fileList"
						width="120"
						height="169"
						size-type="['compressed']"
						max-count="1"
						@on-list-change="changePhotoListHeader"
					>
						<template v-slot:addBtn>

							<image src="/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>
		<u-button type="success" @click="submitForm">提交</u-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			action: '33',
			fileList: [],
			fileList1: [],
			fileList2: [],
			defaultRegionCode: '440112',
			form: {
				date: '1990-01-01',
				region1: ['广东省', '广州市', '天河区'],
				region2: ['广东省', '广州市', '天河区']
			},
			index_sex: 0,
			array_sex: ['男', '女'],
			index_marry: 0,
			array_marry: ['未婚', '已婚'],
			index_politic: 0,
			array_politic: ['群众', '团员', '党员']
		};
	},
	onLoad(option) {},
	onShow() {},
	methods: {
		changePhotoListHeader(lists, name) {
			this.fileList = lists;
		},
		changePhotoListZ(lists, name) {
			this.fileList1 = lists;
		},
		changePhotoListF(lists, name) {
			this.fileList2 = lists;
		},
		async submitForm() {
			
			console.log(this.form)
			const file1 = await this.uploadFile(this.fileList, 0);
			// const file2 = await this.uploadFile(this.fileList1, 1);
			// const file3 = await this.uploadFile(this.fileList2, 1);
		},
		uploadFile(options, int) {
			var self = this;
			return new Promise((resolve, reject) => {
				var data = {
					imageStatus: int
				};
				this.$api.aliyunpolicy(data).then(res => {
					var ossToken = res.data.data.resultContent;
					console.log(ossToken)
					uni.uploadFile({
						url: ossToken.host,
						name: 'file',
						filePath: options[0].file.path,
						fileType: 'image',
						header: {
							AuthorizationToken: 'WX ' + this.$store.state.token
						}, 
						formData: {
							key: ossToken.dir,
							OSSAccessKeyId: ossToken.accessid,
							policy: ossToken.policy,
							Signature: ossToken.signature,
							success_action_status: 200,
						},
						success: (result)=>{
							console.log(result);
							resolve()
						},
						fail: (error)=>{
							console.log(error)
						}
					});
				});
				resolve();
			});
		},
		bindPickerChangeSex(e) {
			this.index_sex = e.detail.value;
		},
		bindPickerChangePolitic(e) {
			this.index_politic = e.detail.value;
		},
		bindPickerChangeMarry(e) {
			this.index_marry = e.detail.value;
		},
		handleGetRegion2(region) {
			let array = [];
			array.push(region[0].name);
			array.push(region[1].name);
			array.push(region[2].name);
			this.form.region2 = array;
		},
		// 获取选择的地区
		handleGetRegion(region) {
			let array = [];
			array.push(region[0].name);
			array.push(region[1].name);
			array.push(region[2].name);
			this.form.region1 = array;
		},
		bindDateChange(e) {
			this.form.date = e.detail.value;
			var year = this.date.substr(0, 4);
			var month = this.date.substr(5, 2);
			var day = this.date.substr(8, 2);
		},
		actionSheetCallback(index) {
			uni.hideKeyboard();
			this.form.sex_text = this.actionSheetList[index].text;
		}
	}
};
</script>

<style scope>
.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>