yelaixiang/pages/index/exhibitDetails/details.js

import { exhibitsDetails,addCollect,ifCollect,deleteCollect,voiceNumber } from "../../api/index"
const App = getApp();
const innerAudioContext = wx.createInnerAudioContext();
let audioContext = null;
import { Router } from "../../../utils/common.js";
let currentIndex = 0;
Page({
  data: {
    navTop:App.globalData.navTop,
    exhibitsDetails:'',
    ifcollect:true,
    collectId:'',
    imgNull:true,
    videoNull:true,
    threeNull:true,
    audioSrc:'',
    audioName:'',
    isPlayAudio: false,
    audioSeek: 0,
    audioDuration: 0,
    showTime1: '00:00',
    showTime2: '00:00',
    audioTime: 0,
    ifShow:false,
    indicatorDots: true,
    autoplay: false,
    interval: 3000,
    duration: 500,
    voiceNull:false,
    voiceUrl:'',
    voiceName:'',
    isDisabled: false,
    visible:false,
    imgheight:App.globalData.screenHeight,
  },
  imgBig(event){
    const imgsurl = event.currentTarget.dataset.url;
    this.setData({
        visible:true,
        imgsUrl:imgsurl
    })
  },
  showBanner(e){
    const current = e.currentTarget.dataset.url
    const urls = []
    this.data.exhibitsDetails.imgUrl.forEach(element => {
        console.log(element.url)
        urls.push(element.url)
    });
    wx.previewImage({
        current: current, // 当前显示图片的http链接
        urls: urls // 需要预览的图片http链接列表
    })
  },
  dialogHide(){
    this.setData({
        visible:false
    })
  },
  navigateBack: function () {
    wx.navigateBack()
    innerAudioContext.pause();
  },
  collect(){
    let exhibits_id = wx.getStorageSync('exhibits_id');
    addCollect({
        'exhibitsId':exhibits_id
    }).then(res=>{
        console.log(res,"操作成功")
        wx.showToast({
            title: '收藏成功',
            icon: 'success', // 提示图标，可选值：success/loading/none
            duration: 2000, // 提示框显示时间，单位为毫秒
            mask: true // 是否显示透明蒙层，防止触摸穿透，默认为false
        });
        this.ifCollect()
    })
  },
  nocollect(){
    deleteCollect(this.data.collectId).then(res=>{ 
        wx.showToast({
            title: '取消收藏',
            icon: 'none', // 提示图标，可选值：success/loading/none
            duration: 2000, // 提示框显示时间，单位为毫秒
            mask: true // 是否显示透明蒙层，防止触摸穿透，默认为false
        });
        this.ifCollect()
    })
  },
  getExhibitsDetails(){
    let exhibits_id = wx.getStorageSync('exhibits_id');
    exhibitsDetails(exhibits_id).then(res =>{
        // imgNull
        console.log(res.data.data,"展品详情")
        if(res.data.data.imgUrl.length === 0){
            this.setData({
                imgNull:false
            })
        }
        if(res.data.data.videoUrl.length === 0){
            this.setData({
                videoNull:false
            })
        }
        if( res.data.data.modelUrl.length != 0){
            const suffix = res.data.data.modelUrl[0].url.substring(res.data.data.modelUrl[0].url.lastIndexOf('.') + 1)
            console.log(suffix)
            if(suffix === "gltf"){
                this.setData({
                    threeNull:false
                })
            }else{
                this.setData({
                    threeNull:true
                })
            }
        }else{
            this.setData({
                threeNull:false
            })
        }
        
        console.log(res.data.data.modelUrl)
        
        if(res.data.data.voiceUrl.length == 0){
            console.log(res.data.data.voiceUrl)
        }else{
            this.setData({
                voiceurl:res.data.data.voiceUrl[0].url,
                voiceName:res.data.data.voiceUrl[0].fileName
            })
        }
        this.setData({
            exhibitsDetails:res.data.data,
            
        })
        if(this.data.exhibitsDetails.imgUrl.length < 2){
            this.setData({
                ifcollect:false,
            })
        }
        console.log(this.data.exhibitsDetails.imgUrl.length,"imgurl")
    })
  },
  ifCollect(){
    ifCollect({
        exhibitsId:wx.getStorageSync('exhibits_id')
    }).then(res=>{
        // console.log(res.data,"是否收藏")
        if(res.data.data){
            this.setData({
                ifcollect:false,
                collectId:res.data.data.id
            })
        }else{
            this.setData({
                ifcollect:true
            })
        }
        
    })
  },
  onLoad(options) {
  },
  onShow:function(){
    this.getExhibitsDetails()
    this.ifCollect()
  },
  //初始化播放器，获取duration
  Initialization(){
    var t=this;
    if (this.data.audioSrc.length != 0) {
      //设置src
      innerAudioContext.src = this.data.audioSrc;
      //运行一次
      innerAudioContext.play();
      innerAudioContext.pause();
      innerAudioContext.onCanplay(() => {
        //初始化duration
        innerAudioContext.duration
        setTimeout(function () {
          //延时获取音频真正的duration
          var duration = innerAudioContext.duration;
          var min = parseInt(duration / 60);
          var sec = parseInt(duration % 60);
          if (min.toString().length == 1) {
            min = `0${min}`;
          }
          if (sec.toString().length == 1) {
            sec = `0${sec}`;
          }
          t.setData({ audioDuration: innerAudioContext.duration, showTime2: `${min}:${sec}` });
        }, 1000)
      })
    }
  },
  //拖动进度条事件
  sliderChange(e) {
    var that = this;
    innerAudioContext.src = this.data.audioSrc;
    //获取进度条百分比
    var value = e.detail.value;
    this.setData({ audioTime: value });
    var duration = this.data.audioDuration;
    //根据进度条百分比及歌曲总时间，计算拖动位置的时间
    value = parseInt(value * duration / 100);
    //更改状态
    this.setData({ audioSeek: value, isPlayAudio: true });
    //调用seek方法跳转歌曲时间
    innerAudioContext.seek(value);
    //播放歌曲
    innerAudioContext.play();
  }, 
  //播放、暂停按钮
  playAudio() {
    //获取播放状态和当前播放时间
    var isPlayAudio = this.data.isPlayAudio;
    var seek = this.data.audioSeek;
    innerAudioContext.pause();
    //更改播放状态
    this.setData({ isPlayAudio: !isPlayAudio })
    if (isPlayAudio) {
      //如果在播放则记录播放的时间seek，暂停
      this.setData({ audioSeek: innerAudioContext.currentTime });
    } else {
      //如果在暂停，获取播放时间并继续播放
      innerAudioContext.src = this.data.audioSrc;
      if (innerAudioContext.duration != 0) {
        this.setData({ audioDuration: innerAudioContext.duration });
      }
      //跳转到指定时间播放
      innerAudioContext.seek(seek);
      innerAudioContext.play();
    }
    let exhibits_id = wx.getStorageSync('exhibits_id');
    var exhibition_id = wx.getStorageSync('exhibition_id')
    voiceNumber({
        exhibitionId:exhibition_id,
        exhibits:exhibits_id
    }).then(res =>{
        console.log(res,"语音播放次数")
    })
  },
  loadaudio() {
    var that = this;
    //设置一个计步器
    this.data.durationIntval = setInterval(function () {
      //当歌曲在播放时执行
      if (that.data.isPlayAudio == true) {
        //获取歌曲的播放时间，进度百分比
        var seek = that.data.audioSeek;
        var duration = innerAudioContext.duration;
        var time = that.data.audioTime;
        time = parseInt(100 * seek / duration);
        //当歌曲在播放时，每隔一秒歌曲播放时间+1，并计算分钟数与秒数
        var min = parseInt((seek + 1) / 60);
        var sec = parseInt((seek + 1) % 60);
        //填充字符串，使3:1这种呈现出 03：01 的样式
        if (min.toString().length == 1) {
          min = `0${min}`;
        }
        if (sec.toString().length == 1) {
          sec = `0${sec}`;
        }
        var min1 = parseInt(duration / 60);
        var sec1 = parseInt(duration % 60);
        if (min1.toString().length == 1) {
          min1 = `0${min1}`;
        }
        if (sec1.toString().length == 1) {
          sec1 = `0${sec1}`;
        }
        //当进度条完成，停止播放，并重设播放时间和进度条
        if (time >= 100) {
          innerAudioContext.stop();
          that.setData({ audioSeek: 0, audioTime: 0, audioDuration: duration, isPlayAudio: false, showTime1: `00:00` });
          return false;
        }
        //正常播放，更改进度信息，更改播放时间信息
        that.setData({ audioSeek: seek + 1, audioTime: time, audioDuration: duration, showTime1: `${min}:${sec}`, showTime2: `${min1}:${sec1}` });
      }
    }, 1000);
  },
  onUnload:function(){
    //卸载页面，清除计步器
    clearInterval(this.data.durationIntval);
  },
  closeMusic(){
    innerAudioContext.pause();
    clearInterval(this.data.durationIntval);
    this.setData({
        ifShow:false
    })
  },
  markClick(e){
    clearInterval(this.data.durationIntval);
    if(e.currentTarget.dataset.music){
        this.Initialization();
        this.setData({
            ifShow:true,
            audioSrc:e.currentTarget.dataset.music.url,
            audioName:e.currentTarget.dataset.music.fileName,
            isPlayAudio:true,
            audioSeek: 0,
            audioDuration: 0,
            showTime1: '00:00',
            showTime2: '00:00',
            audioTime: 0,
        })
        innerAudioContext.src = e.currentTarget.dataset.music.url;
        this.loadaudio();
        innerAudioContext.play();
    }else{
        innerAudioContext.pause();
        wx.showToast({
            title: '没有音频！',
            icon: 'none',
            duration: 2000
        });
        this.setData({
            ifShow:false,
        })
    }
    
  },
  voiceAudio(e){
    clearInterval(this.data.durationIntval);
    console.log(this.data.voiceurl,"voiceUrlvoiceUrlvoiceUrlvoiceUrl")
    if(this.data.voiceurl){
        this.Initialization();
        this.setData({
            ifShow:true,
            audioSrc:this.data.voiceurl,
            audioName:this.data.voiceName,
            isPlayAudio:true,
            audioSeek: 0,
            audioDuration: 0,
            showTime1: '00:00',
            showTime2: '00:00',
            audioTime: 0,
        })
        innerAudioContext.src = this.data.voiceurl;
        this.loadaudio();
        innerAudioContext.play();
    }else{
        innerAudioContext.pause();
        wx.showToast({
            title: '没有音频！',
            icon: 'none',
            duration: 2000
        });
        this.setData({
            ifShow:false,
        })
    }
  },
    //  跳转图片视频
    goimg:function(event){
        Router.navigateTo("../../index/exhibitDetails/imgList/list");
    },
    govideo:function(event){
        Router.navigateTo("../../index/exhibitDetails/videoList/list");
    },
    // 3d
    threeD:function(){
        Router.navigateTo("../../index/exhibitDetails/threeD/threeD");
    },
})