mirror of
http://git.coreshop.cn/jianweie/coreshoppro.git
synced 2025-12-06 19:53:27 +08:00
【调整】调整栏目商品页表、推荐商品列表等商品列表展示形式为瀑布流模式。
This commit is contained in:
大灰灰
@@ -224,35 +224,93 @@
|
||||
<view class="coreshop-text-center coreshop-text-blue coreshop-padding-top-10 coreshop-font-13" @tap="goArticleList()">查看更多问题</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!--为您推荐-->
|
||||
<view class="coreshop-margin-top-16 coreshop-margin-bottom-12 coreshop-flex coreshop-justify-center coreshop-align-center">
|
||||
<view class="coreshop-margin-top-16 coreshop-margin-bottom-12 coreshop-flex coreshop-justify-center coreshop-align-center" v-if="shopRecommendData.length > 0">
|
||||
<view class="line-70"></view>
|
||||
<view class="coreshop-margin-left-12 coreshop-margin-right-12 coreshop-text-gray">为您推荐</view>
|
||||
<view class="line-70"></view>
|
||||
</view>
|
||||
<!--推荐列表-->
|
||||
<view class="coreshop-goods-group" v-if="shopRecommendData.length>0">
|
||||
<u-grid col="2" :border="false" align="left">
|
||||
<u-grid-item bg-color="transparent" :custom-style="{padding: '0px'}" v-for="(item, index) in shopRecommendData" :key="index" @click="goGoodsDetail(item.id)">
|
||||
<view class="good_box">
|
||||
<u--image :src="item.image" mode="widthFix" width="100%" height="174px" radius="10"></u--image>
|
||||
<view class="good_title u-line-2 coreshop-min-height-34">
|
||||
{{item.name}}
|
||||
<view class="coreshop-margin-left-16 coreshop-margin-right-16 index-goods coreshop-margin-top-10" v-if="shopRecommendData.length > 0">
|
||||
<custom-waterfalls-flow :value="shopRecommendData" @wapperClick="wapperClick" @imageClick="imageClick">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="goods" v-for="(item,index) in shopRecommendData" :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-title-294 coreshop-multiple-line-clamp">
|
||||
<!--<image class="coreshop-image-price-tags" src="https://files.cdn.coreshop.cn/static/icon/icon-tag-vip-discount.png"></image>-->
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="good-price">
|
||||
{{item.price}}元 <span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-15 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<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">{{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 class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" 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}}元
|
||||
</view>
|
||||
</view>
|
||||
<view class="good-tag-hot" v-if="item.isHot">
|
||||
热门
|
||||
<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>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</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-title-294 coreshop-multiple-line-clamp">
|
||||
<!--<image class="coreshop-image-price-tags" src="https://files.cdn.coreshop.cn/static/icon/icon-tag-vip-discount.png"></image>-->
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<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">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">{{item.buyCount+'人付款'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" 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}}元
|
||||
</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>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- #endif -->
|
||||
</custom-waterfalls-flow>
|
||||
</view>
|
||||
|
||||
|
||||
<u-popup class="coreshop-bottom-popup-box" :show="bottomModal" mode="bottom" height="70%" @close="hideModal" :closeable="true">
|
||||
<view class="radius coreshop-bg-white">
|
||||
<!--标题-->
|
||||
@@ -328,8 +386,7 @@
|
||||
mode="3"
|
||||
@add-cart="addCart"
|
||||
@buy-now="buyNow"
|
||||
buy-now-text="立即团购"
|
||||
></vk-data-goods-sku-popup>
|
||||
buy-now-text="立即团购"></vk-data-goods-sku-popup>
|
||||
|
||||
<!-- 右边浮动球 -->
|
||||
<coreshop-fab horizontal="right" vertical="bottom" direction="vertical"></coreshop-fab>
|
||||
@@ -448,6 +505,12 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
wapperClick(item) {
|
||||
this.goGoodsDetail(item.id)
|
||||
},
|
||||
imageClick(item) {
|
||||
this.goGoodsDetail(item.id)
|
||||
},
|
||||
onChange(e) {
|
||||
this.timeData = e
|
||||
},
|
||||
|
||||
@@ -344,33 +344,90 @@
|
||||
<view class="coreshop-text-center coreshop-text-blue coreshop-padding-top-10 coreshop-font-13" @tap="goArticleList()">查看更多问题</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!--为您推荐-->
|
||||
<view class="coreshop-margin-top-16 coreshop-margin-bottom-12 coreshop-flex coreshop-justify-center coreshop-align-center">
|
||||
<view class="coreshop-margin-top-16 coreshop-margin-bottom-12 coreshop-flex coreshop-justify-center coreshop-align-center" v-if="shopRecommendData.length > 0">
|
||||
<view class="line-70"></view>
|
||||
<view class="coreshop-margin-left-12 coreshop-margin-right-12 coreshop-text-gray">为您推荐</view>
|
||||
<view class="line-70"></view>
|
||||
</view>
|
||||
<!--推荐列表-->
|
||||
<view class="coreshop-goods-group" v-if="shopRecommendData.length>0">
|
||||
<u-grid col="2" :border="false" align="left">
|
||||
<u-grid-item bg-color="transparent" :custom-style="{padding: '0px'}" v-for="(item, index) in shopRecommendData" :key="index" @click="goGoodsDetail(item.id)">
|
||||
<view class="good_box">
|
||||
<u--image :src="item.image" mode="widthFix" width="100%" height="174px" radius="10"></u--image>
|
||||
<view class="good_title u-line-2 coreshop-min-height-34">
|
||||
{{item.name}}
|
||||
<view class="coreshop-margin-left-16 coreshop-margin-right-16 index-goods coreshop-margin-top-10" v-if="shopRecommendData.length > 0">
|
||||
<custom-waterfalls-flow :value="shopRecommendData" @wapperClick="wapperClick" @imageClick="imageClick">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="goods" v-for="(item,index) in shopRecommendData" :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-title-294 coreshop-multiple-line-clamp">
|
||||
<!--<image class="coreshop-image-price-tags" src="https://files.cdn.coreshop.cn/static/icon/icon-tag-vip-discount.png"></image>-->
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="good-price">
|
||||
{{item.price}}元 <span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-15 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<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">{{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 class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" 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}}元
|
||||
</view>
|
||||
</view>
|
||||
<view class="good-tag-hot" v-if="item.isHot">
|
||||
热门
|
||||
<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>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</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-title-294 coreshop-multiple-line-clamp">
|
||||
<!--<image class="coreshop-image-price-tags" src="https://files.cdn.coreshop.cn/static/icon/icon-tag-vip-discount.png"></image>-->
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<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">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">{{item.buyCount+'人付款'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" 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}}元
|
||||
</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>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- #endif -->
|
||||
</custom-waterfalls-flow>
|
||||
</view>
|
||||
|
||||
<!--占位底部距离-->
|
||||
@@ -615,6 +672,12 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
wapperClick(item) {
|
||||
this.goGoodsDetail(item.id)
|
||||
},
|
||||
imageClick(item) {
|
||||
this.goGoodsDetail(item.id)
|
||||
},
|
||||
onChange(e) {
|
||||
this.timeData = e
|
||||
},
|
||||
|
||||
@@ -229,34 +229,91 @@
|
||||
</view>
|
||||
|
||||
<!--为您推荐-->
|
||||
<view class="coreshop-margin-top-16 coreshop-margin-bottom-12 coreshop-flex coreshop-justify-center coreshop-align-center">
|
||||
<view class="coreshop-margin-top-16 coreshop-margin-bottom-12 coreshop-flex coreshop-justify-center coreshop-align-center" v-if="shopRecommendData.length > 0">
|
||||
<view class="line-70"></view>
|
||||
<view class="coreshop-margin-left-12 coreshop-margin-right-12 coreshop-text-gray">为您推荐</view>
|
||||
<view class="line-70"></view>
|
||||
</view>
|
||||
<!--推荐列表-->
|
||||
<view class="coreshop-goods-group" v-if="shopRecommendData.length>0">
|
||||
<u-grid col="2" :border="false" align="left">
|
||||
<u-grid-item bg-color="transparent" :custom-style="{padding: '0px'}" v-for="(item, index) in shopRecommendData" :key="index" @click="goGoodsDetail(item.id)">
|
||||
<view class="good_box">
|
||||
<u--image :src="item.image" mode="widthFix" width="100%" height="174px" radius="10"></u--image>
|
||||
<view class="good_title u-line-2 coreshop-min-height-34">
|
||||
{{item.name}}
|
||||
<view class="coreshop-margin-left-16 coreshop-margin-right-16 index-goods coreshop-margin-top-10" v-if="shopRecommendData.length > 0">
|
||||
<custom-waterfalls-flow :value="shopRecommendData" @wapperClick="wapperClick" @imageClick="imageClick">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="goods" v-for="(item,index) in shopRecommendData" :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-title-294 coreshop-multiple-line-clamp">
|
||||
<!--<image class="coreshop-image-price-tags" src="https://files.cdn.coreshop.cn/static/icon/icon-tag-vip-discount.png"></image>-->
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="good-price">
|
||||
{{item.price}}元 <span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-15 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<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">{{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 class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" 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}}元
|
||||
</view>
|
||||
</view>
|
||||
<view class="good-tag-hot" v-if="item.isHot">
|
||||
热门
|
||||
<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>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</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-title-294 coreshop-multiple-line-clamp">
|
||||
<!--<image class="coreshop-image-price-tags" src="https://files.cdn.coreshop.cn/static/icon/icon-tag-vip-discount.png"></image>-->
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<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">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">{{item.buyCount+'人付款'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" 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}}元
|
||||
</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>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- #endif -->
|
||||
</custom-waterfalls-flow>
|
||||
</view>
|
||||
|
||||
|
||||
<u-popup class="coreshop-bottom-popup-box" :show="bottomModal" mode="bottom" height="70%" @close="hideModal" :closeable="true">
|
||||
<view class="radius coreshop-bg-white">
|
||||
<!--标题-->
|
||||
@@ -319,10 +376,10 @@
|
||||
</view>
|
||||
</view>
|
||||
<!--<view class="coreshop-border-radius-20 coreshop-flex coreshop-align-end">
|
||||
<view class="btn-buy" @click="openSkuPopup">
|
||||
<text>立即秒杀</text>
|
||||
</view>
|
||||
</view>-->
|
||||
<view class="btn-buy" @click="openSkuPopup">
|
||||
<text>立即秒杀</text>
|
||||
</view>
|
||||
</view>-->
|
||||
<view class="btn-group coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-basis-5">
|
||||
<u-button type="error" size="normal" @click="openSkuPopup" shape="circle">立即秒杀</u-button>
|
||||
</view>
|
||||
@@ -337,8 +394,7 @@
|
||||
mode="3"
|
||||
@add-cart="addCart"
|
||||
@buy-now="buyNow"
|
||||
buy-now-text="立即秒杀"
|
||||
></vk-data-goods-sku-popup>
|
||||
buy-now-text="立即秒杀"></vk-data-goods-sku-popup>
|
||||
|
||||
<!-- 右边浮动球 -->
|
||||
<coreshop-fab horizontal="right" vertical="bottom" direction="vertical"></coreshop-fab>
|
||||
@@ -458,6 +514,12 @@
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
wapperClick(item) {
|
||||
this.goGoodsDetail(item.id)
|
||||
},
|
||||
imageClick(item) {
|
||||
this.goGoodsDetail(item.id)
|
||||
},
|
||||
onChange(e) {
|
||||
this.timeData = e
|
||||
},
|
||||
|
||||
@@ -1,22 +1,7 @@
|
||||
.topBox { position: sticky; z-index: 1; width: 100%; /* #ifdef APP-PLUS */ top: calc(var(--status-bar-height) + 35px); /* #endif */ /* #ifdef H5 */ top: calc(var(--status-bar-height) + 55px); /* #endif */ /* #ifdef MP */ top: calc(var(--status-bar-height) + 62.5px); /* #endif */ }
|
||||
.goodsBox { display: flex; flex-flow: row wrap; align-content: flex-start; margin-top: 10px; }
|
||||
.good_box { border-radius: 8px; margin: 0 5px 8px 5px; background-color: #ffffff; position: relative; box-sizing: border-box; break-inside: avoid; overflow: auto; width: calc(50% - 10px); }
|
||||
.good_image { width: 100%; border-top-left-radius: 4px; border-top-right-radius: 4px; }
|
||||
.good_title { font-size: 13px; margin-top: 5px; color: $core-main-color; }
|
||||
.good_title-xl { font-size: 14px; margin-top: 5px; color: $core-main-color; }
|
||||
.good-tag-hot { display: flex; margin-top: 5px; position: absolute; top: 7.5px; left: 7.5px; background-color: $core-type-error; color: #FFFFFF; display: flex; align-items: center; padding: 2px 7px; border-radius: 25px; font-size: 10px; line-height: 1; }
|
||||
.good-tag-recommend { display: flex; margin-top: 5px; position: absolute; top: 7.5px; right: 7.5px; background-color: $core-type-primary; color: #FFFFFF; margin-left: 10px; border-radius: 25px; line-height: 1; padding: 2px 7px; display: flex; align-items: center; border-radius: 25px; font-size: 10px; }
|
||||
.good-tag-recommend2 { display: flex; margin-top: 5px; position: absolute; bottom: 17.5px; left: 7.5px; background-color: $core-type-primary; color: #FFFFFF; border-radius: 25px; line-height: 1; padding: 2px 7px; display: flex; align-items: center; border-radius: 25px; font-size: 10px; }
|
||||
.good-price { font-size: 15px; color: $core-type-error; margin-top: 5px; }
|
||||
.good-des { font-size: 11px; color: $core-tips-color; margin-top: 5px; }
|
||||
.contentBody { position: relative; }
|
||||
.btnCart { position: absolute; bottom: 2.5px; right: 5px; }
|
||||
|
||||
/*搜索框*/
|
||||
.fliter-item-title { padding: 10px 13px 10px 0; width: 362px; margin-left: 13px; border-bottom: 1px solid #f3f3f3; position: relative; background-color: #fff; color: #333; display: flex; min-height: 45px; align-items: center; justify-content: space-between; }
|
||||
.fliter-item-title-hd { display: flex; /* vertical-align: middle; */ align-items: center; font-size: 14px; position: relative; }
|
||||
|
||||
.fliter-item-title-hd-title { /* float: left; */ display: inline-block; position: relative; /* #ifdef MP-ALIPAY */ top: 2px; /* #endif */ }
|
||||
|
||||
.fliter-item-title-hd { display: flex; align-items: center; font-size: 14px; position: relative; }
|
||||
.fliter-item-title-hd-title {display: inline-block; position: relative;}
|
||||
|
||||
.fliter-c { }
|
||||
.fliter-item { }
|
||||
@@ -28,7 +13,3 @@
|
||||
.fic-item:nth-child(4n) { margin-right: 0; }
|
||||
.fic-item-line { float: left; margin: 17px 9px 0 0; width: 25px; height: 1px; border-bottom: 1px solid #ccc; }
|
||||
.fic-item-input { position: relative; top: 50%; transform: translateY(-50%); }
|
||||
|
||||
.coreshop-bottomBtnsBox { text-align: center; position: absolute; bottom: 0px; width: 100%; padding: 10px;
|
||||
view { margin: 0 5px; width: calc(50% - 10px); }
|
||||
}
|
||||
|
||||
@@ -9,7 +9,6 @@
|
||||
<fy-dropdown-item v-model="comprehensiveDataValue" dropdownKey="synthesis" title="综合" :options="comprehensiveData" @change="comprehensive"></fy-dropdown-item>
|
||||
<fy-dropdown-item v-model="priceSortDataValue" dropdownKey="price" title="价格" :options="priceSortData" @change="priceSort"></fy-dropdown-item>
|
||||
<fy-dropdown-item v-model="salesVolumeDataValue" dropdownKey="sales" title="销量" :options="salesVolumeData" @change="salesVolume"></fy-dropdown-item>
|
||||
<fy-dropdown-item v-model="current" title="显示" :options="currentData"></fy-dropdown-item>
|
||||
<fy-dropdown-item title="其他" dropdownKey="other" :custom="true">
|
||||
<view class="slot-content coreshop-bg-white">
|
||||
<view class="fliter-c coreshop-padding-10">
|
||||
@@ -81,29 +80,63 @@
|
||||
</fy-dropdown-item>
|
||||
</fy-dropdown>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 商品列表 -->
|
||||
<scroll-view scroll-y="true" :scroll-into-view="toView" class="scroll-Y" @scrolltolower="lower" enable-back-to-top="true" lower-threshold="45">
|
||||
<!-- 表格图片 -->
|
||||
<view v-if="current === 0">
|
||||
<view v-if="goodsList.length > 0" class="goodsBox">
|
||||
<view class="good_box" v-for="item in goodsList" :key="item.id" @click="goGoodsDetail(item.id)">
|
||||
<u--image :src="item.image" :index="item.id" width="100%" height="167px" mode="widthFix"></u--image>
|
||||
<view class="coreshop-padding-5">
|
||||
<view class="good_title u-line-2 coreshop-min-height-34">
|
||||
{{item.name}}
|
||||
<view class="coreshop-margin-left-16 coreshop-margin-right-16 index-goods coreshop-margin-top-10" v-if="goodsList.length > 0">
|
||||
<custom-waterfalls-flow :value="goodsList" @wapperClick="wapperClick" @imageClick="imageClick">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="goods" v-for="(item,index) in goodsList" :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-title-294 coreshop-multiple-line-clamp">
|
||||
<!--<image class="coreshop-image-price-tags" src="https://files.cdn.coreshop.cn/static/icon/icon-tag-vip-discount.png"></image>-->
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<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">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view class="good-price">
|
||||
{{item.price}}元 <span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-15 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">{{item.buyCount+'人付款'}}</text>
|
||||
</view>
|
||||
<view class="good-tag-recommend" v-if="item.isRecommend">
|
||||
推荐
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
<view class="good-tag-hot" v-if="item.isHot">
|
||||
热门
|
||||
<view class="coreshop-text-red">
|
||||
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ item.price - item.pointsDeduction}}元
|
||||
</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>
|
||||
<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>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</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-title-294 coreshop-multiple-line-clamp">
|
||||
<!--<image class="coreshop-image-price-tags" src="https://files.cdn.coreshop.cn/static/icon/icon-tag-vip-discount.png"></image>-->
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<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">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">{{item.buyCount+'人付款'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
||||
<view>
|
||||
{{ pointShowName}}兑换价:
|
||||
</view>
|
||||
@@ -121,61 +154,14 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-btn-all">
|
||||
<u-loadmore :status="loadStatus" :icon-type="loadIconType" :load-text="loadText" margin-top="20" margin-bottom="20" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- 无数据时默认显示 -->
|
||||
<view class="coreshop-emptybox" v-else>
|
||||
<u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/data.png'" icon-size="150" text="当前列表为空" mode="list"></u-empty>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 列表图片 -->
|
||||
<view v-if="current === 1">
|
||||
<view v-if="goodsList.length > 0">
|
||||
<view class="img-list-item" v-for="(item, index) in goodsList" :key="index" @click="goGoodsDetail(item.id)">
|
||||
<view class="good_box">
|
||||
<u-row gutter="5" justify="space-between">
|
||||
<u-col span="4">
|
||||
<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
|
||||
<u--image :src="item.image" :index="item.id"></u--image>
|
||||
<view class="good-tag-recommend2" v-if="item.isRecommend">
|
||||
推荐
|
||||
</view>
|
||||
<view class="good-tag-hot" v-if="item.isHot">
|
||||
热门
|
||||
</view>
|
||||
</u-col>
|
||||
<u-col span="8">
|
||||
<view class="contentBody">
|
||||
<view class="good_title-xl u-line-2 coreshop-padding-left-10 coreshop-padding-right-10">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="good-price coreshop-padding-10">
|
||||
{{item.price}}元 <span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-15 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view class="good-des coreshop-padding-10" v-if="item.commentsCount > 0">
|
||||
{{ item.commentsCount }}条评论
|
||||
</view>
|
||||
<view class="good-des coreshop-padding-10" v-else-if="item.commentsCount <= 0">
|
||||
暂无评论
|
||||
</view>
|
||||
<u-icon name="shopping-cart" color="#2979ff" size="40" class="btnCart"></u-icon>
|
||||
</view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</view>
|
||||
</view>
|
||||
<u-loadmore :status="loadStatus" :icon-type="loadIconType" :load-text="loadText" margin-top="20" margin-bottom="20" />
|
||||
</view>
|
||||
<view class="coreshop-emptybox" v-else>
|
||||
<u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/data.png'" icon-size="150" text="当前列表为空" mode="list"></u-empty>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
</template>
|
||||
<!-- #endif -->
|
||||
</custom-waterfalls-flow>
|
||||
</view>
|
||||
<!-- 无数据时默认显示 -->
|
||||
<view class="coreshop-emptybox" v-else>
|
||||
<u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/data.png'" icon-size="150" text="当前列表为空" mode="list"></u-empty>
|
||||
</view>
|
||||
<u-back-top :scroll-top="scrollTop" :duration="300"></u-back-top>
|
||||
<!-- 登录提示 -->
|
||||
<coreshop-login-modal></coreshop-login-modal>
|
||||
@@ -189,7 +175,6 @@
|
||||
data() {
|
||||
return {
|
||||
title: '列表',
|
||||
current: 0,
|
||||
id: '',
|
||||
showView: false,
|
||||
goodsList: [],
|
||||
@@ -254,15 +239,7 @@
|
||||
{
|
||||
label: '从大到小',
|
||||
value: 'desc',
|
||||
}],
|
||||
currentData: [{
|
||||
label: '表格',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: '列表',
|
||||
value: 1,
|
||||
}],
|
||||
}]
|
||||
};
|
||||
},
|
||||
onPageScroll(e) {
|
||||
@@ -333,12 +310,11 @@
|
||||
pointShowPoint() { return this.$store.state.config.pointShowPoint },
|
||||
},
|
||||
methods: {
|
||||
listGrid() {
|
||||
if (this.current == 0) {
|
||||
this.current = 1;
|
||||
} else {
|
||||
this.current = 0;
|
||||
}
|
||||
wapperClick(item) {
|
||||
this.goGoodsDetail(item.id)
|
||||
},
|
||||
imageClick(item) {
|
||||
this.goGoodsDetail(item.id)
|
||||
},
|
||||
//设置查询条件
|
||||
setSearchData: function (searchData, clear = false) {
|
||||
|
||||
@@ -239,32 +239,88 @@
|
||||
</view>
|
||||
|
||||
<!--为您推荐-->
|
||||
<view class="coreshop-margin-top-16 coreshop-margin-bottom-12 coreshop-flex coreshop-justify-center coreshop-align-center">
|
||||
<view class="coreshop-margin-top-16 coreshop-margin-bottom-12 coreshop-flex coreshop-justify-center coreshop-align-center" v-if="shopRecommendData.length > 0">
|
||||
<view class="line-70"></view>
|
||||
<view class="coreshop-margin-left-12 coreshop-margin-right-12 coreshop-text-gray">为您推荐</view>
|
||||
<view class="line-70"></view>
|
||||
</view>
|
||||
<!--推荐列表-->
|
||||
<view class="coreshop-goods-group" v-if="shopRecommendData.length>0">
|
||||
<u-grid col="2" :border="false" align="left">
|
||||
<u-grid-item bg-color="transparent" :custom-style="{padding: '0px'}" v-for="(item, index) in shopRecommendData" :key="index" @click="goGoodsDetail(item.id)">
|
||||
<view class="good_box">
|
||||
<u--image :src="item.image" mode="widthFix" width="100%" height="174px" radius="10"></u--image>
|
||||
<view class="good_title u-line-2 coreshop-min-height-34">
|
||||
{{item.name}}
|
||||
<view class="coreshop-margin-left-16 coreshop-margin-right-16 index-goods coreshop-margin-top-10" v-if="shopRecommendData.length > 0">
|
||||
<custom-waterfalls-flow :value="shopRecommendData" @wapperClick="wapperClick" @imageClick="imageClick">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="goods" v-for="(item,index) in shopRecommendData" :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-title-294 coreshop-multiple-line-clamp">
|
||||
<!--<image class="coreshop-image-price-tags" src="https://files.cdn.coreshop.cn/static/icon/icon-tag-vip-discount.png"></image>-->
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="good-price">
|
||||
{{item.price}}元 <span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-15 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<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">{{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 class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" 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}}元
|
||||
</view>
|
||||
</view>
|
||||
<view class="good-tag-hot" v-if="item.isHot">
|
||||
热门
|
||||
<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>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</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-title-294 coreshop-multiple-line-clamp">
|
||||
<!--<image class="coreshop-image-price-tags" src="https://files.cdn.coreshop.cn/static/icon/icon-tag-vip-discount.png"></image>-->
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<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">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">{{item.buyCount+'人付款'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" 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}}元
|
||||
</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>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- #endif -->
|
||||
</custom-waterfalls-flow>
|
||||
</view>
|
||||
|
||||
<!--占位底部距离-->
|
||||
@@ -298,7 +354,7 @@
|
||||
</view>
|
||||
|
||||
<view class="coreshop-border-radius-20 coreshop-flex coreshop-align-end coreshop-flex-sub">
|
||||
<view class="btn-add-shopcar" @click="openSkuPopup">
|
||||
<view class="btn-add-shopcar" @click="openSkuPopup">
|
||||
<text>加入购物车</text>
|
||||
</view>
|
||||
<view class="btn-buy" @click="openSkuPopup">
|
||||
@@ -502,6 +558,12 @@
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
wapperClick(item) {
|
||||
this.goGoodsDetail(item.id)
|
||||
},
|
||||
imageClick(item) {
|
||||
this.goGoodsDetail(item.id)
|
||||
},
|
||||
// 打开sku弹出
|
||||
openSkuPopup() {
|
||||
this.skuKey = true;
|
||||
|
||||
@@ -140,34 +140,91 @@
|
||||
</view>
|
||||
|
||||
<!--为您推荐-->
|
||||
<view class="coreshop-margin-top-16 coreshop-margin-bottom-12 coreshop-flex coreshop-justify-center coreshop-align-center">
|
||||
<view class="coreshop-margin-top-16 coreshop-margin-bottom-12 coreshop-flex coreshop-justify-center coreshop-align-center" v-if="shopRecommendData.length > 0">
|
||||
<view class="line-70"></view>
|
||||
<view class="coreshop-margin-left-12 coreshop-margin-right-12 coreshop-text-gray">为您推荐</view>
|
||||
<view class="line-70"></view>
|
||||
</view>
|
||||
<!--推荐列表-->
|
||||
<view class="coreshop-goods-group" v-if="shopRecommendData.length>0">
|
||||
<u-grid col="2" :border="false" align="left">
|
||||
<u-grid-item bg-color="transparent" :custom-style="{padding: '0px'}" v-for="(item, index) in shopRecommendData" :key="index" @click="goGoodsDetail(item.id)">
|
||||
<view class="good_box">
|
||||
<u--image :src="item.image" mode="widthFix" width="100%" height="174px" radius="10"></u--image>
|
||||
<view class="good_title u-line-2 coreshop-min-height-34">
|
||||
{{item.name}}
|
||||
<view class="coreshop-margin-left-16 coreshop-margin-right-16 index-goods coreshop-margin-top-10" v-if="shopRecommendData.length > 0">
|
||||
<custom-waterfalls-flow :value="shopRecommendData" @wapperClick="wapperClick" @imageClick="imageClick">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="goods" v-for="(item,index) in shopRecommendData" :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-title-294 coreshop-multiple-line-clamp">
|
||||
<!--<image class="coreshop-image-price-tags" src="https://files.cdn.coreshop.cn/static/icon/icon-tag-vip-discount.png"></image>-->
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="good-price">
|
||||
{{item.price}}元 <span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-15 coreshop-text-gray">{{item.mktprice}}元</span>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<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">{{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 class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" 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}}元
|
||||
</view>
|
||||
</view>
|
||||
<view class="good-tag-hot" v-if="item.isHot">
|
||||
热门
|
||||
<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>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</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-title-294 coreshop-multiple-line-clamp">
|
||||
<!--<image class="coreshop-image-price-tags" src="https://files.cdn.coreshop.cn/static/icon/icon-tag-vip-discount.png"></image>-->
|
||||
<text class="coreshop-font-14">{{item.name}}</text>
|
||||
</view>
|
||||
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
||||
<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">{{item.mktprice}}元</span>
|
||||
</view>
|
||||
<view>
|
||||
<text class="coreshop-font-10 coreshop-text-gray">{{item.buyCount+'人付款'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" 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}}元
|
||||
</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>
|
||||
购买赠送:
|
||||
</view>
|
||||
<view class="coreshop-text-red">
|
||||
{{item.points}}{{ pointShowName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- #endif -->
|
||||
</custom-waterfalls-flow>
|
||||
</view>
|
||||
|
||||
|
||||
<!--占位底部距离-->
|
||||
<view class="coreshop-tabbar-height" />
|
||||
<!--底部操作-->
|
||||
@@ -223,6 +280,12 @@
|
||||
this.getGoodsRecommendList();
|
||||
},
|
||||
methods: {
|
||||
wapperClick(item) {
|
||||
this.goGoodsDetail(item.id)
|
||||
},
|
||||
imageClick(item) {
|
||||
this.goGoodsDetail(item.id)
|
||||
},
|
||||
onChange(e) {
|
||||
this.timeData = e
|
||||
},
|
||||
|
||||
@@ -701,3 +701,11 @@ u-icon { line-height: 0; }
|
||||
&__item { color: #606266; font-size: 15px; margin-right: 4px; }
|
||||
}
|
||||
|
||||
|
||||
/*商品瀑布流列表*/
|
||||
.cate-list { padding-left: 23rpx; padding-right: 20rpx; }
|
||||
.cate-list .item { margin-bottom: 32rpx; margin-right: 20rpx; text-align: center; }
|
||||
.cate-list .item:nth-child(5n) { margin-right: 0rpx; }
|
||||
.index-goods .goods { -webkit-column-break-inside: avoid; border-radius: 18rpx; break-inside: avoid; margin-bottom: 24rpx; width: 326rpx; }
|
||||
.coreshop-title-294 { width: 294rpx; }
|
||||
.coreshop-image-price-tags { height: 32rpx; margin-bottom: 4rpx; margin-right: 12rpx; vertical-align: middle; width: 98rpx; }
|
||||
@@ -0,0 +1,17 @@
|
||||
## 1.0.7（2022-05-26）
|
||||
1. 优化局部改变数据更新问题，避免重新加载数据，只改变局部
|
||||
## 1.0.6（2022-04-18）
|
||||
1. 修改tab快速切换时会出现的BUG
|
||||
## 1.0.5（2022-04-18）
|
||||
1. 修复可能存在数据错误的BUG；
|
||||
2. 兼容，今后可以无需调用refresh()就可以更新数据；
|
||||
## 1.0.4（2022-04-18）
|
||||
1. 修复BUG；
|
||||
## 1.0.3（2022-04-15）
|
||||
1. 优化代码；
|
||||
2. 修改懒加载数据存在的BUG；
|
||||
## 1.0.1（2022-03-11）
|
||||
1. 增加隐藏图片字段的键名字段hideImageKey，默认hide
|
||||
2. 支持在列表中配置hide参数进行隐藏图片
|
||||
## 1.0.0（2022-03-09）
|
||||
使用最简单的思想实现瀑布流
|
||||
@@ -0,0 +1,323 @@
|
||||
<template>
|
||||
<view class="waterfalls-flow">
|
||||
<view v-for="(item,index) in data.column" :key="index" class="waterfalls-flow-column" :id="`waterfalls_flow_column_${index+1}`" :msg="msg" :style="{'width':w,'margin-left':index==0?0:m}">
|
||||
<view :class="['column-value',{'column-value-show':item2.o}]" v-for="(item2,index2) in columnValue(index)" :key="index2" :style="[s1]" @click.stop="wapperClick(item2)">
|
||||
<view class="inner" v-if="data.seat==1">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<!-- #ifdef VUE2 -->
|
||||
<slot name="slot{{item2.index}}"></slot>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef VUE3 -->
|
||||
<slot :name="`slot${item2.index}`"></slot>
|
||||
<!-- #endif -->
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<slot v-bind="item2"></slot>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<image :class="['img',{'img-hide':item2[hideImageKey]==true||item2[hideImageKey]==1},{'img-error':!item2[data.imageKey]}]" :src="item2[data.imageKey]" mode="widthFix" @load="imgLoad(item2,index+1)" @error="imgError(item2,index+1)" @click.stop="imageClick(item2)"></image>
|
||||
<view class="inner" v-if="data.seat==2">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<!-- #ifdef VUE2 -->
|
||||
<slot name="slot{{item2.index}}"></slot>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef VUE3 -->
|
||||
<slot :name="`slot${item2.index}`"></slot>
|
||||
<!-- #endif -->
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<slot v-bind="item2"></slot>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: Array,
|
||||
column: { // 列的数量
|
||||
type: [String, Number],
|
||||
default: 2
|
||||
},
|
||||
maxColumn: { // 最大列数
|
||||
type: [String, Number],
|
||||
default: 5
|
||||
},
|
||||
columnSpace: { // 列之间的间距 百分比
|
||||
type: [String, Number],
|
||||
default: 2
|
||||
},
|
||||
imageKey: { // 图片key
|
||||
type: [String],
|
||||
default: 'image'
|
||||
},
|
||||
hideImageKey: { // 隐藏图片key
|
||||
type: [String],
|
||||
default: 'hide'
|
||||
},
|
||||
seat: { // 文本的位置，1图片之上 2图片之下
|
||||
type: [String, Number],
|
||||
default: 2
|
||||
},
|
||||
listStyle: { // 单个展示项的样式：eg:{'background':'red'}
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: {
|
||||
list: this.value ? this.value : [],
|
||||
column: this.column < 2 ? 2 : this.column,
|
||||
columnSpace: this.columnSpace <= 5 ? this.columnSpace : 5,
|
||||
imageKey: this.imageKey,
|
||||
seat: this.seat
|
||||
},
|
||||
msg: 0,
|
||||
listInitStyle: {
|
||||
'border-radius': '12rpx',
|
||||
'margin-bottom': '20rpx',
|
||||
'background-color': '#fff'
|
||||
},
|
||||
adds: [], //预置数据
|
||||
isLoaded: true,
|
||||
curIndex: 0,
|
||||
isRefresh: true,
|
||||
flag: false,
|
||||
refreshDatas: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 计算列宽
|
||||
w() {
|
||||
const column_rate = `${100 / this.data.column - (+this.data.columnSpace)}%`;
|
||||
return column_rate;
|
||||
},
|
||||
// 计算margin
|
||||
m() {
|
||||
const column_margin = `${(100-(100 / this.data.column - (+this.data.columnSpace)).toFixed(5)*this.data.column)/(this.data.column-1)}%`;
|
||||
return column_margin;
|
||||
},
|
||||
// list样式
|
||||
s1() {
|
||||
return { ...this.listInitStyle, ...this.listStyle };
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 初始化
|
||||
this.refresh();
|
||||
},
|
||||
methods: {
|
||||
// 预加载图片
|
||||
loadImages(idx = 0) {
|
||||
let count = 0;
|
||||
const newList = this.data.list.filter((item, index) => index >= idx);
|
||||
for (let i = 0; i < newList.length; i++) {
|
||||
// #ifndef APP-PLUS
|
||||
uni.getImageInfo({
|
||||
src: `${newList[i][this.imageKey]}.jpg`,
|
||||
complete: res => {
|
||||
count++;
|
||||
if (count == newList.length) this.initValue(idx);
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
plus.io.getImageInfo({
|
||||
src: `${newList[i][this.imageKey]}.jpg`,
|
||||
complete: res => {
|
||||
count++;
|
||||
if (count == newList.length) this.initValue(idx);
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
// 刷新
|
||||
refresh() {
|
||||
if (!this.isLoaded) {
|
||||
this.refreshDatas = this.value;
|
||||
return false;
|
||||
};
|
||||
setTimeout(() => {
|
||||
this.refreshDatas = [];
|
||||
this.isRefresh = true;
|
||||
this.adds = [];
|
||||
this.data.list = this.value ? this.value : [];
|
||||
this.data.column = this.column < 2 ? 2 : this.column >= this.maxColumn ? this.maxColumn : this.column;
|
||||
this.data.columnSpace = this.columnSpace <= 5 ? this.columnSpace : 5;
|
||||
this.data.imageKey = this.imageKey;
|
||||
this.data.seat = this.seat;
|
||||
this.curIndex = 0;
|
||||
// 每列的数据初始化
|
||||
for (let i = 1; i <= this.data.column; i++) {
|
||||
this.data[`column_${i}_values`] = [];
|
||||
this.msg++;
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.initValue(this.curIndex, 'refresh==>');
|
||||
})
|
||||
}, 1)
|
||||
},
|
||||
columnValue(index) {
|
||||
return this.data[`column_${index+1}_values`];
|
||||
},
|
||||
change(newValue) {
|
||||
for (let i = 0; i < this.data.list.length; i++) {
|
||||
const cv = this.data[`column_${this.data.list[i].column}_values`];
|
||||
for (let j = 0; j < cv.length; j++) {
|
||||
if (newValue[i] && i === cv[j].index) {
|
||||
this.data[`column_${this.data.list[i].column}_values`][j] = Object.assign(cv[j], newValue[i]);
|
||||
this.msg++;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
getMin(a, s) {
|
||||
let m = a[0][s];
|
||||
let mo = a[0];
|
||||
for (var i = a.length - 1; i >= 0; i--) {
|
||||
if (a[i][s] < m) {
|
||||
m = a[i][s];
|
||||
}
|
||||
}
|
||||
mo = a.filter(i => i[s] == m);
|
||||
return mo[0];
|
||||
},
|
||||
// 计算每列的高度
|
||||
getMinColumnHeight() {
|
||||
return new Promise(resolve => {
|
||||
const heightArr = [];
|
||||
for (let i = 1; i <= this.data.column; i++) {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select(`#waterfalls_flow_column_${i}`).boundingClientRect(data => {
|
||||
heightArr.push({ column: i, height: data.height });
|
||||
}).exec(() => {
|
||||
if (this.data.column <= heightArr.length) {
|
||||
resolve(this.getMin(heightArr, 'height'));
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
async initValue(i, from) {
|
||||
this.isLoaded = false;
|
||||
if (i >= this.data.list.length || this.refreshDatas.length) {
|
||||
this.msg++;
|
||||
this.loaded();
|
||||
return false;
|
||||
}
|
||||
const minHeightRes = await this.getMinColumnHeight();
|
||||
const c = this.data[`column_${minHeightRes.column}_values`];
|
||||
this.data.list[i].column = minHeightRes.column;
|
||||
c.push({ ...this.data.list[i], cIndex: c.length, index: i, o: 0 });
|
||||
this.msg++;
|
||||
},
|
||||
// 图片加载完成
|
||||
imgLoad(item, c) {
|
||||
const i = item.index;
|
||||
item.o = 1;
|
||||
this.$set(this.data[`column_${c}_values`], item.cIndex, JSON.parse(JSON.stringify(item)));
|
||||
this.initValue(i + 1);
|
||||
},
|
||||
// 图片加载失败
|
||||
imgError(item, c) {
|
||||
const i = item.index;
|
||||
item.o = 1;
|
||||
item[this.data.imageKey] = null;
|
||||
this.$set(this.data[`column_${c}_values`], item.cIndex, JSON.parse(JSON.stringify(item)));
|
||||
this.initValue(i + 1);
|
||||
},
|
||||
// 渲染结束
|
||||
loaded() {
|
||||
if (this.refreshDatas.length) {
|
||||
this.isLoaded = true;
|
||||
this.refresh();
|
||||
return false;
|
||||
}
|
||||
this.curIndex = this.data.list.length;
|
||||
if (this.adds.length) {
|
||||
this.data.list = this.adds[0];
|
||||
this.adds.splice(0, 1);
|
||||
this.initValue(this.curIndex);
|
||||
} else {
|
||||
if (this.data.list.length) this.$emit('loaded');
|
||||
this.isLoaded = true;
|
||||
this.isRefresh = false;
|
||||
}
|
||||
},
|
||||
// 单项点击事件
|
||||
wapperClick(item) {
|
||||
this.$emit('wapperClick', item);
|
||||
},
|
||||
// 图片点击事件
|
||||
imageClick(item) {
|
||||
this.$emit('imageClick', item);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
deep: true,
|
||||
handler(newValue, oldValue) {
|
||||
setTimeout(() => {
|
||||
this.$nextTick(() => {
|
||||
if (this.isRefresh) return false;
|
||||
if (this.isLoaded) {
|
||||
// if (newValue.length <= this.curIndex) return this.refresh();
|
||||
if (newValue.length <= this.curIndex) return this.change(newValue);
|
||||
this.data.list = newValue;
|
||||
this.$nextTick(() => {
|
||||
this.initValue(this.curIndex, 'watch==>');
|
||||
})
|
||||
} else {
|
||||
this.adds.push(newValue);
|
||||
}
|
||||
})
|
||||
}, 10)
|
||||
}
|
||||
},
|
||||
column(newValue) {
|
||||
this.refresh();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.waterfalls-flow {
|
||||
overflow: hidden;
|
||||
|
||||
&-column {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.column-value {
|
||||
width: 100%;
|
||||
font-size: 0;
|
||||
overflow: hidden;
|
||||
transition: opacity .4s;
|
||||
opacity: 0;
|
||||
|
||||
&-show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.inner {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
|
||||
&-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-error {
|
||||
background: #f2f2f2 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAiAQMAAAAatXkPAAAABlBMVEUAAADMzMzIT8AyAAAAAXRSTlMAQObYZgAAAIZJREFUCNdlzjEKwkAUBNAfEGyCuYBkLyLuxRYW2SKlV1JSeA2tUiZg4YrLjv9PGsHqNTPMSAQuyAJgRDHSyvBPwtZoSJXakeJI9iuRLGDygdl6V0yKDtyMAeMPZySj8yfD+UapvRPj2JOwkyAooSV5IwdDjPdCPspe8LyTl9IKJvDETKKRv6vnlUasgg0fAAAAAElFTkSuQmCC) no-repeat center center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,81 @@
|
||||
{
|
||||
"id": "custom-waterfalls-flow",
|
||||
"displayName": "瀑布流 灵活配置 简单易用 兼容vue2vue3小程序、H5、app等多端",
|
||||
"version": "1.0.7",
|
||||
"description": "瀑布流，根据内容自动计算进行流式布局，简单参数配置，实现兼容多端及vue2和vue3的瀑布流布局",
|
||||
"keywords": [
|
||||
"瀑布流",
|
||||
"瀑布流式布局"
|
||||
],
|
||||
"repository": "https://gitee.com/my_dear_li_pan/my-uni-modules.git",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.3.11"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "n"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "u",
|
||||
"Edge": "u",
|
||||
"Firefox": "y",
|
||||
"Safari": "u"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "u",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,445 @@
|
||||
- <a href="#c1" title="概要">概要</a>
|
||||
- <a href="#c2" title="支持的平台">支持的平台</a>
|
||||
- <a href="#c3" title="使用方式">使用方式</a>
|
||||
- <a href="#c4" title="属性说明">属性说明</a>
|
||||
- <a href="#c5" title="事件说明">事件说明</a>
|
||||
- <a href="#c6" title="组件方法">组件方法</a>
|
||||
- <a href="#c7" title="refresh的使用示例">refresh的使用示例</a>
|
||||
- <a href="#c8" title="隐藏单项图片示例">隐藏单项图片示例</a>
|
||||
- <a href="#c9" title="完整示例">完整示例</a>
|
||||
- <a href="#c10" title="温馨提示">温馨提示</a>
|
||||
- <a href="#c11" title="关注我，不迷路">关注我，不迷路</a>
|
||||
- <a href="#c12" title="个人作品展示">个人作品展示</a>
|
||||
|
||||
<div id="c1"></div>
|
||||
|
||||
#### 概要
|
||||
|
||||
custom-waterfalls-flow是一个瀑布流插件，灵活配置、简单易用、兼容多端、同时兼容vue2和vue3。
|
||||
|
||||
最近在做项目的时候需要用到瀑布流，于是在插件市场找了一些，下载量最高的是用了定位来做的，我认为瀑布流可以不用定位去实现，于是我就自己写了该插件。经过反复的测试优化，最终搞定！
|
||||
|
||||
**设置列数：** 瀑布流的列数可以通过参数直接控制，实时监听，随改随生效。列数最小为2，最大默认为5，可以通过maxColumn参数去控制最大列数，理论上可以设置无限大，具体值自己拿捏。
|
||||
|
||||
**更新数据：** 瀑布流的每项数据，可以直接通过修改value，随改随生效，这样可以实现加载更多数据。已经渲染过的数据不会再次渲染，每次只会渲染新增的数据，这样避免了数据越多渲染越慢的情况。可以调用组件的```refresh()```方法进行数据刷新，注意vue2和vue3中调用子组件的方法有区别，也会在下面进行说明。
|
||||
|
||||
**展示方式：** 瀑布流可以是纯图片，可以使用插槽自定义文字描述，微信小程序与app、h5使用会有些区别，也会在下面具体说明。内容高度及排序都不用担心，会根据每项的内容高度自动计算。
|
||||
|
||||
**实现思路：** 通过配置列数，先渲染出每列，再计算每列的高度，最小的那列就加入一条数据进行渲染，然后再重复计算每列，高度小的加入数据...其实思路是很简单的。
|
||||
|
||||
uniapp插件市场地址：[https://ext.dcloud.net.cn/plugin?id=7594](https://ext.dcloud.net.cn/plugin?id=7594)
|
||||
|
||||
<div id="c2"></div>
|
||||
|
||||
#### 支持的平台
|
||||
|
||||
H5、app、微信小程序（这三个平台经过反复测试优化，兼容vue2和vue3）。
|
||||
|
||||
百度小程序：由于插槽不能循环渲染的限制，只支持纯图片瀑布流。
|
||||
|
||||
其他小程序：暂未测试，需要的可以自己测试和修改，思路肯定是没错的，主要是兼容插槽的问题。
|
||||
|
||||
nvue：暂不支持，后期可能会支持，目前需要的可以自己修改源码。
|
||||
|
||||
<div id="c3"></div>
|
||||
|
||||
#### 使用方式
|
||||
|
||||
**1、导入插件**
|
||||
|
||||
该组件符合uni_modules规范，使用Hbuilderx导入插件，导入到项目根目录中的uni_modules文件夹中。
|
||||
|
||||
**2、template中使用**
|
||||
|
||||
uni_modules规范在项目页面中直接使用，不需要单独引入注册组件。
|
||||
|
||||
***纯图片瀑布流使用***
|
||||
|
||||
```
|
||||
<template>
|
||||
<custom-waterfalls-flow :value="data.list"></custom-waterfalls-flow>
|
||||
</template>
|
||||
```
|
||||
|
||||
***微信小程序自定义内容使用***
|
||||
|
||||
微信小程序没有动态模板，使用for循环的方式进行渲染。
|
||||
|
||||
```
|
||||
<template>
|
||||
<custom-waterfalls-flow :value="data.list">
|
||||
<view class="item" v-for="(item,index) in data.list" :key="index" slot="slot{{index}}">
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="desc">{{item.desc}}</view>
|
||||
</view>
|
||||
</custom-waterfalls-flow>
|
||||
</template>
|
||||
```
|
||||
|
||||
***h5、app端自定义内容使用***
|
||||
|
||||
使用作用域插槽实现
|
||||
|
||||
```
|
||||
<template>
|
||||
<custom-waterfalls-flow :value="data.list">
|
||||
<template v-slot:default="item">
|
||||
<view class="item">
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="desc">{{item.desc}}</view>
|
||||
</view>
|
||||
</template>
|
||||
</custom-waterfalls-flow>
|
||||
</template>
|
||||
```
|
||||
|
||||
***小程序、h5、app等多端自定义内容使用***
|
||||
|
||||
条件渲染-多端同时兼容
|
||||
|
||||
```
|
||||
<template>
|
||||
<custom-waterfalls-flow :value="data.list">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="item" v-for="(item,index) in data.list" :key="index" slot="slot{{index}}">
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="desc">{{item.desc}}</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<template v-slot:default="item">
|
||||
<view class="item">
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="desc">{{item.desc}}</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- #endif -->
|
||||
</custom-waterfalls-flow>
|
||||
</template>
|
||||
```
|
||||
|
||||
<div id="c4"></div>
|
||||
|
||||
#### 属性说明
|
||||
|
||||
参数|说明|类型|是否必填|可选值|默认值
|
||||
-|-|-|-|-|-|
|
||||
value|渲染的列表|Array|是|-|-
|
||||
column|列数|Number|否|2-maxColumn|2
|
||||
maxColumn|最大列数|Number|否|>2|5
|
||||
columnSpace|列之间的间距（单位是百分比）|Number|否|-|2
|
||||
imageKey|列表中的图片字段的键名|String|否|-|image
|
||||
hideImageKey|隐藏图片字段的键名|String|否|-|hide
|
||||
seat|自定义文字的位置,1-图片上方，2-图片下方|Number|否|1/2|2
|
||||
listStyle|单个展示项的样式|Object|否|示例：```{'background':'red'}```|-
|
||||
|
||||
<div id="c5"></div>
|
||||
|
||||
#### 事件说明
|
||||
|
||||
事件名称|说明|回调参数
|
||||
-|-|-|
|
||||
@loaded|图片加载完成事件|-
|
||||
@wapperClick|单项点击事件|单项对应参数
|
||||
@imageClick|图片点击事件|单项对应参数
|
||||
|
||||
<div id="c6"></div>
|
||||
|
||||
#### 组件方法
|
||||
|
||||
事件名称|说明|参数|使用场景
|
||||
-|-|-|-
|
||||
refresh|刷新数据，数据初始化，vue2中使用：```this.$refs.waterfallsFlowRef.refresh();```；vue3中使用：```const waterfallsFlowRef = ref(null);waterfallsFlowRef.value.refresh();```|-|下拉刷新等
|
||||
|
||||
<div id="c7"></div>
|
||||
|
||||
#### refresh的使用示例
|
||||
|
||||
***vue2中使用***
|
||||
|
||||
```
|
||||
<template>
|
||||
<view>
|
||||
<button class="btn" type="default" @click="reset()">刷新数据</button>
|
||||
<custom-waterfalls-flow ref="waterfallsFlowRef" :value="data.list"></custom-waterfalls-flow>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data:{
|
||||
list: [
|
||||
{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' },
|
||||
{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
reset(){
|
||||
this.data.list = [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }]
|
||||
this.$refs.waterfallsFlowRef.refresh();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
***vue3中使用***
|
||||
|
||||
```
|
||||
<template>
|
||||
<view>
|
||||
<button class="btn" type="default" @click="reset()">刷新数据</button>
|
||||
<custom-waterfalls-flow ref="waterfallsFlowRef" :value="data.list"></custom-waterfalls-flow>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
const data = reactive({
|
||||
list: [
|
||||
{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' },
|
||||
{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' }
|
||||
]
|
||||
});
|
||||
const waterfallsFlowRef = ref(null);
|
||||
function reset(){
|
||||
data.list = [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }]
|
||||
waterfallsFlowRef.value.refresh();
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
<div id="c8"></div>
|
||||
|
||||
#### 隐藏单项图片示例
|
||||
|
||||
在数据列表中配置```hide:true```或者```hide:1```，就可以达到不显示图片的效果。支持使用参数hideImageKey自定义键名称，那就使用：```定义的键名称:true```或者```定义的键名称:1```。
|
||||
|
||||
```
|
||||
<template>
|
||||
<custom-waterfalls-flow :value="data.list">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="item" v-for="(item,index) in data.list" :key="index" slot="slot{{index}}">
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="desc">{{item.desc}}</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<template v-slot:default="item">
|
||||
<view class="item">
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="desc">{{item.desc}}</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- #endif -->
|
||||
</custom-waterfalls-flow>
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
const data = reactive({
|
||||
list: [
|
||||
{ image: 'https://via.placeholder.com/200x500.png/ff0000',
|
||||
hide:1,title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' },
|
||||
{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' }
|
||||
]
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
<div id="c9"></div>
|
||||
|
||||
#### 完整示例
|
||||
|
||||
```
|
||||
<template>
|
||||
<view style="padding: 0 10rpx;">
|
||||
<view class="handle">
|
||||
<button class="btn" type="default" @click="add()">增加数据</button>
|
||||
<button class="btn" type="default" @click="changeColumn(1)">+列数({{column}})</button>
|
||||
<button class="btn" type="default" @click="changeColumn(0)">-列数({{column}})</button>
|
||||
<button class="btn" type="default" @click="reset()">刷新数据</button>
|
||||
</view>
|
||||
<custom-waterfalls-flow ref="waterfallsFlowRef" :value="data.list" :column="column" :columnSpace="1.5" :seat="2" @wapperClick="wapperClick" @imageClick="imageClick" @loaded="loaded">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="item" v-for="(item,index) in data.list" :key="index" slot="slot{{index}}">
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="desc">{{item.desc}}</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<template v-slot:default="item">
|
||||
<view class="item">
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="desc">{{item.desc}}</view>
|
||||
</view>
|
||||
</template>
|
||||
<!-- #endif -->
|
||||
</custom-waterfalls-flow>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
// #ifdef VUE3
|
||||
import { reactive, ref, onMounted } from 'vue';
|
||||
const data = reactive({
|
||||
list: [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' },
|
||||
{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' },
|
||||
{ image: 'https://via.placeholder.com/200x100.png/FFB6C1', title: '我是标题3', desc: '描述描述描述描述描述描述描述描述3' },
|
||||
{ image: 'https://via.placeholder.com/200x300.png/9400D3', title: '我是标题4', desc: '描述描述描述描述描述描述描述描述4' },
|
||||
{ image: 'https://via.placeholder.com/100x240.png/B0E0E6', title: '我是标题5', desc: '描述描述描述描述描述描述描述描述5' },
|
||||
{ image: 'https://via.placeholder.com/140x280.png/7FFFAA', title: '我是标题6', desc: '描述描述描述描述描述描述描述描述6' },
|
||||
{ image: 'https://via.placeholder.com/40x60.png/EEE8AA', title: '我是标题7', desc: '描述描述描述描述描述描述描述描述7' }]
|
||||
});
|
||||
const column = ref(3);
|
||||
|
||||
function add() {
|
||||
const newArr = [{ image: 'https://via.placeholder.com/58x100.png/FF7F50', title: '我是标题8', desc: '描述描述描述描述描述描述描述描述8' },
|
||||
{ image: 'https://via.placeholder.com/59x100.png/C0C0C0', title: '我是标题9', desc: '描述描述描述描述描述描述描述描述9' },
|
||||
{ image: 'https://via.placeholder.com/60x100.png/FAEBD7', title: '我是标题10', desc: '描述描述描述描述描述描述描述描述10' }];
|
||||
data.list = data.list.concat(newArr);
|
||||
}
|
||||
|
||||
function changeColumn(h) {
|
||||
column.value = !h ? column.value - 1 : column.value + 1;
|
||||
}
|
||||
|
||||
function loaded() {
|
||||
console.log('加载完成')
|
||||
}
|
||||
|
||||
function wapperClick(item) {
|
||||
console.log('单项点击事件', item)
|
||||
}
|
||||
|
||||
function imageClick(item) {
|
||||
console.log('图片点击事件', item)
|
||||
}
|
||||
const waterfallsFlowRef = ref(null);
|
||||
|
||||
function reset() {
|
||||
data.list = [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }]
|
||||
waterfallsFlowRef.value.refresh();
|
||||
}
|
||||
// #endif
|
||||
</script>
|
||||
<script>
|
||||
// #ifdef VUE2
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: {
|
||||
list: [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' },
|
||||
{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' },
|
||||
{ image: 'https://via.placeholder.com/200x100.png/FFB6C1', title: '我是标题3', desc: '描述描述描述描述描述描述描述描述3' },
|
||||
{ image: 'https://via.placeholder.com/200x300.png/9400D3', title: '我是标题4', desc: '描述描述描述描述描述描述描述描述4' },
|
||||
{ image: 'https://via.placeholder.com/100x240.png/B0E0E6', title: '我是标题5', desc: '描述描述描述描述描述描述描述描述5' },
|
||||
{ image: 'https://via.placeholder.com/140x280.png/7FFFAA', title: '我是标题6', desc: '描述描述描述描述描述描述描述描述6' },
|
||||
{ image: 'https://via.placeholder.com/40x60.png/EEE8AA', title: '我是标题7', desc: '描述描述描述描述描述描述描述描述7' }]
|
||||
},
|
||||
column: 3
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add() {
|
||||
const newArr = [{ image: 'https://via.placeholder.com/58x100.png/FF7F50', title: '我是标题8', desc: '描述描述描述描述描述描述描述描述8' },
|
||||
{ image: 'https://via.placeholder.com/59x100.png/C0C0C0', title: '我是标题9', desc: '描述描述描述描述描述描述描述描述9' },
|
||||
{ image: 'https://via.placeholder.com/60x100.png/FAEBD7', title: '我是标题10', desc: '描述描述描述描述描述描述描述描述10' }]
|
||||
this.data.list = this.data.list.concat(newArr);
|
||||
},
|
||||
changeColumn(h) {
|
||||
this.column = !h ? this.column - 1 : this.column + 1;
|
||||
},
|
||||
loaded() {
|
||||
console.log('加载完成')
|
||||
},
|
||||
wapperClick(item) {
|
||||
console.log('单项点击事件', item)
|
||||
},
|
||||
imageClick(item) {
|
||||
console.log('图片点击事件', item)
|
||||
},
|
||||
reset() {
|
||||
this.data.list = [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }]
|
||||
this.$refs.waterfallsFlowRef.refresh();
|
||||
}
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
</script>
|
||||
<style>
|
||||
page {
|
||||
background-color: #f2f5f9;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.handle {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 10rpx;
|
||||
|
||||
.btn {
|
||||
margin: 20rpx 10rpx;
|
||||
padding: 0 20rpx;
|
||||
background: #2878FF;
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
|
||||
&::after {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 10rpx 10rpx 20rpx;
|
||||
|
||||
.title {
|
||||
line-height: 48rpx;
|
||||
font-size: 28rpx;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
<div id="c10"></div>
|
||||
|
||||
#### 温馨提示
|
||||
|
||||
1、该插件反复测试过微信小程序、h5、app-vue三个端，vue2和vue3都兼容，其他端可能需要测试改进。
|
||||
|
||||
2、该插件的使用hbuilderx版本最好升级到较新版本，我开发的版本是hbuilderx3.3.11.20220209。
|
||||
|
||||
3、对此插件或相关问题有好的建议，可以直接在评论区进行讨论。
|
||||
|
||||
4、希望遇到问题不要喷，也不要骂人，其实这种心情我能理解，写该插件也不是一时半会就完成了的，所以希望互相理解。只要有问题，我会第一时间回复解决。
|
||||
|
||||
5、对此插件有任何问题的可以在下方留言，我会第一时间回复和解决问题。还可以加QQ群进行前端技术交流 568984539，加群备注‘地区-名字-技术类型’。
|
||||
|
||||
#### 最后我想说：认为该插件对你有帮助的，记得收藏、好评，这样可以帮助到更多人哟！
|
||||
|
||||
---
|
||||
|
||||
<div id="c11"></div>
|
||||
|
||||
#### 关注我，不迷路
|
||||
|
||||
如果任何疑问的可以在评论区留言，还可以加QQ群交流：568984539，加群备注‘地区-名字-技术类型’。
|
||||
|
||||
更多前端等相关知识可关注我个人博客：https://blog.csdn.net/qq_42961150?spm=1011.2124.3001.5343
|
||||
|
||||
<div id="c12"></div>
|
||||
|
||||
#### 个人作品展示
|
||||
|
||||
uniapp+vue3.2+unicloud开发微信小程序：**皮皮虎去水印**。
|
||||
|
||||
关注下方公众号：【**全网免费网盘资源**】、【**美团外卖饿了么天天领红包**】、【**去水印**】
|
||||
|
||||
|
||||
Reference in New Issue
Block a user