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-14 00:16:34 +08:00
parent 6fcb8196c3
commit cb01b3d6c1
3 changed files with 231 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
api/promotion/combination.js Normal file
View File

@ -0,0 +1,10 @@
import request from "@/utils/request.js";
// 获得拼团活动明细
export function getCombinationActivity(id) {
return request.get("app-api/promotion/combination-activity/get-detail", {
id
}, {
noAuth: true // TODO 芋艿：后续要做调整
});
}

264
pages/activity/goods_combination_details/index.vue
View File

@ -1,6 +1,6 @@
<template>
<view>
<!-- 头部 -->
<!-- 顶部的 nav tab -->
<view class='navbar' :style="{height:navH+'rpx',opacity:opacity}">
<view class='navbarH' :style='"height:"+navH+"rpx;"'>
<view class='navbarCon acea-row row-center-wrapper'>
@ -13,30 +13,30 @@
</view>
</view>
</view>
<!-- <view class='iconfont icon-xiangzuo' :style="'top:'+navH/2+'rpx'" @tap='returns'></view> -->
<!-- 返回键 -->
<view id="home" class="home-nav acea-row row-center-wrapper iconfont icon-xiangzuo" :class="opacity>0.5?'on':''" :style="{ top: homeTop + 'rpx' }" v-if="returnShow" @tap="returns">
</view>
<!-- 详情 -->
<view class='product-con'>
<scroll-view :scroll-top="scrollTop" scroll-y='true' scroll-with-animation="true"
:style="'height:'+height+'px;'" @scroll="scroll">
<view id="past0">
<productConSwiper :imgUrls="imgUrls" class="mb30"></productConSwiper>
<productConSwiper :imgUrls='spu.sliderPicUrls' />
<!-- 价格、库存、销量 -->
<view class="pad30">
<view class='wrapper mb30'>
<view class='share acea-row row-between row-bottom'>
<view class='money font-color'>
￥<text class='num'>{{storeInfo.price || 0}}</text><text
class='y-money'>￥{{storeInfo.otPrice || 0}}</text>
<view class='money font-color'>￥
<text class='num'>{{ fen2yuan(spu.price) }}</text>
<text class='y-money'>￥{{ fen2yuan(spu.marketPrice) }}</text>
</view>
<view class='iconfont icon-fenxiang' @click="listenerActionSheet"></view>
</view>
<view class='introduce line2'>{{storeInfo.storeName}}</view>
<view class='introduce line2'>{{ spu.name }}</view>
<view class='label acea-row row-between-wrapper'>
<view class='stock'>类型：{{ storeInfo.people || 0}}人团</view>
<view>累计销量：{{parseFloat(storeInfo.sales) + parseFloat(storeInfo.ficti)}} {{storeInfo.unitName || ''}}</view>
<view>限购: {{ storeInfo.quotaShow ? storeInfo.quotaShow : 0 }}
{{storeInfo.unitName || ''}}
</view>
<view />
</view>
</view>
<view class='attribute acea-row row-between-wrapper mb30 borRadius14' @tap='selecAttr'
@ -239,7 +239,6 @@
import {
mapGetters
} from "vuex";
import { silenceBindingSpread } from "@/utils";
// #ifdef MP
import {
base64src
@ -257,10 +256,8 @@
getCombinationDetail
} from '@/api/activity.js';
import {
postCartAdd,
collectAdd,
collectDel,
getReplyList,
getReplyConfig,
getReplyProduct
} from '@/api/store.js';
@ -273,10 +270,13 @@
import userEvaluation from '@/components/userEvaluation/index.vue'
import countDown from '@/components/countDown/index.vue'
import shareRedPackets from '@/components/shareRedPackets';
import {
getProductCode
} from '@/api/store.js'
import { spread } from "@/api/user";
import * as ProductSpuApi from '@/api/product/spu.js';
import * as ProductFavoriteApi from '@/api/product/favorite.js';
import * as ProductCommentApi from '@/api/product/comment.js';
import * as CombinationActivityApi from '@/api/promotion/combination.js';
import * as Util from '@/utils/util.js';
import * as ProductUtil from '@/utils/product.js';
export default {
components: {
shareRedPackets,
@ -298,15 +298,31 @@
}),
data() {
return {
// ========== 拼团活动相关变量 ==========
id: 0, // 拼团活动的编号
activity: {}, // 拼团活动的信息
status: 1, // 0 - 已禁用；1 - 未开始；2 - 进行中；3 - 已结束
bgColor:{
'bgColor': '',
'Color': '#999999',
'isDay': true
},
// ========== 商品相关变量 ==========
spu: {}, // 商品 SPU 详情
skuMap: [], // 商品 SKU Map
attrValue: '', // 已选属性名的拼接，例如说 红色,大 这样的格式
tagStyle: {
img: 'width:100%;display:block;',
table: 'width:100%',
video: 'width:100%'
},
// TODO 芋艿：未整理
userCollect:false,
dataShow: 0,
navH: '',
id: 0,
userInfo: {},
itemNew: [],
indicatorDots: false,
@ -322,7 +338,6 @@
productValue: [],
isOpen: false,
attr: '请选择',
attrValue: '',
AllIndex: 2,
maxAllIndex: 0,
replyChance: '',
@ -348,11 +363,7 @@
sharePacket: {
isState: true, //默认不显示
},
tagStyle: {
img: 'width:100%;display:block;',
table: 'width:100%',
video: 'width:100%'
},
posters: false,
weixinStatus: false,
posterImageStatus: false,
@ -460,60 +471,38 @@
};
},
methods: {
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);
});
},
getProductReplyList: function() {
getReplyProduct(this.storeInfo.productId).then(res => {
this.reply = res.data.productReply ? [res.data.productReply] : [];
})
},
kefuClick() {
location.href = this.chatUrl;
},
closePosters: function() {
this.posters = false;
},
closeChange: function() {
this.$set(this.sharePacket, 'isState', true);
},
showAll: function() {
this.AllIndexDefault = this.AllIndex;
this.AllIndex = this.pink.length;
},
hideAll: function() {
this.AllIndex = this.AllIndexDefault;
},
// 授权关闭
authColse: function(e) {
this.isShowAuth = e;
},
/**
* 购物车手动填写
*
*/
iptCartNum: function(e) {
if (e > this.onceNum) {
this.$util.Tips({
title: `该商品每次限购${this.onceNum}${this.storeInfo.unitName}`
});
this.$set(this.attribute.productSelect, 'cart_num', this.onceNum);
this.$set(this, "cart_num", this.onceNum);
} else {
this.$set(this.attribute.productSelect, 'cart_num', e);
this.$set(this, "cart_num", e);
}
},
// 返回
returns() {
uni.navigateBack();
},
// ========== 拼团活动相关 ==========
// 获取详情
combinationDetail() {
CombinationActivityApi.getCombinationActivity(this.id).then(res => {
this.activity = res.data;
// 计算总的 quota 数量
this.activity.quota = this.activity.products.reduce((accumulator, product) => {
return accumulator + product.quota;
}, 0);
// 计算活动状态
const now = new Date().getTime();
if (this.activity.status !== 0) {
if (this.activity.startTime > now) {
this.status = 1;
} else if (now <= this.activity.endTime) {
this.status = 2;
} else {
this.status = 3;
}
} else {
this.status = 0;
}
// 获得商品详情
this.getGoodsDetails();
});
if (true) {
return
}
var that = this;
var data = that.id;
getCombinationDetail(data).then(function(res) {
@ -574,6 +563,123 @@
})
})
},
// ========== 商品详情相关 ==========
/**
* 获取产品详情
*/
getGoodsDetails: function() {
console.log(this.activity.spuId, '== spuId ==')
ProductSpuApi.getSpuDetail(this.activity.spuId).then(res => {
let spu = res.data;
let skus = res.data.skus;
this.$set(this, 'spu', spu);
// TODO 芋艿：this.attribute
this.$set(this.attribute, 'properties', ProductUtil.convertProductPropertyList(skus));
this.$set(this, 'skuMap', ProductUtil.convertProductSkuMap(skus));
// 将拼团活动的信息，合并到 SKU 里面，实现拼团价格的显示
this.activity.products.forEach(product => {
this.spu.price = Math.min(this.spu.price, product.combinationPrice); // 设置 SPU 的最低价格
});
skus.forEach(sku => {
const product = this.activity.products.find(product => product.skuId === sku.id);
if (product) {
sku.price = product.combinationPrice;
sku.quota = product.quota;
sku.limitCount = product.limitCount;
} else { // 找不到可能是没配置，则不能发起拼团
sku.quota = 0;
sku.limitCount = 0;
}
});
// // 处理滚动条
// setTimeout(() => {
// this.infoScroll();
// }, 1000);
//
// // 设置或下载分销需要的图片
// // #ifdef H5
// this.storeImage = spu.picUrl;
// this.make();
// this.ShareInfo();
// // #endif
// // #ifdef MP
// this.getQrcode();
// this.imgTop = spu.picUrl;
// // #endif
// // #ifndef H5
// this.downloadFilestoreImage();
// // #endif
//
// // 选中默认 sku
// this.selectDefaultSku();
}).catch(err => {
if (true) {
return;
}
return this.$util.Tips({
title: err.toString()
}, {
tab: 3,
url: 1
});
})
},
// TODO 芋艿：未整理
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);
});
},
getProductReplyList: function() {
getReplyProduct(this.storeInfo.productId).then(res => {
this.reply = res.data.productReply ? [res.data.productReply] : [];
})
},
kefuClick() {
location.href = this.chatUrl;
},
closePosters: function() {
this.posters = false;
},
closeChange: function() {
this.$set(this.sharePacket, 'isState', true);
},
showAll: function() {
this.AllIndexDefault = this.AllIndex;
this.AllIndex = this.pink.length;
},
hideAll: function() {
this.AllIndex = this.AllIndexDefault;
},
// 授权关闭
authColse: function(e) {
this.isShowAuth = e;
},
/**
* 购物车手动填写
*
*/
iptCartNum: function(e) {
if (e > this.onceNum) {
this.$util.Tips({
title: `该商品每次限购${this.onceNum}${this.storeInfo.unitName}`
});
this.$set(this.attribute.productSelect, 'cart_num', this.onceNum);
this.$set(this, "cart_num", this.onceNum);
} else {
this.$set(this.attribute.productSelect, 'cart_num', e);
this.$set(this, "cart_num", e);
}
},
// 返回
returns() {
uni.navigateBack();
},
//#ifdef H5
setShare: function() {
this.$wechat.isWeixin() &&
@ -1117,6 +1223,10 @@
this.lock = true;
this.scrollTop = index > 0 ? that.topArr[index] - (app.globalData.navHeight / 2) : that.topArr[index]
},
fen2yuan(price) {
return Util.fen2yuan(price)
}
},
//#ifdef MP
onShareAppMessage() {

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

@ -15,6 +15,7 @@
<!-- 返回键 -->
<view id="home" class="home-nav acea-row row-center-wrapper iconfont icon-xiangzuo" :class="opacity>0.5?'on':''" :style="{ top: homeTop + 'rpx' }" v-if="returnShow" @tap="returns">
</view>
<!-- 详情 -->
<view class='product-con'>
<scroll-view :scroll-top="scrollTop" scroll-y='true' scroll-with-animation="true" :style="'height:'+height+'px;'"
@scroll="scroll">
@ -209,7 +210,7 @@
export default {
data() {
return {
// 秒杀活动相关变量
// ========== 秒杀活动相关变量 ==========
id: 0, // 秒杀活动的编号
activity: {}, // 秒杀活动的信息
status: 1, // 0 - 已禁用；1 - 未开始；2 - 进行中；3 - 已结束
@ -221,7 +222,7 @@
'timeTxtwidth': '16rpx',
},
// 商品相关变量
// ========== 商品相关变量 ==========
spu: {}, // 商品 SPU 详情
skuMap: [], // 商品 SKU Map
attrValue: '', // 已选属性名的拼接，例如说 红色,大 这样的格式
@ -378,9 +379,7 @@
methods: {
// ========== 秒杀活动相关 ==========
getSeckillDetail: function() {
let that = this;
SeckillActivityApi.getSeckillActivity(this.id).then(res => {
this.dataShow = 1;
this.activity = res.data;
// 计算总的 quota 数量
this.activity.quota = this.activity.products.reduce((accumulator, product) => {
@ -397,7 +396,7 @@
this.status = 3;
}
} else {
this.status = this.activity;
this.status = 0;
}
// 获得商品详情
@ -411,7 +410,7 @@
app.globalData.openPages = '/pages/activity/goods_seckill_details/index?id='
+ this.id + '&spread=' + this.uid;
}).catch(err => {
that.$util.Tips({
this.$util.Tips({
title:err
},{
tab:3