driverSchool/pages/index/bmPage.vue

<template>
	<view class="content">
		<view class="container">
			<!-- #ifdef MP-WEIXIN -->
			<!-- #ifdef MP-WEIXIN -->
			<headers :titles="titles">
				<uni-icons @click="goback()" type="arrow-left" color="#000000" size="22px"></uni-icons>
			</headers>
			<!-- #endif -->
			<!-- #endif -->
			<u-loadmore :status="status" v-if="show == true" />
		</view>
		<view class="bm-page">
			<view class="bm-page-top">
				<image class="top-left-img" :src="baseUrl + rightInfoList.photo" mode=""></image>
				<view class="bm-page-right">
					<view class="bm-page-right-1" v-if="rightInfoList.name == 1">成人班</view>
					<view class="bm-page-right-1" v-if="rightInfoList.name == 2">学生班</view>
					<view class="bm-page-right-2">
						<view class="bm-page-right-zd">{{rightInfoList.automatic}}</view>
						<view class="bm-page-right-c2">{{rightInfoList.license}}</view>
					</view>
					<view class="bm-page-right-3"> <text class="bm-page-right-price">￥{{rightInfoList.price}}</text>
						<text class="bm-page-right-jprice">￥{{rightInfoList.price}}</text>
					</view>
				</view>
			</view>
			<view class="bm-page-info" v-if="hideTeacher==0">
				<view style="width: 100%; display: flex;align-items: center;justify-content: space-between; ">
					<view class="bm-page-info-title">
						选择教练
					</view>
					<view class="d-s" @click="showjl = true">
						<view class="" v-if="!jlName">请选择</view>
						<view class="" v-else>{{jlName}}</view>
						<u-icon name="arrow-right" size="16"></u-icon>
					</view>
				</view>

			</view>
			<view class="bm-page-info">
				<view style="width: 100%; display: flex;align-items: center;justify-content: space-between; ">
					<view class="bm-page-info-title">
						填写身份信息
					</view>
					<view class="anniu" @click="popupShow = true">
						点击上传身份证
					</view>
				</view>

				<view class="info-name">
					<view class="info-name-left">姓名</view>
					<view class="info-name-right">
						<input class="info-name-input" v-model="name" type="text" placeholder="请填写真实姓名">
					</view>
				</view>
				<view class="info-name">
					<view class="info-name-left">性别</view>
					<view class="d-s" style="width: 70%;">
						<view class="size-lv" :class="{'clv' : sex == index }" v-for=" (item,index) in sexlist"
							:key="index" @click="getsexindex(index)">{{item}}</view>
					</view>
				</view>
				<view class="info-name">
					<view class="info-name-left">年龄</view>
					<view class="info-name-right">
						<input class="info-name-input" v-model="age" type="number" placeholder="请填写真实年龄">
					</view>
				</view>
				<view class="info-name">
					<view class="info-name-left">手机号</view>
					<view class="info-name-right">
						<input class="info-name-input" v-model="phone" type="text" placeholder="请输入正确手机号">
					</view>
				</view>
				<view class="info-name">
					<view class="info-name-left">身份证号</view>
					<view class="info-name-right">
						<input class="info-name-input" v-model="identity" type="text" placeholder="请输入身份证号">
					</view>
				</view>
				<!-- <view style="padding: 0;" class="info-name">
					<view class="info-name-left">选择教练</view>
					<view class="info-name-right">
						<view class="bm-page-button">
							<button @click="goBookingJl()" class="bm-page-button-main">预约教师</button>
						</view>
					</view>

				</view> -->
			</view>
			<view class="bm-page-dj">
				<view class="bm-page-dj-title" @click="show = true">
					<view class="d-s">
						<view class="">{{dname}}</view>
						： <text class="bm-page-dj-title-price">￥{{rightInfoList.reserveMoney}}</text>
					</view>
					<u-icon name="arrow-right" color="#999" size="18"></u-icon>
				</view>

				<view @click="changeStartPay(2)" class="dj-list">
					<view class="dj-list-left">
						<image class="dj-list-left-img" src="../../static/imgs/yfk.png" mode=""></image>
						<view class="dj-list-left-name">线下支付</view>
					</view>
					<view class="dj-list-right">
						<view v-if="startPay === 1" class="onel"></view>
						<view v-else class="twol">
							<u-icon name="checkmark" color="#FFF" size="16"></u-icon>
						</view>
					</view>
				</view>
				<view @click="changeStartPay(1)" class="dj-list">
					<view class="dj-list-left">
						<image class="dj-list-left-img" src="../../static/imgs/qbdd.png" mode=""></image>
						<view class="dj-list-left-name">微信</view>
					</view>
					<view class="dj-list-right">
						<view v-if="startPay === 2" class="onel"></view>
						<view v-else class="twol">
							<u-icon name="checkmark" color="#FFF" size="16"></u-icon>
						</view>
					</view>
				</view>
			</view>


			<view class="bm-page-button">
				<button @click="applicationClick" class="bm-page-button-main">点击报名</button>
			</view>
			<u-picker :show="show" :columns="columns" keyName="label" @confirm="confirm" @cancel="cancel"></u-picker>
			<u-picker :show="showjl" :columns="columnjl" keyName="instructorName" @confirm="jlconfirm"
				@cancel="jlcancel"></u-picker>
			<u-popup :show="popupShow" :round="10" mode="center" @close="close" @open="open">
				<view class="popup-box">
					<view class="title_s">请上传身份证人像面</view>
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="1" width="280" height="150">
						<image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" mode="widthFix"
							style="width: 280px;height: 150px;"></image>
					</u-upload>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import headers from '../../components/header/headers.vue'
	import request from '@/utils/request.js'
	import tabbar from '../../components/tabbar/tabbar.vue'
	import upload from '@/utils/upload.js'
	export default {
		data() {
			return {
				titles: "报名",
				id: null,
				List: [],
				show: false,
				showjl: false,
				popupShow: false,
				sfzimg: null,
				fileList1: [],
				baseUrl: this.$baseUrl,
				status: 'loading',
				sexlist: [
					"男",
					"女"
				],
				name: null,
				phone: null,
				sex: 0,

				identity: null,
				age: null,
				startPay: 2,
				courseId: null,
				rightInfoList: [],
				columnjl: [],
				jxId: null,
				orderId: null,
				dname: "定金",
				settings: { //签名设置
					width: '750', //签名区域的宽
					height: '500', //签名区域的高
					lineWidth: 4, //签名时线宽
					textColor: '#000' //签名文字颜色
				},
				jlName: null,
				jlId: null,
				hideTeacher: 0,
				Address: '',
				columns: [
					[{
						label: '全款',
						// 其他属性值
						id: 2
						// ...
					}, {
						label: '定金',
						id: 1
					}]
				],
			}
		},
		onLoad: function(option) {
			uni.showToast({
				title: '请完善个人信息',
				icon: 'none'
			})
			if (uni.getStorageSync('jlId')) {
				this.hideTeacher = 1
			}
			this.jlId = uni.getStorageSync('jlId');
			this.courseId = option.courseId,
				this.jxId = option.jxId
			console.log("驾校id", this.jxId, "课程id", this.courseId)
		},
		onShow() {
			this.getListAll()
			// this.actList = ["1", "1", "1", "1", "1", ]
			// this.status = "nomore" 底部刷新结束
			this.getRightInfoList()
		},
		onPullDownRefresh() {
			console.log("刷新");
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			// this.show = true
			setTimeout(() => {
				console.log("加载执行");
			}, 2000)
		},
		// 发送好友
		onShareAppMessage(res) {
			return {
				title: this.titles,
				path: '/pages/index/index',
			}
		},
		// 分享朋友圈
		onShareTimeline(res) {
			return {
				title: this.titles,
				path: '/pages/index/index',
			}
		},
		components: {
			headers,
			tabbar
		},
		methods: {
			async getListAll() {
				this.columnjl = []
				let res = await request({
					url: '/drivingSchool/applet/schoolCoach/ListAll?deptId=' + this.jxId,
					method: 'get',

				})
				console.log(res);
				this.columnjl.push(res.data)
			},
			getsexindex(index) {
				this.sex = index
			},
			open() {
				// console.log('open');
			},
			close() {
				this.popupShow = false
				// console.log('close');
			},
			jlconfirm(e) {
				console.log(e);
				this.jlName = e.value[0].instructorName
				this.jlId = e.value[0].id
				this.showjl = false
			},
			jlcancel() {
				this.showjl = false
			},
			confirm(e) {
				console.log(e);
				this.dname = e.value[0].label
				this.id = e.value[0].id
				this.xxgetRightInfoList()

				this.show = false
			},
			cancel() {
				this.show = false
			},
			goback() {
				uni.navigateBack()
			},
			changeStartPay(id) {
				this.startPay = id
			},

			goBookingJl() {
				uni.navigateTo({
					url: '/pages/index/bookingJl',
				})
			},

			// 校验手机号
			isValidPhoneNumber(phoneNumber) {
				const regex = /^1[3-9]\d{9}$/;
				if (regex.test(phoneNumber)) {
					return true;
				} else {
					return false;
				}
			},


			// 校验身份证
			isValidIDNumber(idNumber) {
				const regex = /^\d{15}|\d{17}(?:\d|X)$/;
				if (regex.test(idNumber)) {
					return true;
				} else {
					return false;
				}
			},


			applicationClick() {
				// 判断如果为空
				if (this.phone === null || this.name === null) {
					uni.showToast({
						title: '请把信息输入完整',
						icon: 'error',
						duration: 2000
					})
					return
				}

				// 判断手机号是否满足
				let isPhone = this.isValidPhoneNumber(this.phone)
				if (isPhone === false) {
					uni.showToast({
						title: '输入的手机号不规范',
						icon: 'error',
						duration: 2000
					})
					return
				}

				// 判断身份证是否满足
				let isIdentity = this.isValidIDNumber(this.identity)
				if (isIdentity === false) {
					uni.showToast({
						title: '输入的身份证不规范',
						icon: 'error',
						duration: 2000
					})
					return
				}

				if (this.startPay === 1) {
					// 微信支付
					this.wxPayClick(this.name, this.phone, this.identity, this.startPay, this.courseId, this.jxId)
				} else {
					// 线下支付
					this.xxiaPayClick(this.name, this.phone, this.identity, this.startPay, this.courseId, this.jxId)
				}
			},
			async wxPayClick(name, phone, identity, startPay, courseId, jxId) {
				console.log("微信支付", )
				let res = await request({
					url: '/jxInfo/insertPay',
					data: {
						name: name,
						phone: phone,
						age: this.age,
						sex: this.sex,
						identity: this.identity,
						startPay: startPay,
						courseId: courseId,
						jxId: jxId,
						jlName: this.jlName,
						jlId: this.jlId,
						money: this.rightInfoList.reserveMoney
					},
					method: 'post',
				})

				this.orderId = res,
					console.log("收到为单位1 =====>", this.orderId)

				let item = await request({
					url: '/jxInfo/prepayment?type=jsapi' + '&orderNo=' + this.orderId + "&payType=" + this.id,
					method: 'get'
				})

				console.log("获取到的数据为 =========>", item)


				wx.requestPayment({
					timeStamp: item.timeStamp, // 时间戳，从1970年1月1日00:00:00至今的秒数，即当前的时间
					nonceStr: item.nonceStr, // 随机字符串，长度为32个字符以下。
					package: item.package, // 统一下单接口返回的 prepay_id 参数值，格式如“prepay_id=*”
					signType: item.signType, // 签名算法类型，默认为 MD5，支持RSA等其他加密算法
					paySign: item.paySign, // 签名，详见签名生成算法
					success: function(res) {
						console.log('成功', res);
						if (res.errMsg = 'requestPayment:ok') {
							uni.showToast({
								title: '支付成功'
							})
							uni.navigateTo({
								url: '/pages/index/contract?Address=' +
									this.Address + '&name=' + this.name
							})
						}
						// 支付成功后的回调函数， res.errMsg = 'requestPayment:ok'
					},
					fail: function(res) {
						console.log('执行失败1', res);
						that.cancelpay()
					}
				})

				uni.showToast({
					title: '成功提示',
					icon: 'success',
					duration: 2000
				})
			},
			async xxiaPayClick(name, phone, identity, startPay, courseId, jxId) {
				console.log("线下支付")
				let res = await request({
					url: '/driving/pay',
					data: {
						name: name,
						phone: phone,
						age: this.age,
						sex: this.sex,
						identity: this.identity,
						startPay: startPay,
						courseId: courseId,
						jxId: jxId,
						jlName: this.jlName,
						jlId: this.jlId
					},
					method: 'post',
				})
				if (res.code == 200) {
					uni.navigateTo({
						url: '/pages/index/contract?Address=' +
							this.Address + '&name=' + this.name
					})
				}


			},
			async getRightInfoList() {
				let res = await request({
					url: '/drivingSchool/system/driveSchoolCourse/list?id=' + this.courseId,
					method: 'get',
				})
				this.rightInfoList = res.rows[0],
					console.log("报名班类型", this.rightInfoList)
			},
			async xxgetRightInfoList() {
				let res = await request({
					url: '/drivingSchool/system/driveSchoolCourse/list?id=' + this.courseId + '&payType=' +
						this.id,
					method: 'get',
				})
				this.rightInfoList = res.rows[0],
					console.log("报名班类型", this.rightInfoList)
			},
			// 上传
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				if (event.name == '1') {
					this.photoUrl.splice(event.index, 1)
				}
				if (event.name == '2') {
					this.videoUr = null
				}

			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,

					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(e) {
				console.log(e);
				upload({
					url: '/common/upload',
					filePath: e,
				}).then((res) => {

					this.sfzimg = this.baseUrl + res.fileName
					console.log(this.sfzimg);

					if (this.sfzimg) {
						this.idOcr(this.sfzimg)
					}

				})
			},
			async idOcr(url) {

				let that = this
				let res = await request({
					url: '/drivingSchool/applet/driveSchoolCourse/idOcr',
					method: 'post',
					params: {
						imagePath: url
					}
				})

				that.name = res.data.name
				that.phone = res.data.phone
				that.sex = res.data.sex
				that.identity = res.data.idCard
				that.age = res.data.age
				that.Address = res.data.Address
				console.log(res);
				that.popupShow = false
			},

		}
	}
</script>

<style scoped lang="scss">
	.bm-page {
		padding: 30rpx;

		.bm-page-button {
			margin-top: 30rpx;

			.bm-page-button-main {
				border-radius: 50rpx;
				background-color: #4aa76f;
				color: #fff;
			}
		}

		.bm-page-dj {
			margin-top: 30rpx;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;

			.dj-list {
				padding: 20rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.dj-list-left {
					display: flex;
					align-items: center;

					.dj-list-left-name {
						margin-left: 20rpx;
					}

					.dj-list-left-img {
						height: 50rpx;
						width: 50rpx;
					}
				}
			}

			.bm-page-dj-title {
				border-bottom: 1rpx solid #eee;
				padding-bottom: 20rpx;
				margin-bottom: 10rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.bm-page-dj-title-price {
					color: red;
				}
			}
		}

		.bm-page-info {
			margin-top: 30rpx;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;

			.info-name {
				width: 100%;
				padding: 40rpx 0;
				border-bottom: 1px solid #eee;
				display: flex;
				justify-content: space-between;
				width: 100%;
				align-items: center;

				.info-name-right {
					display: flex;
					align-items: center;
					margin-left: 30rpx;
					flex: 3;
				}

				.info-name-left {
					flex: 1;
				}
			}

			.bm-page-info-title {

				font-size: 34rpx;
				font-weight: 600;
			}
		}

		.bm-page-top {
			display: flex;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;

			.bm-page-right {
				margin-left: 30rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: column;

				.bm-page-right-3 {
					.bm-page-right-price {
						color: red;
					}

					.bm-page-right-jprice {
						margin-left: 20rpx;
						text-decoration: underline;
						font-size: 20rpx;
					}
				}

				.bm-page-right-1 {
					font-weight: 800;
				}

				.bm-page-right-2 {
					display: flex;
					font-size: 22rpx;

					.bm-page-right-zd {
						background-color: rgba(94, 255, 153, 0.2);
					}

					.bm-page-right-c2 {
						background-color: rgba(255, 208, 112, 0.2);
					}

					view {
						text-align: center;
						border-radius: 12rpx;
						padding: 10rpx;
						background-color: red;
						margin-right: 10rpx;
					}

					&:last-child {
						margin-right: 20rpx;
					}
				}
			}

			.top-left-img {
				height: 150rpx;
				width: 230rpx;
				border-radius: 12rpx;
			}
		}
	}

	.content {
		background: #f4f5f6;
		// background: linear-gradient(180deg, #9ffcc5 0%, #84fcbc 14%, rgba(255, 255, 255, 0.84) 24%, rgba(255, 255, 255, 0.84) 100%);
		height: 100vh;
	}

	.container {
		width: 100%;
		background: #f4f5f6;
		box-sizing: border-box;
		padding-top: 88px;
	}

	.onel {
		width: 18px;
		height: 18px;
		border-radius: 50%;
		overflow: hidden;
		border: 1px solid #8c8c8d;
	}

	.twol {
		width: 18px;
		height: 18px;
		border-radius: 50%;
		overflow: hidden;
		border: 1px solid #4aa76f;
		background: #4aa76f;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
	}

	.d-s {
		display: flex;
		align-items: center;
	}

	.anniu {
		width: 120px;
		height: 35px;
		border-radius: 4px;
		background: #4aa76f;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
	}

	.popup-box {
		width: 300px;
		border-radius: 10px;
		background: #fff;
		box-sizing: border-box;
		padding: 10px;
	}

	.title_s {
		font-weight: bold;
		margin-bottom: 10px;
	}

	.clv {
		color: #fff;
		background: #4aa76f;
		width: 26px;
		height: 26px;
		border-radius: 50%;
		display: flex;
		font-size: 14px;
		align-items: center;
		justify-content: center;
		font-weight: bold;
	}

	.size-lv {
		margin-right: 35px;
	}
</style>