【功能】批量修改bug和功能
This commit is contained in:
+256
-117
@@ -7,30 +7,47 @@
|
||||
<!-- 骨架屏 -->
|
||||
<detailSkeleton v-if="state.skeletonLoading" />
|
||||
<!-- 下架/售罄提醒 -->
|
||||
<s-empty
|
||||
v-else-if="state.goodsInfo === null"
|
||||
text="商品不存在或已下架"
|
||||
icon="/static/soldout-empty.png"
|
||||
showAction
|
||||
actionText="再逛逛"
|
||||
actionUrl="/pages/goods/list"
|
||||
/>
|
||||
<s-empty v-else-if="state.goodsInfo === null" text="商品不存在或已下架" icon="/static/soldout-empty.png" showAction
|
||||
actionText="再逛逛" actionUrl="/pages/goods/list" />
|
||||
<block v-else>
|
||||
<view class="detail-swiper-selector">
|
||||
<!-- 商品轮播图 -->
|
||||
<su-swiper
|
||||
class="ss-m-b-14"
|
||||
isPreview
|
||||
:list="formatGoodsSwiper(state.goodsInfo.sliderPicUrls)"
|
||||
otStyle="tag"
|
||||
imageMode="widthFix"
|
||||
dotCur="bg-mask-40"
|
||||
:seizeHeight="750"
|
||||
/>
|
||||
|
||||
<su-swiper class="ss-m-b-14" isPreview :list="formatGoodsSwiper(state.goodsInfo.sliderPicUrls)"
|
||||
otStyle="tag" imageMode="widthFix" dotCur="bg-mask-40" :seizeHeight="750" />
|
||||
<!-- 限时折扣 -->
|
||||
<view class="discount" v-if="setShow">
|
||||
<image class="disImg" src="../../static/images/dis.png"></image>
|
||||
<view class="discountCont">
|
||||
<view class="disContT">
|
||||
<view class="disContT1">
|
||||
<view class="disContT1P">
|
||||
¥{{fen2yuan(settleData.price)}}
|
||||
</view>
|
||||
<view class="disContT1End">
|
||||
直降¥{{fen2yuan( state.goodsInfo.price - settleData.price)}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="disContT2">
|
||||
限时折扣
|
||||
</view>
|
||||
</view>
|
||||
<view class="disContB">
|
||||
<view class="disContB1">
|
||||
价格:¥{{fen2yuan(state.goodsInfo.price)}} 丨 剩余:{{settleData.stock}}
|
||||
</view>
|
||||
<view class="disContB2">
|
||||
距结束仅剩
|
||||
<countDown :tipText="' '" :bgColor="bgColor" :dayText="':'" :hourText="':'"
|
||||
:minuteText="':'" :secondText="' '" :datatime="settleData.endTime / 1000"
|
||||
:isDay="false" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 限时折扣 -->
|
||||
<!-- 价格+标题 -->
|
||||
<view class="title-card detail-card ss-p-y-40 ss-p-x-20">
|
||||
<view class="ss-flex ss-row-between ss-col-center ss-m-b-26">
|
||||
<view class="ss-flex ss-row-between ss-col-center ss-m-b-26" v-if="!setShow">
|
||||
<view class="price-box ss-flex ss-col-bottom">
|
||||
<view class="price-text ss-m-r-16">
|
||||
{{ fen2yuan(state.selectedSku.price || state.goodsInfo.price) }}
|
||||
@@ -47,23 +64,16 @@
|
||||
<!-- 满减送/限时折扣活动的提示 -->
|
||||
<div class="tag-content">
|
||||
<view class="tag-box ss-flex">
|
||||
<view
|
||||
class="tag ss-m-r-10"
|
||||
v-for="promos in state.activityInfo"
|
||||
:key="promos.id"
|
||||
@tap="onActivity"
|
||||
>
|
||||
<view class="tag ss-m-r-10" v-for="promos in state.activityInfo" :key="promos.id"
|
||||
@tap="onActivity">
|
||||
{{ promos.name }}
|
||||
</view>
|
||||
</view>
|
||||
</div>
|
||||
|
||||
<!-- 优惠劵 -->
|
||||
<view
|
||||
class="get-coupon-box ss-flex ss-col-center ss-m-l-20"
|
||||
@tap="state.showModel = true"
|
||||
v-if="state.couponInfo.length"
|
||||
>
|
||||
<!-- 优惠劵@tap="state.showModel = true" -->
|
||||
<view class="get-coupon-box ss-flex ss-col-center ss-m-l-20" @tap="onActivity"
|
||||
v-if="state.couponInfo.length">
|
||||
<view class="discounts-title ss-m-r-8">领券</view>
|
||||
<text class="cicon-forward"></text>
|
||||
</view>
|
||||
@@ -74,51 +84,30 @@
|
||||
|
||||
<!-- 功能卡片 -->
|
||||
<view class="detail-cell-card detail-card ss-flex-col">
|
||||
<detail-cell-sku
|
||||
v-model="state.selectedSku.goods_sku_text"
|
||||
:sku="state.selectedSku"
|
||||
@tap="state.showSelectSku = true"
|
||||
/>
|
||||
<detail-cell-sku v-model="state.selectedSku.goods_sku_text" :sku="state.selectedSku"
|
||||
@tap="state.showSelectSku = true" />
|
||||
</view>
|
||||
|
||||
<!-- 规格与数量弹框 -->
|
||||
<s-select-sku
|
||||
:goodsInfo="state.goodsInfo"
|
||||
:show="state.showSelectSku"
|
||||
@addCart="onAddCart"
|
||||
@buy="onBuy"
|
||||
@change="onSkuChange"
|
||||
@close="state.showSelectSku = false"
|
||||
/>
|
||||
<s-select-sku :goodsInfo="state.goodsInfo" :show="state.showSelectSku" @addCart="onAddCart"
|
||||
@buy="onBuy" @change="onSkuChange" @close="state.showSelectSku = false" />
|
||||
</view>
|
||||
|
||||
<!-- 评价 -->
|
||||
<detail-comment-card class="detail-comment-selector" :goodsId="state.goodsId" />
|
||||
<!-- 详情 -->
|
||||
<detail-content-card
|
||||
class="detail-content-selector"
|
||||
:content="state.goodsInfo.description"
|
||||
/>
|
||||
<detail-content-card class="detail-content-selector" :content="state.goodsInfo.description" />
|
||||
|
||||
<!-- 活动跳转:拼团/秒杀/砍价活动 -->
|
||||
<detail-activity-tip
|
||||
v-if="state.activityList.length > 0"
|
||||
:activity-list="state.activityList"
|
||||
/>
|
||||
<detail-activity-tip v-if="state.activityList.length > 0" :activity-list="state.activityList" />
|
||||
|
||||
<!-- 详情 tabbar -->
|
||||
<detail-tabbar v-model="state.goodsInfo">
|
||||
<view class="buy-box ss-flex ss-col-center ss-p-r-20" v-if="state.goodsInfo.stock > 0">
|
||||
<button
|
||||
class="ss-reset-button add-btn ui-Shadow-Main"
|
||||
@tap="state.showSelectSku = true"
|
||||
>
|
||||
<button class="ss-reset-button add-btn ui-Shadow-Main" @tap="state.showSelectSku = true">
|
||||
加入购物车
|
||||
</button>
|
||||
<button
|
||||
class="ss-reset-button buy-btn ui-Shadow-Main"
|
||||
@tap="state.showSelectSku = true"
|
||||
>
|
||||
<button class="ss-reset-button buy-btn ui-Shadow-Main" @tap="state.showSelectSku = true">
|
||||
立即购买
|
||||
</button>
|
||||
</view>
|
||||
@@ -128,32 +117,38 @@
|
||||
</detail-tabbar>
|
||||
|
||||
<!-- 优惠劵弹窗 -->
|
||||
<s-coupon-get
|
||||
v-model="state.couponInfo"
|
||||
:show="state.showModel"
|
||||
@close="state.showModel = false"
|
||||
@get="onGet"
|
||||
/>
|
||||
<!-- <s-coupon-get v-model="state.couponInfo" :show="state.showModel" @close="state.showModel = false"
|
||||
@get="onGet" /> -->
|
||||
|
||||
<!-- 满减送/限时折扣活动弹窗 -->
|
||||
<s-activity-pop
|
||||
v-model="state.activityInfo"
|
||||
:show="state.showActivityModel"
|
||||
@close="state.showActivityModel = false"
|
||||
/>
|
||||
<s-activity-pop v-model="state" :show="state.showActivityModel"
|
||||
@close="state.showActivityModel = false" @get="onGet" />
|
||||
</block>
|
||||
</s-layout>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, computed } from 'vue';
|
||||
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
|
||||
import {
|
||||
reactive,
|
||||
computed,
|
||||
ref
|
||||
} from 'vue';
|
||||
import {
|
||||
onLoad,
|
||||
onPageScroll
|
||||
} from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import CouponApi from '@/sheep/api/promotion/coupon';
|
||||
import ActivityApi from '@/sheep/api/promotion/activity';
|
||||
import FavoriteApi from '@/sheep/api/product/favorite';
|
||||
import { formatSales, formatGoodsSwiper, fen2yuan } from '@/sheep/hooks/useGoods';
|
||||
import {
|
||||
formatSales,
|
||||
formatGoodsSwiper,
|
||||
fen2yuan,
|
||||
handList,
|
||||
handListPrice
|
||||
} from '@/sheep/hooks/useGoods';
|
||||
import detailNavbar from './components/detail/detail-navbar.vue';
|
||||
import detailCellSku from './components/detail/detail-cell-sku.vue';
|
||||
import detailTabbar from './components/detail/detail-tabbar.vue';
|
||||
@@ -161,11 +156,22 @@
|
||||
import detailCommentCard from './components/detail/detail-comment-card.vue';
|
||||
import detailContentCard from './components/detail/detail-content-card.vue';
|
||||
import detailActivityTip from './components/detail/detail-activity-tip.vue';
|
||||
import { isEmpty } from 'lodash-es';
|
||||
import {
|
||||
isEmpty
|
||||
} from 'lodash-es';
|
||||
import SpuApi from '@/sheep/api/product/spu';
|
||||
|
||||
onPageScroll(() => {});
|
||||
onPageScroll(() => {
|
||||
});
|
||||
import countDown from '@/sheep/components/countDown/index.vue'
|
||||
|
||||
const bgColor = {
|
||||
'bgColor': '#E93323',
|
||||
'Color': '#fff',
|
||||
'width': '44rpx',
|
||||
'timeTxtwidth': '16rpx',
|
||||
'isDay': true
|
||||
}
|
||||
const isLogin = computed(() => sheep.$store('user').isLogin);
|
||||
const state = reactive({
|
||||
goodsId: 0,
|
||||
@@ -182,7 +188,13 @@
|
||||
|
||||
// 规格变更
|
||||
function onSkuChange(e) {
|
||||
state.selectedSku = e;
|
||||
if (e.type == 4) {
|
||||
settleData.value = e
|
||||
setShow.value = true
|
||||
} else {
|
||||
state.selectedSku = e;
|
||||
setShow.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 添加购物车
|
||||
@@ -196,21 +208,17 @@
|
||||
|
||||
// 立即购买
|
||||
function onBuy(e) {
|
||||
if (!state.selectedSku.id) {
|
||||
if (!e.id) {
|
||||
sheep.$helper.toast('请选择商品规格');
|
||||
return;
|
||||
}
|
||||
sheep.$router.go('/pages/order/confirm', {
|
||||
data: JSON.stringify({
|
||||
items: [
|
||||
{
|
||||
skuId: e.id,
|
||||
count: e.goods_num,
|
||||
},
|
||||
],
|
||||
// TODO 芋艿:后续清理掉这 2 参数
|
||||
deliveryType: 1,
|
||||
pointStatus: false,
|
||||
items: [{
|
||||
skuId: e.id,
|
||||
count: e.goods_num,
|
||||
categoryId: state.goodsInfo.categoryId
|
||||
}]
|
||||
}),
|
||||
});
|
||||
}
|
||||
@@ -222,7 +230,9 @@
|
||||
|
||||
// 立即领取
|
||||
async function onGet(id) {
|
||||
const { code } = await CouponApi.takeCoupon(id);
|
||||
const {
|
||||
code
|
||||
} = await CouponApi.takeCoupon(id);
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
@@ -237,33 +247,66 @@
|
||||
// TODO 芋艿:待测试
|
||||
const shareInfo = computed(() => {
|
||||
if (isEmpty(state.goodsInfo)) return {};
|
||||
return sheep.$platform.share.getShareInfo(
|
||||
{
|
||||
title: state.goodsInfo.name,
|
||||
image: sheep.$url.cdn(state.goodsInfo.picUrl),
|
||||
desc: state.goodsInfo.introduction,
|
||||
params: {
|
||||
page: '2',
|
||||
query: state.goodsInfo.id,
|
||||
},
|
||||
return sheep.$platform.share.getShareInfo({
|
||||
title: state.goodsInfo.name,
|
||||
image: sheep.$url.cdn(state.goodsInfo.picUrl),
|
||||
desc: state.goodsInfo.introduction,
|
||||
params: {
|
||||
page: '2',
|
||||
query: state.goodsInfo.id,
|
||||
},
|
||||
{
|
||||
type: 'goods', // 商品海报
|
||||
title: state.goodsInfo.name, // 商品名称
|
||||
image: sheep.$url.cdn(state.goodsInfo.picUrl), // 商品主图
|
||||
price: fen2yuan(state.goodsInfo.price), // 商品价格
|
||||
original_price: fen2yuan(state.goodsInfo.marketPrice), // 商品原价
|
||||
},
|
||||
);
|
||||
}, {
|
||||
type: 'goods', // 商品海报
|
||||
title: state.goodsInfo.name, // 商品名称
|
||||
image: sheep.$url.cdn(state.goodsInfo.picUrl), // 商品主图
|
||||
price: fen2yuan(state.goodsInfo.price), // 商品价格
|
||||
original_price: fen2yuan(state.goodsInfo.marketPrice), // 商品原价
|
||||
});
|
||||
});
|
||||
|
||||
async function getCoupon() {
|
||||
const { code, data } = await CouponApi.getCouponTemplateList(state.goodsId, 2, 10);
|
||||
const {
|
||||
code,
|
||||
data
|
||||
} = await CouponApi.getCouponTemplateList(state.goodsId, 2, 10);
|
||||
if (code === 0) {
|
||||
state.couponInfo = data;
|
||||
}
|
||||
}
|
||||
|
||||
//获取结算信息
|
||||
const setShow = ref(false)
|
||||
const settleData = ref()
|
||||
|
||||
async function getSettlementByIds(ids) {
|
||||
const { data } = await SpuApi.getSettlementProduct(ids);
|
||||
settleData.value = handle(data)
|
||||
state.goodsInfo.skus = handListPrice(state.goodsInfo.skus, data[0].skus)
|
||||
}
|
||||
|
||||
//判断是否有限时折扣信息
|
||||
function handle(array) {
|
||||
let setList = {}
|
||||
array.some(item => {
|
||||
return item.skus.some(items => {
|
||||
if (items.type === 4) {
|
||||
setShow.value = true;
|
||||
setList = items;
|
||||
return true; // 返回true以结束some循环
|
||||
}
|
||||
return false; // 继续遍历
|
||||
});
|
||||
});
|
||||
// 将库存信息加入
|
||||
state.goodsInfo.skus.forEach(item => {
|
||||
if (item.id == setList.skuId) {
|
||||
setList.stock = item.stock
|
||||
}
|
||||
})
|
||||
|
||||
return setList
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
// 非法参数
|
||||
if (!options.id) {
|
||||
@@ -281,7 +324,6 @@
|
||||
// 加载到商品
|
||||
state.skeletonLoading = false;
|
||||
state.goodsInfo = res.data;
|
||||
|
||||
// 加载是否收藏
|
||||
if (isLogin.value) {
|
||||
FavoriteApi.isFavoriteExists(state.goodsId, 'goods').then((res) => {
|
||||
@@ -301,19 +343,19 @@
|
||||
if (res.code !== 0) {
|
||||
return;
|
||||
}
|
||||
res.data.forEach((activity) => {
|
||||
if ([1, 2, 3].includes(activity.type)) {
|
||||
// 情况一:拼团/秒杀/砍价
|
||||
let activData = handList(res.data)
|
||||
activData.forEach(activity => {
|
||||
if ([1, 2, 3].includes(activity.type)) { // 情况一:拼团/秒杀/砍价
|
||||
state.activityList.push(activity);
|
||||
} else if (activity.type === 5) {
|
||||
// 情况二:满减送
|
||||
} else if (activity.type === 5) { // 情况二:满减送
|
||||
state.activityInfo.push(activity);
|
||||
} else {
|
||||
// 情况三:限时折扣 TODO 芋艿
|
||||
console.log('待实现!优先级不高');
|
||||
} else { // 情况三:限时折扣 TODO 芋艿
|
||||
// console.log('待实现!优先级不高');
|
||||
}
|
||||
});
|
||||
})
|
||||
});
|
||||
//获取结算信息
|
||||
getSettlementByIds(state.goodsId)
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -462,4 +504,101 @@
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
// 限时折扣
|
||||
.discount {
|
||||
width: 750rpx;
|
||||
height: 100rpx;
|
||||
// background-color: red;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.disImg {
|
||||
width: 750rpx;
|
||||
height: 100rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.discountCont {
|
||||
width: 680rpx;
|
||||
height: 90rpx;
|
||||
margin: 10rpx auto 0 auto;
|
||||
// background-color: gold;
|
||||
}
|
||||
|
||||
.disContT {
|
||||
width: 680rpx;
|
||||
height: 50rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.disContT1 {
|
||||
width: 400rpx;
|
||||
height: 50rpx;
|
||||
// background-color: green;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.disContT2 {
|
||||
width: 200rpx;
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
// background-color: gold;
|
||||
font-size: 30rpx;
|
||||
text-align: end;
|
||||
color: white;
|
||||
font-weight: bolder;
|
||||
font-style: oblique 20deg;
|
||||
letter-spacing: .1rem;
|
||||
}
|
||||
|
||||
.disContT1P {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.disContT1End {
|
||||
// width: 180rpx;
|
||||
padding: 0 10rpx;
|
||||
height: 30rpx;
|
||||
line-height: 28rpx;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
background-color: white;
|
||||
color: #ff3000;
|
||||
font-size: 23rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.disContB {
|
||||
width: 680rpx;
|
||||
height: 40rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 20rpx;
|
||||
color: white;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.disContB1 {
|
||||
width: 300rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.disContB2 {
|
||||
width: 300rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
+59
-2
@@ -118,7 +118,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import { reactive,ref } from 'vue';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import _ from 'lodash-es';
|
||||
@@ -277,7 +277,15 @@
|
||||
if (code !== 0) {
|
||||
return;
|
||||
}
|
||||
state.pagination.list = _.concat(state.pagination.list, data.list);
|
||||
// 使用 map 提取每个对象的 id 属性
|
||||
const ids = data.list.map(item => item.id);
|
||||
// 使用 join 方法将 id 数组连接成一个用逗号分隔的字符串
|
||||
const idsString = ids.join(',');
|
||||
// 获取结算信息
|
||||
settleData.value = await getSettlementByIds(idsString)
|
||||
// 处理获得的数据
|
||||
const ms = enrichDataWithSkus(data.list,settleData.value)
|
||||
state.pagination.list = _.concat(state.pagination.list, ms);
|
||||
state.pagination.total = data.total;
|
||||
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
|
||||
mountMasonry();
|
||||
@@ -292,6 +300,55 @@
|
||||
getList(state.currentSort, state.currentOrder);
|
||||
}
|
||||
|
||||
//获取结算信息
|
||||
const settleData = ref()
|
||||
async function getSettlementByIds(ids) {
|
||||
const { data } = await SpuApi.getSettlementProduct(ids);
|
||||
return data;
|
||||
}
|
||||
|
||||
//计算展示价格的函数
|
||||
function enrichDataWithSkus(data, array) {
|
||||
// 创建一个映射,以 id 为键,存储 data 数组中的对象
|
||||
const dataMap = new Map(data.map(item => [item.id, { ...item }]));
|
||||
|
||||
// 遍历 array 数组
|
||||
array.forEach(item => {
|
||||
// 初始化 discountPrice 和 vipPrice 为 null
|
||||
let discountPrice = null;
|
||||
let vipPrice = null;
|
||||
let foundType4 = false;
|
||||
let foundType6 = false;
|
||||
|
||||
// 遍历 skus 数组,寻找 type 为 4 和 6 的首个条目
|
||||
item.skus.forEach(sku => {
|
||||
if (!foundType4 && sku.type === 4) {
|
||||
discountPrice = sku.price;
|
||||
foundType4 = true;
|
||||
}
|
||||
if (!foundType6 && sku.type === 6) {
|
||||
vipPrice = sku.price;
|
||||
foundType6 = true;
|
||||
}
|
||||
|
||||
// 如果已经找到 type 为 4 和 6 的条目,则不需要继续遍历
|
||||
if (foundType4 && foundType6) {
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
// 更新 dataMap 中对应的对象
|
||||
if (dataMap.has(item.id)) {
|
||||
dataMap.get(item.id).discountPrice = discountPrice;
|
||||
dataMap.get(item.id).vipPrice = vipPrice;
|
||||
dataMap.get(item.id).reward = item.reward;
|
||||
}
|
||||
});
|
||||
|
||||
// 返回更新后的数据数组
|
||||
return Array.from(dataMap.values());
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
state.categoryId = options.categoryId;
|
||||
state.keyword = options.keyword;
|
||||
|
||||
+72
-78
@@ -6,26 +6,13 @@
|
||||
<!-- 骨架屏 -->
|
||||
<detailSkeleton v-if="state.skeletonLoading" />
|
||||
<!-- 下架/售罄提醒 -->
|
||||
<s-empty
|
||||
v-else-if="state.goodsInfo === null || state.goodsInfo.activity_type !== 'seckill'"
|
||||
text="活动不存在或已结束"
|
||||
icon="/static/soldout-empty.png"
|
||||
showAction
|
||||
actionText="再逛逛"
|
||||
actionUrl="/pages/goods/list"
|
||||
/>
|
||||
<s-empty v-else-if="state.goodsInfo === null || state.goodsInfo.activity_type !== 'seckill'" text="活动不存在或已结束"
|
||||
icon="/static/soldout-empty.png" showAction actionText="再逛逛" actionUrl="/pages/goods/list" />
|
||||
<block v-else>
|
||||
<view class="detail-swiper-selector">
|
||||
<!-- 商品图轮播 -->
|
||||
<su-swiper
|
||||
class="ss-m-b-14"
|
||||
isPreview
|
||||
:list="state.goodsSwiper"
|
||||
dotStyle="tag"
|
||||
imageMode="widthFix"
|
||||
dotCur="bg-mask-40"
|
||||
:seizeHeight="750"
|
||||
/>
|
||||
<su-swiper class="ss-m-b-14" isPreview :list="state.goodsSwiper" dotStyle="tag" imageMode="widthFix"
|
||||
dotCur="bg-mask-40" :seizeHeight="750" />
|
||||
|
||||
<!-- 价格+标题 -->
|
||||
<view class="title-card ss-m-y-14 ss-m-x-20 ss-p-x-20 ss-p-y-34">
|
||||
@@ -63,7 +50,7 @@
|
||||
<detail-progress :percent="state.percent" />
|
||||
</view>
|
||||
|
||||
<view class="title-text ss-line-2 ss-m-b-6">{{ state.goodsInfo?.name }}</view>
|
||||
<view class="title-text ss-line-2 ss-m-b-6">{{ state.goodsInfo.name || '' }}</view>
|
||||
<view class="subtitle-text ss-line-1">{{ state.goodsInfo.introduction }}</view>
|
||||
</view>
|
||||
|
||||
@@ -72,14 +59,9 @@
|
||||
<detail-cell-sku :sku="state.selectedSku" @tap="state.showSelectSku = true" />
|
||||
</view>
|
||||
<!-- 规格与数量弹框 -->
|
||||
<s-select-seckill-sku
|
||||
v-model="state.goodsInfo"
|
||||
:show="state.showSelectSku"
|
||||
:single-limit-count="activity.singleLimitCount"
|
||||
@buy="onBuy"
|
||||
@change="onSkuChange"
|
||||
@close="state.showSelectSku = false"
|
||||
/>
|
||||
<s-select-seckill-sku v-model="state.goodsInfo" :show="state.showSelectSku"
|
||||
:single-limit-count="activity.singleLimitCount" @buy="onBuy" @change="onSkuChange"
|
||||
@close="state.showSelectSku = false" />
|
||||
</view>
|
||||
|
||||
<!-- 评价 -->
|
||||
@@ -91,36 +73,25 @@
|
||||
<detail-tabbar v-model="state.goodsInfo">
|
||||
<!-- TODO: 缺货中 已售罄 判断 设计-->
|
||||
<view class="buy-box ss-flex ss-col-center ss-p-r-20">
|
||||
<button
|
||||
class="ss-reset-button origin-price-btn ss-flex-col"
|
||||
v-if="state.goodsInfo.marketPrice"
|
||||
@tap="sheep.$router.go('/pages/goods/index', { id: state.goodsInfo.id })"
|
||||
>
|
||||
<button class="ss-reset-button origin-price-btn ss-flex-col" v-if="state.goodsInfo.marketPrice"
|
||||
@tap="sheep.$router.go('/pages/goods/index', { id: state.goodsInfo.id })">
|
||||
<view>
|
||||
<view class="btn-price">{{ fen2yuan(state.goodsInfo.marketPrice) }}</view>
|
||||
<view>原价购买</view>
|
||||
</view>
|
||||
</button>
|
||||
<button v-else class="ss-reset-button origin-price-btn ss-flex-col">
|
||||
<view
|
||||
class="no-original"
|
||||
:class="
|
||||
<view class="no-original" :class="
|
||||
state.goodsInfo.stock === 0 || timeStatusEnum !== TimeStatusEnum.STARTED ? '' : ''
|
||||
"
|
||||
>
|
||||
">
|
||||
秒杀价
|
||||
</view>
|
||||
</button>
|
||||
<button
|
||||
class="ss-reset-button btn-box ss-flex-col"
|
||||
@tap="state.showSelectSku = true"
|
||||
:class="
|
||||
<button class="ss-reset-button btn-box ss-flex-col" @tap="state.showSelectSku = true" :class="
|
||||
timeStatusEnum === TimeStatusEnum.STARTED && state.goodsInfo.stock != 0
|
||||
? 'check-btn-box'
|
||||
: 'disabled-btn-box'
|
||||
"
|
||||
:disabled="state.goodsInfo.stock === 0 || timeStatusEnum !== TimeStatusEnum.STARTED"
|
||||
>
|
||||
" :disabled="state.goodsInfo.stock === 0 || timeStatusEnum !== TimeStatusEnum.STARTED">
|
||||
<view class="btn-price">{{ fen2yuan(state.goodsInfo.price) }}</view>
|
||||
<view v-if="timeStatusEnum === TimeStatusEnum.STARTED">
|
||||
<view v-if="state.goodsInfo.stock === 0">已售罄</view>
|
||||
@@ -135,11 +106,26 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, computed, ref } from 'vue';
|
||||
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
|
||||
import {
|
||||
reactive,
|
||||
computed,
|
||||
ref,
|
||||
unref
|
||||
} from 'vue';
|
||||
import {
|
||||
onLoad,
|
||||
onPageScroll
|
||||
} from '@dcloudio/uni-app';
|
||||
import sheep from '@/sheep';
|
||||
import { isEmpty, min } from 'lodash-es';
|
||||
import { useDurationTime, formatGoodsSwiper, fen2yuan } from '@/sheep/hooks/useGoods';
|
||||
import {
|
||||
isEmpty,
|
||||
min
|
||||
} from 'lodash-es';
|
||||
import {
|
||||
useDurationTime,
|
||||
formatGoodsSwiper,
|
||||
fen2yuan
|
||||
} from '@/sheep/hooks/useGoods';
|
||||
import detailNavbar from './components/detail/detail-navbar.vue';
|
||||
import detailCellSku from './components/detail/detail-cell-sku.vue';
|
||||
import detailTabbar from './components/detail/detail-tabbar.vue';
|
||||
@@ -149,7 +135,10 @@
|
||||
import detailProgress from './components/detail/detail-progress.vue';
|
||||
import SeckillApi from '@/sheep/api/promotion/seckill';
|
||||
import SpuApi from '@/sheep/api/product/spu';
|
||||
import { getTimeStatusEnum, TimeStatusEnum } from '@/sheep/util/const';
|
||||
import {
|
||||
getTimeStatusEnum,
|
||||
TimeStatusEnum
|
||||
} from '@/sheep/util/const';
|
||||
|
||||
const headerBg = sheep.$url.css('/static/img/shop/goods/seckill-bg.png');
|
||||
const btnBg = sheep.$url.css('/static/img/shop/goods/seckill-btn.png');
|
||||
@@ -186,53 +175,53 @@
|
||||
order_type: 'goods',
|
||||
buy_type: 'seckill',
|
||||
seckillActivityId: activity.value.id,
|
||||
items: [
|
||||
{
|
||||
skuId: sku.id,
|
||||
count: sku.count,
|
||||
},
|
||||
],
|
||||
items: [{
|
||||
skuId: sku.id,
|
||||
count: sku.count,
|
||||
}, ],
|
||||
}),
|
||||
});
|
||||
}
|
||||
|
||||
// 分享信息 TODO 芋艿:待接入
|
||||
// 分享信息
|
||||
const shareInfo = computed(() => {
|
||||
if (isEmpty(activity)) return {};
|
||||
return sheep.$platform.share.getShareInfo(
|
||||
{
|
||||
title: activity.value.name,
|
||||
image: sheep.$url.cdn(state.goodsInfo.picUrl),
|
||||
params: {
|
||||
page: '4',
|
||||
query: activity.value.id,
|
||||
},
|
||||
if (isEmpty(unref(activity))) return {};
|
||||
return sheep.$platform.share.getShareInfo({
|
||||
title: activity.value.name,
|
||||
image: sheep.$url.cdn(state.goodsInfo.picUrl),
|
||||
params: {
|
||||
page: '4',
|
||||
query: activity.value.id,
|
||||
},
|
||||
{
|
||||
type: 'goods', // 商品海报
|
||||
title: activity.value.name, // 商品标题
|
||||
image: sheep.$url.cdn(state.goodsInfo.picUrl), // 商品主图
|
||||
price: state.goodsInfo.price, // 商品价格
|
||||
marketPrice: state.goodsInfo.marketPrice, // 商品原价
|
||||
},
|
||||
);
|
||||
}, {
|
||||
type: 'goods', // 商品海报
|
||||
title: activity.value.name, // 商品标题
|
||||
image: sheep.$url.cdn(state.goodsInfo.picUrl), // 商品主图
|
||||
price: state.goodsInfo.price, // 商品价格
|
||||
marketPrice: state.goodsInfo.marketPrice, // 商品原价
|
||||
}, );
|
||||
});
|
||||
|
||||
const activity = ref();
|
||||
const timeStatusEnum = ref('');
|
||||
|
||||
// 查询活动
|
||||
const getActivity = async (id) => {
|
||||
const { data } = await SeckillApi.getSeckillActivity(id);
|
||||
const {
|
||||
data
|
||||
} = await SeckillApi.getSeckillActivity(id);
|
||||
activity.value = data;
|
||||
timeStatusEnum.value = getTimeStatusEnum(activity.startTime, activity.endTime);
|
||||
|
||||
timeStatusEnum.value = getTimeStatusEnum(activity.value.startTime, activity.value.endTime);
|
||||
state.percent = 100 - data.stock / data.totalStock * 100;
|
||||
// 查询商品
|
||||
await getSpu(data.spuId);
|
||||
};
|
||||
|
||||
// 查询商品
|
||||
const getSpu = async (id) => {
|
||||
const { data } = await SpuApi.getSpuDetail(id);
|
||||
// 模拟
|
||||
const {
|
||||
data
|
||||
} = await SpuApi.getSpuDetail(id);
|
||||
data.activity_type = 'seckill';
|
||||
state.goodsInfo = data;
|
||||
// 处理轮播图
|
||||
@@ -283,6 +272,7 @@
|
||||
.disabled-btn-box[disabled] {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
background-color: $white;
|
||||
margin: 14rpx 20rpx;
|
||||
@@ -373,6 +363,7 @@
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
|
||||
.countdown-h {
|
||||
font-size: 24rpx;
|
||||
font-family: OPPOSANS;
|
||||
@@ -383,6 +374,7 @@
|
||||
background: rgba(#000000, 0.1);
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.countdown-num {
|
||||
font-size: 24rpx;
|
||||
font-family: OPPOSANS;
|
||||
@@ -466,6 +458,7 @@
|
||||
line-height: normal;
|
||||
border-radius: 0px 40rpx 40rpx 0px;
|
||||
}
|
||||
|
||||
.btn-price {
|
||||
font-family: OPPOSANS;
|
||||
|
||||
@@ -483,6 +476,7 @@
|
||||
line-height: normal;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
|
||||
.no-original {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
@@ -553,4 +547,4 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user