sync:商品列表瀑布流问题修改 c2cd0156f3

pull/142/MERGE
YunaiV 2025-04-27 13:03:50 +08:00
parent 352a61c8f5
commit 796f3e9eba
3 changed files with 101 additions and 27 deletions

13
App.vue
View File

@ -5,14 +5,18 @@
onLaunch(() => {
//
setTimeout(() => {
uni.hideTabBar();
try {
uni.hideNavigationBar();
} catch (error) {
// error
}
}, 200);
// Shopro
ShoproInit();
});
onShow((options) => {
onShow(() => {
// #ifdef APP-PLUS
// urlSchemes
const args = plus.runtime.arguments;
@ -24,11 +28,6 @@
success: (res) => {},
});
// #endif
// #ifdef MP-WEIXIN
//
console.log(options, 'options');
// #endif
});
</script>

View File

@ -187,15 +187,15 @@
// leftGoodsList + rightGoodsList
function mountMasonry(height = 0, where = 'left') {
if (!state.pagination.list[count]) {
return;
}
if (where === 'left') {
leftHeight += height;
} else {
rightHeight += height;
}
if (!state.pagination.list[count]) {
return;
}
if (leftHeight <= rightHeight) {
state.leftGoodsList.push(state.pagination.list[count]);
} else {

View File

@ -40,14 +40,21 @@
:style="[{ color: goodsFields.price.color }]"
>
<!-- 活动价格 -->
<view class="ss-flex" v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
<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)}` }}
{{
!data.pointPrice || data.pointPrice === 0
? ''
: `+${priceUnit}${fen2yuan(data.pointPrice)}`
}}
</text>
</view>
<template v-else>
@ -100,14 +107,21 @@
:style="[{ color: goodsFields.price.color }]"
>
<!-- 活动价格 -->
<view class="ss-flex" v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
<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)}` }}
{{
!data.pointPrice || data.pointPrice === 0
? ''
: `+${priceUnit}${fen2yuan(data.pointPrice)}`
}}
</text>
</view>
<template v-else>
@ -126,7 +140,19 @@
<view v-if="tagStyle.show" class="tag-icon-box">
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)" />
</view>
<image class="md-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="widthFix" />
<image
v-if="data.image_wh"
class="md-img-box"
:src="sheep.$url.cdn(data.image || data.picUrl)"
mode="widthFix"
/>
<image
v-else
class="md-img-box"
:src="sheep.$url.cdn(data.image || data.picUrl)"
:style="[{ height: defaultImgWidth * 2 + 'rpx' }]"
mode="aspectFill"
/>
<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"
@ -174,14 +200,21 @@
:style="[{ color: goodsFields.price.color }]"
>
<!-- 活动价格 -->
<view class="ss-flex" v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
<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)}` }}
{{
!data.pointPrice || data.pointPrice === 0
? ''
: `+${priceUnit}${fen2yuan(data.pointPrice)}`
}}
</text>
</view>
<template v-else>
@ -275,14 +308,23 @@
<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 }]">
<!-- 活动价格 -->
<view class="ss-flex" v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
<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)}` }}
{{
!data.pointPrice || data.pointPrice === 0
? ''
: `+${priceUnit}${fen2yuan(data.pointPrice)}`
}}
</text>
</view>
<template v-else>
@ -369,14 +411,23 @@
<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 }]">
<!-- 活动价格 -->
<view class="ss-flex" v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
<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)}` }}
{{
!data.pointPrice || data.pointPrice === 0
? ''
: `+${priceUnit}${fen2yuan(data.pointPrice)}`
}}
</text>
</view>
<template v-else>
@ -441,7 +492,7 @@
* @event {Function()} click - 点击卡片
*
*/
import { computed, getCurrentInstance, nextTick, onMounted } from 'vue';
import { computed, ref, reactive, getCurrentInstance, nextTick, onMounted } from 'vue';
import sheep from '@/sheep';
import {
fen2yuan,
@ -453,6 +504,10 @@
import { isArray } from 'lodash-es';
import { PromotionActivityTypeEnum } from '@/sheep/util/const';
//
const state = reactive({});
let defaultImgWidth = ref(0);
//
const props = defineProps({
goodsFields: {
@ -550,6 +605,10 @@
type: Boolean,
default: false,
},
imgHeight: {
type: String,
default: '',
},
});
//
@ -578,14 +637,25 @@
const salesAndStock = computed(() => {
let text = [];
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)));
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 {
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) {
if (
props.data.activityType &&
props.data.activityType === PromotionActivityTypeEnum.POINT.type
) {
text.push(formatStock(props.data.stock_show_type, props.data.pointTotalStock));
} else {
text.push(formatStock(props.data.stock_show_type, props.data.stock));
@ -613,14 +683,19 @@
scrollOffset: true,
});
view.exec((data) => {
console.log(data, 'data');
let totalHeight = 0;
const goodsPriceCard = data[0];
defaultImgWidth.value = data[0].width;
if (props.data.image_wh) {
totalHeight =
(goodsPriceCard.width / props.data.image_wh.w) * props.data.image_wh.h +
goodsPriceCard.height;
console.log(totalHeight, 'totalHeight');
} else {
totalHeight = goodsPriceCard.width;
totalHeight = goodsPriceCard.width + goodsPriceCard.height;
console.log(totalHeight, 'totalHeight2');
}
emits('getHeight', totalHeight);
});