JianjianStreet-H5/pages/home/buy-course.vue

<template>
	<view class="buy-course">
		<view class="course-box ">
			<view class="course-box-item flex">
				<u--image :showLoading="true" :src="dataInfo.photo" width="281rpx" height="178rpx"></u--image>
				<view class="box-right">
					<view class="active-title">{{dataInfo.title}}[{{dataInfo.money}}元/小时]</view>
					<view class="active-time">
						<text>{{dataInfo.startTime}} - {{dataInfo.endTime}}</text>
					</view>
					<view class="active-add">
						<text>{{dataInfo.place}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="from-box">
			<view class="from-title">填写报名人信息</view>
			<u--form
				labelPosition="left"
				:model="userInfo"
				ref="form1"
				labelWidth="80"
				:labelStyle="formLabelStyle"
			>
				<u-form-item
					label="姓名："
					borderBottom
					ref="item1"
				>
					<u--input
						v-model="userInfo.name"
						border="none"
						placeholder="请输入姓名"
					></u--input>
				</u-form-item>
				<u-form-item
					label="联系电话："
					borderBottom
					ref="item1"
				>
					<u--input
						v-model="userInfo.phone"
						border="none"
						placeholder="请输入手机号码"
						type="number"
					></u--input>
				</u-form-item>
				
			</u--form>
		</view>
		
		<view class="pay-box">
			<view class="pay-price flex align-center justify-between">
				<view class="pay-price-tip">费用</view>
				<view>
					<text class="unit">￥</text>
					<text>{{dataInfo.price}}</text>
				</view>
			</view>
			<view class="pay-type">
				<view class="pay-type-item flex justify-between align-center" v-for="item in payList" :key="item.id" @click="choosePay(item)">
					<view class="flex align-center">
						<image class="type-img" :src="item.src" mode=""></image>
						<text class="ml-1">{{item.text}}</text>
					</view>
					<image class="choose-img" :src="chooseType == item.id? '../../static/img/choose-act.png' : '../../static/img/choose.png'" mode=""></image>
				</view>
			</view>
		</view>
		
		<view class="btn-box">
			<u-button text="立即报名" @click="apply" :customStyle="baomingStyle" :hairline="false" color="#00BBFF"></u-button>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				chooseType: 0,
				id:'',
				dataInfo: {},
				userInfo:{
					name:'',
					companyName:'',
					phone:'',
					companyPost:''
					
				},
				formLabelStyle:{
					color: '#707070',
					fontSize: '30rpx'
				},
				baomingStyle: {
					fontSize:"30rpx",
					fontWeight:"700",
					height: "100rpx"
				},
				payList: [
					{
						id:0,
						text:'微信支付',
						src:require('@/static/img/wechat-icon.png')
					},
				]
			}
		},
		// 隐藏微信h5的标题栏
		onReady() {
			this.$com.displayNav()
		},
		onLoad(e) {
			this.getactivityFindById(e.id);
			this.id = e.id;
		},
		methods:{
			choosePay(item){
				this.chooseType = item.id;
			},
			apply(){//添加报名信息
				if(this.userInfo.phone.length != 11){
					this.$Toast('请输入正确手机号！')
					return
				}
				let params = {
					activityId:this.id,
					payType:this.chooseType,
					...this.userInfo,
				}
				this.$api('saveEnroll',params)
				.then(res=>{
					if(res.code == 200){
						this.wxPay(res.result)
					}else{
						this.$Toast(res.message)
					}
				})
			},
			wxPay(id){
				let that = this;
				that.$api('create',{id})
				.then(res=>{
					that.$jweixin.chooseWXPay({
					  appId: res.result.appId,
					  timestamp: res.result.timeStamp, // 支付签名时间戳，注意微信 jssdk 中的所有使用 timestamp 字段均为小写。但最新版的支付后台生成签名使用的 timeStamp 字段名需大写其中的 S 字符
					  nonceStr: res.result.nonceStr, // 支付签名随机串，不长于 32 位
					  package: res.result.packageValue, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
					  signType: res.result.signType, // 微信支付V3的传入 RSA ,微信支付V2的传入格式与V2统一下单的签名格式保持一致
					  paySign: res.result.paySign, // 支付签名
					  success: function (res) {
					    // 支付成功后的回调函数
					  }
					});
				})
			},
			getactivityFindById(id){
				uni.showLoading()
				this.$api('activityFindById',{id})
				.then(res=>{
					uni.hideLoading()
					if(res.code == 200){
						this.dataInfo = res.result;
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.buy-course {
		.course-box {
			padding: 0 26rpx;
			.course-box-item {
				background: #ffffff;
				border-radius: 12rpx;
				box-shadow: 3rpx 3rpx 6rpx 3rpx rgba(0,0,0,0.16); 
				padding: 33rpx 13rpx;
				.box-right {
					margin-left: 16rpx;
					
					.active-title {
						font-size: 30rpx;
						color: #000;
						line-height: 40rpx;
						overflow: hidden;
						display: -webkit-box;    
						-webkit-box-orient: vertical;    
						-webkit-line-clamp: 2;    
					}
					
					.active-time {
						color: #707070;
						font-size: 26rpx;
						margin: 10rpx 0 14rpx 0;
					}
					.active-add {
						color: #707070;
						font-size: 26rpx;
					}
					
				}
			}
			
		}
		
		.from-box {
			padding: 0 26rpx;
			.from-title {
				font-size: 30rpx;
				color: #000;
				margin-top: 35rpx;
				margin-bottom: 15rpx;
			}
		}
		
		.pay-box {
			border-top: 20rpx solid #F5F5F5;
			padding: 0 26rpx;
			.pay-price {
				color: #D33D3E;
				font-size: 40rpx;
				font-weight: 700;
				padding: 47rpx 0 20rpx 0;
				border-bottom:  1px solid #E6E6E6;
				
				.pay-price-tip {
					color: #000000;
					font-size: 30rpx;
					font-weight: 400;
				}
				
				.unit {
					font-size: 30rpx;
					font-weight: 400;
				}
			}
		
			.pay-type {
				padding-top: 22rpx;
				.pay-type-item {
					margin-bottom: 42rpx;
					.type-img {
						width: 70rpx;
						height: 70rpx;
					}
					.choose-img {
						width: 46rpx;
						height: 46rpx;
					}
				}
				
			}
		
		}
		
		.btn-box {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
		}
	}
</style>