|
|
<!-- +---------------------------------------------------------------------- -->
|
|
|
<!-- | 天诚科技 [ 刘海东 17600099397赋能开发者，助力企业发展 ] -->
|
|
|
<!-- +---------------------------------------------------------------------- -->
|
|
|
<!-- | Copyright (c) 2016～2022 https://www.crmeb.com All rights reserved. -->
|
|
|
<!-- +---------------------------------------------------------------------- -->
|
|
|
<!-- | Licensed 该系统并不是自由软件，未经许可不能去掉相关版权 -->
|
|
|
<!-- +---------------------------------------------------------------------- -->
|
|
|
<!-- | Author:甘肃天诚志信电子商务有限公司 刘海东 联系电话维系17600099397 -->
|
|
|
<!-- +---------------------------------------------------------------------- -->
|
|
|
{extend name="public/container" /}
|
|
|
{block name="title"}填写资料{/block}
|
|
|
{block name="head"}
|
|
|
<style>
|
|
|
body {
|
|
|
background-color: #F5F5F5;
|
|
|
}
|
|
|
|
|
|
.picker .picker-panel .picker-choose .picker-title {
|
|
|
font-weight: 500 !important;
|
|
|
font-size: .32rem !important;
|
|
|
line-height: 1.12rem !important;
|
|
|
color: #282828 !important;
|
|
|
}
|
|
|
|
|
|
.select-multiple .panel {
|
|
|
position: fixed;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
z-index: 600;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
width: 100%;
|
|
|
height: 4.86rem;
|
|
|
border-radius: .16rem .16rem 0 0;
|
|
|
background: #FFFFFF;
|
|
|
transform: translateY(4.86rem);
|
|
|
transition: all .5s;
|
|
|
}
|
|
|
|
|
|
.select-multiple .panel.on {
|
|
|
transform: translateY(0);
|
|
|
}
|
|
|
|
|
|
.select-multiple .panel-head {
|
|
|
display: flex;
|
|
|
height: 1rem;
|
|
|
font-size: .32rem;
|
|
|
line-height: 1rem;
|
|
|
text-align: center;
|
|
|
color: #282828;
|
|
|
}
|
|
|
|
|
|
.select-multiple .panel-head div:first-child {
|
|
|
width: 1.04rem;
|
|
|
color: #999999;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.select-multiple .panel-head div:nth-child(2) {
|
|
|
flex: 1;
|
|
|
min-width: 0;
|
|
|
overflow: hidden;
|
|
|
white-space: nowrap;
|
|
|
text-overflow: ellipsis;
|
|
|
}
|
|
|
|
|
|
.select-multiple .panel-head div:nth-child(3) {
|
|
|
width: 1.04rem;
|
|
|
color: #2C8EFF;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.select-multiple .panel-body {
|
|
|
flex: 1;
|
|
|
min-height: 0;
|
|
|
padding: .2rem 0 0 .2rem;
|
|
|
overflow-x: hidden;
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
|
|
|
.select-multiple .panel-body label {
|
|
|
display: inline-block;
|
|
|
margin: 0 .2rem .2rem 0;
|
|
|
font-size: .32rem;
|
|
|
line-height: .8rem;
|
|
|
color: #282828;
|
|
|
}
|
|
|
|
|
|
.select-multiple .panel-body input[type="checkbox"] {
|
|
|
width: .32rem;
|
|
|
height: .32rem;
|
|
|
margin-right: .16rem;
|
|
|
vertical-align: text-bottom;
|
|
|
appearance: checkbox;
|
|
|
}
|
|
|
</style>
|
|
|
{/block}
|
|
|
{block name="content"}
|
|
|
<div v-cloak id="app" class="activity-event">
|
|
|
<div class="form-section">
|
|
|
<form>
|
|
|
<label :class="{ required: item.is_required }" v-for="(item, index) in event" :key="item.id">
|
|
|
<div>{{ item.event_name }}</div>
|
|
|
<input v-if="item.event_type === 1" v-model.trim="item.event_value" :placeholder="'请输入' + item.event_name" type="text">
|
|
|
<input v-else-if="item.event_type === 4" v-model.trim="item.event_value" :placeholder="'请输入' + item.event_name" type="tel"
|
|
|
maxlength="11">
|
|
|
<input v-else-if="item.event_type === 5 || item.event_type === 2" v-model="item.event_value" :placeholder="'请选择' + item.event_name"
|
|
|
type="text" readonly @focus="focusPicker(item.eventValue, item.event_name, index)">
|
|
|
<input v-else-if="item.event_type === 3" v-model="item.event_value" :placeholder="'请选择' + item.event_name" type="text" readonly
|
|
|
@focus="focusMultiple(item.eventValue, item.event_name, index)">
|
|
|
<i v-if="item.event_type !== 1 && item.event_type !== 4" class="iconfont iconxiangyou"></i>
|
|
|
</label>
|
|
|
<label v-if="selectedPeople" class="required">
|
|
|
<div>人数</div>
|
|
|
<input v-model="selectedPeople" type="text" placeholder="请选择" readonly @focus="focusPicker(peopleOptions, '人数')">
|
|
|
<i class="iconfont iconxiangyou"></i>
|
|
|
</label>
|
|
|
</form>
|
|
|
</div>
|
|
|
<div class="foot-section">
|
|
|
<div>合计：</div>
|
|
|
<div><span>￥</span>{{ total }}</div>
|
|
|
<button type="button" @click="register">立即报名</button>
|
|
|
</div>
|
|
|
<!-- 支付弹窗 -->
|
|
|
<pay-dialog :open.sync="payDialogOpen" :money="total" :now_money="nowMoney" :special_id="id" :pay_type_num="20" :is-wechat="isWechat"
|
|
|
:is-alipay="!!isAlipay" :is-balance="isBalance" :signs="{ event: event }" :template-id="templateId" :wxpay-h5="wxpayH5"
|
|
|
:price-id="priceId" :is-member="is_member" :member-money="price.length && price[selectedIndex].event_mer_price"
|
|
|
:member-link="memberLink" @change="changeVal">
|
|
|
</pay-dialog>
|
|
|
<div class="select-multiple">
|
|
|
<div :class="{ mask: multipleShow }"></div>
|
|
|
<div :class="{ on: multipleShow }" class="panel">
|
|
|
<div class="panel-head">
|
|
|
<div @click="multipleShow = false">取消</div>
|
|
|
<div>{{ multipleTitle }}</div>
|
|
|
<div @click="multipleShow = false">确定</div>
|
|
|
</div>
|
|
|
<div class="panel-body">
|
|
|
<label v-for="item in multipleOptions"><input v-model="event[multipleIndex].event_value" :value="item.value"
|
|
|
type="checkbox">{{ item.text }}</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
{/block}
|
|
|
{block name="foot"}
|
|
|
<script>
|
|
|
require(['vue', 'store', 'picker', 'components/pay-dialog/index'], function (Vue, store, Picker, PayDialog) {
|
|
|
var level = "{$userInfo['level']}";
|
|
|
var nowMoney = "{$now_money}";
|
|
|
var isWechat = "{$isWechat}";
|
|
|
var isAlipay = "{$is_alipay}";
|
|
|
var isBalance = "{$is_yue}";
|
|
|
var wxpayH5 = "{$is_h5_wechat_payment_switch}";
|
|
|
var callbackUrl = "{$callback_url}";
|
|
|
var memberLink = "{:url('special/member_recharge')}";
|
|
|
new Vue({
|
|
|
el: '#app',
|
|
|
components: {
|
|
|
'pay-dialog': PayDialog
|
|
|
},
|
|
|
data: {
|
|
|
id: 0,
|
|
|
event: [],
|
|
|
price: [],
|
|
|
selectedPeople: '',
|
|
|
selectedIndex: 0,
|
|
|
total: 0,
|
|
|
picker: null,
|
|
|
payDialogOpen: false, // 是否显示支付弹窗
|
|
|
nowMoney: nowMoney,
|
|
|
isWechat: isWechat,
|
|
|
isAlipay: Number(isAlipay),
|
|
|
isBalance: isBalance,
|
|
|
signs: 0,
|
|
|
templateId: '',
|
|
|
wxpayH5: wxpayH5,
|
|
|
priceId: 0,
|
|
|
peopleOptions: [],
|
|
|
multipleTitle: '',
|
|
|
multipleOptions: [],
|
|
|
multipleIndex: 0,
|
|
|
multipleShow: false,
|
|
|
is_member: Number(level),
|
|
|
memberLink: memberLink
|
|
|
},
|
|
|
created: function () {
|
|
|
this.id = $h.getParmas('id');
|
|
|
this.getActivityEventData();
|
|
|
this.getActivityEventPrice();
|
|
|
this.picker = new Picker({
|
|
|
data: [[]],
|
|
|
title: ''
|
|
|
});
|
|
|
this.picker.on('picker.select', this.pickerSelect);
|
|
|
if (this.isWechat) {
|
|
|
this.getTemplateIds();
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
focusMultiple: function (data, title, index) {
|
|
|
this.multipleShow = true;
|
|
|
this.multipleTitle = title;
|
|
|
this.multipleOptions = this.event[index].eventValue;
|
|
|
this.multipleIndex = index;
|
|
|
},
|
|
|
// 资料项
|
|
|
getActivityEventData: function () {
|
|
|
var vm = this;
|
|
|
store.baseGet($h.U({
|
|
|
c: 'activity',
|
|
|
a: 'getActivityEventData',
|
|
|
q: {
|
|
|
id: this.id
|
|
|
}
|
|
|
}), function (res) {
|
|
|
var data = res.data.data;
|
|
|
data.forEach(function (item) {
|
|
|
item.eventValue = item.event_value.split('#');
|
|
|
item.eventValue.forEach(function (value, index) {
|
|
|
item.eventValue[index] = {
|
|
|
text: value,
|
|
|
value: value
|
|
|
};
|
|
|
});
|
|
|
item.event_value = item.event_type == 3 ? [] : '';
|
|
|
});
|
|
|
vm.event = data;
|
|
|
});
|
|
|
},
|
|
|
// 价格项
|
|
|
getActivityEventPrice: function () {
|
|
|
var vm = this;
|
|
|
store.baseGet($h.U({
|
|
|
c: 'activity',
|
|
|
a: 'getActivityEventPrice',
|
|
|
q: {
|
|
|
id: this.id
|
|
|
}
|
|
|
}), function (res) {
|
|
|
vm.price = res.data.data;
|
|
|
vm.peopleOptions = vm.price.map(function (item) {
|
|
|
return {
|
|
|
text: item.event_number + '人',
|
|
|
value: item.event_number
|
|
|
};
|
|
|
});
|
|
|
vm.selectedPeople = vm.peopleOptions[vm.selectedIndex].value;
|
|
|
vm.total = vm.price[vm.selectedIndex][level === '1' ? 'event_mer_price' : 'event_price'];
|
|
|
vm.priceId = vm.price[vm.selectedIndex].id;
|
|
|
});
|
|
|
},
|
|
|
// 订阅模板id
|
|
|
getTemplateIds: function () {
|
|
|
var vm = this;
|
|
|
store.baseGet($h.U({
|
|
|
c: 'special',
|
|
|
a: 'getTemplateIds',
|
|
|
q: {
|
|
|
special_id: this.id,
|
|
|
pay_type_num: 20
|
|
|
}
|
|
|
}), function (res) {
|
|
|
vm.templateId = res.data.msg;
|
|
|
});
|
|
|
},
|
|
|
// 确定人数
|
|
|
pickerSelect: function (selectedVal, selectedIndex) {
|
|
|
if (typeof this.focusIndex === 'undefined') {
|
|
|
this.selectedPeople = selectedVal[0];
|
|
|
this.selectedIndex = selectedIndex[0];
|
|
|
this.total = this.price[this.selectedIndex][level === '1' ? 'event_mer_price' : 'event_price'];
|
|
|
this.priceId = this.price[this.selectedIndex].id;
|
|
|
} else {
|
|
|
this.event[this.focusIndex].event_value = selectedVal[0];
|
|
|
}
|
|
|
},
|
|
|
// 立即报名
|
|
|
register: function () {
|
|
|
$h._errorMsgOptions.offset = 'auto';
|
|
|
$h._errorMsgOptions.time = 1500;
|
|
|
for (var i = 0, len = this.event.length; i < len; i++) {
|
|
|
if (!this.event[i].is_required) {
|
|
|
continue;
|
|
|
}
|
|
|
switch (this.event[i].event_type) {
|
|
|
case 1:
|
|
|
if (!this.event[i].event_value) {
|
|
|
$h.pushMsg('请输入' + this.event[i].event_name);
|
|
|
return;
|
|
|
}
|
|
|
break;
|
|
|
case 2:
|
|
|
case 3:
|
|
|
case 5:
|
|
|
if (!this.event[i].event_value) {
|
|
|
$h.pushMsg('请选择' + this.event[i].event_name);
|
|
|
return;
|
|
|
}
|
|
|
break;
|
|
|
case 4:
|
|
|
if (!this.event[i].event_value) {
|
|
|
$h.pushMsg('请输入' + this.event[i].event_name);
|
|
|
return;
|
|
|
} else if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(this.event[i].event_value)) {
|
|
|
$h.pushMsg('请输入正确的' + this.event[i].event_name);
|
|
|
return;
|
|
|
}
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
this.payDialogOpen = true;
|
|
|
},
|
|
|
changeVal: function (opt) {
|
|
|
var action = '';
|
|
|
var value = '';
|
|
|
if (typeof opt !== 'object') {
|
|
|
opt = {};
|
|
|
}
|
|
|
action = opt.action || '';
|
|
|
value = opt.value || '';
|
|
|
if (this[action]) {
|
|
|
this[action](value);
|
|
|
}
|
|
|
},
|
|
|
pay_order: function (data) {
|
|
|
switch (data.data.status) {
|
|
|
case "PAY_ERROR": case 'ORDER_EXIST': case 'ORDER_ERROR':
|
|
|
this.extendOrder(data.msg);
|
|
|
break;
|
|
|
case 'WECHAT_PAY':
|
|
|
this.wechatPay(data.data.result.jsConfig);
|
|
|
break;
|
|
|
case 'WECHAT_H5_PAY':
|
|
|
this.payDialogOpen = false;
|
|
|
window.location.assign(data.data.result.jsConfig.mweb_url + '&redirect_url=' + encodeURIComponent(callbackUrl + '?type=3&id=0'));
|
|
|
break;
|
|
|
case 'SUCCESS':
|
|
|
this.successOrder(data.msg);
|
|
|
break;
|
|
|
case 'ZHIFUBAO_PAY':
|
|
|
window.location.assign($h.U({
|
|
|
m: 'wap',
|
|
|
c: 'alipay',
|
|
|
a: 'index',
|
|
|
q: {
|
|
|
info: data.data.result,
|
|
|
params: 'signup'
|
|
|
}
|
|
|
}));
|
|
|
break;
|
|
|
}
|
|
|
},
|
|
|
focusPicker: function (data, title, index) {
|
|
|
var vm = this;
|
|
|
this.focusIndex = index;
|
|
|
this.picker.show(function () {
|
|
|
vm.picker.refill([data]);
|
|
|
document.querySelector('.picker-title').innerHTML = title;
|
|
|
});
|
|
|
},
|
|
|
successOrder: function (msg) {
|
|
|
$h.showMsg({
|
|
|
title: msg || '支付成功',
|
|
|
icon: 'success',
|
|
|
success: function () {
|
|
|
window.location.assign($h.U({
|
|
|
c: 'my',
|
|
|
a: 'sign_list'
|
|
|
}));
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
extendOrder: function (msg) {
|
|
|
if (typeof msg === 'object') {
|
|
|
if (msg.errMsg === 'chooseWXPay:cancel') {
|
|
|
msg = '微信支付取消';
|
|
|
} else {
|
|
|
msg = '支付失败';
|
|
|
}
|
|
|
} else {
|
|
|
msg = msg || '支付失败';
|
|
|
}
|
|
|
$h.pushMsg(msg, function () {
|
|
|
window.location.reload();
|
|
|
});
|
|
|
},
|
|
|
wechatPay: function (config) {
|
|
|
var vm = this;
|
|
|
mapleWx($jssdk(), function () {
|
|
|
this.chooseWXPay(config, function () {
|
|
|
vm.successOrder();
|
|
|
}, {
|
|
|
fail: vm.extendOrder,
|
|
|
cancel: vm.extendOrder
|
|
|
});
|
|
|
});
|
|
|
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
</script>
|
|
|
{/block} |
