575 lines
14 KiB
JavaScript
575 lines
14 KiB
JavaScript
import Toast from 'tdesign-miniprogram/toast/index';
|
||
import {
|
||
fetchGood
|
||
} from '~/services/good/fetchGood';
|
||
import {
|
||
addOrUpdateCart
|
||
} from '~/services/cart/addOrUpdateCart';
|
||
import {
|
||
fetchActivityList
|
||
} from '~/services/activity/fetchActivityList';
|
||
import {
|
||
getGoodsDetailsCommentList,
|
||
getGoodsDetailsCommentsCount,
|
||
} from '~/services/good/fetchGoodsDetailsComments';
|
||
|
||
import {
|
||
cdnBase
|
||
} from '~/config/index';
|
||
|
||
const imgPrefix = `${cdnBase}/`;
|
||
|
||
const recLeftImg = `${imgPrefix}common/rec-left.png`;
|
||
const recRightImg = `${imgPrefix}common/rec-right.png`;
|
||
const obj2Params = (obj = {}, encode = false) => {
|
||
const result = [];
|
||
Object.keys(obj).forEach((key) =>
|
||
result.push(`${key}=${encode ? encodeURIComponent(obj[key]) : obj[key]}`),
|
||
);
|
||
|
||
return result.join('&');
|
||
};
|
||
|
||
Page({
|
||
data: {
|
||
commentsList: [],
|
||
commentsStatistics: {
|
||
badCount: 0,
|
||
commentCount: 0,
|
||
goodCount: 0,
|
||
goodRate: 0,
|
||
hasImageCount: 0,
|
||
middleCount: 0,
|
||
},
|
||
isShowPromotionPop: false,
|
||
activityList: [],
|
||
recLeftImg,
|
||
recRightImg,
|
||
details: {},
|
||
goodsTabArray: [{
|
||
name: '商品',
|
||
value: '', // 空字符串代表置顶
|
||
},
|
||
{
|
||
name: '详情',
|
||
value: 'goods-page',
|
||
},
|
||
],
|
||
storeLogo: `${imgPrefix}common/store-logo.png`,
|
||
storeName: '云mall标准版旗舰店',
|
||
jumpArray: [{
|
||
title: '首页',
|
||
url: '/pages/home/home',
|
||
iconName: 'home',
|
||
},
|
||
{
|
||
title: '购物车',
|
||
url: '/pages/cart/index',
|
||
iconName: 'cart',
|
||
showCartNum: true,
|
||
},
|
||
],
|
||
isStock: true,
|
||
cartNum: 0,
|
||
soldout: false,
|
||
buttonType: 1,
|
||
buyNum: 1,
|
||
selectedAttrStr: '',
|
||
skuArray: [],
|
||
primaryImage: '',
|
||
specImg: '',
|
||
isSpuSelectPopupShow: false,
|
||
isAllSelectedSku: false,
|
||
selectedSkuId: 0,
|
||
buyType: 0,
|
||
outOperateStatus: false, // 是否外层加入购物车
|
||
operateType: 0,
|
||
selectSkuQuantity: 0,
|
||
selectSkuSellsPrice: 0,
|
||
selectSkuLinePrice: 0,
|
||
maxLinePrice: 0,
|
||
minSalePrice: 0,
|
||
maxSalePrice: 0,
|
||
list: [],
|
||
spuId: '',
|
||
navigation: {
|
||
type: 'fraction'
|
||
},
|
||
current: 0,
|
||
autoplay: true,
|
||
duration: 500,
|
||
interval: 5000,
|
||
soldNum: 0, // 已售数量
|
||
},
|
||
|
||
handlePopupHide() {
|
||
this.setData({
|
||
isSpuSelectPopupShow: false,
|
||
});
|
||
},
|
||
|
||
showSkuSelectPopup(type) {
|
||
this.setData({
|
||
buyType: type || 0,
|
||
outOperateStatus: type >= 1,
|
||
isSpuSelectPopupShow: true,
|
||
});
|
||
},
|
||
|
||
buyItNow() {
|
||
this.showSkuSelectPopup(1);
|
||
},
|
||
|
||
toAddCart() {
|
||
this.showSkuSelectPopup(2);
|
||
},
|
||
|
||
toNav(e) {
|
||
const {
|
||
url
|
||
} = e.detail;
|
||
wx.switchTab({
|
||
url: url,
|
||
});
|
||
},
|
||
|
||
showCurImg(e) {
|
||
const {
|
||
index
|
||
} = e.detail;
|
||
const {
|
||
images
|
||
} = this.data.details;
|
||
wx.previewImage({
|
||
current: images[index],
|
||
urls: images, // 需要预览的图片http链接列表
|
||
});
|
||
},
|
||
|
||
onPageScroll({
|
||
scrollTop
|
||
}) {
|
||
const goodsTab = this.selectComponent('#goodsTab');
|
||
goodsTab && goodsTab.onScroll(scrollTop);
|
||
},
|
||
|
||
chooseSpecItem(e) {
|
||
const {
|
||
specList
|
||
} = this.data.details;
|
||
const {
|
||
selectedSku,
|
||
isAllSelectedSku
|
||
} = e.detail;
|
||
if (!isAllSelectedSku) {
|
||
this.setData({
|
||
selectSkuSellsPrice: 0,
|
||
});
|
||
}
|
||
this.setData({
|
||
isAllSelectedSku,
|
||
});
|
||
this.getSkuItem(specList, selectedSku);
|
||
},
|
||
|
||
getSkuItem(specList, selectedSku) {
|
||
const {
|
||
skuArray,
|
||
primaryImage
|
||
} = this.data;
|
||
const selectedSkuValues = this.getSelectedSkuValues(specList, selectedSku);
|
||
let selectedAttrStr = ` 件 `;
|
||
selectedSkuValues.forEach((item) => {
|
||
selectedAttrStr += `，${item.specValue} `;
|
||
});
|
||
// eslint-disable-next-line array-callback-return
|
||
const skuItem = 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 : '');
|
||
if (skuItem) {
|
||
console.log(skuItem[0], '选中的item');
|
||
this.setData({
|
||
selectedSkuId: skuItem[0]?.skuId,
|
||
selectItem: skuItem,
|
||
selectSkuSellsPrice: skuItem[0]?.priceInfo[0]?.price || 0,
|
||
selectSkuLinePrice: skuItem[0]?.priceInfo[1]?.price || 0,
|
||
selectSkuQuantity: skuItem[0]?.quantity
|
||
});
|
||
} else {
|
||
this.setData({
|
||
selectItem: null,
|
||
selectSkuSellsPrice: 0,
|
||
selectSkuLinePrice: 0,
|
||
});
|
||
}
|
||
this.setData({
|
||
specImg: skuItem && skuItem[0]?.skuImage ? skuItem[0]?.skuImage : primaryImage,
|
||
});
|
||
},
|
||
|
||
// 获取已选择的sku名称
|
||
getSelectedSkuValues(skuTree, selectedSku) {
|
||
const normalizedTree = this.normalizeSkuTree(skuTree);
|
||
return Object.keys(selectedSku).reduce((selectedValues, skuKeyStr) => {
|
||
console.log(selectedSku, 'sku啊');
|
||
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) {
|
||
if (selectSpecsName) {
|
||
this.setData({
|
||
selectedAttrStr: selectSpecsName,
|
||
});
|
||
} else {
|
||
this.setData({
|
||
selectedAttrStr: '',
|
||
});
|
||
}
|
||
},
|
||
|
||
/** 加入购物车 */
|
||
addCart() {
|
||
const {
|
||
isAllSelectedSku,
|
||
} = this.data;
|
||
const {
|
||
specList,
|
||
} = this.data.details;
|
||
|
||
if (specList.length != 0) {
|
||
if (isAllSelectedSku) {
|
||
this.addCartFun()
|
||
} else {
|
||
Toast({
|
||
context: this,
|
||
selector: '#t-toast',
|
||
message: '请选择规格',
|
||
icon: '',
|
||
duration: 1000,
|
||
});
|
||
}
|
||
} else {
|
||
this.addCartFun()
|
||
}
|
||
},
|
||
|
||
addCartFun() {
|
||
const {
|
||
isAllSelectedSku,
|
||
buyNum,
|
||
selectedSkuId
|
||
} = this.data;
|
||
const {
|
||
specList,
|
||
shopGuid,
|
||
spuId,
|
||
} = this.data.details;
|
||
|
||
let data = {
|
||
shopGuid: shopGuid,
|
||
goodsGuid: spuId,
|
||
goodsSkuId: selectedSkuId,
|
||
cartGoodsNum: buyNum
|
||
}
|
||
console.log(data, '加入购物车的数据');
|
||
|
||
// 添加购物车接口
|
||
addOrUpdateCart(data).then((res) => {
|
||
if (res.code == 200) {
|
||
Toast({
|
||
context: this,
|
||
selector: '#t-toast',
|
||
message: '加入购物车成功',
|
||
icon: '',
|
||
duration: 1000,
|
||
});
|
||
this.setData({
|
||
isSpuSelectPopupShow: false,
|
||
});
|
||
}
|
||
})
|
||
},
|
||
|
||
gotoBuy(type) {
|
||
console.log(type);
|
||
const {
|
||
isAllSelectedSku,
|
||
buyNum,
|
||
selectedSkuId
|
||
} = this.data;
|
||
const {
|
||
specList
|
||
} = this.data.details;
|
||
if (specList.length != 0) {
|
||
if (!isAllSelectedSku) {
|
||
Toast({
|
||
context: this,
|
||
selector: '#t-toast',
|
||
message: '请选择规格',
|
||
icon: '',
|
||
duration: 1000,
|
||
});
|
||
return;
|
||
}
|
||
}
|
||
|
||
this.handlePopupHide();
|
||
const query = {
|
||
quantity: buyNum,
|
||
storeId: '1',
|
||
spuId: this.data.spuId,
|
||
goodsName: this.data.details.title,
|
||
skuId: type === 1 ? 0 : selectedSkuId,
|
||
available: this.data.details.available,
|
||
price: this.data.details.minSalePrice,
|
||
specInfo: this.data.details.specList?.map((item) => ({
|
||
specTitle: item.title,
|
||
specValue: item.specValueList[0].specValue,
|
||
})),
|
||
primaryImage: this.data.details.primaryImage,
|
||
spuId: this.data.details.spuId,
|
||
thumb: this.data.details.primaryImage,
|
||
title: this.data.details.title,
|
||
};
|
||
console.log(query, '从立刻购买来的');
|
||
let urlQueryStr = obj2Params({
|
||
goodsRequestList: JSON.stringify([query]),
|
||
});
|
||
urlQueryStr = urlQueryStr ? `?${urlQueryStr}` : '';
|
||
const path = `/pages/order/order-confirm/index${urlQueryStr}`;
|
||
wx.navigateTo({
|
||
url: path,
|
||
});
|
||
},
|
||
|
||
gotoShop() {
|
||
const {
|
||
shopGuid
|
||
} = this.data.details;
|
||
wx.navigateTo({
|
||
url: "/pages/shop/all-goods/index?shopGuid=" + shopGuid,
|
||
});
|
||
},
|
||
|
||
specsConfirm() {
|
||
const {
|
||
buyType
|
||
} = this.data;
|
||
const {
|
||
specList
|
||
} = this.data.details;
|
||
if (buyType === 1) {
|
||
if (specList.length == 0) {
|
||
this.gotoBuy(1);
|
||
return;
|
||
}
|
||
this.gotoBuy();
|
||
} else {
|
||
this.addCart();
|
||
}
|
||
// this.handlePopupHide();
|
||
},
|
||
|
||
changeNum(e) {
|
||
this.setData({
|
||
buyNum: e.detail.buyNum,
|
||
});
|
||
},
|
||
|
||
closePromotionPopup() {
|
||
this.setData({
|
||
isShowPromotionPop: false,
|
||
});
|
||
},
|
||
|
||
promotionChange(e) {
|
||
const {
|
||
index
|
||
} = e.detail;
|
||
wx.navigateTo({
|
||
url: `/pages/promotion-detail/index?promotion_id=${index}`,
|
||
});
|
||
},
|
||
|
||
showPromotionPopup() {
|
||
this.setData({
|
||
isShowPromotionPop: true,
|
||
});
|
||
},
|
||
|
||
getDetail(spuId) {
|
||
Promise.all([fetchGood(spuId), fetchActivityList()]).then((res) => {
|
||
const [details, activityList] = res;
|
||
const skuArray = [];
|
||
const {
|
||
skuList,
|
||
primaryImage,
|
||
isPutOnSale,
|
||
minSalePrice,
|
||
maxSalePrice,
|
||
maxLinePrice,
|
||
soldNum,
|
||
} = details;
|
||
|
||
// details.desc = details.desc.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');
|
||
// details.desc = details.desc.replace(/<img[^>]*style\s*=\s*(['"])[^'"]*\1[^>]*>/gi, '<img style="max-width:100%;height:auto;" ');
|
||
// details.desc = details.desc.replace(/<img[^>]*>/gi, '<img style="max-3999999996width:100%;height:auto;" >');
|
||
|
||
|
||
skuList.forEach((item) => {
|
||
skuArray.push({
|
||
skuId: item.skuId,
|
||
quantity: item.quantity ? item.quantity : 0,
|
||
specInfo: item.specInfo,
|
||
priceInfo: item.priceInfo,
|
||
skuImage: item.skuImage,
|
||
});
|
||
});
|
||
const promotionArray = [];
|
||
// activityList.forEach((item) => {
|
||
// promotionArray.push({
|
||
// tag: item.promotionSubCode === 'MYJ' ? '满减' : '满折',
|
||
// label: '满100元减99.9元',
|
||
// });
|
||
// });
|
||
this.setData({
|
||
details,
|
||
activityList,
|
||
isStock: details.spuStockQuantity > 0,
|
||
maxSalePrice: maxSalePrice ? parseInt(maxSalePrice) : 0,
|
||
maxLinePrice: maxLinePrice ? parseInt(maxLinePrice) : 0,
|
||
minSalePrice: minSalePrice,
|
||
list: promotionArray,
|
||
skuArray: skuArray,
|
||
primaryImage,
|
||
soldout: isPutOnSale === 0,
|
||
soldNum,
|
||
});
|
||
});
|
||
},
|
||
|
||
async getCommentsList() {
|
||
try {
|
||
const code = 'Success';
|
||
const data = await getGoodsDetailsCommentList(this.data.spuId);
|
||
// const {
|
||
// homePageComments
|
||
// } = data;
|
||
if (code.toUpperCase() === 'SUCCESS') {
|
||
const nextState = {
|
||
commentsList: data.map((item) => {
|
||
return {
|
||
goodsSpu: item.spuId,
|
||
userName: item.userName || '',
|
||
commentScore: item.commentScore,
|
||
commentContent: item.commentContent || '用户未填写评价',
|
||
userHeadUrl: item.isAnonymity ?
|
||
this.anonymityAvatar : item.userHeadUrl || this.anonymityAvatar,
|
||
};
|
||
}),
|
||
};
|
||
this.setData(nextState);
|
||
}
|
||
} catch (error) {
|
||
console.error('comments error:', error);
|
||
}
|
||
},
|
||
|
||
onShareAppMessage() {
|
||
// 自定义的返回信息
|
||
const {
|
||
selectedAttrStr
|
||
} = this.data;
|
||
let shareSubTitle = '';
|
||
if (selectedAttrStr.indexOf('件') > -1) {
|
||
const count = selectedAttrStr.indexOf('件');
|
||
shareSubTitle = selectedAttrStr.slice(count + 1, selectedAttrStr.length);
|
||
}
|
||
const customInfo = {
|
||
imageUrl: this.data.details.primaryImage,
|
||
title: this.data.details.title + shareSubTitle,
|
||
path: `/pages/goods/details/index?spuId=${this.data.spuId}`,
|
||
};
|
||
return customInfo;
|
||
},
|
||
|
||
/** 获取评价统计 */
|
||
async getCommentsStatistics() {
|
||
try {
|
||
const code = 'Success';
|
||
const data = await getGoodsDetailsCommentsCount(this.data.spuId);
|
||
if (code.toUpperCase() === 'SUCCESS') {
|
||
const {
|
||
badCount,
|
||
commentCount,
|
||
goodCount,
|
||
goodRate,
|
||
hasImageCount,
|
||
middleCount,
|
||
} = data;
|
||
const nextState = {
|
||
commentsStatistics: {
|
||
badCount: parseInt(`${badCount}`),
|
||
commentCount: parseInt(`${commentCount}`),
|
||
goodCount: parseInt(`${goodCount}`),
|
||
/** 后端返回百分比后数据但没有限制位数 */
|
||
goodRate: Math.floor(goodRate * 10) / 10,
|
||
hasImageCount: parseInt(`${hasImageCount}`),
|
||
middleCount: parseInt(`${middleCount}`),
|
||
},
|
||
};
|
||
this.setData(nextState);
|
||
}
|
||
} catch (error) {
|
||
console.error('comments statiistics error:', error);
|
||
}
|
||
},
|
||
|
||
/** 跳转到评价列表 */
|
||
navToCommentsListPage() {
|
||
wx.navigateTo({
|
||
url: `/pages/goods/comments/index?spuId=${this.data.spuId}`,
|
||
});
|
||
},
|
||
|
||
onLoad(query) {
|
||
const {
|
||
spuId
|
||
} = query;
|
||
// const spuId = "1672964367177617408";
|
||
|
||
this.setData({
|
||
spuId: spuId,
|
||
});
|
||
this.getDetail(spuId);
|
||
this.getCommentsList(spuId);
|
||
this.getCommentsStatistics(spuId);
|
||
},
|
||
}); |