JianjianStreet-H5/pages/my/baoming-detail.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}}</view>
					<view class="active-time">
						<!-- <u-icon size="40" name="https://cdn.uviewui.com/uview/example/button.png"></u-icon> -->
						<text>{{dataInfo.activityTime}}</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-item
					label="公司名称："
					borderBottom
					ref="item1"
				>
					<u--input
						v-model="userInfo.companyName"
						border="none"
						placeholder="请输入公司名称"
					></u--input>
				</u-form-item>
				<u-form-item
					label="公司职务"
					borderBottom
					ref="item1"
				>
					<u--input
						v-model="userInfo.companyPost"
						border="none"
						placeholder="请输入所在公司职务名称"
					></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.money}}</text>
				</view>
			</view>
			<view class="pay-type flex flex-column align-center">
				<image src="../../static/img/pay-success.png" mode=""></image>
				<view>支付成功</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				chooseType: 0,
				dataInfo: {},
				userInfo:{
					name:'',
					companyName:'',
					phone:'',
					companyPost:''
					
				},
				formLabelStyle:{
					color: '#707070',
					fontSize: '30rpx'
				},
				baomingStyle: {
					fontSize:"30rpx",
					fontWeight:"700",
					height: "100rpx"
				},
				payList: [
					{
						id:0,
						src:require('@/static/img/wechat-icon.png')
					},
					// {
					// 	id:1,
					// 	src:require('@/static/img/alipy-icon.png')
					// }
				]
			}
		},
		onLoad(e) {
			this.getactivityFindById('1584923974407417857')
		},
		// 隐藏微信h5的标题栏
		onReady() {
			this.$com.displayNav()
		},
		methods:{
			choosePay(item){
				this.chooseType = item.id;
			},
			// apply(){
			// 	uni.redirectTo({
			// 		url:'/pages/home/pay-success'
			// 	})
			// },
			apply(){//添加报名信息
				let params = {
					activityId:'1565169118319157250',
					payType:this.chooseType,
					...this.userInfo,
				}
				this.$api('saveEnroll',params)
				.then(res=>{
					if(res.code == 200){
						this.wxPay(res.result)
					}
				})
			},
			wxPay(id){
				this.$api('recharge',{id})
				.then(res=>{
					
					this.$jweixin.invoke(
						"getBrandWCPayRequest", {
							appId: res.result.appId, //公众号名称，由商户传入
							timeStamp: res.result.timeStamp, //时间戳，自1970年以来的秒数
							nonceStr: res.result.nonceStr, //随机串
							package: res.result.packageValue, //这个package是比较坑的他的格式必须是                        prepay_id=wx22104854834640694c34f15a1066605800，是必须！！！！！！！！！！！！！！
							signType: res.result.signType, //微信签名方式
							paySign: res.result.paySign,//微信签名
						},
						function(res) {
							if (res.err_msg == "get_brand_wcpay_request:ok") {
								uni.showToast({
									title: '支付成功',
									icon: 'none',
									duration: 1500
								})
								// 使用以上方式判断前端返回,微信团队郑重提示：
								//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
							}
						}
					);
				})
			},
			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: 0px 3rpx 6rpx 0px 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 {
				color: #20D76D;
				font-size: 30rpx;
				padding-top: 40rpx;
				image {
					width: 165rpx;
					height: 165rpx;
					margin-bottom: 42rpx;
				}
				
			}
		
		}
		
		
	}
</style>