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/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="form form1">
				<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/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/li8.png" mode=""></image>
					</view>
					<u-input v-model="cardholderPhone" maxlength="11" :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="backName" :clearable="false" type="text" :border="border" placeholder="请输入开户行" />
				</view>
			</view>
		</view>
		<view class="btn" @click="completeInformation()">
			<view class="btn_con">完成</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 演示地址，请勿直接使用
				action: 'http://www.example.com/upload',
				fileList: [],
				name: '',
				card: '',
				phone: '',
				contactInformation: '',
				dwname: '',
				ksname: '',
				backCard: '',
				backName: '',
				cardholderName: '',
				cardholderPhone: '',
				data: {
					id: '',
					name: '',
					card: '',
					phone: '',
					contactInformation: '',
					dwname: '',
					ksname: '',
					backCard: '',
					backName: '',
					cardholderName: '',
					cardholderPhone: '',
					cardPic: '',
					completeInformation: "2"
				},
			}
		},
		onLoad(option) {
			this.action = this.$httpUrl + '/api/uploadLocality'
			this.getUserInfo()
		},
		methods: {
			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
							console.log()
							if (data.cardPic) {
								this.fileList = [{ url: data.cardPic, }]
							}
							this.data.id = data.id
							this.name = data.name
							this.card = data.card
							// console.log(this.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
						}
					})
			},
			completeInformation() {
				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) {
					if (files1[0].response) {
						values = files1.map(item => item.response.result)
					} else {
						values = files1.map(item => item.url)
					}
				}
				// if(files1.length==0){
				// 	this.$refs.uToast.show({ title: '上传执照或工牌', type: 'error ', })
				// 	return;
				// }
				if (!this.name) {
					this.$refs.uToast.show({ title: '请输入姓名', type: 'error ', })
					return;
				}
				// console.log(this.card);
				if (this.card) {
					if (!this.$checkId(this.card)) {
						this.$refs.uToast.show({
							title: '请输入正确身份证格式',
							type: 'error ',
						})
						return;
					}
				}

				// if(this.phone==''){
				// 	this.$refs.uToast.show({ title: '请输入手机号', type: 'error ', })
				// 	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(',')

				this.$http.completeInformation(this.data)
					.then(res => {
						if (res.data.code == 200) {
							this.$refs.uToast.show({
								title: '保存完成',
							})
							uni.navigateTo({
								url: '/pages/index/index',
							})
						}
					})
			}
		}
	}

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