rrys121/pages/index/components/goodList.vue

<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">
                <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>
        <!-- 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">
                <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>