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'
      // 'https://oss.dayaedu.com/ktyq/1732174025169.png',
      // 'https://oss.dayaedu.com/ktyq/1732501351014.png',
      // 'https://oss.dayaedu.com/ktyq/1732174043543.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/1732617269723.png',
      'https://oss.dayaedu.com/ktyq/1732617388991.png'
    ],
    serviceShow: true,
    scrollTop: 0,
    current: 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,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  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();
  },
  /**
   * 获取基础信息
   */
  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
      })
    }
  },
  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}`,
      })
      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
        })
      }
    })
  },
  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
    })
  },
  // onReady() {
  //   const scrollView = this.selectComponent('#scrollarea');
  //   console.log(scrollView, 'scrollView')
  // },
  // 页面滚动时颜色变化
  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('#type2').boundingClientRect(function (rect) {
        if(rect.top > 0 &&  rect.top <= that.data.headerHeight) {
          that.setData({
            scrolIntoViewStr: 'type2'
          })
        }
      }).exec();
      wx.createSelectorQuery().select('#type3').boundingClientRect(function (rect) {
        if(rect.top > 0 &&  rect.top <= that.data.headerHeight) {
         that.setData({
           scrolIntoViewStr: 'type3',
         })
        }
        if(rect.top > 0 && rect.top > that.data.headerHeight) {
          that.setData({
            scrolIntoViewStr: 'type1'
          })
        }
      }).exec();
    }, 100)()
  },
  onTapAnchor(e: { currentTarget: { dataset: any } }) {
    const type = e.currentTarget.dataset.type
    this.setData({
      scrolIntoView: type,
      scrolIntoViewStr: type,
      scrollDiscount: type !== 'type2' ? true : false,
      scrollIntoViewType: true,
    })
  },
  // onLookMore() {
  //   this.setData({
  //     popupShow: true
  //   })
  // }
})