mirror of
http://git.coreshop.cn/jianweie/coreshoppro.git
synced 2025-12-06 18:33:27 +08:00
【优化】首页自定义组件【商品组件】三列或两列情况下，调整为瀑布流显示，解决图片缩略问题及小程序显示积分兑换价格后，样式不对齐的问题。
This commit is contained in:
JianWeie
@@ -1,37 +1,38 @@
|
||||
<template>
|
||||
|
||||
<view class="goodsBox coreshop-margin-bottom-10 coreshop-padding-top-5 coreshop-bg-white">
|
||||
<view class="goodsBox coreshop-margin-bottom-10 coreshop-padding-top-5">
|
||||
<!-- 列表平铺两列三列 -->
|
||||
<view v-if="coreshopdata.parameters.column == '2' && coreshopdata.parameters.display == 'list' || coreshopdata.parameters.column == '3' && coreshopdata.parameters.display == 'list'" v-bind:class="'column'+coreshopdata.parameters.column">
|
||||
<view class="coreshop-margin-left-5 coreshop-margin-right-5 coreshop-margin-top-10 coreshop-margin-bottom-10 " v-if="coreshopdata.parameters.lookTitle == 'true'">
|
||||
<coreshop-section font-size="15" :title="coreshopdata.parameters.title" v-if="coreshopdata.parameters.title != '' && coreshopdata.parameters.lookTitle == 'true'" @click="coreshopdata.parameters.lookMore == 'true' ? goGoodsList({catId: coreshopdata.parameters.classifyId,brandId:coreshopdata.parameters.brandId}) :''" :arrow="coreshopdata.parameters.lookMore == 'true'" :sub-title="coreshopdata.parameters.lookMore == 'true'?'更多':''"></coreshop-section>
|
||||
</view>
|
||||
<view class="" v-if="count">
|
||||
<u-grid :col="coreshopdata.parameters.column" :border="false" align="left">
|
||||
<u-grid-item :custom-style="{padding: '0px'}" v-for="(item, index) in coreshopdata.parameters.list" :key="index">
|
||||
<view class="good_box" @tap="goGoodsDetail(item.id)">
|
||||
<u--image :src="item.image" mode="widthFix" width="100%" :height="coreshopdata.parameters.column==2?'164px':'104px'" radius="10"></u--image>
|
||||
<view class="good_title u-line-2">
|
||||
{{item.name}}
|
||||
<view class=" coreshop-margin-bottom-10 coreshop-margin-top-10" v-if="count">
|
||||
<custom-waterfalls-flow :value="coreshopdata.parameters.list" :column="coreshopdata.parameters.column" @wapperClick="wapperClick" @imageClick="imageClick">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="goods" v-for="(item,index) in coreshopdata.parameters.list" :key="index" slot="slot{{index}}">
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
||||
<view class="coreshop-multiple-line-clamp">
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="good-price coreshop-display-block">
|
||||
{{item.price}}元 <span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-5 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center coreshop-margin-bottom-5">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray" v-if="coreshopdata.parameters.column==2">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">{{item.buyCount+'人付款'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="good-tag-recommend" v-if="item.isRecommend">
|
||||
推荐
|
||||
</view>
|
||||
<view class="good-tag-hot" v-if="item.isHot">
|
||||
热门
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view class="coreshop-flex coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top coreshop-margin-bottom-5" :class="coreshopdata.parameters.column>2?'coreshop-flex-direction-column':'coreshop-flex-direction-row'" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ item.price - item.pointsDeduction}}元
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ $common.formatMoney(item.price - item.pointsDeduction, 2, '')}}元
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5 coreshop-margin-bottom-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
@@ -40,28 +41,50 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</view>
|
||||
<view v-else-if="!count && !coreshopdata.parameters.listAjax">
|
||||
<u-grid col="3" border="false" align="left">
|
||||
<u-grid-item :custom-style="{padding: '0px'}" v-for="item in 3" :key="item">
|
||||
<view class="good_box">
|
||||
<view class="good_title u-line-2">
|
||||
无
|
||||
</view>
|
||||
<view class="good-price">
|
||||
0元
|
||||
</view>
|
||||
<view class="good-tag-recommend">
|
||||
推荐
|
||||
</view>
|
||||
<view class="good-tag-hot">
|
||||
热门
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<template v-slot:default="item">
|
||||
<view class="goods">
|
||||
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
||||
<view class="coreshop-multiple-line-clamp">
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center coreshop-margin-bottom-5">
|
||||
<view class="coreshop-text-red coreshop-font-weight-bold">
|
||||
<text class="coreshop-font-12">¥</text>
|
||||
<text class="coreshop-font-16">{{item.price}}</text>
|
||||
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray" v-if="coreshopdata.parameters.column==2">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">{{item.buyCount+'人付款'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top coreshop-margin-bottom-5" :class="coreshopdata.parameters.column>2?'coreshop-flex-direction-column':'coreshop-flex-direction-row'" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ $common.formatMoney(item.price - item.pointsDeduction, 2, '')}}元
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5 coreshop-margin-bottom-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
||||
<view>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</template>
|
||||
<!-- #endif -->
|
||||
</custom-waterfalls-flow>
|
||||
|
||||
|
||||
</view>
|
||||
<view v-else-if="!count && !coreshopdata.parameters.listAjax">
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -211,7 +234,13 @@
|
||||
methods: {
|
||||
change(e) {
|
||||
this.current = e.detail.current;
|
||||
}
|
||||
},
|
||||
wapperClick(item) {
|
||||
this.goGoodsDetail(item.id)
|
||||
},
|
||||
imageClick(item) {
|
||||
this.goGoodsDetail(item.id)
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.count = this.coreshopdata.parameters.list.length > 0;
|
||||
|
||||
Reference in New Issue
Block a user