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. 完成秒杀详情
pull/1/MERGE
YunaiV 2023-06-11 23:18:54 +08:00
parent 4e756482ce
commit 6fcb8196c3
1 changed files with 104 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -58,7 +58,7 @@
<view class='title acea-row row-between-wrapper' <view class='title acea-row row-between-wrapper'
:style="replyCount ===0?'border-bottom-left-radius:14rpx;border-bottom-right-radius:14rpx;':''"> :style="replyCount ===0?'border-bottom-left-radius:14rpx;border-bottom-right-radius:14rpx;':''">
<view>用户评价({{ replyCount }})</view> <view>用户评价({{ replyCount }})</view>
<navigator class='praise' hover-class='none' :url="'/pages/users/goods_comment_list/index?productId='+ storeInfo.productId"> <navigator class='praise' hover-class='none' :url="'/pages/users/goods_comment_list/index?productId='+ activity.spuId">
<text class='font-color'>{{ replyChance }}%</text>好评率 <text class='font-color'>{{ replyChance }}%</text>好评率
<text class='iconfont icon-jiantou'></text> <text class='iconfont icon-jiantou'></text>
</navigator> </navigator>
@ -108,11 +108,11 @@
<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>
</view> </view>
<view class="bnt acea-row" v-else-if="status === 2 && attribute.productSelect.quota > 0"> <view class="bnt acea-row" v-else-if="status === 2 && attr.productSelect.quota > 0">
<view class="joinCart bnts" @tap="openAlone">单独购买</view> <view class="joinCart bnts" @tap="openAlone">单独购买</view>
<view class="buy bnts" @tap="goBuy">立即购买</view> <view class="buy bnts" @tap="goBuy">立即购买</view>
</view> </view>
<view class="bnt acea-row" v-else-if="status === 2 && (attribute.productSelect.quota <= 0)"> <view class="bnt acea-row" v-else-if="status === 2 && (attr.productSelect.quota <= 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>
</view> </view>
@ -128,7 +128,7 @@
</view> </view>
<!-- SKU 弹窗 --> <!-- SKU 弹窗 -->
<product-window <product-window
:attr='attribute' :attr='attr'
:limitNum='1' :limitNum='1'
@ChangeAttr="ChangeAttr" @ChangeAttr="ChangeAttr"
@ChangeCartNum="ChangeCartNum" @ChangeCartNum="ChangeCartNum"
@ -157,7 +157,7 @@
</view> </view>
<view class="mask" v-if="posters" @click="closePosters"></view> <view class="mask" v-if="posters" @click="closePosters"></view>
<view class="mask" v-if="canvasStatus" @click="closePosters"></view> <view class="mask" v-if="canvasStatus" @click="closePosters"></view>
<!-- 海报展示 TODO --> <!-- 海报展示 -->
<view class='poster-pop' v-if="canvasStatus"> <view class='poster-pop' v-if="canvasStatus">
<image src='/static/images/poster-close.png' class='close' @click="posterImageClose"></image> <image src='/static/images/poster-close.png' class='close' @click="posterImageClose"></image>
<image :src='posterImage'></image> <image :src='posterImage'></image>
@ -210,21 +210,9 @@
data() { data() {
return { return {
// 秒杀活动相关变量 // 秒杀活动相关变量
activity: {}, id: 0, // 秒杀活动的编号
activity: {}, // 秒杀活动的信息
status: 1, // 0 - 已禁用；1 - 未开始；2 - 进行中；3 - 已结束 status: 1, // 0 - 已禁用；1 - 未开始；2 - 进行中；3 - 已结束
// 商品相关变量
spu: {}, // 商品 SPU 详情
skuMap: [], // 商品 SKU Map
attribute: { // productWindow 组件，使用该属性
cartAttr: false,
// ↓↓↓ 属性数组，结构为：id = 属性编号；name = 属性编号的名字；values[].id = 属性值的编号，values[].name = 属性值的名字；index = 选中的属性值的名字
properties: [],
productSelect: {} // 选中的 SKU
},
// TODO 芋艿:未整理
bgColor: { bgColor: {
'bgColor': '#333333', 'bgColor': '#333333',
'Color': '#fff', 'Color': '#fff',
@ -232,63 +220,59 @@
'width': '44rpx', 'width': '44rpx',
'timeTxtwidth': '16rpx', 'timeTxtwidth': '16rpx',
}, },
id: 0,
time: 0, // 商品相关变量
countDownHour: "00", spu: {}, // 商品 SPU 详情
countDownMinute: "00", skuMap: [], // 商品 SKU Map
countDownSecond: "00", attrValue: '', // 已选属性名的拼接，例如说 红色,大 这样的格式
storeInfo: [], attr: { // productWindow 组件，使用该属性
imgUrls: [], cartAttr: false,
parameter: { // ↓↓↓ 属性数组，结构为：id = 属性编号；name = 属性编号的名字；values[].id = 属性值的编号，values[].name = 属性值的名字；index = 选中的属性值的名字
'navbar': '1', properties: [],
'return': '1', productSelect: {} // 选中的 SKU
'title': '抢购详情页',
'color': false
}, },
productValue: [],
isOpen: false,
attr: '请选择',
attrValue: '',
iShidden: false,
iSplus: false,
replyCount: 0, //总评论数量
reply: [], //评论列表
replyChance: 0,
navH: "",
navList: ['商品', '评价', '详情'],
opacity: 0,
scrollY: 0,
topArr: [],
height: 0,
heightArr: [],
lock: false,
scrollTop: 0,
tagStyle: { tagStyle: {
img: 'width:100%;display:block;', img: 'width:100%;display:block;',
table: 'width:100%', table: 'width:100%',
video: 'width:100%' video: 'width:100%'
}, },
navActive: 0,
meunHeight: 0, // ========== 评价相关的变量 ==========
backH: '', replyCount: 0, // 总评论数量
posters: false, replyChance: 0, // 好评率
weixinStatus: false, reply: [], // 评论列表
posterImageStatus: false,
canvasStatus: false, //海报绘图标签 // ========== 收藏相关的变量 ==========
storeImage: '', //海报产品图 userCollect: false,
// ========== 分销相关的变量 ==========
qrcodeSize: 600, // 二维码的大小
promotionCode: '', // 二维码图片 promotionCode: '', // 二维码图片
posterImage: '', //海报路径 imgTop: '', // 商品图片的 base64 码
posterbackgd: '/static/images/posterbackgd.png', errT: '', // 获得小程序码失败的提示文本
actionSheetHidden: false, posters: false, // 分享弹窗的开关
cart_num:'', weixinStatus: false, // 微信分享是否打开
qrcodeSize: 600, canvasStatus: false, // 是否显示海报
imagePath: '', // 海报路径 imagePath: '', // 海报路径
imgTop:'', H5ShareBox: false, // 公众号分享的弹出
H5ShareBox: false, //公众号分享图片 posterbackgd: '/static/images/posterbackgd.png', // 海报的背景，用于海报的生成
errT: '', storeImage: '', // 下载商品图片后的文件地址
returnShow: true, actionSheetHidden: true, // 微信小程序的右上角分享的弹出
homeTop: 20, posterImage: '', // 海报路径
userCollect: false
// ========== 顶部 nav + scroll 相关的变量 ==========
returnShow: true, // 判断顶部 [返回] 是否出现
homeTop: 20, // 头部的 top 位置
height: 0, // 窗口 height 高度
scrollY: 0, // 滚动的 Y 轴
scrollTop: 0, // 滚动条的 top 位置
lock: false, // 是否锁定 scroll 下
topArr: [], // 每个 nav 的 top 位置
heightArr: [], // 每个 nav 的 height 高度
navH: "", // 头部 nav 高度
opacity: 0, // 头部 nav 的透明度
navList: ['商品', '评价', '详情'],
navActive: 0, // 选中的 navList 下标
} }
}, },
components: { components: {
@ -312,14 +296,11 @@
} }
}, },
onLoad(options) { onLoad(options) {
let that = this; this.$store.commit("PRODUCT_TYPE", 'normal');
that.$store.commit("PRODUCT_TYPE", 'normal');
let statusBarHeight = '';
// 设置商品列表高度 // 设置商品列表高度
uni.getSystemInfo({ uni.getSystemInfo({
success: function(res) { success: res => {
that.height = res.windowHeight this.height = res.windowHeight
statusBarHeight = res.statusBarHeight
//res.windowHeight:获取整个窗口高度为px，*2为rpx；98为头部占据的高度； //res.windowHeight:获取整个窗口高度为px，*2为rpx；98为头部占据的高度；
}, },
}); });
@ -329,14 +310,10 @@
// #ifdef APP-PLUS // #ifdef APP-PLUS
this.navH = 90 this.navH = 90
// #endif // #endif
// #ifdef MP
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
this.meunHeight = menuButtonInfo.height
this.backH = (that.navH / 2) + (this.meunHeight / 2)
// #ifdef MP || APP-NVUE // #ifdef MP || APP-NVUE
// 小程序链接进入获取绑定关系id // 小程序链接进入获取绑定关系id
// if(options.spread) app.globalData.spread = options.spread; // TODO 芋艿：分销？？？
setTimeout(()=>{ setTimeout(()=>{
if (options.spread) { if (options.spread) {
app.globalData.spread = options.spread; app.globalData.spread = options.spread;
@ -344,8 +321,8 @@
} }
},2000) },2000)
// #endif // #endif
that.$set(that,'theme',that.$Cache.get('theme')); //用户从分享卡片进入的场景下获取主题色配置
// #endif // 校验参数是否正确
if (!options.scene && !options.id){ if (!options.scene && !options.id){
this.$util.Tips({ this.$util.Tips({
title: '缺少参数无法查看商品' title: '缺少参数无法查看商品'
@ -354,12 +331,15 @@
}); });
return; return;
} }
// 解析 id 商品编号
if (options.hasOwnProperty('id') || options.scene){ if (options.hasOwnProperty('id') || options.scene){
if (options.scene) { // 仅仅小程序扫码进入 if (options.scene) { // 仅仅小程序扫码进入
// TODO 芋艿：code 是啥
let qrCodeValue = this.$util.getUrlParams(decodeURIComponent(options.scene)); let qrCodeValue = this.$util.getUrlParams(decodeURIComponent(options.scene));
let mapeMpQrCodeValue = this.$util.formatMpQrCodeData(qrCodeValue); let mapeMpQrCodeValue = this.$util.formatMpQrCodeData(qrCodeValue);
app.globalData.spread = mapeMpQrCodeValue.spread; app.globalData.spread = mapeMpQrCodeValue.spread;
this.id = mapeMpQrCodeValue.id; this.id = mapeMpQrCodeValue.id;
// TODO 芋艿：code 是啥
setTimeout(()=>{ setTimeout(()=>{
spread(mapeMpQrCodeValue.spread).then(res => {}).catch(res => {}) spread(mapeMpQrCodeValue.spread).then(res => {}).catch(res => {})
},2000) },2000)
@ -448,7 +428,7 @@
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.attribute, 'properties', ProductUtil.convertProductPropertyList(skus)); this.$set(this.attr, 'properties', ProductUtil.convertProductPropertyList(skus));
this.$set(this, 'skuMap', ProductUtil.convertProductSkuMap(skus)); this.$set(this, 'skuMap', ProductUtil.convertProductSkuMap(skus));
// 将秒杀活动的信息，合并到 SKU 里面，实现秒杀价格的显示 // 将秒杀活动的信息，合并到 SKU 里面，实现秒杀价格的显示
this.activity.products.forEach(product => { this.activity.products.forEach(product => {
@ -500,7 +480,7 @@
* 默认选中属性 * 默认选中属性
*/ */
selectDefaultSku: function() { selectDefaultSku: function() {
const properties = this.attribute.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) {
@ -521,28 +501,28 @@
if (!sku) { if (!sku) {
return return
} }
this.$set(this.attribute.productSelect, "spuName", this.spu.name); this.$set(this.attr.productSelect, "spuName", this.spu.name);
this.$set(this.attribute.productSelect, "id", sku.id); this.$set(this.attr.productSelect, "id", sku.id);
this.$set(this.attribute.productSelect, "picUrl", sku.picUrl); this.$set(this.attr.productSelect, "picUrl", sku.picUrl);
this.$set(this.attribute.productSelect, "price", sku.price); this.$set(this.attr.productSelect, "price", sku.price);
this.$set(this.attribute.productSelect, "stock", sku.stock); this.$set(this.attr.productSelect, "stock", sku.stock);
this.$set(this.attribute.productSelect, "cart_num", 1); this.$set(this.attr.productSelect, "cart_num", 1);
// 秒杀活动特有字段 // 秒杀活动特有字段
this.$set(this.attribute.productSelect, "quota", sku.quota); this.$set(this.attr.productSelect, "quota", sku.quota);
this.$set(this.attribute.productSelect, "limitCount", sku.limitCount); this.$set(this.attr.productSelect, "limitCount", sku.limitCount);
this.$set(this, "attrValue", skuKey.join(",")); this.$set(this, "attrValue", skuKey.join(","));
}, },
/** /**
* 打开 SKU 属性的选择 * 打开 SKU 属性的选择
*/ */
openAttr: function() { openAttr: function() {
this.$set(this.attribute, 'cartAttr', true); this.$set(this.attr, 'cartAttr', true);
}, },
/** /**
* 关闭 productWindow 弹窗 * 关闭 productWindow 弹窗
*/ */
closeAttr: function() { closeAttr: function() {
this.$set(this.attribute, 'cartAttr', false); this.$set(this.attr, 'cartAttr', false);
}, },
/** /**
* 属性变动赋值 * 属性变动赋值
@ -557,16 +537,16 @@
if (!sku) { if (!sku) {
return; return;
} }
this.$set(this.attribute.productSelect, "id", sku.id); this.$set(this.attr.productSelect, "id", sku.id);
this.$set(this.attribute.productSelect, "picUrl", sku.picUrl); this.$set(this.attr.productSelect, "picUrl", sku.picUrl);
this.$set(this.attribute.productSelect, "price", sku.price); this.$set(this.attr.productSelect, "price", sku.price);
this.$set(this.attribute.productSelect, "stock", sku.stock); this.$set(this.attr.productSelect, "stock", sku.stock);
this.$set(this.attribute.productSelect, "quota", sku.quota); this.$set(this.attr.productSelect, "quota", sku.quota);
this.$set(this.attribute.productSelect, "limitCount", sku.limitCount); this.$set(this.attr.productSelect, "limitCount", sku.limitCount);
this.$set(this.attribute.productSelect, "cart_num", 1); this.$set(this.attr.productSelect, "cart_num", 1);
// SKU 关联属性 // SKU 关联属性
this.$set(this.attribute.properties[propertyIndex], 'index', this.$set(this.attr.properties[propertyIndex], 'index',
this.attribute.properties[propertyIndex].values[valueIndex].name); this.attr.properties[propertyIndex].values[valueIndex].name);
this.$set(this, "attrValue", newSkuKey); this.$set(this, "attrValue", newSkuKey);
}, },
/** /**
@ -576,7 +556,7 @@
*/ */
ChangeCartNum: function(changeValue) { ChangeCartNum: function(changeValue) {
// 获取当前 sku // 获取当前 sku
let sku = this.attribute.productSelect; let sku = this.attr.productSelect;
if (!sku) { if (!sku) {
return; return;
} }
@ -588,17 +568,17 @@
if (changeValue) { if (changeValue) {
sku.cart_num++; sku.cart_num++;
if (limitCount !== undefined && sku.cart_num > limitCount) { if (limitCount !== undefined && sku.cart_num > limitCount) {
this.$set(this.attribute.productSelect, "cart_num", limitCount); this.$set(this.attr.productSelect, "cart_num", limitCount);
this.$util.Tips({ this.$util.Tips({
title: `该商品每次限购 ${sku.limitCount} ${this.spu.unitName}` title: `该商品每次限购 ${sku.limitCount} ${this.spu.unitName}`
}); });
} else if (sku.cart_num > stock || sku.cart_num > quota) { } else if (sku.cart_num > stock || sku.cart_num > quota) {
this.$set(this.attribute.productSelect, "cart_num", Math.min(stock, quota)); this.$set(this.attr.productSelect, "cart_num", Math.min(stock, quota));
} }
} else { } else {
sku.cart_num--; sku.cart_num--;
if (sku.cart_num < 1) { if (sku.cart_num < 1) {
this.$set(this.attribute.productSelect, "cart_num", 1); this.$set(this.attr.productSelect, "cart_num", 1);
} }
} }
}, },
@ -608,12 +588,12 @@
* @param number 数量 * @param number 数量
*/ */
iptCartNum: function (number) { iptCartNum: function (number) {
this.$set(this.attribute.productSelect, 'cart_num', number ? number : 1); this.$set(this.attr.productSelect, 'cart_num', number ? number : 1);
// 判断是否超限购 // 判断是否超限购
let sku = this.attribute.productSelect; let sku = this.attr.productSelect;
let limitCount = sku.limitCount; let limitCount = sku.limitCount;
if (limitCount !== undefined && number > limitCount) { if (limitCount !== undefined && number > limitCount) {
this.$set(this.attribute.productSelect, "cart_num", limitCount); this.$set(this.attr.productSelect, "cart_num", limitCount);
this.$util.Tips({ this.$util.Tips({
title: `该商品每次限购 ${sku.limitCount} ${this.spu.unitName}` title: `该商品每次限购 ${sku.limitCount} ${this.spu.unitName}`
}); });
@ -638,13 +618,13 @@
} }
// 【重要】如果 attr 组件未打开，此时需要先打开。等到选择完后，再立即购买 // 【重要】如果 attr 组件未打开，此时需要先打开。等到选择完后，再立即购买
if (!this.attribute.cartAttr) { if (!this.attr.cartAttr) {
this.openAttr(); this.openAttr();
return; return;
} }
// 发起下单 // 发起下单
let sku = this.attribute.productSelect; let sku = this.attr.productSelect;
uni.navigateTo({ uni.navigateTo({
url: '/pages/users/order_confirm/index?skuId=' + sku.id + '&count=' + sku.cart_num url: '/pages/users/order_confirm/index?skuId=' + sku.id + '&count=' + sku.cart_num
+ '&seckillActivityId=' + this.id + '&seckillActivityId=' + this.id