zyedu/application/wap/view/first/activity/event.html

<!-- +---------------------------------------------------------------------- -->
<!-- | CRMEB [ CRMEB赋能开发者，助力企业发展 ] -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Copyright (c) 2016～2022 https://www.crmeb.com All rights reserved. -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权 -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Author: CRMEB Team <admin@crmeb.com> -->
<!-- +---------------------------------------------------------------------- -->
{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: #191C6E;
        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 = '支付失败';
                    }
                    $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}