odd_job_applet/pages/my/myauth.vue

<template>
	<view>
		<form v-if="userinfo.authstatus==1">
			<view class="bg-white padding-tb grid margin-bottom text-center col-2">
				<view class="bg-white">
					<avatar selWidth="660rpx" selHeight="440rpx" @upload="setIdcardZpic"
						:avatarSrc="userinfo.idcardzpic ? userinfo.idcardzpic : $getImageUrl('static/images/applet/idcardzpic.png')"
						noTab="true" avatarStyle="width: 330rpx; height: 220rpx; border-radius: 0rpx;"></avatar>
					<view class="text-sm text-grey padding-top-sm"> 上传身份证（头像页） </view>
				</view>
				<view class="bg-white">
					<avatar selWidth="660rpx" selHeight="440rpx" @upload="setIdcardFpic"
						:avatarSrc="userinfo.idcardfpic ? userinfo.idcardfpic : $getImageUrl('static/images/applet/idcardfpic.png')"
						noTab="true" avatarStyle="width: 330rpx; height: 220rpx; border-radius: 0rpx;"></avatar>
					<view class="text-sm text-grey padding-top-sm"> 上传身份证（国徽页） </view>
				</view>
			</view>
			<ocr-navigator @onSuccess="idCardSuccess" certificateType="idCard" :opposite="false">
				<!-- <button type="primary">点击识别身份证</button> -->
				<view class="Identification">点击识别身份证</view>
			</ocr-navigator>
			<view class="cu-list menu margin-top-sm">
				<view class="cu-item arrow" data-title="姓名" data-infobox="input" data-field="nickname"
					:data-value="userinfo.nickname" @click="showModal">
					<!-- <view class="cu-item"> -->
					<view class="content">
						<text>姓名</text>
					</view>
					<view class="action">
						<text class="text-grey">{{userinfo.nickname}}</text>
					</view>
				</view>
				<view class="cu-item arrow" data-title="身份证号" data-infobox="input" data-field="idcard"
					:data-value="userinfo.idcard" @click="showModal">
					<!-- <view class="cu-item"> -->
					<view class="content">
						<text>身份证号</text>
					</view>
					<view class="action">
						<text class="text-grey">{{userinfo.idcard}}</text>
					</view>
				</view>
				<view class="cu-item arrow">
					<view class="content">
						<text>性别</text>
					</view>
					<view class="action">
						<picker mode="selector" @change="genderChange" :value="userinfo.gender" :range="sex_list"
							:range-key="index">
							<view class="picker padding-tb text-right text-grey"
								style="width: 280rpx;line-height: 40rpx;">
								{{userinfo.gender ? sex_list[userinfo.gender - 1] : '请选择'}}
							</view>
						</picker>
						<!-- <text class="text-grey">{{userinfo.gender==1 ? '男' : '女'}}</text> -->
					</view>
				</view>
				<view class="cu-item arrow">
					<view class="content">
						<text>出生日期</text>
					</view>
					<view class="action">
						<picker mode="date" @change="birthdayChange">
							<view class="picker padding-tb text-right text-grey"
								style="width: 280rpx;line-height: 40rpx;">
								{{userinfo.birthday ? userinfo.birthday : '请选择'}}
							</view>
						</picker>
					</view>
				</view>
				<view v-if="userinfo.authremark" class="padding text-red">{{userinfo.authremark}}</view>
			</view>
			<!-- <view class="padding flex flex-direction">
				<button class="cu-btn bg-blue margin-tb-sm lg" @tap="setAuthStatus">提交审核</button>
			</view> -->
			<view class="bottomEmpty"></view>
			
			<view class="bottomArea">
				<view class="bottomButton" @tap="setAuthStatus">提交审核</view>
			</view>
		</form>

		<view v-else>
			<view v-if="userinfo.authstatus==2" class="bg-white padding-tb grid text-center col-2 margin-bottom-sm">
				<view class="bg-white">
					<image mode="aspectFill" style="width: 330rpx; height: 220rpx;" :src="userinfo.idcardzpic"></image>
					<view class="text-sm text-grey padding-top-sm"> 身份证（头像页） </view>
				</view>
				<view class="bg-white">
					<image mode="aspectFill" style="width: 330rpx; height: 220rpx;" :src="userinfo.idcardfpic"></image>
					<view class="text-sm text-grey padding-top-sm"> 身份证（国徽页） </view>
				</view>
			</view>

			<view class="cu-list menu">
				<view class="cu-item">
					<view class="content">
						<text>姓名</text>
					</view>
					<view class="action">
						<text class="text-grey">{{userinfo.nickname}}</text>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<text>身份证号</text>
					</view>
					<view class="action">
						<text class="text-grey">{{userinfo.idcard}}</text>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<text>性别</text>
					</view>
					<view class="action">
						<text class="text-grey">{{userinfo.gender==1 ? '男' : '女'}}</text>
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						<text>出生日期</text>
					</view>
					<view class="action">
						<text class="text-grey">{{userinfo.birthday}}</text>
					</view>
				</view>
				<view v-if="userinfo.authstatus==2" class="padding text-red">实名认证信息已提交审核，请耐心等待。</view>
				<view v-if="userinfo.authstatus==3" class="padding text-green">实名认证信息已通过审核。</view>
			</view>
		</view>

		<view class="cu-modal" :class="forminfo.isshow">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">输入 {{forminfo.title}}</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-grey"></text>
					</view>
				</view>
				<view class="padding-xl bg-white text-left solid-top solid-bottom">
					<input :placeholder="'请输入'+forminfo.title+'...'" @input="bindInput" :value="forminfo.value"></input>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-grey text-grey" @tap="hideModal">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="subModal">确定</button>
					</view>
				</view>
			</view>
		</view>

		<view class="padding"></view>
	</view>
</template>

<script>
	var _this;
	import avatar from "@/components/yq-avatar/yq-avatar.vue";
	export default {
		components: {
			avatar
		},
		data() {
			return {
				userinfo: {},

				forminfo: {
					isshow: "",
					title: "",
					field: "",
					value: ""
				},
				sex_list: ['男', '女'],
			}
		},
		onLoad: function() {
			_this = this;
			_this.userinfo = _this.checkLogin("/pages/my/myinfo");
		},
		methods: {
			idCardSuccess: function(e) {
				console.log(e);
				var card_info = {};
				if (e.detail) {
					card_info = e.detail;
				} else {
					card_info = e.result;
				}
				console.log(card_info);
				var info = {
					nickname: card_info.name.text,
					idcard: card_info.id.text,
					gender: card_info.gender.text == '男' ? 1 : 2,
					birthday: card_info.birth.text
				};
				_this.$req.ajax({
					path: "my/editIdCard",
					data: {
						userid: _this.userinfo.id,
						data: info
					}
				}).then((data) => {
					_this.userinfo = data;
					uni.setStorageSync('userinfo', data);
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},
			// 填写字段
			hideModal: function() {
				_this.forminfo = {
					isshow: "",
					title: "",
					field: "",
					value: ""
				};
			},
			showModal: function(e) {
				_this.forminfo.title = e.currentTarget.dataset.title;
				_this.forminfo.field = e.currentTarget.dataset.field;
				_this.forminfo.value = e.currentTarget.dataset.value;
				_this.forminfo.isshow = "show";
			},
			bindInput: function(e) {
				_this.forminfo.value = e.detail.value;
			},
			subModal: function() {
				_this.editFiled(_this.forminfo.field, _this.forminfo.value);
			},

			// 上传身份证
			setIdcardZpic: function(rsp) {
				_this.$req.ajaxFile({
					path: "attachment/tplfieldimage",
					title: '正在上传',
					filePath: rsp.path,
					fileName: 'file',
				}).then((filedata) => {
					var data = JSON.parse(filedata.data);
					_this.editFiled('idcardzpic', data.data.src);
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},
			setIdcardFpic: function(rsp) {
				_this.$req.ajaxFile({
					path: "attachment/tplfieldimage",
					title: '正在上传',
					filePath: rsp.path,
					fileName: 'file',
				}).then((filedata) => {
					var data = JSON.parse(filedata.data);
					_this.editFiled('idcardfpic', data.data.src);
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},

			// 更新用户字段
			editFiled: function(field, value) {
				_this.$req.ajax({
					path: "my/edituserinfo",
					data: {
						userid: _this.userinfo.id,
						field: field,
						value: value
					}
				}).then((data) => {
					_this.userinfo = data;
					uni.setStorageSync('userinfo', data);
					_this.hideModal();
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},

			// 提交审核
			setAuthStatus: function() {
				_this.$req.ajax({
					path: "my/setauthstatus",
					data: {
						userid: _this.userinfo.id,
					}
				}).then((data) => {
					_this.userinfo = data;
					uni.setStorageSync('userinfo', data);
					uni.showModal({
						title: '提示',
						content: '提交成功，请等待审核！',
						showCancel: false,
						success: (res) => {
							uni.navigateBack();
						}
					});
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},

			genderChange: function(e) {
				_this.userinfo.gender = e.detail.value - 0 + 1;
				_this.editFiled('gender', _this.userinfo.gender);
			},
			birthdayChange: function(e) {
				_this.userinfo.birthday = e.detail.value
				_this.editFiled('birthday', _this.userinfo.birthday);
			}
		}
	}
</script>

<style lang="scss">
	.Identification {
		margin: 0 auto;
		width: 50%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #ff1a25;
		border-radius: 50rpx;
		border: 1rpx solid #ff1a25;
		box-shadow: 0rpx 0rpx 10rpx 4rpx rgba(255, 73, 100, 0.3);
	}
	
	.bottomEmpty {
		margin-top: 80rpx;
		height: 130rpx;
	}
	
	.bottomArea {
		position: fixed;
		bottom: 0;
		z-index: 100;
		width: 100%;
		height: 130rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
		box-shadow: -10rpx -12rpx 12rpx 2rpx rgba(52, 85, 73, 0.16);
	
		.bottomButton {
			margin: 0 28rpx;
			width: 696rpx;
			height: 90rpx;
			line-height: 90rpx;
			background: #CA151C;
			font-size: 33rpx;
			text-align: center;
			color: #FFFFFF;
			border-radius: 10rpx;
		}
	}
</style>