mdapp/pages/user/setting/bank.vue

<template>
	
	<view class="page">
		<u-alert-tips
			v-if="cObj.auth_state === '2'"
			type="warning"
			title="当前状态:"
			description="当前资料审核中，修改提交后将重新进入审核流程"></u-alert-tips>
			<u-alert-tips
				v-if="cObj.auth_state === '3'"
				type="error"
				title="当前状态:"
				description="申请被拒绝，清理联系客服咨询"></u-alert-tips>
			<u-alert-tips
				v-if="cObj.auth_state === '1'"
				type="success"
				title="当前状态:"
				description="当前资料已审核通过，修改提交将重新进入审核流程"></u-alert-tips>
		<view class="form">
			<u-form :model="form" ref="uForm">
				<u-form-item label-width="150" label="姓名" prop="real_name"><u-input placeholder="请输入您的真实姓名" v-model="form.real_name" type="text"></u-input></u-form-item>
				<u-form-item label-width="150" label="身份证号" prop="id_number">
					<u-input placeholder="请输入您的身份证号" v-model="form.id_number" type="text"></u-input>
				</u-form-item>
				<u-form-item label-width="150" label="银行卡号" prop="bank_number">
					<u-input placeholder="请输入您的银行卡号" v-model="form.bank_number" type="text"></u-input>
				</u-form-item>
				<u-form-item label-position="top" label-width="150" label="身份证头像页" prop="id_card_front">
					<view class="id_card" @click="uploadFrontImage">
						<u-icon v-if="form.id_card_front == null" name="plus" size="32" color="#606266"></u-icon>
						<text v-if="form.id_card_front == null">请先上传身份证头像页照片</text>
						<image v-if="form.id_card_front != null" :src="idCardFront" mode="aspectFill"></image>
					</view>
				</u-form-item>
				<u-form-item label-position="top" label-width="150" label="身份证国徽页" prop="id_card_revers">
					<view class="id_card" @click="uploadBackImage">
						<u-icon v-if="form.id_card_revers == null" name="plus" size="32" color="#606266"></u-icon>
						<text v-if="form.id_card_revers == null">请先上传身份证国徽页照片</text>
						<image v-if="form.id_card_revers != null" :src="idCardRevers" mode="aspectFill"></image>
					</view>
				</u-form-item>
				<u-form-item label-position="top" label-width="150" label="银行卡号面" prop="bank_card">
					<view class="id_card" @click="uploadBankImage">
						<u-icon v-if="form.bank_card == null" name="plus" size="32" color="#606266"></u-icon>
						<text v-if="form.bank_card == null">请先上传银行卡号面</text>
						<image v-if="form.bank_card != null" :src="bankCard" mode="aspectFill"></image>
					</view>
				</u-form-item>
			</u-form>
			<u-gap height="60"></u-gap>
			<u-button type="primary" :disabled="submitButtonDisabled" @click="submitModalShow = true">提交</u-button>
			<u-gap></u-gap>
			<view class="footer">
				提交即代表同意
				<text class="agreement" @click="uni.navigateTo('/pages/agreement/agreement?type=user_agreement')">《用户协议》</text>
				、
				<text class="agreement" @click="uni.navigateTo('/pages/agreement/agreement?type=privacy_agreement')">《隐私协议》</text>
			</view>
		</view>

		<!-- modal -->
		<u-modal v-model="submitModalShow" content="请务必仔细确认各项信息是否正确" :show-cancel-button="true" @confirm="submitHandle()"></u-modal>
		
		<!-- mask -->
		<u-mask :show="maskShow" @click="maskShow = false">
			<view class="warp">
				<!-- <u-image src="https://zdcdn.2bwin.cn/uploads/20220513/90abe6fe85d6c17f6bdc069955fbb878.png" mode="widthFix" width="400rpx" border-radius="20rpx"></u-image> -->
				<u-gap></u-gap>
				<u-button size="medium" type="primary" @click="maskShow = false">确定</u-button>
			</view>
		</u-mask>
		<!-- utoast -->
		<u-toast ref="uToast" />
	</view>
</template>
<script>
var that;
export default {
	data() {
		return {
			maskShow: false,
			idCardFront: '',
			idCardRevers: '',
			bankCard: '',
			form: {
				real_name: null,
				id_number: '',
				bank_number: '',
				id_card_front: null,
				id_card_revers: null,
				bank_card: null,
			},
			cObj: {},
			submitButtonDisabled: false,
			rules: {
				real_name: [
					{
						required: true,
						message: '姓名不得为空',
						trigger: ['change', 'blur']
					},
				],
				id_number: [
					{
						required: true,
						message: '身份证号不得为空',
						trigger: ['change', 'blur']
					},
				],
				bank_number: [
					{
						required: true,
						message: '银行卡号不得为空',
						trigger: ['change', 'blur']
					},
				],
				id_card_front: [
					{
						required: true,
						message: '身份证头像页照片不得为空',
						trigger: ['change', 'blur']
					}
				],
				id_card_revers: [
					{
						required: true,
						message: '身份证国徽页照片不得为空',
						trigger: ['change', 'blur']
					}
				],
				bank_card: [
					{
						required: true,
						message: '银行卡号面照片不得为空',
						trigger: ['change', 'blur']
					}
				],
			},
			submitModalShow: false,
		};
	},
	onLoad(params) {
		this.getData()
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		getData () {
			uni.api.base.apiuserauthinfo().then(res => {
				const cObj = res || {}
				if (cObj.id) {
					this.idCardFront = cObj.id_card_front
					this.idCardRevers = cObj.id_card_revers
					this.bankCard = cObj.bank_card
					let f = {
						real_name: cObj.real_name,
						id_number: cObj.id_number,
						bank_number: cObj.bank_number,
						id_card_front: cObj.id_card_front,
						id_card_revers: cObj.id_card_revers,
						bank_card: cObj.bank_card,
					}
					this.form = {...f}
					// if (cObj.auth_state === '1') this.submitButtonDisabled = true
					this.cObj = {...cObj}
				}
			})
		},
		uploadImgHandle (bc) {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				success: function(res) {
					const filePath = res.tempFilePaths[0];
					let token = uni.getStorageSync('MD_token') || ''
					uni.uploadFile({
						url: uni.baseUrl + 'api/upload/cloudpiv',
						filePath,
						name: 'upload',
						formData: {
							'token': token
						},
						success: (f) => {
							const cData = JSON.parse(f.data)
							if (cData.errno === 0) {
								if (bc && typeof(bc) === 'function') bc(cData.data)
							} else {
								uin.$msg(cData.errmsg || `未知错误-${cData.errno}`)
							}
						}
					})
				}
			})
		},
		// 选择、验证、上传正面照片
		uploadFrontImage() {
			this.uploadImgHandle((d) => {
				this.form.id_card_front = d.url
				this.idCardFront = d.pub_url
			})
		},
		// 选择、上传身份证背面
		uploadBackImage() {
			this.uploadImgHandle((d) => {
				this.form.id_card_revers = d.url
				this.idCardRevers = d.pub_url
			})
		},
		// 选择、上传银行卡号面
		uploadBankImage() {
			this.uploadImgHandle((d) => {
				this.form.bank_card = d.url
				this.bankCard = d.pub_url
			})
		},
		submitHandle() {
			const that = this
			this.$refs.uForm.validate(valid => {
				if (valid) {
					let params = {
						...that.form
					}
					uni.api.base.apiuserauthadd(params).then(res => {
						uni.$msgConfirm('编辑成功', () => {
							uni.reLaunch({
								url: '/pages/user/setting/setting'
							})
						}, () => {
							uni.reLaunch({
								url: '/pages/user/setting/setting'
							})
						})
					})
				}
			});
		},


		// 以下是工具函数
		// 格式化日期的月份或天数的显示（小于10，在前面增加0）
		getFormatDate(value) {
			if (value == undefined || value == '') {
				return '';
			}
			var str = value;
			if (parseInt(value) < 10) {
				str = '0' + value;
			}
			return str;
		}
	}
};
</script>
<style lang="scss">
.page {
	background-color: #ffffff;
}

.form {
	border-radius: 10rpx;
	padding: 0 40rpx;
}

.popup-body {
	.tips-title {
		font-size: $u-p;
		margin-bottom: 20rpx;
	}

	.tips-content {
		font-size: $u-p2;
		color: $u-tips-color;
		margin-bottom: 60rpx;
	}
}

.id_card {
	color: #606266;
	width: 100%;
	height: 350rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #f4f5f6;
	font-size: $u-p2;
	border-radius: 10rpx;

	image {
		border-radius: 10rpx;
	}
}

.footer {
	position: relative;
	text-align: center;
	font-size: $u-p2;
	left: 0;
	bottom: 20rpx;
	.agreement {
		color: $u-theme-color;
	}
}

.slot-content {
	font-size: 28rpx;
	color: $u-content-color;
	padding: 20rpx;
}

.warp {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.rect {
	width: 400rpx;
	height: 400rpx;
	background-color: #fff;
}
</style>