feat 加入购物车弹窗 公告删除取消
This commit is contained in:
Cxpller
parent
75243c9db1
commit
a4e2dc786c
@ -1,4 +1,13 @@
|
||||
import { goodsList } from "~/model/goods";
|
||||
import Toast from 'tdesign-miniprogram/toast/index';
|
||||
import {
|
||||
goodsList
|
||||
} from "~/model/goods";
|
||||
import {
|
||||
fetchGood
|
||||
} from '~/services/good/fetchGood';
|
||||
import {
|
||||
addOrUpdateCart
|
||||
} from '~/services/cart/addOrUpdateCart';
|
||||
|
||||
Component({
|
||||
externalClasses: ['wr-class'],
|
||||
@ -19,7 +28,7 @@ Component({
|
||||
type: Array,
|
||||
value: [],
|
||||
},
|
||||
type:{
|
||||
type: {
|
||||
type: String,
|
||||
value: "card"
|
||||
}
|
||||
@ -27,6 +36,16 @@ Component({
|
||||
|
||||
data: {
|
||||
independentID: '',
|
||||
isSpuSelectPopupShow: false,
|
||||
details: {},
|
||||
specImg: "",
|
||||
primaryImage: "",
|
||||
skuArray: [],
|
||||
selectSkuQuantity: 0,
|
||||
isStock: false,
|
||||
isAllSelectedSku: false,
|
||||
selectSkuSellsPrice: 0,
|
||||
details: {},
|
||||
},
|
||||
|
||||
lifetimes: {
|
||||
@ -37,34 +56,257 @@ Component({
|
||||
|
||||
methods: {
|
||||
onClickGoods(e) {
|
||||
const { index } = e.currentTarget.dataset;
|
||||
this.triggerEvent('click', { ...e.detail, index });
|
||||
const {
|
||||
index
|
||||
} = e.currentTarget.dataset;
|
||||
this.triggerEvent('click', {
|
||||
...e.detail,
|
||||
index
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
onAddCart(e) {
|
||||
const { index } = e.currentTarget.dataset;
|
||||
this.triggerEvent('addcart', { ...e.detail, index });
|
||||
const {
|
||||
index
|
||||
} = e.currentTarget.dataset;
|
||||
this.setData({
|
||||
isSpuSelectPopupShow: true
|
||||
})
|
||||
|
||||
// 请求商品详情接口
|
||||
this.getDetail(e.detail.goods.spuId)
|
||||
},
|
||||
|
||||
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: res.data,
|
||||
icon: '',
|
||||
duration: 1000,
|
||||
});
|
||||
this.setData({
|
||||
isSpuSelectPopupShow: false,
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
selectSpecsName(selectSpecsName) {
|
||||
if (selectSpecsName) {
|
||||
this.setData({
|
||||
selectedAttrStr: selectSpecsName,
|
||||
});
|
||||
} else {
|
||||
this.setData({
|
||||
selectedAttrStr: '',
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
normalizeSkuTree(skuTree) {
|
||||
const normalizedTree = {};
|
||||
skuTree.forEach((treeItem) => {
|
||||
normalizedTree[treeItem.specId] = treeItem.specValueList;
|
||||
});
|
||||
return normalizedTree;
|
||||
},
|
||||
|
||||
// 获取已选择的sku名称
|
||||
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;
|
||||
}, []);
|
||||
},
|
||||
|
||||
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) {
|
||||
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,
|
||||
});
|
||||
},
|
||||
|
||||
chooseSpecItem(e) {
|
||||
console.log(e);
|
||||
const {
|
||||
specList
|
||||
} = this.data.details;
|
||||
const {
|
||||
selectedSku,
|
||||
isAllSelectedSku
|
||||
} = e.detail;
|
||||
if (!isAllSelectedSku) {
|
||||
this.setData({
|
||||
selectSkuSellsPrice: 0,
|
||||
});
|
||||
}
|
||||
this.setData({
|
||||
isAllSelectedSku,
|
||||
});
|
||||
this.getSkuItem(specList, selectedSku);
|
||||
},
|
||||
|
||||
/** 加入购物车 */
|
||||
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()
|
||||
}
|
||||
},
|
||||
|
||||
onClickGoodsThumb(e) {
|
||||
const { index } = e.currentTarget.dataset;
|
||||
this.triggerEvent('thumb', { ...e.detail, index });
|
||||
const {
|
||||
index
|
||||
} = e.currentTarget.dataset;
|
||||
this.triggerEvent('thumb', {
|
||||
...e.detail,
|
||||
index
|
||||
});
|
||||
},
|
||||
|
||||
init() {
|
||||
console.log(this.properties.goodsList);
|
||||
this.genIndependentID(this.id || '');
|
||||
this.setData({ type: this.properties.type });
|
||||
this.setData({
|
||||
type: this.properties.type
|
||||
});
|
||||
},
|
||||
|
||||
genIndependentID(id) {
|
||||
if (id) {
|
||||
this.setData({ independentID: id });
|
||||
this.setData({
|
||||
independentID: id
|
||||
});
|
||||
} else {
|
||||
this.setData({
|
||||
independentID: `goods-list-${~~(Math.random() * 10 ** 8)}`,
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 商品规格js方法（搬运商品详情页的相关方法）
|
||||
getDetail(spuId) {
|
||||
Promise.all([fetchGood(spuId)]).then((res) => {
|
||||
const [details] = res;
|
||||
const skuArray = [];
|
||||
const {
|
||||
skuList,
|
||||
primaryImage,
|
||||
} = 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,
|
||||
});
|
||||
});
|
||||
|
||||
this.setData({
|
||||
details,
|
||||
isStock: details.spuStockQuantity > 0,
|
||||
skuArray: skuArray,
|
||||
primaryImage,
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
handlePopupHide() {
|
||||
this.setData({
|
||||
isSpuSelectPopupShow: false,
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
@ -1,6 +1,8 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"goods-card": "/components/goods-card/index"
|
||||
}
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-toast": "tdesign-miniprogram/toast/toast",
|
||||
"goods-card": "/components/goods-card/index",
|
||||
"specs-popup": "/components/specs-popup/index"
|
||||
}
|
||||
}
|
||||
@ -1,17 +1,16 @@
|
||||
<view class="goods-list-wrap wr-class" id="{{independentID}}">
|
||||
<block wx:for="{{goodsList}}" wx:for-item="item" wx:key="index">
|
||||
<goods-card
|
||||
id="{{independentID}}-gd-{{index}}"
|
||||
data="{{item}}"
|
||||
currency="{{item.currency || '¥'}}"
|
||||
thresholds="{{thresholds}}"
|
||||
class="goods-card-inside"
|
||||
data-index="{{index}}"
|
||||
type="{{type}}"
|
||||
bind:thumb="onClickGoodsThumb"
|
||||
bind:click="onClickGoods"
|
||||
bind:add-cart="onAddCart"
|
||||
/>
|
||||
</block>
|
||||
<block wx:for="{{goodsList}}" wx:for-item="item" wx:key="index">
|
||||
<goods-card id="{{independentID}}-gd-{{index}}" data="{{item}}" currency="{{item.currency || '¥'}}" thresholds="{{thresholds}}" class="goods-card-inside" data-index="{{index}}" type="{{type}}" bind:thumb="onClickGoodsThumb" bind:click="onClickGoods" bind:add-cart="onAddCart" />
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!-- 弹窗 -->
|
||||
<specs-popup id="goodsSpecsPopup" show="{{isSpuSelectPopupShow}}" title="{{details.title || ''}}" src="{{specImg ? specImg : primaryImage}}" specList="{{details.specList || []}}" skuList="{{skuArray}}" limitBuyInfo="{{details.limitInfo[0].text || ''}}" limitMaxCount="{{ selectSkuQuantity || details.spuStockQuantity }}" quantity="{{ details.spuStockQuantity }}" bind:closeSpecsPopup="handlePopupHide" bind:change="chooseSpecItem" bind:changeNum="changeNum" bind:addCart="addCart" bind:specsConfirm="specsConfirm" isStock="{{isStock}}" outOperateStatus="{{outOperateStatus}}">
|
||||
<view slot="goods-price">
|
||||
<view class="popup-sku__price">
|
||||
<price wx:if="{{!isAllSelectedSku || (!promotionSubCode && isAllSelectedSku)}}" price="{{selectSkuSellsPrice ? selectSkuSellsPrice : minSalePrice }}" priceUnit="yuan" wr-class="popup-sku__price-num" symbol-class="popup-sku__price-symbol" />
|
||||
<price wx:if="{{selectSkuLinePrice !== 0}}" price="{{selectSkuLinePrice ? selectSkuLinePrice : maxLinePrice }}" priceUnit="yuan" wr-class="popup-sku__price-del" type="delthrough" />
|
||||
</view>
|
||||
</view>
|
||||
</specs-popup>
|
||||
<t-toast id="t-toast" />
|
||||
@ -5,3 +5,7 @@
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.t-toast__content {
|
||||
z-index: 12001 !important;
|
||||
}
|
||||
371
components/specs-popup/index.js
Normal file
371
components/specs-popup/index.js
Normal file
@ -0,0 +1,371 @@
|
||||
import Toast from 'tdesign-miniprogram/toast/index';
|
||||
|
||||
Component({
|
||||
options: {
|
||||
multipleSlots: true,
|
||||
addGlobalClass: true,
|
||||
},
|
||||
|
||||
properties: {
|
||||
src: {
|
||||
type: String,
|
||||
},
|
||||
title: String,
|
||||
show: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
limitBuyInfo: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
isStock: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
limitMaxCount: {
|
||||
type: Number,
|
||||
value: 999,
|
||||
},
|
||||
limitMinCount: {
|
||||
type: Number,
|
||||
value: 1,
|
||||
},
|
||||
quantity: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
},
|
||||
skuList: {
|
||||
type: Array,
|
||||
value: [],
|
||||
observer(skuList) {
|
||||
if (skuList && skuList.length > 0) {
|
||||
if (this.initStatus) {
|
||||
this.initData();
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
specList: {
|
||||
type: Array,
|
||||
value: [],
|
||||
observer(specList) {
|
||||
if (specList && specList.length > 0) {
|
||||
this.initData();
|
||||
}
|
||||
},
|
||||
},
|
||||
outOperateStatus: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
hasAuth: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
count: {
|
||||
type: Number,
|
||||
value: 1,
|
||||
observer(count) {
|
||||
this.setData({
|
||||
buyNum: count,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
initStatus: false,
|
||||
selectedSku: {},
|
||||
selectSpecObj: {},
|
||||
|
||||
data: {
|
||||
buyNum: 1,
|
||||
isAllSelectedSku: false,
|
||||
},
|
||||
|
||||
methods: {
|
||||
initData() {
|
||||
const {
|
||||
skuList
|
||||
} = this.properties;
|
||||
const {
|
||||
specList
|
||||
} = this.properties;
|
||||
specList.forEach((item) => {
|
||||
if (item.specValueList.length > 0) {
|
||||
item.specValueList.forEach((subItem) => {
|
||||
const obj = this.checkSkuStockQuantity(subItem.specValueId, skuList);
|
||||
subItem.hasStockObj = obj;
|
||||
});
|
||||
}
|
||||
});
|
||||
const selectedSku = {};
|
||||
specList.forEach((item) => {
|
||||
selectedSku[item.specId] = '';
|
||||
});
|
||||
this.setData({
|
||||
specList,
|
||||
});
|
||||
this.selectSpecObj = {};
|
||||
this.selectedSku = {};
|
||||
this.initStatus = true;
|
||||
},
|
||||
|
||||
checkSkuStockQuantity(specValueId, skuList) {
|
||||
let hasStock = false;
|
||||
const array = [];
|
||||
skuList.forEach((item) => {
|
||||
(item.specInfo || []).forEach((subItem) => {
|
||||
if (subItem.specValueId === specValueId && item.quantity > 0) {
|
||||
const subArray = [];
|
||||
(item.specInfo || []).forEach((specItem) => {
|
||||
subArray.push(specItem.specValueId);
|
||||
});
|
||||
array.push(subArray);
|
||||
hasStock = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
return {
|
||||
hasStock,
|
||||
specsArray: array,
|
||||
};
|
||||
},
|
||||
|
||||
chooseSpecValueId(specValueId, specId) {
|
||||
const {
|
||||
selectSpecObj
|
||||
} = this;
|
||||
const {
|
||||
skuList,
|
||||
specList
|
||||
} = this.properties;
|
||||
if (selectSpecObj[specId]) {
|
||||
selectSpecObj[specId] = [];
|
||||
this.selectSpecObj = selectSpecObj;
|
||||
} else {
|
||||
selectSpecObj[specId] = [];
|
||||
}
|
||||
|
||||
const itemAllSpecArray = [];
|
||||
const itemUnSelectArray = [];
|
||||
const itemSelectArray = [];
|
||||
specList.forEach((item) => {
|
||||
if (item.specId === specId) {
|
||||
const subSpecValueItem = item.specValueList.find((subItem) => subItem.specValueId === specValueId);
|
||||
let specSelectStatus = false;
|
||||
item.specValueList.forEach((n) => {
|
||||
itemAllSpecArray.push(n.hasStockObj.specsArray);
|
||||
if (n.isSelected) {
|
||||
specSelectStatus = true;
|
||||
}
|
||||
if (n.hasStockObj.hasStock) {
|
||||
itemSelectArray.push(n.specValueId);
|
||||
} else {
|
||||
itemUnSelectArray.push(n.specValueId);
|
||||
}
|
||||
});
|
||||
if (specSelectStatus) {
|
||||
selectSpecObj[specId] = this.flatten(subSpecValueItem?.hasStockObj.specsArray.concat(itemSelectArray));
|
||||
} else {
|
||||
const subSet = function (arr1, arr2) {
|
||||
const set2 = new Set(arr2);
|
||||
const subset = [];
|
||||
arr1.forEach((val) => {
|
||||
if (!set2.has(val)) {
|
||||
subset.push(val);
|
||||
}
|
||||
});
|
||||
return subset;
|
||||
};
|
||||
selectSpecObj[specId] = subSet(this.flatten(itemAllSpecArray), this.flatten(itemUnSelectArray));
|
||||
}
|
||||
} else {
|
||||
// 未点击规格的逻辑
|
||||
const itemSelectArray = [];
|
||||
let specSelectStatus = false;
|
||||
item.specValueList.map(
|
||||
// 找到有库存的规格数组
|
||||
(n) => {
|
||||
itemSelectArray.push(n.hasStockObj.specsArray);
|
||||
if (n.isSelected) {
|
||||
specSelectStatus = true;
|
||||
}
|
||||
n.hasStockObj.hasStock = true;
|
||||
return n;
|
||||
},
|
||||
);
|
||||
if (specSelectStatus) {
|
||||
selectSpecObj[item.specId] = this.flatten(itemSelectArray);
|
||||
} else {
|
||||
delete selectSpecObj[item.specId];
|
||||
}
|
||||
}
|
||||
this.selectSpecObj = selectSpecObj;
|
||||
});
|
||||
const combatArray = Object.values(selectSpecObj);
|
||||
if (combatArray.length > 0) {
|
||||
const showArray = combatArray.reduce((x, y) => this.getIntersection(x, y));
|
||||
const lastResult = Array.from(new Set(showArray));
|
||||
specList.forEach((item) => {
|
||||
item.specValueList.forEach((subItem) => {
|
||||
if (lastResult.includes(subItem.specValueId)) {
|
||||
subItem.hasStockObj.hasStock = true;
|
||||
} else {
|
||||
subItem.hasStockObj.hasStock = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
} else {
|
||||
specList.forEach((item) => {
|
||||
if (item.specValueList.length > 0) {
|
||||
item.specValueList.forEach((subItem) => {
|
||||
const obj = this.checkSkuStockQuantity(subItem.specValueId, skuList);
|
||||
subItem.hasStockObj = obj;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
this.setData({
|
||||
specList,
|
||||
});
|
||||
},
|
||||
|
||||
flatten(input) {
|
||||
const stack = [...input];
|
||||
const res = [];
|
||||
while (stack.length) {
|
||||
const next = stack.pop();
|
||||
if (Array.isArray(next)) {
|
||||
stack.push(...next);
|
||||
} else {
|
||||
res.push(next);
|
||||
}
|
||||
}
|
||||
return res.reverse();
|
||||
},
|
||||
|
||||
getIntersection(array, nextArray) {
|
||||
return array.filter((item) => nextArray.includes(item));
|
||||
},
|
||||
|
||||
toChooseItem(e) {
|
||||
const {
|
||||
isStock
|
||||
} = this.properties;
|
||||
if (!isStock) return;
|
||||
const {
|
||||
id
|
||||
} = e.currentTarget.dataset;
|
||||
const specId = e.currentTarget.dataset.specid;
|
||||
const hasStock = e.currentTarget.dataset.hasstock;
|
||||
if (!hasStock) {
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: '该规格已售罄',
|
||||
icon: '',
|
||||
duration: 1000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
let {
|
||||
selectedSku
|
||||
} = this;
|
||||
const {
|
||||
specList
|
||||
} = this.properties;
|
||||
selectedSku =
|
||||
selectedSku[specId] === id ? {
|
||||
...this.selectedSku,
|
||||
[specId]: ''
|
||||
} : {
|
||||
...this.selectedSku,
|
||||
[specId]: id
|
||||
};
|
||||
specList.forEach((item) => {
|
||||
item.specValueList.forEach((valuesItem) => {
|
||||
if (item.specId === specId) {
|
||||
valuesItem.isSelected = valuesItem.specValueId === selectedSku[specId];
|
||||
}
|
||||
});
|
||||
});
|
||||
this.chooseSpecValueId(id, specId);
|
||||
const isAllSelectedSku = this.isAllSelected(specList, selectedSku);
|
||||
if (!isAllSelectedSku) {
|
||||
this.setData({
|
||||
selectSkuSellsPrice: 0,
|
||||
selectSkuImg: '',
|
||||
});
|
||||
}
|
||||
this.setData({
|
||||
specList,
|
||||
isAllSelectedSku,
|
||||
});
|
||||
this.selectedSku = selectedSku;
|
||||
this.triggerEvent('change', {
|
||||
specList,
|
||||
selectedSku,
|
||||
isAllSelectedSku,
|
||||
});
|
||||
},
|
||||
|
||||
// 判断是否所有的sku都已经选中
|
||||
isAllSelected(skuTree, selectedSku) {
|
||||
const selected = Object.keys(selectedSku).filter((skuKeyStr) => selectedSku[skuKeyStr] !== '');
|
||||
return skuTree.length === selected.length;
|
||||
},
|
||||
|
||||
handlePopupHide() {
|
||||
this.triggerEvent('closeSpecsPopup', {
|
||||
show: false,
|
||||
});
|
||||
},
|
||||
|
||||
specsConfirm() {
|
||||
const {
|
||||
isStock
|
||||
} = this.properties;
|
||||
if (!isStock) return;
|
||||
this.triggerEvent('specsConfirm');
|
||||
},
|
||||
|
||||
addCart() {
|
||||
const {
|
||||
isStock
|
||||
} = this.properties;
|
||||
if (!isStock) return;
|
||||
this.triggerEvent('addCart');
|
||||
},
|
||||
|
||||
// buyNow() {
|
||||
// const { isAllSelectedSku } = this.data;
|
||||
// const { isStock } = this.properties;
|
||||
// if (!isStock) return;
|
||||
// this.triggerEvent('buyNow', {
|
||||
// isAllSelectedSku,
|
||||
// });
|
||||
// },
|
||||
|
||||
// 总处理
|
||||
setBuyNum(buyNum) {
|
||||
this.setData({
|
||||
buyNum,
|
||||
});
|
||||
this.triggerEvent('changeNum', {
|
||||
buyNum,
|
||||
});
|
||||
},
|
||||
|
||||
handleBuyNumChange(e) {
|
||||
const {
|
||||
value
|
||||
} = e.detail;
|
||||
this.setData({
|
||||
buyNum: value,
|
||||
});
|
||||
this.setBuyNum(value)
|
||||
},
|
||||
},
|
||||
});
|
||||
10
components/specs-popup/index.json
Normal file
10
components/specs-popup/index.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-popup": "tdesign-miniprogram/popup/popup",
|
||||
"t-icon": "tdesign-miniprogram/icon/icon",
|
||||
"t-image": "/components/webp-image/index",
|
||||
"t-stepper": "tdesign-miniprogram/stepper/stepper",
|
||||
"t-toast": "tdesign-miniprogram/toast/toast"
|
||||
}
|
||||
}
|
||||
65
components/specs-popup/index.wxml
Normal file
65
components/specs-popup/index.wxml
Normal file
@ -0,0 +1,65 @@
|
||||
<t-popup visible="{{show}}" placement="bottom" bind:visible-change="handlePopupHide">
|
||||
<view class="popup-container">
|
||||
<view class="popup-close" bindtap="handlePopupHide">
|
||||
<t-icon name="close" size="36rpx" />
|
||||
</view>
|
||||
<view class="popup-sku-header">
|
||||
<!-- <t-image t-class="popup-sku-header__img" src="{{src}}" /> -->
|
||||
<image class="popup-sku-header__img" src="{{src}}" mode="aspectFill" />
|
||||
<view class="popup-sku-header__goods-info">
|
||||
<view class="popup-sku__goods-name">{{title}}</view>
|
||||
<view class="goods-price-container">
|
||||
<slot name="goods-price" />
|
||||
</view>
|
||||
<view class="goods-inventory">库存 {{ limitMaxCount != 0 ? limitMaxCount : quantity }} 件</view>
|
||||
<!-- 已选规格 -->
|
||||
<view class="popup-sku__selected-spec">
|
||||
<view wx:if="{{specList.length != 0}}">选择：</view>
|
||||
<view wx:for="{{specList}}" wx:key="specId">
|
||||
<view class="popup-sku__selected-item" wx:for="{{item.specValueList}}" wx:for-item="selectedItem" wx:if="{{selectedItem.isSelected}}" wx:key="specValueId">
|
||||
{{selectedItem.specValue}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="popup-sku-body">
|
||||
<view class="popup-sku-group-container">
|
||||
<view class="popup-sku-row" wx:for="{{specList}}" wx:key="specId">
|
||||
<view class="popup-sku-row__title">{{item.title}}</view>
|
||||
<block wx:for="{{item.specValueList}}" wx:for-item="valuesItem" wx:for-index="valuesIndex" wx:key="specValueId">
|
||||
<view class="popup-sku-row__item {{valuesItem.isSelected ? 'popup-sku-row__item--active' : ''}} {{!valuesItem.hasStockObj.hasStock || !isStock ? 'disabled-sku-selected' : ''}}" data-specid="{{item.specId}}" data-id="{{valuesItem.specValueId}}" data-val="{{valuesItem.specValue}}" data-hasStock="{{valuesItem.hasStockObj.hasStock}}" bindtap="toChooseItem">
|
||||
{{valuesItem.specValue}}
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<view class="popup-sku-stepper-stock">
|
||||
<view class="popup-sku-stepper-container">
|
||||
<view class="popup-sku__stepper-title">
|
||||
购买数量
|
||||
<view class="limit-text" wx:if="{{limitBuyInfo}}"> ({{limitBuyInfo}}) </view>
|
||||
</view>
|
||||
<t-stepper value="{{buyNum}}" min="{{1}}" max="{{limitMaxCount}}" theme="filled" bind:change="handleBuyNumChange" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view wx:if="{{outOperateStatus}}" class="single-confirm-btn {{!isStock ? 'disabled' : ''}}" bindtap="specsConfirm">
|
||||
确定
|
||||
</view>
|
||||
<view class="popup-sku-actions flex flex-between {{!isStock ? 'popup-sku-disabled' : ''}}" wx:if="{{!outOperateStatus}}">
|
||||
<view class="sku-operate">
|
||||
<view class="selected-sku-btn sku-operate-addCart {{!isStock ? 'disabled' : ''}}" bindtap="addCart">
|
||||
加入购物车
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="sku-operate">
|
||||
<view class="selected-sku-btn sku-operate-buyNow {{!isStock ? 'disabled' : ''}}" bindtap="buyNow">
|
||||
立即购买
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<slot name="bottomSlot" />
|
||||
</view>
|
||||
</t-popup>
|
||||
<t-toast id="t-toast" />
|
||||
250
components/specs-popup/index.wxss
Normal file
250
components/specs-popup/index.wxss
Normal file
@ -0,0 +1,250 @@
|
||||
.popup-container {
|
||||
background-color: #ffffff;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
|
||||
}
|
||||
|
||||
.popup-container .popup-close {
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 30rpx;
|
||||
z-index: 9;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.popup-sku-header {
|
||||
display: flex;
|
||||
padding: 30rpx 28rpx 0 30rpx;
|
||||
}
|
||||
|
||||
.popup-sku-header .popup-sku-header__img {
|
||||
width: 176rpx;
|
||||
height: 176rpx;
|
||||
border-radius: 8rpx;
|
||||
background: #d8d8d8;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.popup-sku-header .popup-sku-header__goods-info {
|
||||
position: relative;
|
||||
width: 500rpx;
|
||||
}
|
||||
|
||||
.popup-sku-header .popup-sku-header__goods-info .popup-sku__goods-name {
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
white-space: normal;
|
||||
overflow: hidden;
|
||||
width: 430rpx;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.popup-sku-header .popup-sku-header__goods-info .popup-sku__selected-spec {
|
||||
display: flex;
|
||||
color: #333333;
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.popup-sku-header .popup-sku-header__goods-info .popup-sku__selected-spec .popup-sku__selected-item {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.popup-sku-body {
|
||||
margin: 0 30rpx 40rpx;
|
||||
max-height: 600rpx;
|
||||
overflow-y: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.popup-sku-body .popup-sku-group-container .popup-sku-row {
|
||||
padding: 32rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.popup-sku-body .popup-sku-group-container .popup-sku-row .popup-sku-row__title {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.popup-sku-body .popup-sku-group-container .popup-sku-row .popup-sku-row__item {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
min-width: 128rpx;
|
||||
height: 56rpx;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #f5f5f5;
|
||||
margin: 19rpx 26rpx 0 0;
|
||||
padding: 0 16rpx;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.popup-sku-body .popup-sku-group-container .popup-sku-row .popup-sku-row__item.popup-sku-row__item--active {
|
||||
border: 2rpx solid #1989fa;
|
||||
color: #1989fa;
|
||||
background: rgba(255, 95, 21, 0.04);
|
||||
}
|
||||
|
||||
.popup-sku-body .popup-sku-group-container .popup-sku-row .disabled-sku-selected {
|
||||
background: #f5f5f5 !important;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.popup-sku-body .popup-sku-stepper-stock .popup-sku-stepper-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 40rpx 0;
|
||||
}
|
||||
|
||||
.popup-sku-body .popup-sku-stepper-stock .popup-sku-stepper-container .popup-sku__stepper-title {
|
||||
display: flex;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.popup-sku-body .popup-sku-stepper-stock .popup-sku-stepper-container .popup-sku__stepper-title .limit-text {
|
||||
margin-left: 10rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.popup-sku-body .popup-sku-stepper-stock .popup-sku-stepper-container .popup-stepper {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
font-size: 28px;
|
||||
height: 48rpx;
|
||||
line-height: 62rpx;
|
||||
}
|
||||
|
||||
.popup-sku-body .popup-sku-stepper-stock .popup-sku-stepper-container .popup-stepper .input-btn,
|
||||
.popup-sku-body .popup-sku-stepper-stock .popup-sku-stepper-container .popup-stepper .input-num-wrap {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.popup-sku-body .popup-sku-stepper-stock .popup-sku-stepper-container .popup-stepper .input-num-wrap {
|
||||
color: #282828;
|
||||
display: flex;
|
||||
max-width: 76rpx;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.popup-sku-body .popup-sku-stepper-stock .popup-sku-stepper-container .popup-stepper .input-num-wrap .input-num {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
font-weight: 600;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.popup-sku-body .popup-sku-stepper-stock .popup-sku-stepper-container .popup-stepper .input-btn {
|
||||
width: 48rpx;
|
||||
}
|
||||
|
||||
.popup-sku-body .popup-sku-stepper-stock .popup-sku-stepper-container .popup-stepper .popup-stepper__minus {
|
||||
margin-right: 4rpx;
|
||||
border-radius: 4rpx;
|
||||
color: #9a979b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.popup-sku-body .popup-sku-stepper-stock .popup-sku-stepper-container .popup-stepper .popup-stepper__plus {
|
||||
margin-left: 4rpx;
|
||||
border-radius: 4rpx;
|
||||
color: #9a979b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.popup-sku-body .popup-sku-stepper-stock .popup-sku-stepper-container .popup-stepper .popup-stepper__plus::after {
|
||||
width: 24rpx;
|
||||
height: 3rpx;
|
||||
background-color: #999999;
|
||||
}
|
||||
|
||||
.popup-sku-body .popup-sku-stepper-stock .popup-sku-stepper-container .popup-stepper .popup-stepper__plus::before {
|
||||
width: 3rpx;
|
||||
height: 24rpx;
|
||||
background-color: #999999;
|
||||
}
|
||||
|
||||
.popup-sku-actions {
|
||||
font-size: 32rpx;
|
||||
height: 80rpx;
|
||||
text-align: center;
|
||||
line-height: 80rpx;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.popup-sku-actions .sku-operate {
|
||||
height: 80rpx;
|
||||
width: 100%;
|
||||
/* color: #1989fa; */
|
||||
border-radius: 48rpx;
|
||||
}
|
||||
|
||||
.popup-sku-actions .sku-operate .sku-operate-addCart {
|
||||
background-color: #1989fa;
|
||||
color: #f8f8f8;
|
||||
border-radius: 48rpx;
|
||||
}
|
||||
|
||||
.popup-sku-actions .sku-operate .sku-operate-addCart.disabled {
|
||||
background: rgb(221, 221, 221);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.popup-sku-actions .sku-operate .sku-operate-buyNow {
|
||||
background-color: #1989fa;
|
||||
border-radius: 0 48rpx 48rpx 0;
|
||||
}
|
||||
|
||||
.popup-sku-actions .sku-operate .sku-operate-buyNow.disabled {
|
||||
color: #fff;
|
||||
background: rgb(198, 198, 198);
|
||||
}
|
||||
|
||||
.popup-sku-actions .sku-operate .selected-sku-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.popup-container .single-confirm-btn {
|
||||
border-radius: 48rpx;
|
||||
color: #ffffff;
|
||||
margin: 0 32rpx;
|
||||
font-size: 32rpx;
|
||||
height: 80rpx;
|
||||
text-align: center;
|
||||
line-height: 88rpx;
|
||||
background-color: #1989fa;
|
||||
}
|
||||
|
||||
.popup-container .single-confirm-btn.disabled {
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
background-color: #dddddd;
|
||||
}
|
||||
|
||||
.goods-inventory {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.t-toast__content {
|
||||
z-index: 12000 !important;
|
||||
}
|
||||
@ -197,7 +197,7 @@ Page({
|
||||
});
|
||||
this.selectSpecsName(selectedSkuValues.length > 0 ? selectedAttrStr : '');
|
||||
if (skuItem) {
|
||||
console.log(skuItem[0],'选中的item');
|
||||
console.log(skuItem[0], '选中的item');
|
||||
this.setData({
|
||||
selectedSkuId: skuItem[0]?.skuId,
|
||||
selectItem: skuItem,
|
||||
@ -221,7 +221,7 @@ Page({
|
||||
getSelectedSkuValues(skuTree, selectedSku) {
|
||||
const normalizedTree = this.normalizeSkuTree(skuTree);
|
||||
return Object.keys(selectedSku).reduce((selectedValues, skuKeyStr) => {
|
||||
console.log(selectedSku,'sku啊');
|
||||
console.log(selectedSku, 'sku啊');
|
||||
const skuValues = normalizedTree[skuKeyStr];
|
||||
const skuValueId = selectedSku[skuKeyStr];
|
||||
if (skuValueId !== '') {
|
||||
@ -275,13 +275,12 @@ Page({
|
||||
duration: 1000,
|
||||
});
|
||||
}
|
||||
}
|
||||
else{
|
||||
} else {
|
||||
this.addCartFun()
|
||||
}
|
||||
},
|
||||
|
||||
addCartFun(){
|
||||
addCartFun() {
|
||||
const {
|
||||
isAllSelectedSku,
|
||||
buyNum,
|
||||
@ -359,7 +358,7 @@ Page({
|
||||
thumb: this.data.details.primaryImage,
|
||||
title: this.data.details.title,
|
||||
};
|
||||
console.log(query,'从立刻购买来的');
|
||||
console.log(query, '从立刻购买来的');
|
||||
let urlQueryStr = obj2Params({
|
||||
goodsRequestList: JSON.stringify([query]),
|
||||
});
|
||||
|
||||
@ -38,7 +38,11 @@ Page({
|
||||
swiperImageProps: {
|
||||
mode: 'scaleToFill',
|
||||
},
|
||||
categoryGuid: 0
|
||||
categoryGuid: 0,
|
||||
// 加入购物车
|
||||
buyType: 0,
|
||||
outOperateStatus: false, // 是否外层加入购物车
|
||||
isSpuSelectPopupShow: false,
|
||||
},
|
||||
|
||||
goodListPagination: {
|
||||
@ -104,20 +108,20 @@ Page({
|
||||
});
|
||||
this.loadGoodsList(true);
|
||||
});
|
||||
// 获取公告列表
|
||||
getNoticeList().then((res) => {
|
||||
if (res.code == 200) {
|
||||
const _noticeData = res.data.map((v) => {
|
||||
return {
|
||||
...v,
|
||||
visible: true
|
||||
};
|
||||
});
|
||||
this.setData({
|
||||
noticeList: _noticeData,
|
||||
});
|
||||
}
|
||||
// 获取公告列表
|
||||
getNoticeList().then((res) => {
|
||||
if (res.code == 200) {
|
||||
const _noticeData = res.data.map((v) => {
|
||||
return {
|
||||
...v,
|
||||
visible: true
|
||||
};
|
||||
});
|
||||
this.setData({
|
||||
noticeList: _noticeData,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
tabChangeHandle(e) {
|
||||
@ -183,11 +187,13 @@ Page({
|
||||
});
|
||||
},
|
||||
|
||||
goodListAddCartHandle() {
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: '点击加入购物车',
|
||||
// 加入购物车
|
||||
goodListAddCartHandle(type) {
|
||||
console.log(type);
|
||||
this.setData({
|
||||
buyType: 0,
|
||||
outOperateStatus: 1,
|
||||
isSpuSelectPopupShow: true,
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
@ -19,12 +19,12 @@
|
||||
</view>
|
||||
<view class="notice-container ">
|
||||
<view wx:for="{{noticeList}}">
|
||||
<t-notice-bar class="notice-bar" visible="{{item.visible}}" prefixIcon="null" marquee="{{marquee}}" content="{{item.noticeContent}}" suffixIcon="close" bind:click="closeNotice">
|
||||
<t-notice-bar class="notice-bar" visible="{{item.visible}}" prefixIcon="null" marquee="{{marquee}}" content="{{item.noticeContent}}">
|
||||
<view slot="prefix-icon" class="notice-title">{{item.noticeTitle}}</view>
|
||||
</t-notice-bar>
|
||||
</view>
|
||||
</view>
|
||||
<goods-list wr-class="goods-list-container" goodsList="{{goodsList}}" bind:click="goodListClickHandle" bind:addcart="goodListAddCartHandle" />
|
||||
<load-more list-is-empty="{{!goodsList.length}}" status="{{goodsListLoadStatus}}" bind:retry="onReTry" />
|
||||
<t-toast id="t-toast" />
|
||||
</view>
|
||||
</view>
|
||||
<t-toast id="t-toast" />
|
||||
Loading…
Reference in New Issue
Block a user