zhishifufei_uniapp/pages/special/single_con_detail.vue

<template>
    <BaseContainer class="task-info">
        <NavBar title="专题详情" />
        <view v-if="singleContent.light_type === 3">
            <video id="myVideo" @loadedmetadata="handleReady" @play="play" @ended="handleEnded"
                @timeupdate="handleTimeupdateVideo" class="player-self" :poster="singleContent.image"
                :src="singleProfile.link" object-fit="cover"></video>
        </view>
        <image v-if="singleContent.light_type === 2 && !singleProfile.videoId && !singleProfile.link"
            :src="singleContent.image" class="cover" :style="{ height: height + 'px' }" />
        <view v-if="singleContent.light_type === 2" :style="{ height: height + 'px' }" class="audio-player">

            <image class="image"
                :src="isPause ? getImgPath('/wap/first/zsff/images/audio1.png') : getImgPath('/wap/first/zsff/images/audio2.gif')"
                alt="" />
            <view v-if="!(!singleProfile.videoId && !singleProfile.link)" class="control">
                <view @click="toggleTask">
                    <i class="iconfont icon" :class="isPause ? 'iconbofang' : 'iconzanting'"></i>
                </view>
                <view class="timeline" @touchmove="moveTask" @touchend="moveEndTask">
                    <view>{{ currentTime | formatTime(duration) }}</view>
                    <view class="progress">
                        <view :style="{ width: taskRange + '%' }" class="inner">
                            <view class="thumb"></view>
                        </view>
                    </view>
                    <view>{{ duration | formatTime }} </view>
                </view>
            </view>
        </view>
        <view class="title">{{ singleContent.title }}</view>
        <view class="detail" v-html="singleContent.abstract"></view>
        <PayDiaLog :open.sync="payDialogOpen" :money="parseFloat(singleContent.money)" :now_money="nowMoney"
            :special_id="id" :pay_type_num="2" :is-wechat="isWechat" :is-alipay="isAlipay" :is-balance="isBalance"
            :template-id="templateIds" :wxpay-h5="wxpayH5" @change="changeVal" />
    </BaseContainer>
</template>

<script>
    import {
        singleConContent,
        getVideoPlayCredentials,
        getVideoPlayDuration,
        saveSpecialViewing,
        delSpecialOrder,
    } from "@/api/special";
    import { getAuthInfo } from "@/api/auth";
    import dayjs from "dayjs";

    import PayDiaLog from "@/components/PayDialog/index.vue";
    export default {
        components: {
            PayDiaLog
        },
        filters: {
            formatTime(time, sibling) {
                let duration = dayjs.duration(time * 1000);
                let hours = duration.hours();
                let siblingHours = sibling ? dayjs.duration(sibling * 1000).hours() : 0;

                return dayjs({
                    h: hours,
                    m: duration.minutes(),
                    s: duration.seconds(),
                }).format((hours || siblingHours ? "HH:" : "") + "mm:ss");
            },
        },
        computed: {
            taskRange: function () {
                return Math.floor(this.currentTime / this.duration * 100);
            }
        },
        data() {
            return {
                id: 0,
                nowMoney: 0,
                height: 0,
                singleContent: {},
                singleProfile: {},
                isPause: true,
                currentTime: 0,
                duration: 0,
                payDialogOpen: false,
                pay_type_num: -1,
                isWechat: false,
                isAlipay: false,
                isBalance: false,
                wxpayH5: false,
                memberLink: '',
                templateIds: '',
                PlayAuth: '',
                player: null,
                viewing_time: 0,
            }
        },
        onLoad({ id }) {
            this.id = parseInt(id);
            this.getAuthInfo();
            this.getSingleContent();

            // 系统信息的概念
            uni.getSystemInfo({
                success: res => {
                    this.height = Math.floor(res.screenWidth * 9 / 16)
                }
            })
        },
        onReachBottom() {
            this.getTaskList();
        },
        mounted() {

        },
        methods: {
            play() {
                // #ifdef APP-PLUS
                this.player.seek(parseInt(this.currentTime));
                // #endif
            },
            async getAuthInfo() {
                const res = await getAuthInfo();
                const { nowMoney, isWechat, isAlipay, isBalance, wxpayH5 } = res.data;
                Object.assign(this, {
                    nowMoney,
                    isWechat,
                    isAlipay,
                    isBalance,
                    wxpayH5,
                });
            },
            getSingleContent() {
                singleConContent(this.id).then(res => {
                    this.singleContent = res.data;
                    this.singleProfile = res.data.singleProfile;
                    this.viewing_time = this.singleContent.viewing_time / 100;
                    this.currentTime = Math.floor(this.viewing_time);
                    if (this.singleContent.light_type == 3) {
                        this.createPlayer();
                    } else {
                        this.createAudioPlayer();
                    }
                })

            },

            createAudioPlayer() {
                if (this.player) {
                    this.player.stop();
                    this.player = null;
                    this.audioPaused = true;
                }

                const innerAudioContext = uni.createInnerAudioContext();
                innerAudioContext.autoplay = false;
                innerAudioContext.src = this.singleProfile.link;

                innerAudioContext.onCanplay(() => {
                    let intervalID = setInterval(() => {
                        if (innerAudioContext.duration !== 0) {
                            clearInterval(intervalID);
                            this.duration = innerAudioContext.duration;
                            // #ifdef APP
                            this.player.seek(this.viewing_time);
                            //#endif
                            this.audioRange = Math.floor((this.viewing_time / this.duration) * 100)
                        }
                    }, 100);
                });
                innerAudioContext.onEnded(() => {
                    this.handleEnded();
                });

                innerAudioContext.onTimeUpdate(() => {
                    this.handleTimeupdate();
                });

                this.player = innerAudioContext;
                if (this.viewing_time) {
                    this.player.seek(this.viewing_time);
                }
            },
            onPlayerCanplaythrough() {

            },
            // 创建播放器
            createPlayer() {
                this.player = uni.createVideoContext("myVideo");
            },
            handleReady(e) {
                this.duration = e.target.duration;
                if (!this.singleContent.isPay && this.singleProfile.is_try) {
                    // this.player.seek(this.taskInfo.try_time * 60);
                } else {
                    this.player.seek(this.viewing_time);
                }
            },
            // 获取playauth
            getPlayAuth: function () {
            },

            handlePause: function () {
                if (!this.isPause) {
                    this.isPause = true;
                }
            },
            handleCanplay: function () {
                if (this.singleContent.isPay) {
                    if (!this.seeked) {
                        this.seeked = true;
                        this.player.seek(this.singleContent.viewing_time / 1000);
                    }
                } else {
                    this.player.setPreviewTime(this.singleProfile.try_time * 60);
                }
            },
            handleEnded() {
                if (!this.singleContent.isPay) {
                    uni.showModal({
                        title: "提示",
                        content: '购买后可' + (this.singleContent.light_type === 2 ? '听' : '看') + '全部内容，是否购买？',
                        confirmText: "购买",
                        success: ({ confirm }) => {
                            if (!confirm) return;
                            this.payDialogOpen = true
                        },
                    });
                } else {
                    this.setViewing(this.duration);
                }
            },
            onUnload() {
                if (!this.player) return;
                this.player.pause()
            },
            handleTimeupdateVideo(event) {
                this.currentTime = event.target.currentTime;
                this.duration = event.target.duration;
                if (parseInt(this.currentTime) == parseInt(this.duration)) {
                    this.player.seek(0);
                }
                if (!this.singleContent.isPay) {
                    if (this.singleProfile.is_try && this.currentTime >= this.singleProfile.try_time * 60) {
                        this.player.pause()
                        this.handleEnded();
                    }
                    return;
                }
                var floorTime = Math.floor(this.currentTime);
                if (floorTime && floorTime !== this.floorTime && !(floorTime % 10)) {
                    this.floorTime = floorTime;
                    this.setViewing(this.currentTime);
                }
            },
            handleTimeupdate() {
                this.currentTime = this.player.currentTime;
                if (!this.singleContent.isPay) {
                    if (this.singleProfile.is_try && this.currentTime >= this.singleProfile.try_time * 60) {
                        this.isPause = true;
                        this.player.pause()
                        this.player.seek(0)
                        this.handleEnded();
                    }
                    return;
                }
                var floorTime = Math.floor(this.currentTime);
                if (floorTime && floorTime !== this.floorTime && !(floorTime % 10)) {
                    this.floorTime = floorTime;
                    this.setViewing(this.currentTime);
                }
            },
            setViewing(currentTime) {
                saveSpecialViewing({
                    special_id: this.id,
                    task_id: 0,
                    total: this.duration * 1e3,
                    viewing_time: currentTime * 100,
                    percentage: Math.floor((currentTime / this.duration) * 100),
                });
            },
            // 播放/暂停音频
            toggleTask: function () {
                this.isPause = !this.isPause;
                this.isPause ? this.player.pause() : this.player.play();
            },
            // 滑动音频
            moveTask: function (event) {
                if (!this.player || !this.player.paused) {
                    this.isPause = true;
                    this.player.pause();
                }
                this.$util.getClientRect(".progress").then(({ left, width }) => {
                    let range = Math.floor(((event.touches[0].pageX - left) / width) * 100);
                    if (range > 100) {
                        range = 100;
                    }
                    this.audioRange = range;
                });
            },
            // 滑动音频停止
            moveEndTask: function () {
                this.player.seek((this.duration * this.audioRange) / 100);
                if (this.player.paused) {
                    this.isPause = false
                    this.player.play();
                }
            },
            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);
												// this.$util.weixinAppPay(data.data.result.jsConfig,this);
                        break;
                    case "WECHAT_H5_PAY":
                        this.payDialogOpen = false;
                        this.$util.wechatH5Pay(data.data.result.jsConfig, this);
                        break;
                    case "WECHAT_ROUTINE_PAY":
                        this.$util.wechatRoutinePay(data.data.result.jsConfig, this);
                        break;
                    case "SUCCESS":
                        this.successOrder(data.msg);
                        break;
                    case "ZHIFUBAO_PAY":
                        this.aliPay(data.data.result, "special");
                        break;
                    case 'TOUTIAO_PAY':
                        this.$util.toutiaoPay(data.data.result.jsConfig, this);
                        break;
                    case 'KUAISHOU_PAY':
                        this.$util.kuaishouPay(data.data.result.jsConfig, this);
                        break
                }
            },
            aliPay(msn, type) {
                this.$util.aliPay(msn, type, this);
            },
            // 微信支付
            wechatPay: function (config) {
                console.log(config)
                this.$util.weixinpay(config, this);
            },
            // 支付成功
            successOrder: function (msg) {
                this.$util.showMsg(msg ? msg : "支付成功");
                this.singleContent.isPay = true;
                this.payDialogOpen = false;
                this.getSingleContent();
            },
            // 支付未完成
            extendOrder: function (msg) {
                if (typeof msg === "object") {
                    if (msg.errMsg === "chooseWXPay:cancel") {
                        msg = "微信支付取消";
                    } else {
                        msg = "支付失败";
                    }
                } else {
                    msg = '支付失败,' + msg;
                }
                this.$util.showMsg(msg);
                this.payDialogOpen = false;
                console.log(this.orderId)
                if (this.orderId) {
                    delSpecialOrder(this.orderId).then((res) => {
                        console.log(res);
                    });
                }
            },
        }
    };

</script>
<style>
    .player-self {
        width: 100%;
    }

    page {
        background: #F7F8F9;
    }
</style>
<style scoped lang="scss">
    .prism-player .prism-info-display {
        box-sizing: border-box;
    }

    .prism-player .prism-big-play-btn {
        bottom: 50% !important;
        left: 50% !important;
        transform: translate(-50%, 50%);
    }

    .audio-player {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .audio-player .image {
        display: block;
        width: 464rpx;
        margin: 0 auto;
        height: 160rpx;

    }

    .audio-player .control {
        display: flex;
        align-items: center;
        padding: 40rpx 30rpx 0;
    }

    .audio-player .icon {
        font-size: 64rpx;
        color: #2C8EFF;
    }

    .audio-player .timeline {
        flex: 1;
        display: flex;
        align-items: center;
        margin-left: 30rpx;
        font-size: 28rpx;
        color: #2C8EFF;
    }

    .audio-player .progress {
        flex: 1;
        height: 4rpx;
        border-radius: 2rpx;
        margin: 0 18rpx;
        background-color: rgba(44, 142, 255, 0.2);
    }

    .audio-player .inner {
        position: relative;
        width: 0;
        height: 4rpx;
        border-radius: 2rpx;
        background-color: #2C8EFF;
    }

    .audio-player .thumb {
        position: absolute;
        top: 50%;
        right: 0;
        width: 16rpx;
        height: 16rpx;
        border-radius: 50%;
        background-color: #2C8EFF;
        transform: translate(50%, -50%);
    }

    .title {
        padding: 30rpx;
        background-color: #FFFFFF;
        font-size: 36rpx;
        color: #333333;
        border-radius: 40rpx 40rpx 0 0;
        margin-top: -15px;
        position: relative;
        z-index: 9;
        font-weight: 600;
        color: #23272E;
        line-height: 52rpx;
    }

    .detail {
        padding: 30rpx;
        border-top: 14rpx solid #F5F5F5;
    }

    .detail img {
        display: block;
        width: 100%;
    }

    .cover {
        display: block;
        width: 100%;
    }

    .icon {
        /* #ifdef MP-WEIXIN */
        height: auto !important;
        /* #endif */
    }
</style>