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>
			</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>
		</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>	
</style>