tmerclub-uniapp/src/pages/search-list/search-list.vue

<template>
  <z-paging
    ref="paging"
    v-model="dataList"
    :refresher-enabled="false"
    :hide-no-more-inside="true"
    :paging-style="{'top': '0','background': '#f2f3f7'}"
    empty-view-text="没有找到对应商品，看看别的吧"
    empty-view-img="/static/empty-img/order-empty.png"
    @query="onGetDataList"
  >
    <view class="Mall4j page-search-list">
      <!-- 搜索框 -->
      <view
        class="search-top"
        :class="{'search-frame-fixed':searchType===2}"
      >
        <view
          class="search-box"
          @tap="onToSearchPage(1)"
        >
          <view class="icon">
            <image src="/static/images/search.png" />
          </view>
          <div
            v-if="showKeyword"
            class="key-tag"
          >
            <span class="text">{{ showKeyword }}</span>
            <span
              class="close"
              @tap.stop="onToSearchPage(0)"
            >x</span>
          </div>
          <div
            v-if="!showKeyword"
            class="text"
          >
            输入关键字搜索
          </div>
        </view>
        <view
          v-if="searchType!==2"
          class="list-style"
          @tap="onChangeListStyle"
        >
          <image :src="isLineProds ? '/static/images/list-line.png' : '/static/images/list-row.png'" />
        </view>
      </view>

      <!-- 商品头部店铺 -->
      <view
        v-if="(state!==3 && shopInfo && isFixedHead === false)"
        class="head-shop-info"
      >
        <view class="shop-info-box">
          <view class="con">
            <view class="logo">
              <image
                :src="shopInfo.shopLogo ? util.addDomain(shopInfo.shopLogo) : defaultShopLogo"
                @error="shopInfo.shopLogo=''"
              />
            </view>
            <view class="text">
              <view
                class="name"
                style="padding-right:20rpx"
              >
                {{ shopInfo.shopName }}
              </view>
              <view class="focus-box">
                <view
                  v-if="shopInfo.type===1"
                  class="self"
                >
                  自营
                </view>
                <view class="focus">
                  关注人数：{{ wxs.parseCollectionNumber(shopInfo.collectionNum) }}
                </view>
              </view>
            </view>
            <view
              class="btn"
              @tap="onToShopPage(shopInfo.shopId)"
            >
              进店
            </view>
          </view>
        </view>
      </view>

      <!-- 排序栏 -->
      <view
        v-if="searchType!==2"
        class="sortbar"
      >
        <view
          class="item"
          :class="{active:state===0}"
          @tap="onSwitchSearchList(0)"
        >
          默认
        </view>
        <view
          class="item"
          :class="{active:state===1, 'arrow-up':sort===2, 'arrow-down':sort===3}"
          @tap="onSwitchSearchList(1)"
        >
          销量
        </view>
        <view
          class="item"
          :class="{active:state===2, 'arrow-up':sort===4, 'arrow-down':sort===5}"
          @tap="onSwitchSearchList(2)"
        >
          价格
        </view>
      </view>

      <!-- 筛选栏 -->
      <view
        v-if="((brandList && brandList.length) || (categoryList && categoryList.length) || (attrList && attrList.length)) && state!==3"
        class="screen-column"
      >
        <view class="sc-tab">
          <scroll-view
            scroll-x="true"
            class="sc-wrap"
          >
            <!-- 品牌 -->
            <view
              class="item"
              :class="{'active-item':(openWhichConditionItem.type === 0)}"
            >
              <view
                v-if="brandList && brandList.length"
                class="item-box"
                :class="{'active-item-box': onShowBrandConditonText() && selectedBrandItem && openWhichConditionItem.type!==0}"
                @tap="onOpenScreenCondition(0)"
              >
                <text class="text">
                  {{ onShowBrandConditonText() || '品牌' }}
                </text>
              </view>
            </view>
            <!-- 分类 -->
            <view
              class="item"
              :class="{'active-item':(openWhichConditionItem.type === 1)}"
            >
              <view
                v-if="categoryList && categoryList.length"
                class="item-box"
                :class="{'active-item-box':onShowCategoryConditionText() && selectedCategoryItem && openWhichConditionItem.type!==1}"
                @tap="onOpenScreenCondition(1)"
              >
                <text class="text">
                  {{ onShowCategoryConditionText() || '类别' }}
                </text>
              </view>
            </view>
            <!-- 属性 -->
            <view
              v-for="(item, index) in attrList"
              :key="index"
              class="item"
              :class="{'active-item':(openWhichConditionItem.type === 2 && openWhichConditionItem.attrIndex === index)}"
            >
              <view
                class="item-box"
                :class="{'active-item-box':item.isActive && openWhichConditionItem.attrIndex !== index}"
                @tap="onOpenScreenCondition(2, index)"
              >
                <text class="text">
                  {{ onShowAttrConditionText(index) }}
                </text>
              </view>
            </view>
          </scroll-view>
          <view
            class="filter-btn"
            @tap="onOpenAllScreenFrame"
          >
            筛选<image
              class="screen-icon"
              src="/static/images/screen.png"
            />
          </view>
        </view>

        <!-- 筛选条件展开框 -->
        <view
          v-if="openWhichConditionItem.type !== ''"
          class="sc-options"
        >
          <view class="opt-content">
            <view
              v-for="(item, index) in openConditionList"
              :key="index"
              class="o-item"
              @tap="onSelectOrCancelCondition(index)"
            >
              <image
                v-if="item.isSelected"
                class="selected-item"
                src="/static/images/seleced-item.png"
              />
              <text>{{ item.brandName || item.name || item.attrValueName }}</text>
            </view>
          </view>
          <view class="opt-btns">
            <view class="btn-box">
              <view
                class="reset-btn btn"
                @tap="onResetScreenCondition()"
              >
                重置
              </view>
            </view>
            <view class="btn-box">
              <view
                class="confirm-btn btn"
                @tap="onConfirmScreenCondition()"
              >
                确定
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 遮蔽层 -->
      <view
        v-if="(openWhichConditionItem.type !== '') || (isOpenAllScreenFrame)"
        class="filter-mask"
        @tap="onCloseScreenCondition()"
      />

      <!-- 所有筛选项的框 -->
      <view
        class="all-screen-frame"
        :class="{'show':isOpenAllScreenFrame}"
      >
        <view class="condition-info">
          <view class="first-part part">
            <view class="server-or-discount">
              <view class="title">
                服务/折扣
              </view>
              <view class="content">
                <view
                  class="c-item"
                  :class="{'active-c-item':isSelfShop}"
                  @tap="onSelectScreenCondition(3)"
                >
                  商城自营
                </view>
                <view
                  class="c-item"
                  :class="{'active-c-item':isHasStock}"
                  @tap="onSelectScreenCondition(4)"
                >
                  仅看有货
                </view>
              </view>
            </view>
            <view class="price-range">
              <view class="title">
                价格区间
              </view>
              <view class="price-box">
                <view class="min-price price-frame">
                  <input
                    v-model="minPriceInp"
                    type="number"
                    placeholder="最低价"
                    @input="onLimitPriceRange('min')"
                  >
                </view>
                <view class="line">
                  -
                </view>
                <view class="max-price price-frame">
                  <input
                    v-model="maxPriceInp"
                    type="number"
                    placeholder="最高价"
                    @input="onLimitPriceRange('max')"
                  >
                </view>
              </view>
            </view>
          </view>

          <view class="second-part part">
            <view
              v-if="otherBrandList && otherBrandList.length"
              class="brand-item"
            >
              <view class="title">
                品牌
              </view>
              <view class="content">
                <view
                  v-for="(item, index) in otherBrandList"
                  :key="index"
                  class="c-item"
                  :class="{'active-c-item':item.isSelected}"
                  @tap="onSelectScreenCondition(0, index)"
                >
                  {{ item.brandName }}
                </view>
              </view>
            </view>
            <view class="category-item">
              <view class="title">
                类别
              </view>
              <view class="content">
                <view
                  v-for="(item, index) in otherCategoryList"
                  :key="index"
                  class="c-item"
                  :class="{'active-c-item':item.isSelected}"
                  @tap="onSelectScreenCondition(1, index)"
                >
                  {{ item.name }}
                </view>
              </view>
            </view>
          </view>

          <view class="third-part part">
            <view
              v-for="(attrItem, attrIndex) in otherAttrList"
              :key="attrIndex"
              class="attr-item"
            >
              <block>
                <view class="title">
                  {{ attrItem.attrName }}
                </view>
                <view class="content">
                  <view
                    v-for="(attrValueItem, attrValueIndex) in attrItem.attrValues"
                    :key="attrValueIndex"
                    class="c-item"
                    :class="{'active-c-item':attrValueItem.isSelected}"
                    @tap="onSelectScreenCondition(2, attrIndex, attrValueIndex)"
                  >
                    {{ attrValueItem.attrValueName }}
                  </view>
                </view>
              </block>
            </view>
          </view>
        </view>

        <view class="asf-btns">
          <view class="btn-box">
            <view
              class="reset-btn btn"
              @tap="onResetAllScreenCondition"
            >
              重置
            </view>
          </view>
          <view class="btn-box">
            <view
              class="confirm-btn btn"
              @tap="onConfirmAllScreenCondition"
            >
              确定
            </view>
          </view>
        </view>
      </view>

      <!-- 商品列表 -->
      <view
        v-if="searchType!==2 && dataList.length > 0"
        :class="[isLineProds ? 'line-prods' : 'prods']"
        :style="{'margin-top':((isFixedHead || openWhichConditionItem.type || openWhichConditionItem.type===0) ? '10px' : isLineProds ? '10px' : '0')}"
      >
        <block v-if="isLineProds">
          <block
            v-for="(prodItem, prodIndex) in dataList"
            :key="prodIndex"
          >
            <view
              class="item"
              @tap="onToProdDetailPage(prodItem.spuId)"
            >
              <view class="img">
                <img-show :src="prodItem.mainImgUrl" />
              </view>
              <view class="text-box">
                <view class="name">
                  {{ prodItem.spuName }}
                </view>
                <view
                  v-if="prodItem.sellingPoint"
                  class="sku"
                >
                  {{ prodItem.sellingPoint }}
                </view>
                <view class="discount-box">
                  <view v-if="prodItem.shopType===1">
                    <view class="discount">
                      自营
                    </view>
                  </view>
                  <view
                    v-if="prodItem.spuActivity"
                    style="display: inline-block;"
                  >
                    <view v-if="prodItem.spuActivity.groupActivity">
                      <view class="discount">
                        {{ prodItem.spuActivity.groupActivity.groupNumber }}人团
                      </view>
                    </view>
                  </view>
                  <view
                    v-if="prodItem.spuActivity"
                    style="display: inline-block;"
                  >
                    <view v-if="prodItem.spuActivity.sekillActivitySpuVO">
                      <view class="discount">
                        秒杀
                      </view>
                    </view>
                  </view>
                  <view
                    v-if="prodItem.spuActivity"
                    style="display: inline-block;"
                  >
                    <view v-if="prodItem.spuActivity.discountList">
                      <view
                        v-for="(item, index) in prodItem.spuActivity.discountList.slice(0, 1)"
                        :key="index"
                        class="discount"
                      >
                        {{ onDiscountTagText(prodItem.spuActivity.discountList) }}
                      </view>
                    </view>
                  </view>
                  <view
                    v-if="prodItem.spuActivity"
                    style="display: inline-block;"
                  >
                    <view v-if="prodItem.spuActivity.couponList">
                      <view
                        v-for="(item, index) in prodItem.spuActivity.couponList.slice(0, 1)"
                        :key="index"
                        class="coupons"
                      >
                        {{ onCouponTagText(prodItem.spuActivity.couponList[0]) }}
                      </view>
                    </view>
                  </view>
                </view>
                <view class="price-box">
                  <view class="price">
                    <view class="symbol">
                      ￥
                    </view>
                    <view class="big">
                      {{ wxs.parsePrice(prodItem.priceFee)[0] }}
                    </view>
                    <view class="symbol">
                      .{{ wxs.parsePrice(prodItem.priceFee)[1] }}
                    </view>
                    <view
                      v-if="prodItem.saleNum || prodItem.saleNum === 0"
                      class="symbol sold-num"
                    >
                      销量 {{ prodItem.saleNum }}
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </block>
        </block>

        <block v-if="!isLineProds">
          <view
            v-for="(val,idx) in getColProdList"
            :key="idx"
            class="col"
          >
            <block
              v-for="(prodItem, prodIndex) in val"
              :key="prodIndex"
            >
              <view
                class="item"
                @tap="onToProdDetailPage(prodItem.spuId)"
              >
                <view class="img">
                  <img-show :src="prodItem.mainImgUrl" />
                </view>
                <view class="text-box">
                  <view class="name">
                    {{ prodItem.spuName }}
                  </view>
                  <view
                    v-if="prodItem.sellingPoint"
                    class="sku"
                  >
                    {{ prodItem.sellingPoint }}
                  </view>
                  <view class="discount-box">
                    <view v-if="prodItem.shopType===1">
                      <view class="discount">
                        自营
                      </view>
                    </view>
                    <view
                      v-if="prodItem.spuActivity"
                      style="display: inline-block;"
                    >
                      <view v-if="prodItem.spuActivity.groupActivity">
                        <view class="discount">
                          {{ prodItem.spuActivity.groupActivity.groupNumber }}人团
                        </view>
                      </view>
                    </view>
                    <view
                      v-if="prodItem.spuActivity"
                      style="display: inline-block;"
                    >
                      <view v-if="prodItem.spuActivity.sekillActivitySpuVO">
                        <view class="discount">
                          秒杀
                        </view>
                      </view>
                    </view>
                    <view
                      v-if="prodItem.spuActivity"
                      style="display: inline-block;"
                    >
                      <view v-if="prodItem.spuActivity.discountList">
                        <view
                          v-for="(item, index) in prodItem.spuActivity.discountList.slice(0, 1)"
                          :key="index"
                          class="discount"
                        >
                          {{ onDiscountTagText(prodItem.spuActivity.discountList) }}
                        </view>
                      </view>
                    </view>
                    <view
                      v-if="prodItem.spuActivity"
                      style="display: inline-block;"
                    >
                      <view v-if="prodItem.spuActivity.couponList">
                        <view
                          v-for="(item, index) in prodItem.spuActivity.couponList.slice(0, 1)"
                          :key="index"
                          class="coupons"
                        >
                          {{ onCouponTagText(prodItem.spuActivity.couponList[0]) }}
                        </view>
                      </view>
                    </view>
                  </view>
                  <view class="price-box">
                    <view class="price">
                      <view class="symbol">
                        ￥
                      </view>
                      <view class="big">
                        {{ wxs.parsePrice(prodItem.priceFee)[0] }}
                      </view>
                      <view class="symbol">
                        .{{ wxs.parsePrice(prodItem.priceFee)[1] }}
                      </view>
                      <view
                        v-if="prodItem.saleNum || prodItem.saleNum === 0"
                        class="symbol sold-num"
                      >
                        销量 {{ prodItem.saleNum }}
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </block>
          </view>
        </block>
      </view>

      <!-- 店铺列表 -->
      <view
        v-if="searchType===2 && dataList.length > 0"
        class="shop-list"
      >
        <block
          v-for="(item, index) in dataList"
          :key="index"
        >
          <view class="item">
            <view :class="[!item.spuList?'no-prod':'','shop-info']">
              <view class="logo">
                <image
                  :src="item.shopLogo ? util.addDomain(item.shopLogo) : defaultShopLogo"
                  @error="dataList[index].shopLogo=''"
                />
              </view>
              <view class="text">
                <view class="name">
                  {{ item.shopName }}
                </view>
                <view class="focus-box">
                  <view
                    v-if="item.type===1"
                    class="self"
                  >
                    自营
                  </view>
                  <view class="focus">
                    关注人数：{{ wxs.parseCollectionNumber(item.collectionNum) }}
                  </view>
                </view>
              </view>
              <view
                class="btn"
                @tap="onToShopPage(item.shopId)"
              >
                进店
              </view>
            </view>
            <view class="shop-prods">
              <block v-if="item.spuList">
                <block
                  v-for="(prodItem, prodIndex) in item.spuList.slice(0, 3)"
                  :key="prodIndex"
                >
                  <view
                    class="p-item"
                    @tap="onToProdDetailPage(prodItem.spuId)"
                  >
                    <view class="img">
                      <img-show :src="prodItem.mainImgUrl" />
                    </view>
                    <view class="name">
                      {{ prodItem.spuName }}
                    </view>
                    <view class="price">
                      ￥{{ wxs.parsePrice(prodItem.priceFee)[0] + '.' + wxs.parsePrice(prodItem.priceFee)[1] }}
                    </view>
                  </view>
                </block>
              </block>
            </view>
          </view>
        </block>
      </view>
    </view>
  </z-paging>
</template>

<script setup>
import defaultShopLogo from '@/static/images/default-shop-logo.png'
import util from '@/utils/util'

const wxs = number()

const isFixedHead = ref(false) // 头部是固定
const dataList = ref([]) // 商品列表/店铺列表

// 请求参数
const selfShop = ref('') // 商城是否自营
const hasStock = ref('') // 仅看有货
const minPrice = ref('') // 最小价格
const maxPrice = ref('') // 最大价格
const secondaryCategoryId = ref('') // 第二级分类ID
const categoryId = ref('') // 第三级分类ID
const sort = ref('') // 商品排序
const brandIds = ref('') // 品牌
const attrIds = ref('') // 属性

// 搜索类型
const searchType = ref(1) // 1:商品 2:店铺

// 价格
const minPriceInp = ref('')
const initMinPriceInp = ref('')
const maxPriceInp = ref('')
const initMaxPriceInp = ref('')

// 是否自营
const isSelfShop = ref(false)
const initSelfShop = ref(false)

// 仅看有货
const isHasStock = ref(false)
const initHasStock = ref(false)

// 品牌
const brandList = ref([]) // 品牌列表
const selectedBrandList = ref([]) // 选中品牌的列表
const selectedBrandItem = ref('') // 选中品牌字符串（链接里的参数格式）
const otherBrandList = ref([])

// 分类
const categoryName = ref('') // 链接传过来的值
const categoryList = ref([])
const selectedCategoryId = ref('') // 选中的id
const selectedCategoryItem = ref('') // 选中分类项（用来传递）
const otherCategoryList = ref([])

// 属性
const attrList = ref([])
const selectedAttrId = ref('') // 选中的属性id
const selectedAttrValueIdList = ref([]) // 选中的属性值id
const selectedAttrItem = ref('') // 选中的属性项
const otherAttrList = ref([])

const shopInfo = ref('') // 关键词搜索中的店铺信息

/**
   * 生命周期函数--监听页面加载
   * @param {Object} options 上一个页面传递的参数
   */
onLoad((options) => {
  // 处理传递过来的参数
  onHandleLinkParams(options)
})

const getColProdList = computed(() => {
  const prodListValue = dataList.value
  if (prodListValue && prodListValue.length) return [prodListValue.filter((val, idx) => idx % 2 === 0), prodListValue.filter((val, idx) => idx % 2 === 1)] // eslint-disable-line
  return []
})

/**
 * 处理传来的参数
 * @param {Object} options 传递的参数
 */
const showKeyword = ref('') // 用来展示的关键词
const state = ref(0) // 0:商品 1:商品销量排序 2:商品价格排序 3:店铺
const keyword = ref('') // 关键词
const onHandleLinkParams = (options) => {
  // 搜索类型
  searchType.value = options.type ? Number(options.type) : 1

  // 商城自营和仅看有货
  selfShop.value = options.shop ? options.shop : ''
  hasStock.value = options.stock ? options.stock : ''
  isSelfShop.value = initSelfShop.value = !!options.shop
  isHasStock.value = initHasStock.value = !!options.stock

  // 价格
  minPriceInp.value = initMinPriceInp.value = options.minPrice ? options.minPrice : ''
  maxPriceInp.value = initMaxPriceInp.value = options.maxPrice ? options.maxPrice : ''
  minPrice.value = options.minPrice ? util.accuracyCount(options.minPrice, 100, 2) : ''
  maxPrice.value = options.maxPrice ? util.accuracyCount(options.maxPrice, 100, 2) : ''

  // 品牌部分
  brandIds.value = options.bids ? (options.bids).replace(/\|\|/g, ',') : '' // 请求参数
  selectedBrandItem.value = options.bids ? options.bids : '' // 链接参数
  selectedBrandList.value = options.bids ? options.bids.split('||') : [] // 选中的列表

  // 分类部分
  categoryName.value = options.cName ? options.cName : ''
  secondaryCategoryId.value = options.cid2
  categoryId.value = options.cid
  selectedCategoryItem.value = selectedCategoryId.value = options.cid ? options.cid : ''

  // 属性参数
  attrIds.value = options.aids ? (options.aids).replace(/\|\|/g, ',') : '' // 请求参数
  selectedAttrItem.value = options.aids ? options.aids : ''

  // 关键词
  let keywordValue = ''
  // #ifndef MP-WEIXIN
  keywordValue = options.keyword ? options.keyword : ''
  // #endif
  // #ifdef MP-WEIXIN
  keywordValue = options.keyword ? decodeURIComponent(decodeURIComponent(options.keyword)) : ''
  // #endif
  // #ifdef APP-PLUS
  keywordValue = options.keyword ? decodeURIComponent(options.keyword) : ''
  // #endif
  showKeyword.value = keywordValue
  keyword.value = keywordValue

  // 排序
  sort.value = !(options.sort) ? '' : Number(options.sort)
  if (!(options.sort)) {
    state.value = 0
  } else if (Number(options.sort) === 2 || Number(options.sort) === 3) {
    state.value = 1
  } else if (Number(options.sort) === 4 || Number(options.sort) === 5) {
    state.value = 2
  }
}

/**
 * 获取商品列表
 */
// 展开哪项筛选条件
const openWhichConditionItem = reactive({
  type: '',
  attrIndex: ''
})
const isOpenAllScreenFrame = ref(false)
const onGetDataList = (pageNum, pageSize) => {
  if (searchType.value !== 2) {
  // 价格筛选输入框低于0.01,都按0.01的价格处理
    const minPriceValue = (minPrice.value && minPrice.value < 1) ? 1 : minPrice.value
    const maxPriceValue = (maxPrice.value && maxPrice.value < 1) ? 1 : maxPrice.value
    if (secondaryCategoryId.value === 'undefined') {
      secondaryCategoryId.value = ''
    }
    const params = {
      url: '/tmerclub_search/ua/search/search_page',
      method: 'GET',
      data: {
        pageSize,
        pageNum,
        keyword: keyword.value,
        needActivity: 1,
        selfShop: selfShop.value,
        hasStock: hasStock.value,
        minPrice: minPriceValue,
        maxPrice: maxPriceValue,
        sort: sort.value,
        secondaryCategoryId: secondaryCategoryId.value || '',
        categoryId: categoryId.value || '',
        brandIds: brandIds.value,
        attrIds: attrIds.value
      }
    }
    http.request(params).then((res) => {
      if (res.list[0]?.categorys[0]?.categoryId || categoryId.value) {
        onHandlePordReturnResult(res)
      } else {
        paging.value.complete(res.list[0].spus)
      }
      isOpenAllScreenFrame.value = false
      openWhichConditionItem.type = ''
    })
  } else {
    const params = {
      url: '/tmerclub_admin/ua/shop_detail/page',
      method: 'get',
      data: {
        pageNum,
        pageSize,
        shopName: keyword.value,
        spuNum: 3
      }
    }
    http.request(params).then(res => {
      paging.value.complete(res.list)
    })
  }
}

/**
 * 处理商品搜索接口返回的结果
 * @param {Object} res 商品搜索接口返回结果
 */
const paging = ref(null)
const onHandlePordReturnResult = (res) => {
  const params = {
    url: '/tmerclub_product/ua/category/category_search_item',
    method: 'get',
    data: {
      categoryId: res.list && (res.list[0]?.categorys[0]?.categoryId) ? res.list[0]?.categorys[0]?.categoryId : categoryId.value
    }
  }
  http.request(params).then(({ categoryVO }) => {
    // 品牌列表
    if (res.list) {
      res.list[0].brands.forEach((item) => {
        item.isSelected = false
      })
      brandList.value = res.list[0].brands
      // 找出数组相同项(需优化，如果几千个品牌和选中了多个品牌项，会占不少的速度)
      if (selectedBrandItem.value) {
        const selectedBrandItemList = selectedBrandItem.value.split('||')
        // 使用该方式赋值，不是直接赋值对象的地址，而是赋值对象的值，从而不会出现新旧对象的值同时改变
        brandList.value.forEach((brandItem) => {
          selectedBrandItemList.forEach((idItem) => {
            if (brandItem.brandId === Number(idItem)) {
              brandItem.isSelected = true
            }
          })
        })
      }

      // 属性列表
      res.list[0].attrs.forEach((attrItem) => {
        attrItem.isActive = false
        attrItem.attrValues.forEach((attrValueItem) => {
          attrValueItem.isSelected = false
        })
      })
      attrList.value = res.list[0].attrs
      // 处理链接里得属性参数, 用来回显 格式：attrId1_attrValueId1||attrValueId2^attrId2_attrValueId1
      if (selectedAttrItem.value) {
        const attrItemArr = selectedAttrItem.value.split('^')
        attrList.value.forEach(attrItem => {
          attrItemArr.forEach((attrStrItem) => {
            if (Number(attrItem.attrId) === Number(attrStrItem.split('_')[0])) {
              const attrValueArr = attrStrItem.split('_')[1].split('||')
              attrItem.isActive = true
              attrItem.attrValues.forEach((attrValueItem) => {
                attrValueArr.forEach((attrValueId) => {
                  if (Number(attrValueItem.attrValueId) === Number(attrValueId)) {
                    attrValueItem.isSelected = true
                    selectedAttrValueIdList.value.push(attrValueItem.attrValueId)
                  }
                })
              })
            }
          })
        })
      }
      shopInfo.value = res.list[0].shopInfo
      paging.value.complete(res.list[0].spus)
    } else {
      paging.value.complete([])
      brandList.value = []
      attrList.value = []
      shopInfo.value = ''
    }

    // 分类列表
    categoryVO.forEach((item) => {
      item.isSelected = false
    })
    categoryList.value = categoryVO
    // 回显
    categoryList.value.forEach((item) => {
      if (item.categoryId == selectedCategoryItem.value) {
        item.isSelected = true
      }
    })
  })
}

// 展示品牌筛选条件的文字
const onShowBrandConditonText = () => {
  let result = ''
  if (selectedBrandItem.value === '') {
    result = '品牌'
  } else {
    // 这里有个问题，触发了两遍
    const selectedBrandItemList = selectedBrandItem.value.split('||')
    const brandListValue = brandList.value
    // 筛选出两个数组相同的元素
    const showBrandList = brandListValue.filter(function (n) {
      return selectedBrandItemList.indexOf((n.brandId + '')) != -1
    })
    showBrandList.forEach((item, index, list) => {
      if ((index + 1) < list.length) {
        result += item.brandName + ','
      } else {
        result += item.brandName
      }
    })
  }
  return result
}

// 展示分类筛选条件的文字
const onShowCategoryConditionText = () => {
  let result = ''
  if (selectedCategoryItem.value === '') {
    result = '类别'
  } else {
    const selectedCategoryItemValue = selectedCategoryItem.value
    const categoryListValue = categoryList.value
    for (let i = 0; i < categoryListValue.length; i++) {
      if (Number(categoryListValue[i].categoryId) === Number(selectedCategoryItemValue)) {
        result = categoryListValue[i].name
        break
      }
    }
    result = result || categoryName.value
  }
  return result
}

// 展示属性筛选条件的文字
const onShowAttrConditionText = (index) => {
  let result = ''
  const isActive = attrList.value[index].isActive
  if (isActive) {
    attrList.value[index].attrValues.forEach((item) => {
      if (item.isSelected === true) {
        result += item.attrValueName + ','
      }
    })
    result = result.slice(0, result.length - 1)
  } else {
    result = attrList.value[index].attrName
  }
  return result
}

/**
 * 满减折标签文字
 * @param {Number} discountRule 0 满钱减钱 3满件打折
 */
const onDiscountTagText = (discountRule) => {
  if (discountRule.length === 0) return
  const dis = discountRule[0].discountRule
  let result = ''
  if (dis === 0) {
    result = '满减钱'
  } else if (dis === 3) {
    result = '满件折'
  }
  return result
}

/**
 * 优惠券标签文字
 * @param {Object} couponInfo 优惠券信息
 */
const onCouponTagText = (couponInfo) => {
  if (!couponInfo) return ''
  let result = ''
  // couponType 1:代金券 2:折扣券 3:兑换券(目前没有)
  const couponType = couponInfo.couponType
  const cashCondition = couponInfo.cashCondition
  const reduceAmount = couponInfo.reduceAmount
  const couponDiscount = couponInfo.couponDiscount
  if (couponType === 1) {
    result = '满' + ((cashCondition / 100).toFixed(2)) + '元减' + ((reduceAmount / 100).toFixed(2))
  } else if (couponType === 2) {
    result = '满' + ((cashCondition / 100).toFixed(2)) + '元打' + couponDiscount + '折'
  }
  return result
}

/**
 * 展开搜索筛选条件
 * @param {Number} index 0:品牌 1:分类 2:属性
 * @param {Number} attrIndex 属性索引
 */
// 展开项的列表
const openConditionList = ref([])
const onOpenScreenCondition = (index, attrIndex) => {
  if ((openWhichConditionItem.type === index && index !== 2) || (index === 2 && openWhichConditionItem.attrIndex === attrIndex)) {
    // 收起
    onCloseScreenCondition()
  } else {
    // 展开
    onInitScreenConditionState()
    openWhichConditionItem.type = index
    if (index === 0) {
      openWhichConditionItem.attrIndex = ''
      openConditionList.value = JSON.parse(JSON.stringify(brandList.value))
      selectedBrandList.value = selectedBrandItem.value ? selectedBrandItem.value.split('||') : []
    } else if (index === 1) {
      openWhichConditionItem.attrIndex = ''
      openConditionList.value = JSON.parse(JSON.stringify(categoryList.value))
    } else if (index === 2) {
      openWhichConditionItem.attrIndex = attrIndex
      openConditionList.value = JSON.parse(JSON.stringify(attrList.value[attrIndex].attrValues))
      selectedAttrId.value = attrList.value[attrIndex].attrId
      const tempSelectedAttrValueIdList = []

      // 把回显的属性id加入selectAttrValueIdList
      for (let i = 0; i < openConditionList.value.length; i++) {
        if (openConditionList.value[i].isSelected === true) {
          tempSelectedAttrValueIdList.push(openConditionList.value[i].attrValueId)
        }
      }
      selectedAttrValueIdList.value = tempSelectedAttrValueIdList
    }
  }
}

// 选择/取消筛选条件
const onSelectOrCancelCondition = (index) => {
  // type 0:品牌 1:分类 2:属性
  const type = openWhichConditionItem.type
  switch (type) {
    case 0: {
      const selectedBrandId = openConditionList.value[index].brandId
      openConditionList.value[index].isSelected = !openConditionList.value[index].isSelected
      if (openConditionList.value[index].isSelected === true) {
        selectedBrandList.value.push(selectedBrandId)
      } else {
        for (let i = 0; i < selectedBrandList.value.length; i++) {
          if (Number(selectedBrandList.value[i]) === Number(selectedBrandId)) {
            selectedBrandList.value.splice(i, 1)
            return
          }
        }
      }
      break
    }
    case 1:{
      if (openConditionList.value[index].isSelected) {
        openConditionList.value[index].isSelected = false
        categoryList.value[index].isSelected = false
        selectedCategoryId.value = ''
        return
      }
      openConditionList.value.forEach((item) => {
        item.isSelected = false
      })
      const selectedCategoryIdValue = openConditionList.value[index].categoryId
      selectedCategoryId.value = selectedCategoryIdValue
      openConditionList.value[index].isSelected = !openConditionList.value[index].isSelected
      categoryList.value = openConditionList.value
      break
    }
    case 2: {
      const attrValueId = openConditionList.value[index].attrValueId
      openConditionList.value[index].isSelected = !openConditionList.value[index].isSelected

      // 选中或取消选中属性值
      if (openConditionList.value[index].isSelected) {
        selectedAttrValueIdList.value.push(attrValueId)
      } else {
        for (const i in selectedAttrValueIdList.value) {
          if (selectedAttrValueIdList.value[i] === attrValueId) {
            selectedAttrValueIdList.value.splice(i, 1)
            break
          }
        }
      }
      break
    }
  }
}

// 重置筛选选中项
const onResetScreenCondition = () => {
  // type 0:品牌 1:分类 2:属性
  const type = openWhichConditionItem.type
  openConditionList.value.forEach((item) => {
    item.isSelected = false
  })
  switch (type) {
    case 0:
      selectedBrandList.value = []
      break
    case 1:
      selectedCategoryId.value = ''
      break
    case 2:
      selectedAttrValueIdList.value = []
      break
  }
}

// 确定筛选条件
const onConfirmScreenCondition = () => {
  // type 0:品牌 1:分类 2:属性
  const type = openWhichConditionItem.type
  let selectedBrandItemValue = ''
  let selectedCategoryItemValue = ''
  let selectedAttrItemValue = ''
  switch (type) {
    case 0:{
      let tempSeletedBrandItem = ''
      for (let i = 0; i < selectedBrandList.value.length; i++) {
        if ((i + 1) < selectedBrandList.value.length) {
          tempSeletedBrandItem += selectedBrandList.value[i] + '||'
        } else {
          tempSeletedBrandItem += selectedBrandList.value[i]
        }
      }
      selectedBrandItemValue = tempSeletedBrandItem
      break
    }
    case 1: {
      const index = openConditionList.value.findIndex(item => Number(selectedCategoryId.value) === item.categoryId)
      if (index < 0) {
        selectedCategoryId.value = ''
      }
      selectedCategoryItemValue = selectedCategoryId.value
      categoryName.value = ''
      break
    }
    case 2:{
      // 处理属性的参数
      const selectedAttrIdValue = selectedAttrId.value
      const selectedAttrValueIdListValue = selectedAttrValueIdList.value
      if (selectedAttrIdValue && selectedAttrValueIdListValue.length > 0) {
        let selectedAttrValueIdStr = ''
        for (let i = 0; i < selectedAttrValueIdList.value.length; i++) {
          if ((i + 1) < selectedAttrValueIdList.value.length) {
            selectedAttrValueIdStr += selectedAttrValueIdList.value[i] + '||'
          } else {
            selectedAttrValueIdStr += selectedAttrValueIdList.value[i]
          }
        }
        if (selectedAttrItem.value) {
          const attrItemArr = selectedAttrItem.value.split('^')
          let isInSelectedAttrItem = false
          let tempSelectedAttrItem = ''
          for (let i = 0; i < attrItemArr.length; i++) {
            const attrId = attrItemArr[i].split('_')[0]
            if (Number(attrId) === Number(selectedAttrIdValue)) {
              attrItemArr[i] = attrItemArr[i].split('_')[0] + '_' + selectedAttrValueIdStr
              isInSelectedAttrItem = true
            }
            if ((i + 1) < attrItemArr.length) {
              tempSelectedAttrItem += attrItemArr[i] + '^'
            } else {
              tempSelectedAttrItem += attrItemArr[i]
            }
          }
          selectedAttrItemValue = isInSelectedAttrItem ? tempSelectedAttrItem : tempSelectedAttrItem + '^' + selectedAttrIdValue + '_' + selectedAttrValueIdStr
        } else {
          selectedAttrItemValue = selectedAttrIdValue + '_' + selectedAttrValueIdStr
        }
      } else {
        if (selectedAttrItem.value) {
          const selectedAttrIdValue = selectedAttrId.value
          const attrItemArr = selectedAttrItem.value.split('^')
          const selectedAttrArr = []
          for (let i = 0; i < attrItemArr.length; i++) {
            const attrId = attrItemArr[i].split('_')[0]
            if (Number(attrId) !== Number(selectedAttrIdValue)) {
              selectedAttrArr.push(attrItemArr[i])
            }
          }
          for (let i = 0; i < selectedAttrArr.length; i++) {
            if ((i + 1) < selectedAttrArr.length) {
              selectedAttrItemValue += selectedAttrArr[i] + '^'
            } else {
              selectedAttrItemValue += selectedAttrArr[i]
            }
          }
        } else {
          selectedAttrItemValue = ''
        }
      }
      break
    }
  }

  // 处理原本已经有筛选条件情况下的判断
  selectedBrandItem.value = type !== 0 ? selectedBrandItem.value : selectedBrandItemValue // 品牌
  selectedCategoryItem.value = type !== 1 ? selectedCategoryItem.value : selectedCategoryItemValue // 分类
  selectedAttrItem.value = type !== 2 ? selectedAttrItem.value : selectedAttrItemValue // 属性

  // 防止未点击分类关键词时弹窗要点两次弹开 已经样式不变化
  onCloseScreenCondition()
  onToSearchList()
}

// 关掉浮起的内容
const onCloseScreenCondition = () => {
  isOpenAllScreenFrame.value = false
  openWhichConditionItem.type = ''
  openWhichConditionItem.attrIndex = ''
  onInitScreenConditionState()
}

// 初始化筛选条件的状态
const onInitScreenConditionState = () => {
  openConditionList.value = [] // 展开筛选条件的列表
  selectedBrandList.value = [] // 选中品牌列表
  selectedAttrId.value = '' // 选中属性id
}

// 展开筛选框(所有项)
const onOpenAllScreenFrame = () => {
  onCloseScreenCondition()
  isOpenAllScreenFrame.value = true
  // 初始化值
  isSelfShop.value = initSelfShop.value
  isHasStock.value = initHasStock.value
  minPriceInp.value = initMinPriceInp.value
  maxPriceInp.value = initMaxPriceInp.value
  otherBrandList.value = JSON.parse(JSON.stringify(brandList.value))
  otherCategoryList.value = JSON.parse(JSON.stringify(categoryList.value))
  otherAttrList.value = JSON.parse(JSON.stringify(attrList.value))
}

/**
 * 选中/取消筛选条件
 * @param {Number} type 0:品牌 1:分类 2:属性 3:商城自营 4:仅看有货
 */
const onSelectScreenCondition = (type, index, attrValueIndex) => {
  switch (type) {
    case 0:
      otherBrandList.value[index].isSelected = !otherBrandList.value[index].isSelected
      break
    case 1:
      if (otherCategoryList.value[index].isSelected === true) {
        otherCategoryList.value[index].isSelected = false
        return
      }
      otherCategoryList.value.forEach((item) => {
        item.isSelected = false
      })
      otherCategoryList.value[index].isSelected = !otherCategoryList.value[index].isSelected
      break
    case 2:
      otherAttrList[index].attrValues[attrValueIndex].isSelected = !otherAttrList.value[index].attrValues[attrValueIndex].isSelected
      break
    case 3:
      isSelfShop.value = !isSelfShop.value
      break
    case 4:
      isHasStock.value = !isHasStock.value
      break
  }
}

// 重置所有筛选条件
const onResetAllScreenCondition = () => {
  // 商城自营和仅看有货
  isSelfShop.value = false
  isHasStock.value = false
  // 价格
  minPriceInp.value = ''
  maxPriceInp.value = ''
  // 品牌
  otherBrandList.value.forEach((item) => {
    item.isSelected = false
  })
  // 分类
  otherCategoryList.value.forEach((item) => {
    item.isSelected = false
  })
  // 属性
  otherAttrList.value.forEach((attrItem) => {
    attrItem.attrValues.forEach((attrValueItem) => {
      attrValueItem.isSelected = false
    })
  })
}

// 确定所有筛选条件
const onConfirmAllScreenCondition = () => {
  // 商城自营和仅看有货
  selfShop.value = isSelfShop.value ? 1 : ''
  hasStock.value = isHasStock.value ? 1 : ''

  // 品牌
  let selectedBrandItemValue = ''
  otherBrandList.value.forEach((item) => {
    if (item.isSelected) {
      selectedBrandItemValue += item.brandId + '||'
    }
  })
  selectedBrandItemValue = selectedBrandItemValue ? selectedBrandItemValue.substring(0, selectedBrandItemValue.length - 2) : ''
  selectedBrandItem.value = selectedBrandItemValue

  // 分类
  let selectedCategoryItemValue = ''
  for (let i = 0; i < otherCategoryList.value.length; i++) {
    if (otherCategoryList.value[i].isSelected) {
      selectedCategoryItemValue = otherCategoryList.value[i].categoryId
      break
    }
  }
  selectedCategoryItem.value = selectedCategoryItemValue

  // 属性
  const attrList = otherAttrList.value
  let selectedAttrItemValue = ''
  attrList.forEach((attrItem) => {
    let selectedAttrValueItem = ''
    let isHaveSelectedItem = false
    attrItem.attrValues.forEach((attrValueItem) => {
      if (attrValueItem.isSelected) {
        isHaveSelectedItem = true
        selectedAttrValueItem += attrValueItem.attrValueId + '||'
      }
    })
    selectedAttrValueItem = isHaveSelectedItem ? selectedAttrValueItem.substring(0, selectedAttrValueItem.length - 2) : ''
    selectedAttrItemValue += isHaveSelectedItem ? attrItem.attrId + '_' + selectedAttrValueItem + '^' : ''
  })
  selectedAttrItemValue = selectedAttrItemValue.substring(0, selectedAttrItemValue.length - 1)
  selectedAttrItem.value = selectedAttrItemValue

  onToSearchList()
}

/**
 * 切换搜索条件
 * @param {Number} state 0:商品(默认) 1:商品销量排序 2:商品价格排序 3:店铺
 */
const onSwitchSearchList = (state) => {
  switch (state) {
    case 0:
      sort.value = ''
      break
    case 1:
      sort.value = sort.value === 2 ? 3 : 2
      break
    case 2:
      sort.value = sort.value === 4 ? 5 : 4
      break
    case 3:
      sort.value = 9
      break
  }
  onToSearchList()
}

/**
 * 限制价格筛选输入框的范围
 * @param {String} mark min:最小价格输入框 max:最大价格输入框
 */
const onLimitPriceRange = (mark) => {
  let limitPrice = ''
  if (mark === 'min') {
    limitPrice = minPriceInp.value
  } else {
    limitPrice = maxPriceInp.value
  }

  // 获取小数点后的数量
  const count = onJudgeDecimalLength(limitPrice)
  if (limitPrice > 0 && limitPrice < 0.01) {
    limitPrice = 0.01
  } else if (count > 2) {
    limitPrice = Number(limitPrice).toFixed(2)
  } else if (limitPrice > 100000000) {
    limitPrice = 100000000
  }

  setTimeout(() => {
    if (mark === 'min') {
      minPriceInp.value = limitPrice
    } else {
      maxPriceInp.value = limitPrice
    }
  }, 0)
}

/**
 * 判断一个数是多少位小数
 * @param {Number} num 数字
 * @returns {Number} count 小数点后的数字长度
 */
const onJudgeDecimalLength = (num) => {
  const dotSite = String(num).indexOf('.') + 1
  const count = dotSite > 0 ? String(num).length - dotSite : 0
  return count
}

// 切换商品列表样式
const isLineProds = ref(true) // 列表格式，默认横排展示
const onChangeListStyle = () => {
  isLineProds.value = !isLineProds.value
}

// 修改搜索参数
const onToSearchList = () => {
  const options = {
    keyword: keyword.value, // 关键字
    minPrice: minPriceInp.value, // 最小价格
    maxPrice: maxPriceInp.value, // 最大价格
    shop: selfShop.value, // 是否是自营店
    stock: hasStock.value, // 是否有库存
    sort: sort.value, // 排序
    bids: selectedBrandItem.value, // 品牌
    cid: selectedCategoryItem.value, // 分类
    cName: categoryName.value, // 分类名称
    aids: selectedAttrItem.value, // 属性
    cid2: secondaryCategoryId.value
  }
  onHandleLinkParams(options)
  paging.value.reload()
}

/**
 * 跳转到搜索页
 * @param {Number} type 0:删除关键词跳转 1:直接跳转
 */
const onToSearchPage = (type) => {
  const url = type === 0 ? `/pages/search-page/search-page?type=${searchType.value}` : `/pages/search-page/search-page?keyword=${encodeURIComponent(keyword.value)}&type=${searchType.value}`
  uni.redirectTo({ url })
}

// 跳转到店铺页
const onToShopPage = (shopId) => {
  onGetShopInfo(shopId)
}

/**
* 获取店铺信息
*/
const onGetShopInfo = (shopId) => {
  const params = {
    url: '/tmerclub_admin/ua/shop_detail/head_info',
    method: 'GET',
    data: {
      shopId,
      imgType: 0 // 图片类型：0.app(h5) 1.pc
    }
  }
  http.request(params).then((res) => {
    uni.setStorageSync('cloudShopInfo', res)
    uni.redirectTo({
      url: res.renovationId ? '/package-shop/shop-page/feature-index/feature-index?shopId=' + res.shopId + '&renovationId=' + res.renovationId : '/package-shop/shop-page/shop-index/shop-index?shopId=' + shopId
    })
  })
}

// 跳转到商品详情页
const onToProdDetailPage = (spuId) => {
  uni.navigateTo({
    url: '/pages/detail/detail?spuId=' + spuId
  })
}

</script>

<style lang="scss" scoped>
@use './search-list.scss';
</style>