11
This commit is contained in:
parent
3852d6a23a
commit
7ef82d277f
11
pages.json
11
pages.json
@ -190,6 +190,17 @@
|
|||||||
"group": "商品"
|
"group": "商品"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "point",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "积分商品"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"sync": true,
|
||||||
|
"title": "积分商品",
|
||||||
|
"group": "商品"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "sales",
|
"path": "sales",
|
||||||
"style": {
|
"style": {
|
||||||
|
|||||||
76
pages/activity/point/list.vue
Normal file
76
pages/activity/point/list.vue
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
<!-- 积分商城：商品列表 -->
|
||||||
|
<template>
|
||||||
|
<s-layout title="积分商城" navbar="normal" :leftWidth="0" :rightWidth="0">
|
||||||
|
<scroll-view
|
||||||
|
class="scroll-box"
|
||||||
|
:style="{ height: pageHeight + 'rpx' }"
|
||||||
|
scroll-y="true"
|
||||||
|
:scroll-with-animation="false"
|
||||||
|
:enable-back-to-top="true"
|
||||||
|
>
|
||||||
|
<s-point-card ref="sPointCardRef" class="ss-p-x-20 ss-m-t-20"/>
|
||||||
|
<s-empty
|
||||||
|
v-if="activityTotal === 0"
|
||||||
|
icon="/static/goods-empty.png"
|
||||||
|
text="暂无积分商品"
|
||||||
|
></s-empty>
|
||||||
|
<uni-load-more
|
||||||
|
v-if="activityTotal > 0"
|
||||||
|
:status="loadStatus"
|
||||||
|
:content-text="{
|
||||||
|
contentdown: '上拉加载更多',
|
||||||
|
}"
|
||||||
|
@tap="loadMore"
|
||||||
|
/>
|
||||||
|
</scroll-view>
|
||||||
|
</s-layout>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import sheep from '@/sheep';
|
||||||
|
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||||
|
import { reactive, ref } from 'vue';
|
||||||
|
import PointApi from '@/sheep/api/promotion/point';
|
||||||
|
import SLayout from '@/sheep/components/s-layout/s-layout.vue';
|
||||||
|
|
||||||
|
// 计算页面高度
|
||||||
|
const { safeAreaInsets, safeArea } = sheep.$platform.device;
|
||||||
|
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||||
|
const pageHeight =
|
||||||
|
(safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sheep.$platform.navbar - 350;
|
||||||
|
|
||||||
|
const sPointCardRef = ref();
|
||||||
|
// 查询活动列表
|
||||||
|
const activityPageParams = reactive({
|
||||||
|
pageNo: 1, // 页码
|
||||||
|
pageSize: 5, // 每页数量
|
||||||
|
});
|
||||||
|
|
||||||
|
const activityTotal = ref(0); // 活动总数
|
||||||
|
const activityCount = ref(0); // 已加载活动数量
|
||||||
|
const loadStatus = ref(''); // 页面加载状态
|
||||||
|
async function getActivityList() {
|
||||||
|
loadStatus.value = 'loading';
|
||||||
|
const { data } = await PointApi.getPointActivityPage(activityPageParams);
|
||||||
|
await sPointCardRef.value.concatActivity(data.list);
|
||||||
|
activityCount.value = sPointCardRef.value.getActivityCount();
|
||||||
|
activityTotal.value = data.total;
|
||||||
|
|
||||||
|
loadStatus.value = activityCount.value < activityTotal.value ? 'more' : 'noMore';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载更多
|
||||||
|
function loadMore() {
|
||||||
|
if (state.loadStatus !== 'noMore') {
|
||||||
|
activityPageParams.pageNo += 1;
|
||||||
|
getActivityList();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 上拉加载更多
|
||||||
|
onReachBottom(() => {
|
||||||
|
loadMore();
|
||||||
|
});
|
||||||
|
onLoad(() => {
|
||||||
|
getActivityList();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
480
pages/goods/point.vue
Normal file
480
pages/goods/point.vue
Normal file
@ -0,0 +1,480 @@
|
|||||||
|
<!-- 秒杀商品详情 -->
|
||||||
|
<template>
|
||||||
|
<s-layout :onShareAppMessage="shareInfo" navbar="goods">
|
||||||
|
<!-- 标题栏 -->
|
||||||
|
<detailNavbar />
|
||||||
|
<!-- 骨架屏 -->
|
||||||
|
<detailSkeleton v-if="state.skeletonLoading" />
|
||||||
|
<!-- 下架/售罄提醒 -->
|
||||||
|
<s-empty
|
||||||
|
v-else-if="state.goodsInfo === null || state.goodsInfo.activity_type !== PromotionActivityTypeEnum.POINT.type"
|
||||||
|
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"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 价格+标题 -->
|
||||||
|
<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-18">
|
||||||
|
<view class="price-box ss-flex ss-col-bottom">
|
||||||
|
<image
|
||||||
|
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
|
||||||
|
class="point-img"
|
||||||
|
></image>
|
||||||
|
<text class="point-text ss-m-r-16">
|
||||||
|
{{ getShowPrice.point }}
|
||||||
|
{{ !getShowPrice.price || getShowPrice.price === 0 ? '' : `+￥${getShowPrice.price}` }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view class="sales-text">
|
||||||
|
{{ formatExchange(state.goodsInfo.sales_show_type, state.goodsInfo.sales) }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="origin-price-text ss-m-b-60" v-if="state.goodsInfo.marketPrice">
|
||||||
|
原价：￥{{ fen2yuan(state.selectedSku.marketPrice || state.goodsInfo.marketPrice) }}
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<!-- 功能卡片 -->
|
||||||
|
<view class="detail-cell-card detail-card ss-flex-col">
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 评价 -->
|
||||||
|
<detail-comment-card class="detail-comment-selector" :goodsId="state.goodsInfo.id" />
|
||||||
|
<!-- 详情 -->
|
||||||
|
<detail-content-card class="detail-content-selector" :content="state.goodsInfo.description" />
|
||||||
|
|
||||||
|
<!-- 详情tabbar -->
|
||||||
|
<detail-tabbar v-model="state.goodsInfo">
|
||||||
|
<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 })"
|
||||||
|
>
|
||||||
|
<view>
|
||||||
|
<view class="btn-price">{{ fen2yuan(state.goodsInfo.marketPrice) }}</view>
|
||||||
|
<view>原价购买</view>
|
||||||
|
</view>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="ss-reset-button btn-box ss-flex-col"
|
||||||
|
@tap="state.showSelectSku = true"
|
||||||
|
:class="
|
||||||
|
state.goodsInfo.stock != 0
|
||||||
|
? 'check-btn-box'
|
||||||
|
: 'disabled-btn-box'
|
||||||
|
"
|
||||||
|
:disabled="state.goodsInfo.stock === 0"
|
||||||
|
>
|
||||||
|
<view class="price-box ss-flex">
|
||||||
|
<image
|
||||||
|
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
|
||||||
|
style="width: 36rpx;height: 36rpx;margin: 0 4rpx;"
|
||||||
|
></image>
|
||||||
|
<text class="point-text ss-m-r-16">
|
||||||
|
{{ getShowPrice.point }}
|
||||||
|
{{ !getShowPrice.price || getShowPrice.price === 0 ? '' : `+￥${getShowPrice.price}` }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<view v-if="state.goodsInfo.stock === 0">已售罄</view>
|
||||||
|
<view v-else>立即兑换</view>
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
</detail-tabbar>
|
||||||
|
</block>
|
||||||
|
</s-layout>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed, reactive, ref, unref } from 'vue';
|
||||||
|
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
|
||||||
|
import sheep from '@/sheep';
|
||||||
|
import { isEmpty } from 'lodash-es';
|
||||||
|
import { fen2yuan, formatExchange, formatGoodsSwiper } 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';
|
||||||
|
import detailSkeleton from './components/detail/detail-skeleton.vue';
|
||||||
|
import detailCommentCard from './components/detail/detail-comment-card.vue';
|
||||||
|
import detailContentCard from './components/detail/detail-content-card.vue';
|
||||||
|
import SpuApi from '@/sheep/api/product/spu';
|
||||||
|
import { PromotionActivityTypeEnum } from '@/sheep/util/const';
|
||||||
|
import PointApi from '@/sheep/api/promotion/point';
|
||||||
|
|
||||||
|
const headerBg = sheep.$url.css('/static/img/shop/goods/score-bg.png');
|
||||||
|
const btnBg = sheep.$url.css('/static/img/shop/goods/seckill-btn.png');
|
||||||
|
const disabledBtnBg = sheep.$url.css('/static/img/shop/goods/activity-btn-disabled.png');
|
||||||
|
const seckillBg = sheep.$url.css('/static/img/shop/goods/seckill-tip-bg.png');
|
||||||
|
const grouponBg = sheep.$url.css('/static/img/shop/goods/groupon-tip-bg.png');
|
||||||
|
|
||||||
|
onPageScroll(() => {
|
||||||
|
});
|
||||||
|
const state = reactive({
|
||||||
|
skeletonLoading: true,
|
||||||
|
goodsInfo: {},
|
||||||
|
showSelectSku: false,
|
||||||
|
goodsSwiper: [],
|
||||||
|
selectedSku: {},
|
||||||
|
showModel: false,
|
||||||
|
total: 0,
|
||||||
|
price: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
// 规格变更
|
||||||
|
function onSkuChange(e) {
|
||||||
|
state.selectedSku = e;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 立即购买
|
||||||
|
function onBuy(sku) {
|
||||||
|
sheep.$router.go('/pages/order/confirm', {
|
||||||
|
data: JSON.stringify({
|
||||||
|
order_type: 'goods',
|
||||||
|
buy_type: 'point',
|
||||||
|
pointActivityId: activity.value.id,
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
skuId: sku.id,
|
||||||
|
count: sku.count,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 分享信息
|
||||||
|
// TODO puhui999: 下次 fix
|
||||||
|
const shareInfo = computed(() => {
|
||||||
|
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, // 商品原价
|
||||||
|
},
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const activity = ref();
|
||||||
|
|
||||||
|
const getShowPrice = computed(() => {
|
||||||
|
if (!isEmpty(state.selectedSku)) {
|
||||||
|
const sku = state.selectedSku;
|
||||||
|
return {
|
||||||
|
point: sku.point,
|
||||||
|
price: !sku.pointPrice ? '' : fen2yuan(sku.pointPrice),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
point: activity.value.point,
|
||||||
|
price: !activity.value.price ? '' : fen2yuan(activity.value.price),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
const getShowPriceText = computed(() => {
|
||||||
|
let priceText = `￥${fen2yuan(state.goodsInfo.price)}`;
|
||||||
|
if (!isEmpty(state.selectedSku)) {
|
||||||
|
const sku = state.selectedSku;
|
||||||
|
priceText = `${sku.point}${!sku.pointPrice ? '' : `+￥${fen2yuan(sku.pointPrice)}`}`;
|
||||||
|
}
|
||||||
|
return priceText;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 查询活动
|
||||||
|
const getActivity = async (id) => {
|
||||||
|
const { data } = await PointApi.getPointActivity(id);
|
||||||
|
activity.value = data;
|
||||||
|
// 查询商品
|
||||||
|
await getSpu(data.spuId);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 查询商品
|
||||||
|
const getSpu = async (id) => {
|
||||||
|
const { data } = await SpuApi.getSpuDetail(id);
|
||||||
|
data.activity_type = PromotionActivityTypeEnum.POINT.type;
|
||||||
|
state.goodsInfo = data;
|
||||||
|
state.goodsInfo.stock = Math.min(data.stock, activity.value.stock);
|
||||||
|
// 处理轮播图
|
||||||
|
state.goodsSwiper = formatGoodsSwiper(state.goodsInfo.sliderPicUrls);
|
||||||
|
|
||||||
|
// 价格、库存使用活动的
|
||||||
|
data.skus.forEach((sku) => {
|
||||||
|
const product = activity.value.products.find((product) => product.skuId === sku.id);
|
||||||
|
if (product) {
|
||||||
|
sku.point = product.point;
|
||||||
|
sku.pointPrice = product.price;
|
||||||
|
sku.stock = Math.min(sku.stock, product.stock);
|
||||||
|
// 设置限购数量
|
||||||
|
sku.limitCount = product.count;
|
||||||
|
} else {
|
||||||
|
// 找不到可能是没配置
|
||||||
|
sku.stock = 0;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
state.skeletonLoading = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
onLoad((options) => {
|
||||||
|
// 非法参数
|
||||||
|
if (!options.id) {
|
||||||
|
state.goodsInfo = null;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查询活动
|
||||||
|
getActivity(options.id);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.disabled-btn-box[disabled] {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-card {
|
||||||
|
background-color: $white;
|
||||||
|
margin: 14rpx 20rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 价格标题卡片
|
||||||
|
.title-card {
|
||||||
|
width: 710rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
background-image: v-bind(headerBg);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
|
.price-box {
|
||||||
|
.point-img {
|
||||||
|
width: 36rpx;
|
||||||
|
height: 36rpx;
|
||||||
|
margin: 0 4rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.point-text {
|
||||||
|
font-size: 42rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #ff3000;
|
||||||
|
line-height: 36rpx;
|
||||||
|
font-family: OPPOSANS;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-text {
|
||||||
|
font-size: 42rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #ff3000;
|
||||||
|
line-height: 36rpx;
|
||||||
|
font-family: OPPOSANS;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.origin-price-text {
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
text-decoration: line-through;
|
||||||
|
color: $gray-c;
|
||||||
|
font-family: OPPOSANS;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sales-text {
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: $gray-c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.discounts-box {
|
||||||
|
.discounts-tag {
|
||||||
|
padding: 4rpx 10rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
border-radius: 4rpx;
|
||||||
|
color: var(--ui-BG-Main);
|
||||||
|
// background: rgba(#2aae67, 0.05);
|
||||||
|
background: var(--ui-BG-Main-tag);
|
||||||
|
}
|
||||||
|
|
||||||
|
.discounts-title {
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--ui-BG-Main);
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cicon-forward {
|
||||||
|
color: var(--ui-BG-Main);
|
||||||
|
font-size: 24rpx;
|
||||||
|
line-height: normal;
|
||||||
|
margin-top: 4rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-text {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 42rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle-text {
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
color: $dark-9;
|
||||||
|
line-height: 42rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 购买
|
||||||
|
.buy-box {
|
||||||
|
.check-btn-box {
|
||||||
|
width: 248rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-left: -36rpx;
|
||||||
|
background-image: v-bind(btnBg);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: normal;
|
||||||
|
border-radius: 0px 40rpx 40rpx 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.disabled-btn-box {
|
||||||
|
width: 248rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-left: -36rpx;
|
||||||
|
background-image: v-bind(disabledBtnBg);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
color: #999999;
|
||||||
|
line-height: normal;
|
||||||
|
border-radius: 0px 40rpx 40rpx 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-price {
|
||||||
|
font-family: OPPOSANS;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: '￥';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.origin-price-btn {
|
||||||
|
width: 236rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
background: rgba(#ff5651, 0.1);
|
||||||
|
color: #ff6000;
|
||||||
|
border-radius: 40rpx 0px 0px 40rpx;
|
||||||
|
line-height: normal;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
|
||||||
|
.no-original {
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//秒杀卡片
|
||||||
|
.seckill-box {
|
||||||
|
background: v-bind(seckillBg) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.groupon-box {
|
||||||
|
background: v-bind(grouponBg) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
//活动卡片
|
||||||
|
.activity-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 80rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
|
||||||
|
.activity-title {
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 42rpx;
|
||||||
|
|
||||||
|
.activity-icon {
|
||||||
|
width: 38rpx;
|
||||||
|
height: 38rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-go {
|
||||||
|
width: 70rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #ff6000;
|
||||||
|
font-size: 24rpx;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.model-box {
|
||||||
|
.title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -3,7 +3,6 @@
|
|||||||
<s-layout
|
<s-layout
|
||||||
:title="state.name"
|
:title="state.name"
|
||||||
navbar="custom"
|
navbar="custom"
|
||||||
tabbar="/pages/index/page"
|
|
||||||
:bgStyle="state.page"
|
:bgStyle="state.page"
|
||||||
:navbarStyle="state.navigationBar"
|
:navbarStyle="state.navigationBar"
|
||||||
onShareAppMessage
|
onShareAppMessage
|
||||||
@ -27,7 +26,7 @@
|
|||||||
page: {},
|
page: {},
|
||||||
});
|
});
|
||||||
onLoad(async (options) => {
|
onLoad(async (options) => {
|
||||||
let id = options.id;
|
let id = options.id
|
||||||
|
|
||||||
// #ifdef MP
|
// #ifdef MP
|
||||||
// 小程序预览自定义页面
|
// 小程序预览自定义页面
|
||||||
|
|||||||
390
pages/integration/index.vue
Normal file
390
pages/integration/index.vue
Normal file
@ -0,0 +1,390 @@
|
|||||||
|
<template>
|
||||||
|
<s-layout navbar="normal" :leftWidth="0" :rightWidth="0" >
|
||||||
|
<!-- 筛选 -->
|
||||||
|
<!-- <su-sticky bgColor="#fff">
|
||||||
|
<view class="ss-flex">
|
||||||
|
<view class="ss-flex-1">
|
||||||
|
<su-tabs :list="state.tabList" :scrollable="false" @change="onTabsChange"
|
||||||
|
:current="state.currentTab" />
|
||||||
|
</view>
|
||||||
|
<view class="list-icon" @tap="state.iconStatus = !state.iconStatus">
|
||||||
|
<text v-if="state.iconStatus" class="sicon-goods-list" />
|
||||||
|
<text v-else class="sicon-goods-card" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</su-sticky> -->
|
||||||
|
<view class="title">
|
||||||
|
积分商品
|
||||||
|
</view>
|
||||||
|
<!-- 弹窗 -->
|
||||||
|
<su-popup :show="state.showFilter" type="top" round="10" :space="sys_navBar + 38" backgroundColor="#F6F6F6"
|
||||||
|
:zIndex="10" @close="state.showFilter = false">
|
||||||
|
<view class="filter-list-box">
|
||||||
|
<view class="filter-item" v-for="(item, index) in state.tabList[state.currentTab].list"
|
||||||
|
:key="item.value" :class="[{ 'filter-item-active': index === state.curFilter }]"
|
||||||
|
@tap="onFilterItem(index)">
|
||||||
|
{{ item.label }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</su-popup>
|
||||||
|
|
||||||
|
<!-- 情况一：单列布局 -->
|
||||||
|
<view class="goods-list ss-m-t-20">
|
||||||
|
<view class="ss-p-l-20 ss-p-r-20 ss-m-b-20" v-for="item in state.pagination.list" :key="item.id">
|
||||||
|
<dfff class="" size="lg" :data="item" :topRadius="10" :bottomRadius="10"
|
||||||
|
@click="sheep.$router.go('/pages/goods/index', { id: item.id })" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 情况二：双列布局 -->
|
||||||
|
<!-- <view v-if="!state.iconStatus && state.pagination.total > 0"
|
||||||
|
class="ss-flex ss-flex-wrap ss-p-x-20 ss-m-t-20 ss-col-top">
|
||||||
|
<view class="goods-list-box">
|
||||||
|
<view class="left-list" v-for="item in state.leftGoodsList" :key="item.id">
|
||||||
|
<s-goods-column class="goods-md-box" size="md" :data="item" :topRadius="10" :bottomRadius="10"
|
||||||
|
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
|
||||||
|
@getHeight="mountMasonry($event, 'left')">
|
||||||
|
<template v-slot:cart>
|
||||||
|
<button class="ss-reset-button cart-btn" />
|
||||||
|
</template>
|
||||||
|
</s-goods-column>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="goods-list-box">
|
||||||
|
<view class="right-list" v-for="item in state.rightGoodsList" :key="item.id">
|
||||||
|
<s-goods-column class="goods-md-box" size="md" :topRadius="10" :bottomRadius="10" :data="item"
|
||||||
|
@click="sheep.$router.go('/pages/goods/index', { id: item.id })"
|
||||||
|
@getHeight="mountMasonry($event, 'right')">
|
||||||
|
<template v-slot:cart>
|
||||||
|
<button class="ss-reset-button cart-btn" />
|
||||||
|
</template>
|
||||||
|
</s-goods-column>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view> -->
|
||||||
|
<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
|
||||||
|
contentdown: '上拉加载更多',
|
||||||
|
}" @tap="loadMore" />
|
||||||
|
<s-empty v-if="state.pagination.total === 0" icon="/static/soldout-empty.png" text="暂无商品" />
|
||||||
|
</s-layout>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import {
|
||||||
|
reactive
|
||||||
|
} from 'vue';
|
||||||
|
import {
|
||||||
|
onLoad,
|
||||||
|
onReachBottom
|
||||||
|
} from '@dcloudio/uni-app';
|
||||||
|
import sheep from '@/sheep';
|
||||||
|
import _ from 'lodash';
|
||||||
|
import {
|
||||||
|
resetPagination
|
||||||
|
} from '@/sheep/util';
|
||||||
|
import SpuApi from '@/sheep/api/product/spu';
|
||||||
|
import dfff from '@/sheep/components/s-goods-column/s-goods-column-jf';
|
||||||
|
|
||||||
|
const sys_navBar = sheep.$platform.navbar;
|
||||||
|
const emits = defineEmits(['close', 'change']);
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
pagination: {
|
||||||
|
list: [],
|
||||||
|
total: 0,
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 6,
|
||||||
|
},
|
||||||
|
currentSort: undefined,
|
||||||
|
currentOrder: undefined,
|
||||||
|
currentTab: 0, // 当前选中的 tab
|
||||||
|
curFilter: 0, // 当前选中的 list 筛选项
|
||||||
|
showFilter: false,
|
||||||
|
iconStatus: false, // true - 单列布局；false - 双列布局
|
||||||
|
keyword: '',
|
||||||
|
categoryId: 0,
|
||||||
|
tabList: [{
|
||||||
|
name: '综合推荐',
|
||||||
|
list: [{
|
||||||
|
label: '综合推荐',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '价格升序',
|
||||||
|
sort: 'price',
|
||||||
|
order: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '价格降序',
|
||||||
|
sort: 'price',
|
||||||
|
order: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '销量',
|
||||||
|
sort: 'salesCount',
|
||||||
|
order: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '新品优先',
|
||||||
|
value: 'createTime',
|
||||||
|
order: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
loadStatus: '',
|
||||||
|
leftGoodsList: [], // 双列布局 - 左侧商品
|
||||||
|
rightGoodsList: [], // 双列布局 - 右侧商品
|
||||||
|
});
|
||||||
|
|
||||||
|
// 加载瀑布流
|
||||||
|
let count = 0;
|
||||||
|
let leftHeight = 0;
|
||||||
|
let rightHeight = 0;
|
||||||
|
|
||||||
|
// 处理双列布局 leftGoodsList + rightGoodsList
|
||||||
|
function mountMasonry(height = 0, where = 'left') {
|
||||||
|
if (!state.pagination.list[count]) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (where === 'left') {
|
||||||
|
leftHeight += height;
|
||||||
|
} else {
|
||||||
|
rightHeight += height;
|
||||||
|
}
|
||||||
|
if (leftHeight <= rightHeight) {
|
||||||
|
state.leftGoodsList.push(state.pagination.list[count]);
|
||||||
|
} else {
|
||||||
|
state.rightGoodsList.push(state.pagination.list[count]);
|
||||||
|
}
|
||||||
|
count++;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 清空列表
|
||||||
|
function emptyList() {
|
||||||
|
resetPagination(state.pagination);
|
||||||
|
state.leftGoodsList = [];
|
||||||
|
state.rightGoodsList = [];
|
||||||
|
count = 0;
|
||||||
|
leftHeight = 0;
|
||||||
|
rightHeight = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 搜索
|
||||||
|
function onSearch(e) {
|
||||||
|
state.keyword = e;
|
||||||
|
emptyList();
|
||||||
|
getList(state.currentSort, state.currentOrder);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 点击
|
||||||
|
function onTabsChange(e) {
|
||||||
|
// 如果点击的是【综合推荐】，则直接展开或者收起筛选项
|
||||||
|
if (state.tabList[e.index].list) {
|
||||||
|
state.currentTab = e.index;
|
||||||
|
state.showFilter = !state.showFilter;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
state.showFilter = false;
|
||||||
|
|
||||||
|
// 如果点击的是【销量】或者【新品优先】，则直接切换 tab
|
||||||
|
if (e.index === state.currentTab) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
state.currentTab = e.index;
|
||||||
|
state.currentSort = e.sort;
|
||||||
|
state.currentOrder = e.order;
|
||||||
|
emptyList();
|
||||||
|
getList(e.sort, e.order);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 点击 tab 的 list 筛选项
|
||||||
|
const onFilterItem = (val) => {
|
||||||
|
// 如果点击的是当前的筛选项，则直接收起筛选项，不要加载数据
|
||||||
|
// 这里选择 tabList[0] 的原因，是目前只有它有 list
|
||||||
|
if (
|
||||||
|
state.currentSort === state.tabList[0].list[val].sort &&
|
||||||
|
state.currentOrder === state.tabList[0].list[val].order
|
||||||
|
) {
|
||||||
|
state.showFilter = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
state.showFilter = false;
|
||||||
|
|
||||||
|
// 设置筛选条件
|
||||||
|
state.curFilter = val;
|
||||||
|
state.tabList[0].name = state.tabList[0].list[val].label;
|
||||||
|
state.currentSort = state.tabList[0].list[val].sort;
|
||||||
|
state.currentOrder = state.tabList[0].list[val].order;
|
||||||
|
// 清空 + 加载数据
|
||||||
|
emptyList();
|
||||||
|
getList();
|
||||||
|
};
|
||||||
|
|
||||||
|
async function getList() {
|
||||||
|
state.loadStatus = 'loading';
|
||||||
|
const {
|
||||||
|
code,
|
||||||
|
data
|
||||||
|
} = await SpuApi.getSpusales({
|
||||||
|
pageNo: state.pagination.pageNo,
|
||||||
|
pageSize: state.pagination.pageSize,
|
||||||
|
sortField: state.currentSort,
|
||||||
|
sortAsc: state.currentOrder,
|
||||||
|
categoryId: state.categoryId,
|
||||||
|
keyword: state.keyword,
|
||||||
|
recommendBenefit:1
|
||||||
|
});
|
||||||
|
if (code !== 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
state.pagination.list = _.concat(state.pagination.list, data.list);
|
||||||
|
state.pagination.total = data.total;
|
||||||
|
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
|
||||||
|
mountMasonry();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 加载更多
|
||||||
|
function loadMore() {
|
||||||
|
if (state.loadStatus === 'noMore') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
state.pagination.pageNo++;
|
||||||
|
getList(state.currentSort, state.currentOrder);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取促销列表
|
||||||
|
const getSpu = async (id) => {
|
||||||
|
const data = await SpuApi.getSpusales({recommendBenefit:1});
|
||||||
|
console.log(data, "我要留了")
|
||||||
|
};
|
||||||
|
|
||||||
|
onLoad((options) => {
|
||||||
|
state.categoryId = options.categoryId;
|
||||||
|
state.keyword = options.keyword;
|
||||||
|
getList(state.currentSort, state.currentOrder);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 上拉加载更多
|
||||||
|
onReachBottom(() => {
|
||||||
|
loadMore();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.title{
|
||||||
|
text-align: center;
|
||||||
|
padding: 10px 0;
|
||||||
|
position: relative;
|
||||||
|
&:after {
|
||||||
|
position: absolute;
|
||||||
|
content:'';
|
||||||
|
top: 50%;
|
||||||
|
left: 98px;
|
||||||
|
width: 100px;
|
||||||
|
height:2px;
|
||||||
|
background:#dadada;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
&:before {
|
||||||
|
position: absolute;
|
||||||
|
content:'';
|
||||||
|
height:2px;
|
||||||
|
top: 50%;
|
||||||
|
right: 0;
|
||||||
|
width: 100px;
|
||||||
|
background:#dadada;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.goods-list-box {
|
||||||
|
width: 50%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.left-list {
|
||||||
|
margin-right: 10rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-list {
|
||||||
|
margin-left: 10rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-box {
|
||||||
|
&:nth-last-of-type(1) {
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(2n) {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-icon {
|
||||||
|
width: 80rpx;
|
||||||
|
|
||||||
|
.sicon-goods-card {
|
||||||
|
font-size: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sicon-goods-list {
|
||||||
|
font-size: 40rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-card {
|
||||||
|
margin-left: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-filter-tabs {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-list-box {
|
||||||
|
padding: 28rpx 52rpx;
|
||||||
|
|
||||||
|
.filter-item {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333333;
|
||||||
|
line-height: normal;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
|
||||||
|
&:nth-last-child(1) {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-item-active {
|
||||||
|
color: var(--ui-BG-Main);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-item {
|
||||||
|
height: 50px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 11;
|
||||||
|
|
||||||
|
.tab-title {
|
||||||
|
font-size: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cur-tab-title {
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-line {
|
||||||
|
width: 60rpx;
|
||||||
|
height: 6rpx;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
bottom: 10rpx;
|
||||||
|
background-color: var(--ui-BG-Main);
|
||||||
|
z-index: 12;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
30
sheep/api/promotion/point.js
Normal file
30
sheep/api/promotion/point.js
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
import request from '@/sheep/request';
|
||||||
|
|
||||||
|
const PointApi = {
|
||||||
|
// 获得积分商城活动分页
|
||||||
|
getPointActivityPage: (params) => {
|
||||||
|
return request({ url: 'promotion/point-activity/page', method: 'GET', params });
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获得积分商城活动列表，基于活动编号数组
|
||||||
|
getPointActivityListByIds: (ids) => {
|
||||||
|
return request({
|
||||||
|
url: '/promotion/point-activity/list-by-ids',
|
||||||
|
method: 'GET',
|
||||||
|
params: {
|
||||||
|
ids,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获得积分商城活动明细
|
||||||
|
getPointActivity: (id) => {
|
||||||
|
return request({
|
||||||
|
url: 'promotion/point-activity/get-detail',
|
||||||
|
method: 'GET',
|
||||||
|
params: { id },
|
||||||
|
});
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PointApi;
|
||||||
@ -40,6 +40,8 @@
|
|||||||
<s-groupon-block v-if="type === 'PromotionCombination'" :data="data" :styles="styles" />
|
<s-groupon-block v-if="type === 'PromotionCombination'" :data="data" :styles="styles" />
|
||||||
<!-- 营销组件：秒杀 -->
|
<!-- 营销组件：秒杀 -->
|
||||||
<s-seckill-block v-if="type === 'PromotionSeckill'" :data="data" :styles="styles" />
|
<s-seckill-block v-if="type === 'PromotionSeckill'" :data="data" :styles="styles" />
|
||||||
|
<!-- 营销组件：积分商城 -->
|
||||||
|
<s-point-block v-if="type === 'PromotionPoint'" :data="data" :styles="styles" />
|
||||||
<!-- 营销组件：小程序直播（暂时没有这个功能） -->
|
<!-- 营销组件：小程序直播（暂时没有这个功能） -->
|
||||||
<s-live-block v-if="type === 'MpLive'" :data="data" :styles="styles" />
|
<s-live-block v-if="type === 'MpLive'" :data="data" :styles="styles" />
|
||||||
<!-- 营销组件：优惠券 -->
|
<!-- 营销组件：优惠券 -->
|
||||||
|
|||||||
754
sheep/components/s-goods-column/s-goods-column-jf.vue
Normal file
754
sheep/components/s-goods-column/s-goods-column-jf.vue
Normal file
@ -0,0 +1,754 @@
|
|||||||
|
<!-- 页面 -->
|
||||||
|
<template>
|
||||||
|
<view class="ss-goods-wrap">
|
||||||
|
<!-- xs卡片：横向紧凑型，一行放两个，图片左内容右边 -->
|
||||||
|
<view
|
||||||
|
v-if="size === 'xs'"
|
||||||
|
class="xs-goods-card ss-flex ss-col-stretch"
|
||||||
|
:style="[elStyles]"
|
||||||
|
@tap="onClick"
|
||||||
|
>
|
||||||
|
<view v-if="tagStyle.show" class="tag-icon-box">
|
||||||
|
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
|
||||||
|
</view>
|
||||||
|
<image
|
||||||
|
class="xs-img-box"
|
||||||
|
:src="sheep.$url.cdn(data.image || data.picUrl)"
|
||||||
|
mode="aspectFit"
|
||||||
|
></image>
|
||||||
|
<view
|
||||||
|
v-if="goodsFields.title?.show || goodsFields.name?.show || goodsFields.price?.show"
|
||||||
|
class="xs-goods-content ss-flex-col ss-row-around"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
v-if="goodsFields.title?.show || goodsFields.name?.show"
|
||||||
|
class="xs-goods-title ss-line-1"
|
||||||
|
:style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]"
|
||||||
|
>
|
||||||
|
{{ data.title || data.name }}
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
v-if="goodsFields.price?.show"
|
||||||
|
class="xs-goods-price font-OPPOSANS"
|
||||||
|
:style="[{ color: goodsFields.price.color }]"
|
||||||
|
>
|
||||||
|
<text class="price-unit ss-font-24">{{ priceUnit }}</text>
|
||||||
|
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- sm卡片：竖向紧凑，一行放三个，图上内容下 -->
|
||||||
|
<view v-if="size === 'sm'" class="sm-goods-card ss-flex-col" :style="[elStyles]" @tap="onClick">
|
||||||
|
<view v-if="tagStyle.show" class="tag-icon-box">
|
||||||
|
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
|
||||||
|
</view>
|
||||||
|
<image
|
||||||
|
class="sm-img-box"
|
||||||
|
:src="sheep.$url.cdn(data.image || data.picUrl)"
|
||||||
|
mode="aspectFill"
|
||||||
|
></image>
|
||||||
|
|
||||||
|
<view
|
||||||
|
v-if="goodsFields.title?.show || goodsFields.name?.show || goodsFields.price?.show"
|
||||||
|
class="sm-goods-content"
|
||||||
|
:style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
v-if="goodsFields.title?.show || goodsFields.name?.show"
|
||||||
|
class="sm-goods-title ss-line-1 ss-m-b-16"
|
||||||
|
>
|
||||||
|
{{ data.title || data.name }}
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
v-if="goodsFields.price?.show"
|
||||||
|
class="sm-goods-price font-OPPOSANS"
|
||||||
|
:style="[{ color: goodsFields.price.color }]"
|
||||||
|
>
|
||||||
|
<text class="price-unit ss-font-24">{{ priceUnit }}</text>
|
||||||
|
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- md卡片：竖向，一行放两个，图上内容下 -->
|
||||||
|
<view v-if="size === 'md'" class="md-goods-card ss-flex-col" :style="[elStyles]" @tap="onClick">
|
||||||
|
<view v-if="tagStyle.show" class="tag-icon-box">
|
||||||
|
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
|
||||||
|
</view>
|
||||||
|
<image
|
||||||
|
class="md-img-box"
|
||||||
|
:src="sheep.$url.cdn(data.image || data.picUrl)"
|
||||||
|
mode="widthFix"
|
||||||
|
></image>
|
||||||
|
<view
|
||||||
|
class="md-goods-content ss-flex-col ss-row-around ss-p-b-20 ss-p-t-20 ss-p-x-16"
|
||||||
|
:id="elId"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
v-if="goodsFields.title?.show || goodsFields.name?.show"
|
||||||
|
class="md-goods-title ss-line-1"
|
||||||
|
:style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]"
|
||||||
|
>
|
||||||
|
{{ data.title || data.name }}
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
|
||||||
|
class="md-goods-subtitle ss-m-t-16 ss-line-1"
|
||||||
|
:style="[{ color: subTitleColor, background: subTitleBackground }]"
|
||||||
|
>
|
||||||
|
{{ data.subtitle || data.introduction }}
|
||||||
|
</view>
|
||||||
|
<slot name="activity">
|
||||||
|
<view v-if="data.promos?.length" class="tag-box ss-flex-wrap ss-flex ss-col-center">
|
||||||
|
<view
|
||||||
|
class="activity-tag ss-m-r-10 ss-m-t-16"
|
||||||
|
v-for="item in data.promos"
|
||||||
|
:key="item.id"
|
||||||
|
>
|
||||||
|
{{ item.title }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</slot>
|
||||||
|
<view class="ss-flex ss-col-bottom">
|
||||||
|
<view
|
||||||
|
v-if="goodsFields.price?.show"
|
||||||
|
class="md-goods-price ss-m-t-16 font-OPPOSANS ss-m-r-10"
|
||||||
|
:style="[{ color: goodsFields.price.color }]"
|
||||||
|
>
|
||||||
|
<text class="price-unit ss-font-24">{{ priceUnit }}</text>
|
||||||
|
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view
|
||||||
|
v-if="
|
||||||
|
(goodsFields.original_price?.show || goodsFields.marketPrice?.show) &&
|
||||||
|
(data.original_price > 0 || data.marketPrice > 0)
|
||||||
|
"
|
||||||
|
class="goods-origin-price ss-m-t-16 font-OPPOSANS ss-flex"
|
||||||
|
:style="[{ color: originPriceColor }]"
|
||||||
|
>
|
||||||
|
<text class="price-unit ss-font-20">{{ priceUnit }}</text>
|
||||||
|
<view class="ss-m-l-8">{{ fen2yuan(data.marketPrice) }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="ss-m-t-16 ss-flex ss-col-center ss-flex-wrap">
|
||||||
|
<view class="sales-text">{{ salesAndStock }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<slot name="cart">
|
||||||
|
<view class="cart-box ss-flex ss-col-center ss-row-center">
|
||||||
|
<image class="cart-icon" src="/static/img/shop/tabbar/category2.png" mode="" />
|
||||||
|
</view>
|
||||||
|
</slot>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- lg卡片：横向型，一行放一个，图片左内容右边 -->
|
||||||
|
<view
|
||||||
|
v-if="size === 'lg'"
|
||||||
|
class="lg-goods-card ss-flex ss-col-stretch"
|
||||||
|
:style="[elStyles]"
|
||||||
|
@tap="onClick"
|
||||||
|
>
|
||||||
|
<view v-if="tagStyle.show" class="tag-icon-box">
|
||||||
|
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
|
||||||
|
</view>
|
||||||
|
<view v-if="seckillTag" class="seckill-tag ss-flex ss-row-center"> 秒杀 </view>
|
||||||
|
<view v-if="grouponTag" class="groupon-tag ss-flex ss-row-center">
|
||||||
|
<view class="tag-icon">拼团</view>
|
||||||
|
</view>
|
||||||
|
<image
|
||||||
|
class="lg-img-box"
|
||||||
|
:src="sheep.$url.cdn(data.image || data.picUrl)"
|
||||||
|
mode="aspectFill"
|
||||||
|
></image>
|
||||||
|
<view class="lg-goods-content ss-flex-1 ss-flex-col ss-row-between ss-p-b-10 ss-p-t-20">
|
||||||
|
<view>
|
||||||
|
<view
|
||||||
|
v-if="goodsFields.title?.show || goodsFields.name?.show"
|
||||||
|
class="lg-goods-title ss-line-2"
|
||||||
|
:style="[{ color: titleColor }]"
|
||||||
|
>
|
||||||
|
{{ data.title || data.name }}
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
|
||||||
|
class="lg-goods-subtitle ss-m-t-10 ss-line-1"
|
||||||
|
:style="[{ color: subTitleColor, background: subTitleBackground }]"
|
||||||
|
>
|
||||||
|
{{ data.subtitle || data.introduction }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<slot name="activity">
|
||||||
|
<view v-if="data.promos?.length" class="tag-box ss-flex ss-col-center">
|
||||||
|
<view class="activity-tag ss-m-r-10" v-for="item in data.promos" :key="item.id">
|
||||||
|
{{ item.title }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</slot>
|
||||||
|
<view class="ss-flex ss-col-bottom ss-m-t-10">
|
||||||
|
<view
|
||||||
|
v-if="goodsFields.price?.show"
|
||||||
|
class="lg-goods-price ss-m-r-12 ss-flex ss-col-bottom font-OPPOSANS"
|
||||||
|
:style="[{ color: goodsFields.price.color }]"
|
||||||
|
>
|
||||||
|
<text class="ss-font-24">{{ priceUnit }}</text>
|
||||||
|
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
v-if="
|
||||||
|
(goodsFields.original_price?.show || goodsFields.marketPrice?.show) &&
|
||||||
|
(data.original_price > 0 || data.marketPrice > 0)
|
||||||
|
"
|
||||||
|
class="goods-origin-price ss-flex ss-col-bottom font-OPPOSANS"
|
||||||
|
:style="[{ color: originPriceColor }]"
|
||||||
|
>
|
||||||
|
<text class="price-unit ss-font-20">{{ priceUnit }}</text>
|
||||||
|
<view class="ss-m-l-8">{{ fen2yuan(data.marketPrice) }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="ss-m-t-8 ss-flex ss-col-center ss-flex-wrap">
|
||||||
|
<view class="sales-text">{{ salesAndStock }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<slot name="cart">
|
||||||
|
<view class="buy-box ss-flex ss-col-center ss-row-center" v-if="buttonShow"> 立即兑换 </view>
|
||||||
|
</slot>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- sl卡片：竖向型，一行放一个，图片上内容下边 -->
|
||||||
|
<view v-if="size === 'sl'" class="sl-goods-card ss-flex-col" :style="[elStyles]" @tap="onClick">
|
||||||
|
<view v-if="tagStyle.show" class="tag-icon-box">
|
||||||
|
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<image
|
||||||
|
class="sl-img-box"
|
||||||
|
:src="sheep.$url.cdn(data.image || data.picUrl)"
|
||||||
|
mode="aspectFill"
|
||||||
|
></image>
|
||||||
|
|
||||||
|
<view class="sl-goods-content">
|
||||||
|
<view>
|
||||||
|
<view
|
||||||
|
v-if="goodsFields.title?.show || goodsFields.name?.show"
|
||||||
|
class="sl-goods-title ss-line-1"
|
||||||
|
:style="[{ color: titleColor }]"
|
||||||
|
>
|
||||||
|
{{ data.title || data.name }}
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
|
||||||
|
class="sl-goods-subtitle ss-m-t-16"
|
||||||
|
:style="[{ color: subTitleColor, background: subTitleBackground }]"
|
||||||
|
>
|
||||||
|
{{ data.subtitle || data.introduction }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<slot name="activity">
|
||||||
|
<view v-if="data.promos?.length" class="tag-box ss-flex ss-col-center ss-flex-wrap">
|
||||||
|
<view
|
||||||
|
class="activity-tag ss-m-r-10 ss-m-t-16"
|
||||||
|
v-for="item in data.promos"
|
||||||
|
:key="item.id"
|
||||||
|
>
|
||||||
|
{{ item.title }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</slot>
|
||||||
|
<view v-if="goodsFields.price?.show" class="ss-flex ss-col-bottom font-OPPOSANS">
|
||||||
|
<view class="sl-goods-price ss-m-r-12" :style="[{ color: goodsFields.price.color }]">
|
||||||
|
<text class="price-unit ss-font-24">{{ priceUnit }}</text>
|
||||||
|
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
v-if="
|
||||||
|
(goodsFields.original_price?.show || goodsFields.marketPrice?.show) &&
|
||||||
|
(data.original_price > 0 || data.marketPrice > 0)
|
||||||
|
"
|
||||||
|
class="goods-origin-price ss-m-t-16 font-OPPOSANS ss-flex"
|
||||||
|
:style="[{ color: originPriceColor }]"
|
||||||
|
>
|
||||||
|
<text class="price-unit ss-font-20">{{ priceUnit }}</text>
|
||||||
|
<view class="ss-m-l-8">{{ fen2yuan(data.marketPrice) }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="ss-m-t-16 ss-flex ss-flex-wrap">
|
||||||
|
<view class="sales-text">{{ salesAndStock }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<slot name="cart"
|
||||||
|
><view class="buy-box ss-flex ss-col-center ss-row-center">立即兑换</view></slot
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
/**
|
||||||
|
* 商品卡片
|
||||||
|
*
|
||||||
|
* @property {Array} size = [xs | sm | md | lg | sl ] - 列表数据
|
||||||
|
* @property {String} tag - md及以上才有
|
||||||
|
* @property {String} img - 图片
|
||||||
|
* @property {String} background - 背景色
|
||||||
|
* @property {String} topRadius - 上圆角
|
||||||
|
* @property {String} bottomRadius - 下圆角
|
||||||
|
* @property {String} title - 标题
|
||||||
|
* @property {String} titleColor - 标题颜色
|
||||||
|
* @property {Number} titleWidth = 0 - 标题宽度，默认0，单位rpx
|
||||||
|
* @property {String} subTitle - 副标题
|
||||||
|
* @property {String} subTitleColor - 副标题颜色
|
||||||
|
* @property {String} subTitleBackground - 副标题背景
|
||||||
|
* @property {String | Number} price - 价格
|
||||||
|
* @property {String} priceColor - 价格颜色
|
||||||
|
* @property {String | Number} originPrice - 原价/划线价
|
||||||
|
* @property {String} originPriceColor - 原价颜色
|
||||||
|
* @property {String | Number} sales - 销售数量
|
||||||
|
* @property {String} salesColor - 销售数量颜色
|
||||||
|
*
|
||||||
|
* @slots activity - 活动插槽
|
||||||
|
* @slots cart - 购物车插槽，默认包含文字，背景色，文字颜色 || 图片 || 行为
|
||||||
|
*
|
||||||
|
* @event {Function()} click - 点击卡片
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
import { computed, reactive, getCurrentInstance, onMounted, nextTick } from 'vue';
|
||||||
|
import sheep from '@/sheep';
|
||||||
|
import { fen2yuan, formatSales } from '@/sheep/hooks/useGoods';
|
||||||
|
import { formatStock } from '@/sheep/hooks/useGoods';
|
||||||
|
import goodsCollectVue from '@/pages/user/goods-collect.vue';
|
||||||
|
import { isArray } from 'lodash';
|
||||||
|
|
||||||
|
// 数据
|
||||||
|
const state = reactive({});
|
||||||
|
|
||||||
|
// 接收参数
|
||||||
|
const props = defineProps({
|
||||||
|
goodsFields: {
|
||||||
|
type: [Array, Object],
|
||||||
|
default() {
|
||||||
|
return {
|
||||||
|
// 商品价格
|
||||||
|
price: { show: true },
|
||||||
|
// 库存
|
||||||
|
stock: { show: true },
|
||||||
|
// 商品名称
|
||||||
|
name: { show: true },
|
||||||
|
// 商品介绍
|
||||||
|
introduction: { show: true },
|
||||||
|
// 市场价
|
||||||
|
marketPrice: { show: true },
|
||||||
|
// 销量
|
||||||
|
salesCount: { show: true },
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tagStyle: {
|
||||||
|
type: Object,
|
||||||
|
default: {},
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: {},
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
type: String,
|
||||||
|
default: 'sl',
|
||||||
|
},
|
||||||
|
background: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
topRadius: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
bottomRadius: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
titleWidth: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
titleColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#333',
|
||||||
|
},
|
||||||
|
priceColor: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
originPriceColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#C4C4C4',
|
||||||
|
},
|
||||||
|
priceUnit: {
|
||||||
|
type: String,
|
||||||
|
default: '￥',
|
||||||
|
},
|
||||||
|
subTitleColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#999999',
|
||||||
|
},
|
||||||
|
subTitleBackground: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
buttonShow: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
seckillTag: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
grouponTag: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// 组件样式
|
||||||
|
const elStyles = computed(() => {
|
||||||
|
return {
|
||||||
|
background: props.background,
|
||||||
|
'border-top-left-radius': props.topRadius + 'px',
|
||||||
|
'border-top-right-radius': props.topRadius + 'px',
|
||||||
|
'border-bottom-left-radius': props.bottomRadius + 'px',
|
||||||
|
'border-bottom-right-radius': props.bottomRadius + 'px',
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
// 格式化销量、库存信息
|
||||||
|
const salesAndStock = computed(() => {
|
||||||
|
let text = [];
|
||||||
|
if (props.goodsFields.salesCount?.show) {
|
||||||
|
text.push(formatSales(props.data.sales_show_type, props.data.salesCount));
|
||||||
|
}
|
||||||
|
if (props.goodsFields.stock?.show) {
|
||||||
|
text.push(formatStock(props.data.stock_show_type, props.data.stock));
|
||||||
|
}
|
||||||
|
return text.join(' | ');
|
||||||
|
});
|
||||||
|
|
||||||
|
// 返回事件
|
||||||
|
const emits = defineEmits(['click', 'getHeight']);
|
||||||
|
|
||||||
|
const onClick = () => {
|
||||||
|
emits('click');
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取卡片实时高度
|
||||||
|
const { proxy } = getCurrentInstance();
|
||||||
|
const elId = `sheep_${Math.ceil(Math.random() * 10e5).toString(36)}`;
|
||||||
|
function getGoodsPriceCardWH() {
|
||||||
|
if (props.size === 'md') {
|
||||||
|
const view = uni.createSelectorQuery().in(proxy);
|
||||||
|
view.select(`#${elId}`).fields({ size: true, scrollOffset: true });
|
||||||
|
view.exec((data) => {
|
||||||
|
let totalHeight = 0;
|
||||||
|
const goodsPriceCard = data[0];
|
||||||
|
if (props.data.image_wh) {
|
||||||
|
totalHeight =
|
||||||
|
(goodsPriceCard.width / props.data.image_wh.w) * props.data.image_wh.h +
|
||||||
|
goodsPriceCard.height;
|
||||||
|
} else {
|
||||||
|
totalHeight = goodsPriceCard.width;
|
||||||
|
}
|
||||||
|
emits('getHeight', totalHeight);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
getGoodsPriceCardWH();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.tag-icon-box {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 2;
|
||||||
|
.tag-icon {
|
||||||
|
width: 72rpx;
|
||||||
|
height: 44rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.seckill-tag {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 2;
|
||||||
|
width: 68rpx;
|
||||||
|
height: 38rpx;
|
||||||
|
background: linear-gradient(90deg, #ff5854 0%, #ff2621 100%);
|
||||||
|
border-radius: 10rpx 0px 10rpx 0px;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 32rpx;
|
||||||
|
}
|
||||||
|
.groupon-tag {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 2;
|
||||||
|
width: 68rpx;
|
||||||
|
height: 38rpx;
|
||||||
|
background: linear-gradient(90deg, #fe832a 0%, #ff6600 100%);
|
||||||
|
border-radius: 10rpx 0px 10rpx 0px;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 32rpx;
|
||||||
|
}
|
||||||
|
.goods-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
.price-unit {
|
||||||
|
margin-right: -4px;
|
||||||
|
}
|
||||||
|
.sales-text {
|
||||||
|
display: table;
|
||||||
|
font-size: 24rpx;
|
||||||
|
transform: scale(0.8);
|
||||||
|
margin-left: 0rpx;
|
||||||
|
color: #c4c4c4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-tag {
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: #ff0000;
|
||||||
|
line-height: 30rpx;
|
||||||
|
padding: 0 10rpx;
|
||||||
|
border: 1px solid rgba(#ff0000, 0.25);
|
||||||
|
border-radius: 4px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-origin-price {
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: #c4c4c4;
|
||||||
|
line-height: 36rpx;
|
||||||
|
text-decoration: line-through;
|
||||||
|
}
|
||||||
|
|
||||||
|
// xs
|
||||||
|
.xs-goods-card {
|
||||||
|
overflow: hidden;
|
||||||
|
// max-width: 375rpx;
|
||||||
|
background-color: $white;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.xs-img-box {
|
||||||
|
width: 128rpx;
|
||||||
|
height: 128rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.xs-goods-title {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.xs-goods-price {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: $red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// sm
|
||||||
|
.sm-goods-card {
|
||||||
|
overflow: hidden;
|
||||||
|
// width: 223rpx;
|
||||||
|
// width: 100%;
|
||||||
|
background-color: $white;
|
||||||
|
position: relative;
|
||||||
|
padding: 0 10px;
|
||||||
|
padding-top: 10px;
|
||||||
|
|
||||||
|
.sm-img-box {
|
||||||
|
// width: 228rpx;
|
||||||
|
width: 100%;
|
||||||
|
height: 208rpx;
|
||||||
|
}
|
||||||
|
.sm-goods-content {
|
||||||
|
padding: 20rpx 16rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.sm-goods-title {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sm-goods-price {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: $red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// md
|
||||||
|
.md-goods-card {
|
||||||
|
overflow: hidden;
|
||||||
|
width: auto;
|
||||||
|
padding: 10px 10px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
background-color: $white;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.md-img-box {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-goods-title {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.md-goods-subtitle {
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-goods-price {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: $red;
|
||||||
|
line-height: 36rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-box {
|
||||||
|
width: 54rpx;
|
||||||
|
height: 54rpx;
|
||||||
|
background: linear-gradient(90deg, #fe8900, #ff5e00);
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 50rpx;
|
||||||
|
right: 20rpx;
|
||||||
|
z-index: 2;
|
||||||
|
|
||||||
|
.cart-icon {
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// lg
|
||||||
|
.lg-goods-card {
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
background-color: $white;
|
||||||
|
height: 280rpx;
|
||||||
|
|
||||||
|
.lg-img-box {
|
||||||
|
width: 280rpx;
|
||||||
|
height: 280rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg-goods-title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333333;
|
||||||
|
// line-height: 36rpx;
|
||||||
|
// width: 410rpx;
|
||||||
|
}
|
||||||
|
.lg-goods-subtitle {
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #999999;
|
||||||
|
// line-height: 30rpx;
|
||||||
|
// width: 410rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg-goods-price {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: $red;
|
||||||
|
line-height: 36rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buy-box {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20rpx;
|
||||||
|
right: 20rpx;
|
||||||
|
z-index: 2;
|
||||||
|
width: 120rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
background: linear-gradient(90deg, #fe8900, #ff5e00);
|
||||||
|
border-radius: 25rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.tag-box {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// sl
|
||||||
|
|
||||||
|
.sl-goods-card {
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
width: 100%;
|
||||||
|
background-color: $white;
|
||||||
|
.sl-goods-content {
|
||||||
|
padding: 20rpx 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.sl-img-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 360rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sl-goods-title {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.sl-goods-subtitle {
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #999999;
|
||||||
|
line-height: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sl-goods-price {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: $red;
|
||||||
|
line-height: 36rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buy-box {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20rpx;
|
||||||
|
right: 20rpx;
|
||||||
|
z-index: 2;
|
||||||
|
width: 148rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
background: linear-gradient(90deg, #fe8900, #ff5e00);
|
||||||
|
border-radius: 25rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -485,6 +485,7 @@
|
|||||||
.tag-icon {
|
.tag-icon {
|
||||||
width: 72rpx;
|
width: 72rpx;
|
||||||
height: 44rpx;
|
height: 44rpx;
|
||||||
|
border-radius:8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.seckill-tag {
|
.seckill-tag {
|
||||||
@ -587,6 +588,7 @@
|
|||||||
// width: 228rpx;
|
// width: 228rpx;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 208rpx;
|
height: 208rpx;
|
||||||
|
border-radius:8px;
|
||||||
}
|
}
|
||||||
.sm-goods-content {
|
.sm-goods-content {
|
||||||
padding: 20rpx 16rpx;
|
padding: 20rpx 16rpx;
|
||||||
|
|||||||
@ -7,13 +7,17 @@
|
|||||||
<uni-list-item showArrow clickable
|
<uni-list-item showArrow clickable
|
||||||
@tap="sheep.$router.go('/pages/activity/groupon/list')">
|
@tap="sheep.$router.go('/pages/activity/groupon/list')">
|
||||||
<template v-slot:header>
|
<template v-slot:header>
|
||||||
<view class="ss-flex ss-col-center">
|
<view>
|
||||||
<image class="list-icon" src="https://zysc.fjptzykj.com:3000/shangcheng/02d372da2be37f10ecb4b79509a68f4d1c3fe6429add76d4c80f3cb9ee401e33.png"
|
<view class="wh">
|
||||||
mode="aspectFit"></image>
|
<img class="new-text1"
|
||||||
|
src="https://zysc.fjptzykj.com:3000/shangcheng/2f2be070c60ceb9466af937ff9dd8917ad2ee02f774dbac48fbb9e73bfc688d0.png" />
|
||||||
|
<span class="new-text">拼团活动</span>
|
||||||
<view style="color: rgb(187, 187, 187);font-size:15px;" class="title-text ss-flex ss-row-center ss-col-center ss-m-l-20">
|
<view style="color: rgb(187, 187, 187);font-size:15px;" class="title-text ss-flex ss-row-center ss-col-center ss-m-l-20">
|
||||||
92人拼团成功
|
92人拼团成功
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<template v-slot:footer>
|
<template v-slot:footer>
|
||||||
<view style="color: rgb(187, 187, 187);font-size:15px;" class="notice-text ss-flex ss-row-center ss-col-center">
|
<view style="color: rgb(187, 187, 187);font-size:15px;" class="notice-text ss-flex ss-row-center ss-col-center">
|
||||||
@ -226,4 +230,31 @@
|
|||||||
:deep(.sm-goods-card) {
|
:deep(.sm-goods-card) {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.wh {
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.new-text1{
|
||||||
|
width:30px;
|
||||||
|
height:30px;
|
||||||
|
}
|
||||||
|
.new-text{
|
||||||
|
position: relative;
|
||||||
|
font-weight: 700;
|
||||||
|
padding-right: 10px;
|
||||||
|
&::after {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
top: 50%;
|
||||||
|
right: 0;
|
||||||
|
width: 1px;
|
||||||
|
height: 57%;
|
||||||
|
border-right: 1px solid #ababab;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@ -44,8 +44,8 @@
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.menu-image {
|
.menu-image {
|
||||||
width: 24px;
|
width: 45px;
|
||||||
height: 24px;
|
height: 45px;
|
||||||
}
|
}
|
||||||
.grid-item-box {
|
.grid-item-box {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|||||||
328
sheep/components/s-point-block/s-point-block.vue
Normal file
328
sheep/components/s-point-block/s-point-block.vue
Normal file
@ -0,0 +1,328 @@
|
|||||||
|
<!-- 装修商品组件：【积分商城】商品卡片 -->
|
||||||
|
<template>
|
||||||
|
<!-- 商品卡片 -->
|
||||||
|
<view>
|
||||||
|
<!-- 布局1. 单列大图（上图，下内容）-->
|
||||||
|
<view
|
||||||
|
v-if="layoutType === LayoutTypeEnum.ONE_COL_BIG_IMG && state.spuList.length"
|
||||||
|
class="goods-sl-box"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
class="goods-box"
|
||||||
|
v-for="item in state.spuList"
|
||||||
|
:key="item.id"
|
||||||
|
:style="[{ marginBottom: data.space * 2 + 'rpx' }]"
|
||||||
|
>
|
||||||
|
<s-goods-column
|
||||||
|
class=""
|
||||||
|
size="sl"
|
||||||
|
:goodsFields="data.fields"
|
||||||
|
:tagStyle="data.badge"
|
||||||
|
:data="item"
|
||||||
|
:titleColor="data.fields.name?.color"
|
||||||
|
:subTitleColor="data.fields.introduction.color"
|
||||||
|
:topRadius="data.borderRadiusTop"
|
||||||
|
:bottomRadius="data.borderRadiusBottom"
|
||||||
|
@click="sheep.$router.go('/pages/goods/point', { id: item.activityId })"
|
||||||
|
>
|
||||||
|
<!-- 购买按钮 -->
|
||||||
|
<template v-slot:cart>
|
||||||
|
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
|
||||||
|
{{ btnBuy.type === 'text' ? btnBuy.text : '' }}
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
</s-goods-column>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 布局2. 单列小图（左图，右内容） -->
|
||||||
|
<view
|
||||||
|
v-if="layoutType === LayoutTypeEnum.ONE_COL_SMALL_IMG && state.spuList.length"
|
||||||
|
class="goods-lg-box"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
class="goods-box"
|
||||||
|
:style="[{ marginBottom: data.space + 'px' }]"
|
||||||
|
v-for="item in state.spuList"
|
||||||
|
:key="item.id"
|
||||||
|
>
|
||||||
|
<s-goods-column
|
||||||
|
class="goods-card"
|
||||||
|
size="lg"
|
||||||
|
:goodsFields="data.fields"
|
||||||
|
:data="item"
|
||||||
|
:tagStyle="data.badge"
|
||||||
|
:titleColor="data.fields.name?.color"
|
||||||
|
:subTitleColor="data.fields.introduction.color"
|
||||||
|
:topRadius="data.borderRadiusTop"
|
||||||
|
:bottomRadius="data.borderRadiusBottom"
|
||||||
|
@tap="sheep.$router.go('/pages/goods/point', { id: item.activityId })"
|
||||||
|
>
|
||||||
|
<!-- 购买按钮 -->
|
||||||
|
<template v-slot:cart>
|
||||||
|
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
|
||||||
|
{{ btnBuy.type === 'text' ? btnBuy.text : '' }}
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
</s-goods-column>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 布局3. 双列（每一列：上图，下内容）-->
|
||||||
|
<view
|
||||||
|
v-if="layoutType === LayoutTypeEnum.TWO_COL && state.spuList.length"
|
||||||
|
class="goods-md-wrap ss-flex ss-flex-wrap ss-col-top"
|
||||||
|
>
|
||||||
|
<view class="goods-list-box">
|
||||||
|
<view
|
||||||
|
class="left-list"
|
||||||
|
:style="[{ paddingRight: data.space + 'rpx', marginBottom: data.space + 'px' }]"
|
||||||
|
v-for="item in state.leftSpuList"
|
||||||
|
:key="item.id"
|
||||||
|
>
|
||||||
|
<s-goods-column
|
||||||
|
class="goods-md-box"
|
||||||
|
size="md"
|
||||||
|
:goodsFields="data.fields"
|
||||||
|
:tagStyle="data.badge"
|
||||||
|
:data="item"
|
||||||
|
:titleColor="data.fields.name?.color"
|
||||||
|
:subTitleColor="data.fields.introduction.color"
|
||||||
|
:topRadius="data.borderRadiusTop"
|
||||||
|
:bottomRadius="data.borderRadiusBottom"
|
||||||
|
:titleWidth="330 - marginLeft - marginRight"
|
||||||
|
@click="sheep.$router.go('/pages/goods/point', { id: item.activityId })"
|
||||||
|
@getHeight="calculateGoodsColumn($event, 'left')"
|
||||||
|
>
|
||||||
|
<!-- 购买按钮 -->
|
||||||
|
<template v-slot:cart>
|
||||||
|
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
|
||||||
|
{{ btnBuy.type === 'text' ? btnBuy.text : '' }}
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
</s-goods-column>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="goods-list-box">
|
||||||
|
<view
|
||||||
|
class="right-list"
|
||||||
|
:style="[{ paddingLeft: data.space + 'rpx', marginBottom: data.space + 'px' }]"
|
||||||
|
v-for="item in state.rightSpuList"
|
||||||
|
:key="item.id"
|
||||||
|
>
|
||||||
|
<s-goods-column
|
||||||
|
class="goods-md-box"
|
||||||
|
size="md"
|
||||||
|
:goodsFields="data.fields"
|
||||||
|
:tagStyle="data.badge"
|
||||||
|
:data="item"
|
||||||
|
:titleColor="data.fields.name?.color"
|
||||||
|
:subTitleColor="data.fields.introduction.color"
|
||||||
|
:topRadius="data.borderRadiusTop"
|
||||||
|
:bottomRadius="data.borderRadiusBottom"
|
||||||
|
:titleWidth="330 - marginLeft - marginRight"
|
||||||
|
@click="sheep.$router.go('/pages/goods/point', { id: item.activityId })"
|
||||||
|
@getHeight="calculateGoodsColumn($event, 'right')"
|
||||||
|
>
|
||||||
|
<!-- 购买按钮 -->
|
||||||
|
<template v-slot:cart>
|
||||||
|
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
|
||||||
|
{{ btnBuy.type === 'text' ? btnBuy.text : '' }}
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
</s-goods-column>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
/**
|
||||||
|
* 商品卡片
|
||||||
|
*/
|
||||||
|
import { computed, onMounted, reactive, ref } from 'vue';
|
||||||
|
import sheep from '@/sheep';
|
||||||
|
import SpuApi from '@/sheep/api/product/spu';
|
||||||
|
import PointApi from '@/sheep/api/promotion/point';
|
||||||
|
import { PromotionActivityTypeEnum } from '@/sheep/util/const';
|
||||||
|
|
||||||
|
// 布局类型
|
||||||
|
const LayoutTypeEnum = {
|
||||||
|
// 单列大图
|
||||||
|
ONE_COL_BIG_IMG: 'oneColBigImg',
|
||||||
|
// 双列
|
||||||
|
TWO_COL: 'twoCol',
|
||||||
|
// 单列小图
|
||||||
|
ONE_COL_SMALL_IMG: 'oneColSmallImg',
|
||||||
|
};
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
spuList: [],
|
||||||
|
leftSpuList: [],
|
||||||
|
rightSpuList: [],
|
||||||
|
});
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default() {},
|
||||||
|
},
|
||||||
|
styles: {
|
||||||
|
type: Object,
|
||||||
|
default() {},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const { layoutType, btnBuy, activityIds } = props.data || {};
|
||||||
|
const { marginLeft, marginRight } = props.styles || {};
|
||||||
|
|
||||||
|
// 购买按钮样式
|
||||||
|
const buyStyle = computed(() => {
|
||||||
|
if (btnBuy.type === 'text') {
|
||||||
|
// 文字按钮：线性渐变背景颜色
|
||||||
|
return {
|
||||||
|
background: `linear-gradient(to right, ${btnBuy.bgBeginColor}, ${btnBuy.bgEndColor})`,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
if (btnBuy.type === 'img') {
|
||||||
|
// 图片按钮
|
||||||
|
return {
|
||||||
|
width: '54rpx',
|
||||||
|
height: '54rpx',
|
||||||
|
background: `url(${sheep.$url.cdn(btnBuy.imgUrl)}) no-repeat`,
|
||||||
|
backgroundSize: '100% 100%',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//region 商品瀑布流布局
|
||||||
|
// 下一个要处理的商品索引
|
||||||
|
let count = 0;
|
||||||
|
// 左列的高度
|
||||||
|
let leftHeight = 0;
|
||||||
|
// 右列的高度
|
||||||
|
let rightHeight = 0;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 计算商品在左列还是右列
|
||||||
|
* @param height 商品的高度
|
||||||
|
* @param where 添加到哪一列
|
||||||
|
*/
|
||||||
|
function calculateGoodsColumn(height = 0, where = 'left') {
|
||||||
|
// 处理完
|
||||||
|
if (!state.spuList[count]) return;
|
||||||
|
// 增加列的高度
|
||||||
|
if (where === 'left') leftHeight += height;
|
||||||
|
if (where === 'right') rightHeight += height;
|
||||||
|
// 添加到矮的一列
|
||||||
|
if (leftHeight <= rightHeight) {
|
||||||
|
state.leftSpuList.push(state.spuList[count]);
|
||||||
|
} else {
|
||||||
|
state.rightSpuList.push(state.spuList[count]);
|
||||||
|
}
|
||||||
|
// 计数
|
||||||
|
count++;
|
||||||
|
}
|
||||||
|
|
||||||
|
//endregion
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 根据商品编号列表，获取商品列表
|
||||||
|
* @param ids 商品编号列表
|
||||||
|
* @return {Promise<undefined>} 商品列表
|
||||||
|
*/
|
||||||
|
async function getPointActivityDetailList(ids) {
|
||||||
|
const { data } = await PointApi.getPointActivityListByIds(ids);
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 根据商品编号，获取商品详情
|
||||||
|
* @param ids 商品编号列表
|
||||||
|
* @return {Promise<undefined>} 商品列表
|
||||||
|
*/
|
||||||
|
async function getSpuDetail(ids) {
|
||||||
|
const { data: spu } = await SpuApi.getSpuDetail(ids);
|
||||||
|
return spu;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 初始化
|
||||||
|
onMounted(async () => {
|
||||||
|
// 加载活动列表
|
||||||
|
const activityList = await getPointActivityDetailList(activityIds.join(','));
|
||||||
|
// 循环获取活动商品SPU详情并添加到spuList
|
||||||
|
for (const activity of activityList) {
|
||||||
|
state.spuList.push(await getSpuDetail(activity.spuId));
|
||||||
|
}
|
||||||
|
|
||||||
|
// 循环活动列表
|
||||||
|
activityList.forEach((activity) => {
|
||||||
|
// 查找对应的 spu 并更新价格
|
||||||
|
const spu = state.spuList.find((spu) => activity.spuId === spu.id);
|
||||||
|
if (spu) {
|
||||||
|
spu.pointStock = activity.stock
|
||||||
|
spu.pointTotalStock = activity.totalStock
|
||||||
|
spu.point = activity.point
|
||||||
|
spu.pointPrice = activity.price
|
||||||
|
// 赋值活动ID，为了点击跳转详情页
|
||||||
|
spu.activityId = activity.id;
|
||||||
|
// 赋值活动类型
|
||||||
|
spu.activityType = PromotionActivityTypeEnum.POINT.type;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 只有双列布局时需要
|
||||||
|
if (layoutType === LayoutTypeEnum.TWO_COL) {
|
||||||
|
// 分列
|
||||||
|
calculateGoodsColumn();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.goods-md-wrap {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-list-box {
|
||||||
|
width: 50%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.left-list {
|
||||||
|
&:nth-last-child(1) {
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-list {
|
||||||
|
&:nth-last-child(1) {
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-box {
|
||||||
|
&:nth-last-of-type(1) {
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-md-box,
|
||||||
|
.goods-sl-box,
|
||||||
|
.goods-lg-box {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.cart-btn {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 18rpx;
|
||||||
|
right: 20rpx;
|
||||||
|
z-index: 11;
|
||||||
|
height: 50rpx;
|
||||||
|
line-height: 50rpx;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
border-radius: 25rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -4,19 +4,28 @@
|
|||||||
<!-- 标题栏 -->
|
<!-- 标题栏 -->
|
||||||
<view class="menu-list-wrap">
|
<view class="menu-list-wrap">
|
||||||
<uni-list :border="true">
|
<uni-list :border="true">
|
||||||
<uni-list-item showArrow clickable
|
<uni-list-item showArrow clickable @tap="sheep.$router.go('/pages/activity/seckill/list')">
|
||||||
@tap="sheep.$router.go('/pages/activity/seckill/list')">
|
|
||||||
<template v-slot:header>
|
<template v-slot:header>
|
||||||
<view class="ss-flex ss-col-center">
|
<view class="ss-flex ss-col-center">
|
||||||
<image class="list-icon" src="https://zysc.fjptzykj.com:3000/shangcheng/1bd7faadbb3c319c6ad303edc23ecbf12162b8ac22e2c8058b3914397d9dd226.png"
|
<div class="wh">
|
||||||
mode="aspectFit"></image>
|
<img class="new-text1"
|
||||||
<view style="color: rgb(187, 187, 187); font-size:15px;" class="title-text ss-flex ss-row-center ss-col-center ss-m-l-20">
|
src="https://zysc.fjptzykj.com:3000/shangcheng/cb995c399d784c08e27d8f56b0a63ace2d13af3a1ee6aba5a2da71868dc4cf00.png" />
|
||||||
已有99人购买
|
<span class="new-text">限时秒杀</span>
|
||||||
|
</div>
|
||||||
|
<!-- <image class="list-icon" src="https://zysc.fjptzykj.com:3000/shangcheng/1bd7faadbb3c319c6ad303edc23ecbf12162b8ac22e2c8058b3914397d9dd226.png"
|
||||||
|
mode="aspectFit"></image> -->
|
||||||
|
<view style="color: rgba(255, 51, 35, 1); font-size:15px;"
|
||||||
|
class="title-text ss-flex ss-row-center ss-col-center ss-m-l-20">
|
||||||
|
<span class="time">{{ hours < 10 ? '0' + hours : hours }}</span>:
|
||||||
|
<span class="time">{{ minutes < 10 ? '0' + minutes : minutes }}</span>:
|
||||||
|
<span class="time">{{ seconds < 10 ? '0' + seconds : seconds }}</span>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<template v-slot:footer>
|
<template v-slot:footer>
|
||||||
<view style="color: rgb(187, 187, 187);font-size:15px;" class="notice-text ss-flex ss-row-center ss-col-center">
|
<view style="color: rgb(187, 187, 187);font-size:15px;"
|
||||||
|
class="notice-text ss-flex ss-row-center ss-col-center">
|
||||||
查看更多
|
查看更多
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@ -89,36 +98,20 @@
|
|||||||
</view>
|
</view>
|
||||||
</view> -->
|
</view> -->
|
||||||
|
|
||||||
<view
|
<view v-if="'threeCol' === 'threeCol'" class="goods-sm-box ss-flex ss-flex-wrap"
|
||||||
v-if="'threeCol' === 'threeCol'"
|
:style="[{ margin: '-' + data.space + 'rpx' }]">
|
||||||
class="goods-sm-box ss-flex ss-flex-wrap"
|
<view v-for="product in productList" :key="product.id" class="goods-card-box" :style="[
|
||||||
:style="[{ margin: '-' + data.space + 'rpx' }]"
|
|
||||||
>
|
|
||||||
<view
|
|
||||||
v-for="product in productList"
|
|
||||||
:key="product.id"
|
|
||||||
class="goods-card-box"
|
|
||||||
:style="[
|
|
||||||
{
|
{
|
||||||
padding: data.space + 'rpx',
|
padding: data.space + 'rpx',
|
||||||
},
|
},
|
||||||
]"
|
]">
|
||||||
>
|
<s-goods-column class="goods-card" size="sm" :goodsFields="data.fields" :tagStyle="tagStyle"
|
||||||
<s-goods-column
|
:data="product" :titleColor="data.fields.name?.color" :topRadius="data.borderRadiusTop"
|
||||||
class="goods-card"
|
:bottomRadius="data.borderRadiusBottom" @click="
|
||||||
size="sm"
|
|
||||||
:goodsFields="data.fields"
|
|
||||||
:tagStyle="tagStyle"
|
|
||||||
:data="product"
|
|
||||||
:titleColor="data.fields.name?.color"
|
|
||||||
:topRadius="data.borderRadiusTop"
|
|
||||||
:bottomRadius="data.borderRadiusBottom"
|
|
||||||
@click="
|
|
||||||
sheep.$router.go('/pages/goods/seckill', {
|
sheep.$router.go('/pages/goods/seckill', {
|
||||||
id: product.activityId,
|
id: product.activityId,
|
||||||
})
|
})
|
||||||
"
|
"></s-goods-column>
|
||||||
></s-goods-column>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -130,7 +123,11 @@
|
|||||||
*
|
*
|
||||||
* @property {Array} list 商品列表
|
* @property {Array} list 商品列表
|
||||||
*/
|
*/
|
||||||
import { computed, onMounted, ref } from 'vue';
|
import {
|
||||||
|
computed,
|
||||||
|
onMounted,
|
||||||
|
ref
|
||||||
|
} from 'vue';
|
||||||
import sheep from '@/sheep';
|
import sheep from '@/sheep';
|
||||||
import SeckillApi from '@/sheep/api/promotion/seckill';
|
import SeckillApi from '@/sheep/api/promotion/seckill';
|
||||||
import SpuApi from '@/sheep/api/product/spu';
|
import SpuApi from '@/sheep/api/product/spu';
|
||||||
@ -139,16 +136,24 @@
|
|||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
data: {
|
data: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default() {},
|
default () {},
|
||||||
},
|
},
|
||||||
styles: {
|
styles: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default() {},
|
default () {},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
let { layoutType, tagStyle, btnBuy, space } = props.data;
|
let {
|
||||||
let { marginLeft, marginRight } = props.styles;
|
layoutType,
|
||||||
|
tagStyle,
|
||||||
|
btnBuy,
|
||||||
|
space
|
||||||
|
} = props.data;
|
||||||
|
let {
|
||||||
|
marginLeft,
|
||||||
|
marginRight
|
||||||
|
} = props.styles;
|
||||||
|
|
||||||
// 购买按钮样式
|
// 购买按钮样式
|
||||||
const buyStyle = computed(() => {
|
const buyStyle = computed(() => {
|
||||||
@ -169,31 +174,77 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
// 商品列表
|
// 商品列表
|
||||||
|
const totalTime = ref(5 * 60 * 60); // 5小时转换为秒
|
||||||
|
const hours = ref(5);
|
||||||
|
const minutes = ref(0);
|
||||||
|
const seconds = ref(0);
|
||||||
|
let intervalId = null;
|
||||||
|
|
||||||
|
const updateClock = () => {
|
||||||
|
if (totalTime.value > 0) {
|
||||||
|
const newHours = Math.floor(totalTime.value / 3600);
|
||||||
|
const newMinutes = Math.floor((totalTime.value % 3600) / 60);
|
||||||
|
const newSeconds = totalTime.value % 60;
|
||||||
|
hours.value = newHours;
|
||||||
|
minutes.value = newMinutes;
|
||||||
|
seconds.value = newSeconds;
|
||||||
|
totalTime.value--;
|
||||||
|
} else {
|
||||||
|
clearTimer();
|
||||||
|
alert('倒计时结束');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const startTimer = () => {
|
||||||
|
intervalId = setInterval(updateClock, 1000);
|
||||||
|
};
|
||||||
|
|
||||||
|
const clearTimer = () => {
|
||||||
|
clearInterval(intervalId);
|
||||||
|
};
|
||||||
|
|
||||||
const productList = ref([]);
|
const productList = ref([]);
|
||||||
// 查询秒杀活动商品
|
// 查询秒杀活动商品
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
|
startTimer();
|
||||||
// todo：@owen 与Yudao结构不一致，待重构
|
// todo：@owen 与Yudao结构不一致，待重构
|
||||||
// const { data: activity } = await SeckillApi.getSeckillActivity(props.data.activityId);
|
// const { data: activity } = await SeckillApi.getSeckillActivity(props.data.activityId);
|
||||||
// const { data: spu } = await SpuApi.getSpuDetail(activity.spuId);
|
// const { data: spu } = await SpuApi.getSpuDetail(activity.spuId);
|
||||||
const data = await SpuApi.getSpuSeckilllist();
|
const data = await SpuApi.getSpuSeckilllist();
|
||||||
|
console.log(data,"datadatadatadatadatadatadatadata")
|
||||||
productList.value = data.data;
|
productList.value = data.data;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// onBeforeUnmount(() => {
|
||||||
|
// clearTimer();
|
||||||
|
// });
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.time {
|
||||||
:deep(.uni-border-bottom){
|
width: 20px;
|
||||||
height:0;
|
height: 20px;
|
||||||
|
background: rgba(255, 237, 238, 1);
|
||||||
|
color: rgba(255, 51, 35, 1);
|
||||||
|
text-align: center;
|
||||||
|
padding: 0 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:deep(.uni-border-bottom) {
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.header-box {
|
.header-box {
|
||||||
height: 100rpx;
|
height: 100rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.goods-list {
|
.goods-list {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&:nth-last-child(1) {
|
&:nth-last-child(1) {
|
||||||
margin-bottom: 0 !important;
|
margin-bottom: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cart-btn {
|
.cart-btn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 10rpx;
|
bottom: 10rpx;
|
||||||
@ -207,9 +258,11 @@
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.goods-sm-box {
|
.goods-sm-box {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
.goods-card-box {
|
.goods-card-box {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -219,26 +272,29 @@
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
:deep(.uni-list--border-bottom){
|
:deep(.uni-list--border-bottom) {
|
||||||
height:0 !important;
|
height: 0 !important;
|
||||||
}
|
}
|
||||||
:deep(.container--right){
|
|
||||||
|
:deep(.container--right) {
|
||||||
padding-left: 5px !important;
|
padding-left: 5px !important;
|
||||||
}
|
}
|
||||||
.ss-col-center{
|
|
||||||
|
.ss-col-center {
|
||||||
.list-icon {
|
.list-icon {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 93px;
|
width: 93px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
&::after{
|
|
||||||
position:absolute;
|
&::after {
|
||||||
content:'';
|
position: absolute;
|
||||||
top:50%;
|
content: '';
|
||||||
right:0;
|
top: 50%;
|
||||||
width:1px;
|
right: 0;
|
||||||
height:57%;
|
width: 1px;
|
||||||
border-right:1px solid #ababab;
|
height: 57%;
|
||||||
|
border-right: 1px solid #ababab;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -297,4 +353,31 @@
|
|||||||
:deep(.sm-goods-card) {
|
:deep(.sm-goods-card) {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.wh {
|
||||||
|
position: relative;
|
||||||
|
padding-right: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.new-text1 {
|
||||||
|
width: 30px;
|
||||||
|
height:30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-text {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.wh::after {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
top: 50%;
|
||||||
|
right: 0;
|
||||||
|
width: 1px;
|
||||||
|
height: 57%;
|
||||||
|
border-right: 1px solid #ababab;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -85,14 +85,17 @@
|
|||||||
<view class="surplus-text ss-m-t-24" v-if="props.surplus">仅剩：{{ props.surplus }}张</view>
|
<view class="surplus-text ss-m-t-24" v-if="props.surplus">仅剩：{{ props.surplus }}张</view>
|
||||||
</view>
|
</view>
|
||||||
</view> -->
|
</view> -->
|
||||||
|
<!-- @tap="
|
||||||
|
sheep.$router.go('/pages/coupon/detail', {
|
||||||
|
id: couponId,
|
||||||
|
})
|
||||||
|
" -->
|
||||||
<view
|
<view
|
||||||
v-if="'md' === 'md'"
|
v-if="'md' === 'md'"
|
||||||
class=" md-coupon-card ss-flex ss-row-between"
|
class=" md-coupon-card ss-flex ss-row-between"
|
||||||
:style="[cardStyle]"
|
:style="[cardStyle]"
|
||||||
@tap="
|
@tap="
|
||||||
sheep.$router.go('/pages/coupon/detail', {
|
sheep.$router.go('/pages/coupon/list')
|
||||||
id: couponId,
|
|
||||||
})
|
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<view style="margin: 0 auto;" class="card-left ss-flex ss-flex-col ss-row-between ss-col-top">
|
<view style="margin: 0 auto;" class="card-left ss-flex ss-flex-col ss-row-between ss-col-top">
|
||||||
@ -250,7 +253,7 @@
|
|||||||
// md
|
// md
|
||||||
|
|
||||||
.md-coupon-card {
|
.md-coupon-card {
|
||||||
width: 330rpx;
|
width: 296rpx;
|
||||||
height: 74px;
|
height: 74px;
|
||||||
border-radius: 10rpx;
|
border-radius: 10rpx;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|||||||
@ -1,3 +1,36 @@
|
|||||||
|
// ========== COMMON - 公共模块 ==========
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 与后端Terminal枚举一一对应
|
||||||
|
*/
|
||||||
|
export const TerminalEnum = {
|
||||||
|
UNKNOWN: 0, // 未知, 目的：在无法解析到 terminal 时，使用它
|
||||||
|
WECHAT_MINI_PROGRAM: 10, //微信小程序
|
||||||
|
WECHAT_WAP: 11, // 微信公众号
|
||||||
|
H5: 20, // H5 网页
|
||||||
|
APP: 31, // 手机 App
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 将 uni-app 提供的平台转换为后端所需的 terminal值
|
||||||
|
*
|
||||||
|
* @return 终端
|
||||||
|
*/
|
||||||
|
export const getTerminal = () => {
|
||||||
|
const platformType = uni.getSystemInfoSync().uniPlatform;
|
||||||
|
// 与后端terminal枚举一一对应
|
||||||
|
switch (platformType) {
|
||||||
|
case 'app':
|
||||||
|
return TerminalEnum.APP;
|
||||||
|
case 'web':
|
||||||
|
return TerminalEnum.H5;
|
||||||
|
case 'mp-weixin':
|
||||||
|
return TerminalEnum.WECHAT_MINI_PROGRAM;
|
||||||
|
default:
|
||||||
|
return TerminalEnum.UNKNOWN;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
// ========== MALL - 营销模块 ==========
|
// ========== MALL - 营销模块 ==========
|
||||||
|
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
@ -48,6 +81,7 @@ export const PromotionProductScopeEnum = {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
// 时间段的状态枚举
|
// 时间段的状态枚举
|
||||||
export const TimeStatusEnum = {
|
export const TimeStatusEnum = {
|
||||||
WAIT_START: '即将开始',
|
WAIT_START: '即将开始',
|
||||||
@ -55,6 +89,37 @@ export const TimeStatusEnum = {
|
|||||||
END: '已结束',
|
END: '已结束',
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 微信小程序的订阅模版
|
||||||
|
*/
|
||||||
|
export const WxaSubscribeTemplate = {
|
||||||
|
TRADE_ORDER_DELIVERY: '订单发货通知',
|
||||||
|
PROMOTION_COMBINATION_SUCCESS: '拼团结果通知',
|
||||||
|
PAY_WALLET_RECHARGER_SUCCESS: '充值成功通知',
|
||||||
|
};
|
||||||
|
export const PromotionActivityTypeEnum = {
|
||||||
|
NORMAL: {
|
||||||
|
type: 0,
|
||||||
|
name: '普通',
|
||||||
|
},
|
||||||
|
SECKILL: {
|
||||||
|
type: 1,
|
||||||
|
name: '秒杀',
|
||||||
|
},
|
||||||
|
BARGAIN: {
|
||||||
|
type: 2,
|
||||||
|
name: '砍价',
|
||||||
|
},
|
||||||
|
COMBINATION: {
|
||||||
|
type: 3,
|
||||||
|
name: '拼团',
|
||||||
|
},
|
||||||
|
POINT: {
|
||||||
|
type: 4,
|
||||||
|
name: '积分商城',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
export const getTimeStatusEnum = (startTime, endTime) => {
|
export const getTimeStatusEnum = (startTime, endTime) => {
|
||||||
const now = dayjs();
|
const now = dayjs();
|
||||||
if (now.isBefore(startTime)) {
|
if (now.isBefore(startTime)) {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user