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 00:14:28 +08:00
parent eab00bf2a6
commit 07b9521a63
3 changed files with 103 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/productWindow/index.vue
View File

@ -11,7 +11,7 @@
{{ attr.productSelect.spuName }} {{ attr.productSelect.spuName }}
</view> </view>
<view class="money font-color"> <view class="money font-color">
￥<text class="num">{{ attr.productSelect.price }}</text> ￥<text class="num">{{ fen2yuan(attr.productSelect.price) }}</text>
<text class="stock" v-if='isShow'>库存: {{ attr.productSelect.stock }}</text> <text class="stock" v-if='isShow'>库存: {{ attr.productSelect.stock }}</text>
<text class='stock' v-if="limitNum">限量: {{ attr.productSelect.quota }}</text> <text class='stock' v-if="limitNum">限量: {{ attr.productSelect.quota }}</text>
</view> </view>
@ -69,13 +69,14 @@
</template> </template>
<script> <script>
import * as Util from '@/utils/util.js';
export default { export default {
props: { props: {
attr: { attr: {
type: Object, type: Object,
default: () => {} default: () => {}
}, },
limitNum: { // TODO 芋艿：是否限流 limitNum: { // 是否展示限售
type: Number, type: Number,
value: 0 value: 0
}, },
@ -150,7 +151,11 @@
} }
} }
return valueNames; return valueNames;
} },
fen2yuan(price) {
return Util.fen2yuan(price)
}
} }
} }
</script> </script>

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

@ -46,9 +46,11 @@
<view>限量: {{ activity.quota ? activity.quota : 0 }} {{ spu.unitName }}</view> <view>限量: {{ activity.quota ? activity.quota : 0 }} {{ spu.unitName }}</view>
</view> </view>
</view> </view>
<!-- SKU 选择 TODO --> <!-- SKU 选择 -->
<view class='attribute acea-row row-between-wrapper mb30 borRadius14' @tap='selecAttr' v-if='attribute.productAttr.length'> <view class='attribute acea-row row-between-wrapper mb30 borRadius14' @tap='selecAttr'>
<view class="line1">{{attr}}：<text class='atterTxt'>{{attrValue}}</text></view> <view class="line1">{{ attrValue.length > 0 ? "已选择" : "请选择" }}：
<text class='atterTxt'>{{attrValue}}</text>
</view>
<view class='iconfont icon-jiantou'></view> <view class='iconfont icon-jiantou'></view>
</view> </view>
<!-- 评论 TODO --> <!-- 评论 TODO -->
@ -96,7 +98,7 @@
<view class='iconfont icon-shoucang' v-else></view> <view class='iconfont icon-shoucang' v-else></view>
<view>收藏</view> <view>收藏</view>
</view> </view>
<!-- 购买操作 TODO --> <!-- 购买操作 -->
<view class="bnt acea-row" v-if="status === 0"> <view class="bnt acea-row" v-if="status === 0">
<view class="joinCart bnts" @tap="openAlone">单独购买</view> <view class="joinCart bnts" @tap="openAlone">单独购买</view>
<view class="buy bnts bg-color-hui">已关闭</view> <view class="buy bnts bg-color-hui">已关闭</view>
@ -123,9 +125,16 @@
</view> </view>
</view> </view>
</view> </view>
<!-- SKU 弹窗 TODO --> <!-- SKU 弹窗 -->
<product-window :attr='attribute' :limitNum='1' @myevent="onMyEvent" @ChangeAttr="ChangeAttr" @ChangeCartNum="ChangeCartNum" <product-window
@attrVal="attrVal" @iptCartNum="iptCartNum"></product-window> :attr='attribute'
:limitNum='1'
@myevent="onMyEvent"
@ChangeAttr="ChangeAttr"
@ChangeCartNum="ChangeCartNum"
@attrVal="attrVal"
@iptCartNum="iptCartNum"
/>
<home></home> <home></home>
<!-- 分享按钮 TODO--> <!-- 分享按钮 TODO-->
<view class="generate-posters acea-row row-middle" :class="posters ? 'on' : ''"> <view class="generate-posters acea-row row-middle" :class="posters ? 'on' : ''">
@ -220,6 +229,13 @@
// 商品相关变量 // 商品相关变量
spu: {}, // 商品 SPU 详情 spu: {}, // 商品 SPU 详情
skuMap: [], // 商品 SKU Map
attribute: { // productWindow 组件，使用该属性
cartAttr: false,
// ↓↓↓ 属性数组，结构为：id = 属性编号；name = 属性编号的名字；values[].id = 属性值的编号，values[].name = 属性值的名字；index = 选中的属性值的名字
properties: [],
productSelect: {} // 选中的 SKU
},
// TODO 芋艿:未整理 // TODO 芋艿:未整理
@ -243,11 +259,6 @@
'title': '抢购详情页', 'title': '抢购详情页',
'color': false 'color': false
}, },
attribute: {
cartAttr: false,
productAttr: [],
productSelect: {}
},
productValue: [], productValue: [],
isOpen: false, isOpen: false,
attr: '请选择', attr: '请选择',
@ -285,15 +296,10 @@
posterbackgd: '/static/images/posterbackgd.png', posterbackgd: '/static/images/posterbackgd.png',
actionSheetHidden: false, actionSheetHidden: false,
cart_num:'', cart_num:'',
attrTxt: '',
qrcodeSize: 600, qrcodeSize: 600,
imagePath:'',//海报路径 imagePath:'',//海报路径
imgTop:'', imgTop:'',
H5ShareBox: false, //公众号分享图片 H5ShareBox: false, //公众号分享图片
sharePacket: {
isState: true, //默认不显示
},
buyNum: 1,
errT: '', errT: '',
returnShow: true, returnShow: true,
homeTop: 20, homeTop: 20,
@ -356,7 +362,6 @@
that.$set(that,'theme',that.$Cache.get('theme')); //用户从分享卡片进入的场景下获取主题色配置 that.$set(that,'theme',that.$Cache.get('theme')); //用户从分享卡片进入的场景下获取主题色配置
// #endif // #endif
if (!options.scene && !options.id){ if (!options.scene && !options.id){
this.showSkeleton = false;
this.$util.Tips({ this.$util.Tips({
title: '缺少参数无法查看商品' title: '缺少参数无法查看商品'
}, { }, {
@ -427,56 +432,27 @@
// 获得商品详情 // 获得商品详情
this.getGoodsDetails(); this.getGoodsDetails();
}); // TODO 收藏
if (true) { // this.isFavoriteExists();
return; // 获得商品评价列表
}
getSeckillDetail(that.id).then(res => {
this.storeInfo = res.data.storeSeckill;
this.userCollect = res.data.userCollect;
this.attribute.productAttr = res.data.productAttr;
this.productValue = res.data.productValue;
this.attribute.productSelect.num = res.data.storeSeckill.num;
this.getProductReplyList(); this.getProductReplyList();
this.getProductReplyCount(); this.getProductReplyCount();
let productAttr = res.data.productAttr.map(item => {
return { app.globalData.openPages = '/pages/activity/goods_seckill_details/index?id=' + this.id + '&spread=' + this.uid ;
attrName : item.attrName,
attrValues: item.attrValues.split(','),
id:item.id,
isDel:item.isDel,
productId:item.productId,
type:item.type
}
});
this.$set(this.attribute,'productAttr',productAttr);
// #ifdef H5
that.storeImage = that.storeInfo.image;
that.make();
that.setShare();
// #endif
// #ifdef MP
that.getQrcode();
that.imgTop = res.data.storeSeckill.image
// #endif
// #ifndef H5
that.downloadFilestoreImage();
//that.downloadFilePromotionCode();
// #endif
that.DefaultSelect();
setTimeout(function() {
that.infoScroll();
}, 1000);
app.globalData.openPages = '/pages/activity/goods_seckill_details/index?id=' + that.id + '&spread=' + that.uid ;
}).catch(err => { }).catch(err => {
console.log(err, '各种异常')
that.$util.Tips({ that.$util.Tips({
title:err title:err
},{ },{
tab:3 tab:3
}) })
}); });
if (true) {
return;
}
getSeckillDetail(that.id).then(res => {
this.storeInfo = res.data.storeSeckill;
this.attribute.productSelect.num = res.data.storeSeckill.num;
})
}, },
// ========== 商品详情相关 ========== // ========== 商品详情相关 ==========
@ -488,49 +464,37 @@
let spu = res.data; let spu = res.data;
let skus = res.data.skus; let skus = res.data.skus;
this.$set(this, 'spu', spu); this.$set(this, 'spu', spu);
// this.$set(this.attr, '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
// // 设置分销相关变量 // TODO 芋艿：待接入
// this.$set(this.sharePacket, 'priceName', res.data.priceName);
// this.$set(this.sharePacket, 'isState', Math.floor(res.data.priceName) === 0);
// // 设置标题 // 处理滚动条
// uni.setNavigationBarTitle({ setTimeout(() => {
// title: spu.name.substring(0, 7) + "..." this.infoScroll();
// }) }, 1000);
//
// // 登录情况下，获得购物车、分享等信息 // 设置或下载分销需要的图片
// if (this.isLogin) { // #ifdef H5
// this.getCartCount(); this.storeImage = spu.picUrl;
// this.isFavoriteExists(); this.make();
// // #ifdef H5 this.setShare();
// this.make(); // #endif
// this.ShareInfo(); // #ifdef MP
// this.getImageBase64(); this.getQrcode();
// // #endif this.imgTop = spu.picUrl;
// // #ifdef MP // #endif
// this.getQrcode(); // #ifndef H5
// // #endif this.downloadFilestoreImage();
// } // #endif
//
// // 处理滚动条 // 选中默认 sku
// setTimeout(() => { this.selectDefaultSku();
// this.infoScroll();
// }, 500);
//
// // 设置或下载分销需要的图片
// // #ifdef MP
// this.imgTop = spu.picUrl
// // #endif
// // #ifndef H5
// this.downloadFilestoreImage();
// // #endif
//
// // 选中默认 sku
// this.selectDefaultSku();
}).catch(err => { }).catch(err => {
// TODO 芋艿：临时去掉
if (true) {
return
}
return this.$util.Tips({ return this.$util.Tips({
title: err.toString() title: err.toString()
}, { }, {
@ -600,73 +564,37 @@
}, },
/** /**
* 默认选中属性 * 默认选中属性
*
*/ */
DefaultSelect: function() { selectDefaultSku: function() {
let self = this const properties = this.attribute.properties;
let productAttr = self.attribute.productAttr; // 获得选中的属性值的名字，例如说 "黑色,大"，则 skuKey = ["黑色", "大"]
let value = []; let skuKey = undefined;
for (var key in self.productValue) { for (let key in this.skuMap) {
if (self.productValue[key].stock > 0) { if (this.skuMap[key].stock > 0) {
value = self.attribute.productAttr.length ? key.split(",") : []; skuKey = key.split(",");
break; break;
} }
} }
for (let i = 0; i < productAttr.length; i++) { if (!skuKey) { // 如果找不到，则选中第一个
this.$set(productAttr[i], "index", value[i]); skuKey = Object.keys(this.skuMap)[0].split(",");
} }
//sort();排序函数:数字-英文-汉字； // 使用 index 属性表示当前选中的，值为属性值的名字
let productSelect = this.productValue[value.join(",")]; for (let i = 0; i < properties.length; i++) {
if (productSelect && productAttr.length) { this.$set(properties[i], "index", skuKey[i]);
self.$set( }
self.attribute.productSelect,
"storeName", let sku = this.skuMap[skuKey.join(",")];
self.storeInfo.storeName if (!sku) {
); return
self.$set(self.attribute.productSelect, "image", productSelect.image); }
self.$set(self.attribute.productSelect, "price", productSelect.price); this.$set(this.attribute.productSelect, "spuName", this.spu.name);
self.$set(self.attribute.productSelect, "stock", productSelect.stock); this.$set(this.attribute.productSelect, "id", sku.id);
self.$set(self.attribute.productSelect, "unique", productSelect.id); this.$set(this.attribute.productSelect, "picUrl", sku.picUrl);
self.$set(self.attribute.productSelect, "quota", productSelect.quota); this.$set(this.attribute.productSelect, "price", sku.price);
self.$set(self.attribute.productSelect, "quotaShow", productSelect.quotaShow); this.$set(this.attribute.productSelect, "stock", sku.stock);
self.$set(self.attribute.productSelect, "cart_num", 1); this.$set(this.attribute.productSelect, "cart_num", 1);
self.$set(self, "attrValue", value.join(",")); this.$set(this.attribute.productSelect, "quota", sku.quota);
this.$set(self, "attrTxt", "已选择") this.$set(this, "attrValue", skuKey.join(","));
self.attrValue = value.join(",")
} else if (!productSelect && productAttr.length) {
self.$set(
self.attribute.productSelect,
"storeName",
self.storeInfo.storeName
);
self.$set(self.attribute.productSelect, "image", self.storeInfo.image);
self.$set(self.attribute.productSelect, "price", self.storeInfo.price);
self.$set(self.attribute.productSelect, "quota", 0);
self.$set(self.attribute.productSelect, "quota", 0);
self.$set(self.attribute.productSelect, "stock", 0);
self.$set(self.attribute.productSelect, "unique", "");
self.$set(self.attribute.productSelect, "cart_num", 0);
self.$set(self, "attrValue", "");
self.$set(self, "attrTxt", "请选择");
} else if (!productSelect && !productAttr.length) {
self.$set(
self.attribute.productSelect,
"storeName",
self.storeInfo.storeName
);
self.$set(self.attribute.productSelect, "image", self.storeInfo.image);
self.$set(self.attribute.productSelect, "price", self.storeInfo.price);
self.$set(self.attribute.productSelect, "quota", self.storeInfo.quota);
self.$set(self.attribute.productSelect, "quotaShow", self.storeInfo.quotaShow);
self.$set(self.attribute.productSelect, "stock", self.storeInfo.stock);
self.$set(
self.attribute.productSelect,
"unique", ""
);
self.$set(self.attribute.productSelect, "cart_num", 1);
self.$set(self, "attrValue", "");
self.$set(self, "attrTxt", "请选择");
}
}, },
selecAttr: function() { selecAttr: function() {
this.attribute.cartAttr = true this.attribute.cartAttr = true

3
pages/goods_details/index.vue
View File

@ -467,6 +467,7 @@
// 请求后端，加载商品等相关信息 // 请求后端，加载商品等相关信息
this.getGoodsDetails(); this.getGoodsDetails();
this.getCouponList(); this.getCouponList();
// 获得商品评价列表
this.getProductReplyList(); this.getProductReplyList();
this.getProductReplyCount(); this.getProductReplyCount();
this.getGoods(); this.getGoods();
@ -571,7 +572,7 @@
* 先找有库存的 SKU，否则找第一个 SKU * 先找有库存的 SKU，否则找第一个 SKU
*/ */
selectDefaultSku: function() { selectDefaultSku: function() {
let properties = this.attr.properties; const properties = this.attr.properties;
// 获得选中的属性值的名字，例如说 "黑色,大"，则 skuKey = ["黑色", "大"] // 获得选中的属性值的名字，例如说 "黑色,大"，则 skuKey = ["黑色", "大"]
let skuKey = undefined; let skuKey = undefined;
for (let key in this.skuMap) { for (let key in this.skuMap) {