wxlitian/miniprogram/pages/goods/detail/index.ts

//@ts-ignore
import Toast from 'tdesign-miniprogram/toast/index'
import GoodApi from '../../../services/good'
import Navi from '../../../utils/navi'
import { backPage, getCurrentUrl, isLogin, obj2Params, saveToAlbum } from '../../../utils/util'

// pages/goods/detail/index.ts
Page({
  /**
   * 页面的初始数据
   */
  data: {
    id: -1,
    cateid: -1,
    downloading: false,
    guidshow: false,
    nodraws: true,
    drawshow: false,

    selectedAttrStr: '',
    buyType: 0,
    addingCart: false,

    // 猜你喜欢
    favList: [] as WxGetCateAlbumOutput[],
    favTotal: 0,
    loadMoreStatus: 0,
    albumInput: {
      skipCount: 0,
      maxResultCount: 10,
    },

    // 评论
    commentsDto: {},
    commentsStatistics: {
      commentCount: 0,
      hasImageCount: 0,
      goodRate: 0,
      goodCount: 0,
      middleCount: 0,
      badCount: 0,
    },

    // 内容分类
    goodsTabArray: [],
    details: {} as WxGetProductOutput,
    loading: true,

    // 底部栏目
    jumpArray: [
      {
        title: '购物袋',
        url: '/pages/cart/index',
        iconName: 'ibag-bold',
        showCartNum: true,
        switchTab: true,
        prefix: 'hn',
      },
      {
        title: '收藏',
        selected: false,
        fav: false,
        prefix: 'hn',
        iconName: 'cshoucang',
        selectedIconName: 'cshoucang-filled',
      },
    ],

    // 店铺信息
    storeId: 0,
    storeLogo: '',
    storeName: '',
    storeImag: '',

    selectItem: null as {
      skuId: number
      quantity: number
      image: string
      price: number
      linePrice: number
      specInfo: []
    } | null,

    // 优惠活动
    activityList: [],
    isShowActivityList: false,

    // 商品信息
    promotionArray: [] as {
      tag: ''
      value: number
      label: ''
    }[],
    skuArray: [] as {
      skuId: number
      quantity: number
      image: string
      price: number
      linePrice: number
      specInfo: []
    }[],
    primaryImage: '', // 产品图
    selectSkuImage: '', // 选择产品图
    selectSkuSalePrice: 0, // 选择产品图
    selectSkuLinePrice: 0, // 选择产品图
    selectSkuName: '', // 选择产品图
    isAllSkuSelected: false,
    selectedSkuAttrStr: '', // 当前选择的 SKU 内容
    isSpuSelectPopupShow: false, // SKU弹窗状态
    isAllSelectedSku: false, // 是否已选择所有SKU信息
    buyNum: 0,

    buttonType: 1,
    isStock: true, // 是否有库存
    soldout: false, // 是否可售
    soldNum: 0, // 已售数量
    unit: '',

    minSalePrice: 0,
    minLinePrice: 0,
    maxSalePrice: 0,

    limitMaxCount: 999,
    limitMinCount: 1,
    limitBuyInfo: '',

    // 轮播组件
    navigation: { type: 'dots-bar' },
    autoplay: false,
    duration: 500,
    interval: 5000,
    swipepics: [] as string[],

    swipewidth: '750rpx',
    swipeheight: '506rpx',

    imgSrcs: [
      { img: 'https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner1.png', text: '1' },
      { img: 'https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner2.png', text: '2' },
      { img: 'https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner3.png', text: '3' },
      { img: 'https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner4.png', text: '4' },
      { img: 'https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner5.png', text: '5' },
      { img: 'https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner6.png', text: '6' },
    ],
  },

  handleAuthDisagree() {
    backPage()
  },

  handleAuthOK() {
    console.log('check it', this.data)
    this.init()
  },

  init() {
    if (!isLogin()) {
      wx.showToast({
        title: '为提供更好的服务，请登录',
        duration: 1000,
        success() {
          setTimeout(() => {
            Navi.navigateTo({
              url: '/pages/login/index',
            })
          }, 10)
        },
      })
      return
    }

    const id = this.data.id
    const cateid = this.data.cateid

    GoodApi.GetProduct({ id, cateid } as any).then((rsp) => {
      if (rsp.result) {
        const details = rsp.result
        const {
          imageUrl: primaryImage,
          soldNum,
          limitMaxCount,
          limitMinCount,
          limitBuyInfo,
          unit,
        } = details
        const skuArray = [] as {
          skuId: number
          quantity: number
          image: string
          price: number
          linePrice: number
          specInfo: TmpSpecInfo[]
        }[]

        if (details.skuList) {
          details.skuList.forEach((item) => {
            const priceInfo = item.priceInfo || []
            const len = priceInfo.length
            skuArray.push({
              skuId: Number(item.skuId),
              image: item.skuImage || primaryImage || '',
              price: len > 0 ? priceInfo[0].price : 0,
              linePrice: len > 1 ? priceInfo[1].price : 0,
              quantity: item.stockInfo ? item.stockInfo.stockQuantity : 0,
              specInfo: item.specInfo || [],
            })
          })
        }

        let pics = []
        if (rsp.result.imageUrl) {
          pics.push(rsp.result.imageUrl)
        }
        if (rsp.result.images && rsp.result.images.length > 0) {
          pics = pics.concat(rsp.result.images)
        }

        const hasDraw =
          (details.draws && details.draws.length > 0) ||
          (details.draws2D && details.draws2D.length > 0)

        this.setData({
          details,
          nodraws: !hasDraw,
          swipepics: pics,
          current: 0,
          loading: false,
          primaryImage,
          isStock: details.spuStockQuantity > 0,
          maxSalePrice: details.maxSalePrice,
          maxLinePrice: details.maxLinePrice,
          minSalePrice: details.minSalePrice,
          minLinePrice: details.minLinePrice,
          skuArray: skuArray as any,
          soldout: details.isPutOnSale === 0,
          soldNum,
          limitMaxCount,
          limitMinCount,
          limitBuyInfo,
          unit,
        })

        this.setFav(rsp.result.isFav)

        wx.setNavigationBarTitle({
          title: rsp.result.title || '',
        })
        console.log(rsp.result)
      }
    })

    // GoodApi.GetFav({ id, cateId: cateid }).then((rsp) => {
    //   if (rsp.result && rsp.result.length > 0) {
    //     this.setData({
    //       favList: rsp.result,
    //     })
    //   }
    // })

    GoodApi.GetComments({ id }).then((rsp) => {
      if (rsp.result) {
        this.setData({
          commentsDto: rsp.result,
        })
      }
    })

    this.loadRecommend(true)
  },

  loadRecommend(rest = false) {
    console.log('next')
    this.setData({
      loadMoreStatus: 1,
    })
    GoodApi.GetHomeRecommend(this.data.albumInput as any).then((rsp) => {
      if (rsp.result) {
        const result = rsp.result as any
        const { items = [] } = result
        const nowItems = rest ? items : this.data.favList.concat(items)
        this.setData({
          favList: nowItems as any,
          favTotal: result.totalCount || 0,
          loadMoreStatus: nowItems.length === result.totalCount ? 2 : 0,
        })
      }
    })
  },
  handleReachBottom() {
    if (this.data.loadMoreStatus === 0 && this.data.favList.length < this.data.favTotal) {
      this.setData(
        {
          albumInput: {
            ...this.data.albumInput,
            skipCount: this.data.albumInput.skipCount + 10,
          },
        },
        () => {
          this.loadRecommend()
        },
      )
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(query: Record<string, string>) {
    const { id, cateid } = query
    this.setData({
      id: Number(id),
      cateid: Number(cateid),
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage(e: WechatMiniprogram.Page.IShareAppMessageOption) {
    console.log(e, 'ssss')

    // const promise = new Promise((resolve) => {
    //   setTimeout(() => {
    //     resolve({
    //       title: '自定义转发标题',
    //     })
    //   }, 2000)
    // })

    const url = getCurrentUrl()
    return {
      title: this.data.details.title,
      path: url,
      imageUrl: this.data.swipepics[0],
      //promise,
    }
  },

  onPreview(e: WechatMiniprogram.BaseEvent<{ idx: number }>) {
    const { idx = 0 } = e.currentTarget.dataset
    wx.previewImage({
      urls: this.data.swipepics,
      current: this.data.swipepics[idx],
    })
  },
  gotoGoodsDetail(e: WechatMiniprogram.CustomEvent<{ goods: WxCateAlbumItemDto; index: number }>) {
    const { goods } = e.detail
    Navi.redirectTo({
      url: '/pages/goods/detail/index?id=' + goods.id + '&cateid=' + this.data.cateid,
    })
  },

  /**
   *
   */
  chooseSpecItem(
    e: WechatMiniprogram.CustomEvent<{
      selectedSku: Record<string, string>
      isAllSelectedSku: boolean
    }>,
  ) {
    const { specList } = this.data.details
    const { selectedSku, isAllSelectedSku } = e.detail
    console.log(specList, isAllSelectedSku, selectedSku)
    if (!isAllSelectedSku) {
      this.setData({
        selectSkuSellPrice: 0,
      })
    }
    this.setData({
      isAllSelectedSku,
    })
    this.getSkuItem(specList, selectedSku)
  },

  getSkuItem(specList: TmpSpec[] | undefined, selectedSku: Record<string, string>) {
    const { skuArray, primaryImage, unit } = this.data
    const selectedSkuValues = this.getSelectedSkuValues(specList, selectedSku)
    let selectedAttrStr = ` ${unit}  `
    selectedSkuValues.forEach((item) => {
      selectedAttrStr += `，${item.specValue}  `
    })
    // eslint-disable-next-line array-callback-return
    const findSkuItem = skuArray.filter((item) => {
      let status = true
      ;(item.specInfo || []).forEach((subItem) => {
        if (!selectedSku[subItem.specId] || selectedSku[subItem.specId] !== subItem.specValueId) {
          status = false
        }
      })
      if (status) return item
    })
    this.selectSpecsName(selectedSkuValues.length > 0 ? selectedAttrStr : '')

    console.log('find sku:', findSkuItem)

    if (findSkuItem && findSkuItem.length > 0) {
      const selectItem = findSkuItem[0]
      this.setData({
        specImg: selectItem.image,
        selectItem,
        selectSkuSellPrice: selectItem.price || 0,
        selectSkuLinePrice: selectItem.linePrice || 0,
      })
    } else {
      this.setData({
        specImg: primaryImage,
        selectItem: null,
        selectSkuSellPrice: 0,
        selectSkuLinePrice: 0,
      })
    }
  },

  getSelectedSkuValues(skuTree, selectedSku) {
    const normalizedTree = this.normalizeSkuTree(skuTree)
    return Object.keys(selectedSku).reduce((selectedValues, skuKeyStr) => {
      const skuValues = normalizedTree[skuKeyStr]
      const skuValueId = selectedSku[skuKeyStr]
      if (skuValueId !== '') {
        const skuValue = skuValues.filter((value) => {
          return value.specValueId === skuValueId
        })[0]
        skuValue && selectedValues.push(skuValue)
      }
      return selectedValues
    }, [])
  },

  normalizeSkuTree(skuTree) {
    const normalizedTree = {}
    skuTree.forEach((treeItem) => {
      normalizedTree[treeItem.specId] = treeItem.specValueList
    })
    return normalizedTree
  },

  selectSpecsName(selectSpecsName: string) {
    if (selectSpecsName) {
      this.setData({
        selectedAttrStr: selectSpecsName,
      })
    } else {
      this.setData({
        selectedAttrStr: '',
      })
    }
  },

  /**
   * SPU 选择器
   */
  handlePopupHide() {
    this.setData({
      isSpuSelectPopupShow: false,
    })
  },

  showSkuSelectPopup(type: number) {
    console.log(type)

    this.setData({
      buyType: type || 0,
      outOperateStatus: type >= 1,
      isSpuSelectPopupShow: true,
    })
  },

  toAddCart() {
    this.showSkuSelectPopup(2)
  },

  specsConfirm(e: WechatMiniprogram.CustomEvent<{ buy: number }>) {
    const { buy } = e.detail
    this.setData(
      {
        buyNum: buy,
      },
      () => {
        this.addCart()
        this.handlePopupHide()
      },
    )
  },

  setFav(state: boolean) {
    const arr = JSON.parse(JSON.stringify(this.data.jumpArray))
    arr[1].fav = state
    arr[1].selected = state
    this.setData({
      jumpArray: arr,
    })
  },

  toNav(e: WechatMiniprogram.CustomEvent<{ index: number; url: string }>) {
    const { index } = e.detail
    const node = this.data.jumpArray[index]
    const url = node.url
    if (url && url.length > 0) {
      if (node.switchTab) {
        wx.switchTab({
          url,
        })
      } else {
        wx.navigateTo({
          url,
        })
      }
      return
    }

    if (node.title === '收藏') {
      const state = node.fav === true ? false : true
      GoodApi.UpdateFav({ id: this.data.id, state }).then((rsp) => {
        this.setFav(state)
      })
    }
    console.log(node)
  },

  addCart() {
    const { isAllSelectedSku, selectItem, buyNum } = this.data

    //     skuId: 154
    // specInfo: Array(2)
    // 0: {specId: 58, specTitle: null, specValueId: 170, specValue: "AL002黑色（铝合金框）", image: null}
    // 1: {specId: 59, specTitle: null, specValueId: 175, specValue: "80*120cm", image: null}

    if (selectItem) {
      const bag: WxAddCartInput = {
        cateId: this.data.cateid,
        goodId: this.data.id,
        skuId: selectItem.skuId,
        info: selectItem.specInfo.map((o: any) => o.specValueId),
        buyNum,
      } as any

      this.setData({
        addingCart: true,
      })
      GoodApi.AddCart(bag)
        .then((rsp) => {
          if (rsp.result === 'ok') {
            Toast({
              context: this,
              selector: '#t-toast',
              message: '已添加购物车',
              icon: '',
              duration: 1000,
            })
          }
        })
        .catch((e) => {
          console.log(e)
          Toast({
            context: this,
            selector: '#t-toast',
            message: '添加购物车不成功',
            icon: '',
            duration: 1000,
          })
        })
        .finally(() => {
          this.setData({
            addingCart: false,
          })
        })
    }
  },

  gotoDraw() {
    console.log('hihihi')
    this.setData({
      drawshow: true,
    })
  },
  gotoFly(e: WechatMiniprogram.BaseEvent<{}, { type: string }>) {
    const type = e.currentTarget.dataset.type
    let can = false
    let id = -1
    if (type === 'flat' && this.data.details.draws2D && this.data.details.draws2D.length > 0) {
      can = true
      id = this.data.details.draws2D[0].id
    } else if (type === 'space' && this.data.details.draws && this.data.details.draws.length > 0) {
      can = true
      id = this.data.details.draws[0].id
    }
    if (can) {
      GoodApi.GetDrawLink({
        id: id,
        goodId: this.data.id,
        type,
      }).then((rsp) => {
        if (rsp.result && rsp.result.length > 0) {
          console.log('navi')
          Navi.navigateTo({
            url: '/pages/outlink/index?url=' + encodeURIComponent(rsp.result),
          })
        }
      })
    }
  },
  handleDrawPopupHide() {
    this.setData({
      drawshow: false,
    })
  },
  gotoComments() {
    let urlQueryStr = obj2Params({
      spuId: this.data.id,
      gid: this.data.gid,
    } as any)
    urlQueryStr = urlQueryStr ? `?${urlQueryStr}` : ''
    const path = `/pages/goods/comments/index${urlQueryStr}`
    wx.navigateTo({
      url: path,
    })
  },
  onSwipeChange(e: WechatMiniprogram.CustomEvent<{ current: number }>) {
    const { current } = e.detail
    this.setData({
      current,
    })
  },
  gotoshare() {},
  gotodownload() {
    this.setData({
      downloading: true,
    })
    saveToAlbum(this.data.swipepics[0])
      .then((step: Number) => {
        if (step === 1) {
          this.setData({
            guidshow: true,
          })
          return
        }
        if (step > 1) {
          wx.showToast({
            title: '请重新尝试下载',
            icon: 'error',
            duration: 2000,
          })
          return
        }
      })
      .finally(() => {
        this.setData({
          downloading: false,
        })
      })
  },
  hideGuid() {
    this.setData({
      guidshow: false,
    })
  },
})