sign-contract.vue

<template>
	<view class="page-content">
		<Settle :index="4">
			<view class="tip-text">
				<image class="tip-image" mode="widthFix" :src="tips3Image"></image>
				<text>身份证信息、银行卡相关信息、签约人信息须为同一人，否则无法入驻。</text>
			</view>
			
			<view class="base-list">
				<view class="agreement-view">
					<Agreement />
				</view>
				<view class="info-view">
				<view class="item item-input flex-yc">
					<label class="label">签约人</label>
					<view class="input flex1 u-text-right">{{baseInfo.name}}</view>
				</view>
				<view class="line-view"></view>
				<view class="item u-row-between">
					<view class="label">结算方式：</view>
					<u-radio-group class="radio-class" v-model="baseInfo.pay_type" ref="radioGroup" @change="radioGroupChange">
						<u-radio ref="radio" v-for="(item, index) in radioList" :key="index" :name="item.value" label-size="28">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
				<view class="line-view"></view>
				<template v-if="baseInfo.pay_type==='bankcard'">
					<view class="item item-input flex u-row-between">
						<label class="label">银行名称</label>
						<input placeholder="请输入银行名称" :placeholder-style="placeholderStyle" maxlength="100" v-model="baseInfo.bank_name" class="input flex1" />
					</view>
					<view class="line-view"></view>
					<view class="item item-input flex u-row-between">
						<label class="label">银行卡号</label>
						<input placeholder="请输入银行卡号" :placeholder-style="placeholderStyle" maxlength="30" v-model="baseInfo.bank_no" type="number"
							class="input flex1" />
					</view>
					<view class="line-view"></view>
					<view class="item item-input flex u-row-between">
						<label class="label">支行名称</label>
						<input placeholder="请输入支行名称" :placeholder-style="placeholderStyle" maxlength="100" v-model="baseInfo.bank_site" class="input flex1" />
					</view>
				</template>
				<template v-else>
					<!-- 				<view class="item item-input flex u-row-between">
					<label class="label">姓名</label>
					<input placeholder="请输入账户名称" maxlength="30" v-model="baseInfo.bank_name" class="input flex1" />
				</view> -->
					<view class="item item-input flex u-row-between">
						<label class="label">支付宝账号</label>
						<input placeholder="请输入支付宝账号" maxlength="100" v-model="baseInfo.bank_no" class="input flex1" />
					</view>
				</template>
				</view>
			</view>
			<template v-slot:bottom>
				<view class="btn-wrap flex-xc">
					<button class="btn-submit" :disabled="!submitStatus" @click="$u.debounce(submitBaseInfo, 500)">
						我已阅读协议，点击签约{{count ? '（'+count+'）' : ''}}
					</button>
				</view>
			</template>
		</Settle>
	</view>
</template>

<script>
	import Settle from '@/components/settle/index.vue'
	import Agreement from '@/components/settle/agreement.vue'

	const globalUrl = process.uniEnv || {}
	const ucenterApiurl = globalUrl.ucenterUrl.apiUrl
	const app = getApp()
	export default {
		components: {
			Settle,
			Agreement,
		},
		data() {
			return {
				token: app.globalData.token,
				baseInfo: {
					name: "郭小清",
					id_card_no: "43072219800123456",
					id: "",
					bank_no: '', // 银行卡号
					bank_site: '', // 开户行
					bank_name: '', // 银行名称
					pay_type: 'bankcard' // 结算方式：bankcard银行卡，alipay支付宝
				},
				radioList: [{
					name: '银行卡',
					value: 'bankcard'
				}, {
					name: '支付宝',
					value: 'alipay'
				}],
				settledInfo: {},
				saving: false,
				isStop: false,
				count: 9,
			}
		},
		onLoad(e) {},
		onShow() {
			const refs = this.$refs
			this.$nextTick(() => {
				if (refs['radio'] && refs['radio'].length > 0) {
					refs['radio'][0].setRadioCheckedStatus()
				}
			})

			this.startCounting()
			this.getBaseInfo()
			// const url = 'https://m.test.ibanshou.cn/activity/settled_2021/mini'
			// uni.navigateTo({
			// 	url:'/pages/settle/web?url='+url
			// })
			// https://m.test.ibanshou.cn/activity/settled_2021/mini
		},
		computed: {
			submitStatus() {
				const baseInfo = this.baseInfo
				let flag = baseInfo.pay_type && baseInfo.bank_no
				if (baseInfo.pay_type === 'bankcard') {
					flag = flag && baseInfo.bank_site && baseInfo.bank_name
				}
				return flag && !this.saving && this.isStop;
			},
			placeholderStyle() {
				return 'color:#999999;font-size:28rpx'
			},
			tips3Image() {
				return qn_base_url + 'tips3.png'
			}
		},
		components: {

		},
		watch: {
			isRefresh(val) {
				if (val) {
					this.initPage()
				}
			}
		},
		methods: {
			startCounting: function() {
				if (this.isStop) {
					return
				}

				this.count = this.count - 1

				if (this.count > 0) {
					setTimeout(this.startCounting, 1000);
				} else {

					this.isStop = true

				}

			},
			refreshPage() {
				this.getBaseInfo()
			},
			checkBaseInfo() {
				const baseInfo = this.baseInfo;
				let rulesObj = {
					pay_type: function(value) {
						if (!value) {
							uni.showToast({
								title: '请选择支付方式',
								icon: 'none'
							});
							return false;
						}
					},
					mobile: function(value) {
						const mobileReg = /^[1][3,4,5,7,8][0-9]{9}$/;
						if (!value) {
							uni.showToast({
								title: '请输入您的电话',
								icon: 'none'
							});
							return false;
							return false;
						} else if (!mobileReg.test(value)) {
							uni.showToast({
								title: '请输入正确的电话',
								icon: 'none'
							});
							return false;
						}
					},
					bank_site: function(value) {
						if (!value && baseInfo.pay_type === 'bankcard') {
							uni.showToast({
								title: '请输入支行名称',
								icon: 'none'
							});
							return false;
						}
					},
					bank_no: function(value) {
						const pay_type = baseInfo.pay_type
						const txt = pay_type === 'bankcard' ? '银行卡号' : '支付宝账户'
						const bandReg = /^([1-9]{1})(\d{15}|\d{16}|\d{18})$/
						if (!value) {
							uni.showToast({
								title: '请输入' + txt,
								icon: 'none'
							});
							return false;
						} else if (!bandReg.test(value) && pay_type === 'bankcard') {
							uni.showToast({
								title: '请输入正确的银行卡号',
								icon: 'none'
							});
							return false;
						}
					},
					bank_name: function(value) {
						const txt = baseInfo.pay_type === 'bankcard' ? '银行' : '支付宝账户'
						if (!value && baseInfo.pay_type === 'bankcard') {
							uni.showToast({
								title: '请输入' + txt + '名称',
								icon: 'none'
							});
							return false;
						}
					},
				};
				const flagArr = Object.keys(baseInfo).some((key) => {
					// 返回验证失败的数组
					let flag = true;
					if (rulesObj.hasOwnProperty(key)) {
						const func = rulesObj[key];
						const value = baseInfo[key];
						if (typeof func === "function") {
							flag = func(value) === false ? false : true;
						}
					}
					return !flag;
				});
				return !flagArr || flagArr.length < 1;
			},
			// async checkBank(){
			// 	const baseInfo = this.baseInfo;
			// 	const type = this.baseInfo.pay_type
			// 	const request = {
			// 		bankcard:this.$u.api.checkSettleBank,
			// 		alipay:this.$u.api.checkSettleAlipay
			// 	}

			// 	const params = {
			// 		name:baseInfo.bank_name,
			// 	}
			// 	if(type==='bankcard'){
			// 		params['cardNumber'] = baseInfo.bank_no
			// 	}else if(type==='alipay'){
			// 		params['account'] = baseInfo.bank_no
			// 	}
			// 	const res = await request[type](params)
			// 	if(res.code!==200){
			// 		return 
			// 	}
			// 	return true
			// },
			radioGroupChange(val) {
				this.baseInfo.bank_name = ''
				this.baseInfo.bank_no = ''
				this.baseInfo.bank_site = ''
			},
			async getBaseInfo() {
				const app = getApp()
				const callBack = (vm, result) => {
					vm.settledInfo = result
					const record = result.record
					vm.baseInfo.name = record.id_card_name
					vm.baseInfo.id = record.id
				}
				let settledInfo = app.globalData.settledInfo
				if (settledInfo) {
					callBack(this, settledInfo)
					return
				}
				await app.getBaseInfo(this, callBack)
			},
			async submitInfo() {
				// checkSettleSignInfo
				const baseInfo = this.baseInfo;
				const params = {
					...baseInfo,
				}
				if (params.pay_type === 'alipay') {
					params.bank_site = '支付宝'
				}
				const res = await this.$u.api.checkSettleSignInfo(params)
				console.log(res, 'res')
				if (res.code != 200) {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
					return false;
				}
				return true
			},
			async jumpSign() {
				// 跳转签约
				const baseInfo = this.baseInfo;
				const params = {
					...baseInfo,
				}
				const res = this.$u.api.checkSettleSignInfo(params)
				if (res.status != 200) {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
					return;
				}
				return true
			},
			async submitBaseInfo() {
				const baseInfo = this.baseInfo;
				if (!this.checkBaseInfo()) {
					return;
				}
				this.saving = true;
				uni.showLoading({
					title: '加载中'
				});
				const result = await this.submitInfo()
				if (!result) {
					this.saving = false;
					return
				}
				this.goSign()
				// const requestArr = ['submitBaseInfo','jumpSign']
				// for(let i=0;i<requestArr.length;i++){
				// 	const result = await this[requestArr[i]]()
				// 	console.log(result,'result')
				// 	if(!result){
				// 		break;
				// 	}
				// }
				uni.hideLoading()
				uni.showToast({
					title: '入驻基本信息提交成功',
					icon: 'success'
				});
				// let timer = setTimeout(() => {
				// 	clearTimeout(timer)
				// 	uni.navigateTo({
				// 		url:'/pages/settle/file'
				// 	})
				// }, 2000)
			},
			async goSign() {
				const token = app.globalData.token;
				const settledInfo = this.settledInfo
				const baseInfo = this.baseInfo
				const params = {
					namePsn: settledInfo.record.id_card_name,
					idNumberPsn: settledInfo.record.id_card_number,
					province: settledInfo.provinceList.join(','),
					city: settledInfo.cityList.join(','),
					cardName: baseInfo.bank_name,
					cardCode: baseInfo.bank_no,
					pay_type: baseInfo.pay_type
				}
				const res = await this.$u.post(globalUrl.systemUrl.apiUrl + '/wxh-worker-rest/rest/third/' + token +
					'/wuKong/sign', params, {
						'content-type': 'application/x-www-form-urlencoded'
					})
				this.saving = false;
				if (res.code !== 200) {
					uni.showToast({
						title: '跳转签约失败',
						icon: 'none'
					})
					return
				}

				const url = res.data

				getApp().globalData.signUrl = url

				uni.navigateTo({
					// url:'/pages/settle/web?url='+url
					url: '/pages/settle/web'
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.page-content {
		background-color: #F4F5F7;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.content-txt {
		overflow: auto;
		flex: 1;

		.title {
			padding: 30rpx 30rpx 0;
			line-height: 40rpx;
			text-align: center;
			font-weight: bold;
			color: #333;
			font-size: 36rpx;
		}

		.txt {
			padding: 20rpx 30rpx;
			line-height: 40rpx;
			color: #333;
			font-size: 28rpx;
		}
	}

	.base-list {
		// height:524rpx;
		background-color: #FFFFFF;
		border-radius: 12rpx;
		padding: 30rpx 30rpx 0rpx 30rpx;
		margin-bottom: 20rpx;
		margin-bottom: 188rpx;

		/deep/ .u-radio__label {
			line-height: 40rpx;
		}
		.info-view {
			margin-top: 10rpx;
		}
			.line-view {
				background-color: #F4F5F7;
				height: 2rpx;
				width: 100%;
			}
		.item {
			display: flex;
			padding: 28rpx 30rpx;
			width: 100%;
			font-size: 32rpx;
			color: #333;
			border-bottom: 2rpx solid #FDFDFD;
			background-color: #fff;

			.label {
				line-height: 40rpx;
				color: #666666;
				font-size: 28rpx;
			}

			.txt {
				line-height: 40rpx;
				color: #333333;
				font-size: 28rpx;
			}

			.required {
				margin: 0 6rpx;
				color: red;
				font-size: 32rpx;
			}

			.iconfont {
				color: #999;
			}
		}

		.tips {
			margin-top: 20rpx;
			padding: 0 30rpx;
			line-height: 40rpx;
			font-size: 28rpx;
			color: #666;

			&+.id-identity-box {
				margin-top: -38rpx;
				margin-bottom: 40rpx;
			}
		}

		.id-identity-box {
			.txt {
				padding-top: 8rpx;
				line-height: 40rpx;
				font-size: 28rpx;
				color: #666;

				&:first-child {
					margin-top: -58rpx;
					padding-top: 12rpx;
				}

				.red {
					color: red;
				}
			}

			// &.tips{
			//     margin-bottom:0!important;
			// }

		}

		.item+.tips {
			margin-top: -38rpx;
			margin-bottom: 58rpx;
		}

		.flex1 {
			flex: 1 !important;

			&.txt {
				white-space: nowrap;
				max-width: 450rpx;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.item-input {
			overflow: hidden;
			font-size: 28rpx;
			input {
				text-align: right;
				line-height: 44rpx;
				width: 100%;
				font-size: 28rpx;
				color: #333;
				font-weight: 400;
			}
		}
	}

	.title {
		padding: 30rpx 0 40rpx;
		text-align: center;
		line-height: 50rpx;
		font-size: 36rpx;
		color: #333;
		font-weight: bold;
	}

	.seat {
		padding-bottom: 144rpx;
	}

	/*提交按钮*/
	.btn-wrap {
		width: 100%;

		.btn-submit {
			width: 600rpx;
			height: 104rpx;
			line-height: 104rpx;
			border-radius: 52rpx;
			background: #2272FF;
			font-size: 32rpx;
			color: #fff;
			
			&[disabled] {
				background-color: #D1D4D4;
				color: #FFFFFF;
			}
		}
	}

	.tip-text {
		background-color: #FFFFFF;
		border-radius: 12rpx;
		padding: 38rpx 30rpx 30rpx 30rpx;
		height: 140rpx;
		margin-bottom: 20rpx;
		font-size: 24rpx;
		color: #000000;
		display: flex;
		align-items: flex-start;
	}

	.tip-image {
		width: 34rpx;
		margin-right: 8rpx;
		margin-top: 2rpx;
	}
	.radio-class {
		margin-right: -20rpx;
	}
</style>