zyedu/application/wap/view/first/special/text_detail.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_top"}
<style>
    .page {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        overflow: hidden;
    }

    .head {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        padding: 0.2rem 0.3rem;
        border-bottom: 1px solid #eee;
    }

    .head .title {
        -webkit-box-flex: 1;
        flex: 1;
        min-width: 0;
        margin-left: 0.3rem;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .head .browse {
        margin-left: 0.3rem;
        font-size: 0.24rem;
        color: #999;
    }

    .head .iconfont {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        font-size: 0.3rem;
    }

    .content {
        -webkit-box-flex: 1;
        flex: 1;
        padding: 0.3rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .content p {
        font-size: 0.3rem;
        line-height: 1.6;
    }

    .content img {
        width: 100%;
    }

    .try-btn {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: .2rem .3rem;
    }

    .try-btn a {
        display: block;
        width: 100%;
        height: .88rem;
        border-radius: .44rem;
        background-color: #191C6E;
        font-size: .28rem;
        line-height: .88rem;
        text-align: center;
        color: #FFFFFF;
    }
</style>
{/block} {block name="content"}
<div v-cloak id="app">
    <div class="page">
        <div class="head">
            <a class="iconfont iconxiangyou" href="javascript:" @click="goBack"></a>
            <div class="title">{{ taskInfo.title }}</div>
            <div class="browse">已浏览 {{ taskInfo.play_count }}</div>
        </div>
        <div ref="content" class="content" v-html="isPay || isSourcePay ? taskInfo.content : taskInfo.try_content" @scroll="handleScroll"></div>
    </div>
    <div v-if="!isPay && !isSourcePay" style="height: 1.28rem;"></div>
    <div v-if="!isPay && !isSourcePay" class="try-btn">
        <a href="javascript:" @click="handlePay">已试看，立即购买</a>
    </div>
    <quick-menu></quick-menu>
    <pay-dialog :open.sync="payDialogOpen" :money="isMember ? specialInfo.member_money : specialInfo.money" :now_money="now_money" :special_id="specialId" :pay_type_num="2"
                :is-wechat="isWechat" :is-alipay="is_alipay" :is-balance="is_yue" :template-id="templateIds" :wxpay-h5="wxpayH5" :is-member="isMember"
                :member-money="specialInfo.member_money" :member-link="memberLink" @change="changeVal"></pay-dialog>
</div>
{/block} {block name="foot"}
<script>
    var uid = {$userInfo['uid']? $userInfo['uid']: 0};
    require([
        'vue',
        'axios',
        'layer',
        'components/pay-dialog/index',
        '{__WAP_PATH}zsff/js/quick.js'
    ], function (Vue, axios, layer, PayDialog) {
        var specialId = {$specialId};
        var taskId = {$task_id};
        var now_money = {$now_money};
        var isWechat = {$isWechat? 'true': 'false'};
        var is_alipay = {$is_alipay? 'true': 'false'};
        var is_yue = {$is_yue? 'true': 'false'};
        var wxpayH5 = {$is_h5_wechat_payment_switch? 'true': 'false'};
        var memberLink = "{:url('special/member_recharge')}";
        var vm = new Vue({
            el: '#app',
            components: {
                'pay-dialog': PayDialog
            },
            data: {
                specialId: specialId,
                now_money: now_money,
                isWechat: isWechat,
                is_alipay: is_alipay,
                is_yue: is_yue,
                templateIds: '',
                wxpayH5: wxpayH5,
                memberLink: memberLink,
                isPay: false,
                isSourcePay: false,
                isMember: 0,
                linkUrl: '',
                specialInfo: {},
                taskInfo: {
                    play_count: 0
                },
                payDialogOpen: false,
            },
            created: function () {
                this.getTaskInfo();
            },
            updated: function () {
                this.$nextTick(function () {
                    this.timer = setInterval(function () {
                        if (document.readyState === 'complete') {
                            vm.offsetHeight = vm.$refs.content.offsetHeight;
                            vm.scrollHeight = vm.$refs.content.scrollHeight;
                            if (vm.offsetHeight === vm.scrollHeight) {
                                if (!vm.isPay && vm.taskInfo.is_try) {
                                } else {
                                    vm.setTaskView(vm.offsetHeight);
                                }
                            }
                            clearInterval(vm.timer);
                        }
                    }, 500);
                });
            },
            methods: {
                // 获取图文信息
                getTaskInfo: function () {
                    var vm = this;
                    var index = layer.load(1);
                    axios.post('/wap/special/getTaskInfo', {
                        special_id: specialId,
                        task_id: taskId
                    }).then(function (res) {
                        var data = res.data.data;
                        if (res.data.code === 200) {
                            vm.isPay = data.isPay;
                            vm.isSourcePay = data.isSourcePay;
                            vm.isMember = data.is_member;
                            vm.linkUrl = data.link_url;
                            vm.specialInfo = data.specialInfo;
                            vm.taskInfo = data.taskInfo;
                            if (isWechat) {
                                mapleWx($jssdk(), function () {
                                    this.onMenuShareAll({
                                        title: vm.taskInfo.title,
                                        desc: vm.taskInfo.title,
                                        imgUrl: vm.taskInfo.image,
                                        link: data.link_url
                                    });
                                });
                            }
                        }
                    }).catch(function (err) {

                    }).then(function () {
                        layer.close(index);
                    });
                },
                // 设置记录
                setTaskView: function (viewingTime) {
                    axios.post('/wap/special/viewing', {
                        special_id: specialId,
                        task_id: taskId,
                        viewing_time: viewingTime,
                        percentage: Math.floor(viewingTime / vm.scrollHeight * 100),
                        total: vm.scrollHeight
                    });
                },
                // 返回
                goBack: function () {
                    window.location = "{:url('special/details')}?id=" + specialId;
                },
                // 页面滚动
                handleScroll: function () {
                    if (!this.isPay && !this.isSourcePay) {
                        return;
                    }
                    var scrollTop = this.$refs.content.scrollTop;
                    if (this.isCenter && this.isEnd) {
                        return;
                    }
                    if ((this.offsetHeight + scrollTop) * 2 >= this.scrollHeight && !this.isCenter) {
                        this.setTaskView(this.offsetHeight + scrollTop);
                        this.isCenter = true;
                    }
                    if (this.offsetHeight + scrollTop === this.scrollHeight && !this.isEnd) {
                        this.setTaskView(this.offsetHeight + scrollTop);
                        this.isEnd = true;
                    }

                },
                handlePay: function () {
                    this.payDialogOpen = true;
                },
                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=7&id=' + this.special.id;
                            var mwebUrl = data.data.result.jsConfig.mweb_url + '&redirect_url=' + encodeURIComponent(callbackUrl);
                            window.location.assign(mwebUrl);
                            break;
                        case 'SUCCESS':
                            this.successOrder(data.msg);
                            break;
                        case 'ZHIFUBAO_PAY':
                            window.location.assign($h.U({
                                c: 'alipay',
                                a: 'index',
                                q: {
                                    info: data.data.result,
                                    params: 'special'
                                }
                            }));
                            break;
                    }
                },
                // 微信支付
                wechatPay: function (config) {
                    var vm = this;
                    mapleWx($jssdk(), function () {
                        this.chooseWXPay(config, function () {
                            vm.successOrder();
                        }, {
                            fail: vm.extendOrder,
                            cancel: vm.extendOrder
                        });
                    });
                },
                // 支付成功
                successOrder: function (msg) {
                    var that = this;
                    $h.showMsg({
                        title: msg || '支付成功',
                        icon: 'success',
                        success: function () {
                            that.payDialogOpen = false;
                            that.getTaskInfo();
                        }
                    });
                },
                // 支付未完成
                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: 'special',
                                a: 'del_order',
                                q: {
                                    orderId: that.orderId
                                }
                            }));
                        }
                    });
                },
            }
        });
    });
</script>
{/block}