jc-task-mini/pages/group-detail/group-detail.js

// pages/index/index.js
import {
    getDoneByTeam
} from '../../api/api'

Page({

    /**
     * 页面的初始数据
     */
    data: {
        tabs: ['已完成', '未完成'],
        sendList: [],
        tab: 0,
        currentPlayIndex: null,
        innerAudioContext: null,
        playTime: 0,
        timer: null,
        id: '',
        taskId: ''
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        const innerAudioContext = wx.createInnerAudioContext({
            useWebAudioImplement: true
        })

        innerAudioContext.onPlay(() => {
            console.log("play")
            this.setRowTime(this.data.playTime)
            this.setData({
                [`sendList[${this.data.currentPlayIndex}].isPlay`]: true,
            })
        })
        innerAudioContext.onSeeked(() => {
            console.log("onSeeked")
            
            if(this.data.innerAudioContext.paused) {
                if (this.data.timer) {
                    clearInterval(this.data.timer)
                }
                this.data.timer = null
                this.data.innerAudioContext.play()
            } else {
                if (this.data.timer == null) {
                    this.setRowTime(this.data.playTime)
                }
            }
        })
        innerAudioContext.onStop(() => {
            console.log("onStop")
            if (this.data.timer) {
                clearInterval(this.data.timer)
            }
            this.data.timer = null
            if (this.data.currentPlayIndex != null) {
                this.setData({
                    [`sendList[${this.data.currentPlayIndex}].time`]: '00:00',
                    [`sendList[${this.data.currentPlayIndex}].isPlay`]: false,
                    [`sendList[${this.data.currentPlayIndex}].percentage`]: 0,
                    playTime: 0,
                })
            }
        })
        innerAudioContext.onEnded(() => {
            console.log("onEnded")
            if (this.data.timer) {
                clearInterval(this.data.timer)
            }
            this.data.timer = null
            if (this.data.currentPlayIndex != null) {
                this.setData({
                    [`sendList[${this.data.currentPlayIndex}].time`]: '00:00',
                    [`sendList[${this.data.currentPlayIndex}].isPlay`]: false,
                    [`sendList[${this.data.currentPlayIndex}].percentage`]: 0,
                    playTime: 0,
                })
            }
        })
        innerAudioContext.onTimeUpdate(() => {
            this.setData({
                [`sendList[${this.data.currentPlayIndex}].percentage`]: Math.min(Math.ceil((this.data.playTime * 100000) / this.data.sendList[this.data.currentPlayIndex].duration), 100)
            })
        })

        this.data.innerAudioContext = innerAudioContext
        this.data.taskId = options.taskId
        this.data.id = options.id
        this.getData()
    },

    setRowTime(second = 0) {
        const that = this
        this.data.timer = setInterval(function () {
            second++;
            that.data.playTime += 1;
            if (that.data.playTime * 1000 >= that.data.sendList[that.data.currentPlayIndex].duration) {
                clearInterval(that.data.timer)
                that.data.timer = null
                that.data.innerAudioContext.stop()
            } else {
                const result = that.formatSeconds(second)
                that.setData({
                    [`sendList[${that.data.currentPlayIndex}].time`]: result,
                })
            }
        }, 1000)
    },

    clickHandle(e) {
        const urls = e.target.dataset.images || []
        const index = e.target.dataset.index || 0
        wx.previewImage({
            current: urls[index], // 当前显示图片的http链接
            urls, // 需要预览的图片http链接列表
        })
    },

    onTabsChange(event) {
        console.log(`Change tab, tab-panel value is ${event.detail.value}.`);
        this.setData({
            tab: event.detail.value
        })
        this.data.sendList = []
        this.data.innerAudioContext.stop()
        this.getData()
    },

    formatSeconds: function (value) {
        var theTime = parseInt(value); // 秒
        var theTime1 = 0; // 分
        var theTime2 = 0; // 小时
        if (theTime > 60) {
            theTime1 = parseInt(theTime / 60);
            theTime = parseInt(theTime % 60);
            if (theTime1 > 60) {
                theTime2 = parseInt(theTime1 / 60);
                theTime1 = parseInt(theTime1 % 60);
            }
        }
        var result = parseInt(theTime) < 10 ? '0' + parseInt(theTime) : parseInt(theTime);
        if (theTime1 > 0) {
            result = (parseInt(theTime1) < 10 ? '0' + parseInt(theTime1) : parseInt(theTime1)) + ":" + result;
        } else {
            result = "00:" + result;
        }
        if (theTime2 > 0) {
            result = (parseInt(theTime2) < 10 ? '0' + parseInt(theTime2) : parseInt(theTime2)) + ":" + result;
        } else {
            result = "00:" + result;
        }
        return result.slice(3);
    },

    innerAudioRowStart(e) {
        console.log(e.target.dataset.index)
        if (this.data.timer) {
            clearInterval(this.data.timer)
        }
        if (this.data.currentPlayIndex != null) {
            this.data.timer = null
            this.setData({
                [`sendList[${this.data.currentPlayIndex}].time`]: '00:00',
                [`sendList[${this.data.currentPlayIndex}].isPlay`]: false,
                [`sendList[${this.data.currentPlayIndex}].percentage`]: 0,
                playTime: 0,
            })
        }
        this.data.currentPlayIndex = e.target.dataset.index
        this.data.innerAudioContext.src = this.data.sendList[this.data.currentPlayIndex].playUrl
        this.data.innerAudioContext.play()
    },

    innerAudioRowStop(e) {
        console.log(e.target.dataset.index)
        this.data.currentPlayIndex = e.target.dataset.index
        this.data.innerAudioContext.stop()
    },

    handleChange(e) {
        console.log(this.data.currentPlayIndex);
        console.log(e.target.dataset.index);
        if (e.target.dataset.index != this.data.currentPlayIndex) {
            return
        }
        if (this.data.timer) {
            clearInterval(this.data.timer)
        }
        this.data.timer = null
        const second = e.detail.value * this.data.innerAudioContext.duration / 100
        this.setData({
            [`sendList[${this.data.currentPlayIndex}].time`]: this.formatSeconds(second),
            [`sendList[${this.data.currentPlayIndex}].isPlay`]: true,
            [`sendList[${this.data.currentPlayIndex}].percentage`]: e.detail.value,
            playTime: second,
        })
        this.data.innerAudioContext.seek(second)
    },

    getData() {
        const param = {
            teamId: this.data.id,
            taskId: this.data.taskId,
            jtTaskState: this.data.tab === 0 ? 2 : 1
        }
        getDoneByTeam(param).then(res => {
            const arr = []
            for (let i = 0; i < res.data.length; i++) {
                const element = res.data[i];
                const param = element.jtType == 1 ? JSON.parse(element.jtAttachment) : {}
                arr.push({
                    ...element,
                    imageUrls: element.jtAttachment ? element.jtAttachment.split(',') : [],
                    isPlay: false,
                    time: '00:00',
                    percentage: 0,
                    playUrl: param.url,
                    duration: param.duration,
                    durationTxt: this.formatSeconds(param.duration / 1000),
                })
            }
            this.setData({
                sendList: arr || []
            })
        })
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {
        if (this.data.innerAudioContext) {
            this.data.innerAudioContext.destroy()
        }
    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})