小程序视频列表类似抖音滑动效果

首先出效果图

<login id="login" bind:onLoginSuccess="onLoginSuccess"></login>
<!-- <search class="search"></search> -->
<!--index.wxml-->
<!-- 引入.wxs文件 src为相对路径，module指定当前模块的名称 -->
<wxs module="filter" src="../../utils/returnMTime.wxs"></wxs>


<view class='container'>
    <search class="search"></search>
    <view class='tab-wrapper'>
        <view id='popularRecommendation' class='tab-left {{currentTab === 0 ? "tab-active":""}}' bindtap='switchTab'>热门推荐
            <text class="bobr"></text>
        </view>
        <view id='selectedCourse' class='tab-center {{currentTab === 1 ? "tab-active" : ""}}' bindtap='switchTab'>精选课程
            <text class="bobr"></text>
        </view>
        <view id='myCourseRack' class='tab-center {{currentTab === 2 ? "tab-active" : ""}}' bindtap='switchTab'>我的课架
            <text class="bobr"></text>
        </view>
    </view>
</view>


<view wx:if='{{currentTab === 0}}' style="padding-top: {{paddingTop}}px;" class="box">
    <view class='content-wrapper ' id="popularRecommendation">
        <swiper vertical="{{true}}" circular="{{true}}" current="{{current}}" bindanimationfinish="changeItem">
            <swiper-item item-id="{{oneItemParam.index}}">
                <video binderror="binderror" bindtimeupdate="timeupdate" show-center-play-btn="{{false}}" title="{{oneItemParam.course.title}}" id="myVideo0" bindfullscreenchange="fullScreen" src="{{oneItemParam.video.transcodeUrl}}"
                    custom-cache="{{true}}" controls="{{true}}"></video>
                <!-- 用户 -->
                <view hidden="{{isFull}}" class="user flex flex-alignItems">
                    <view class="userBox">
                        <view class="userHeadBox">
                            <image lazy-load="true" src="{{oneItemParam.merchant.head + '?x-oss-process=image/resize,w_100'}}" data-item="{{oneItemParam}}" bindtap="goUserInfoBtn" class="head"></image>
                        </view>

                        <image src="/static/img/follow@2x.png" wx:if="{{followFlag}}" data-item="{{oneItemParam}}" bindtap="followBtn" class="followBtn"></image>
                        <view wx:if="{{!followFlag}}" class="followBtnzhanwei"></view>
                        <image wx:if="{{!oneItemParam.course.thumb}}" data-item="{{oneItemParam}}" bindtap="thumbsUpBtn" src="/static/img/noThumbsUp@2x.png" class="thumbsUp" alt="未点赞"></image>
                        <image wx:if="{{oneItemParam.course.thumb}}"  data-item="{{oneItemParam}}" bindtap="thumbsUpBtn" src="/static/img/thumbsUp@2x.png" class="thumbsUp" alt="已点赞"></image>
                        <text class="thumbsUpNum">{{ oneItemParam.course.thumbCount <= 0 ? '点赞' : filter.filter.million(oneItemParam.course.thumbCount)}}</text>

                        <image wx:if="{{!oneItemParam.course.collect}}" src="/static/img/noCollection@2x.png" data-item="{{oneItemParam}}" bindtap="collectionBtn" class="CollectionBtn" alt="未收藏"></image>
                        <image wx:if="{{oneItemParam.course.collect}}"  src="/static/img/Collection@2x.png"   data-item="{{oneItemParam}}" bindtap="collectionBtn" class="CollectionBtn" alt="已收藏"></image>
                        <text class="collectionNum">{{ oneItemParam.course.collectCount <= 0 ? '收藏' : filter.filter.million(oneItemParam.course.collectCount) }}</text>

                        <image src="/static/img/share@2x.png" class="shareBtn"></image>
                        <button data-item="{{oneItemParam}}" open-type="share">1</button>
                    </view>
                </view>
                <image hidden="{{isFull}}" src="/static/img/fullScreen@2x.png" bindtap="fullBtn" class="fullScreenBtn"></image>

                <!-- 话题 描述 -->
                <view hidden="{{isFull}}" class="courseVideoInfo">
                    <view class="courseVideoInfoTop">
                        <view>
                            <view class="businessName">@ {{ oneItemParam.merchant.nick }} </view>
                            <view class="courseTitile">{{ oneItemParam.course.title }}</view>
                        </view>
                        <view wx:if="{{oneItemParam.course.remark}}" class="courseIntroduction">{{ oneItemParam.course.remark }}</view>
                    </view>
                    <view class="courseVideoInfoBottom">
                        <view wx:if="{{oneItemParam.course.cfType != 2}}" style="background: transparent; color:transparent" class="lookMoreBtn">查看更多</view>
                        <view wx:if="{{oneItemParam.course.cfType == 2}}" data-item="{{oneItemParam}}" bindtap="lookMoreBtn" class="lookMoreBtn">查看更多</view>
                    </view>
                </view>
            </swiper-item>

            <swiper-item item-id="{{twoItemParam.index}}">
                <video binderror="binderror" bindtimeupdate="timeupdate" show-center-play-btn="{{false}}" title="{{twoItemParam.course.title}}" id="myVideo1" bindfullscreenchange="fullScreen" src="{{twoItemParam.video.transcodeUrl}}"
                    custom-cache="{{true}}" controls="{{true}}"></video>
                <!-- 用户 -->
                <view hidden="{{isFull}}" class="user flex flex-alignItems">
                    <view class="userBox">
                        <view class="userHeadBox">
                            <image lazy-load="true" src="{{twoItemParam.merchant.head + '?x-oss-process=image/resize,w_100'}}" data-item="{{twoItemParam}}" bindtap="goUserInfoBtn" class="head"></image>
                        </view>

                        <image src="/static/img/follow@2x.png" wx:if="{{followFlag}}" data-item="{{twoItemParam}}" bindtap="followBtn" class="followBtn"></image>
                        <view wx:if="{{!followFlag}}" class="followBtnzhanwei"></view>
                        <image wx:if="{{!twoItemParam.course.thumb}}" data-item="{{twoItemParam}}" bindtap="thumbsUpBtn" src="/static/img/noThumbsUp@2x.png" class="thumbsUp" alt="未点赞"></image>
                        <image wx:if="{{twoItemParam.course.thumb}}"  data-item="{{twoItemParam}}" bindtap="thumbsUpBtn" src="/static/img/thumbsUp@2x.png" class="thumbsUp" alt="已点赞"></image>
                        <text class="thumbsUpNum">{{ twoItemParam.course.thumbCount <= 0 ? '点赞' : filter.filter.million(twoItemParam.course.thumbCount)}}</text>

                        <image wx:if="{{!twoItemParam.course.collect}}" src="/static/img/noCollection@2x.png" data-item="{{twoItemParam}}" bindtap="collectionBtn" class="CollectionBtn" alt="未收藏"></image>
                        <image wx:if="{{twoItemParam.course.collect}}"  src="/static/img/Collection@2x.png"   data-item="{{twoItemParam}}" bindtap="collectionBtn" class="CollectionBtn" alt="已收藏"></image>
                        <text class="collectionNum">{{ twoItemParam.course.collectCount <= 0 ? '收藏' : filter.filter.million(twoItemParam.course.collectCount) }}</text>

                        <image src="/static/img/share@2x.png" class="shareBtn"></image>
                        <button data-item="{{twoItemParam}}" open-type="share">1</button>
                    </view>
                </view>
                <image hidden="{{isFull}}" src="/static/img/fullScreen@2x.png" bindtap="fullBtn" class="fullScreenBtn"></image>

                <!-- 话题 描述 -->
                <view hidden="{{isFull}}" class="courseVideoInfo">
                    <view class="courseVideoInfoTop">
                        <view>
                            <view class="businessName">@ {{ twoItemParam.merchant.nick }} </view>
                            <view class="courseTitile">{{ twoItemParam.course.title }}</view>
                        </view>
                        <view wx:if="{{twoItemParam.course.remark}}" class="courseIntroduction">{{ twoItemParam.course.remark }}</view>
                    </view>
                    <view class="courseVideoInfoBottom">
                        <view wx:if="{{twoItemParam.course.cfType != 2}}" style="background: transparent; color:transparent" class="lookMoreBtn">查看更多</view>
                        <view wx:if="{{twoItemParam.course.cfType == 2}}" data-item="{{twoItemParam}}" bindtap="lookMoreBtn" class="lookMoreBtn">查看更多</view>
                    </view>
                </view>
            </swiper-item>

            <swiper-item item-id="{{threeItemParam.index}}">
                <video binderror="binderror" bindtimeupdate="timeupdate" show-center-play-btn="{{false}}" title="{{threeItemParam.course.title}}" id="myVideo2" bindfullscreenchange="fullScreen" src="{{threeItemParam.video.transcodeUrl}}"
                    custom-cache="{{true}}" controls="{{true}}"></video>
                <!-- 用户 -->
                <view hidden="{{isFull}}" class="user flex flex-alignItems">
                    <view class="userBox">
                        <view class="userHeadBox">
                            <image lazy-load="true" src="{{threeItemParam.merchant.head + '?x-oss-process=image/resize,w_100'}}" data-item="{{threeItemParam}}" bindtap="goUserInfoBtn" class="head"></image>
                        </view>

                        <image src="/static/img/follow@2x.png" wx:if="{{followFlag}}" data-item="{{threeItemParam}}" bindtap="followBtn" class="followBtn"></image>
                        <view wx:if="{{!followFlag}}" class="followBtnzhanwei"></view>
                        <image wx:if="{{!threeItemParam.course.thumb}}" data-item="{{threeItemParam}}" bindtap="thumbsUpBtn" src="/static/img/noThumbsUp@2x.png" class="thumbsUp" alt="未点赞"></image>
                        <image wx:if="{{threeItemParam.course.thumb}}"  data-item="{{threeItemParam}}" bindtap="thumbsUpBtn" src="/static/img/thumbsUp@2x.png" class="thumbsUp" alt="已点赞"></image>
                        <text class="thumbsUpNum">{{ threeItemParam.course.thumbCount <= 0 ? '点赞' : filter.filter.million(threeItemParam.course.thumbCount)}}</text>

                        <image wx:if="{{!threeItemParam.course.collect}}" src="/static/img/noCollection@2x.png" data-item="{{threeItemParam}}" bindtap="collectionBtn" class="CollectionBtn" alt="未收藏"></image>
                        <image wx:if="{{threeItemParam.course.collect}}"  src="/static/img/Collection@2x.png"   data-item="{{threeItemParam}}" bindtap="collectionBtn" class="CollectionBtn" alt="已收藏"></image>
                        <text class="collectionNum">{{ threeItemParam.course.collectCount <= 0 ? '收藏' : filter.filter.million(threeItemParam.course.collectCount) }}</text>

                        <image src="/static/img/share@2x.png" class="shareBtn"></image>
                        <button data-item="{{threeItemParam}}" open-type="share">1</button>
                    </view>
                </view>
                <image hidden="{{isFull}}" src="/static/img/fullScreen@2x.png" bindtap="fullBtn" class="fullScreenBtn"></image>

                <!-- 话题 描述 -->
                <view hidden="{{isFull}}" class="courseVideoInfo">
                    <view class="courseVideoInfoTop">
                        <view>
                            <view class="businessName">@ {{ threeItemParam.merchant.nick }} </view>
                            <view class="courseTitile">{{ threeItemParam.course.title }}</view>
                        </view>
                        <view wx:if="{{threeItemParam.course.remark}}" class="courseIntroduction">{{ threeItemParam.course.remark }}</view>
                    </view>
                    <view class="courseVideoInfoBottom">
                        <view wx:if="{{threeItemParam.course.cfType != 2}}" style="background: transparent; color:transparent" class="lookMoreBtn">查看更多</view>
                        <view wx:if="{{threeItemParam.course.cfType == 2}}" data-item="{{threeItemParam}}" bindtap="lookMoreBtn" class="lookMoreBtn">查看更多</view>
                    </view>
                </view>
            </swiper-item>
        </swiper>


    </view>
</view>


<view style="padding-top: {{paddingTop}}px;">
    <view class='content-wrapper' wx:if='{{currentTab === 1}}'>
        <selectedCourse id="idMainCourse" />
    </view>
    <view class='content-wrapper' wx:if='{{currentTab === 2}}'>
        <myCourseRack id="mycourse" />
    </view>
</view>

//index.js
//获取应用实例
//获取应用实例
import {
    list1,
    list2
} from './mock.js'

import inter from '../../utils/api'
const app = getApp()
let videoContext = null; //video实例
let time = null

import cryptoJs from '../../utils/crypto.js';

Page({
    properties: {
        phone: { // 属性名
            type: Number, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
            value: '' // 属性初始值（可选），如果未指定则会根据类型选择一个
        }
    },
    data: {
        currentUserId: wx.getStorageSync('userInfo').userId,
        currentTab: 0,
        paddingTop: 0,
        paddingBottom: 0,
        // -------------------------------------------------------
        courseId: 1, // 视频Id
        videoIndex: 0,
        current: 0, // 当前swiper所在的位置
        videoList: [], // 视频列表
        videoParam: {}, // 当前播放视频
        playMark: 2, // 播放开关 1是暂停 2是播放
        oneItemParam: {}, // 第一个item
        twoItemParam: {}, // 第二个item
        threeItemParam: {}, // 第一个item
        fullScreen: false,
        fullScreenId: 'myVideo0',
        isFull: false,
        height: 0,
        swiperIndex: undefined, // 播放视频的时候 的 id
        opt: undefined, // 1.收藏 2.取消收藏  后台返回数据

        followArr: [], // 关注状态数据
        followFlag: true, // 当前视频的关注状态 默认是已关注

        pageSize: 15, // 
        labelIndex: 0,
        classifyIndex: 0,
        courseId: '',

        firstLoadFlag: false,
        oneDeed: false,
        twoDeed: false,
        threeDeed: false,

        videoChangeCount: 0, // 视频划
        showLogin: false,
    },
    onShow: function () {
        if (this.data.swiperIndex) {
            this.play(this.data.swiperIndex)
        }
        if (wx.getStorageSync('needLogin')) {
            app.showLoginMask(this, '#login');
            wx.setStorageSync('needLogin', false)
        }
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {
        this.stop();
    },
    //事件处理函数
    bindViewTap: function () {
        wx.navigateTo({
            url: '../logs/logs'
        })
    },
    onLoad: function (e) {
        if (e.courseId) { // 是否有课程id
            this.setData({
                courseId: e.courseId
            })
        }
        if (e.upperId) { // 是否有上级id
            wx.setStorage({
                key: 'upperId',
                data: e.upperId,
            })
        }
        // 首页 普通模式进来 存数据
        let bindingPhoneParam = {
            upperId: e.upperId,
            courseId: e.courseId
        }
        wx.setStorageSync('bindingPhoneParam', bindingPhoneParam);
        // 首页 扫描二维码进入 情况不会出现 保留 --------- 玄
        if (e.scene && e.scene.indexOf('%2C') != -1) {
            let arr = e.scene.split('%2C');
            this.setData({
                courseId: arr[0]
            })
            // ---------------------------同上
            let bindingPhoneParam = {
                upperId: arr[1],
                courseId: arr[0]
            }
            wx.setStorageSync('bindingPhoneParam', bindingPhoneParam);
        }
        this.getPaddingTopFn();
        if (!this.data.videoList.length) {
            this.getData(true);
        }
    },
    // 获取列表数据
    getData(flag = false) {
        wx.showLoading({
            title: '请耐心等待',
        })
        let data = {
            // fil: 1,
            pageSize: this.data.pageSize,
            labelIndex: this.data.labelIndex,
            classifyIndex: this.data.classifyIndex,
        }
        if (flag) {
            data.courseId = this.data.courseId ? this.data.courseId : ''
        }
        app.apiRequest('/search/foreign/course/hotCourse', data, 'post').then(res => {
            if (res.data.code == 0) {
                let list = res.data.data.courseInfo;
                list.forEach((ele, i) => {
                    ele.video.transcodeUrl = cryptoJs.decrypt(ele.video.transcodeUrl ? ele.video.transcodeUrl : '')
                })
                this.data.videoList = this.data.videoList.concat(list);

                this.data.videoList.forEach((ele, i) => {
                    ele.index = i
                })
                this.setData({
                    // videoList: this.data.videoList,
                    classifyIndex: res.data.data.classifyIndex,
                    labelIndex: res.data.data.labelIndex,
                }, () => {
                    if (!this.data.firstLoadFlag) {
                        this.videoOnload(list[0].course); // 将第一个数据的id传入
                        if (list[0].merchant) {
                            if (app.judgeIsLogin()) {
                                this.setData({
                                    firstLoadFlag: true
                                })
                                this.getFollow(list[0].merchant.id)
                            }
                        }
                    }
                });
                wx.hideLoading();
            } else {
                wx.showToast({
                    title: res.data.code + ':' + res.data.message,
                    duration: 2000
                })
            }
        })
    },
    // 获取数据之后视频列表去播放
    videoOnload(e) {
        // 拿到当前视频的实例
        this.videoContext0 = wx.createVideoContext('myVideo0')
        // 拿到当前视频的实例
        this.videoContext1 = wx.createVideoContext('myVideo1')
        // 拿到当前视频的实例
        this.videoContext2 = wx.createVideoContext('myVideo2')
        /* 初始化页面视频id 及 视频下标 */
        this.setData({
            courseId: e.id
        })

        let videoIndex = this.data.videoList.findIndex(v => v.course.id == this.data.courseId)
        let current = videoIndex % 3;
        /* 拿到对应视频的数据 */
        // this.getVideoParam(videoIndex);
        if (current === 0) {
            this.setData({
                oneItemParam: this.data.videoList[videoIndex],
            })
        } else if (current === 1) {
            this.setData({
                twoItemParam: this.data.videoList[videoIndex],
            })
        } else if (current === 2) {
            this.setData({
                threeItemParam: this.data.videoList[videoIndex],
            })
        };
        this.tabItem(current, videoIndex); // 匹配对应数据
        this.play(videoIndex); /* 开始播放视频 */
    },
    // 切换tab栏
    switchTab(e) {
        let tab = e.currentTarget.id
        if (tab === 'popularRecommendation') {
            this.setData({
                currentTab: 0
            })
        } else if (tab === 'selectedCourse') {
            this.setData({
                currentTab: 1
            })
        } else if (tab === 'myCourseRack') {
            this.setData({
                currentTab: 2
            })
        }
    },
    // 获取顶部高度
    getPaddingTopFn() {
        let that = this;
        wx.createSelectorQuery().selectAll('.container').boundingClientRect(function (rects) {
            that.setData({
                paddingTop: rects[0].height,
                paddingBottom: app.globalData.systemInfo.statusBarHeight
            })
        }).exec();
    },
    // ----------------------------------------------------------
    /**
     *  current 变化时 修改视频容器对应的数据
     */
    changeItem(e) {
        let to = e.detail.current
        this.setData({
            fullScreenId: 'myVideo' + to,
            followFlag: true,
            oneDeed: false,
            twoDeed: false,
            threeDeed: false
        })
        let current = this.data.current; // 当前item的位置
        let swiperIndex = e.detail.current; // swiper滑到的位置
        if (current == swiperIndex) return; // 如果没有切换就不执行其他操作
        let index = e.detail.currentItemId - 0;
        /* 根据当前视图视频id拿到对应的视频列表下标 */
        this.tabItem(swiperIndex, index); // 匹配对应数据
        this.stop(); /* 销毁视频实例 */
        this.play(swiperIndex); /* 开始播放视频 */
        let videoList = JSON.parse(JSON.stringify(this.data.videoList))
        if (videoList[index].merchant) {
            if (app.judgeIsLogin()) {
                this.getFollow(videoList[index].merchant.id);
            }
        }
    },
    // 获取关注列表状态
    getFollow(id) {
        if (id == this.data.currentUserId) {
            return;
        }
        let data = {
            otherId: id,
            userId: wx.getStorageSync('userInfo').userId
        }
        app.apiRequest('/social/relation/h/relationstatus', data, 'get').then(res => {
            if (res.data.code == 0) {
                if (res.data.data[0].relation == 0) {
                    this.setData({
                        followFlag: true
                    })
                } else {
                    this.setData({
                        followFlag: false
                    })
                }
            } else {
                wx.showToast({
                    title: res.data.code + ':' + res.data.message,
                    duration: 2000
                })
            }
        })
    },
    // 根据swiperIndex videoIndex匹配对应数据
    tabItem(swiperIndex, videoIndex) {
        // console.log('swiperIndex', swiperIndex)
        // console.log('videoIndex', videoIndex)
        // 当前视频的数据列表
        let videoList = JSON.parse(JSON.stringify(this.data.videoList))
        let next = 0
        let first = 0
        /* 上一个 */
        if (videoIndex == 0) {
            first = videoList.length - 1
        } else {
            first = videoIndex - 1
        }
        /* 下一个 */
        if (videoIndex == videoList.length - 1) {
            next = videoIndex
        } else {
            next = videoIndex + 1
        }
        // console.log('swiperIndex', swiperIndex)
        this.setData({
            current: swiperIndex
        })

        if (next >= (videoList.length - 2)) {
            //popup login 
            if (!app.judgeIsLogin()) {
                app.showLoginMask(this, "#login")
                // 统计
                !app.judgeIsLogin() && wx.reportAnalytics('triggerloginlayer', {
                    triggertime: 0,
                    triggeraddress: '首页_加载更多视频',
                });
            }
        }

        /* 下一个 */
        if (videoIndex == videoList.length - 1) {
            if (!app.judgeIsLogin()) {
                next = 0
            } else {
                next = 0
                this.getData();
            }
        } else {
            next = videoIndex + 1
        }
        if (swiperIndex == 0) {
            this.setData({
                twoItemParam: videoList[next],
                threeItemParam: videoList[first]
            })
        } else if (swiperIndex == 1) {
            this.setData({
                oneItemParam: videoList[first],
                threeItemParam: videoList[next]
            })
        } else if (swiperIndex == 2) {
            this.setData({
                oneItemParam: videoList[next],
                twoItemParam: videoList[first],
            })
        }

        if (next == (videoList.length - 3) && app.judgeIsLogin()) {
            this.getData();
        }
    },
    // 播放
    play(swiperIndex) {
        let that = this;
        let index = parseInt(swiperIndex)
        this.setData({
            swiperIndex: index
        })
        switch (index) {
            case 0:
                that.videoContext0 && that.videoContext0.play()
                break;
            case 1:
                that.videoContext1 && that.videoContext1.play()
                break;
            case 2:
                that.videoContext2 && that.videoContext2.play()
                break;
            default:
        }
    },
    // 销毁视频 注意 必须在切换之前销毁
    stop() {
        this.videoContext0 && this.videoContext0.pause()
        this.videoContext1 && this.videoContext1.pause()
        this.videoContext2 && this.videoContext2.pause()
    },
    // 关注
    followBtn(e) {
        !app.judgeIsLogin() && wx.reportAnalytics('triggerloginlayer', {
            triggertime: 0,
            triggeraddress: '首页_关注',
        });
        app.checkLogin(this, "#login").then((res) => {
            if (res.code == 3) {
                let otherId = e.currentTarget.dataset.item.merchant.id;
                this.setData({
                    followFlag: false
                })
                inter.inter.followFn(otherId, 1); // 调用分享接口
            }
        })
    },
    /**视屏进入、退出全屏 */
    fullBtn(e) {
        var videoContext = wx.createVideoContext(this.data.fullScreenId, this);
        videoContext.requestFullScreen();
        this.setData({
            fullScreen: true,
            isFull: true
        })
    },
    // 监听进入全屏
    fullScreen(e) {
        if (e.detail.fullScreen) {
            this.setData({
                isFull: true
            })
        } else {
            this.setData({
                isFull: false
            })
        }
    },
    // 视频播放时长 调用户统计行为接口
    timeupdate(e) {
        let courseId = this.getVideoParam().course.id;
        var duration = e.detail.duration; // 视频总时长
        var currentTime = e.detail.currentTime; // 视频播放时长
        if (currentTime > 3 && (currentTime / duration) < 0.8 && !this.data.oneDeed) {
            inter.inter.sendDeedFn(courseId, 1);
            this.setData({
                oneDeed: true
            })
        } else if ((currentTime / duration) > 0.8 && !this.data.twoDeed) {
            inter.inter.sendDeedFn(courseId, 2);
            this.setData({
                twoDeed: true
            })
        } else if (currentTime < 3 && !this.data.threeDeed) {
            inter.inter.sendDeedFn(courseId, 3);
            this.setData({
                threeDeed: true
            })
        }
    },
    onReachBottom: function () {
        // 页面触底时执行
        if (this.data.currentTab == 1) { //精选课程 加载更多
            this.selectComponent("#idMainCourse").getData();
        } else if (this.data.currentTab == 2) { //我的课架 加载更多
            this.selectComponent("#mycourse").loadMoreData();
        }
    },
    // 查看更多
    lookMoreBtn(e) {
        let courseId = e.currentTarget.dataset.item.course.id;
        app.globalData.courseid = courseId;
        wx.navigateTo({
            url: '/pages/course/courseInfo/courseInfo?courseId=' + courseId,
        })
    },
    // 跳转个人中心
    goUserInfoBtn(e) {
        let id = e.currentTarget.dataset.item.merchant.id
        app.goUserPage(id);
    },
    // 点赞
    thumbsUpBtn(e) {
        // console.log(e); return;
        !app.judgeIsLogin() && wx.reportAnalytics('triggerloginlayer', {
            triggertime: 0,
            triggeraddress: '首页_点赞',
        });
        app.checkLogin(this, "#login").then((res) => {
            if (res.code == 3) {
                let data = {
                    objUserId: '', // 课程发布者id）
                    objId: '', // 课程：课程id）
                    objImg: '', // 课程：课程封面）
                    type: 5, //  5课程
                    status: '', // 状态：1、点赞，0、取消点赞
                }
                let str = '';
                let currentVideoParme = this.getVideoParam(); // 获取数据
                let videoParam = e.currentTarget.dataset.item;
                let index = videoParam.index; // 数据在列表中索引
                data.objUserId = videoParam.merchant.id;
                data.objId = videoParam.course.id;
                data.objImg = videoParam.course.cover;
                if (videoParam.course.thumb == false) { // 未点赞
                    data.status = 1;
                    this.data.videoList[index].course.thumb = true;
                    // this.data.videoList[index].course.thumbCount += 1;
                    currentVideoParme.course.thumb = true;
                    currentVideoParme.course.thumbCount += 1;
                    str = '点赞+1';
                } else {
                    data.status = 0;
                    this.data.videoList[index].course.thumb = false;
                    // this.data.videoList[index].course.thumbCount -= 1;
                    currentVideoParme.course.thumb = false;
                    currentVideoParme.course.thumbCount -= 1;
                    str = '点赞-1';
                }
                if (this.getVideoIndex() == 0) {
                    this.setData({
                        oneItemParam: currentVideoParme
                    })
                } else if (this.getVideoIndex() == 1) {
                    this.setData({
                        twoItemParam: currentVideoParme
                    })
                } else if (this.getVideoIndex() == 2) {
                    this.setData({
                        threeItemParam: currentVideoParme
                    })
                }
                this.setData({
                    ['videoList[' + index + ']']: this.data.videoList[index]
                })
                wx.showToast({
                    title: str,
                })
                inter.inter.thumbFn(data);
            }
        })
    },
    // 收藏
    collectionBtn(e) {
        !app.judgeIsLogin() && wx.reportAnalytics('triggerloginlayer', {
            triggertime: 0,
            triggeraddress: '首页_收藏',
        });

        app.checkLogin(this, "#login").then((res) => {
            if (res.code == 3) {
                let opt = undefined,
                    str = '';
                let currentVideoParme = this.getVideoParam(); // 获取数据
                let videoParam = e.currentTarget.dataset.item;
                let index = videoParam.index;
                let courseId = videoParam.course.id; // 课程id
                let collect = videoParam.course.collect; // 是否关注
                if (collect == false) {
                    opt = 1;
                    this.data.videoList[index].course.collect = true;
                    // this.data.videoList[index].course.collectCount += 1;
                    currentVideoParme.course.collect = true;
                    currentVideoParme.course.collectCount += 1;
                    str = '收藏成功';
                } else {
                    opt = 2;
                    this.data.videoList[index].course.collect = false;
                    // this.data.videoList[index].course.collectCount -= 1;
                    currentVideoParme.course.collect = false;
                    currentVideoParme.course.collectCount -= 1;
                    str = '取消收藏';
                }
                if (this.getVideoIndex() == 0) {
                    this.setData({
                        oneItemParam: currentVideoParme
                    })
                } else if (this.getVideoIndex() == 1) {
                    this.setData({
                        twoItemParam: currentVideoParme
                    })
                } else if (this.getVideoIndex() == 2) {
                    this.setData({
                        threeItemParam: currentVideoParme
                    })
                }
                this.setData({
                    ['videoList[' + index + ']']: this.data.videoList[index]
                })
                wx.showToast({
                    title: str,
                })
                // 修改当前数据
                inter.inter.collectFn(courseId, opt); // 调用分享接口
            }
        })
    },
    // 转发 小程序 发送给朋友
    onShareAppMessage: function (res) {
        // 统计
        // console.log(res);return;

        wx.reportAnalytics('indexrecommend_share', {});
        let videoParam = res.target.dataset.item;
        console.log(videoParam)
        let courseId = videoParam.course.id; //获取产品id
        let title = videoParam.course.title; //获取产品标题
        let cover = videoParam.video.cover; //产品图片

        let index = videoParam.index;
        this.data.videoList[index].course.shareCount += 1;
        // this.data.videoParam.course.shareCount += 1;
        // this.setData({
        //     videoParam: this.data.videoParam
        // })
        if (app.judgeIsLogin()) {
            inter.inter.shareFn(courseId); // 调用分享接口
        }
        if (res.from === 'button') {
            // 来自页面内转发按钮
            return {
                title: title,
                path: 'pages/index/index?courseId=' + courseId + '&upperId=' + wx.getStorageSync('userInfo').userId,
                imageUrl: cover, //不设置则默认为当前页面的截图
            }
        }
    },
    getVideoParam() {
        let index = this.data.fullScreenId.replace('myVideo', '');
        if (index == 0) {
            return this.data.oneItemParam;
        } else if (index == 1) {
            return this.data.twoItemParam;
        } else if (index == 2) {
            return this.data.threeItemParam;
        }
    },
    getVideoIndex() {
        let index = this.data.fullScreenId.replace('myVideo', '');
        if (index == 0) {
            return 0;
        } else if (index == 1) {
            return 1;
        } else if (index == 2) {
            return 2;
        }
    },
    // 视频播放出错时触发
    binderror(err) {
        console.log(err)
    }
})

/**index.wxss**/

.container {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    width: 100%;
    /* height: 100%; */
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background: #fafafa;
}

.tab-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 80rpx;
    background: linear-gradient(270deg, rgba(254, 115, 88, 1) 0%, rgba(235, 70, 84, 1) 100%);
}

.tab-left, .tab-center, .tab-right {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    font-size: 30rpx;
    color: rgb(255, 255, 255);
    text-align: center;
    height: 100%;
    font-weight: 600;
}

.tab-active {
    position: relative;
}

.tab-active .bobr {
    display: inline-block;
    position: absolute;
    bottom: 2rpx;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 3px;
    width: 14px;
    background-color: #fff;
    border-radius: 4px;
}

page {
    width: 100%;
    height: 100%;
}

.content-wrapper {
    width: 100%;
    height: 100%;
}

.box {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* --------------------------------------------------------------- */

/* ---------------------------------------------------------------- */

/* ---------------------------------------------------------------- */

/* pages/index/popularRecommendation/popularRecommendation  */

swiper {
    width: 100%;
    height: 100%;
    background: #000;
}

swiper video {
    width: 100%;
    height: 100%;
    display: block;
}

/**index.wxss**/

.video-box {
    width: 100%;
    height: 100%;
    transition: all 0.4s cubic-bezier(1, 1, 0, 0.42);
    transform: translate(0%, 0%);
    position: relative;
}

/* --------- :start ---------- */

.user {
    position: absolute;
    right: 30rpx;
    /* top: 472rpx; */
    top: 262rpx;
    z-index: 2;
}

.user .userBox {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 24rpx;
    color: #fff;
    font-weight: 600;
}

.user .userBox .shareBtn {
    margin: 0;
    padding: 0;
}

.user .userBox button {
    position: absolute;
    bottom: 0;
    background: transparent;
    border: none;
    color: transparent;
    opacity: 0.1;
}

.user .userBox .userHeadBox {
    width: 84rpx;
    height: 84rpx;
    border-radius: 50%;
    border: 3rpx solid #fff;
}

.user .userBox .head {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.user .userBox .followBtn {
    margin-top: -17rpx;
    width: 36rpx;
    height: 36rpx;
    border-radius: 50%;
}

.user .userBox .followBtnzhanwei {
    margin-top: -17rpx;
    width: 34rpx;
    height: 34rpx;
    border-radius: 50%;
    background: transparent;
}

.user .userBox .CollectionBtn {
    width: 72rpx;
    height: 72rpx;
    margin-top: 54rpx;
}

.user .userBox .collectionNum {
    margin-top: 10rpx;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.425);
}

.user .userBox .shareBtn {
    width: 72rpx;
    height: 72rpx;
    margin-top: 52rpx;
}

/* .user .userBox .shareNum {
    margin-top: 15rpx;
} */

.user .userBox .thumbsUp {
    width: 72rpx;
    height: 72rpx;
    margin-top: 40rpx;
}

.user .userBox .thumbsUpNum {
    margin-top: 10rpx;
    text-shadow: 1px 1px 3px #000;
}

/* --------- :end ---------- */

.fullScreenBtn {
    position: absolute;
    left: 20rpx;
    /* top: 50%; */
    top: 444rpx;
    /* transform: translate(0, -50%); */
    width: 58rpx;
    height: 58rpx;
}

/* ----------------------- */

.courseVideoInfo {
    position: absolute;
    color: #fff;
    width: 100%;
    /* height: 160rpx; */
    bottom: 110rpx;
    left: 0;
    font-size: 26rpx;
    /* z-index: 13; */
    padding-left: 20rpx;
    padding-right: 20rpx;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
}

.courseVideoInfo .courseVideoInfoTop {
    display: flex;
    flex-direction: column;
    width: 504rpx;
}

.courseVideoInfo .courseVideoInfoTop .businessName {
    font-size: 30rpx;
}

.courseVideoInfo .courseVideoInfoTop .courseTitile {
    font-size: 34rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 4rpx 0;
    font-weight: 600;
}

.courseVideoInfo .courseVideoInfoBottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* width: 100%; */
    padding-top: 11rpx;
    margin-top: 11rpx;
}

.courseVideoInfo .courseIntroduction {
    width: 504rpx;
    height: 79rpx;
    font-size: 28rpx;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #b3b3b3;
    border-top: 0.5rpx solid rgba(204, 204, 204, 0.74);
    padding-top: 5rpx;
}

.courseVideoInfo .courseVideoInfoBottom .lookMoreBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160rpx;
    height: 64rpx;
    color: #fff;
    background: rgba(255, 255, 255, 0.19);
    border-radius: 8rpx;
    margin-bottom: 15rpx;
}

.courseVideoInfo  .lookMoreBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 152rpx;
    height: 64rpx;
    color: #fff;
    background: rgba(255, 255, 255, 0.19);
    border-radius: 8rpx;
}