zyedu/application/wap/view/first/studyplan/details.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: .42rem;
    }
    .activity-list li > div > div > div:last-child {
        font-weight: normal;
    }
    .activity-list .tab div{text-align: left; padding-left: 10px;}

    .plan_header{ background: #fff;}
    .plan_header>div{padding: 0.16rem;}
    .plan_header img{width: 100%; height: 4rem; }
    .plan_title{ font-size: 0.4rem;font-weight: bolder;}
    .content1{ margin: 0.2rem; background:#F5F5F5;}
    .activity-list .empty{margin-top: 0.2rem; background: none;}
    footer .video_footer_btn .on{
        width: 100% !important;
        border-radius: 37px !important;
    }
    .video_footer_btn_right {
        width: 50%;
        height: 100%;
        border-radius: 0px 37px 37px 0px;
        /* background: linear-gradient(90deg, rgba(64, 157, 255, 1) 0%, rgba(30, 133, 251, 1) 100%); */
        background-color: #191C6E;
    }
    .video_footer_btn_left_pic {
        font-size: 0.28rem;
        line-height: .22rem;
        color: #fff;
        text-align: center;
    }
    .video_footer_btn {
        -webkit-flex: 1;
        flex: 1;
        height: 0.76rem;
        border-radius: 37px;
    }
</style>
{/block}
{block name="content"}
<div v-cloak id="app" class="thematic-details">
    <div class="plan_header">
        <div>
            <img :src="planinfo.plan_head">
            <div class="price-wrap">
                <div class="price">￥<span>{{ planinfo.sales }}</span></div>
            </div>
            <div class="plan_title">{{ planinfo.plan_name }}</div>
            <div class="plan_introduction">{{ planinfo.introduction }}</div>
        </div>
    </div>
    <div class="content1">
        <ul v-if="steps.length">
            <li v-for="(item1, index1) in steps" :key="index1">
                <div>
                    <div class="public_title acea-row row-between-wrapper">
                        <div class="name" >
                            <div class="title-circular"></div>
                            <div class="title-text" v-text="item1.stepname"></div>
                        </div>
                    </div>
                    <div>
                        {{item1.introduction}}
                    </div>
                </div>
                <div class="activity-list">
                    <div class="content">
                        <ul v-if="itemsList[item1.id]">
                            <li v-for="(item, index) in itemsList[item1.id] " style=" background: none;">
                                <div>
                                    <div style="padding: 0;">
                                        <img :src="item.image">
                                    </div>
                                    <div>
                                        <div style="font-weight:bolder; ">{{ item.title }}</div>
                                        <div style="color:gray; ">{{ item.abstract }}</div>
                                        <div style="color:gray;">共 {{item.count}} 节</div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div v-if="!itemsList[item1.id]" class="empty">
                        <div>暂无数据</div>
                    </div>
                </div>
            </li>
        </ul>
        <div v-if="!steps.length && loadend" class="empty">
            <img src="{__WAP_PATH}zsff/images/empty.png" alt="暂无数据">
            <div>暂无数据</div>
        </div>
    </div>
    <footer class="acea-row row-middle" ref="storeMenu">
        <!-- <a class="link" href="{:Url('wap/index/index')}">
            <div class="cont">
                <img src="{__WAP_PATH}zsff/images/special01.png">
                <div>首页</div>
            </div>
        </a>
        <a class="link" href="javascript:" @click="customerService">
            <div class="cont">
                <img src="{__WAP_PATH}zsff/images/special02.png">
                <div>客服</div>
            </div>
        </a> -->
        <div class="wrap">
            <div class="video_footer_btn acea-row">
                <div class="video_footer_btn_right acea-row on">
                    <span @click="OpenPay()" class="acea-row row-center-wrapper video_footer_btn_left_pic" style="flex: 1;">购买学习</span>
                </div>
            </div>
        </div>
    </footer>
    <!-- 支付弹窗 -->
    <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 planinfo = {$planinfo};
        var steps = {$steps};
        var itemsList = {$itemsList};
        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: {
                planinfo:planinfo,
                steps:steps,
                itemsList: itemsList,
                //支付登录相关
                payDialogOpen: false,
                loginShow: false,
                is_pay: isPay,
                money:planinfo.sales,
                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.$nextTick(function () {
                    this.init();
                });
            },
            methods: {
                init: function () {
                    var that = this;
                },
                buy: function (){
                    alert('去购买');
                },
                study: function (){
                    alert('去学习');
                },
                //关闭登录
                loginClose: function (val) {
                    this.loginShow = false;
                    val && this.logComplete();
                },
                // 点击客服
                customerService: function () {
                    store.baseGet($h.U({
                        c: 'public_api',
                        a: 'public_data'
                    }), function (res) {
                        var data = res.data.data;
                        if (data.customer_service === '3') {
                            if (data.site_service_phone) {
                                layer.confirm('是否拨打 <a href="tel:' + data.site_service_phone + '">' + data.site_service_phone + '</a> 进行咨询？', {
                                    title: false,
                                    closeBtn: false,
                                    btn: ['拨打', '取消']
                                }, function (index) {
                                    window.location.assign('tel:' + data.site_service_phone);
                                    layer.close(index);
                                });
                            } else {
                                layer.msg('抱歉，无法联系客服');
                            }
                        } else {
                            window.location.assign($h.U({
                                c: 'service',
                                a: 'service_list'
                            }));
                        }
                    });
                },
                //所有插件回调处理事件
                changeVal: function (opt) {
                    if (typeof opt != 'object') opt = {};
                    var action = opt.action || '';
                    var value = opt.value || '';
                    this[action] && this[action](value);
                },
                //打开支付插件,并检测登录状态,没有登录,打开登录插件
                OpenPay: function () {
                    var vm = this;
                    store.baseGet($h.U({c: 'index', a: 'user_login'}), function (res) {
                        this.money = this.money;
                        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;
                    });
                },
            }
        });
    });
</script>
{/block}