<template>
|
<view :class="[Visible ? 'usable-popup open' : 'usable-popup close', theme() || '']" :data-theme='theme()'>
|
<view class="popup-bg" @click="closePopup(null)"></view>
|
<view class="main pt30" v-on:click.stop>
|
<view class="popup-title pb30 pr">
|
<view class="title tc f32 fb">活动报名</view>
|
<view class="iconfont icon-guanbi" @click="closePopup(null)"></view>
|
</view>
|
<scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'">
|
<view class="pb30">
|
<!-- 如果不是连盟汇会员，需要填写个人信息，报名后会自动加入活动发起的分会 -->
|
<view class="reg-section join-box p30 radius24 bg-white" v-if="!activityData.is_member">
|
<view class="tips f28 p20 radius12"><text class="iconfont icon-gantanhao mr10"></text> 您还不是{{activityData.store_name}}的会员，请完善以下信息，提交报名后即可成为会员。</view>
|
<view class="item d-s-c">
|
<view class="item-name">真实姓名</view>
|
<input type="text" maxlength="30" class="flex-1" placeholder="请输入真实姓名" v-model="formData.real_name" placeholder-class=
|
"placeholder" />
|
</view>
|
<view class="item d-s-c">
|
<view class="item-name">手机号码</view>
|
<input type="text" maxlength="30" class="flex-1" placeholder="请输入常用的手机号码" v-model="formData.mobile" placeholder-class=
|
"placeholder" />
|
</view>
|
<view class="item d-s-c">
|
<view class="item-name">单位/公司名称</view>
|
<input type="text" maxlength="30" class="flex-1" placeholder="请输入单位/公司名称" v-model="formData.company" placeholder-class=
|
"placeholder" />
|
</view>
|
</view>
|
<view class="reg-section pay-box p30 radius24 bg-white" v-if="activityData.fee > 0">
|
<view class="pay-item d-b-c">
|
<view class="title">报名费用</view>
|
<view class="theme-price"><text>￥</text>{{activityData.fee}}</view>
|
</view>
|
<view class="pay-item d-b-c pt40">
|
<view class="title">{{points_name()}}(共{{activityData.points}}个)</view>
|
<view class="">
|
<text class="gray9" v-if="activityData.points == 0">
|
无可用
|
</text>
|
<text class="theme-price" v-else-if="formData.points_num > 0" @click="onPoints">
|
-<text class="f24">￥</text>{{formData.points_money}} <text class='iconfont icon-jiantou'></text>
|
</text>
|
<text class="gray6 f28" v-else @click="onPoints">
|
去选择 <text class='iconfont icon-jiantou'></text>
|
</text>
|
</view>
|
</view>
|
<view class="pay-item d-b-c pt40">
|
<view class="title">余额(共￥{{activityData.balance}}可用)</view>
|
<view class="">
|
<text class="gray9" v-if="activityData.balance == 0">
|
无可用
|
</text>
|
<view class="price" v-else>
|
<text class="f24 gray9" v-if="parseFloat(activityData.balance) < parseFloat(activityData.fee) && formData.is_combined_pay==1">需组合支付</text>
|
<switch style="transform: scale(0.7); margin-right: -20rpx;" :checked="is_checked_balance" @change="onUseBalance" />
|
</view>
|
|
</view>
|
</view>
|
</view>
|
<view class="reg-section pay-type p30 radius24 bg-white" v-if="onlinePrice > 0">
|
<view class="item d-b-c">
|
<view class="f30">需支付的金额</view>
|
<view class="theme-price f30 fb"><text class="f24">￥</text>{{onlinePrice}}</view>
|
</view>
|
<view class="item d-b-c" :class="{'active':formData.pay_type == 20}" @tap="payTypeFunc(20)">
|
<view class="d-s-c">
|
<view class="icon-left d-c-c mr10">
|
<i class="icon iconfont icon-weixin"></i>
|
</view>
|
<view>
|
<view class="key">微信支付</view>
|
<view class="gray9">使用微信快捷支付</view>
|
</view>
|
</view>
|
<view class="icon-right">
|
<i class="icon iconfont icon-xuanze"></i>
|
</view>
|
</view>
|
<view v-if="showAlipay" class="item d-b-c" :class="{'active':formData.pay_type == 30}" @click="payTypeFunc(30)">
|
<view class="d-s-c">
|
<view class="icon-left d-c-c mr10">
|
<i class="icon iconfont icon-zhifubao"></i>
|
</view>
|
<view>
|
<view class="key">支付宝支付</view>
|
<view class="gray9">使用支付宝支付</view>
|
</view>
|
</view>
|
<view class="icon-right">
|
<i class="icon iconfont icon-xuanze"></i>
|
</view>
|
</view>
|
</view>
|
</view>
|
</scroll-view>
|
<view class="footer-btn bg-white p-0-30 pt20 pb20">
|
<button type="default" @click="onSubmit" class="btn-submit">提交报名</button>
|
</view>
|
</view>
|
<!-- 积分弹窗 -->
|
<PointsForm :isOpenPoints="isOpenPoints" :activityData="activityData" :max_price="onlinePrice+formData.points_money" @close="closePointsFunc"></PointsForm>
|
</view>
|
</template>
|
|
<script>
|
import PointsForm from './points'; // 积分选择弹窗
|
export default {
|
components: {
|
PointsForm
|
},
|
data() {
|
return {
|
/*手机高度*/
|
phoneHeight: 0,
|
/*可滚动视图区域高度*/
|
scrollviewHigh: 0,
|
/*是否可见*/
|
Visible: false,
|
/*表单*/
|
formData: {
|
activity_id: '',
|
real_name: '',
|
mobile: '',
|
company: '',
|
shop_supplier_id: 0,
|
points_num: 0, // 抵扣的积分数量
|
points_money: 0, // 积分抵扣的金额
|
balance: 0, // 使用的余额
|
is_use_balance: 0, // 是否使用余额支付
|
is_combined_pay: 0, // 是否需要组合支付
|
pay_type: 20, // 支付方式，默认微信支付
|
},
|
/*尺寸比例*/
|
ratio: 1,
|
showAlipay: true, /*是否显示支付宝支付，只有在h5，非微信内打开才显示*/
|
use_balance: 0, // 使用的余额
|
is_checked_balance: false, // 是否
|
activityData: {},
|
isOpenPoints: false, // 是否打开积分弹窗
|
validate: false,
|
};
|
},
|
props: ['isOpenReg', 'in_radius'],
|
|
onLoad() {},
|
mounted() {
|
this.init();
|
},
|
watch: {
|
isOpenReg: function(n, o) {
|
if (n != o) {
|
this.Visible = n;
|
this.getHeight();
|
}
|
}
|
},
|
computed: {
|
// 最多可使用的余额
|
maxBalance() {
|
if (this.formData.is_use_balance == 1) {
|
return Math.min(this.activityData.balance, this.activityData.fee - this.formData.points_money);
|
}
|
return 0;
|
},
|
onlinePrice() {
|
const online_price = Math.max(this.activityData.fee - this.formData.points_money - this.maxBalance, 0);
|
return parseFloat(online_price.toFixed(2));
|
},
|
},
|
methods: {
|
/*初始化*/
|
init() {
|
let self = this;
|
uni.getSystemInfo({
|
success(res) {
|
self.phoneHeight = res.windowHeight;
|
self.ratio = res.windowWidth / 750;
|
self.getHeight();
|
}
|
});
|
},
|
|
/*获取高度*/
|
getHeight() {
|
// 连盟汇成员和非成员设置不用的高度
|
if (this.activityData.is_member) {
|
this.scrollviewHigh = 680 * this.ratio;
|
} else {
|
if (this.activityData.fee > 0) {
|
this.scrollviewHigh = this.phoneHeight * 0.8;
|
} else {
|
this.scrollviewHigh = 600 * this.ratio;
|
}
|
}
|
},
|
|
// 是否使用余额支付
|
onUseBalance(e) {
|
if (e.target.value == true) {
|
this.is_checked_balance = true;
|
this.formData.is_use_balance = 1;
|
if (this.onlinePrice > 0) {
|
this.formData.is_combined_pay = 1;
|
}
|
} else {
|
this.is_checked_balance = false;
|
this.formData.is_use_balance = 0;
|
this.formData.is_combined_pay = 0;
|
}
|
},
|
|
/*选择支付方式*/
|
payTypeFunc(e){
|
this.formData.pay_type = e;
|
},
|
|
/*提交报名*/
|
onSubmit() {
|
let self = this;
|
let reg_success = 1; // 1报名成功 2报名失败
|
if (self.validateForm() && self.validate) {
|
uni.showLoading({
|
title: '正在提交',
|
mask: true
|
})
|
self.validate = false;
|
let params = self.formData;
|
self._post('branch.activity/submit', {
|
params: JSON.stringify(
|
Object.assign({}, params, {
|
balance: self.maxBalance,
|
activity_id: self.activityData.activity_id,
|
is_member: self.activityData.is_member,
|
pay_source: self.getPlatform(),
|
in_radius: self.in_radius ? 1 : 0 // 如果为1，报名成功后直接签到
|
})
|
)
|
}, function(result) {
|
uni.hideLoading();
|
if (result.data.online_money) {
|
pay(result, self, function() {
|
|
}, function() {
|
reg_success = 2; // 失败
|
});
|
} else if (result.code != 1) {
|
reg_success = 2; // 失败
|
}
|
self.$emit('close', reg_success);
|
});
|
}
|
},
|
|
// 验证数据
|
validateForm() {
|
let self = this;
|
if (!self.activityData.is_member) {
|
if (!self.formData.real_name) {
|
return self.showTips('请输入您的真实姓名');
|
}
|
if (!self.formData.mobile) {
|
return self.showTips('请输入您的手机号码');
|
}
|
if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(self.formData.mobile)) {
|
return self.showTips('请输入正确的手机号码');
|
}
|
if (!self.formData.company) {
|
return self.showTips('请输入单位/公司名称');
|
}
|
}
|
self.validate = true;
|
return true;
|
},
|
|
// 提示框
|
showTips(title, duration = 1000, icon = 'none') {
|
uni.showToast({
|
title: title,
|
duration: duration,
|
icon: icon
|
});
|
},
|
|
/*关闭弹窗*/
|
closePopup(e) {
|
this.$emit('close', e);
|
},
|
|
/*打开积分弹窗*/
|
onPoints() {
|
this.isOpenPoints = true;
|
},
|
|
/*关闭积分弹窗*/
|
closePointsFunc(e) {
|
if (e !== null) {
|
this.formData.points_num = e;
|
this.formData.points_money = parseFloat((e * this.activityData.points_ratio).toFixed(2));
|
}
|
this.isOpenPoints = false;
|
},
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.usable-popup .popup-bg {
|
position: fixed;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
left: 0;
|
background: rgba(0, 0, 0, 0.6);
|
z-index: 99;
|
}
|
|
.usable-popup .main {
|
position: fixed;
|
width: 100%;
|
bottom: 0;
|
min-height: 200rpx;
|
background-color: #f5f5f5;
|
transform: translate3d(0, 1380rpx, 0);
|
transition: transform 0.2s cubic-bezier(0, 0, 0.25, 1);
|
bottom: env(safe-area-inset-bottom);
|
z-index: 99;
|
border-radius: 30rpx 30rpx 0 0;
|
}
|
|
.usable-popup.open .main {
|
transform: translate3d(0, 0, 0);
|
}
|
|
.usable-popup.close .popup-bg {
|
display: none;
|
}
|
|
.footer-btn .btn-submit {
|
height: 88rpx;
|
line-height: 88rpx;
|
font-size: 30rpx;
|
@include background_color('background_color');
|
color: #ffffff;
|
border-radius: 88rpx;
|
}
|
|
.popup-title {
|
.iconfont {
|
position: absolute;
|
right: 30rpx;
|
top: 10rpx;
|
color: #999999;
|
}
|
}
|
|
.reg-section {
|
+ .reg-section {
|
margin-top: 30rpx;
|
}
|
}
|
|
.join-box {
|
.item {
|
padding-top: 60rpx;
|
.item-name {
|
font-size: 28rpx;
|
width: 200rpx;
|
}
|
}
|
.tips {
|
background-color: #f7f7f7;
|
color: #333;
|
}
|
}
|
.pay-box {
|
.pay-item {
|
font-size: 30rpx;
|
.title {
|
|
}
|
.theme-price {
|
text {
|
font-size: 24rpx;
|
}
|
}
|
.icon-jiantou {
|
font-size: 24rpx;
|
}
|
}
|
}
|
.pay-type {
|
.item {
|
.icon-left {
|
.icon-weixin {
|
font-size: 60rpx;
|
color: #04BE01;
|
}
|
.icon-zhifubao {
|
font-size: 50rpx;
|
color: #1281ff;
|
}
|
}
|
.key {
|
font-size: 28rpx;
|
}
|
.icon-right {
|
.iconfont {
|
font-size: 48rpx;
|
}
|
}
|
+ .item {
|
margin-top: 45rpx;
|
}
|
&.active {
|
.icon-right {
|
.iconfont {
|
@include font_color('price_color');
|
}
|
}
|
}
|
}
|
}
|
</style>
|
