yudao
/
mall-uniapp
mirror of https://gitee.com/yudaocode/yudao-mall-uniapp.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

【秒杀商品详情】 

1. 完整接入 SKU 选择
pull/1/MERGE
YunaiV 2023-06-11 18:37:40 +08:00
parent 07b9521a63
commit 7bc30ba3eb
3 changed files with 160 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/productWindow/index.vue
View File

@ -48,7 +48,10 @@
+ +
</view> </view>
<view v-else class='item plus' <view v-else class='item plus'
:class='(attr.productSelect.cart_num >= attr.productSelect.quota) || (attr.productSelect.cart_num >= attr.productSelect.stock) || (attr.productSelect.cart_num >= attr.productSelect.num)? "on":""' :class='(attr.productSelect.cart_num >= attr.productSelect.quota) // 大于总限购
|| (attr.productSelect.cart_num >= attr.productSelect.stock) // 大于库存
|| (attr.productSelect.cart_num >= attr.productSelect.limitCount) // 大于单个商品限售
? "on":""'
@click='CartNumAdd'>+</view> @click='CartNumAdd'>+</view>
</view> </view>
</view> </view>

313
pages/activity/goods_seckill_details/index.vue
View File

@ -47,7 +47,7 @@
</view> </view>
</view> </view>
<!-- SKU 选择 --> <!-- SKU 选择 -->
<view class='attribute acea-row row-between-wrapper mb30 borRadius14' @tap='selecAttr'> <view class='attribute acea-row row-between-wrapper mb30 borRadius14' @tap='openAttr'>
<view class="line1">{{ attrValue.length > 0 ? "已选择" : "请选择" }}： <view class="line1">{{ attrValue.length > 0 ? "已选择" : "请选择" }}：
<text class='atterTxt'>{{attrValue}}</text> <text class='atterTxt'>{{attrValue}}</text>
</view> </view>
@ -129,11 +129,10 @@
<product-window <product-window
:attr='attribute' :attr='attribute'
:limitNum='1' :limitNum='1'
@myevent="onMyEvent"
@ChangeAttr="ChangeAttr" @ChangeAttr="ChangeAttr"
@ChangeCartNum="ChangeCartNum" @ChangeCartNum="ChangeCartNum"
@attrVal="attrVal"
@iptCartNum="iptCartNum" @iptCartNum="iptCartNum"
@close="closeAttr"
/> />
<home></home> <home></home>
<!-- 分享按钮 TODO--> <!-- 分享按钮 TODO-->
@ -466,8 +465,21 @@
this.$set(this, 'spu', spu); this.$set(this, 'spu', spu);
this.$set(this.attribute, 'properties', ProductUtil.convertProductPropertyList(skus)); this.$set(this.attribute, 'properties', ProductUtil.convertProductPropertyList(skus));
this.$set(this, 'skuMap', ProductUtil.convertProductSkuMap(skus)); this.$set(this, 'skuMap', ProductUtil.convertProductSkuMap(skus));
// TODO 芋艿：需要设置个 minPrice // 将秒杀活动的信息，合并到 SKU 里面，实现秒杀价格的显示
this.activity.products.forEach(product => {
this.spu.price = Math.min(this.spu.price, product.seckillPrice); // 设置 SPU 的最低价格
});
skus.forEach(sku => {
const product = this.activity.products.find(product => product.skuId === sku.id);
if (product) {
sku.price = product.seckillPrice;
sku.quota = product.quota;
sku.limitCount = product.limitCount;
} else { // 找不到可能是没配置，则不能发起秒杀
sku.quota = 0;
sku.limitCount = 0;
}
});
// 处理滚动条 // 处理滚动条
setTimeout(() => { setTimeout(() => {
@ -491,10 +503,6 @@
// 选中默认 sku // 选中默认 sku
this.selectDefaultSku(); this.selectDefaultSku();
}).catch(err => { }).catch(err => {
// TODO 芋艿：临时去掉
if (true) {
return
}
return this.$util.Tips({ return this.$util.Tips({
title: err.toString() title: err.toString()
}, { }, {
@ -503,68 +511,9 @@
}); });
}) })
}, },
/**
// TODO 芋艿：暂未整理 * 默认选中属性
*/
kefuClick(){
location.href = this.chatUrl;
},
closePosters:function(){
this.posters = false;
},
getProductReplyList: function() {
getReplyList(this.storeInfo.productId, {
page: 1,
limit: 3,
type: 0,
}).then(res => {
this.reply = res.data.list;
})
},
getProductReplyCount: function() {
let that = this;
getReplyConfig(that.storeInfo.productId).then(res => {
that.$set(that, 'replyChance', res.data.replyChance * 100);
that.$set(that, 'replyCount', res.data.sumCount);
});
},
/**
* 购物车手动填写
*
*/
iptCartNum: function (e) {
this.$set(this.attribute.productSelect, 'cart_num', e?e:1);
this.$set(this, "cart_num", e);
if (e > 1) {
return this.$util.Tips({
title: `该商品每次限购1${this.storeInfo.unitName}`
});
}
},
// 后退
returns: function() {
uni.navigateBack()
},
setShare: function() {
this.$wechat.isWeixin() &&
this.$wechat.wechatEvevt([
"updateAppMessageShareData",
"updateTimelineShareData",
"onMenuShareAppMessage",
"onMenuShareTimeline"
], {
desc: this.storeInfo.info,
title: this.storeInfo.title,
link: location.href,
imgUrl: this.storeInfo.image
}).then(res => {
}).catch(err => {
console.log(err);
});
},
/**
* 默认选中属性
*/
selectDefaultSku: function() { selectDefaultSku: function() {
const properties = this.attribute.properties; const properties = this.attribute.properties;
// 获得选中的属性值的名字，例如说 "黑色,大"，则 skuKey = ["黑色", "大"] // 获得选中的属性值的名字，例如说 "黑色,大"，则 skuKey = ["黑色", "大"]
@ -593,99 +542,145 @@
this.$set(this.attribute.productSelect, "price", sku.price); this.$set(this.attribute.productSelect, "price", sku.price);
this.$set(this.attribute.productSelect, "stock", sku.stock); this.$set(this.attribute.productSelect, "stock", sku.stock);
this.$set(this.attribute.productSelect, "cart_num", 1); this.$set(this.attribute.productSelect, "cart_num", 1);
// 秒杀活动特有字段
this.$set(this.attribute.productSelect, "quota", sku.quota); this.$set(this.attribute.productSelect, "quota", sku.quota);
this.$set(this.attribute.productSelect, "limitCount", sku.limitCount);
this.$set(this, "attrValue", skuKey.join(",")); this.$set(this, "attrValue", skuKey.join(","));
}, },
selecAttr: function() { /**
this.attribute.cartAttr = true * 打开 SKU 属性的选择
}, */
onMyEvent: function() { openAttr: function() {
this.$set(this.attribute, 'cartAttr', false); this.$set(this.attribute, 'cartAttr', true);
this.$set(this, 'isOpen', false); },
}, /**
/** * 关闭 productWindow 弹窗
* 购物车数量加和数量减 */
* closeAttr: function() {
*/ this.$set(this.attribute, 'cartAttr', false);
ChangeCartNum: function(changeValue) { },
//changeValue:是否 加|减 /**
//获取当前变动属性 * 属性变动赋值
let productSelect = this.productValue[this.attrValue]; *
if (this.cart_num) { * @param newSkuKey 新的 skuKey
productSelect.cart_num = this.cart_num; * @param propertyIndex properties 的下标
this.attribute.productSelect.cart_num = this.cart_num; * @param valueIndex values 的下标
} */
//如果没有属性,赋值给商品默认库存 ChangeAttr: function(newSkuKey, propertyIndex, valueIndex) {
if (productSelect === undefined && !this.attribute.productAttr.length) // SKU
productSelect = this.attribute.productSelect; let sku = this.skuMap[newSkuKey];
//无属性值即库存为0；不存在加减； if (!sku) {
if (productSelect === undefined) return; return;
let stock = productSelect.stock || 0; }
let quota = productSelect.quota || 0; this.$set(this.attribute.productSelect, "id", sku.id);
let num = this.attribute.productSelect; this.$set(this.attribute.productSelect, "picUrl", sku.picUrl);
//设置默认数据 this.$set(this.attribute.productSelect, "price", sku.price);
if (productSelect.cart_num == undefined) productSelect.cart_num = 1; this.$set(this.attribute.productSelect, "stock", sku.stock);
if (changeValue) { this.$set(this.attribute.productSelect, "quota", sku.quota);
if (num.cart_num === 1) { this.$set(this.attribute.productSelect, "limitCount", sku.limitCount);
return this.$util.Tips({ this.$set(this.attribute.productSelect, "cart_num", 1);
title: `该商品每次限购 1 ${this.storeInfo.unitName}` // SKU 关联属性
}); this.$set(this.attribute.properties[propertyIndex], 'index',
} this.attribute.properties[propertyIndex].values[valueIndex].name);
num.cart_num++; this.$set(this, "attrValue", newSkuKey);
let arrMin = []; },
arrMin.push(quota); /**
arrMin.push(stock); * 购物车数量加和数量减
let minN = Math.min.apply(null, arrMin); *
if (num.cart_num >= minN) { * @param changeValue true 增加；false 减少
this.$set(this.attribute.productSelect, "cart_num", minN ? minN : 1); */
this.$set(this, "cart_num", minN ? minN : 1); ChangeCartNum: function(changeValue) {
} // 获取当前 sku
this.$set(this, "cart_num", num.cart_num); let sku = this.attribute.productSelect;
this.$set(this.attribute.productSelect, "cart_num", num.cart_num); if (!sku) {
return;
}
} else { // 设置数量
num.cart_num--; let stock = sku.stock || 0;
if (num.cart_num < 1) { let quota = sku.quota || 0;
this.$set(this.attribute.productSelect, "cart_num", 1); let limitCount = sku.limitCount;
this.$set(this, "cart_num", 1); if (changeValue) {
} sku.cart_num++;
this.$set(this, "cart_num", num.cart_num); if (limitCount !== undefined && sku.cart_num > limitCount) {
this.$set(this.attribute.productSelect, "cart_num", num.cart_num); this.$set(this.attribute.productSelect, "cart_num", limitCount);
} this.$util.Tips({
}, title: `该商品每次限购 ${sku.limitCount} ${this.spu.unitName}`
attrVal(val) { });
this.attribute.productAttr[val.indexw].index = this.attribute.productAttr[val.indexw].attrValues[val.indexn]; } else if (sku.cart_num > stock || sku.cart_num > quota) {
}, this.$set(this.attribute.productSelect, "cart_num", Math.min(stock, quota));
/** }
* 属性变动赋值 } else {
* sku.cart_num--;
*/ if (sku.cart_num < 1) {
ChangeAttr: function(res) { this.$set(this.attribute.productSelect, "cart_num", 1);
this.$set(this,'cart_num',1); }
let productSelect = this.productValue[res]; }
if (productSelect) { },
this.$set(this.attribute.productSelect, "image", productSelect.image); /**
this.$set(this.attribute.productSelect, "price", productSelect.price); * 购物车手动填写
this.$set(this.attribute.productSelect, "stock", productSelect.stock); *
this.$set(this.attribute.productSelect, "unique", productSelect.id); * @param number 数量
this.$set(this.attribute.productSelect, "cart_num", 1); */
this.$set(this.attribute.productSelect, "quota", productSelect.quota); iptCartNum: function (number) {
this.$set(this.attribute.productSelect, "quotaShow", productSelect.quotaShow); this.$set(this.attribute.productSelect, 'cart_num', number ? number : 1);
this.$set(this, "attrValue", res); // 判断是否超限购
this.attrTxt = "已选择" let sku = this.attribute.productSelect;
} else { let limitCount = sku.limitCount;
this.$set(this.attribute.productSelect, "image", this.storeInfo.image); if (limitCount !== undefined && number > limitCount) {
this.$set(this.attribute.productSelect, "price", this.storeInfo.price); this.$set(this.attribute.productSelect, "cart_num", limitCount);
this.$set(this.attribute.productSelect, "stock", 0); this.$util.Tips({
this.$set(this.attribute.productSelect, "unique", ""); title: `该商品每次限购 ${sku.limitCount} ${this.spu.unitName}`
this.$set(this.attribute.productSelect, "cart_num", 0); });
this.$set(this.attribute.productSelect, "quota", 0); }
this.$set(this.attribute.productSelect, "quotaShow", 0); },
this.$set(this, "attrValue", "");
this.attrTxt = "已选择"
} // TODO 芋艿：暂未整理
kefuClick(){
location.href = this.chatUrl;
}, },
closePosters:function(){
this.posters = false;
},
getProductReplyList: function() {
getReplyList(this.storeInfo.productId, {
page: 1,
limit: 3,
type: 0,
}).then(res => {
this.reply = res.data.list;
})
},
getProductReplyCount: function() {
let that = this;
getReplyConfig(that.storeInfo.productId).then(res => {
that.$set(that, 'replyChance', res.data.replyChance * 100);
that.$set(that, 'replyCount', res.data.sumCount);
});
},
// 后退
returns: function() {
uni.navigateBack()
},
setShare: function() {
this.$wechat.isWeixin() &&
this.$wechat.wechatEvevt([
"updateAppMessageShareData",
"updateTimelineShareData",
"onMenuShareAppMessage",
"onMenuShareTimeline"
], {
desc: this.storeInfo.info,
title: this.storeInfo.title,
link: location.href,
imgUrl: this.storeInfo.image
}).then(res => {
}).catch(err => {
console.log(err);
});
},
scroll: function(e) { scroll: function(e) {
var that = this, var that = this,
scrollY = e.detail.scrollTop; scrollY = e.detail.scrollTop;

3
pages/goods_details/index.vue
View File

@ -632,7 +632,8 @@
this.$set(this.attr.productSelect, "stock", sku.stock); this.$set(this.attr.productSelect, "stock", sku.stock);
this.$set(this.attr.productSelect, "cart_num", 1); this.$set(this.attr.productSelect, "cart_num", 1);
// SKU 关联属性 // SKU 关联属性
this.$set(this.attr.properties[propertyIndex], 'index', this.attr.properties[propertyIndex].values[valueIndex].name); this.$set(this.attr.properties[propertyIndex], 'index',
this.attr.properties[propertyIndex].values[valueIndex].name);
this.$set(this, "attrValue", newSkuKey); this.$set(this, "attrValue", newSkuKey);
}, },
/** /**