//@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() { const id = this.data.id const cateid = this.data.cateid console.log('dd', id, 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) { console.log('onload') 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 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) { 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, }) }, })