HKRentingMiniprogram/template/headSwiper/headSwiper.js

// template/headSwiper/headSwiper.js
var app = getApp()
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    attachment: Array,
    isInner: Number,
    pages: String
  },
  observers: {
    attachment(e) {
      this.setHeightArr();
      this.calculateimgLength();
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    swiperHeight: 0,
    isIndexPage: true,
    indicatorDots: true,
    autoplay: false,
    interval: 3000,
    duration: 500,
    circular: true,
    current: 0,
    swiperCurrent: 0,
    windowWidth: 0,
    imgUrl: [],
    heightArr: [],
    tab: 'video',
    videoLength: 0,
    imgLength: 0,
    video: '',
    screen_data: {}

  },
  lifetimes: {
    attached: function () {
      this.attachedIn()
      // this.setHeightArr()
    },
  },
  attached: function () {
    this.attachedIn()
  },
  /**
   * 组件的方法列表
   */
  methods: {
    attachedIn() {
      let that = this;
      wx.getSystemInfo({
        success: function (res) {
          that.setData({
            windowWidth: res.windowWidth,
            screen_data: app.globalData.screen_data,
          })
        }
      })
    },
    setHeightArr() {
      this.setData({
        heightArr: Array.from({
          length: this.properties.attachment.length
        }, item => {
          return 120
        })
      })
    },

    previewImg(e) {
      let that = this;
      let url = e.currentTarget.dataset.url;
      let appid = e.currentTarget.dataset.appid;
      // 判断跳转小程序
      if (appid) {
        wx.navigateToMiniProgram({
          appId: appid,
          path: url
        })
        return false;
      }

      // 判断是否是h5页面的
      if (url && url.indexOf('http') != -1) {
        wx.navigateTo({
          url: `/pages/webViewwebweb/index?url=${ url }`,
        })
        return false;
      }

      if (url) {
        wx.navigateTo({
          url: '/' + url,
        })
        return false;
      }

      if (this.properties.pages == 'apartmentDetail') {
        wx.setStorageSync('attachment', this.properties.attachment)
        wx.navigateTo({
          url: `/pages/video_show/video_show?frompage=apartment&current=${this.data.current}`
        });
        return false
      }

      if (this.data.imgUrl.length == 0) {
        let imgUrl = [];
        that.properties.attachment.map(item => {
          imgUrl.push(item.image)
        })
        that.setData({
          imgUrl: imgUrl
        })
      }
      wx.previewImage({
        current: that.data.imgUrl[that.data.current], // 当前显示图片的http链接
        urls: that.data.imgUrl // 需要预览的图片http链接列表
      })
    },
    load(e) {
      if (this.data.swiperHeight > 0) {
        return false
      }
      let index = e.currentTarget.dataset.index;
      this.setData({
        swiperHeight: this.data.windowWidth * e.detail.height / e.detail.width
      })
      return false;
      this.data.heightArr[index] = this.data.windowWidth * e.detail.height / e.detail.width
      this.setData({
        heightArr: this.data.heightArr
      })
      // console.log(this.data.heightArr)
    },
    send_form_id: function (e) {
      // console.log('formId', e.detail.formId)

      let {
        statid,
        url
      } = e.currentTarget.dataset;
      this.previewImg(e)
      // return false;
      wx.request({
        url: app.globalData.config.FormidInsert,
        data: {
          session: wx.getStorageSync('session'),
          formid: e.detail.formId,
          statid
        },
        method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
        header: app.globalData.header,
        success: function (res) {
          var data = app.return_data(res);

        }
      })
    },
    // 切换图片或视频
    changeTab(e) {
      let tab = e.currentTarget.dataset.tab;
      if (this.data.tab == tab) {
        return false
      }
      // this.data.tab = tab;
      this.setData({
        swiperCurrent: tab == 'img' ? this.data.videoLength : 0,
        current: tab == 'img' ? this.data.videoLength : 0,
        imgIndex: 0,
        videoIndex: 0,
        tab
      })
    },
    // 计算视频个数
    calculateimgLength() {
      let that = this;
      this.data.attachment.forEach(item => {
        if (item.isvideo) {
          that.data.videoLength++;
        } else {
          that.data.imgLength++;
        }
      })
      this.setData({
        videoLength: this.data.videoLength,
        imgLength: this.data.imgLength
      })
      if (this.data.current >= this.data.videoLength) {
        this.setData({
          tab: 'img',
          imgIndex: this.data.current - this.data.videoLength,

        })
      } else {
        this.setData({
          tab: 'video',
          videoIndex: this.data.current
        })
      }
    },
    bindchangeSwiper(e) {
      // console.log(e.detail.current, e.detail.source)
      let current = e.detail.current;
      if (e.detail.current >= this.data.videoLength) {
        // 显示视频
        if (this.data.tab == 'video') {
          this.setData({
            tab: 'img',
            imgIndex: 0,
          })
        } else {
          this.setData({
            imgIndex: current - this.data.videoLength
          })
        }
      } else {
        // 显示图片
        if (this.data.tab == 'img') {
          this.setData({
            tab: 'video',
            videoIndex: 0,

          })
        } else {
          this.setData({
            videoIndex: current
          })
        }
      }
      this.setData({
        current: e.detail.current,


      })
    },
    play(e) {
      // this.setData({
      //   video:e.currentTarget.dataset.video
      // })
      wx.navigateTo({
        url: '/pages/video_show/video_show?src=' + e.currentTarget.dataset.video,
      })
    },
    closePage() {
      this.setData({
        video: ''
      })
      this.triggerEvent('close', {})
    }
  }
})