commit
96d86f237d
|
@ -1,18 +1,6 @@
|
|||
<!-- 积分商城:商品列表 -->
|
||||
<template>
|
||||
<s-layout title="积分商城" navbar="normal" :leftWidth="0" :rightWidth="0">
|
||||
<!-- 筛选 -->
|
||||
<su-sticky bgColor="#fff">
|
||||
<view class="ss-flex">
|
||||
<view class="ss-flex-1">
|
||||
|
||||
</view>
|
||||
<view class="list-icon" @tap="iconStatus = !iconStatus">
|
||||
<text v-if="iconStatus" class="sicon-goods-list" />
|
||||
<text v-else class="sicon-goods-card" />
|
||||
</view>
|
||||
</view>
|
||||
</su-sticky>
|
||||
<scroll-view
|
||||
class="scroll-box"
|
||||
:style="{ height: pageHeight + 'rpx' }"
|
||||
|
@ -20,7 +8,7 @@
|
|||
:scroll-with-animation="false"
|
||||
:enable-back-to-top="true"
|
||||
>
|
||||
<s-point-card ref="sPointCardRef" :property="sPointCardData" class="ss-p-x-20 ss-m-t-20"/>
|
||||
<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"
|
||||
|
@ -40,7 +28,7 @@
|
|||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { computed, reactive, ref } from 'vue';
|
||||
import { reactive, ref } from 'vue';
|
||||
import PointApi from '@/sheep/api/promotion/point';
|
||||
import SLayout from '@/sheep/components/s-layout/s-layout.vue';
|
||||
|
||||
|
@ -50,32 +38,7 @@
|
|||
const pageHeight =
|
||||
(safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sheep.$platform.navbar - 350;
|
||||
|
||||
const sPointCardData = ref({
|
||||
'layoutType': 'twoCol',
|
||||
});
|
||||
// 布局类型
|
||||
const LayoutTypeEnum = {
|
||||
// 单列大图
|
||||
ONE_COL_BIG_IMG: 'oneColBigImg',
|
||||
// 双列
|
||||
TWO_COL: 'twoCol',
|
||||
};
|
||||
const sPointCardRef = ref();
|
||||
// true - 单列布局;false - 双列布局
|
||||
const iconStatus = computed({
|
||||
get() {
|
||||
return sPointCardData.value.layoutType === LayoutTypeEnum.ONE_COL_BIG_IMG;
|
||||
},
|
||||
set(newValue) {
|
||||
newValue ? (sPointCardData.value.layoutType = LayoutTypeEnum.ONE_COL_BIG_IMG) :
|
||||
(sPointCardData.value.layoutType = LayoutTypeEnum.TWO_COL);
|
||||
// 只有双列布局时需要
|
||||
if (sPointCardData.value.layoutType === LayoutTypeEnum.TWO_COL) {
|
||||
// 分列
|
||||
sPointCardRef.value.calculateGoodsColumn();
|
||||
}
|
||||
},
|
||||
});
|
||||
// 查询活动列表
|
||||
const activityPageParams = reactive({
|
||||
pageNo: 1, // 页码
|
||||
|
|
|
@ -31,15 +31,14 @@
|
|||
<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">
|
||||
<view v-if="getShowPrice.price > 0" class="price-text"> ¥{{ getShowPrice.price }}</view>
|
||||
<text v-if="getShowPrice.price > 0 && getShowPrice.point > 0">+</text>
|
||||
<image
|
||||
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
|
||||
class="point-img"
|
||||
></image>
|
||||
<view class="point-text ss-m-r-16">
|
||||
<text class="point-text ss-m-r-16">
|
||||
{{ getShowPrice.point }}
|
||||
</view>
|
||||
{{ !getShowPrice.price || getShowPrice.price === 0 ? '' : `+¥${getShowPrice.price}` }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="sales-text">
|
||||
{{ formatExchange(state.goodsInfo.sales_show_type, state.goodsInfo.sales) }}
|
||||
|
@ -95,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>
|
||||
|
@ -203,6 +209,15 @@
|
|||
};
|
||||
});
|
||||
|
||||
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);
|
||||
|
@ -277,6 +292,7 @@
|
|||
height: 36rpx;
|
||||
margin: 0 4rpx;
|
||||
}
|
||||
|
||||
.point-text {
|
||||
font-size: 42rpx;
|
||||
font-weight: 500;
|
||||
|
@ -284,6 +300,7 @@
|
|||
line-height: 36rpx;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
|
||||
.price-text {
|
||||
font-size: 42rpx;
|
||||
font-weight: 500;
|
||||
|
@ -292,6 +309,7 @@
|
|||
font-family: OPPOSANS;
|
||||
}
|
||||
}
|
||||
|
||||
.origin-price-text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
|
|
|
@ -40,25 +40,37 @@
|
|||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="state.orderPayload.pointActivityId" class="order-item ss-flex ss-col-center ss-row-between">
|
||||
<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"
|
||||
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"
|
||||
|
@ -331,7 +343,7 @@
|
|||
return;
|
||||
}
|
||||
state.orderInfo = data;
|
||||
state.couponInfo = data.coupons;
|
||||
state.couponInfo = data.coupons || [];
|
||||
// 设置收货地址
|
||||
if (state.orderInfo.address) {
|
||||
addressState.value.addressInfo = state.orderInfo.address;
|
||||
|
|
|
@ -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++) {
|
||||
|
|
|
@ -47,7 +47,7 @@
|
|||
></image>
|
||||
<text class="point-text ss-m-r-16">
|
||||
{{ data.point }}
|
||||
{{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${fen2yuan(data.pointPrice)}元` }}
|
||||
{{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${priceUnit}${fen2yuan(data.pointPrice)}` }}
|
||||
</text>
|
||||
</view>
|
||||
<template v-else>
|
||||
|
@ -107,7 +107,7 @@
|
|||
></image>
|
||||
<text class="point-text ss-m-r-16">
|
||||
{{ data.point }}
|
||||
{{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${fen2yuan(data.pointPrice)}元` }}
|
||||
{{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${priceUnit}${fen2yuan(data.pointPrice)}` }}
|
||||
</text>
|
||||
</view>
|
||||
<template v-else>
|
||||
|
@ -181,7 +181,7 @@
|
|||
></image>
|
||||
<text class="point-text ss-m-r-16">
|
||||
{{ data.point }}
|
||||
{{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${fen2yuan(data.pointPrice)}元` }}
|
||||
{{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${priceUnit}${fen2yuan(data.pointPrice)}` }}
|
||||
</text>
|
||||
</view>
|
||||
<template v-else>
|
||||
|
@ -282,7 +282,7 @@
|
|||
></image>
|
||||
<text class="point-text ss-m-r-16">
|
||||
{{ data.point }}
|
||||
{{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${fen2yuan(data.pointPrice)}元` }}
|
||||
{{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${priceUnit}${fen2yuan(data.pointPrice)}` }}
|
||||
</text>
|
||||
</view>
|
||||
<template v-else>
|
||||
|
@ -376,7 +376,7 @@
|
|||
></image>
|
||||
<text class="ss-m-r-16">
|
||||
{{ data.point }}
|
||||
{{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${fen2yuan(data.pointPrice)}元` }}
|
||||
{{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${priceUnit}${fen2yuan(data.pointPrice)}` }}
|
||||
</text>
|
||||
</view>
|
||||
<template v-else>
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue