You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
267 lines
5.9 KiB
267 lines
5.9 KiB
<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>
|