classroom-music-activation/miniprogram/pages/index/index.ts

// index.ts

import { api_shopProduct } from "../../api/login";
import { debounce } from '../../utils/util'
// 获取应用实例
const app = getApp<IAppOption>()
// pages/orders/orders.ts
Page({
  /**
   * 页面的初始数据
   */
  data: {
    imgList: [
      'https://oss.dayaedu.com/ktyq/1732585725698.png',
      'https://oss.dayaedu.com/ktyq/1732519468124.png',
      'https://oss.dayaedu.com/ktyq/1732519479416.png',
      'https://oss.dayaedu.com/ktyq/1733110029242.png',
      'https://oss.dayaedu.com/ktyq/1732519500580.png'
    ],
    goodsImgList: [
      'https://oss.dayaedu.com/ktyq/1732175006625.png',
      'https://oss.dayaedu.com/ktyq/1732175021350.png',
      'https://oss.dayaedu.com/ktyq/1732175031878.png',
      'https://oss.dayaedu.com/ktyq/1733406956046abd99e75.png',
      'https://oss.dayaedu.com/ktyq/173340695604938755d8b.png',
      'https://oss.dayaedu.com/ktyq/17333975985307c7f2bec.png'
    ],
    detailImgList: [
      {
        url: 'https://oss.dayaedu.com/ktyq/1733403675345.png',
        text: '合作学校音乐数字课堂公开课'
      },
      {
        url: 'https://oss.dayaedu.com/ktyq/1733403707851.png',
        text: '音乐课课堂器乐教学'
      },
      {
        url: 'https://oss.dayaedu.com/ktyq/1733403725644.png',
        text: '学期末汇报演出'
      }
    ],
    serviceShow: true,
    scrollTop: 0,
    current: 0,
    detailCurrent: 0,
    autoplay: false,
    interval: 5000,
    duration: 500,
    popupShow: false,
    list: [] as any,
    isOverSaled: false, // 是否所有商品都没有库存
    selected: {} as any,
    opacity: 0,
    showSelectedProduct: false, // 是否显示选中商品值
    scrolIntoViewStr: '',
    scrolIntoView: '',
    scrollDiscount: false, // 是否扣减启
    isScrollTT: false,
    scrollIntoViewType: false,
    headerHeight: 0, // 头部的高度
    initialScrollHeight: 0, // 滚动高度
    isFromPreviewImage: false,
    bannerPlay: false, // 视频是否播放
    titleControls: false, // 详情是否显示控制条
    liuControls: false, // 详情是否显示控制条
    bannerImageloaded: false, // Banner图片是否加载完成
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    // this.onInit()
  },
  onReady() {
    const that = this
    wx.createSelectorQuery().select('#scroll-header').boundingClientRect(function (rect) {
      that.setData({
        headerHeight: rect.height
      })
    }).exec();
    wx.createSelectorQuery().select('#scroll-view').boundingClientRect(function (rect) {
      // console.log(rect, 'rect')
      that.setData({
        initialScrollHeight: rect.height
      })
    }).exec();
  },
  onBannerVideoLoad() {
    this.setData({
      bannerImageloaded: true
    })
  },
  onBannerPlay() {
    const bannerVideo = wx.createVideoContext('bannerVideo')
    const titleVideo = wx.createVideoContext('titleVideo')
    const liuVideo = wx.createVideoContext('liuVideo')
    this.setData({
      bannerPlay: true
    }, () => {
      titleVideo.stop()
      bannerVideo.play()
      liuVideo.stop()
    })
  },
  onBannerVideoPlay() {
    const titleVideo = wx.createVideoContext('titleVideo')
    titleVideo.stop()
    const liuVideo = wx.createVideoContext('liuVideo')
    liuVideo.stop()
  },
  onTitlePlay() {
    const bannerVideo = wx.createVideoContext('bannerVideo')
    bannerVideo.stop()
    const liuVideo = wx.createVideoContext('liuVideo')
    liuVideo.stop()
  },
  onTItleVideoPlay() {
    const bannerVideo = wx.createVideoContext('bannerVideo')
    const titleVideo = wx.createVideoContext('titleVideo')
    const liuVideo = wx.createVideoContext('liuVideo')
    this.setData({
      titleControls: true
    }, () => {
      titleVideo.play()
      bannerVideo.stop()
      liuVideo.stop()
    })
  },
  onLiuPlay() {
    const bannerVideo = wx.createVideoContext('bannerVideo')
    bannerVideo.stop()
    const titleVideo = wx.createVideoContext('titleVideo')
    titleVideo.stop()
  },
  onLiuVideoPlay() {
    const bannerVideo = wx.createVideoContext('bannerVideo')
    const titleVideo = wx.createVideoContext('titleVideo')
    const liuVideo = wx.createVideoContext('liuVideo')
    this.setData({
      liuControls: true
    }, () => {
      liuVideo.play()
      bannerVideo.stop()
      titleVideo.stop()
    })
  },
  /**
   * 获取基础信息
   */
  async onInit() {
    try {
      const { data } = await api_shopProduct({ appId: app.globalData.appId });
      const list = data.data || []
      let selected: any = {}
      let isOverSaled = true // 是否销售完
      list.forEach((item: any) => {
        item.originalPrice = this.formatPrice(item.originalPrice, 'ALL');
        item.showSalePrice = this.formatPrice(item.salePrice, 'ALL');
        item.typeName = this.formatPeriod(item.num, item.period);
        item.discountPrice = this.formatPrice(item.originalPrice - item.salePrice, 'ALL')
        const prices: any = this.formatPrice(item.salePrice)
        item.integerPart = prices.integerPart
        item.decimalPart = prices.decimalPart
        if(item.stockNum > 0) {
          isOverSaled = false
          if( !selected.id) {
            selected = item
          }
        }
      });
      if(isOverSaled) {
        // 没有可购买商品则默认选中第一个商品
        selected = list[0]
      }

      this.setData({
        list,
        isOverSaled,
        selected
      })
    } catch(e) {
      console.log(e, 'e')
    }
  },
  // 格式化价格
  formatPrice(price: number, type?: string) {
    const amountStr = price.toFixed(2)
    const [integerPart, decimalPart] = amountStr.split('.');
    if(type === 'ALL') {
      return amountStr
    }
    return {
      integerPart,
      decimalPart
    }
  },
  // 格式化类型
  formatPeriod(num: number, type: string) {
    const template: any = {
      DAY: "天卡",
      MONTH: "月卡",
      YEAR: "年卡"
    }
    if(type === "YEAR" && num >= 99) {
      return '永久卡'
    }
    return num + template[type]
  },
  // 选择
  onSelectGoods(e: any) {
    const { dataset } = e.currentTarget
    const item = this.data.list.find((item: any) => item.id === dataset.id)
    // 判断是否有库存
    if(item.stockNum <= 0) {
      return
    }
    this.setData({
      selected: item || {}
    })
  },
  // 事件处理函数
  changeSwiper(e: any) {
    const detail = e.detail;
    if(detail.source === 'touch' || detail.source == 'autoplay') {
      this.setData({
        current: detail.current
      })
      this.onTitlePlay()
    }
  },
  changeSwiperDetail(e: any) {
    const detail = e.detail
    if(detail.source === 'touch' || detail.source == 'autoplay') {
      this.setData({
        detailCurrent: detail.current
      })
    }
  },
  isLogin() {
    // 判断是否登录
    if(!app.globalData.isLogin) {
      wx.navigateTo({
        url: '../login/login',
      })
      return false
    }
    return true
  },
  /** 我的订单 */
  onOrder() {
    // 判断是否登录
    if(!this.isLogin()) {
      return
    }
    wx.navigateTo({
      url: '../orders/orders',
    })
  },
  onBuyShop() {
    // 判断是否登录
    if(!this.isLogin()) {
      return
    }
    this.setData({
      popupShow: true,
      showSelectedProduct: true,
    })
  },
  onClose() {
    this.setData({
      popupShow: false
    })
  },
  onSubmit() {
    // 判断是否登录
    const that = this
    debounce(function () {
      if(!that.isLogin()) {
        return
      }
      let info = JSON.stringify({
        ...that.data.selected
      });
      // console.log(that.data.selected, "that.data.selected")
      info = encodeURIComponent(info);
      wx.navigateTo({
        url: `../orders/order-detail?orderInfo=${info}`,
        success: () => {
          that.setData({
            popupShow: false
          })
        }
      })
    }, 500)()
  },
  onPreivewBannerImg(e: { currentTarget: { dataset: any } }) {
    wx.previewImage({
      current: e.currentTarget.dataset.src,
      urls: this.data.imgList,
      success: () => {
        this.setData({
          isFromPreviewImage: true
        })
      }
    })
  },
  onPreivewDetailImg(e: { currentTarget: { dataset: any } }) {
    wx.previewImage({
      current: e.currentTarget.dataset.src,
      urls: ['https://oss.dayaedu.com/ktyq/1733403675345.png','https://oss.dayaedu.com/ktyq/1733403707851.png','https://oss.dayaedu.com/ktyq/1733403725644.png',
        
      ],
      success: () => {
        this.setData({
          isFromPreviewImage: true
        })
      }
    })
  },
  onPreivewGoodsImg(e: { currentTarget: { dataset: any } }) {
    wx.previewImage({
      current: e.currentTarget.dataset.src,
      urls: this.data.goodsImgList,
      success: () => {
        this.setData({
          isFromPreviewImage: true
        })
      }
    })
  },
  onPreivewGoods(e: { currentTarget: { dataset: any } }) {
    wx.previewImage({
      current: e.currentTarget.dataset.src,
      urls: [e.currentTarget.dataset.src],
      success: () => {
        this.setData({
          isFromPreviewImage: true
        })
      }
    })
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    if(!this.data.isFromPreviewImage) {
      this.onInit()
    } else {
      this.setData({
        isFromPreviewImage: false
      })
    }
    this.setData({
      serviceShow: true
    })
  },
  onHide() {
    this.setData({
      serviceShow: false
    })
  },
  // 页面滚动时颜色变化
  onScrollView(e: { detail: any }) {
    const top = e.detail.scrollTop || 0 
    const scrollHeight =  e.detail.scrollHeight || 0
    // 从100开始显示
    // console.log(top, scrollHeight, this.data.initialScrollHeight, '121121221')
    
    this.setData({
      // opacity: top < 100 ? 0 : (top - 100) > 150 ? 1 : (top - 100) / 150
      opacity: top < 100 ? 0 : (top - 100) > 150 ? 1 : 1
    })
    if (top + this.data.initialScrollHeight >= scrollHeight - 80) {
      // console.log('已经滑动到底部了');
      // 相应业务逻辑处理
      this.setData({
        scrolIntoViewStr: 'type2'
      })
    } else {
      if(this.data.scrollIntoViewType) {
        this.setData({
          scrollTop: this.data.scrollDiscount ? top - this.data.headerHeight : top,
          scrollIntoViewType: false,
          scrollDiscount: false,
          isScrollTT: true,
        })
      } else {
        if(!this.data.isScrollTT) {
          this.onChangeScroll()
        } else {
          this.setData({
            isScrollTT: false,
          })
        }
      }
    }
  },
  onChangeScroll() {
    const that = this;
    debounce(function() {
      wx.createSelectorQuery().select('#type3').boundingClientRect(function (rect) {
        let check = false
        if(rect.top > 0 && (rect.top <= that.data.headerHeight )) {
          that.setData({
            scrolIntoViewStr: 'type3',
          })
          check = true
        }
        if(rect.top > 0 && rect.top > that.data.headerHeight) {
          that.setData({
            scrolIntoViewStr: 'type1'
          })
          check = true
        }
        // console.log('checked', check)
        if(!check) {
          wx.createSelectorQuery().select('#type2').boundingClientRect(function (rect) {
            if(rect.top > 0 && rect.top <= that.data.headerHeight) {
              that.setData({
                scrolIntoViewStr: 'type2'
              }) 
            }
            if(rect.top > 0 && rect.top > that.data.headerHeight) {
              that.setData({
                scrolIntoViewStr: 'type3'
              }) 
            }
          }).exec();
        }
      }).exec();
      
    }, 100)()
  },
  onTapAnchor(e: { currentTarget: { dataset: any } }) {
    const type = e.currentTarget.dataset.type
    this.setData({
      scrolIntoView: type,
      scrolIntoViewStr: type,
      scrollDiscount: true, // type !== 'type2' ? true : false,
      scrollIntoViewType: true,
    })
  },
  onShareAppMessage() {
    return {
      title: '音乐数字AI',
      path: '/pages/index/index',
      imageUrl: 'https://oss.dayaedu.com/ktyq/1733309357691.png'
    }
  },
  onShareTimeline() {
    return {
      title: '音乐数字AI',
      path: '/pages/index/index',
      imageUrl: 'https://oss.dayaedu.com/ktyq/1733309357691.png'
    }
  }
  // onLookMore() {
  //   this.setData({
  //     popupShow: true
  //   })
  // }
})