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

// index.ts

import { api_shopInstruments, api_shopProduct } from "../../api/login";
import { api_getOpenId, api_trackPointLog } from "../../api/new";
import { debounce, formatPrice, formatTime } 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/1733449062928.png",
      "https://oss.dayaedu.com/ktyq/1733449075055.png",
      "https://oss.dayaedu.com/ktyq/1733449085983.png",
      "https://oss.dayaedu.com/ktyq/1733449097054.png",
    ],
    goodsImgList: [
      "https://oss.dayaedu.com/ktyq/1739353790443.png",
      "https://oss.dayaedu.com/ktyq/1739353815962.png",
      "https://oss.dayaedu.com/ktyq/1739353843494.png",
      "https://oss.dayaedu.com/ktyq/03/1772550951364.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,
    videoHeight: "255px",
    list: [] as any,
    instrumentList: [] as any,
    isOverSaled: false, // 是否所有商品都没有库存
    selected: {} as any,
    selectInstrumentId: '', // 选中的乐器
    selectedInstrument: {} as any,
    formatSelectGood: {
      typeName: '',
      showSalePrice: '', // 显示的现价
      originalPrice: 0, // 原价
      salePrice: 0, // 现价
      discountPrice: '' // 已省
    } 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 图片是否加载完成
    userTypes: 'teacher', // 用户类型：student | teacher
    periodList: [
      { label: '7 天', value: '7DAY', disabled: false },
      { label: '14 天', value: '14DAY', disabled: false },
      { label: '1 个月', value: '1MONTH', disabled: false },
      { label: '6 个月', value: '6MONTH', disabled: false },
      { label: '1 年', value: '1YEAR', disabled: false }
    ],
    selectedPeriod: '14DAY', // 选中的期限
    showBonusGift: false, // 是否显示额外赠送
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    // this.onInit()
    const wxWindowInfo = wx.getWindowInfo();
    this.setData({
      videoHeight: (wxWindowInfo.windowWidth / 16) * 9 + "px",
    });

    // 首页进入页面埋点
    this.onHomePageTrackPoint()
  },
  onHomePageTrackPoint() {
    // openId
    const openId = wx.getStorageSync("openId")
    if(openId) {
      this.onTrackPoint({
        openId,
        elementName: '首页'
      })
    } else {
      wx.login({
        success: async (res) => {
          await api_getOpenId({
            code: res.code,
            appId: app.globalData.appId
          }).then((res: any) => {
            // 存储 openId
            const openId = res.data.data
            wx.setStorageSync("openId", openId);

            this.onTrackPoint({
              openId,
              elementName: '首页'
            })
          })
        }
      })
    }
  },
  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");
    //
    this.setData(
      {
        bannerPlay: true,
      },
      () => {
        bannerVideo.play();
        titleVideo.pause();
        // liuVideo.stop()
      }
    );
  },
  onBannerVideoPlay() {
    const titleVideo = wx.createVideoContext("titleVideo");
    titleVideo.pause();
    // const liuVideo = wx.createVideoContext('liuVideo')
    // liuVideo.stop()
  },
  onTitlePlay() {
    const bannerVideo = wx.createVideoContext("bannerVideo");
    bannerVideo.pause();
    // 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.pause();
        // liuVideo.stop()
      }
    );
  },
  onLiuPlay() {
    const bannerVideo = wx.createVideoContext("bannerVideo");
    bannerVideo.pause();
    const titleVideo = wx.createVideoContext("titleVideo");
    titleVideo.pause();
  },
  onLiuVideoPlay() {
    const bannerVideo = wx.createVideoContext("bannerVideo");
    const titleVideo = wx.createVideoContext("titleVideo");
    // const liuVideo = wx.createVideoContext('liuVideo')
    bannerVideo.pause();
    titleVideo.pause();
    this.setData(
      {
        liuControls: true,
      },
      () => {
        // liuVideo.play()
      }
    );
  },
  /**
   * 获取基础信息
   */
  async onInit() {
    try {
      const result = await api_shopInstruments({ appId: app.globalData.appId })
      const instrumentList = result.data.data || []
      instrumentList.forEach((item: any) => {
        item.showSalePrice = formatPrice(item.salePrice || 0, 'ALL')
        item.showOriginalPrice = formatPrice(item.originalPrice || 0, 'ALL')
      })

      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 = formatPrice(item.originalPrice, "ALL");
        item.showSalePrice = formatPrice(item.salePrice, "ALL");
        item.typeName = this.formatPeriod(item.num, item.period);
        item.discountPrice = formatPrice(
          item.originalPrice - item.salePrice,
          "ALL"
        );
        const prices: any = formatPrice(item.salePrice);
        item.integerPart = prices.integerPart;
        item.decimalPart = prices.decimalPart;
        // 格式化赠送内容
        item.giftLongTime = item.giftFlag
          ? this.formatGiftPeriod(item.giftVipDay, item.giftPeriod)
          : "";
        if (item.stockNum > 0) {
          isOverSaled = false;
          if (!selected.id) {
            selected = item;
          }
        }
      });
      if (isOverSaled) {
        // 没有可销售商品则默认选中第一个商品
        selected = list[0];
      }

      this.setData({
        list,
        instrumentList, // 乐器列表
        isOverSaled,
        selected,
        selectInstrumentId: '',
        selectedInstrument: {}
      }, () => {
        this.onFormatGoods()
        this.onUpdatePeriodList()
      });
    } catch (e) {
      console.log(e, "e");
    }
  },
  // 格式化类型
  formatPeriod(num: number, type: string) {
    const template: any = {
      DAY: "天卡",
      MONTH: "月卡",
      YEAR: "年卡",
    };
    if (type === "YEAR" && num >= 99) {
      return "永久卡";
    }
    return num + template[type];
  },
  formatGiftPeriod(num: number, type: string) {
    if (!num || !type) {
      return "";
    }
    const template: any = {
      DAY: "天",
      MONTH: "个月",
      YEAR: "年",
    };
    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 || {}
    }, () => {
      this.onFormatGoods()
    });
  },
  /** 选中乐器 */
  onSelectInstrument(e: any) {
    const { dataset } = e.currentTarget;
    if (dataset.id === this.data.selectInstrumentId) {
      this.setData({
        selectInstrumentId: '',
        selectedInstrument: {}
      }, () => {
        this.onFormatGoods()
      })
    } else {
      const item = this.data.instrumentList.find((item: any) => item.id === dataset.id);
      this.setData({
        selectInstrumentId: dataset.id,
        selectedInstrument: item || {}
      }, () => {
        this.onFormatGoods()
      })
    }

  },
  /** 格式化选中的商品 */
  onFormatGoods() {
    const selected = this.data.selected;
    const selectedInstrument = this.data.selectedInstrument

    const params = {
      typeName: '',
      showSalePrice: '' as any, // 显示的现价
      originalPrice: 0, // 原价
      salePrice: 0, // 现价
      discountPrice: '' as any, // 已省
      integerPart: '',
      decimalPart: '',
    }
    // 选中期限
    if (selected.id) {
      params.typeName = selected.typeName
      params.showSalePrice = selected.showSalePrice
      params.originalPrice = selected.originalPrice
      params.salePrice = selected.salePrice
      params.discountPrice = selected.discountPrice

      const prices: any = formatPrice(params.salePrice);
      params.integerPart = prices.integerPart
      params.decimalPart = prices.decimalPart
    }
    // 选中乐器
    if (selectedInstrument.id) {
      params.typeName = selected.typeName ? selected.typeName + '+' + selectedInstrument.name : selectedInstrument.name
      params.originalPrice = Number(selected.originalPrice) + Number(selectedInstrument.originalPrice)
      params.salePrice = Number(selected.salePrice) + Number(selectedInstrument.salePrice)
      params.showSalePrice = formatPrice(params.salePrice, "ALL");
      params.discountPrice = formatPrice(
        params.originalPrice - params.salePrice,
        "ALL"
      );

      const prices: any = formatPrice(params.salePrice);
      params.integerPart = prices.integerPart
      params.decimalPart = prices.decimalPart
    }

    this.setData({
      formatSelectGood: params
    })
  },
  // 事件处理函数
  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,
    });
  },
  /** 切换学生端/老师端 */
  onSwitchUserType(e: any) {
    const { dataset } = e.currentTarget;
    this.setData({
      userTypes: dataset.type
    }, () => {
      // 这里可以根据用户类型重新加载商品数据
      // 目前先保持逻辑不变，后续可根据后端 API 扩展
      this.onInit()
    })
  },
  /** 选择期限 */
  onSelectPeriod(e: any) {
    const { value } = e.currentTarget.dataset
    const periodItem = this.data.periodList.find((item: any) => item.value === value)
    if (periodItem?.disabled) {
      return
    }

    this.setData({
      selectedPeriod: value
    }, () => {
      // 根据选中的期限更新商品
      this.onUpdatePeriodList()
    })
  },
  /** 根据期限更新商品列表 */
  onUpdatePeriodList() {
    const { selectedPeriod, list } = this.data
    // 将期限值映射回商品列表的筛选逻辑
    // 这里需要根据实际的 period 和 num 来匹配
    const periodMap: any = {
      '7DAY': { period: 'DAY', num: 7 },
      '14DAY': { period: 'DAY', num: 14 },
      '1MONTH': { period: 'MONTH', num: 1 },
      '6MONTH': { period: 'MONTH', num: 6 },
      '1YEAR': { period: 'YEAR', num: 1 }
    }

    const target = periodMap[selectedPeriod]
    if (target) {
      const selectedItem = list.find((item: any) =>
        item.period === target.period && item.num === target.num
      )
      if (selectedItem && selectedItem.stockNum > 0) {
        this.setData({
          selected: selectedItem
        }, () => {
          this.onFormatGoods()
        })
      }
    }

    // 判断是否满 1 年，显示赠送提示
    const showBonusGift = selectedPeriod === '1YEAR'
    this.setData({
      showBonusGift
    })
  },
  // 进行埋点
  onTrackPoint(options: { openId: string, elementName: string }) {
    const traceId = wx.getStorageSync("traceId");
    const deviceInfo = wx.getDeviceInfo();
    api_trackPointLog({
      traceId,
      openId: options.openId,
      elementName: options.elementName,
      deviceInfo: deviceInfo.brand + '_' + deviceInfo.model + '_' + deviceInfo.system + '_' + deviceInfo.platform,
      appName: "音乐数字 AI",
      // extParams: '',
      clickTime: formatTime(new Date(), '-') // 点击时间
    })
  },
  onClose() {
    this.setData({
      popupShow: false,
    });
  },
  onSubmit() {
    // 判断是否登录
    const that = this;
    debounce(function () {
      if (!that.isLogin()) {
        return;
      }
      const params = [] as any
      const selected = that.data.selected
      if (selected.id) {
        params.push({
          pic: selected.pic,
          name: selected.name,
          originalPrice: selected.originalPrice,
          salePrice: selected.salePrice,
          shopId: selected.shopId,
          id: selected.id,
          goodsType: 'ACTIVATION_CODE', // INSTRUMENTS
        })
      }
      const selectedInstrument = that.data.selectedInstrument
      if (selectedInstrument.id) {
        params.push({
          pic: selectedInstrument.pic,
          name: selectedInstrument.name,
          originalPrice: selectedInstrument.originalPrice,
          salePrice: selectedInstrument.salePrice,
          shopId: selectedInstrument.shopId,
          id: selectedInstrument.id,
          goodsType: 'INSTRUMENTS', // INSTRUMENTS
        })
      }

      // openId
      const openId = wx.getStorageSync("openId")
      that.onTrackPoint({
        openId,
        elementName: "立即购买"
      })

      let info = JSON.stringify({
        ...params
      });
      info = encodeURIComponent(info);
      wx.navigateTo({
        url: `../orders/order-detail?orderInfo=${info}`,
        success: () => {
          that.setData({
            popupShow: false,
          });
        },
      });
    }, 200)();
  },
  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,
        });
      },
    });
  },
  onPreivewDetailImg2(e: { currentTarget: { dataset: any } }) {
    wx.previewImage({
      current: e.currentTarget.dataset.src,
      urls: [
        "https://oss.dayaedu.com/ktyq/03/1772461866051.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 开始显示
    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 {
    // console.log(this.data.scrollDiscount, top, this.data.headerHeight, "top");
    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/1739870592907.png",
    };
  },
  onShareTimeline() {
    return {
      title: "音乐数字 AI",
      path: "/pages/index/index",
      imageUrl: "https://oss.dayaedu.com/ktyq/1739870592907.png",
    };
  },
});