sync:商品列表瀑布流问题修改 c2cd0156f3
parent
352a61c8f5
commit
796f3e9eba
13
App.vue
13
App.vue
|
@ -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>
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue