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

// pages/detail/detail.js
import {
    getTaskById,
    statistics,
    getDoneByTeam,
    saveTaskDone,
    getTaskDoneById
} from '../../api/api'
const app = getApp();
Page({

    /**
     * 页面的初始数据
     */
    data: {
        tabs: ['已完成', '未完成'],
        tabs2: [{
            label: '音频录制',
            value: 0
        }, {
            label: '上传图片',
            value: 1
        }],
        sendList: [],
        feedback: 2,
        remark: '',
        tab: 0,
        tab2: 0,
        fileList: [],
        task: {},
        taskDone: {},
        imageList: [],
        completionRate: [],
        calcTotal: 0,
        calcFinish: 0,
        calcFinishRate: 0,
        user: {},
        id: '',
        taskDoneId: '',
        isSubmit: false,
        recorderState: 0,
        time: '00:00',
        timer: null,
        duration: 0,
        durationTxt: '00:00',
        playTime: 0,
        isPlay: false,
        isRowPlay: false,
        percentage: 0,
        recorderManager: null,
        recorderUrl: '',
        innerAudioContext: null,
        currentPlayIndex: null
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        console.log(options)
        this.setData({
            user: app.globalData.currentUser,
            isSubmit: options.isSubmit == '1'
        })
        console.log(app.globalData.currentUser)
        const role = app.globalData.currentUser.jtRoleCode
        if (role != 'admin') {
            const recorderManager = wx.getRecorderManager()
            recorderManager.onStart(() => {
                console.log('recorder start')
                if (this.data.timer) {
                    clearInterval(this.data.timer)
                }
                this.data.timer = null
                this.setData({
                    recorderState: 1,
                    percentage: 0,
                    time: '00:00'
                })
                this.innerAudioStop()
                this.setTime()
            })
            recorderManager.onInterruptionEnd((res) => {
                console.log("onInterruptionEnd", res)
            })
            recorderManager.onInterruptionBegin((res) => {
                console.log("onInterruptionBegin", res)
            })
            recorderManager.onError((res) => {
                console.log("onError", res)
            })
            recorderManager.onPause((res) => {
                console.log("onPause", res)
                recorderManager.resume()
            })
            recorderManager.onResume((res) => {
                console.log("onResume", res)
            })
            recorderManager.onStop((res) => {
                if (this.data.timer) {
                    clearInterval(this.data.timer)
                }
                console.log('recorder stop', res)
                const {
                    tempFilePath,
                    duration
                } = res
                this.data.timer = null
                this.setData({
                    time: '00:00',
                    duration,
                    playTime: 0,
                    durationTxt: this.formatSeconds(duration / 1000),
                    recorderState: 2
                })
                wx.uploadFile({
                    url: 'https://task.51jingcheng.com/oss/imgUpload', // 仅为示例，非真实的接口地址
                    filePath: tempFilePath,
                    name: 'file',
                    success: (res) => {
                        console.log(res.data)
                        const result = res.data ? JSON.parse(res.data) : {
                            url: ''
                        }
                        this.setData({
                            recorderUrl: result.url,
                        });
                    },
                });

            })
            this.data.recorderManager = recorderManager
        
            const innerAudioContext = wx.createInnerAudioContext({
                useWebAudioImplement: true
            })

            innerAudioContext.onPlay(() => {
                if (!this.data.isRowPlay) {
                    const time = this.data.playTime
                    this.setTime(true, time)
                    this.setData({
                        isPlay: true
                    })
                } else {
                    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) {
                        if (!this.data.isRowPlay) {
                            this.setTime(true, this.data.playTime)
                        } else {
                            this.setRowTime(this.data.playTime)
                        }
                    }
                }
            })
            innerAudioContext.onTimeUpdate(() => {
                if (!this.data.isRowPlay) {
                    this.setData({
                        percentage: Math.min(Math.ceil((this.data.playTime * 100000) / this.data.duration), 100)
                    })
                } else {
                    this.setData({
                        [`sendList[${this.data.currentPlayIndex}].percentage`]: Math.min(Math.ceil((this.data.playTime * 100000) / this.data.sendList[this.data.currentPlayIndex].duration), 100)
                    })
                }
            })

            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,
                    })
                }
                this.setData({
                    time: '00:00',
                    isPlay: false,
                    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,
                    })
                }
                this.setData({
                    time: '00:00',
                    isPlay: false,
                    playTime: 0
                })
            })

            this.data.innerAudioContext = innerAudioContext
        }

        if (options.taskDoneId != 'null') {
            this.data.taskDoneId = options.taskDoneId
            getTaskDoneById({
                id: options.taskDoneId
            }).then(res => {
                const param = !this.data.isSubmit && res.data.jtType == 1 ? JSON.parse(res.data.jtAttachment) : {}
                this.setData({
                    taskDone: {
                        ...res.data,
                        imageUrls: res.data.jtAttachment.split(','),
                    },
                    duration: param.duration,
                    durationTxt: this.formatSeconds(param.duration / 1000),
                })
            })
        }

        if (options.id) {
            this.data.id = options.id
            getTaskById({
                id: options.id
            }).then(res => {
                const arr = res.data.completionMethod == 1 ? [{
                    label: '音频录制',
                    value: 0
                }] : res.data.completionMethod == 2 ? [{
                    label: '上传图片',
                    value: 1
                }] : [{
                    label: '音频录制',
                    value: 0
                }, {
                    label: '上传图片',
                    value: 1
                }]
                this.setData({
                    tabs2: arr,
                    tab2: res.data.completionMethod == 2 ? 1 : 0,
                    task: res.data,
                    imageList: res.data.jtTaskAttachment ? res.data.jtTaskAttachment.split(',') : [],
                })
            })
            if (role == 'admin') {
                statistics({
                    id: options.id
                }).then(res => {
                    console.log(res.data)
                    const arr = []
                    let calcTotal = 0;
                    let calcFinish = 0;
                    for (let i = 0; i < res.data.length; i++) {
                        const element = res.data[i];
                        calcTotal += element.totalCount
                        calcFinish += element.finishCount
                        arr.push({
                            ...element,
                            incomplete: element.totalCount - element.finishCount,
                            completionRate: ((element.finishCount / element.totalCount) * 100).toFixed(2)
                        })
                    }
                    this.setData({
                        completionRate: arr,
                        calcFinish,
                        calcTotal,
                        calcFinishRate: ((calcFinish / calcTotal) * 100).toFixed(2)
                    })
                })
            } else if (role == 'leader') {
                this.getTeamInfo()
            }
        }
    },

    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);
    },

    recorderStop() {
        this.data.recorderManager.stop()
    },

    innerAudioRowStart(e) {
        console.log(e.target.dataset.index)
        this.data.isRowPlay = true
        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()
    },

    innerAudioStart() {
        this.data.isRowPlay = false
        const param = this.data.isSubmit ? {} : JSON.parse(this.data.taskDone.jtAttachment)
        this.data.innerAudioContext.src = this.data.isSubmit ? this.data.recorderUrl : param.url
        this.data.innerAudioContext.play()
    },

    innerAudioStop() {
        this.data.innerAudioContext.stop()
    },

    innerAudioPause() {
        if (this.data.timer) {
            clearInterval(this.data.timer)
        }
        this.setData({
            isPlay: false
        })
        this.data.innerAudioContext.pause()
    },

    recorderStart() {
        const options = {
            sampleRate: 44100,
            numberOfChannels: 1,
            encodeBitRate: 192000,
            format: 'aac',
            frameSize: 50
        }
        console.log(11)

        this.data.recorderManager.start(options)
    },

    setTime(isPlay = false, second = 0) {
        const that = this
        this.data.timer = setInterval(function () {
            second++;
            that.data.playTime += 1;
            if ((!isPlay && second >= 600)) {
                clearInterval(that.data.timer)
                that.recorderStop()
            } else if (isPlay && that.data.playTime * 1000 >= that.data.duration) {
                clearInterval(that.data.timer)
                that.innerAudioStop()
            } else {
                const result = that.formatSeconds(second)
                that.setData({
                    time: result
                })
            }
        }, 1000)
    },

    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)
    },

    onChange(event) {
        const {
            value
        } = event.detail;

        this.setData({
            feedback: value
        });
    },

    submit() {
        if (this.data.tab2 === 1 && this.data.fileList.length === 0) {
            wx.showToast({
                icon: 'none',
                title: '请上传图片',
            })
            return
        }
        if (this.data.tab2 === 0 && (!this.data.recorderUrl || this.data.recorderState != 2)) {
            wx.showToast({
                icon: 'none',
                title: '请先完成录制',
            })
            return
        }
        const imageUrls = this.data.fileList.map(e => e.url).join(',')
        const param = {
            id: this.data.taskDoneId,
            jtTaskId: this.data.id,
            jtType: this.data.tab2 === 1 ? 2 : 1,
            feedback: this.data.feedback,
            remark: this.data.remark,
            jtAttachment: this.data.tab2 === 1 ? imageUrls : JSON.stringify({
                duration: this.data.duration,
                url: this.data.recorderUrl
            })
        }
        saveTaskDone(param).then(res => {
            wx.showToast({
                icon: 'none',
                title: '提交成功',
            }).then(res => {
                wx.navigateBack()
            })
        })
    },

    handleSliderRowChange(e) {
        if (e.target.dataset.index != this.data.currentPlayIndex || !this.data.isRowPlay) {
            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)
    },

    handleSliderChange(e) {
        if (this.data.isRowPlay) {
            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({
            time: this.formatSeconds(second),
            isPlay: true,
            percentage: e.detail.value,
            playTime: second,
        })
        this.data.innerAudioContext.seek(second)
    },

    handleChange(e) {
        this.setData({
            remark: e.detail.value
        })
    },

    getTeamInfo() {
        const param = {
            teamId: app.globalData.currentUser.jtTeamId,
            taskId: this.data.id,
            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 || []
            })
        })
    },

    handleAdd(e) {
        const {
            fileList
        } = this.data;
        const {
            files
        } = e.detail;

        // 方法2：每次选择图片都上传，展示每次上传图片的进度
        files.forEach(file => this.onUpload(file))
    },
    onUpload(file) {
        const {
            fileList
        } = this.data;

        this.setData({
            fileList: [...fileList, {
                ...file,
                status: 'loading'
            }],
        });
        const {
            length
        } = fileList;

        const task = wx.uploadFile({
            url: 'https://task.51jingcheng.com/oss/imgUpload', // 仅为示例，非真实的接口地址
            filePath: file.url,
            name: 'file',
            success: (res) => {
                console.log(res.data)
                const result = res.data ? JSON.parse(res.data) : {
                    url: ''
                }
                this.setData({
                    [`fileList[${length}].status`]: 'done',
                    [`fileList[${length}].url`]: result.url,
                });
            },
        });
        task.onProgressUpdate((res) => {
            this.setData({
                [`fileList[${length}].percent`]: res.progress,
            });
        });
    },
    handleRemove(e) {
        const {
            index
        } = e.detail;
        const {
            fileList
        } = this.data;

        fileList.splice(index, 1);
        this.setData({
            fileList,
        });
    },

    clickHandle(e) {
        const urls = e.target.dataset.images || []
        const index = e.target.dataset.index || 0
        console.log(urls)
        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
        })
        if (this.data.currentPlayIndex != null) {
            if (this.data.timer) {
                clearInterval(this.data.timer)
            }
            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.sendList = []
        this.getTeamInfo()
    },
    onTabs2Change(event) {
        console.log(`Change tab, tab-panel value is ${event.detail.value}.`);
        this.setData({
            tab2: event.detail.value
        })
    },

    goDetail(e) {
        if (e.currentTarget.dataset.id) {
            wx.navigateTo({
                url: '/pages/group-detail/group-detail?id='+e.currentTarget.dataset.id+"&taskId="+this.data.id,
            })
        }
    },

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

    },

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

    },

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

    },

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

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

    },

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

    },

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

    }
})