BLi/pages/login/perfect.vue

<template>
	<view class="perfect">
		<u-toast ref="uToast" />
		<view class="head">
			完善信息
			<view class="msg">温馨提示：输入姓名要和开户人姓名保持一致。</view>
		</view>
		<view class="con">
			<view class="form">
				<view class="input flex">
					<view class="icon">
						<image src="../../static/img/li1.png" mode=""></image>
					</view>
					<u-input v-model="name" :clearable="false" type="text" :border="border" placeholder="请输入姓名" />
				</view>
				<view class="input flex">
					<view class="icon">
						<image src="../../static/img/li2.png" mode=""></image>
					</view>
					<u-input v-model="card" maxlength="18" :clearable="false" type="text" :border="border" placeholder="请输入身份证号" />
				</view>
				<view class="input flex">
					<view class="icon">
						<image src="../../static/img/li7.png" mode=""></image>
					</view>
					<u-input v-model="backCard" :clearable="false" type="number" :border="border" placeholder="请输入银行账户卡号" />
				</view>
				<view class="input flex">
					<view class="icon">
						<image src="../../static/img/li8.png" mode=""></image>
					</view>
					<u-input v-model="cardholderPhone" maxlength="11" :clearable="false" type="number" :border="border" placeholder="请输入银行预留手机号" />
				</view>
				<view class="input flex" v-if="yzh == 1">
					<view class="icon">
						<image src="../../static/img/yzm.png" mode=""></image>
					</view>
					<view class="u-flex u-row-between u-flex-1">
						<u-input v-model="code" maxlength="6" :clearable="false" type="number" :border="border" placeholder="请输入验证码" />
						<text style="font-size: 28rpx;color: #167FFF;" @click="getCode">{{tips}}</text>
					</view>
				</view>
				<!-- <view class="input flex">
					<view class="icon">
						<image src="../../static/img/li3.png" mode=""></image>
					</view>
					<u-input v-model="phone" :clearable="false" type="number" :border="border" placeholder="请输入联系电话" />
				</view> -->
				<!-- 				<view class="input flex">
					<view class="icon">
						<image src="../../static/img/li4.png" mode=""></image>
					</view>
					<u-input v-model="contactInformation" :clearable="false" type="text" :border="border" placeholder="请输入联系方式" />
				</view> -->
				<view class="input flex">
					<view class="icon">
						<image src="../../static/img/li5.png" mode=""></image>
					</view>
					<u-input v-model="dwname" :clearable="false" type="text" :border="border" placeholder="请输入单位名称" />
				</view>
				<view class="input flex">
					<view class="icon">
						<image src="../../static/img/li6.png" mode=""></image>
					</view>
					<u-input v-model="ksname" :clearable="false" type="text" :border="border" placeholder="请输入科室名称" />
				</view>
				<view class="updata">
					<view class="text">请上传医师执照或工牌照片 </view>
					<u-upload ref="uUpload1" :show-progress="false" :file-list="fileList" @on-change="progress1" :action="action" max-count="1"></u-upload>
				</view>
			</view>
			<view class="u-flex u-row-center" style="margin-top: 40rpx;" v-if="yzh == 1">
				<u-checkbox v-model="checkbox" shape="circle">
					<view class="u-flex" style="font-size: 24rpx;">
						<text>已阅读并同意</text>
						<text style="color: #167FFF;" @click.stop="toxieyi">《灵活就业合作伙伴协议》</text>
					</view>
				</u-checkbox>
			</view>
			<!-- <view class="form form1">

				<view class="input flex">
					<view class="icon">
						<image src="../../static/img/li1.png" mode=""></image>
					</view>
					<u-input v-model="cardholderName" :clearable="false" type="text" :border="border" placeholder="请输入持卡人姓名" />
				</view>

				<view class="input flex">
					<view class="icon">
						<image src="../../static/img/li4.png" mode=""></image>
					</view>
					<u-input v-model="backName" :clearable="false" type="text" :border="border" placeholder="请输入开户行" />
				</view>
			</view> -->
		</view>
		<view class="btn" @click="completeInformation()">
			<view class="btn_con">完成</view>
		</view>
		<u-verification-code :seconds="seconds" ref="uCode" @change="codeChange"></u-verification-code>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 演示地址，请勿直接使用
				action: 'http://www.example.com/upload',
				fileList: [],
				name: '',
				card: '',
				phone: '',
				contactInformation: '',
				dwname: '',
				ksname: '',
				backCard: '',
				backName: '',
				cardholderName: '',
				cardholderPhone: '',
				code: '',
				yzh: 0,
				doctorAndSpecialist: '',
				data: {
					id: '',
					name: '',
					card: '',
					phone: '',
					contactInformation: '',
					dwname: '',
					ksname: '',
					backCard: '',
					backName: '',
					cardholderName: '',
					cardholderPhone: '',
					cardPic: '',
					completeInformation: "2"
				},
				checkbox: false,

				tips: '',
				// refCode: null,
				seconds: 60,
				ref: '',
				xieyipdf: ''
			}
		},
		onLoad(option) {
			this.action = this.$httpUrl + '/api/uploadLocality'
			this.getUserInfo()


			this.$http.agreeUserAgreement().then(res => {

			})
		},
		methods: {
			toxieyi() {
				if (this.xieyipdf) {
					uni.openDocument({
						filePath: this.xieyipdf
					})
					return
				}
				uni.downloadFile({
					url: 'https://binglishouji.oss-cn-hangzhou.aliyuncs.com/temp/隐私协议_1691832165623.pdf',
					success: (res) => {
						this.xieyipdf = res.tempFilePath
						uni.openDocument({
							filePath: this.xieyipdf
						})
					}
				})
				// uni.navigateTo({
				// 	url:"./agreement?type=1"
				// })
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (!this.backCard) {
					this.$u.toast('请输入银行卡号')
					return
				}
				if (!this.card) {
					this.$u.toast('请输入身份证号')
					return
				}
				let files1 = [];
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				files1 = this.$refs.uUpload1.lists.filter(val => {
					return val.progress == 100;
				})
				// console.log(files1)
				let values = []
				if (files1.length != 0) {
					files1.forEach(val => {
						if (val.response) {
							values.push(val.response.result)
						} else {
							values.push(val.url)
						}
					})
				}
				if (values.length == 0) {
					this.$u.toast('请上传证件照')
					return;
				}
				if (!this.cardholderPhone) {
					this.$u.toast('请输入银行预留手机号')
					return
				}
				if (!this.dwname) {
					this.$u.toast('请输入单位名称')
					return;
				}
				if (!this.ksname) {
					this.$u.toast('请输入科室名称')
					return;
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$http.perfectInformation({
						"backCard": this.backCard,
						"card": this.card,
						"cardPic": values.join(','),
						"cardholderPhone": this.cardholderPhone,
						"code": "",
						"doctorAndSpecialist": this.doctorAndSpecialist,
						"dwname": this.dwname,
						"ksname": this.ksname,
						"name": this.name,
						"ref": ""
					}).then(res => {
						if (res.data.code == 200) {
							this.ref = res.data.result.ref
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							this.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						} else {
							this.$u.toast(res.data.message)
						}
					})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			progress1(res, index, lists, name) {
				// console.log(JSON.parse(res.data))
				if (JSON.parse(res.data).code == 0) {
					this.$refs.uToast.show({
						title: JSON.parse(res.data).msg,
						type: 'error ',
					})
					this.$refs.uUpload1.clear()
				}
			},
			getUserInfo() {
				this.$http.getUserInfo().then(res => {
					if (res.data.code == 200) {
						let data = res.data.result
						if (data.cardPic) {
							this.fileList = [{ url: data.cardPic }]
						}
						this.data.id = data.id
						this.name = data.name
						this.card = data.card
						this.phone = data.phone
						this.contactInformation = data.contactInformation
						this.dwname = data.dwname
						this.ksname = data.ksname
						this.backCard = data.backCard
						this.backName = data.backName
						this.cardholderName = data.cardholderName
						this.cardholderPhone = data.cardholderPhone
						this.yzh = data.yzh
						this.doctorAndSpecialist = data.doctorAndSpecialist
					}
				})
			},
			completeInformation() {
				if (this.yzh == 1) {
					if (!this.checkbox) {
						this.$u.toast("请勾选协议")
						return
					}
					this.$http.agreeUserAgreement()
				}

				if (!this.backCard) {
					this.$u.toast('请输入银行卡号')
					return
				}
				if (!this.card) {
					this.$u.toast('请输入身份证号')
					return
				}
				let files1 = [];
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				files1 = this.$refs.uUpload1.lists.filter(val => {
					return val.progress == 100;
				})
				// console.log(files1)
				let values = []
				if (files1.length != 0) {
					files1.forEach(val => {
						if (val.response) {
							values.push(val.response.result)
						} else {
							values.push(val.url)
						}
					})
				}
				if (values.length == 0) {
					this.$u.toast('上传执照或工牌');
					return;
				}
				if (!this.cardholderPhone) {
					this.$u.toast('请输入银行预留手机号')
					return
				}
				if (!this.dwname) {
					this.$u.toast('请输入单位名称')
					return;
				}
				if (!this.ksname) {
					this.$u.toast('请输入科室名称')
					return;
				}
				if(this.yzh == 1){
					if (!this.code) {
						this.$u.toast('请输入验证码')
						return;
					}
				}
				
				// if(!this.$checkMobile(this.phone)){
				// 	this.$refs.uToast.show({
				// 		title: '请输入正确手机号的格式',
				// 		type: 'error ',
				// 	})
				// 	return;
				// }
				// if(this.contactInformation==''){
				// 	this.$refs.uToast.show({ title: '请输入联系方式', type: 'error ', })
				// 	return;
				// }
				// if (!this.dwname) {
				// 	this.$refs.uToast.show({ title: '请输入单位名称', type: 'error ', })
				// 	return;
				// }
				// if (!this.ksname) {
				// 	this.$refs.uToast.show({ title: '请输入科室名称', type: 'error ', })
				// 	return;
				// }
				// return
				this.data.name = this.name
				this.data.card = this.card
				this.data.phone = this.phone
				this.data.contactInformation = this.contactInformation
				this.data.dwname = this.dwname
				this.data.ksname = this.ksname
				this.data.backCard = this.backCard
				this.data.backName = this.backName
				this.data.cardholderName = this.cardholderName
				this.data.cardholderPhone = this.cardholderPhone
				this.data.cardPic = values.join(',')

				uni.showLoading({
					mask: true,
					title: '请稍后'
				})
				this.$http.perfectInformationUpload({
					...this.data,
					code: this.code,
					ref: this.ref,
					doctorAndSpecialist: this.doctorAndSpecialist
				}).then(res => {
					uni.hideLoading()
					if (res.data.code == 200) {
						this.$u.toast('保存完成')
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/index/index',
							})
						}, 800)
					} else {
						this.$u.toast(res.data.message)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.perfect {
		position: relative;
		padding-bottom: 30rpx;

		.head {
			box-sizing: border-box;
			height: 432rpx;
			background: linear-gradient(220deg, #24B8FF 0%, $color 100%);
			border-radius: 0px 0px 120rpx 0px;
			padding: 160rpx 48rpx 0;
			font-size: 56rpx;
			color: #fff;

			.msg {
				font-size: 24rpx;
				color: #fff;
				margin-top: 12rpx;
			}
		}

		.con {
			position: relative;
			top: -140rpx;
			padding: 0 48rpx;

			.form {
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 24rpx;
				padding: 0 48rpx;

				.icon {
					margin-right: 20rpx;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.form1 {
				margin-top: 24rpx;

				.input:last-child {
					border-bottom: 0;
				}

			}

			.u-add-tips {
				display: none;
			}

			.updata {
				.text {
					font-size: 28rpx;
					color: rgba(0, 0, 0, 0.35);
					margin: 36rpx 0;
				}
			}
		}

		.btn {
			position: fixed;
			bottom: 0;
			text-align: center;
			z-index: 11;
			width: 100%;
			padding: 12rpx 0;
			background-color: #fff;

			.btn_con {
				width: 680rpx;
				margin: 0 auto;
				font-size: 32rpx;
				padding: 30rpx 0;
				background-color: $color;
				border-radius: 48rpx;
				color: #fff;
			}
		}
	}
</style>