yudao
/
mall-uniapp
mirror of https://gitee.com/yudaocode/yudao-mall-uniapp.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' of https://gitee.com/yudaocode/yudao-mall-uniapp

pull/111/head
YunaiV 2024-10-07 15:23:47 +08:00
parent b6635a5d5c 1ffa754dbe
commit 545d4259c4
9 changed files with 1245 additions and 1313 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1380
pages.json
View File

File diff suppressed because it is too large Load Diff

112
pages/activity/point/list.vue
View File

@ -1,78 +1,76 @@
<!-- 积分商城：商品列表 -->
<template>
<s-layout title="积分商城">
<view class="ss-p-20">
<view v-for="item in state.pagination.data" :key="item.id" class="ss-m-b-20">
<s-point-card
size="sl"
:data="item"
priceColor="#FF3000"
@tap="sheep.$router.go('/pages/goods/point', { id: item.id })"
/>
</view>
</view>
<s-empty
v-if="state.pagination.total === 0"
icon="/static/goods-empty.png"
text="暂无积分商品"
/>
<uni-load-more
v-if="state.pagination.total > 0"
:status="state.loadStatus"
:content-text="{
contentdown: '上拉加载更多',
}"
@tap="loadmore"
/>
<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 } from 'vue';
import _ from 'lodash';
import { reactive, ref } from 'vue';
import PointApi from '@/sheep/api/promotion/point';
import SLayout from '@/sheep/components/s-layout/s-layout.vue';
const state = reactive({
pagination: {
data: [],
current_page: 1,
total: 1,
last_page: 1,
},
loadStatus: '',
// 计算页面高度
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, // 每页数量
});
async function getData(page = 1, list_rows = 5) {
// TODO @puhui999：分页重写成，我们的代码风格。原先的有点复杂
state.loadStatus = 'loading';
let res = await sheep.$api.app.scoreShop.list({
list_rows,
page,
});
if (res.error === 0) {
let couponlist = _.concat(state.pagination.data, res.data.data);
state.pagination = {
...res.data,
data: couponlist,
};
if (state.pagination.current_page < state.pagination.last_page) {
state.loadStatus = 'more';
} else {
state.loadStatus = 'noMore';
}
}
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() {
function loadMore() {
if (state.loadStatus !== 'noMore') {
getData(state.pagination.current_page + 1);
activityPageParams.pageNo += 1;
getActivityList();
}
}
// 上拉加载更多
onReachBottom(() => {
loadmore();
loadMore();
});
onLoad(() => {
getData();
getActivityList();
});
</script>

183
pages/goods/point.vue
View File

@ -28,29 +28,25 @@
/>
<!-- 价格+标题 -->
<view class="title-card ss-m-y-14 ss-m-x-20 ss-p-x-20 ss-p-y-34">
<view class="price-box ss-flex ss-row-between ss-m-b-18">
<view class="ss-flex">
<view class="price-text ss-m-r-16">
{{ getShowPriceText }}
</view>
<view class="tig ss-flex ss-col-center">
<view class="tig-icon ss-flex ss-col-center ss-row-center">
<text class="cicon-alarm"></text>
</view>
<view class="tig-title">积分价</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-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="ss-flex ss-row-between ss-m-b-60">
<view class="origin-price ss-flex ss-col-center" v-if="state.goodsInfo.marketPrice">
原价
<view class="origin-price-text">
{{ fen2yuan(state.selectedSku.marketPrice || state.goodsInfo.marketPrice) }}
</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>
@ -98,8 +94,15 @@
"
:disabled="state.goodsInfo.stock === 0"
>
<view class="price-text">
{{getShowPriceText}}
<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>
@ -115,7 +118,7 @@
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import { isEmpty } from 'lodash-es';
import { fen2yuan, formatGoodsSwiper } from '@/sheep/hooks/useGoods';
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';
@ -126,7 +129,7 @@
import { PromotionActivityTypeEnum } from '@/sheep/util/const';
import PointApi from '@/sheep/api/promotion/point';
const headerBg = sheep.$url.css('/static/img/shop/goods/seckill-bg.png');
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');
@ -192,11 +195,25 @@
const activity = ref();
const getShowPriceText = computed(() => {
let priceText = `${activity.value.point}积分${!activity.value.price ? '' : `+￥${fen2yuan(activity.value.price)}`}`;
const getShowPrice = computed(() => {
if (!isEmpty(state.selectedSku)) {
const sku = state.selectedSku;
priceText = `${sku.point}积分${!sku.pointPrice ? '' : `+￥${fen2yuan(sku.pointPrice)}`}`;
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;
});
@ -264,102 +281,47 @@
.title-card {
width: 710rpx;
box-sizing: border-box;
// height: 320rpx;
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: 30rpx;
font-size: 42rpx;
font-weight: 500;
color: #fff;
line-height: normal;
color: #ff3000;
line-height: 36rpx;
font-family: OPPOSANS;
}
}
.origin-price {
font-size: 24rpx;
.origin-price-text {
font-size: 26rpx;
font-weight: 400;
color: #fff;
opacity: 0.7;
.origin-price-text {
text-decoration: line-through;
font-family: OPPOSANS;
&::before {
content: '￥';
}
}
text-decoration: line-through;
color: $gray-c;
font-family: OPPOSANS;
}
.tig {
border: 2rpx solid #ffffff;
border-radius: 4rpx;
width: 126rpx;
height: 38rpx;
.tig-icon {
width: 40rpx;
height: 40rpx;
margin-left: -2rpx;
background: #ffffff;
border-radius: 4rpx 0 0 4rpx;
.cicon-alarm {
font-size: 32rpx;
color: #fc6e6f;
}
}
.tig-title {
width: 86rpx;
font-size: 24rpx;
font-weight: 500;
line-height: normal;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
}
}
.countdown-title {
.sales-text {
font-size: 26rpx;
font-weight: 500;
color: #ffffff;
}
.countdown-time {
font-size: 26rpx;
font-weight: 500;
color: #ffffff;
.countdown-h {
font-size: 24rpx;
font-family: OPPOSANS;
font-weight: 500;
color: #ffffff;
padding: 0 4rpx;
height: 40rpx;
background: rgba(#000000, 0.1);
border-radius: 6rpx;
}
.countdown-num {
font-size: 24rpx;
font-family: OPPOSANS;
font-weight: 500;
color: #ffffff;
width: 40rpx;
height: 40rpx;
background: rgba(#000000, 0.1);
border-radius: 6rpx;
}
color: $gray-c;
}
.discounts-box {
@ -392,15 +354,13 @@
font-size: 30rpx;
font-weight: bold;
line-height: 42rpx;
color: #fff;
}
.subtitle-text {
font-size: 26rpx;
font-weight: 400;
color: #ffffff;
color: $dark-9;
line-height: 42rpx;
opacity: 0.9;
}
}
@ -517,9 +477,4 @@
color: #333333;
}
}
image {
width: 100%;
height: 100%;
}
</style>

37
pages/order/confirm.vue
View File

@ -41,24 +41,39 @@
</view>
</view>
<view
v-if="state.orderPayload.pointActivityId"
class="order-item ss-flex ss-col-center ss-row-between"
v-if="state.orderInfo.type === 0"
>
<view class="item-title">兑换积分</view>
<view class="ss-flex ss-col-center">
<image
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
class="score-img"
/>
<text class="item-value ss-m-r-24">
{{ state.orderInfo.usePoint }}
</text>
</view>
</view>
<view
class="order-item ss-flex ss-col-center ss-row-between"
v-if="state.orderInfo.type === 0 || state.orderPayload.pointActivityId"
>
<view class="item-title">积分抵扣</view>
<view class="ss-flex ss-col-center">
{{ state.pointStatus ? '剩余积分' : '当前积分' }}
{{ state.pointStatus || state.orderPayload.pointActivityId ? '剩余积分' : '当前积分' }}
<image
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
class="score-img"
/>
<text class="item-value ss-m-r-24">
{{
state.pointStatus
state.pointStatus || state.orderPayload.pointActivityId
? state.orderInfo.totalPoint - state.orderInfo.usePoint
: state.orderInfo.totalPoint || 0
}}
</text>
<checkbox-group @change="changeIntegral">
<checkbox-group @change="changeIntegral" v-if="!state.orderPayload.pointActivityId">
<checkbox
:checked="state.pointStatus"
:disabled="!state.orderInfo.totalPoint || state.orderInfo.totalPoint <= 0"
@ -305,9 +320,15 @@
}
// 跳转到支付页面
sheep.$router.redirect('/pages/pay/index', {
id: data.payOrderId,
});
if (data.payOrderId && data.payOrderId > 0) {
sheep.$router.redirect('/pages/pay/index', {
id: data.payOrderId,
});
} else {
sheep.$router.redirect('/pages/order/detail', {
id: data.id,
});
}
}
// 检查库存 & 计算订单价格
@ -331,7 +352,7 @@
return;
}
state.orderInfo = data;
state.couponInfo = data.coupons;
state.couponInfo = data.coupons || [];
// 设置收货地址
if (state.orderInfo.address) {
addressState.value.addressInfo = state.orderInfo.address;

3
sheep/api/trade/order.js
View File

@ -32,6 +32,9 @@ const OrderApi = {
if (!(data.seckillActivityId > 0)) {
delete data2.seckillActivityId;
}
if (!(data.pointActivityId > 0)) {
delete data2.pointActivityId;
}
// 解决 SpringMVC 接受 List<Item> 参数的问题
delete data2.items;
for (let i = 0; i < data.items.length; i++) {

80
sheep/components/s-goods-column/s-goods-column.vue
View File

@ -40,10 +40,16 @@
:style="[{ color: goodsFields.price.color }]"
>
<!-- 活动价格 -->
<text v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
{{ data.point }}积分
{{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${fen2yuan(data.pointPrice)}元` }}
</text>
<view class="ss-flex" v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
<image
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
class="point-img"
></image>
<text class="point-text ss-m-r-16">
{{ data.point }}
{{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${priceUnit}${fen2yuan(data.pointPrice)}` }}
</text>
</view>
<template v-else>
<text class="price-unit ss-font-24">{{ priceUnit }}</text>
<text v-if="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text>
@ -94,10 +100,16 @@
:style="[{ color: goodsFields.price.color }]"
>
<!-- 活动价格 -->
<text v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
{{ data.point }}积分
{{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${fen2yuan(data.pointPrice)}元` }}
</text>
<view class="ss-flex" v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
<image
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
class="point-img"
></image>
<text class="point-text ss-m-r-16">
{{ data.point }}
{{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${priceUnit}${fen2yuan(data.pointPrice)}` }}
</text>
</view>
<template v-else>
<text class="price-unit ss-font-24">{{ priceUnit }}</text>
<text v-if="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text>
@ -162,10 +174,16 @@
:style="[{ color: goodsFields.price.color }]"
>
<!-- 活动价格 -->
<text v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
{{ data.point }}积分
{{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${fen2yuan(data.pointPrice)}元` }}
</text>
<view class="ss-flex" v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
<image
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
class="point-img"
></image>
<text class="point-text ss-m-r-16">
{{ data.point }}
{{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${priceUnit}${fen2yuan(data.pointPrice)}` }}
</text>
</view>
<template v-else>
<text class="price-unit ss-font-24">{{ priceUnit }}</text>
<text v-if="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text>
@ -257,10 +275,16 @@
<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 v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
{{ data.point }}积分
{{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${fen2yuan(data.pointPrice)}元` }}
</text>
<view class="ss-flex" v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
<image
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
class="point-img"
></image>
<text class="point-text ss-m-r-16">
{{ data.point }}
{{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${priceUnit}${fen2yuan(data.pointPrice)}` }}
</text>
</view>
<template v-else>
<text class="price-unit ss-font-24">{{ priceUnit }}</text>
<text v-if="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text>
@ -345,10 +369,16 @@
<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 v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
{{ data.point }}积分
{{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${fen2yuan(data.pointPrice)}元` }}
</text>
<view class="ss-flex" v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
<image
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
class="point-img"
></image>
<text class="ss-m-r-16">
{{ data.point }}
{{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${priceUnit}${fen2yuan(data.pointPrice)}` }}
</text>
</view>
<template v-else>
<text class="price-unit ss-font-24">{{ priceUnit }}</text>
<text v-if="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text>
@ -550,14 +580,14 @@
if (props.goodsFields.salesCount?.show) {
if (props.data.activityType && props.data.activityType === PromotionActivityTypeEnum.POINT.type) {
text.push(formatExchange(props.data.sales_show_type, (props.data.pointTotalStock || 0) - (props.data.pointStock || 0)));
}else {
} else {
text.push(formatSales(props.data.sales_show_type, props.data.salesCount));
}
}
if (props.goodsFields.stock?.show) {
if (props.data.activityType && props.data.activityType === PromotionActivityTypeEnum.POINT.type) {
text.push(formatStock(props.data.stock_show_type, props.data.pointTotalStock));
}else {
} else {
text.push(formatStock(props.data.stock_show_type, props.data.stock));
}
}
@ -632,6 +662,12 @@
line-height: 32rpx;
}
.point-img {
width: 30rpx;
height: 30rpx;
margin: 0 4rpx;
}
.groupon-tag {
position: absolute;
left: 0;

4
sheep/components/s-point-block/s-point-block.vue
View File

@ -91,7 +91,7 @@
:topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom"
:titleWidth="330 - marginLeft - marginRight"
@click="sheep.$router.go('/pages/goods/seckill', { id: item.activityId })"
@click="sheep.$router.go('/pages/goods/point', { id: item.activityId })"
@getHeight="calculateGoodsColumn($event, 'left')"
>
<!-- 购买按钮 -->
@ -121,7 +121,7 @@
:topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom"
:titleWidth="330 - marginLeft - marginRight"
@click="sheep.$router.go('/pages/goods/seckill', { id: item.activityId })"
@click="sheep.$router.go('/pages/goods/point', { id: item.activityId })"
@getHeight="calculateGoodsColumn($event, 'right')"
>
<!-- 购买按钮 -->

739
sheep/components/s-point-card/s-point-card.vue
View File

@ -1,458 +1,369 @@
<!-- 装修商品组件：【积分商城】商品卡片 -->
<template>
<!-- 商品卡片 -->
<view>
<!-- md卡片：竖向，一行放两个，图上内容下 -->
<view v-if="size === 'md'" class="md-goods-card ss-flex-col" :style="[elStyles]" @tap="onClick">
<image
class="md-img-box"
:src="sheep.$url.cdn(data.image)"
mode="widthFix"
@load="calculatePanelHeight"
></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"
class="md-goods-title ss-line-1"
:style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]"
>
{{ data.title }}
</view>
<view
v-if="goodsFields.subtitle?.show"
class="md-goods-subtitle ss-m-t-16 ss-line-1"
:style="[{ color: subTitleColor }]"
>
{{ data.subtitle }}
</view>
<view class="ss-col-bottom">
<view
v-if="goodsFields.score_price?.show"
class="md-goods-price ss-m-t-16 font-OPPOSANS ss-m-r-10 ss-flex"
:style="[{ color: goodsFields.score_price.color }]"
>
<view>{{ Number(data.price[0]) > 0 ? '￥' + data.price[0] + '+' : '' }}</view>
<image
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
class="score-img"
></image>
{{ data.score }}
</view>
<view
v-if="goodsFields.price?.show && data.original_price > 0"
class="goods-origin-price ss-m-t-16 font-OPPOSANS ss-flex"
:style="[{ color: goodsFields.price.color }]"
>
<text class="price-unit ss-font-20">{{ priceUnit }}</text>
<view class="ss-m-l-8">{{ data.original_price }}</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=""></image>
</view>
</slot>
</view>
<!-- lg卡片：横向型，一行放一个，图片左内容右边 -->
<!-- 布局1. 单列大图（上图，下内容）-->
<view
v-if="size === 'lg'"
class="lg-goods-card ss-flex ss-col-stretch"
:style="[elStyles]"
@tap="onClick"
v-if="state.property.layoutType === LayoutTypeEnum.ONE_COL_BIG_IMG && state.spuList.length"
class="goods-sl-box"
>
<image class="lg-img-box" :src="sheep.$url.cdn(data.image)" 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 class="ss-m-r-20">
<view
v-if="goodsFields.title?.show"
class="lg-goods-title ss-line-2"
:style="[{ color: titleColor }]"
>
{{ data.title }}
</view>
<view
v-if="goodsFields.subtitle?.show"
class="lg-goods-subtitle ss-m-t-10 ss-line-1"
:style="[{ color: subTitleColor }]"
>
{{ data.subtitle }}
</view>
</view>
<view>
<view class="ss-m-t-10">
<view
v-if="goodsFields.score_price?.show"
class="lg-goods-price ss-m-r-12 ss-flex ss-col-bottom font-OPPOSANS"
:style="[{ color: goodsFields.score_price.color }]"
>
<view>{{ Number(data.price[0]) > 0 ? '￥' + data.price[0] + '+' : '' }}</view>
<image
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
class="score-img"
></image>
{{ data.score }}
</view>
<view
v-if="goodsFields.price?.show && data.original_price > 0"
class="goods-origin-price ss-flex ss-col-bottom font-OPPOSANS"
:style="[{ color: goodsFields.price.color }]"
>
<text class="price-unit ss-font-20">{{ priceUnit }}</text>
<view class="ss-m-l-8">{{ data.original_price }}</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>
</view>
<slot name="cart"
><view class="buy-box ss-flex ss-col-center ss-row-center">去兑换</view></slot
<view
class="goods-box"
v-for="item in state.spuList"
:key="item.id"
:style="[{ marginBottom: state.property.space * 2 + 'rpx' }]"
>
<s-goods-column
class=""
size="sl"
:goodsFields="state.property.fields"
:tagStyle="state.property.badge"
:data="item"
:titleColor="state.property.fields.name?.color"
:subTitleColor="state.property.fields.introduction.color"
:topRadius="state.property.borderRadiusTop"
:bottomRadius="state.property.borderRadiusBottom"
@click="sheep.$router.go('/pages/goods/point', { id: item.activityId })"
>
<!-- 购买按钮 -->
<template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
{{ state.property.btnBuy.type === 'text' ? state.property.btnBuy.text : '' }}
</button>
</template>
</s-goods-column>
</view>
</view>
<!-- sl卡片：竖向型，一行放一个，图片上内容下边 -->
<view v-if="size === 'sl'" class="sl-goods-card ss-flex-col" @tap="onClick">
<image class="sl-img-box" :src="sheep.$url.cdn(data.image)" mode="aspectFill"></image>
<view class="sl-goods-content ss-flex-col ss-row-between ss-p-b-20 ss-p-t-20">
<view class="ss-m-b-20">
<view class="sl-goods-title ss-line-1 ss-p-l-16 ss-p-r-16">
{{ data.title }}
</view>
<view v-if="data.subtitle" class="sl-goods-subtitle ss-p-l-16 ss-p-r-16 ss-m-t-16">
{{ data.subtitle }}
</view>
</view>
<view>
<slot name="activity">
<view
v-if="data.promos?.length"
class="tag-box ss-flex ss-col-center ss-flex-wrap ss-p-l-16 ss-p-r-16"
>
<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 ss-p-l-16 ss-p-r-16 font-OPPOSANS">
<view class="sl-goods-price ss-m-r-12 ss-flex">
<view>{{ Number(data.price[0]) > 0 ? '￥' + data.price[0] + '+' : '' }}</view>
<image
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
class="score-img"
></image>
<view>{{ data.score ? data.score : '' }}</view>
</view>
<view
v-if="data.original_price > 0"
class="goods-origin-price ss-m-t-16 font-OPPOSANS ss-flex"
>
<text class="price-unit ss-font-20">￥</text>
<view class="ss-m-l-8">{{ data.original_price }}</view>
</view>
</view>
<view class="ss-p-l-16 ss-p-r-16 ss-m-t-16 ss-flex ss-flex-wrap">
<view class="sales-text">{{ salesAndStock }}</view>
</view>
<!-- 布局2. 单列小图（左图，右内容） -->
<view
v-if="state.property.layoutType === LayoutTypeEnum.ONE_COL_SMALL_IMG && state.spuList.length"
class="goods-lg-box"
>
<view
class="goods-box"
:style="[{ marginBottom: state.property.space + 'px' }]"
v-for="item in state.spuList"
:key="item.id"
>
<s-goods-column
class="goods-card"
size="lg"
:goodsFields="state.property.fields"
:data="item"
:tagStyle="state.property.badge"
:titleColor="state.property.fields.name?.color"
:subTitleColor="state.property.fields.introduction.color"
:topRadius="state.property.borderRadiusTop"
:bottomRadius="state.property.borderRadiusBottom"
@tap="sheep.$router.go('/pages/goods/point', { id: item.activityId })"
>
<!-- 购买按钮 -->
<template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
{{ state.property.btnBuy.type === 'text' ? state.property.btnBuy.text : '' }}
</button>
</template>
</s-goods-column>
</view>
</view>
<!-- 布局3. 双列（每一列：上图，下内容）-->
<view
v-if="state.property.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: state.property.space + 'rpx', marginBottom: state.property.space + 'px' }]"
v-for="item in state.leftSpuList"
:key="item.id"
>
<s-goods-column
class="goods-md-box"
size="md"
:goodsFields="state.property.fields"
:tagStyle="state.property.badge"
:data="item"
:titleColor="state.property.fields.name?.color"
:subTitleColor="state.property.fields.introduction.color"
:topRadius="state.property.borderRadiusTop"
:bottomRadius="state.property.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]">
{{ state.property.btnBuy.type === 'text' ? state.property.btnBuy.text : '' }}
</button>
</template>
</s-goods-column>
</view>
</view>
<view class="goods-list-box">
<view
class="right-list"
:style="[{ paddingLeft: state.property.space + 'rpx', marginBottom: state.property.space + 'px' }]"
v-for="item in state.rightSpuList"
:key="item.id"
>
<s-goods-column
class="goods-md-box"
size="md"
:goodsFields="state.property.fields"
:tagStyle="state.property.badge"
:data="item"
:titleColor="state.property.fields.name?.color"
:subTitleColor="state.property.fields.introduction.color"
:topRadius="state.property.borderRadiusTop"
:bottomRadius="state.property.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]">
{{ state.property.btnBuy.type === 'text' ? state.property.btnBuy.text : '' }}
</button>
</template>
</s-goods-column>
</view>
</view>
<slot name="cart"
><view class="buy-box ss-flex ss-col-center ss-row-center">去兑换</view></slot
>
</view>
</view>
</template>
<script setup>
import { computed, getCurrentInstance } from 'vue';
import sheep from '@/sheep';
import { formatSales } from '@/sheep/hooks/useGoods';
import { formatStock } from '@/sheep/hooks/useGoods';
/**
* 订单卡片
*
* @property {String} img - 图片
* @property {String} title - 标题
* @property {Number} titleWidth = 0 - 标题宽度，默认0，单位rpx
* @property {String} skuText - 规格
* @property {String | Number} score - 积分
* @property {String | Number} price - 价格
* @property {String | Number} originalPrice - 单购价
* @property {String} priceColor - 价格颜色
* @property {Number | String} num - 数量
*
* 商品卡片
*/
const props = defineProps({
goodsFields: {
type: [Array, Object],
default() {
return {
title: { show: true },
subtitle: { show: true },
price: { show: true },
original_price: { show: true },
sales: { show: true },
stock: { show: true },
};
import { computed, nextTick, onMounted, reactive, watch } from 'vue';
import sheep from '@/sheep';
import SpuApi from '@/sheep/api/product/spu';
import { PromotionActivityTypeEnum } from '@/sheep/util/const';
import { isEmpty } from '@/sheep/helper/utils';
// 布局类型
const LayoutTypeEnum = {
// 单列大图
ONE_COL_BIG_IMG: 'oneColBigImg',
// 双列
TWO_COL: 'twoCol',
// 单列小图
ONE_COL_SMALL_IMG: 'oneColSmallImg',
};
const state = reactive({
spuList: [],
leftSpuList: [],
rightSpuList: [],
property: {
'layoutType': 'oneColBigImg',
'fields': {
'name': {
'show': true,
'color': '#000',
},
'introduction': {
'show': true,
'color': '#999',
},
'price': {
'show': true,
'color': '#ff3000',
},
'marketPrice': {
'show': true,
'color': '#c4c4c4',
},
'salesCount': {
'show': true,
'color': '#c4c4c4',
},
'stock': {
'show': true,
'color': '#c4c4c4',
},
},
'badge': {
'show': false,
'imgUrl': '',
},
'btnBuy': {
'type': 'text',
'text': '立即兑换',
'bgBeginColor': '#FF6000',
'bgEndColor': '#FE832A',
'imgUrl': '',
},
'borderRadiusTop': 8,
'borderRadiusBottom': 8,
'space': 8,
'style': {
'bgType': 'color',
'bgColor': '',
'marginLeft': 8,
'marginRight': 8,
'marginBottom': 8,
},
},
tagStyle: {
});
const props = defineProps({
property: {
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',
},
priceUnit: {
type: String,
default: '￥',
},
subTitleColor: {
type: String,
default: '#999999',
default: () => ({}),
},
});
// 组件样式
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',
};
// 动态更新 property
watch(() => props.property, (newVal) => {
state.property = { ...state.property, ...newVal };
}, { immediate: true, deep: true });
const { marginLeft, marginRight } = state.property.styles || {};
// 购买按钮样式
const buyStyle = computed(() => {
if (state.property.btnBuy.type === 'text') {
// 文字按钮：线性渐变背景颜色
return {
background: `linear-gradient(to right, ${state.property.btnBuy.bgBeginColor}, ${state.property.btnBuy.bgEndColor})`,
};
}
if (state.property.btnBuy.type === 'img') {
// 图片按钮
return {
width: '54rpx',
height: '54rpx',
background: `url(${sheep.$url.cdn(state.property.btnBuy.imgUrl)}) no-repeat`,
backgroundSize: '100% 100%',
};
}
});
const emits = defineEmits(['click', 'getHeight']);
const onClick = () => {
emits('click');
};
// 格式化销量、库存信息
const salesAndStock = computed(() => {
let text = [];
text.push(formatSales(props.data.sales_show_type, props.data.sales));
text.push(formatStock(props.data.stock_show_type, props.data.stock));
return text.join(' | ');
});
// 获取实时卡片高度
const { proxy } = getCurrentInstance();
const elId = `sheep_${Math.ceil(Math.random() * 10e5).toString(36)}`;
function calculatePanelHeight(e) {
if (props.size === 'md') {
const view = uni.createSelectorQuery().in(proxy);
view.select(`#${elId}`).fields({ size: true, scrollOffset: true });
view.exec((data) => {
const goodsPriceCard = data[0];
const card = {
width: goodsPriceCard.width,
height: (goodsPriceCard.width / e.detail.width) * e.detail.height + goodsPriceCard.height,
};
emits('getHeight', card.height);
});
//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 getSpuDetail(ids) {
const { data: spu } = await SpuApi.getSpuDetail(ids);
return spu;
}
async function concatActivity(list) {
if (isEmpty(list)) {
return;
}
// 循环获取活动商品SPU详情并添加到spuList
for (const activity of list) {
state.spuList.push(await getSpuDetail(activity.spuId));
}
// 循环活动列表
list.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 (state.property.layoutType === LayoutTypeEnum.TWO_COL) {
// 分列
calculateGoodsColumn();
}
}
function getActivityCount() {
return state.spuList.length;
}
defineExpose({ concatActivity,getActivityCount,calculateGoodsColumn });
</script>
<style lang="scss" scoped>
.price-unit {
margin-right: -4px;
}
.sales-text {
display: table;
font-size: 24rpx;
transform: scale(0.8);
margin-left: -16rpx;
color: #c4c4c4;
}
// md
.md-goods-card {
overflow: hidden;
.goods-md-wrap {
width: 100%;
position: relative;
z-index: 1;
background-color: $white;
position: relative;
}
.md-img-box {
width: 100%;
.goods-list-box {
width: 50%;
box-sizing: border-box;
.left-list {
&:nth-last-child(1) {
margin-bottom: 0 !important;
}
}
.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;
.right-list {
&:nth-last-child(1) {
margin-bottom: 0 !important;
}
}
}
// lg
.lg-goods-card {
overflow: hidden;
.goods-box {
&:nth-last-of-type(1) {
margin-bottom: 0 !important;
}
}
.goods-md-box,
.goods-sl-box,
.goods-lg-box {
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 {
.cart-btn {
position: absolute;
bottom: 20rpx;
bottom: 18rpx;
right: 20rpx;
z-index: 2;
width: 120rpx;
z-index: 11;
height: 50rpx;
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
line-height: 50rpx;
padding: 0 20rpx;
border-radius: 25rpx;
font-size: 24rpx;
color: #ffffff;
color: #fff;
}
.tag-box {
width: 100%;
}
}
.sl-goods-card {
overflow: hidden;
position: relative;
z-index: 1;
width: 100%;
background-color: $white;
.sl-img-box {
width: 100%;
height: 360rpx;
}
.sl-goods-title {
font-size: 26rpx;
color: #333;
width: 100%;
box-sizing: border-box;
}
.sl-goods-subtitle {
font-size: 24rpx;
font-weight: 400;
color: #999999;
line-height: 30rpx;
width: 100%;
box-sizing: border-box;
}
.sl-goods-price {
font-size: 30rpx;
color: $red;
}
.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;
}
}
.goods-origin-price {
font-size: 20rpx;
color: #c4c4c4;
text-decoration: line-through;
}
.score-img {
width: 36rpx;
height: 36rpx;
margin: 0 4rpx;
}
</style>

20
sheep/components/s-select-seckill-sku/s-select-seckill-sku.vue
View File

@ -19,8 +19,16 @@
<view class="goods-title ss-line-2">{{ state.goodsInfo.name }}</view>
<view class="header-right-bottom ss-flex ss-col-center ss-row-between">
<!-- 价格 -->
<view v-if="state.goodsInfo.activity_type === PromotionActivityTypeEnum.POINT.type" class="price-text">
{{ getShowPriceText }}
<view v-if="state.goodsInfo.activity_type === PromotionActivityTypeEnum.POINT.type"
class="price-text ss-flex">
<image
v-if="!isEmpty(state.selectedSku)"
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
class="point-img"
></image>
<text class="point-text ss-m-r-16">
{{ getShowPriceText }}
</text>
</view>
<view v-else class="price-text">
￥{{ fen2yuan(state.selectedSku.price || state.goodsInfo.price) }}
@ -124,7 +132,7 @@
let priceText = `￥${fen2yuan(state.goodsInfo.price)}`;
if (!isEmpty(state.selectedSku)) {
const sku = state.selectedSku;
priceText = `${sku.point}积分${!sku.pointPrice ? '' : `+￥${fen2yuan(sku.pointPrice)}`}`;
priceText = `${sku.point}${!sku.pointPrice ? '' : `+￥${fen2yuan(sku.pointPrice)}`}`;
}
return priceText;
});
@ -320,6 +328,12 @@
}
}
.point-img {
width: 36rpx;
height: 36rpx;
margin: 0 4rpx;
}
.ss-modal-box {
border-radius: 30rpx 30rpx 0 0;
max-height: 1000rpx;