zhuangxiu/pages/user/realName/realNameAuthentication.vue

<template>
	<view class="content padding-b-30">
		<view class="listBox" @click="navCroper(480,640,'upimg')">
			<view class="list">
				<view class="flex listItem">
					<view class="titleBox">
						<view class="title">正面照</view>
						<view class="font-color-gray font-size-sm">
							上传您的正面照
						</view>
					</view>
					<view class="right flex">
						<!-- #ifdef H5 -->
						<image class="userRenzheng" :src="upimg||this.urlFile + '/static/image/realUser.png'"
							mode="widthFix"></image>
						<!-- #endif -->
						<!-- #ifndef H5 -->
						<image class="userRenzheng" :src="upimg||'/static/image/realUser.png'" mode="widthFix"></image>
						<!-- #endif -->
					</view>
				</view>
			</view>
		</view>
		<view class="listBox" @click="navCroper(400,300,'sfzZm')">
			<view class="list">
				<view class="flex listItem">
					<view class="titleBox">
						<view class="title">身份证正面</view>
						<view class="font-color-gray font-size-sm">
							上传您的身份证正面
						</view>
					</view>
					<view class="right flex">
						<!-- #ifdef H5 -->
						<image class="userRenzheng" :src="sfzZm||this.urlFile + '/static/image/realZm.png'"
							mode="widthFix"></image>
						<!-- #endif -->
						<!-- #ifndef H5 -->
						<image class="userRenzheng" :src="sfzZm||'/static/image/realZm.png'" mode="widthFix"></image>
						<!-- #endif -->
					</view>
				</view>
			</view>
		</view>
		<view class="listBox" @click="navCroper(400,300,'sfzFm')">
			<view class="list">
				<view class="flex listItem">
					<view class="titleBox">
						<view class="title">身份证反面</view>
						<view class="font-color-gray font-size-sm">
							上传您的身份证反面
						</view>
					</view>
					<view class="right flex">
						<!-- #ifdef H5 -->
						<image class="userRenzheng" :src="sfzFm||this.urlFile + '/static/image/realBm.png'"
							mode="widthFix"></image>
						<!-- #endif -->
						<!-- #ifndef H5 -->
						<image class="userRenzheng" :src="sfzFm||'/static/image/realBm.png'" mode="widthFix"></image>
						<!-- #endif -->
					</view>
				</view>
			</view>
		</view>
    
		<view class="listBox">
			<view class="list">
				<view class="flex listItem">
					<view class="flex titleBox">
						<text class="title">真实姓名</text>
					</view>
					<view class="right flex">
						<input class="input" v-model="name" type="text" placeholder="请填写真实姓名"
							placeholder-class="placeholder" />
					</view>
				</view>
				<view class="flex listItem">
					<view class="flex titleBox">
						<text class="title">身份证号</text>
					</view>
					<view class="right flex">
						<input class="input" v-model="cardId" type="text" placeholder="请填写身份证号"
							placeholder-class="placeholder" />
					</view>
				</view>
			</view>
		</view>
		<view class="base-buttom" :class="{ 'bg-gray': loding }" @click="loding ? '' : confirm()">提交</view>
	</view>
</template>

<script>
	import {
		real_name
	} from '@/api/user.js';
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				name: '', //用户名称
				cardId: '', //身份证号
				upimg: '', //图片地址
				xyfImg: '', //信用分图片
				sfzZm: '', //身份证正面
				sfzFm: '', //身份证反面
				loding: false, //是否载入中
			};
		},
		onLoad(options) {},
		computed: {
			// #ifdef H5
			...mapState(['urlFile']),
			// #endif
			...mapState(['baseURL']),
		},
		methods: {
			upLoad(path) {
				// #ifdef H5
				console.log(path,'h5');
				// #endif
				uni.showLoading({
					title: '图片上传中',
					mask: true
				});
				return new Promise((resolve, error) => {
					uni.uploadFile({
						url: this.baseURL + '/api/upload/image', //仅为示例，非真实的接口地址
						filePath: path,
						name: 'file',
						header: {
							"Authori-zation": 'Bearer ' + uni.getStorageSync('token')
						},
						success: (uploadFileRes) => {
							if ("string" === typeof uploadFileRes.data) {
								resolve(JSON.parse(uploadFileRes.data).data)
							} else {
								resolve(uploadFileRes.data.data)
							}
						},
						complete() {
							uni.hideLoading()
						}
					});
				})
			},
			// 图片裁切
			/**
			 * @param {Number} w 裁切宽度比例
			 * @param {Number} h 裁切高度比例
			 * @param {Number} mw 图片最小宽度
			 * @param {Number} mh 图片最小高度
			 * @param {String} url url修改
			 */
			navCroper(w, h, type) {
				let that = this;
				let tt = (type=='upimg'?2:1)
				this.onImg(tt).then((url) => {
					uni.navigateTo({
						url: `./cropper?width=${w}&height=${h}`,
						events: {
							uploadSuccess(res) {
								that.upLoad(res).then((urldata) => {
									that[type] = urldata.url;
								})
								// console.log(e, '接受数据');
							}
						},
						success: function(res) {
							// 通过eventChannel向被打开页面传送数据
							res.eventChannel.emit('urlNext', {
								url
							})
						}
					})
				})
			},
			onImg(type) {
				const _this = this
				return new Promise((ok, erro) => {
					// 判断是否需要选择
					if(type==1){
						uni.showActionSheet({
							itemList: ['拍照', '选择一张照片'],
							success: function(res) {
								_this.chooseImage(res.tapIndex).then((url) => {
									ok(url)
								}).catch((res) => {
									erro(res)
								})
							},
							fail: function(res) {
								erro(res)
								console.log(res.errMsg);
							}
						});
					}
					// 判断是否只需要拍照
					if(type==2){
						_this.chooseImage(0).then((url) => {
							ok(url)
						}).catch((res) => {
							erro(res)
						})
					}
					
					

				})

			},
			chooseImage: function(index) {
				const _this = this
				return new Promise((ok, error) => {
					// 从相册/相机选择
					// 如需直接开相机或直接选相册，请只使用一个选项
					const sourceType = index === 0 ? ['camera'] : ['album']
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: sourceType,
						success: function(res) {
							ok(res.tempFilePaths[0])
						},
						fail(e) {
							uni.showModal({
								title: '文件打开错误',
								content: '请设置授权文件存储权限',
								showCancel: false,
							});
							error(e)
						}
					});
				})

			},

			// 实名认证
			confirm(e) {
				if (!this.name) {
					uni.showModal({
						title: '错误',
						content: '请填写姓名',
						showCancel: false,
					});
					return
				}
				if (!this.cardId) {
					uni.showModal({
						title: '错误',
						content: '请填写身份证号',
						showCancel: false,
					});
					return
				}
				if (!this.upimg) {
					uni.showModal({
						title: '错误',
						content: '请上传正面照',
						showCancel: false,
					});
					return
				}
				if (!this.sfzZm) {
					uni.showModal({
						title: '错误',
						content: '请上传身份证正面照',
						showCancel: false,
					});
					return
				}
				if (!this.sfzFm) {
					uni.showModal({
						title: '错误',
						content: '请上传身份证反面照',
						showCancel: false,
					});
					return
				}
				/*
				if (!this.xyfImg) {
					uni.showModal({
						title: '错误',
						content: '上传您的信用分截图',
						showCancel: false,
					});
					return
				}*/
				this.loding = true;
				real_name({
						real_name: this.name,
						id_card: this.cardId,
						face_image: this.upimg.replace('data:image/jpeg;base64,', ''),
						id_card_front_image: this.sfzZm.replace('data:image/jpeg;base64,', ''),
						id_card_back_image: this.sfzFm.replace('data:image/jpeg;base64,', ''),
						pay_points: this.xyfImg.replace('data:image/jpeg;base64,', ''),

					})
					.then((e) => {
						this.loding = false;
						if (e.msg == '已实名') {
							uni.showModal({
								title: '提示',
								content: '恭喜您实名认证成功',
								showCancel: false,
								complete: () => {
									uni.switchTab({
										url: '/pages/user/user'
									})
								}
							});
						} else {
							uni.showToast({
								title: '认证失败' ,
								icon:"none"
							})
						}
					})
					.catch(err => {
						this.loding = false;
						console.log(err);
					});
			}
		}
	};
</script>

<style lang="scss">
	.content,
	page {
		min-height: 100%;
	}

	.listBox {
		margin: $page-row-spacing;
		margin-top: 30rpx;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: #FFFFFF;
	}

	.list {
		.input {
			text-align: right;
			font-size: $font-base;
			color: $color-gray;
			width: 100%;
		}

		.listItem {
			padding: 35rpx 40rpx;
			border-bottom: 1px solid $page-color-light;
		}

		.listIconImg {
			width: 36rpx;
		}

		.right {
			color: $font-color-light;
			font-size: $font-base;
			flex-grow: 1;
			justify-content: flex-end;

			.userRenzheng {
				width: 400rpx;
			}

			.img {
				width: 26rpx;
			}
		}

		.titleBox {
			.title {
				color: $font-color-base;
				font-size: $font-base;
			}
		}
	}

	.bg-gray {
		background-color: $color-gray;
	}

	.base-buttom {
		position: relative;
		bottom: auto;
		right: auto;
		left: auto;
	}
</style>