You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
782 lines
33 KiB
782 lines
33 KiB
<template>
|
|
<view :style="[boxStyle]">
|
|
<view>
|
|
<!-- 单列 -->
|
|
<view v-if="goodStyleConfig == 0">
|
|
<view class="w-full flex justify-between item bg--w111-fff p-20 rd-16rpx"
|
|
v-for="(item,index) in tempArr" :key="index"
|
|
@tap="goDetail(item)">
|
|
<easy-loadimage
|
|
:image-src="item.image"
|
|
:borderSrc="item.activity_frame.image"
|
|
width="224rpx"
|
|
height="224rpx"
|
|
:borderRadius="imgStyle"></easy-loadimage>
|
|
<view class="flex-1 flex-col justify-between pl-20">
|
|
<view class="w-full fs-28 h-80 lh-40rpx line2"
|
|
v-if="checkboxInfo.includes(0)" :style="[productStyle]">{{item.store_name}}</view>
|
|
<view class="flex items-end flex-wrap mt-8 w-full" v-if="checkboxInfo.includes(1)">
|
|
<BaseTag
|
|
:text="label.label_name"
|
|
:color="label.color"
|
|
:background="label.bg_color"
|
|
:borderColor="label.border_color"
|
|
:circle="label.border_color ? true : false"
|
|
:imgSrc="label.icon"
|
|
v-for="(label, idx) in item.store_label" :key="idx"></BaseTag>
|
|
</view>
|
|
<view class="flex-between-center" v-if="onlyShowPrice">
|
|
<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
|
|
:color="priceColor"></baseMoney>
|
|
<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
|
|
<view class="w-96 h-56 rd-28rpx flex-center fs-24 text--w111-fff"
|
|
v-if="btnStyle == 0" :style="[btnBgColor]">购买</view>
|
|
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else-if="btnStyle == 1">
|
|
<view class="flex-center cart-btn">
|
|
<text class="iconfont icon-ic_increase fs-26"></text>
|
|
</view>
|
|
</view>
|
|
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
|
|
<view class="flex-center cart-btn">
|
|
<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-else>
|
|
<view class="flex-y-center mt-4">
|
|
<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
|
|
:color="priceColor" v-if="checkboxInfo.includes(2)"></baseMoney>
|
|
<view class="inline-block h-26 lh-28rpx rd-14rpx bg--w111-F7E9CD fs-22 ml-8"
|
|
v-if="Number(item.vip_price) > 0 && item.is_vip && checkboxInfo.includes(5)">
|
|
<text class="inline-block h-26 lh-28rpx svip_rd fs-18 bg--w111-484643 text--w111-FDDAA4 px-8">SVIP</text>
|
|
<text class="px-8 fs-22">¥{{item.vip_price}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="flex justify-between items-end">
|
|
<view class="flex-y-center">
|
|
<text class="fs-22 text--w111-999" v-if="checkboxInfo.includes(3)">已售{{item.sales}}{{item.unit_name}}</text>
|
|
<text class="fs-22 text--w111-999 pl-16" v-if="checkboxInfo.includes(4)">评分{{item.star}}</text>
|
|
</view>
|
|
<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
|
|
<view class="w-96 h-56 rd-28rpx flex-center fs-24 text--w111-fff"
|
|
v-if="btnStyle == 0" :style="[btnBgColor]">购买</view>
|
|
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else-if="btnStyle == 1">
|
|
<view class="flex-center cart-btn">
|
|
<text class="iconfont icon-ic_increase fs-26"></text>
|
|
</view>
|
|
</view>
|
|
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
|
|
<view class="flex-center cart-btn">
|
|
<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 两列瀑布流 -->
|
|
<view class="wf-page" v-if="goodStyleConfig == 1">
|
|
<!-- left -->
|
|
<view>
|
|
<view id="left" v-if="leftList.length">
|
|
<view v-for="(item,index) in leftList" :key="index" class="wf-item" @tap="goDetail(item)">
|
|
<view class='pictrue'>
|
|
<easy-loadimage
|
|
mode="widthFix"
|
|
:image-src="item.image"
|
|
:borderSrc="item.activity_frame.image"
|
|
width="100%"
|
|
height="346rpx"
|
|
:borderRadius="imgStyle"></easy-loadimage>
|
|
</view>
|
|
<view class="info_box" style="background: #1B1A1D;">
|
|
<view class="w-full line1 fs-28 text--w111-333 lh-40rpx"
|
|
v-if="checkboxInfo.includes(0)" :style="[productStyle]">{{item.store_name}}</view>
|
|
<view class="flex items-end flex-wrap mt-8 w-full" v-if="checkboxInfo.includes(1)">
|
|
<BaseTag
|
|
:text="label.label_name"
|
|
:color="label.color"
|
|
:background="label.bg_color"
|
|
:borderColor="label.border_color"
|
|
:circle="label.border_color ? true : false"
|
|
:imgSrc="label.icon"
|
|
v-for="(label, idx) in item.store_label" :key="idx"></BaseTag>
|
|
</view>
|
|
<view class="flex-between-center mt-20" v-if="onlyShowPrice">
|
|
<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
|
|
:color="priceColor"></baseMoney>
|
|
<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
|
|
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-if="btnStyle == 0">
|
|
<view class="flex-center cart-btn">
|
|
<text class="iconfont icon-ic_increase fs-26"></text>
|
|
</view>
|
|
</view>
|
|
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
|
|
<view class="flex-center cart-btn">
|
|
<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-else>
|
|
<view class="flex-y-center mt-8">
|
|
<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
|
|
:color="priceColor" v-if="checkboxInfo.includes(2)"></baseMoney>
|
|
<view v-if="Number(item.vip_price) > 0 && item.is_vip && checkboxInfo.includes(5)">
|
|
<!-- <text class="inline-block h-26 lh-28rpx svip_rd fs-18 bg--w111-484643 text--w111-FDDAA4 px-8">SVIP</text> -->
|
|
<text style="text-decoration-line: line-through;margin-left: 15rpx;font-size: 24rpx;color: #7B7A7F;">¥{{item.vip_price}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="flex-between-center mt-20">
|
|
<text class="fs-22 text--w111-999" v-if="checkboxInfo.includes(3)">已售{{item.sales}}{{item.unit_name}}</text>
|
|
<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
|
|
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-if="btnStyle == 0">
|
|
<view class="flex-center cart-btn">
|
|
<text class="iconfont icon-ic_increase fs-26"></text>
|
|
</view>
|
|
</view>
|
|
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
|
|
<view class="flex-center cart-btn">
|
|
<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- right -->
|
|
<view>
|
|
<view id="right" v-if="rightList.length">
|
|
<view v-for="(item,index) in rightList" :key="index"
|
|
class="wf-item" @tap="goDetail(item)">
|
|
<view class='pictrue'>
|
|
<easy-loadimage
|
|
mode="widthFix"
|
|
:image-src="item.image"
|
|
:borderSrc="item.activity_frame.image"
|
|
width="100%"
|
|
height="346rpx"
|
|
:borderRadius="imgStyle"></easy-loadimage>
|
|
</view>
|
|
<view class="info_box" style="background: #1B1A1D;">
|
|
<view class="w-full line1 fs-28 text--w111-333 lh-40rpx"
|
|
v-if="checkboxInfo.includes(0)" :style="[productStyle]">{{item.store_name}}</view>
|
|
<view class="flex items-end flex-wrap mt-8 w-full" v-if="checkboxInfo.includes(1)">
|
|
<BaseTag
|
|
:text="label.label_name"
|
|
:color="label.color"
|
|
:background="label.bg_color"
|
|
:borderColor="label.border_color"
|
|
:circle="label.border_color ? true : false"
|
|
:imgSrc="label.icon"
|
|
v-for="(label, idx) in item.store_label" :key="idx"></BaseTag>
|
|
</view>
|
|
<view class="flex-between-center mt-20" v-if="onlyShowPrice">
|
|
<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
|
|
:color="priceColor"></baseMoney>
|
|
<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
|
|
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-if="btnStyle == 0">
|
|
<view class="flex-center cart-btn">
|
|
<text class="iconfont icon-ic_increase fs-26"></text>
|
|
</view>
|
|
</view>
|
|
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
|
|
<view class="flex-center cart-btn">
|
|
<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-else>
|
|
<view class="flex-y-center mt-8">
|
|
<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
|
|
:color="priceColor" v-if="checkboxInfo.includes(2)"></baseMoney>
|
|
<view class="inline-block h-26 lh-28rpx rd-14rpx bg--w111-F7E9CD fs-22 ml-8" v-if="Number(item.vip_price) > 0 && item.is_vip && checkboxInfo.includes(5)">
|
|
<text class="inline-block h-26 lh-28rpx svip_rd fs-18 bg--w111-484643 text--w111-FDDAA4 px-8">SVIP</text>
|
|
<text class="px-8 fs-22">¥{{item.vip_price}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="flex-between-center mt-20">
|
|
<text class="fs-22 text--w111-999" v-if="checkboxInfo.includes(3)">已售{{item.sales}}{{item.unit_name}}</text>
|
|
<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
|
|
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-if="btnStyle == 0">
|
|
<view class="flex-center cart-btn">
|
|
<text class="iconfont icon-ic_increase fs-26"></text>
|
|
</view>
|
|
</view>
|
|
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
|
|
<view class="flex-center cart-btn">
|
|
<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 两列展示(横向) -->
|
|
<view class="pt-32 pr-24 pb-32 pl-24 bg--w111-fff rd-16rpx" v-if="goodStyleConfig == 3">
|
|
<view class="grid-column-2 grid-gap-20rpx">
|
|
<view class="flex" v-for="(item,index) in tempArr" :key="index" @tap="goDetail(item)">
|
|
<easy-loadimage
|
|
mode="widthFix"
|
|
:image-src="item.image"
|
|
:borderSrc="item.activity_frame.image"
|
|
width="144rpx"
|
|
height="144rpx"
|
|
:borderRadius="imgStyle"></easy-loadimage>
|
|
<view class="flex-1 pl-20">
|
|
<view class="w-full fs-26 h-72 lh-36rpx line2 mb-20"
|
|
v-if="checkboxInfo.includes(0)" :style="[productStyle]">{{item.store_name}}</view>
|
|
<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
|
|
:color="priceColor" v-if="checkboxInfo.includes(2)"></baseMoney>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 三列 -->
|
|
<view class="pt-32 pr-24 pb-32 pl-24 bg--w111-fff rd-16rpx" v-if="goodStyleConfig == 2">
|
|
<view class="grid-column-3 grid-gap-20rpx">
|
|
<view v-for="(item,index) in tempArr" :key="index" @tap="goDetail(item)">
|
|
<easy-loadimage
|
|
mode="widthFix"
|
|
:image-src="item.image"
|
|
:borderSrc="item.activity_frame.image"
|
|
width="100%"
|
|
height="210rpx"
|
|
:borderRadius="imgStyle"></easy-loadimage>
|
|
<view class="w-full fs-28 h-80 lh-40rpx line2 mt-20"
|
|
v-if="checkboxInfo.includes(0)" :style="[productStyle]">{{item.store_name}}</view>
|
|
<view class="flex-between-center mt-14">
|
|
<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
|
|
:color="priceColor" v-if="checkboxInfo.includes(2)"></baseMoney>
|
|
<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
|
|
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-if="btnStyle == 0">
|
|
<view class="flex-center cart-btn">
|
|
<text class="iconfont icon-ic_increase fs-26"></text>
|
|
</view>
|
|
</view>
|
|
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
|
|
<view class="flex-center cart-btn">
|
|
<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 大图展示 -->
|
|
<view v-if="goodStyleConfig ==4">
|
|
<view class="w-full item" v-for="(item,index) in tempArr" :key="index" @tap="goDetail(item)">
|
|
<easy-loadimage
|
|
mode="widthFix"
|
|
:image-src="item.image"
|
|
width="100%"
|
|
height="360rpx"
|
|
:borderRadius="imgStyle"></easy-loadimage>
|
|
<view class="rd-b-24rpx p-24 bg--w111-fff">
|
|
<view class="w-full line1 fs-28 text--w111-333 lh-40rpx mt-22"
|
|
v-if="checkboxInfo.includes(0)" :style="[productStyle]">{{item.store_name}}</view>
|
|
<view class="flex items-end flex-wrap mt-8 w-full" v-if="checkboxInfo.includes(1)">
|
|
<BaseTag
|
|
:text="label.label_name"
|
|
:color="label.color"
|
|
:background="label.bg_color"
|
|
:borderColor="label.border_color"
|
|
:circle="label.border_color ? true : false"
|
|
:imgSrc="label.icon"
|
|
v-for="(label, idx) in item.store_label" :key="idx"></BaseTag>
|
|
</view>
|
|
<view class="flex-between-center" v-if="onlyShowPrice">
|
|
<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
|
|
:color="priceColor"></baseMoney>
|
|
<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
|
|
<view class="w-96 h-56 rd-28rpx flex-center fs-24 text--w111-fff"
|
|
v-if="btnStyle == 0" :style="[btnBgColor]">购买</view>
|
|
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else-if="btnStyle == 1">
|
|
<view class="flex-center cart-btn">
|
|
<text class="iconfont icon-ic_increase fs-26"></text>
|
|
</view>
|
|
</view>
|
|
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
|
|
<view class="flex-center cart-btn">
|
|
<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-else>
|
|
<view class="flex-y-center mt-8">
|
|
<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
|
|
:color="priceColor" v-if="checkboxInfo.includes(2)"></baseMoney>
|
|
<view class="inline-block h-26 lh-28rpx rd-14rpx bg--w111-F7E9CD fs-22 ml-8"
|
|
v-if="Number(item.vip_price) > 0 && item.is_vip && checkboxInfo.includes(5)">
|
|
<text class="inline-block h-26 lh-28rpx svip_rd fs-18 bg--w111-484643 text--w111-FDDAA4 px-8">SVIP</text>
|
|
<text class="px-8 fs-22">¥{{item.vip_price}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="flex justify-between items-end">
|
|
<view class="flex-y-center">
|
|
<text class="fs-22 text--w111-999" v-if="checkboxInfo.includes(3)">已售{{item.sales}}{{item.unit_name}}</text>
|
|
<text class="fs-22 text--w111-999 pl-16" v-if="checkboxInfo.includes(4)">评分{{item.star}}</text>
|
|
</view>
|
|
<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
|
|
<view class="w-96 h-56 rd-28rpx flex-center fs-24 text--w111-fff"
|
|
v-if="btnStyle == 0" :style="[btnBgColor]">购买</view>
|
|
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else-if="btnStyle == 1">
|
|
<view class="flex-center cart-btn">
|
|
<text class="iconfont icon-ic_increase fs-26"></text>
|
|
</view>
|
|
</view>
|
|
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
|
|
<view class="flex-center cart-btn">
|
|
<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 横向滑动 -->
|
|
<view class="pt-32 pb-32 pl-24 bg--w111-fff rd-16rpx" v-if="goodStyleConfig == 5">
|
|
<scroll-view scroll-x="true" show-scrollbar="false"
|
|
class="white-nowrap vertical-middle w-full">
|
|
<view class="inline-block mr-20" v-for="(item,index) in tempArr" :key="index" @tap="goDetail(item)">
|
|
<easy-loadimage
|
|
mode="widthFix"
|
|
:image-src="item.image"
|
|
:borderSrc="item.activity_frame.image"
|
|
width="200rpx"
|
|
height="200rpx"
|
|
:borderRadius="imgStyle"></easy-loadimage>
|
|
<view class="w-200 fs-28 h-80 lh-40rpx line2 break_word mt-20"
|
|
v-if="checkboxInfo.includes(0)" :style="[productStyle]">{{item.store_name}}</view>
|
|
<view class="flex-between-center mt-8">
|
|
<baseMoney :money="item.price" symbolSize="24" integerSize="40" decimalSize="24" weight
|
|
:color="priceColor" v-if="checkboxInfo.includes(2)"></baseMoney>
|
|
<view @tap.stop="addCartChange(item, index)" v-if="!showBtn">
|
|
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-if="btnStyle == 0">
|
|
<view class="flex-center cart-btn">
|
|
<text class="iconfont icon-ic_increase fs-26"></text>
|
|
</view>
|
|
</view>
|
|
<view class="rd-24rpx w-44 h-44" :style="[btnTextColor]" v-else>
|
|
<view class="flex-center cart-btn">
|
|
<text class="iconfont icon-ic_ShoppingCart1 fs-26"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
<productWindow
|
|
:attr="attr"
|
|
:isShow='1'
|
|
:iSplus='1'
|
|
:iScart='1'
|
|
:fangda="false"
|
|
type="2"
|
|
@myevent="onMyEvent"
|
|
@ChangeAttr="ChangeAttr" @ChangeCartNum="ChangeCartNumDuo" @attrVal="attrVal"
|
|
@iptCartNum="iptCartNum" @goCat="goCatNum" id='product-window' :is_vip="is_vip"></productWindow>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getProductslist, getAttr } from '@/api/store.js';
|
|
import skuSelect from '@/mixins/skuSelect.js'
|
|
import { toLogin } from '@/libs/login.js';
|
|
import { mapGetters, mapState } from 'vuex';
|
|
import { getCartCounts } from '@/api/order.js';
|
|
import { goShopDetail } from '@/libs/order.js';
|
|
import productWindow from '@/components/productWindow';
|
|
export default {
|
|
name: 'goodList',
|
|
props: {
|
|
dataConfig: {
|
|
type: Object,
|
|
default: () => {}
|
|
},
|
|
isSortType: {
|
|
type: String | Number,
|
|
default: 0
|
|
}
|
|
},
|
|
components: {
|
|
productWindow
|
|
},
|
|
mixins: [skuSelect],
|
|
data() {
|
|
return {
|
|
tempArr: [],
|
|
type:0,
|
|
attr: {
|
|
cartAttr: false,
|
|
productAttr: [],
|
|
productSelect: {}
|
|
},
|
|
id: 0,
|
|
productValue: [],
|
|
attrValue: '', //已选属性
|
|
storeName: '', //多属性产品名称
|
|
is_vip: 0, //是否是会员
|
|
storeInfo: {},
|
|
allList: [], // 全部列表
|
|
leftList: [], // 左边列表
|
|
rightList: [], // 右边列表
|
|
mark: 0, // 列表标记
|
|
boxHeight: [], // 下标0和1分别为左列和右列高度
|
|
};
|
|
},
|
|
watch: {
|
|
// 监听列表数据变化
|
|
tempArr: {
|
|
handler(nVal,oVal){
|
|
// 如果数据为空或新的列表数据少于旧的列表数据（通常为下拉刷新或切换排序或使用筛选器），初始化变量
|
|
if (!this.tempArr.length ||
|
|
(this.tempArr.length === this.updateNum && this.tempArr.length <= this.allList.length)) {
|
|
this.allList = [];
|
|
this.leftList = [];
|
|
this.rightList = [];
|
|
this.boxHeight = [];
|
|
this.mark = 0;
|
|
}
|
|
// 如果列表有值，调用waterfall方法
|
|
|
|
if (this.tempArr.length) {
|
|
this.allList = this.tempArr;
|
|
this.leftList = [];
|
|
this.rightList = [];
|
|
this.boxHeight = [];
|
|
this.allList.forEach((v, i) => {
|
|
if(this.allList.length < 3 || (this.allList.length <= 7 && this.allList.length - i > 1) || (this.allList.length > 7 && this.allList.length - i > 2)) {
|
|
if(i % 2){
|
|
this.rightList.push(v);
|
|
}else{
|
|
this.leftList.push(v);
|
|
}
|
|
}
|
|
});
|
|
if(this.allList.length < 3){
|
|
this.mark = this.allList.length+1;
|
|
}else if(this.allList.length <= 7){
|
|
this.mark = this.allList.length - 1;
|
|
}else{
|
|
this.mark = this.allList.length - 2;
|
|
}
|
|
if(this.mark < this.allList.length){
|
|
this.waterFall()
|
|
}
|
|
}
|
|
},
|
|
immediate: true,
|
|
deep:true
|
|
},
|
|
// 监听标记，当标记发生变化，则执行下一个item排序
|
|
mark() {
|
|
const len = this.allList.length;
|
|
if (this.mark < len && this.mark !== 0 && this.boxHeight.length) {
|
|
this.waterFall();
|
|
}
|
|
},
|
|
dataConfig() {
|
|
this.productslist();
|
|
}
|
|
},
|
|
computed:{
|
|
...mapState({
|
|
cartNum: state => state.indexData.cartNum
|
|
}),
|
|
...mapGetters(['isLogin', 'uid', 'cartNum']),
|
|
/*外层盒子样式*/
|
|
boxStyle(){
|
|
let borderRadius = `${this.dataConfig.fillet.val * 2}rpx`;
|
|
if (this.dataConfig.fillet.type) {
|
|
borderRadius =
|
|
`${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx ${this.dataConfig.fillet.valList[2].val * 2}rpx ${this.dataConfig.fillet.valList[3].val * 2}rpx`;
|
|
}
|
|
return {
|
|
borderRadius,
|
|
padding: `${this.dataConfig.topConfig.val * 2}rpx ${this.dataConfig.prConfig.val * 2}rpx ${this.dataConfig.bottomConfig.val * 2}rpx`,
|
|
marginTop: `${this.dataConfig.mbConfig.val * 2}rpx`,
|
|
background: this.dataConfig.bottomBgColor.color[0].item,
|
|
}
|
|
},
|
|
/*内层盒子样式*/
|
|
// boxContentStyle() {
|
|
// let borderRadius = `${this.dataConfig.fillet.val * 2}rpx`;
|
|
// if (this.dataConfig.fillet.type) {
|
|
// borderRadius =
|
|
// `${this.dataConfig.fillet.valList[0].val * 2}rpx ${this.dataConfig.fillet.valList[1].val * 2}rpx ${this.dataConfig.fillet.valList[2].val * 2}rpx ${this.dataConfig.fillet.valList[3].val * 2}rpx`;
|
|
// }
|
|
// return {
|
|
// borderRadius,
|
|
// background: this.dataConfig.bottomBgColor.color[0].item
|
|
// };
|
|
// },
|
|
styleConfig(){
|
|
return this.dataConfig.styleConfig.tabVal
|
|
},
|
|
/*商品图片圆角样式*/
|
|
imgStyle(){
|
|
let borderRadius = `${this.dataConfig.filletImg.val * 2}rpx`;
|
|
if (this.dataConfig.styleConfig.tabVal == 1) {
|
|
borderRadius = `${this.dataConfig.filletImg.val * 2}rpx ${this.dataConfig.filletImg.val * 2}rpx 0 0`;
|
|
}
|
|
if (this.dataConfig.filletImg.type) {
|
|
borderRadius =
|
|
`${this.dataConfig.filletImg.valList[0].val * 2}rpx ${this.dataConfig.filletImg.valList[1].val * 2}rpx ${this.dataConfig.filletImg.valList[2].val * 2}rpx ${this.dataConfig.filletImg.valList[3].val * 2}rpx`;
|
|
if (this.dataConfig.styleConfig.tabVal == 1) {
|
|
borderRadius = `${this.dataConfig.filletImg.valList[0].val * 2}rpx ${this.dataConfig.filletImg.valList[1].val * 2}rpx 0 0`;
|
|
}
|
|
}
|
|
return borderRadius
|
|
},
|
|
/*商品名称样式*/
|
|
productStyle(){
|
|
return {
|
|
color: this.dataConfig.goodsNameColor.color[0].item,
|
|
fontWeight: this.dataConfig.goodsName.tabVal ? 'normal' : '500'
|
|
}
|
|
},
|
|
/* 展示信息 */
|
|
checkboxInfo(){
|
|
return this.dataConfig.checkboxInfo.type
|
|
},
|
|
/* 价格颜色 */
|
|
priceColor(){
|
|
return this.dataConfig.toneConfig.tabVal ? this.dataConfig.goodsPriceColor.color[0].item : 'var(--view-theme)'
|
|
},
|
|
/* 原价颜色 */
|
|
otPriceColor(){
|
|
return this.dataConfig.goodsPriceColor.color[0].item
|
|
},
|
|
btnStyle(){
|
|
return this.dataConfig.bntStyleConfig.tabVal
|
|
},
|
|
showBtn(){
|
|
return this.dataConfig.cartConfig.tabVal
|
|
},
|
|
/* 按钮颜色 */
|
|
btnBgColor(){
|
|
return {
|
|
background: this.dataConfig.toneConfig.tabVal ? `linear-gradient(90deg,${this.dataConfig.bntBgColor.color[0].item} 0%,${this.dataConfig.bntBgColor.color[1].item} 100%)`: 'linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%)'
|
|
}
|
|
},
|
|
btnTextColor(){
|
|
return {
|
|
color: this.dataConfig.toneConfig.tabVal ? this.dataConfig.bntBgColor.color[0].item: '#FFFFFF',
|
|
background: this.dataConfig.toneCartConfig.tabVal ? `linear-gradient(90deg, ${this.dataConfig.bntBgColor.color[0].item} 0%, ${this.dataConfig.bntBgColor.color[1].item} 100%)` : 'linear-gradient(90deg, var(--view-theme) 0%, var(--view-gradient) 100%)',
|
|
}
|
|
},
|
|
/*商品数量*/
|
|
numberConfig(){
|
|
return this.dataConfig.numberConfig.val
|
|
},
|
|
/*商品模板*/
|
|
goodStyleConfig(){
|
|
return this.dataConfig.styleConfig.tabVal
|
|
},
|
|
/*检索条件 0综合 1销量 2价格*/
|
|
goodsSort(){
|
|
return this.dataConfig.goodsSort.tabVal
|
|
},
|
|
/*按照什么方式选择商品 0 指定商品 1 指定品牌 2指定分类 3 商品标签 */
|
|
typeConfig(){
|
|
return this.dataConfig.typeConfig.activeValue
|
|
},
|
|
bntConfig(){
|
|
return this.dataConfig.bntConfig.tabVal
|
|
},
|
|
onlyShowPrice(){
|
|
if(this.checkboxInfo.toString() == '0,2' || this.checkboxInfo.toString() == '2,0' || this.checkboxInfo.toString() == '2'){
|
|
return true
|
|
}else{
|
|
return false
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
// #ifndef APP-PLUS
|
|
// this.$eventHub.$on('product_video_observe', () => {
|
|
// this.observeVideo();
|
|
// });
|
|
// #endif
|
|
},
|
|
mounted() {
|
|
this.productslist();
|
|
},
|
|
methods: {
|
|
observeVideo() {
|
|
let observer = uni.createIntersectionObserver(this, { observeAll: true });
|
|
observer.relativeToViewport().observe('.video', res => {
|
|
if (res.intersectionRatio) {
|
|
uni.createVideoContext(res.id, this).play();
|
|
} else{
|
|
uni.createVideoContext(res.id, this).pause();
|
|
}
|
|
});
|
|
},
|
|
productslist() {
|
|
let limit = this.$config.LIMIT;
|
|
let data = {};
|
|
if (this.typeConfig == 1) {
|
|
data = {
|
|
ids: this.dataConfig.goodsList.ids.join(','),
|
|
};
|
|
} else {
|
|
data = {
|
|
priceOrder: this.goodsSort == 2 ? 'desc' : '',
|
|
salesOrder: this.goodsSort == 1 ? 'desc' : '',
|
|
brand_id: this.typeConfig == 2 ? this.dataConfig.brandList.brandVal.join(',') : '',
|
|
store_label_id: this.typeConfig == 4 ? this.dataConfig.goodsLabel.activeValue.join(',') : '',
|
|
cate_id: this.typeConfig == 3 ? this.dataConfig.classList.classVal.join(',') : '',
|
|
limit: this.numberConfig
|
|
};
|
|
}
|
|
getProductslist(data).then(res => {
|
|
this.tempArr = res.data;
|
|
});
|
|
},
|
|
goDetail(item) {
|
|
goShopDetail(item, this.$store.state.app.uid).catch(res => {
|
|
uni.navigateTo({
|
|
url: `/pages/goods_details/index?id=${item.id}`
|
|
});
|
|
});
|
|
},
|
|
// 商品详情接口；
|
|
getAttrs(id) {
|
|
let that = this;
|
|
getAttr(id, 0).then(res => {
|
|
that.$set(that.attr, 'productAttr', res.data.productAttr);
|
|
that.$set(that, 'productValue', res.data.productValue);
|
|
that.$set(that, 'is_vip', res.data.storeInfo.is_vip);
|
|
that.$set(that, 'storeInfo', res.data.storeInfo);
|
|
that.DefaultSelect();
|
|
})
|
|
},
|
|
addCartChange(item, index){
|
|
if(this.bntConfig == 1){
|
|
if(item.spec_type){
|
|
this.goCartDuo(item);
|
|
}else{
|
|
this.goCartDan(item,index);
|
|
}
|
|
}else{
|
|
this.goDetail(item);
|
|
}
|
|
|
|
},
|
|
getCartNum() {
|
|
let that = this;
|
|
getCartCounts().then(res => {
|
|
this.$store.commit('indexData/setCartNum', res.data.count)
|
|
});
|
|
},
|
|
// 瀑布流排序
|
|
waterFall() {
|
|
const i = this.mark;
|
|
if (i == 0) {
|
|
// 初始化，从左边开始插入
|
|
this.leftList.push(this.allList[i]);
|
|
// 更新左边列表高度
|
|
this.getViewHeight(0);
|
|
} else if (i == 1) {
|
|
// 第二个item插入，默认为右边插入
|
|
this.rightList.push(this.allList[i]);
|
|
// 更新右边列表高度
|
|
this.getViewHeight(1);
|
|
} else {
|
|
// 根据左右列表高度判断下一个item应该插入哪边
|
|
if(!this.boxHeight.length){
|
|
this.rightList.length < this.leftList.length
|
|
? this.rightList.push(this.allList[i])
|
|
: this.leftList.push(this.allList[i]);
|
|
} else {
|
|
const leftOrRight = this.boxHeight[0] > this.boxHeight[1] ? 1 : 0;
|
|
if (leftOrRight) {
|
|
this.rightList.push(this.allList[i])
|
|
} else {
|
|
this.leftList.push(this.allList[i])
|
|
}
|
|
}
|
|
// 更新插入列表高度
|
|
this.getViewHeight();
|
|
}
|
|
},
|
|
// 获取列表高度
|
|
getViewHeight() {
|
|
// 使用nextTick，确保页面更新结束后，再请求高度
|
|
this.$nextTick(() => {
|
|
setTimeout(()=>{
|
|
uni.createSelectorQuery().in(this).select('#right').boundingClientRect(res => {
|
|
res ? this.boxHeight[1] = res.height : '';
|
|
uni.createSelectorQuery().in(this).select('#left').boundingClientRect(res => {
|
|
res ? this.boxHeight[0] = res.height : '';
|
|
this.mark = this.mark + 1;
|
|
}).exec();
|
|
}).exec();
|
|
},100)
|
|
})
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
$page-padding: 10px;
|
|
$grid-gap: 10px;
|
|
.wf-page {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-gap: 20rpx;
|
|
}
|
|
.wf-item {
|
|
width: calc((100vw - 2 * #{$page-padding} - #{$grid-gap}) / 2);
|
|
padding-bottom: 20rpx;
|
|
}
|
|
.wf-page1 .wf-item{
|
|
margin-top: 20rpx;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
padding-bottom: 0;
|
|
}
|
|
.item ~ .item{
|
|
margin-top: 32rpx;
|
|
}
|
|
.info_box{
|
|
padding: 16rpx 20rpx;
|
|
border-radius: 0 0 20rpx 20rpx;
|
|
background-color: #fff;
|
|
}
|
|
.bg--w111-484643{
|
|
background: linear-gradient(90deg, #484643 0%, #1F1B17 100%);
|
|
}
|
|
.text--w111-FDDAA4{
|
|
color: #FDDAA4;
|
|
}
|
|
.svip_rd{
|
|
border-radius: 14rpx 0 8rpx 14rpx;
|
|
}
|
|
.cart-btn{
|
|
// background:rgba(255,255,255,0.9);
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
|