<template>
|
<view class="index" :data-theme='theme()' :class="theme() || ''">
|
<view class="bg_image">
|
<!-- <image src="http://wx-cdn.jiujiuyunhui.com/202011091623282f83a8213.png"></image> -->
|
</view>
|
<view class="certification">
|
<form @submit="formSubmit" @reset="formReset">
|
<view class="certification_head">
|
<view class="certification_head_body">
|
<view class="certification_head_body_item">
|
<view class="icon iconfont icon-ziyuan1"></view>
|
<input type="text" name="user_name" v-model="form.user_name" placeholder='请输入真实姓名' />
|
</view>
|
<view class="certification_head_body_item">
|
<view class="icon iconfont icon-phone"></view>
|
<input type="text" name="mobile" v-model="form.mobile" placeholder='请输入手机号码' />
|
</view>
|
<view v-if="activity.activity_fee > 0" class="certification_head_body_item red">
|
活动费用：￥{{activity.activity_fee}}元
|
</view>
|
|
<!--支付方式-->
|
<view class="buy-checkout" v-if="activity.activity_fee > 0">
|
<view :class="pay_type == 10 ? 'item active' : 'item'" @tap="payTypeFunc(10)">
|
<view class="d-s-c">
|
<view class="icon-box d-c-c mr10"><span class="icon iconfont icon-yue"></span></view>
|
<text class="key">余额支付：</text><text class="theme-price">{{'(可用余额:'+balance+')'}}</text>
|
</view>
|
<view class="icon-box d-c-c"><span class="icon iconfont icon-xuanze"></span></view>
|
</view>
|
<view :class="pay_type == 20 ? 'item active' : 'item'" @tap="payTypeFunc(20)">
|
<view class="d-s-c">
|
<view class="icon-box d-c-c mr10"><span class="icon iconfont icon-weixin"></span></view>
|
<text class="key">微信支付：</text>
|
</view>
|
<view class="icon-box d-c-c"><span class="icon iconfont icon-xuanze"></span></view>
|
</view>
|
<view v-if="showAlipay" :class="pay_type == 30 ? 'item active' : 'item'" @click="payTypeFunc(30)">
|
<view class="d-s-c">
|
<view class="icon-box d-c-c mr10"><span class="icon iconfont icon-zhifubao"></span></view>
|
<text class="key">支付宝支付：</text>
|
</view>
|
<view class="icon-box d-c-c"><span class="icon iconfont icon-xuanze"></span></view>
|
</view>
|
</view>
|
|
</view>
|
</view>
|
|
<view class="login_index_btn">
|
<button v-if="activity.status_text.reg_status == 1 && activity.register_status == 1" form-type="submit" type="default">我要报名</button>
|
<button v-else type="default" style="background: #cccccc;">报名通道未开启</button>
|
</view>
|
</form>
|
</view>
|
|
<!--活动介绍-->
|
<view class="rule-btn" @click="gotoRuleFunc">活动介绍</view>
|
</view>
|
</template>
|
|
<script>
|
import {
|
pay
|
} from '@/common/pay.js';
|
export default {
|
components: {
|
},
|
data() {
|
return {
|
form: {
|
activity_id: '',
|
user_name: '',
|
mobile: '',
|
},
|
bg_image: '',
|
balance: 0,
|
activity_id: 0,
|
activity: {},
|
/*是否显示支付宝支付，只有在h5，非微信内打开才显示*/
|
showAlipay: false,
|
pay_type:""
|
}
|
},
|
onLoad(e) {
|
/*活动id*/
|
this.activity_id = e.activity_id;
|
},
|
onShow() {
|
this.getData();
|
},
|
methods: {
|
/*获取数据*/
|
getData() {
|
let self = this;
|
uni.showLoading({
|
title: '加载中'
|
});
|
self.loading = true;
|
let activity_id = self.activity_id;
|
self._get(
|
'plus.regactivity.index/detail',
|
{
|
activity_id: activity_id
|
},
|
function(res) {
|
self.activity = res.data.detail;
|
self.balance = res.data.detail.balance;
|
self.loadding = true;
|
uni.hideLoading();
|
}
|
);
|
},
|
payTypeFunc(e){
|
this.pay_type = e;
|
},
|
|
/*跳转结介绍页面*/
|
gotoRuleFunc() {
|
this.gotoPage('/pages2/regactivity/rule/rule?activity_id=' + this.activity_id);
|
},
|
|
/*提交*/
|
formSubmit: function(e) {
|
let self = this;
|
let activity = self.activity;
|
var formdata = e.detail.value;
|
formdata.activity_id = self.activity_id;//活动ID
|
formdata.activity_fee = activity.activity_fee;//活动费用
|
formdata.pay_type = self.pay_type;//支付类型
|
formdata.pay_source = self.getPlatform();
|
|
//判断活动是否结束
|
if(activity.status_text.status == 2){
|
uni.showToast({
|
title: activity.status_text.status_text,
|
duration: 1000,
|
icon: 'none'
|
});
|
return false;
|
}
|
//判断活动报名状时间
|
if(activity.status_text.reg_status != 1){
|
uni.showToast({
|
title: activity.status_text.reg_status_text,
|
duration: 1000,
|
icon: 'none'
|
});
|
return false;
|
}
|
//判断活动报名是否开启
|
if(activity.register_status != 1){
|
uni.showToast({
|
title: "报名权限未开启",
|
duration: 1000,
|
icon: 'none'
|
});
|
return false;
|
}
|
//判断活动报名名额是否已满
|
if(activity.limit_num > 0 && activity.reg_num >= activity.limit_num){
|
uni.showToast({
|
title: "报名名额已满",
|
duration: 1000,
|
icon: 'none'
|
});
|
return false;
|
}
|
if(activity.ativity_fee > 0){
|
//判断余额支付
|
if(activity.ativity_fee > activity.balance){
|
uni.showToast({
|
title: "余额不足",
|
duration: 1000,
|
icon: 'none'
|
});
|
return false;
|
}
|
}
|
|
if (formdata.user_name == '') {
|
uni.showToast({
|
title: '请输入真实姓名',
|
duration: 1000,
|
icon: 'none'
|
});
|
return false;
|
}
|
|
if (formdata.mobile == '') {
|
uni.showToast({
|
title: '请输入手机号码',
|
duration: 1000,
|
icon: 'none'
|
});
|
return false;
|
}
|
|
let reg = /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/;
|
if (!reg.test(formdata.mobile)) {
|
uni.showToast({
|
title: '手机号码格式不正确',
|
duration: 1000,
|
icon: 'none'
|
});
|
return false;
|
}
|
uni.showLoading({
|
title: '正在提交',
|
mask: true
|
})
|
self._post('plus.regactivity.index/submit', formdata, function(result) {
|
uni.hideLoading();
|
if(result.data.activity_fee){
|
pay(result, self, function() {
|
uni.showToast({
|
title: '报名成功'
|
}, 1000);
|
setTimeout(function() {
|
uni.navigateBack();
|
}, 1000);
|
}, function() {
|
uni.showToast({
|
icon: 'none',
|
title: '报名失败'
|
});
|
});
|
}else if(result.code == 1){
|
uni.showToast({
|
title: '报名成功'
|
}, 1000);
|
setTimeout(function() {
|
uni.navigateBack();
|
}, 1000);
|
}else{
|
uni.showToast({
|
icon: 'none',
|
title: '报名失败'
|
});
|
}
|
|
});
|
},
|
}
|
}
|
</script>
|
|
<style>
|
|
|
.bg_image image{
|
width: 100%;
|
height: 1200rpx;
|
}
|
.iconfont {
|
font-size: 48rpx;
|
}
|
|
.index {
|
width: 750rpx;
|
}
|
|
.certification {
|
width: 675rpx;
|
margin: 0 auto;
|
border-radius: 30rpx;
|
padding: 30rpx;
|
box-sizing: border-box;
|
background-color: white;
|
position: absolute;
|
top: 260rpx;
|
left: 37.5rpx;
|
margin-bottom: 50rpx;
|
}
|
|
.certification_head {
|
width: 100%;
|
}
|
|
.certification_head_body {
|
width: 100%;
|
}
|
|
.certification_head_body_item {
|
width: 100%;
|
height: 100rpx;
|
display: flex;
|
align-items: center;
|
font-size: 32rpx !important;
|
}
|
|
.certification_head_body_item view {
|
margin-right: 10rpx;
|
}
|
|
.certification_head_body_item button {
|
width: 172rpx;
|
height: 56rpx;
|
line-height: 56rpx;
|
border: 1rpx #E2231A solid;
|
border-radius: 40rpx;
|
font-size: 26rpx;
|
color: #E2231A;
|
padding: 0 20rpx;
|
}
|
|
.certification_body {}
|
|
.login_index_updata_name {
|
margin-top: 28rpx;
|
margin-left: 48rpx;
|
}
|
|
.login_index_updata_updata {
|
width: 90%;
|
height: 360rpx;
|
margin: 0 auto;
|
margin-top: 35rpx;
|
}
|
|
.login_index_updata_updata_item2 {
|
width: 100%;
|
height: 360rpx;
|
border: 1rpx #9a9a9a dotted;
|
border-radius: 15rpx;
|
text-align: center;
|
|
}
|
|
.login_index_updata_updata_item_body {
|
width: 150rpx;
|
height: 360rpx;
|
text-align: center;
|
margin: 0 auto;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.img image {
|
width: 554rpx;
|
height: 360rpx;
|
position: relative;
|
}
|
|
.login_index_btn {
|
position: relative;
|
top: 30rpx;
|
margin-bottom: 30rpx;
|
}
|
|
.login_index_btn button {
|
width: 90%;
|
height: 80rpx;
|
/* background-color: #F36A24; */
|
border-radius: 50rpx;
|
line-height: 80rpx;
|
margin: 0 auto;
|
color: white;
|
font-size: 30rpx;
|
}
|
|
.certification_rule {
|
position: relative;
|
left: 500rpx;
|
top: -10rpx;
|
}
|
|
.certification_rule text {
|
color: #8a8a8a;
|
}
|
|
.certification_rule image {
|
width: 24rpx;
|
height: 24rpx;
|
display: inline-block;
|
}
|
|
.classify_text {
|
color: #808080;
|
margin-left: 40rpx;
|
}
|
|
.select input {
|
padding-left: 60rpx;
|
color: #808080;
|
}
|
.make-item{
|
padding-left: 60rpx;
|
}
|
.rule-btn {
|
position: fixed;
|
top: calc(var(--window-top) + 30rpx);
|
padding: 0 20rpx 0 30rpx;
|
height: 80rpx;
|
line-height: 80rpx;
|
font-size: 30rpx;
|
/* background: linear-gradient(90deg, #ff5850, #e2231a); */
|
box-shadow: 0 10rpx 16rpx 0 rgba(0,0,0,.2);
|
border-radius: 40rpx 0 0 40rpx;
|
color: #ffffff;
|
right: 0;
|
z-index: 1;
|
}
|
.icon-xuanze{
|
font-size: 38rpx;
|
}
|
.buy-checkout .item {
|
padding: 30rpx 0;
|
margin: 0 30rpx;
|
}
|
.buy-checkout .item.active .iconfont.icon-xuanze {
|
color: #19ad57 !important;
|
}
|
|
</style>
|
<style lang="scss">
|
.bg_image{
|
width: 100%;
|
height: 1210rpx;
|
@include background_color('background_color');
|
}
|
|
.rule-btn {
|
@include background_color('background_color');
|
}
|
.login_index_btn button {
|
@include background_color('background_color')
|
}
|
</style>
|
