xsl/meida_applet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

【功能完善】商品列表，展示满减送、限时折扣的信息

Browse Source
This commit is contained in:
YunaiV
2024-09-16 09:16:16 +08:00
parent f03fcf1373
commit b741a1d148
3 changed files with 163 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sheep/components/s-goods-column/s-goods-column.vue
+142 -32
View File
@@ -27,13 +27,23 @@
>
{{ data.title || data.name }}
</view>
<!-- 这里是新加的会员价和限时优惠 -->
<view class="iconBox" v-if="data.discountPrice || data.vipPrice || data.reward">
<view class="card" v-if="iconShow">{{ iconShow }}</view>
<view class="card2" v-if="data.reward">{{ data.reward.ruleDescriptions[0] }}</view>
</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) }}
<text v-if="iconShow == '限时优惠'">{{ fen2yuan(data.discountPrice) }}</text>
<text v-else-if="iconShow == '会员价'">{{ fen2yuan(data.vipPrice) }}</text>
<text v-else>{{
isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price)
}}</text>
</view>
</view>
</view>
@@ -60,13 +70,23 @@
>
{{ data.title || data.name }}
</view>
<!-- 这里是新加的会员价和限时优惠 -->
<view class="iconBox" v-if="data.discountPrice || data.vipPrice || data.reward">
<view class="card" v-if="iconShow">{{ iconShow }}</view>
<view class="card2" v-if="data.reward">{{ data.reward.ruleDescriptions[0] }}</view>
</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) }}
<text v-if="iconShow == '限时优惠'">{{ fen2yuan(data.discountPrice) }}</text>
<text v-else-if="iconShow == '会员价'">{{ fen2yuan(data.vipPrice) }}</text>
<text v-else>{{
isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price)
}}</text>
</view>
</view>
</view>
@@ -110,6 +130,12 @@
</view>
</view>
</slot>
<!-- 这里是新加的会员价和限时优惠 -->
<view class="iconBox" v-if="data.discountPrice || data.vipPrice || data.reward">
<view class="card" v-if="iconShow">{{ iconShow }}</view>
<view class="card2" v-if="data.reward">{{ data.reward.ruleDescriptions[0] }}</view>
</view>
<!-- 这里是新加的会员价和限时优惠结束 -->
<view class="ss-flex ss-col-bottom">
<view
v-if="goodsFields.price?.show"
@@ -117,7 +143,11 @@
:style="[{ color: goodsFields.price.color }]"
>
<text class="price-unit ss-font-24">{{ priceUnit }}</text>
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
<text v-if="iconShow == '限时优惠'">{{ fen2yuan(data.discountPrice) }}</text>
<text v-else-if="iconShow == '会员价'">{{ fen2yuan(data.vipPrice) }}</text>
<text v-else>{{
isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price)
}}</text>
</view>
<view
@@ -189,6 +219,12 @@
</view>
</view>
</slot>
<!-- 这里是新加的会员价和限时优惠 -->
<view class="iconBox" v-if="data.discountPrice || data.vipPrice || data.reward">
<view class="card" v-if="iconShow">{{ iconShow }}</view>
<view class="card2" v-if="data.reward">{{ data.reward.ruleDescriptions[0] }}</view>
</view>
<!-- 这里是新加的会员价和限时优惠结束 -->
<view class="ss-flex ss-col-bottom ss-m-t-10">
<view
v-if="goodsFields.price?.show"
@@ -207,7 +243,11 @@
:style="[{ color: originPriceColor }]"
>
<text class="price-unit ss-font-20">{{ priceUnit }}</text>
<view class="ss-m-l-8">{{ fen2yuan(data.marketPrice) }}</view>
<text v-if="iconShow == '限时优惠'">{{ fen2yuan(data.discountPrice) }}</text>
<text v-else-if="iconShow == '会员价'">{{ fen2yuan(data.vipPrice) }}</text>
<text v-else>{{
isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price)
}}</text>
</view>
</view>
<view class="ss-m-t-8 ss-flex ss-col-center ss-flex-wrap">
@@ -262,10 +302,20 @@
</view>
</view>
</slot>
<!-- 这里是新加的会员价和限时优惠 -->
<view class="iconBox" v-if="data.discountPrice || data.vipPrice || data.reward">
<view class="card" v-if="iconShow">{{ iconShow }}</view>
<view class="card2" v-if="data.reward">{{ data.reward.ruleDescriptions[0] }}</view>
</view>
<!-- 这里是新加的会员价和限时优惠结束 -->
<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) }}
<text v-if="iconShow == '限时优惠'">{{ fen2yuan(data.discountPrice) }}</text>
<text v-else-if="iconShow == '会员价'">{{ fen2yuan(data.vipPrice) }}</text>
<text v-else>{{
isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price)
}}</text>
</view>
<view
v-if="
@@ -297,36 +347,36 @@
* 商品卡片
*
* @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 {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 - 销售数量颜色
* @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 - 点击卡片
* @event {Function()} click - 点击卡片
*
*/
import { computed, reactive, getCurrentInstance, onMounted, nextTick } from 'vue';
import { computed, reactive, getCurrentInstance, onMounted, nextTick, ref } 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-es';
// 数据
const state = reactive({});
@@ -337,17 +387,29 @@
default() {
return {
// 商品价格
price: { show: true },
price: {
show: true,
},
// 库存
stock: { show: true },
stock: {
show: true,
},
// 商品名称
name: { show: true },
name: {
show: true,
},
// 商品介绍
introduction: { show: true },
introduction: {
show: true,
},
// 市场价
marketPrice: { show: true },
marketPrice: {
show: true,
},
// 销量
salesCount: { show: true },
salesCount: {
show: true,
},
};
},
},
@@ -416,7 +478,26 @@
default: false,
},
});
//判断限时优惠和会员价标签内容暂时导致页面出错，又舍不得丢，等着把新的数据整合到商品信息中，也用起来
const iconShow = handle();
function handle() {
debugger;
if (props.data.discountPrice === null && props.data.vipPrice === null) {
// 如果两个值都为 null，则不展示任何内容
return '';
} else if (props.data.discountPrice === null) {
// 如果 discountPrice 为 null，展示 vipPrice
return '会员价';
} else if (props.data.vipPrice === null) {
// 如果 vipPrice 为 null，展示 discountPrice
return '限时优惠';
} else if (props.data.discountPrice < props.data.vipPrice) {
return '限时优惠';
} else if (props.data.discountPrice > props.data.vipPrice) {
return '会员价';
}
}
// 组件样式
const elStyles = computed(() => {
return {
@@ -454,7 +535,10 @@
function getGoodsPriceCardWH() {
if (props.size === 'md') {
const view = uni.createSelectorQuery().in(proxy);
view.select(`#${elId}`).fields({ size: true, scrollOffset: true });
view.select(`#${elId}`).fields({
size: true,
scrollOffset: true,
});
view.exec((data) => {
let totalHeight = 0;
const goodsPriceCard = data[0];
@@ -469,7 +553,6 @@
});
}
}
onMounted(() => {
nextTick(() => {
getGoodsPriceCardWH();
@@ -763,4 +846,31 @@
color: #ffffff;
}
}
.card {
width: fit-content;
height: fit-content;
padding: 2rpx 10rpx;
background-color: red;
color: #ffffff;
font-size: 24rpx;
}
.card2 {
width: fit-content;
height: fit-content;
padding: 2rpx 10rpx;
background-color: rgb(255, 242, 241);
color: #ff2621;
font-size: 24rpx;
margin-left: 5rpx;
}
.iconBox {
width: 100%;
height: fit-content;
margin-top: 10rpx;
display: flex;
justify-content: flex-start;
}
</style>