zyedu/application/wap/view/first/studyplan/index.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: #F5F5F5;
    }
    .price-wrap {
        display: flex;
        align-items: center;
        font-size: .24rem;
        line-height: .33rem;
        color: #DC9845;
    }
    .price-wrap .price {
        flex: 1;
        font-weight: bold;
        font-size: .24rem;
        line-height: .45rem;
        color: #DC9845;
    }
    .price-wrap .price span {
        font-size: .32rem;
    }
    .activity-list li > div > div > div:last-child {
        font-weight: normal;
    }
    .activity-list .tab div{text-align: left; padding-left: 10px;}
</style>
{/block}
{block name="content"}
<div class="activity-list" v-cloak id="app">
    <div class="content">
        <ul v-if="activityList.length">
            <li v-for="(item, index) in activityList" :key="index">
                <div>
                    <div>
                        <img :src="item.plan_head" alt="" @click="planDetails(item.id)">
                    </div>
                    <div>
                        <div @click="planDetails(item.id)">{{ item.plan_name }}</div>
                        <div class="price-wrap">
                            <div class="price" @click="planDetails(item.id)">￥<span>{{ item.sales }}</span></div>
                            <div>
                                <input class="zybt" @click="planDetails(item.id)" v-if="item.isbuy" value="开始学习" type="button"/>
                                <input class="zybt" @click="OpenPay(item)" v-if="!item.isbuy" value="购买学习" type="button"/>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <div v-if="!activityList.length && loadend" class="empty">
            <img src="{__WAP_PATH}zsff/images/empty.png" alt="暂无数据">
            <div>暂无数据</div>
        </div>
    </div>
    <quick-menu></quick-menu>
    <!-- 支付弹窗 -->
    <pay-dialog :open.sync="payDialogOpen" :money="money" :now_money="now_money" :special_id="planinfo.id" :link_pay_uid="link_pay_uid"
                :pay_type_num="pay_type_num" :pink-id="pinkId" :is-wechat="isWechat" :is-alipay="is_alipay" :is-balance="is_yue"
                :template-id="templateId" :wxpay-h5="wxpayH5" :is-member="isMember" @change="changeVal">
    </pay-dialog>
    <!-- 登录弹窗 -->
    <base-login :login-show="loginShow" :site-name="site_name" @login-close="loginClose"></base-login>
</div>
{/block}
{block name="foot"}
<script>
    
    require(['vue', 'store', 'helper', '{__WAP_PATH}zsff/js/quick.js',
    'components/pay-dialog/index', 'components/base-login/index'
    ], function (Vue, store, $h, quick, PayDialog, BaseLogin) {
        var isPay = 0;
        var link_pay_uid = 0;
        var is_yue = {$is_yue? 'true': 'false'};
        var is_alipay = {$is_alipay? 'true': 'false'};
        var isWechat = {$isWechat? 'true': 'false'};
        var isPay = {$isPay? 'true': 'false'};
        var wxpayH5 = {$is_h5_wechat_payment_switch? 'true': 'false'};
        var now_money = {$now_money};
        var isMember = {$is_member};
        var site_name = '{$Auth_site_name}';
        var app = new Vue({
            el: '#app',
            components: {
                'base-login': BaseLogin,
                'pay-dialog': PayDialog,
            },
            data: {
                navs: ['全部', '待核销', '已核销'],
                navActive: 0,
                activityList: [],
                loading: false,
                loadend: false,
                page: 1,
                limit: 20,
                loadTitle:'',
                planinfo:{},
                //支付登录相关
                payDialogOpen: false,
                loginShow: false,
                is_pay: isPay,
                money:0,
                link_pay_uid:link_pay_uid,
                pay_type_num: 7, //新增的 学习计划支付类型
                pinkId: 0,
                isWechat: isWechat,
                is_pay: isPay,
                is_alipay: is_alipay, //支付宝是否开启
                is_yue: is_yue, //余额是否开启
                now_money: now_money, //余额
                templateId: '',
                wxpayH5:wxpayH5,
                isMember:isMember,
                site_name:site_name,
            },
            mounted: function () {
                this.geLogList();
                this.$nextTick(function () {
                    this.init();
                });
            },
            methods: {
                init: function () {
                    var that = this;
                    window.addEventListener('scroll', function () {
                        var clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
                            scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight,
                            scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                        if (clientHeight + scrollTop >= scrollHeight) {
                            that.geLogList();
                        }
                    });
                },
                planDetails: function (order_id) {
                    return window.location.href=$h.U({ c: 'studyplan', a: 'details', q: {id: order_id } });
                },
                study: function (id){
                    return window.location.href=$h.U({ c: 'studyplan', a: 'gotoStudy', q: {id: id } });
                },
                // 获取学习记录
                geLogList: function () {
                    var that = this;
                    if (that.loading) return;
                    if (that.loadend) return;
                    that.loading = true;
                    store.baseGet($h.U({ c: 'studyplan', a: 'index', p: { page: that.page, limit: that.limit, op:'list' } }), function (res) {
                        var list = res.data.data;
                        that.activityList.push.apply(that.activityList, list);
                        that.loadend = list.length < that.limit;
                        that.loadTitle = that.loadend ? '已全部加载完' : '上拉加载更多';
                        that.page = that.page + 1;
                        that.loading = false;
                        that.$set(this, 'activityList', that.activityList);
                    }, function (res) {
                        that.loadTitle = '上拉加载更多';
                        that.loading = false;
                    });
                },
                //所有插件回调处理事件
                changeVal: function (opt) {
                    if (typeof opt != 'object') opt = {};
                    var action = opt.action || '';
                    var value = opt.value || '';
                    this[action] && this[action](value);
                },
                pay_order: function (data) {
                    this.orderId = data.data.result.orderId || '';
                    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;
                            var callbackUrl = callback_url + '?type=9&id=' + this.planinfo.id;
                            var mwebUrl = data.data.result.jsConfig.mweb_url + '&redirect_url=' + encodeURIComponent(callbackUrl);
                            window.location.href = mwebUrl;
                            break;
                        case 'SUCCESS':
                            this.successOrder(data.msg);
                            break;
                        case 'ZHIFUBAO_PAY':
                            window.location.href = $h.U({
                                m: 'wap',
                                c: 'alipay',
                                a: 'index',
                                q: {info: data.data.result, params: 'plan'}
                            });
                            break;
                    }
                },
                wechatPay: function (config) {
                    var that = this;
                    mapleWx($jssdk(), function () {
                        this.chooseWXPay(config, function () {
                            that.successOrder();
                        }, {
                            fail: that.extendOrder,
                            cancel: that.extendOrder
                        });
                    });
                },
                successOrder: function (msg) {
                    var that = this;
                    $h.showMsg({
                        title: msg ? msg : '支付成功',
                        icon: 'success',
                        success: function () {
                            that.paid = true;
                            that.is_pay = true;
                            that.payDialogOpen = false;
                            var opt = {
                                c: 'studyplan',
                                a: 'details',
                                q: {
                                    id: that.planinfo.id
                                }
                            };
                            window.location.assign($h.U(opt));
                        }
                    });
                    
                },
                extendOrder: function (msg) {
                    var that = this;
                    if (typeof msg === 'object') {
                        if (msg.errMsg === 'chooseWXPay:cancel') {
                            msg = '微信支付取消';
                        } else {
                            msg = '支付失败';
                        }
                    } else {
                        msg = '支付失败';
                    }
                    $h.pushMsg(msg, function () {
                        that.payDialogOpen = false;
                        if (that.orderId) {
                            store.baseGet($h.U({c: 'studyplan', a: 'del_order', q: {orderId: that.orderId}}));
                        }
                    });
                },
                //打开支付插件,并检测登录状态,没有登录,打开登录插件
                OpenPay: function (plan) {
                    this.planinfo = plan;
                    this.money = plan.sales;
                    var vm = this;
                    store.baseGet($h.U({c: 'index', a: 'user_login'}), function (res) {
                        this.payDialogOpen = true;
                        // var opt = {
                        //     c: 'studyplan',
                        //     a: 'details',
                        //     q: {
                        //         id: this.planinfo.id
                        //     }
                        // };
                        // window.location.assign($h.U(opt));
                    }.bind(this), function () {
                        vm.loginShow = true;
                    });
                },
                //关闭登录
                loginClose: function (val) {
                    this.loginShow = false;
                    val && this.logComplete();
                },
            }
        });
    });
</script>
{/block}