<template>
  <scroll-view class="main" scroll-y @scroll="handlePageScroll" :scroll-into-view="scrollView" scroll-with-animation
    @scrolltolower="handleScrollBottom" :style="{
      backgroundImage:
        pageType === 'UnionMall'
          ? 'url(https://eshangtech.com/minTestImg/pageBg.png)'
          : 'url(https://eshangtech.com/minTestImg/pageBg.png)',
    }">
    <div class="meng" v-if="showExportFun" @click="handleHideExportFun"></div>


    <div id="navItem" class="header" :style="{
      paddingTop: menu.top + menu.height + 'px',
      backgroundImage:
        pageType === 'UnionMall'
          ? 'url(https://eshangtech.com/minTestImg/pageBg.png)'
          : 'url(https://eshangtech.com/minTestImg/pageBg.png)',
      backgroundSize:
        pageType === 'UnionMall' ? '100% 100vh' : '100% 100vh',
      paddingBottom: '16rpx'
    }">
      <view class="headerTop" :style="{
        height: menu.height + menu.top + 4 + 'px',
        paddingTop: menu.top + 'px',
        paddingBottom: 4 + 'px',
        backgroundImage:
          pageType === 'UnionMall'
            ? 'url(https://eshangtech.com/minTestImg/pageBg.png)'
            : 'url(https://eshangtech.com/minTestImg/pageBg.png)',
        backgroundSize:
          pageType === 'UnionMall' ? '100% 100vh' : '100% 100vh',
      }">
        <view class="backArrowBox">
          <image class="backArrow"
            :src="pageType === 'UnionMall' ? '/static/images/home/backArrowblack.svg' : '/static/images/home/backArrowblack.svg'"
            @click="handleBackHome" />
          <view class="line"></view>
          <!-- <image class="img" src="/static/images/home/export.svg" @click="handleShowExportBox" /> -->
          <image class="img" style="width: 40rpx;height: 40rpx;margin-left: 8rpx;"
            src="https://eshangtech.com/cyy_DIB/backHomeICon.png" @click="handleShowExportBox" />
        </view>
        <!-- <image class="backArrow"
          :src="pageType === 'UnionMall' ? '/static/images/home/backArrowWhite.svg' : '/static/images/home/backArrowblack.svg'"
          @click="handleBackHome" /> -->
        <view class="pageName" :style="{ color: pageType === 'UnionMall' ? '#000' : '#000' }">{{
          pageType === "UnionMall" ? "工会之家" : "彩云驿商城"
        }}</view>
        <view class="backArrowBox" style="background-color: transparent;border: none;"></view>

        <view class="moreFunBox" :style="{ top: showExportObj.y + 20 + 'px' }" v-if="showExportFun">
          <view class="triangle"></view>
          <view class="funList">
            <view class="funItem" v-for="(item, index) in funList" :key="index" @click="handleExpentGo(item)">
              <image class="funItemIcon" :src="item.src" />
              <text class="funItemText" :style="{
                border: index + 1 === funList.length ? 'none' : '',
              }">{{ item.label }}</text>
            </view>
          </view>
        </view>
      </view>

      <scroll-view class="typeBox" scroll-x v-if="showContent">
        <div :class="pageType === 'UnionMall' ? 'contentBox' : 'contentBox contentBox2'" :style="{
          height:
            shopTypeList.length < 5
              ? '144rpx'
              : shopTypeList.length === 5
                ? Math.ceil(6 / 5) * 144 +
                (Math.ceil(6 / 5) - 1) * 42 +
                60 +
                'rpx'
                : Math.ceil(shopTypeList.length / 5) * 144 +
                (Math.ceil(shopTypeList.length / 5) - 1) * 42 +
                60 +
                'rpx',
        }">
          <!-- height:
              shopTypeList.length < 5
                ? '144rpx'
                : Math.ceil(shopTypeList.length / 5) * 144 +
                  (Math.ceil(shopTypeList.length / 5) - 1) * 42 +
                  60 +
                  'rpx', -->

          <!-- :style="{
            width:
              shopTypeList.length <= 5
                ? '100%'
                : shopTypeList.length * 136 + 60 + 'rpx',
          }" -->
          <!-- 工会之家 -->
          <div class="rowBox" @click="handleGoUnionMall"
            v-if="pageType !== 'UnionMall' && user && user.INDUSTRY_MEMBERSHIP_ID">
            <!-- && user && user.INDUSTRY_MEMBERSHIP_ID -->
            <div class="imgBox">
              <div class="itemImgBox">
                <image class="img" src="https://eshangtech.com/caiyunyiImg/home/unionMallIcon.svg"></image>
              </div>
            </div>
            <div class="itemName">工会之家</div>
          </div>

          <div class="rowBox" v-for="(item, index) in shopTypeList" :key="index" @click="handleGoShopPage(item, index)"
            :style="{
              // width: pageType === 'UnionMall' ? '25%' : '20%',
              width: pageType === 'UnionMall' ? '25%' : '20%',
              marginBottom:
                pageType === 'UnionMall' &&
                  index < Math.ceil(shopTypeList.length / 4 - 1) * 4
                  ? '44rpx'
                  : '',
              marginTop: pageType !== 'UnionMall' && index >= 4 ? '44rpx' : '',
            }">
            <div class="imgBox">
              <div class="itemImgBox">
                <image class="img" :src="item.UserdefinedType_ICO ||
                  '/static/images/home/defultImg.png'
                  "></image>
              </div>
            </div>
            <div class="itemName">{{ item.UserdefinedType_Name }}</div>
          </div>

          <!-- 积分商城 -->
          <div class="rowBox" @click="handleGoPointsMall" v-if="pageType !== 'UnionMall'">
            <div class="imgBox">
              <div class="itemImgBox">
                <image class="img" src="https://eshangtech.com/caiyunyiImg/home/markShopIcon.png"></image>
              </div>
            </div>
            <div class="itemName">积分商城</div>
          </div>

          <!-- <div
            class="rowBox"
            :style="{
              width: oneRowNumber <= 5 ? 'calc(20% - 6px)' : '136rpx',
              paddingRight:
                index + 1 === oneRowNumber || index + 1 === oneRowNumber * 2
                  ? '0'
                  : '40rpx',
              marginBottom: index + 1 > oneRowNumber ? '0' : '40rpx',
            }"
            v-for="(item, index) in shopTypeList"
            :key="index"
            @click="handleGoShopPage(item, index)"
          >
            <div class="imgBox">
              <div class="itemImgBox">
                <image
                  class="img"
                  :src="
                    item.UserdefinedType_ICO ||
                    '/static/images/home/defultImg.png'
                  "
                ></image>
              </div>
            </div>
            <div class="itemName">{{ item.UserdefinedType_Name }}</div>
          </div> -->
        </div>
      </scroll-view>
    </div>

    <!-- 商城页面骨架屏 -->
    <view class="shop-skeleton" v-if="!showContent">
      <!-- 商品分类骨架 (对应 contentBox) -->
      <view class="skeleton-content-box">
        <view class="skeleton-category-grid">
          <view class="skeleton-category-item" v-for="index in 6" :key="index">
            <view class="skeleton skeleton-category-icon"></view>
            <view class="skeleton skeleton-category-text"></view>
          </view>
        </view>
      </view>

      <!-- 每周特惠骨架 -->
      <view class="skeleton-section">
        <view class="skeleton-section-header">
          <view class="skeleton skeleton-section-title"></view>
          <view class="skeleton skeleton-more-button"></view>
        </view>
        <view class="skeleton-horizontal-list">
          <view class="skeleton-horizontal-item" v-for="index in 4" :key="index">
            <view class="skeleton skeleton-horizontal-image"></view>
            <view class="skeleton skeleton-horizontal-price"></view>
          </view>
        </view>
      </view>

      <!-- 自有品牌骨架 -->
      <view class="skeleton-section">
        <view class="skeleton-section-header">
          <view class="skeleton skeleton-section-title"></view>
          <view class="skeleton skeleton-more-button"></view>
        </view>
        <view class="skeleton-horizontal-list">
          <view class="skeleton-horizontal-item" v-for="index in 4" :key="index">
            <view class="skeleton skeleton-horizontal-image"></view>
            <view class="skeleton skeleton-horizontal-price"></view>
          </view>
        </view>
      </view>

      <!-- 商品网格骨架 -->
      <view class="skeleton-grid">
        <view class="skeleton-grid-item" v-for="index in 8" :key="index">
          <view class="skeleton skeleton-product-image"></view>
          <view class="skeleton skeleton-product-name"></view>
          <view class="skeleton skeleton-product-price"></view>
        </view>
      </view>
    </view>

    <div class="pageContent" v-if="showContent">
      <!-- 公告 -->
      <div class="noticeBox" @click="handleGoNotice" v-if="false">
        <div class="noticeLeft">
          <image class="noticeIcon" src="/static/images/home/noticeIcon.png" />
          <text class="noticeTitle">公告</text>
          <text class="noticeContent">2025年春节购物通知</text>
        </div>
        <div class="noticeRight">
          <image class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/rightArrow.png" />
        </div>
      </div>

      <!-- 活动 -->
      <div class="advertisement" v-if="haveActivity && false" :style="{
        background: pageType !== 'UnionMall' ? '#fff' : 'transparent',
        marginTop: 0
      }">
        <div class="advertisementContentBox" v-if="pageType !== 'UnionMall'" @click="handleGoActivityType">
          <div class="advertisementTop">
            <div class="title">
              {{ activityObj.UserdefinedType_Name || "" }}
              <!-- <image
                class="titleImg"
                src="https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/title1st.png"
              /> -->
            </div>
            <!-- <div class="moreBox">
              <text class="moreText">低价爆品天天有</text>
              <image
                class="rightIcon"
                src="https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/rightArrow.png"
              />
            </div> -->
          </div>

          <scroll-view class="shopList" scroll-x v-if="activityShopList && activityShopList.length > 0">
            <!--                        @click="handleGoShop(item)"-->
            <div :style="{
              width: activityShopList.length * 160 + 'rpx',
              height: '100%',
              whiteSpace: 'noWrap',
            }">
              <div class="shopItem" v-for="(item, index) in activityShopList" :key="index"
                @click.stop="handleGoShopDetail(item)">
                <div class="shopItemImg">
                  <div class="imgBox">
                    <image class="shopImg" :src="item.IMAGE_PATH || '/static/images/home/defultImg.png'
                      " />
                  </div>
                  <text class="discountedPrice">¥{{ item.bigNumber || "" }}.{{
                    item.smallNumber || "00"
                  }}</text>
                </div>
                <!--                            <text class="price">¥15.99</text>-->
              </div>
            </div>
          </scroll-view>
        </div>
      </div>

      <!-- 活动套餐  图片  不是工会商城的时候显示-->
      <div v-if="pageType !== 'UnionMall'" class="advertisementSecond"
        :style="{ height: showModalActivityImg ? '240rpx' : '' }" @click="handleGoShopPage({}, 3)">
        <image style="width:100%;height:100%;border-radius: 16rpx;" :lazy-load="true"
          src="https://eshangtech.com/caiyunyiImg/indexTopBg2.jpg" @load="handleShowModalActivityImg" />
      </div>

      <!--  活动专区  -->
      <div class="advertisement" v-if="pageType !== 'UnionMall'" :style="{
        background: pageType !== 'UnionMall' ? '#fff' : 'transparent',
      }">
        <div class="advertisementContentBox" v-if="pageType !== 'UnionMall'" @click="handleGoShopPage({}, 3)">
          <div class="advertisementTop">
            <div class="title">
              活动专区
              <!-- <image class="titleImg" src="https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/title1st.png" /> -->
            </div>
            <div class="moreBox">
              <!-- <text class="moreText">低价爆品天天有</text> -->
              <image class="rightIcon" src="https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/rightArrow.png" />
            </div>
          </div>

          <scroll-view class="shopList" scroll-x>
            <!--                        @click="handleGoShop(item)"-->
            <div :style="{
              width: marketingCampaign.slice(0, 5).length * 160 + 'rpx',
              height: '100%',
              whiteSpace: 'noWrap',
            }">
              <div class="shopItem" v-for="(item, index) in marketingCampaign.slice(0, 5)" :key="index"
                @click.stop="handleGoShopDetail(item)">
                <div class="shopItemImg">
                  <div class="imgBox">
                    <image class="shopImg"
                      :src="item.IMAGE_PATH ? item.IMAGE_PATH.split(',') && item.IMAGE_PATH.split(',').length > 1 ? item.IMAGE_PATH.split(',')[0] : item.IMAGE_PATH : '/static/images/home/defultImg.png'" />
                  </div>
                  <text class=" discountedPrice">¥{{ item.bigNumber || "" }}.{{
                    item.smallNumber || "00"
                  }}</text>
                </div>
                <!--                            <text class="price">¥15.99</text>-->
              </div>
            </div>
          </scroll-view>
        </div>

        <div class="advertisementContentBox" v-if="pageType !== 'UnionMall'" @click="handleGoShopList(4597, 0)">
          <div class="advertisementTop">
            <div class="title">
              每周特惠
              <!-- <image class="titleImg" src="https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/title1st.png" /> -->
            </div>
            <div class="moreBox">
              <!-- <text class="moreText">低价爆品天天有</text> -->
              <image class="rightIcon" src="https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/rightArrow.png" />
            </div>
          </div>

          <scroll-view class="shopList" scroll-x>
            <!--                        @click="handleGoShop(item)"-->
            <div :style="{
              width: weeklySpecialOffer.slice(0, 10).length * 160 + 'rpx',
              height: '100%',
              whiteSpace: 'noWrap',
            }">
              <div class="shopItem" v-for="(item, index) in weeklySpecialOffer.slice(0, 10)" :key="index"
                @click.stop="handleGoShopDetail(item)">
                <div class="shopItemImg">
                  <div class="imgBox">
                    <image class="shopImg"
                      :src="item.IMAGE_PATH ? item.IMAGE_PATH.split(',') && item.IMAGE_PATH.split(',').length > 1 ? item.IMAGE_PATH.split(',')[0] : item.IMAGE_PATH : '/static/images/home/defultImg.png'" />
                  </div>
                  <text class=" discountedPrice">¥{{ item.bigNumber || "" }}.{{
                    item.smallNumber || "00"
                  }}</text>
                </div>
                <!--                            <text class="price">¥15.99</text>-->
              </div>
            </div>
          </scroll-view>
        </div>
      </div>

      <!--  特价优惠  -->
      <div class="advertisement" :style="{
        background: pageType !== 'UnionMall' ? '#fff' : 'transparent',
      }">
        <div class="advertisementContentBox" v-if="pageType !== 'UnionMall'" @click="handleGoShopList(3186, 1)">
          <div class="advertisementTop">
            <div class="title">
              绿色云品
              <!-- <image class="titleImg" src="https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/title1st.png" /> -->
            </div>
            <div class="moreBox">
              <!-- <text class="moreText">低价爆品天天有</text> -->
              <text class="moreText">更多</text>
              <image class="rightIcon" src="https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/rightArrow.png" />
            </div>
          </div>

          <scroll-view class="shopList" scroll-x>
            <!--                        @click="handleGoShop(item)"-->
            <div :style="{
              width: specialOffersList.slice(0, 10).length * 160 + 'rpx',
              height: '100%',
              whiteSpace: 'noWrap',
            }">
              <div class="shopItem" v-for="(item, index) in specialOffersList.slice(0, 10)" :key="index"
                @click.stop="handleGoShopDetail(item)">
                <div class="shopItemImg">
                  <div class="imgBox">
                    <image class="shopImg"
                      :src="item.IMAGE_PATH ? item.IMAGE_PATH.split(',') && item.IMAGE_PATH.split(',').length > 1 ? item.IMAGE_PATH.split(',')[0] : item.IMAGE_PATH : '/static/images/home/defultImg.png'" />
                  </div>
                  <text class="discountedPrice">¥{{ item.bigNumber || "" }}.{{
                    item.smallNumber || "00"
                  }}</text>
                </div>
                <!--                            <text class="price">¥15.99</text>-->
              </div>
            </div>
          </scroll-view>
        </div>

        <!-- 工会之家的时候 显示排行榜 -->

        <div class="sortBox" v-if="pageType === 'UnionMall'">
          <div class="leftSortBox" @click="handleGoSortList(1)" v-if="newShopList && newShopList.length > 0"
            :style="{ width: hotShopList && hotShopList.length > 0 ? '' : goodShopList && goodShopList.length > 0 ? 'calc(50% - 16rpx)' : '100%' }">
            <div class="titleTopSort">
              <!-- 新品榜 -->
              <text class="title"><text style="color: red">新</text>品榜</text>
            </div>
            <div class="notice">超多优惠等你来</div>
            <view class="shopList">
              <view class="shopItem" v-for="(item, index) in newShopList" :key="index"
                :style="{ marginRight: index + 1 === goodShopList.length ? '' : '16rpx' }">
                <image class="shopImg" :src="item.IMAGE_PATH" @click.stop="handleGoShopDetail(item)" />
              </view>
            </view>
          </div>

          <div class="rightItem bg2" style="margin-right: 16rpx" @click="handleGoSortList(2)"
            :style="{ width: goodShopList && goodShopList.length > 0 ? '' : newShopList && newShopList.length > 0 ? 'calc(50% - 16rpx)' : '100%' }"
            v-if="hotShopList && hotShopList.length > 0">
            <div class="titleTopSort">
              <text class="title"><text style="color: #ff8000">热</text>销榜</text>
            </div>
            <div class="notice">本地特色</div>
            <view class="shopList">
              <view class="shopItem" v-for="(item, index) in hotShopList" :key="index"
                :style="{ marginRight: index + 1 === goodShopList.length ? '' : '16rpx' }">
                <image class="shopImg" :src="item.IMAGE_PATH" @click.stop="handleGoShopDetail(item)" />
              </view>
            </view>
          </div>

          <div class="rightItem bg3"
            :style="{ width: hotShopList && hotShopList.length > 0 ? '' : newShopList && newShopList.length > 0 ? 'calc(50% - 16rpx)' : '100%' }"
            style="" @click="handleGoSortList(3)" v-if="goodShopList && goodShopList.length > 0">
            <div class="titleTopSort">
              <text class="title"><text style="color: #1ca038">推</text>荐榜</text>
            </div>
            <div class="notice">本地特色</div>
            <view class="shopList">
              <view class="shopItem" v-for="(item, index) in goodShopList" :key="index"
                :style="{ marginRight: index + 1 === goodShopList.length ? '' : '16rpx' }">
                <image class="shopImg" :src="item.IMAGE_PATH" @click.stop="handleGoShopDetail(item)" />
              </view>
            </view>
          </div>
        </div>

        <!-- <div class="advertisementContentBox" v-if="pageType === 'UnionMall'">
          <div class="advertisementTopUnionMall">
            <div class="title">商品排行</div>
            <div class="moreBox">
              <image class="rightIcon" src="https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/rightArrow.png" />
            </div>
          </div>
          <div class="UnionMallShopList"> -->

        <!-- <div class="rowBox" @click="handleGoSortList(1)">
              <div class="imgBox">
                <div class="itemImgBox">
                  <image class="img" src='/static/images/home/defultImg.png'></image>
                </div>
              </div>
              <div class="itemName">新品榜</div>
            </div>
            <div class="rowBox" @click="handleGoSortList(2)">
              <div class="imgBox">
                <div class="itemImgBox">
                  <image class="img" src='/static/images/home/defultImg.png'></image>
                </div>
              </div>
              <div class="itemName">热销榜</div>
            </div>
            <div class="rowBox" @click="handleGoSortList(3)">
              <div class="imgBox">
                <div class="itemImgBox">
                  <image class="img" src='/static/images/home/defultImg.png'></image>
                </div>
              </div>
              <div class="itemName">推荐榜</div>
            </div> -->
        <!-- </div>
        </div> -->
      </div>

      <!--  今日推荐 -->
      <div class="advertisementSecond">
        <div class="advertisementItem" @click="handleGoShopList(3175, 2)" v-if="pageType !== 'UnionMall'">
          <div class="advertisementItemContent">
            <div class="contentTop">
              <div class="title">
                自有品牌
                <!-- <image class="titleImg" src="https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/today3st.png" /> -->
              </div>
              <div class="moreBox">
                <text class="moreText">更多</text>
                <image class="rightIcon" src="https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/rightArrow.png" />
              </div>
            </div>

            <!-- <div class="shopDesc">精品优选</div> -->

            <scroll-view class="shopItemList" scroll-x>
              <div :style="{
                width: todayOffersList.slice(0, 10).length * 160 + 'rpx',
                height: '100%',
                whiteSpace: 'noWrap',
              }">
                <!--                                @click="handleGoShop(item)"-->
                <div class="shopItem" v-for="(item, index) in todayOffersList.slice(0, 10)" :key="index"
                  @click.stop="handleGoShopDetail(item)">
                  <div class="imgBox">
                    <image class="shopImg" :src="item.IMAGE_PATH || '/static/images/home/defultImg.png'
                      " />
                  </div>
                  <text class="shopImgText">¥{{ item.bigNumber || "" }}.{{
                    item.smallNumber || "00"
                  }}</text>
                  <!-- {{ item.bigNumber
                    }}<text class="shopSmallText">{{
                      item.smallNumber ? "." + item.smallNumber : ".00"
                    }}</text> -->
                </div>
              </div>
            </scroll-view>
          </div>
        </div>
        <!-- 精选品牌 -->
        <div class="advertisementItemUnionMall" v-if="pageType === 'UnionMall'">
          <div class="advertisementItemContent">
            <div class="contentTopUnionMall">
              <div class="title">精选品牌</div>
            </div>
            <view class="shopItemList">
              <view class="shopItem" v-for="(item, index) in brandList" :key="index" @click="handleSearchBrand(item)"
                :style="{ marginBottom: index <= 4 ? '16rpx' : '' }">
                <image class="imgBox" :src="item.src" />
                <text class="imgText">{{ item.label }}</text>
                <!-- <view class="imgBox">{{ item.label }}</view> -->
              </view>
            </view>
          </div>
        </div>
      </div>



      <!--  甄选商品  -->
      <div class="allShopList">

        <!-- 新积分商城样式 -->
        <template v-if="pageType !== 'UnionMall' && productsList && productsList.length > 0">
          <div class="advertisementSecond">
            <div class="advertisementItem" @click="handleGoPointsMall" v-if="pageType !== 'UnionMall'">
              <div class="advertisementItemContent">
                <div class="contentTop">
                  <div class="title">
                    积分商城
                    <!-- <image class="titleImg" src="https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/today3st.png" /> -->
                  </div>
                  <div class="moreBox">
                    <text class="moreText">更多</text>
                    <image class="rightIcon" src="https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/rightArrow.png" />
                  </div>
                </div>

                <!-- <div class="shopDesc">精品优选</div> -->

                <scroll-view class="shopItemList" scroll-x>
                  <div :style="{
                    width: productsList.length * 160 + 'rpx',
                    height: '100%',
                    whiteSpace: 'noWrap',
                  }">
                    <!--                                @click="handleGoShop(item)"-->
                    <div class="shopItem" v-for="(item, index) in productsList" :key="index"
                      @click.stop="handleGoShopDetail(item)">
                      <div class="imgBox">
                        <image class="shopImg" :src="item.IMAGE_PATH || '/static/images/home/defultImg.png'
                          " />
                      </div>
                      <text class="shopImgText">¥{{ item.bigNumber || "" }}.{{
                        item.smallNumber || "00"
                      }}</text>
                      <!-- {{ item.bigNumber
                    }}<text class="shopSmallText">{{
                      item.smallNumber ? "." + item.smallNumber : ".00"
                    }}</text> -->
                    </div>
                  </div>
                </scroll-view>
              </div>
            </div>
            <!-- 精选品牌 -->
            <div class="advertisementItemUnionMall" v-if="pageType === 'UnionMall'">
              <div class="advertisementItemContent">
                <div class="contentTopUnionMall">
                  <div class="title">精选品牌</div>
                </div>
                <view class="shopItemList">
                  <view class="shopItem" v-for="(item, index) in brandList" :key="index"
                    @click="handleSearchBrand(item)" :style="{ marginBottom: index <= 4 ? '16rpx' : '' }">
                    <image class="imgBox" :src="item.src" />
                    <text class="imgText">{{ item.label }}</text>
                    <!-- <view class="imgBox">{{ item.label }}</view> -->
                  </view>
                </view>
              </div>
            </div>
          </div>
        </template>


        <!-- 老积分商城样式 -->
        <!-- <template v-if="pageType !== 'UnionMall'"> -->
        <template v-if="false">
          <view class="allShopTitle">积分商城</view>
          <!-- <view class="jfDescBox">
            <image mode="widthFix" class="descImg" src="https://eshangtech.com/ShopICO/ahyd-mall/descImg.png" />
          </view> -->
          <div class="allShopListContent">
            <div class="buyShopItem" v-for="(item, index) in productsList" :key="index"
              @click.stop="handleGoShopDetail(item)">
              <div class="shopImgContent">
                <image class="shopImage" :src="item.IMAGE_PATH" />
              </div>
              <div class="priceBox">
                <div class="shopName">{{ item.COMMODITY_NAME }}</div>
                <!-- <view class="retailPrice"
                  >¥{{ item.RETbigNumber || "" }}.{{
                    item.RETsmallNumber || "00"
                  }}</view
                > -->
                <view style="
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-top: 12rpx;
                  ">
                  <view class="nowPrice">
                    <text class="unit">¥</text>
                    <text class="price">{{ item.bigNumber || "" }}.{{
                      item.smallNumber || "00"
                    }}</text>
                  </view>

                  <view class="shopState" v-if="!(item.COMMODITY_STOCK > 0)">已售罄</view>
                </view>
              </div>
            </div>
          </div>
          <view class="inBottom" v-if="shopMsg.isOver">
            <text class="bottomText">我是有底线的</text>
          </view>
        </template>

        <!-- 随机商品 -->
        <div class="shopLovely" v-if="pageType === 'UnionMall'">
          <!-- :style="{ paddingBottom: `${50}px` }" -->

          <view class="shopLovelyTop">
            <text class="shopLovelyTitle">猜你喜欢</text>
            <view class="shopLovelyRight" @click="handleShowPricePopup">
              <image class="filterIcon" src="/static/images/home/filterIcon.svg" />
              <text class="filterText">筛选</text>
            </view>
          </view>

          <view class="shopLovelyList">
            <!-- scroll-y="true"
            @scrolltolower="handleToBottom" -->
            <view class="shopLovelyItem" v-for="(item, index) in showShopList" :key="index"
              :style="{ marginRight: index % 2 === 0 ? '22rpx' : '' }" @click.stop="handleGoShopDetail(item)">
              <div class="shopImgContent">
                <image class="shopImage"
                  :src="item.IMAGE_PATH ? item.IMAGE_PATH.split(',') && item.IMAGE_PATH.split(',').length > 1 ? item.IMAGE_PATH.split(',')[0] : item.IMAGE_PATH : '/static/images/home/defultImg.png'" />
              </div>
              <div class="priceBox">
                <div class="shopName">{{ item.COMMODITY_NAME }}</div>
                <!-- <view class="retailPrice"
                  >¥{{ item.RETbigNumber || "" }}.{{
                    item.RETsmallNumber || "00"
                  }}</view
                > -->
                <view style="
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-top: 12rpx;
                  ">
                  <view class="nowPrice">
                    <text class="unit">¥</text>
                    <text class="price">{{ item.bigNumber || "" }}.{{
                      item.smallNumber || "00"
                    }}</text>
                  </view>

                  <view class="shopState" v-if="!(item.COMMODITY_STOCK > 0)">已售罄</view>
                </view>
              </div>
            </view>
          </view>
          <view class="inBottom" v-if="showShopList && showShopList.length > 0">
            <text class="bottomText">{{
              shopMsg.isOver ? "我是有底线的" : "下拉加载更多"
            }}</text>
          </view>
        </div>
      </div>
    </div>

    <uni-popup ref="priceRangeRef" @maskClick="handleMaskClick">
      <view class="priceRangeBox" :style="{ bottom: popupBottom + 'px' }">
        <image class="closeIcon" src="/static/images/home/closeIcon.svg" @click="handleClosePricePopup" />
        <view class="sortBox">
          <view class="sortItemBox">
            <view class="sortItemTitle">排序类别</view>
            <picker class="sortItemValue" @change="handleChangeShopSort" :value="selectShopSort"
              :range="shopSortTypeList" range-key="label">
              <view class="picker"> {{ shopSortTypeList[selectShopSort].label }}
                <image class="pickerIcon" src="https://eshangtech.com/caiyunyiImg/bottomArrow.png" />
              </view>
            </picker>
          </view>

          <view class="sortItemBox">
            <view class="sortItemTitle">排序类型</view>
            <picker class="sortItemValue" @change="handleChangeSortType" :value="selectSortType" :range="sortTypeList"
              range-key="label">
              <view class="picker"> {{ sortTypeList[selectSortType].label }}
                <image class="pickerIcon" src="https://eshangtech.com/caiyunyiImg/bottomArrow.png" />
              </view>
            </picker>
          </view>
        </view>
        <view class="titleBox">
          <view class="closeIcon"></view>
          <text class="title">价格区间</text>

        </view>

        <view class="inputBox">
          <view class="inputItem">
            <input placeholder="最低价" v-model="minPrice" type="number" :adjust-position="false" @focus="handleFocus"
              @blur="handleBlur" />
          </view>
          <span class="unit">-</span>
          <view class="inputItem">
            <input placeholder="最高价" v-model="maxPrice" type="number" :adjust-position="false" @focus="handleFocus"
              @blur="handleBlur" />
          </view>
        </view>

        <view class="inputBox" style="box-sizing: border-box; padding-left: 24rpx">
          <input style="width: 100%" placeholder="商品名称" v-model="searchShopName" />
        </view>

        <view class="btnList">
          <view class="cancelBtn" @click="handleReset">重置</view>
          <view class="confirmBtn" @click="handleConfirm">确认</view>
        </view>
      </view>
    </uni-popup>

    <uni-popup ref="noticeRef" v-if="false">
      <view class="noticePopup" @click="handleHidePopup">
        <view class="popupContent">
          <view class="title">尊敬的会员：</view>
          <view class="contentText">因春节期间暂停发货服务，为确保您在本平台良好的购物体验，请您阅知如下购物须知：</view>

          <view class="title textIndent">一、发货服务暂停时间：</view>
          <view class="contentText">期间平台商城所有商品均可正常下单，2025年2月5日起按照下单顺序陆续发货；</view>

          <view class="title textIndent">二、如遇问题，请垂询以下联系方式：</view>
          <view class="contentText">客服顾顾：18788508349</view>
          <view class="contentText">客服晶晶：13508825566</view>
          <view class="contentText">客服值班时间：上午9:00—下午18:00</view>

          <view class="title textIndent">三、会员下单视为接受购物须知；</view>
          <view class="contentText">在2025年春节即将来临之际，云南交投集团经营开发有限公司彩云驿商业管理分公司全体员工提前恭祝您及家人：新春愉快、阖家欢乐！</view>
          <view class="contentText">衷心感谢您对本平台的鼎力支持，我们将为您提供始终如一的优质服务！</view>
        </view>
      </view>
    </uni-popup>

    <!-- 回到顶部 -->
    <view class="backTopBox" v-if="showBackTop && priceRangeRefShow === false" @click="handleGoBack">
      <image class="backIcon" src="/static/images/home/backTopIcon.png" />
    </view>

    <shop-tabbar :page="`/pages/shopMallPage/index/index`" :pageType="pageType" :shopCarLength="shopCarListCount" />
  </scroll-view>
</template>

<script>
import { mapGetters } from "vuex";
import shopTabbar from "../../../components/shopTabbar.vue";
import { useSkeletonControl } from '../../../utils/skeletonManager.js'
export default {
  components: { shopTabbar },
  data() {
    return {
      showContent: false, // 是否显示内容（控制骨架屏切换）
      isFirstLoad: true, // 是否是首次进入页面
      skeletonControl: null, // 骨架屏控制器
      menu: {},
      specialOffersList: [], // 特价优惠
      weeklySpecialOffer: [], // 每周特惠
      marketingCampaign: [], // 营销活动
      todayOffersList: [], // 今日推荐
      shopTypeList: [], // 商品大类数组
      oneRowNumber: 0, // 单行个数
      productsList: [], // 甄选商品
      selectProducts: 0, // 选择的甄选商品类型
      pageType: "", // 页面类型 
      brandList: [
        { label: "蓝月亮", value: 1, src: "https://eshangtech.com/caiyunyiImg/home/1.png" },
        { label: "洁柔", value: 2, src: "https://eshangtech.com/caiyunyiImg/home/2.png" },
        { label: "新希望", value: 3, src: "https://eshangtech.com/caiyunyiImg/home/3.png" },
        { label: "八宝贡", value: 4, src: "https://eshangtech.com/caiyunyiImg/home/4.png" },
        { label: "福临门", value: 5, src: "https://eshangtech.com/caiyunyiImg/home/5.png" },
        { label: "金丝莉", value: 6, src: "https://eshangtech.com/caiyunyiImg/home/6.png" },
        { label: "良品铺子", value: 7, src: "https://eshangtech.com/caiyunyiImg/home/7.png" },
        { label: "云南白药", value: 8, src: "https://eshangtech.com/caiyunyiImg/home/8.png" },
        { label: "德和", value: 9, src: "https://eshangtech.com/caiyunyiImg/home/9.png" },
        { label: "蔬果园", value: 10, src: "https://eshangtech.com/caiyunyiImg/10.png" },
      ], // 热门品牌类型
      minPrice: 10, // 最低价
      maxPrice: 0, // 最高价
      allShopList: [], // 工会之家时拿到的全部商品
      showShopList: [], // 当前显示的全部商品
      pageIndex: 1, // 当前显示几个 10个商品
      shopMsg: {
        pageIndex: 1,
        pageSize: 10,
        isOver: false,
      },
      havePrice: false, // 有无价格区间查询
      newShopList: [], // 新品榜
      hotShopList: [], // 热销榜
      goodShopList: [], // 推荐榜
      shopCarListCount: 0, // 购物车商品数量
      sortType: 0, // 这一次的排序方法
      sortTypeList: [
        "COMMODITYTYPE_CODE",
        "COMMODITY_BARCODE",
        "COMMODITY_ID",
        "COMMODITY_EN",
      ],
      isFirst: false,
      searchShopName: "", // 搜索商品的名称
      showBackTop: false, // 页面滚动距离
      scrollView: "",
      safeHeight: 0, // ios的安全距离
      haveActivity: false, // 是否有活动
      activityObj: {}, // 活动项的具体内容
      activityShopList: [], // 活动商品列表
      priceRangeRefShow: false,
      popupBottom: 0, // 键盘高度
      showExportFun: false, // 显示展开的悬浮框
      showExportObj: {
        x: "", y: ""
      },
      funList: [
        { label: "商城首页", src: "" },
        { label: "", src: "" },
      ],
      showModalActivityImg: false,
      shopSortTypeList: [
        { label: "综合排序", value: 1 },
        { label: "价格排序", value: 2 },
        { label: "销量排序", value: 3 },
        { label: "上架时间排序", value: 4 },
      ],
      selectShopSort: 0,
      sortTypeList: [
        { label: "由低到高", value: 1 },
        { label: "由高到低", value: 2 },
      ],
      selectSortType: 1
    };
  },
  computed: {
    ...mapGetters({
      user: "user",
    }),
  },
  async onLoad(query) {
    // 初始化骨架屏控制
    this.skeletonControl = useSkeletonControl('/pages/shopMallPage/index/index', '')

    console.log("query", query);
    console.log("user", this.user);
    this.menu = uni.getMenuButtonBoundingClientRect();

    // this.pageType = query.pageType;

    // 判断这个用户是不是第一次进入到商城
    let firstEntry = uni.getStorageSync("firstEntry");
    if (firstEntry === "2") {
    } else {
      this.isFirst = true;
      // this.$refs.noticeRef.open("center");
      uni.setStorageSync("firstEntry", "2");
    }
    let safeHeight = uni.getStorageSync("safeHeight");
    if (safeHeight) {
      this.safeHeight = Number(safeHeight);
    }
    this.$utils.addUserBehaviorNew({
      behaviorRecordDesc: "进入了精选商城"
    });
    // if (query && query.recommendCode && query.recommendId) {
    // this.$utils.addUserBehaviorNew(null,true);
    //   console.log("this.globalData", this.globalData);

    //   this.globalData.recommendCode = query.recommendCode;
    //   this.globalData.recommendId = query.recommendId;
    // }
    // this.globalData.recommendCode = 1111;
    // this.globalData.recommendId = 2222;

    // if (query.pageType === "UnionMall") {
    //   const data = await this.$api.$javaGet(
    //     '/third-party/getWeChatGetMallGoodsType',
    //     {
    //       ownerUnitId: 911,
    //       commodityNature: 5070,
    //     }
    //   )
    //   console.log("handleGetShopBigType", data);
    //   let typeList = data.Data.List || [];
    //   let resList = [];
    //   let indexOfList = [1253, 1249, 1250, 3176];

    //   if (typeList && typeList.length > 0) {
    //     typeList.forEach((item) => {
    //       if (indexOfList.indexOf(item.UserdefinedType_Id) !== -1) {
    //         resList.push(item);
    //       }
    //     });
    //   }

    //   this.sortType = Math.floor(Math.random() * this.sortTypeList.length);

    //   this.shopTypeList = resList;

    //   // 拿到榜单的方法
    //   this.handleGetSortList();
    //   // 拿到工会之家的商品列表
    //   this.handleGetUnionShopList();
    // } else {
    // uni.showLoading({
    //   title: "加载中"
    // })
    // 拿到每周优惠的内容
    this.handleGetEveryWeekShop()
    // 拿到模块商品的数据
    this.handleGetModalProducetShop()
    // 拿到顶部商品大类的方法
    await this.handleGetShopBigType();
    // 拿到特价优惠的
    this.handleGetSpecialOffers();
    // 拿到今日推荐的商品列表
    this.handleGetTodayOffers();
    // 最下面的甄选商品
    this.handleGetProductsList();
    if (this.haveActivity) {
      this.handleGetActivityList();
    }
    // uni.hideLoading()
    // }

    if (this.skeletonControl && this.skeletonControl.showSkeleton) {
      setTimeout(async () => {
        if (this.skeletonControl) {
          await this.skeletonControl.showContentAfterLoading(0)
          this.showContent = true;
          this.isFirstLoad = false;
        }
      }, 800);
    } else {
      // 非首次访问直接显示内容
      this.showContent = true;
      this.isFirstLoad = false;
    }
  },
  onShow() {
    // 只在首次进入时显示骨架屏
    if (this.isFirstLoad) {
      this.showContent = false;
      setTimeout(() => {
        this.showContent = true;
      }, 800); // 适当延长骨架屏显示时间
      this.isFirstLoad = false; // 标记已经不是首次进入
    } else {
      // 非首次进入，直接显示内容
      this.showContent = true;
    }

    // 判断当前的购物车里面是否有东西
    let shopCarList = [];
    // if (this.pageType === "UnionMall") {
    //   shopCarList = this.$store.state.unionMyShopCar;
    // } else {
    shopCarList = this.$store.state.myShopCar;
    // }
    console.log("shopCarList", shopCarList);
    let count = 0;
    if (shopCarList && shopCarList.length > 0) {
      shopCarList.forEach((item) => {
        count += item.count;
      });
    }
    this.shopCarListCount = count;
  },
  onReachBottom() {
    this.handleToBottom();
  },
  onShareAppMessage() {
    let _this = this;
    return {
      // title: _this.pageType === "UnionMall" ? "工会之家" : "精选商城",
      title: "彩云驿商城",
      path: `/pages/index/index`,
    };
  },
  onShareTimeline() {
    let _this = this;
    return {
      // title: _this.pageType === "UnionMall" ? "工会之家" : "精选商城",
      title: "彩云驿商城",
      path: `/pages/index/index`,
    };
  },
  onUnload() {
    // 页面卸载时重置首次加载标记，确保下次进入仍显示骨架屏
    this.isFirstLoad = true;
  },
  methods: {
    // 改变商品排序规则
    handleChangeSortType(e) {
      this.selectSortType = Number(e.detail.value)
    },
    // 改变商品排序类型
    handleChangeShopSort(e) {
      let type = Number(e.detail.value)
      if (type === 0) {
        this.sortTypeList = [{ label: "由低到高", value: 1 }, { label: "由高到低", value: 2 }]
      } else if (type === 1) {
        this.sortTypeList = [{ label: "由低到高", value: 1 }, { label: "由高到低", value: 2 }]
      } else if (type === 2) {
        this.sortTypeList = [{ label: "由低到高", value: 1 }, { label: "由高到低", value: 2 }]
      } else if (type === 3) {
        this.sortTypeList = [{ label: "由远到近", value: 1 }, { label: "由近到远", value: 2 }]
      }
      this.selectShopSort = type
    },
    handleShowModalActivityImg(e) {
      console.log('eee', e);

      this.showModalActivityImg = true
    },
    handleHideExportFun() {
      this.showExportFun = false
    },
    // 显示展开功能
    handleShowExportBox(e) {
      uni.switchTab({
        url: "/pages/index/index"
      })
      // console.log('e', e);
      // this.showExportFun = !this.showExportFun;
      // this.showExportObj = e.detail
    },
    handleFocus(e) {
      console.log('eee', e);
      // 安卓 / iOS 可能不一样，可以用 e.detail.height 获取键盘高度
      this.popupBottom = 200 // 默认抬高
    },
    handleBlur() {
      this.popupBottom = 0
    },
    handleMaskClick(e) {
      this.priceRangeRefShow = false
    },
    // handleGoPointsMall() {
    //   uni.navigateTo({
    //     url: `/pages/shopPages/shopList/index?pageType=pointsMall`,
    //   });
    // },
    // 滚动到底部 加载更多的方法
    handleScrollBottom() {
      this.handleToBottom();
    },
    // 回到顶部
    handleGoBack() {
      this.scrollView = "navItem";
    },
    handlePageScroll(e) {
      this.pageScrollNumber = Number(e.detail.scrollTop);
      if (Number(e.detail.scrollTop) > 100) {
        this.showBackTop = true;
      } else {
        this.scrollView = "";
        this.showBackTop = false;
      }
    },
    handleHidePopup() {
      this.$refs.noticeRef.close();
    },
    // 关闭价格区间的悬浮框
    handleClosePricePopup() {
      this.$refs.priceRangeRef.close();
      this.priceRangeRefShow = false
    },
    // 榜单的方法
    async handleGetSortList() {
      // 新品榜
      let _this = this
      let data1 = {}
      let newShowList = uni.getStorageSync("newShowList")
      if (newShowList) {
        data1 = newShowList
        this.$api.$javaGet('/third-party/getWeChatGetMallGoodsInfo', {
          action_type: "WeChat_GetMallGoodsInfo",
          ownerUnitId: 911,
          COMMODITYNATURE: 5070,
          payMethod: "1000,3000",
          justCommodity: 1,
          userdefinedTypeId: "1317",
        }).then((data) => {
          if (JSON.stringify(data1) !== JSON.stringify(data)) {
            uni.setStorageSync("newShowList", data)
            _this.handleGetSortListShowData1(data)
          }
        })
      } else {
        data1 = await this.$api.$javaGet('/third-party/getWeChatGetMallGoodsInfo', {
          action_type: "WeChat_GetMallGoodsInfo",
          ownerUnitId: 911,
          COMMODITYNATURE: 5070,
          payMethod: "1000,3000",
          justCommodity: 1,
          userdefinedTypeId: "1317",
        })
      }

      this.handleGetSortListShowData1(data1)


      // 热销榜
      let data2 = {}
      let hotShopList = uni.getStorageSync("hotShopList")
      if (hotShopList) {
        data2 = hotShopList
        this.$api.$javaGet('/third-party/getWeChatGetMallGoodsInfo', {
          action_type: "WeChat_GetMallGoodsInfo",
          ownerUnitId: 911,
          COMMODITYNATURE: 5070,
          payMethod: "1000,3000",
          justCommodity: 1,
          userdefinedTypeId: "1318",
          sortStr: "COMMODITY_EN desc",
        }).then(data => {
          if (JSON.stringify(data2) !== JSON.stringify(data)) {
            uni.setStorageSync("hotShopList", data)
            _this.handleGetSortListShowData2(data)
          }
        })
      } else {
        data2 = await this.$api.$javaGet('/third-party/getWeChatGetMallGoodsInfo', {
          action_type: "WeChat_GetMallGoodsInfo",
          ownerUnitId: 911,
          COMMODITYNATURE: 5070,
          payMethod: "1000,3000",
          justCommodity: 1,
          userdefinedTypeId: "1318",
          sortStr: "COMMODITY_EN desc",
        })
      }
      this.handleGetSortListShowData2(data2)

      // 推荐榜
      let data3 = {}
      let goodShopList = uni.getStorageSync("goodShopList")
      if (goodShopList) {
        data3 = goodShopList
        this.$api.$javaGet('/third-party/getWeChatGetMallGoodsInfo', {
          action_type: "WeChat_GetMallGoodsInfo",
          ownerUnitId: 911,
          COMMODITYNATURE: 5070,
          payMethod: "1000,3000",
          justCommodity: 1,
          userdefinedTypeId: "1319",
        }).then(data => {
          if (JSON.stringify(data3) !== JSON.stringify(data)) {
            uni.setStorageSync("goodShopList", data)
            _this.handleGetSortListShowData3(data)
          }
        })
      } else {
        data3 = await this.$api.$javaGet('/third-party/getWeChatGetMallGoodsInfo', {
          action_type: "WeChat_GetMallGoodsInfo",
          ownerUnitId: 911,
          COMMODITYNATURE: 5070,
          payMethod: "1000,3000",
          justCommodity: 1,
          userdefinedTypeId: "1319",
        })
      }

      this.handleGetSortListShowData3(data3)
    },
    // 显示新品榜的方法
    handleGetSortListShowData1(data1) {
      let list1 = this.handleChangeShopList(data1.Data.List);
      this.newShopList = list1.slice(0, 4);
      // this.newShopList = []
    },
    // 显示热销榜的方法
    handleGetSortListShowData2(data2) {
      let list2 = this.handleChangeShopList(data2.Data.List);
      this.hotShopList = list2.slice(0, 4);
      // this.hotShopList = []
    },
    // 显示推荐榜的方法
    handleGetSortListShowData3(data3) {
      let list3 = this.handleChangeShopList(data3.Data.List);
      this.goodShopList = list3.slice(0, 4);
      // this.hotShopList = []
    },

    handleChangeShopList(list) {
      let shopList = [];
      if (list && list.length > 0) {
        list.forEach((item) => {
          if (item.COMMODITYLIST && item.COMMODITYLIST.length > 0) {
            item.COMMODITYLIST.forEach((subItem) => {
              if (
                subItem.COMMODITY_MEMBERPRICE &&
                subItem.COMMODITY_MEMBERPRICE.toString().indexOf(".") !== -1
              ) {
                subItem.bigNumber =
                  subItem.COMMODITY_MEMBERPRICE.toString().split(".")[0];
                subItem.smallNumber =
                  subItem.COMMODITY_MEMBERPRICE.toString().split(".")[1];
              } else {
                subItem.bigNumber = subItem.COMMODITY_MEMBERPRICE;
              }
              if (
                subItem.COMMODITY_RETAILPRICE &&
                subItem.COMMODITY_RETAILPRICE.toString().indexOf(".") !== -1
              ) {
                subItem.RETbigNumber =
                  subItem.COMMODITY_RETAILPRICE.toString().split(".")[0];
                subItem.RETsmallNumber =
                  subItem.COMMODITY_RETAILPRICE.toString().split(".")[1];
              } else {
                subItem.RETbigNumber = subItem.COMMODITY_RETAILPRICE;
              }
              shopList.push(subItem);
            });
          }
        });
      }
      return shopList;
    },

    // 工会之家滚动到底部
    handleToBottom() {
      this.shopMsg.pageIndex = this.shopMsg.pageIndex + 1;
      if (this.shopMsg.isOver) {
      } else {
        this.handleGetUnionShopList();
      }
      // this.showShopList = this.allShopList.slice(0, this.pageIndex * 10)
    },
    // 正常商品滚动到底部
    handleToBottomproductsList() {
      this.shopMsg.pageIndex = this.shopMsg.pageIndex + 1;
      if (this.shopMsg.isOver) {
      } else {
        this.handleGetProductsList();
      }
    },
    // 拿到工会之家的商品列表
    async handleGetUnionShopList() {
      uni.showLoading({
        title: "加载中...",
      });
      const data = await this.$api.getCoop({
        action_type: "WeChat_GetMallGoodsInfo",
        ownerUnitId: 911, // 业主单位 写死
        COMMODITYNATURE: 5070, // 一个商城的大类 也写死
        priceStart: this.minPrice || "", // 价钱的最小值
        priceEnd: this.maxPrice || "", // 价钱的最大值 
        payMethod: "1000,3000", // 写死的
        commodityNature: 5070, // 一个商城的大类 也写死
        commodityName: this.searchShopName,// 类型名称的搜索
        Page_Size: this.shopMsg.pageSize, // 每页多少条
        Page_Index: this.shopMsg.pageIndex, // 页码
        userdefinedtypeId: this.selectProducts || "", // 大小类id
        justCommodity: 1, // 写死
        // sortStr: `${this.sortTypeList[this.sortType]} ${new Date().getTime % 2 > 0 ? "" : "desc"
        //   }`, // 排序
        sortStr: `${this.selectShopSort === 0 ? 'COMMODITY_INDEX,COMMODITY_EN,COMMODITY_MEMBERPRICE,OPERATE_DATE' : this.selectShopSort === 1 ? 'COMMODITY_MEMBERPRICE' : this.selectShopSort === 2 ? 'COMMODITY_EN' : this.selectShopSort === 3 ? 'OPERATE_DATE' : ''} ${this.selectSortType === 0 ? 'asc' : 'desc'}`
      });
      console.log("handleGetSpecialOffers", data);
      let list = data.Data && data.Data.List ? data.Data.List : [];
      let shopList = [];
      if (this.shopMsg.pageIndex > 1) {
        shopList = this.showShopList;
      }
      let thisResList = [];
      if (list && list.length > 0) {
        list.forEach((item) => {
          if (item.COMMODITYLIST && item.COMMODITYLIST.length > 0) {
            item.COMMODITYLIST.forEach((subItem) => {
              if (
                subItem.COMMODITY_MEMBERPRICE &&
                subItem.COMMODITY_MEMBERPRICE.toString().indexOf(".") !== -1
              ) {
                subItem.bigNumber =
                  subItem.COMMODITY_MEMBERPRICE.toString().split(".")[0];
                subItem.smallNumber =
                  subItem.COMMODITY_MEMBERPRICE.toString().split(".")[1];
              } else {
                subItem.bigNumber = subItem.COMMODITY_MEMBERPRICE;
              }
              if (
                subItem.COMMODITY_RETAILPRICE &&
                subItem.COMMODITY_RETAILPRICE.toString().indexOf(".") !== -1
              ) {
                subItem.RETbigNumber =
                  subItem.COMMODITY_RETAILPRICE.toString().split(".")[0];
                subItem.RETsmallNumber =
                  subItem.COMMODITY_RETAILPRICE.toString().split(".")[1];
              } else {
                subItem.RETbigNumber = subItem.COMMODITY_RETAILPRICE;
              }
              thisResList.push(subItem);
            });
          }
        });
      }
      if (thisResList && thisResList.length < 6) {
        this.shopMsg.isOver = true;
      }
      console.log("shopList", shopList);
      this.showShopList = shopList.concat(thisResList);
      // this.allShopList = shopList
      // this.showShopList = this.allShopList.slice(0, this.pageIndex * 10)
      console.log("this.showShopList", this.showShopList);
      uni.hideLoading();
    },
    // 重置价格筛选
    async handleReset() {
      this.maxPrice = "";
      this.minPrice = "";
      this.searchShopName = "";
      this.showShopList = [];

      this.shopMsg = {
        pageIndex: 1,
        pageSize: 6,
        isOver: false,
      };
      // 拿到工会之家的商品列表
      await this.handleGetUnionShopList();
      this.$refs.priceRangeRef.close();
      this.priceRangeRefShow = false
    },
    // 价格筛选的确认
    async handleConfirm() {

      if (Number(this.minPrice) <= Number(this.maxPrice)) {
      } else {
        if (this.maxPrice && this.minPrice) {
          let newMax = Number(this.minPrice);
          let newMin = Number(this.maxPrice);
          this.maxPrice = newMax;
          this.minPrice = newMin;
        }
      }
      this.showShopList = [];
      this.shopMsg = {
        pageIndex: 1,
        pageSize: 10,
        isOver: false,
      };
      // 拿到工会之家的商品列表
      await this.handleGetUnionShopList();
      this.$refs.priceRangeRef.close();
      this.priceRangeRefShow = false
    },
    // 显示价格的悬浮框
    handleShowPricePopup() {
      this.$refs.priceRangeRef.open("bottom");
      this.priceRangeRefShow = true
    },
    // 品牌的跳转
    handleSearchBrand(value) {
      uni.navigateTo({
        url: `/pages/shopPages/shopList/index?name=${value.label}&pageType=brand`,
      });
    },
    // 跳转去榜单页面
    handleGoSortList(type) {
      // 1  新品榜   2  热销榜  3  推荐榜
      uni.navigateTo({
        url: `/pages/shopPages/shopList/index?type=${type}&pageType=${this.pageType}`,
      });
    },
    // 拿到顶部商品大类的方法
    async handleGetShopBigType() {
      let _this = this
      let typeList = []
      let getWeChatGetMallGoodsType = uni.getStorageSync('getWeChatGetMallGoodsType')
      if (getWeChatGetMallGoodsType) {
        typeList = getWeChatGetMallGoodsType
        this.$api.$javaGet(
          '/third-party/getWeChatGetMallGoodsType',
          {
            ownerUnitId: 911,
            commodityNature: 5070, // 类型
          }
        ).then(data => {
          let newTypeList = data.Data.List;
          if (JSON.stringify(newTypeList) !== JSON.stringify(typeList)) {
            uni.setStorageSync("getWeChatGetMallGoodsType", newTypeList)
            _this.handleShowPageShopBigType(newTypeList)
          }
        })
      } else {
        const data = await this.$api.$javaGet(
          '/third-party/getWeChatGetMallGoodsType',
          {
            ownerUnitId: 911,
            commodityNature: 5070, // 类型
          }
        )
        console.log("handleGetShopBigType", data);
        typeList = data.Data.List;
        uni.setStorageSync("getWeChatGetMallGoodsType", typeList)
      }
      console.log('typeList', typeList);
      this.handleShowPageShopBigType(typeList)

    },
    //  拿到顶部商品大类的方法 实际要赋值到页面上去的方法
    handleShowPageShopBigType(typeList) {
      let resList = [];
      // 如果有活动的话就有值
      let activityObj = {};
      let indexOfList = [3186, 3175, 4597, 4797];
      if (typeList && typeList.length > 0) {
        typeList.forEach((item) => {
          if (indexOfList.indexOf(item.UserdefinedType_Id) !== -1) {
            resList.push(item);
          }

          if (item.UserdefinedType_Id === 1355) {
            this.haveActivity = true;
            activityObj = item;
          }
        });
      }
      if (this.haveActivity) {
        // resList.push(activityObj);
        this.activityObj = activityObj;
      }
      this.shopTypeList = resList;

      this.selectProducts = resList[0].UserdefinedType_Id;
    },
    // 拿到活动的商品列表 可能不调用 有判断的
    async handleGetActivityList() {
      // const data = await this.$api.getCoop({
      //   action_type: "WeChat_GetMallGoodsInfo",
      //   ownerUnitId: 911,
      //   userdefinedtypeId: 1355,
      //   excludeNature: 5070, // 排除
      //   justCommodity: 1,
      // });

      // let url = this.pageType === "UnionMall" ? '/third-party/getWeChatGetMallGoodsInfo' : '/third-party/getWeChatGetMallGoodsInfoExclude'

      const data = await this.$api.$javaGet(
        '/third-party/getWeChatGetMallGoodsInfoExclude',
        // url,
        {
          ownerUnitId: 911,
          userdefinedTypeId: 1355,
          excludeNature: 5070, // 排除
          justCommodity: 1,
        }
      )

      console.log("handleGetActivityList", data);
      let list = data.Data.List;
      let res = [];
      if (list && list.length > 0) {
        list.forEach((item) => {
          if (item.COMMODITYLIST && item.COMMODITYLIST.length > 0) {
            item.COMMODITYLIST.forEach((subItem) => {
              if (
                subItem.COMMODITY_MEMBERPRICE &&
                subItem.COMMODITY_MEMBERPRICE.toString().indexOf(".") !== -1
              ) {
                subItem.bigNumber =
                  subItem.COMMODITY_MEMBERPRICE.toString().split(".")[0];
                subItem.smallNumber =
                  subItem.COMMODITY_MEMBERPRICE.toString().split(".")[1];
              } else {
                subItem.bigNumber = subItem.COMMODITY_MEMBERPRICE;
              }
              res.push(subItem);
            });
          }
        });
      }
      this.activityShopList = res;
    },
    // 拿到特价优惠的商品列表 nature 5030
    async handleGetSpecialOffers() {
      let _this = this
      let list = []
      let getWeChatGetMallGoodsInfoExclude = uni.getStorageSync("getWeChatGetMallGoodsInfoExclude")
      if (getWeChatGetMallGoodsInfoExclude) {
        list = getWeChatGetMallGoodsInfoExclude
        let url = '/third-party/getWeChatGetMallGoodsInfoExclude'
        this.$api.$javaGet(
          url,
          {
            ownerUnitId: 911,
            // COMMODITYNATURE: 5030,//特价优惠
            COMMODITYNATURE: 5021,// 绿色云品
            userdefinedTypeId: 3186,// 绿色云品
            userdefinedtypeId: 3186,// 绿色云品
            excludeNature: 5070,
            justCommodity: 1,
          }
        ).then((data) => {
          let newList = data.Data && data.Data.List ? data.Data.List : [];
          if (JSON.stringify(newList) !== JSON.stringify(list)) {
            uni.setStorageSync("getWeChatGetMallGoodsInfoExclude", newList)
            _this.handleGetSpecialOffersShowData(newList)
          }
        })
      } else {
        let url = '/third-party/getWeChatGetMallGoodsInfoExclude'
        const data = await this.$api.$javaGet(
          // '/third-party/getExcludeWeChatGetMallGoodsInfo',
          url,
          {
            ownerUnitId: 911,
            // COMMODITYNATURE: 5030,//特价优惠
            COMMODITYNATURE: 5021,// 绿色云品
            userdefinedTypeId: 3186,// 绿色云品
            userdefinedtypeId: 3186,// 绿色云品
            excludeNature: 5070,
            justCommodity: 1,
          }
        )
        list = data.Data && data.Data.List ? data.Data.List : [];
      }
      this.handleGetSpecialOffersShowData(list)

    },

    // 拿到特价优惠的商品列表显示内容的方法
    handleGetSpecialOffersShowData(list) {
      let shopList = [];
      let shopIdList = []
      if (list && list.length > 0) {
        list.forEach((item) => {
          if (item.COMMODITYLIST && item.COMMODITYLIST.length > 0) {
            item.COMMODITYLIST.forEach((subItem) => {
              if (shopIdList.indexOf(subItem.COMMODITY_ID) === -1) {
                shopIdList.push(subItem.COMMODITY_ID)

                if (
                  subItem.COMMODITY_MEMBERPRICE &&
                  subItem.COMMODITY_MEMBERPRICE.toString().indexOf(".") !== -1
                ) {
                  subItem.bigNumber =
                    subItem.COMMODITY_MEMBERPRICE.toString().split(".")[0];
                  subItem.smallNumber =
                    subItem.COMMODITY_MEMBERPRICE.toString().split(".")[1];
                } else {
                  subItem.bigNumber = subItem.COMMODITY_MEMBERPRICE;
                }
                if (
                  subItem.COMMODITY_RETAILPRICE &&
                  subItem.COMMODITY_RETAILPRICE.toString().indexOf(".") !== -1
                ) {
                  subItem.RETbigNumber =
                    subItem.COMMODITY_RETAILPRICE.toString().split(".")[0];
                  subItem.RETsmallNumber =
                    subItem.COMMODITY_RETAILPRICE.toString().split(".")[1];
                } else {
                  subItem.RETbigNumber = subItem.COMMODITY_RETAILPRICE;
                }
                shopList.push(subItem);
              }

            });
          }
        });
      }
      console.log("特价优惠", shopList);
      this.specialOffersList = shopList;
    },
    // 拿到每周特惠的商品列表
    async handleGetEveryWeekShop() {
      let _this = this
      let list = []
      let getWeChatGetMallGoodsInfo = uni.getStorageSync("getWeChatGetMallGoodsInfo")
      if (getWeChatGetMallGoodsInfo) {
        list = getWeChatGetMallGoodsInfo
        this.$api.$javaGet(
          '/third-party/getWeChatGetMallGoodsInfo',
          {
            ownerUnitId: 911,
            userdefinedtypeId: 4597,
            userdefinedTypeId: 4597,
            justCommodity: 1,
          }
        ).then((data) => {
          let newList = data.Data && data.Data.List ? data.Data.List : [];
          if (JSON.stringify(newList) !== JSON.stringify(list)) {
            uni.setStorageSync("getWeChatGetMallGoodsInfo", newList)
            _this.handleGetEveryWeekShopShowData(newList)
          }
        })
      } else {
        const data = await this.$api.$javaGet(
          '/third-party/getWeChatGetMallGoodsInfo',
          {
            ownerUnitId: 911,
            userdefinedtypeId: 4597,
            userdefinedTypeId: 4597,
            justCommodity: 1,
          }
        )
        list = data.Data && data.Data.List ? data.Data.List : [];
        uni.setStorageSync("getWeChatGetMallGoodsInfo", list)
      }

      this.handleGetEveryWeekShopShowData(list)
    },
    // 拿到模块商品的商品列表
    async handleGetModalProducetShop() {
      let _this = this
      let list = []
      let moduleActivity = uni.getStorageSync("moduleActivity")
      if (moduleActivity) {
        list = moduleActivity
        this.$api.$javaGet(
          '/third-party/getWeChatGetMallGoodsInfo',
          {
            ownerUnitId: 911,
            userdefinedtypeId: 4797,
            userdefinedTypeId: 4797,
            justCommodity: 1,
          }
        ).then((data) => {
          let newList = data.Data && data.Data.List ? data.Data.List : [];
          if (JSON.stringify(newList) !== JSON.stringify(list)) {
            uni.setStorageSync("moduleActivity", newList)
            _this.handleGetModalProducetShopShowData(newList)
          }
        })
      } else {
        const data = await this.$api.$javaGet(
          '/third-party/getWeChatGetMallGoodsInfo',
          {
            ownerUnitId: 911,
            userdefinedtypeId: 4797,
            userdefinedTypeId: 4797,
            justCommodity: 1,
          }
        )
        list = data.Data && data.Data.List ? data.Data.List : [];
        uni.setStorageSync("moduleActivity", list)
      }

      this.handleGetModalProducetShopShowData(list)
    },
    // 每周商品特惠显示数据的方法 
    handleGetEveryWeekShopShowData(list) {
      let shopList = [];
      if (list && list.length > 0) {
        list.forEach((item) => {
          if (item.COMMODITYLIST && item.COMMODITYLIST.length > 0) {
            item.COMMODITYLIST.forEach((subItem) => {
              if (
                subItem.COMMODITY_MEMBERPRICE &&
                subItem.COMMODITY_MEMBERPRICE.toString().indexOf(".") !== -1
              ) {
                subItem.bigNumber =
                  subItem.COMMODITY_MEMBERPRICE.toString().split(".")[0];
                subItem.smallNumber =
                  subItem.COMMODITY_MEMBERPRICE.toString().split(".")[1];
              } else {
                subItem.bigNumber = subItem.COMMODITY_MEMBERPRICE;
              }
              if (
                subItem.COMMODITY_RETAILPRICE &&
                subItem.COMMODITY_RETAILPRICE.toString().indexOf(".") !== -1
              ) {
                subItem.RETbigNumber =
                  subItem.COMMODITY_RETAILPRICE.toString().split(".")[0];
                subItem.RETsmallNumber =
                  subItem.COMMODITY_RETAILPRICE.toString().split(".")[1];
              } else {
                subItem.RETbigNumber = subItem.COMMODITY_RETAILPRICE;
              }
              shopList.push(subItem);
            });
          }
        });
      }
      console.log('weeklySpecialOfferweeklySpecialOfferweeklySpecialOfferweeklySpecialOffer', shopList);
      this.weeklySpecialOffer = shopList
    },
    // 模块商品显示数据的方法
    handleGetModalProducetShopShowData(list) {
      let shopList = [];
      if (list && list.length > 0) {
        list.forEach((item) => {
          if (item.COMMODITYLIST && item.COMMODITYLIST.length > 0) {
            item.COMMODITYLIST.forEach((subItem) => {
              if (
                subItem.COMMODITY_MEMBERPRICE &&
                subItem.COMMODITY_MEMBERPRICE.toString().indexOf(".") !== -1
              ) {
                subItem.bigNumber =
                  subItem.COMMODITY_MEMBERPRICE.toString().split(".")[0];
                subItem.smallNumber =
                  subItem.COMMODITY_MEMBERPRICE.toString().split(".")[1];
              } else {
                subItem.bigNumber = subItem.COMMODITY_MEMBERPRICE;
              }
              if (
                subItem.COMMODITY_RETAILPRICE &&
                subItem.COMMODITY_RETAILPRICE.toString().indexOf(".") !== -1
              ) {
                subItem.RETbigNumber =
                  subItem.COMMODITY_RETAILPRICE.toString().split(".")[0];
                subItem.RETsmallNumber =
                  subItem.COMMODITY_RETAILPRICE.toString().split(".")[1];
              } else {
                subItem.RETbigNumber = subItem.COMMODITY_RETAILPRICE;
              }
              shopList.push(subItem);
            });
          }
        });
      }
      this.marketingCampaign = shopList
    },
    // 拿到今日推荐的商品列表 nature 5050
    async handleGetTodayOffers() {
      let _this = this
      let getWeChatGetMallGoodsInfoExcludeToday = uni.getStorageSync("getWeChatGetMallGoodsInfoExcludeToday")
      let list = []
      if (getWeChatGetMallGoodsInfoExcludeToday) {
        list = getWeChatGetMallGoodsInfoExcludeToday
        this.$api.$javaGet(
          '/third-party/getWeChatGetMallGoodsInfoExclude',
          {
            ownerUnitId: 911,
            // COMMODITYNATURE: 4598,// 原今日推荐
            COMMODITYNATURE: 5022,//自有品牌
            userdefinedtypeId: 3175, // 商品分类
            userdefinedTypeId: 3175, // 商品分类
            excludeNature: 5070,
            justCommodity: 1,
          }
        ).then(data => {
          let newList = data.Data && data.Data.List ? data.Data.List : [];
          if (JSON.stringify(newList) !== JSON.stringify(list)) {
            uni.setStorageSync("getWeChatGetMallGoodsInfoExcludeToday", newList)
            _this.handleGetTodayOffersShowData(newList)
          }
        })
      } else {
        const data = await this.$api.$javaGet(
          '/third-party/getWeChatGetMallGoodsInfoExclude',
          {
            ownerUnitId: 911,
            // COMMODITYNATURE: 4598,// 原今日推荐
            COMMODITYNATURE: 5022,//自有品牌
            userdefinedtypeId: 3175, // 商品分类
            userdefinedTypeId: 3175, // 商品分类
            excludeNature: 5070,
            justCommodity: 1,
          }
        )
        list = data.Data.List;
      }
      this.handleGetTodayOffersShowData(list)
    },
    // 拿到今日推荐的商品列表显示数据的方法
    handleGetTodayOffersShowData(list) {
      let shopList = [];
      let shopIdList = []
      if (list && list.length > 0) {
        list.forEach((item) => {
          if (item.COMMODITYLIST && item.COMMODITYLIST.length > 0) {
            item.COMMODITYLIST.forEach((subItem) => {
              if (shopIdList.indexOf(subItem.COMMODITY_ID) === -1) {
                shopIdList.push(subItem.COMMODITY_ID)
                if (
                  subItem.COMMODITY_MEMBERPRICE &&
                  subItem.COMMODITY_MEMBERPRICE.toString().indexOf(".") !== -1
                ) {
                  subItem.bigNumber =
                    subItem.COMMODITY_MEMBERPRICE.toString().split(".")[0];
                  subItem.smallNumber =
                    subItem.COMMODITY_MEMBERPRICE.toString().split(".")[1];
                } else {
                  subItem.bigNumber = subItem.COMMODITY_MEMBERPRICE;
                }
                if (
                  subItem.COMMODITY_RETAILPRICE &&
                  subItem.COMMODITY_RETAILPRICE.toString().indexOf(".") !== -1
                ) {
                  subItem.RETbigNumber =
                    subItem.COMMODITY_RETAILPRICE.toString().split(".")[0];
                  subItem.RETsmallNumber =
                    subItem.COMMODITY_RETAILPRICE.toString().split(".")[1];
                } else {
                  subItem.RETbigNumber = subItem.COMMODITY_RETAILPRICE;
                }
                shopList.push(subItem);


              }

            });
          }
        });
      }
      this.todayOffersList = shopList;
    },
    // 跳转积分商城
    handleGoPointsMall() {
      // uni.navigateTo({
      //   url: `/pages/shopPages/shopList/index?pageType=pointsMall`,
      // });

      uni.redirectTo({
        url: `/pages/shopMallPage/shopType/index?selectIndex=${999999}&pageType=${this.pageType}`,
      });
    },
    // 切换甄选商品的类型
    handleChangeShopMallType(obj) {
      this.selectProducts = obj.UserdefinedType_Id;
      this.shopMsg = {
        pageSize: 6,
        pageIndex: 1,
        isOver: false,
      };
      this.handleGetProductsList();
    },
    // 拿到甄选商品  3000
    async handleGetProductsList() {
      uni.showLoading({
        title: "加载中",
      });

      const data = await this.$api.$javaGet(
        '/third-party/getWeChatGetMallGoodsInfo',
        {
          ownerUnitId: 911,
          justCommodity: 1,
          payMethod: "2000,3000",
          COMMODITYNATURE: 6000
        }
      )


      let list = data.Data.List;
      console.log('积分商城', list);

      let resList = [];
      let thisResList = [];
      if (this.shopMsg.pageIndex > 1) {
        resList = this.productsList;
      }
      if (list && list.length > 0) {
        // this.selectProducts = list[0].UserdefinedType_Id;
        list.forEach((item) => {
          if (item.COMMODITYLIST && item.COMMODITYLIST.length > 0) {
            item.COMMODITYLIST.forEach((subItem) => {
              if (
                subItem.COMMODITY_MEMBERPRICE &&
                subItem.COMMODITY_MEMBERPRICE.toString().indexOf(".") !== -1
              ) {
                subItem.bigNumber =
                  subItem.COMMODITY_MEMBERPRICE.toString().split(".")[0];
                subItem.smallNumber =
                  subItem.COMMODITY_MEMBERPRICE.toString().split(".")[1];
              } else {
                subItem.bigNumber = subItem.COMMODITY_MEMBERPRICE;
              }
              if (
                subItem.COMMODITY_RETAILPRICE &&
                subItem.COMMODITY_RETAILPRICE.toString().indexOf(".") !== -1
              ) {
                subItem.RETbigNumber =
                  subItem.COMMODITY_RETAILPRICE.toString().split(".")[0];
                subItem.RETsmallNumber =
                  subItem.COMMODITY_RETAILPRICE.toString().split(".")[1];
              } else {
                subItem.RETbigNumber = subItem.COMMODITY_RETAILPRICE;
              }

              thisResList.push(subItem);
            });
          }
        });
      }
      if (thisResList && thisResList.length < 6) {
        this.shopMsg.isOver = true;
      }
      // this.productsList = list;
      this.productsList = resList.concat(thisResList);
      console.log("甄选商品", this.productsList);
      uni.hideLoading();

      // let shopList = []
      // if (list && list.length > 0) {
      //   list.forEach((item) => {
      //     if (item.COMMODITYLIST && item.COMMODITYLIST.length > 0) {
      //       item.COMMODITYLIST.forEach((subItem) => {
      //         shopList.push(subItem)
      //       })
      //     }
      //   })
      // }
    },
    // 返回首页
    handleBackHome() {
      // if (this.pageType === "UnionMall") {
      //   // uni.navigateBack({
      //   //   delta: 1,
      //   // });

      //   uni.redirectTo({
      //     url: `/pages/shopMallPage/index/index`,
      //   });
      // } else {
      uni.switchTab({
        url: "/pages/index/index",
      });
      // }
    },
    // 跳转公告页面
    handleGoNotice() {
      uni.navigateTo({
        url: "/pages/noticePage/index",
      });
    },
    // 跳转商品列表接口
    handleGoShopList(value, index) {
      // uni.navigateTo({
      //   url: `/pages/shopPages/shopList/index?type=${type}&pageType=${this.pageType || ""
      //     }`,
      // });
      uni.redirectTo({
        url: `/pages/shopMallPage/shopType/index?leftId=${value}&pageType=${this.pageType}&selectIndex=${index}`,
      });
    },
    // 跳转商品详情
    handleGoShopDetail(obj) {
      console.log("obj", obj);
      uni.navigateTo({
        url: `/pages/shopPages/shopDetail/index?id=${obj.COMMODITY_ID}&pageType=${this.pageType}`,
      });
    },
    // 跳转到商品分类页面
    handleGoShopPage(obj, index) {
      console.log("obj", obj);
      console.log("index", index);
      // if (this.pageType === "UnionMall") {
      //   // if (obj.UserdefinedType_Name === "工会活动") {
      //   //   uni.navigateTo({
      //   //     url: `/pages/allFunPage/unionActivities`,
      //   //   });
      //   // } else {
      //   uni.redirectTo({
      //     // leftId=${obj.UserdefinedType_Id}&
      //     url: `/pages/shopMallPage/shopType/index?pageType=${this.pageType}&selectIndex=${index}`,
      //     // url: `/pages/shopMallPage/shopType/index?pageType=${this.pageType}`,
      //   });
      //   // }
      // } else {
      uni.redirectTo({
        url: `/pages/shopMallPage/shopType/index?selectIndex=${index}&pageType=${this.pageType}`,
      });
      // }
    },
    // 活动直接跳转分类页面 分类页面的互动是第一个 所以 selectIndex 传0就好
    handleGoActivityType() {
      uni.redirectTo({
        url: `/pages/shopMallPage/shopType/index?selectIndex=${0}&pageType=${this.pageType
          }`,
      });
    },
    // 跳转工会之家
    handleGoUnionMall() {
      // uni.navigateTo({
      //   url: `/pages/shopMallPage/index/index?pageType=UnionMall`,
      // });
      uni.switchTab({
        url: `/pages/shopMallPage/tradeUnionMall/index`,
      });
    },
  },
};
</script>

<style lang="less" scoped>
/* 骨架屏动画 */
@keyframes shimmer {
  0% {
    background-position: -468px 0;
  }

  100% {
    background-position: 468px 0;
  }
}

.skeleton {
  background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 50%, #f2f2f2 75%);
  background-size: 400px 100%;
  animation: shimmer 1.2s infinite;
  border-radius: 8rpx;
}

/* 商城页面骨架屏样式 */
.shop-skeleton {
  padding: 0 32rpx;
  background: #f7f8fa;
  min-height: calc(100vh - 200rpx);
}

.skeleton-content-box {
  background: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin: 20rpx 32rpx;

  .skeleton-category-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .skeleton-category-item {
      width: 20%;
      text-align: center;
      margin-bottom: 32rpx;

      .skeleton-category-icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 16rpx;
        margin: 0 auto 16rpx auto;
      }

      .skeleton-category-text {
        width: 60rpx;
        height: 24rpx;
        border-radius: 12rpx;
        margin: 0 auto;
      }
    }
  }
}

.skeleton-categories {
  background: #ffffff;
  border-radius: 20rpx;
  padding: 32rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  overflow-x: auto;

  .skeleton-category-item {
    flex-shrink: 0;
    text-align: center;
    margin-right: 32rpx;

    &:last-child {
      margin-right: 0;
    }

    .skeleton-category-icon {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      margin: 0 auto 16rpx;
    }

    .skeleton-category-text {
      width: 60rpx;
      height: 24rpx;
      margin: 0 auto;
    }
  }
}

.skeleton-section {
  background: #ffffff;
  border-radius: 20rpx;
  padding: 32rpx;
  margin-bottom: 20rpx;

  .skeleton-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32rpx;

    .skeleton-section-title {
      width: 120rpx;
      height: 32rpx;
    }

    .skeleton-more-button {
      width: 60rpx;
      height: 24rpx;
    }
  }

  .skeleton-horizontal-list {
    display: flex;
    overflow-x: auto;

    .skeleton-horizontal-item {
      flex-shrink: 0;
      margin-right: 24rpx;
      text-align: center;

      &:last-child {
        margin-right: 0;
      }

      .skeleton-horizontal-image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 12rpx;
        margin-bottom: 16rpx;
      }

      .skeleton-horizontal-price {
        width: 80rpx;
        height: 24rpx;
        margin: 0 auto;
      }
    }
  }
}

.skeleton-grid {
  background: #ffffff;
  border-radius: 20rpx;
  padding: 32rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .skeleton-grid-item {
    width: calc(50% - 16rpx);
    margin-bottom: 32rpx;

    .skeleton-product-image {
      width: 100%;
      height: 280rpx;
      border-radius: 12rpx;
      margin-bottom: 16rpx;
    }

    .skeleton-product-name {
      width: 80%;
      height: 28rpx;
      margin-bottom: 12rpx;
    }

    .skeleton-product-price {
      width: 60%;
      height: 24rpx;
    }
  }
}

.main {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  background: #f2f4f5;

  .meng {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
  }

  .header {
    width: 100%;
    box-sizing: border-box;
    //height: 496rpx;
    // background: linear-gradient(270deg, #2FA4FF 0%, #197AFF 100%);
    background-image: url("https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/indexBg.png");
    background-repeat: no-repeat;
    background-size: 100% 300rpx;
    //position: relative;
    z-index: 0;

    .headerTop {
      width: 100%;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0 32rpx;
      display: flex;
      justify-content: space-between;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 99;
      background-image: url("https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/indexBg.png");
      background-repeat: no-repeat;
      background-size: 100% 300rpx;

      .backArrowBox {
        width: 120rpx;
        background: rgba(255, 255, 255, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 32rpx;
        border: 1px solid #d9d5cc;
        padding: 4rpx 16rpx;

        .backArrow {
          width: 48rpx;
          height: 48rpx;
        }

        .line {
          width: 2rpx;
          height: 32rpx;
          background: #bbbbba;
          margin: 0 8rpx;
        }

        .img {
          width: 48rpx;
          height: 48rpx;
        }
      }

      .moreFunBox {
        width: 220rpx;
        height: 220rpx;
        background: #fff;
        border-radius: 16rpx;
        position: absolute;
        z-index: 10;
        left: 50rpx;
        box-sizing: border-box;
        padding: 12rpx 0 12rpx 16rpx;

        .triangle {
          position: absolute;
          width: 0;
          height: 0;
          border-left: 5px solid transparent;
          /* 左边透明 */
          border-right: 5px solid transparent;
          /* 右边透明 */
          border-bottom: 10px solid #fff;
          /* 底边颜色 */
          top: -10px;
          left: 40px;
        }

        .funList {
          width: 100%;
          height: 100%;

          .funItem {
            width: 100%;
            height: 70rpx;
            display: flex;
            align-items: center;

            .funItemIcon {
              width: 30rpx;
              height: 30rpx;
              margin-right: 20rpx;
            }

            .funItemText {
              width: calc(100% - 50rpx);
              height: 100%;
              display: inline-block;
              font-size: 26rpx;
              display: flex;
              align-items: center;
              border-bottom: 1px solid #dad6cb;
            }
          }
        }
      }


      .backArrow {
        width: 48rpx;
        height: 48rpx;
      }

      .pageName {
        font-size: 32rpx;
        font-weight: 600;
        color: #fff;
      }
    }

    .pageTitle {
      width: 100%;
      box-sizing: border-box;
      padding: 0 40rpx;

      .titleText {
        font-size: 20px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }
    }

    .pageSearch {
      width: calc(100% - 48rpx);
      margin-left: 24rpx;
      margin-top: 28rpx;
      height: 38px;
      background: #fff;
      border-radius: 19px;
      box-sizing: border-box;
      padding: 2px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .areaSelect {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #160304;
        line-height: 20px;
        padding-left: 12px;
        position: relative;

        .areaIcon {
          width: 12px;
          height: 12px;
        }
      }

      .areaSelect:after {
        content: "";
        width: 2px;
        height: 14px;
        position: absolute;
        top: 3px;
        right: -12px;
        background: #e7e5e5;
        display: block;
      }

      .serach_input {
        width: 154px;
        border: none;
        height: 20px;
        font-size: 14px;
        box-sizing: border-box;
        padding: 0 12px;
      }

      .searchBtn {
        font-size: 14px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #fdfdfd;
        line-height: 20px;
        padding: 7px 16px;
        background: #1890ff;
        border-radius: 17px;
      }
    }

    .bannerBox {
      width: calc(100% - 48rpx);
      height: 280rpx;
      background: #6e0f16;
      border-radius: 16rpx;
    }

    .typeBox {
      width: calc(100% - 48rpx);
      margin: 24rpx 0 0 24rpx;
      //height: 392rpx;
      // background: #fff;
      border-radius: 16rpx;
      box-sizing: border-box;
      // padding: 2rpx;
      background-image: url("https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/Special Offers.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;

      .contentBox {
        width: 100%;
        border-radius: 16rpx;
        box-sizing: border-box;
        min-height: 214rpx;
        padding: 30rpx;

        // background: linear-gradient(180deg,
        //     rgba(230, 240, 255, 1) 0%,
        //     rgba(255, 255, 255, 1) 50%,
        //     #ffffff 100%);
        // flex-wrap: wrap;
        // display: flex;
        // align-items: center; 
        // justify-content: space-between;
        white-space: nowrap;

        .rowBox {
          width: 20%;
          height: 144rpx;

          // width: 96rpx;
          // height: 154rpx;
          // display: inline-block;
          // box-sizing: border-box;

          display: inline-flex;
          flex-direction: column;
          align-items: center;
          // justify-content: space-between;

          .imgBox {
            width: 96rpx;
            display: flex;
            justify-content: center;

            .itemImgBox {
              width: 96rpx;
              height: 96rpx;
              border-radius: 50%;
              background: #fff;
              padding: 2rpx;
              box-sizing: border-box;
              overflow: hidden;
              margin-bottom: 16rpx;

              .img {
                width: 96rpx;
                height: 100%;
              }
            }
          }

          .itemName {
            // width: 96rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #020e1a;
            line-height: 32rpx;
            text-align: center;
            font-style: normal;
            white-space: nowrap;
            // overflow: hidden;
            // text-overflow: ellipsis;
            // white-space: nowrap;
          }
        }

        .rowBox:nth-child(5n) {
          //margin-right: 0!important;
        }
      }

      .contentBox2 {
        background-image: url("https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/Special Offers.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
    }
  }

  .pageContent {
    width: 100%;
    box-sizing: border-box;
    padding: 0 24rpx 160rpx;
    // margin-top: 24rpx;

    .noticeBox {
      width: 100%;
      box-sizing: border-box;
      padding: 24rpx 28rpx;
      background: #fff;
      border-radius: 16rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .noticeLeft {
        display: flex;
        align-items: center;

        .noticeIcon {
          width: 32rpx;
          height: 32rpx;
          margin-right: 8rpx;
        }

        .noticeTitle {
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 28rpx;
          color: #ee4020;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          margin-right: 24rpx;
        }

        .noticeContent {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #716f69;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }
      }

      .noticeRight {
        .moreIcon {
          width: 24rpx;
          height: 24rpx;
        }
      }
    }

    .typeBox {
      width: 100%;
      //height: 392rpx;
      background: #fff;
      border-radius: 16rpx;
      box-sizing: border-box;
      padding: 2rpx;

      .contentBox {
        width: 100%;
        height: 100%;
        border-radius: 16rpx;
        box-sizing: border-box;
        padding: 30rpx;
        background: linear-gradient(180deg,
            rgba(46, 134, 255, 0.12) 0%,
            rgba(46, 134, 255, 0) 100%);

        .rowBox {
          width: 120rpx;
          height: 134rpx;
          display: inline-block;

          //display: flex;
          //align-items: center;
          //justify-content: space-between;
          .imgBox {
            width: 100%;
            display: flex;
            justify-content: center;

            .itemImgBox {
              width: 96rpx;
              height: 96rpx;
              border-radius: 50%;
              background: #fff;
              padding: 2rpx;
              box-sizing: border-box;
              overflow: hidden;
              margin-bottom: 10rpx;

              .img {
                width: 96rpx;
                height: 100%;
              }
            }
          }

          .itemName {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #020e1a;
            line-height: 32rpx;
            text-align: center;
            font-style: normal;
          }
        }

        .rowBox:nth-child(5) {
          margin-right: 0 !important;
        }
      }
    }

    .advertisement {
      width: 100%;
      background: #ffffff;
      border-radius: 16rpx;
      margin-top: 24rpx;
      box-sizing: border-box;
      padding: 2rpx;

      .advertisementContentBox {
        width: 100%;
        height: 100%;
        // 真的有个空格！！！
        background-image: url("https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/Special Offers.png");
        background-repeat: no-repeat;
        border-radius: 16rpx;
        background-size: 100% 100%;
        box-sizing: border-box;
        padding: 16rpx 22rpx;

        .advertisementTop {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .title {
            font-size: 14px;
            font-weight: 600;
            color: #181716;

            .titleImg {
              width: 112rpx;
              height: 36rpx;
            }
          }

          .moreBox {
            display: flex;
            align-items: center;

            .moreText {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #8b8280;
              line-height: 36rpx;
              text-align: left;
              font-style: normal;
            }

            .rightIcon {
              width: 24rpx;
              height: 24rpx;
              margin-left: 4rpx;
            }
          }
        }

        .advertisementTopUnionMall {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .title {
            font-size: 26rpx;
            font-weight: 600;
            color: #181716;
          }

          .moreBox {
            display: flex;
            align-items: center;

            .moreText {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #8b8280;
              line-height: 36rpx;
              text-align: left;
              font-style: normal;
            }

            .rightIcon {
              width: 24rpx;
              height: 24rpx;
              margin-left: 4rpx;
            }
          }
        }

        .UnionMallShopList {
          width: 100%;
          margin-top: 24rpx;
          height: 90px;
          display: flex;
          align-items: center;

          .leftSortBox {
            width: 50%;
            background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
            border-radius: 16rpx;
            box-sizing: border-box;
            padding: 12rpx 24rpx;

            .titleTop {
              .title {
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 32rpx;
                color: #130f05;
                line-height: 44rpx;
                text-align: left;
                font-style: normal;
              }
            }
          }

          .rowBox {
            width: 20%;
            height: 144rpx;

            // width: 96rpx;
            // height: 154rpx;
            // display: inline-block;
            // box-sizing: border-box;

            display: flex;
            flex-direction: column;
            align-items: center;
            // justify-content: space-between;

            .imgBox {
              width: 96rpx;
              display: flex;
              justify-content: center;

              .itemImgBox {
                width: 96rpx;
                height: 96rpx;
                border-radius: 50%;
                background: #fff;
                padding: 2rpx;
                box-sizing: border-box;
                overflow: hidden;
                margin-bottom: 16rpx;

                .img {
                  width: 96rpx;
                  height: 100%;
                }
              }
            }

            .itemName {
              width: 96rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #020e1a;
              line-height: 32rpx;
              text-align: center;
              font-style: normal;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }

        .shopList {
          width: 100%;
          margin-top: 24rpx;
          height: 90px;

          .shopItem {
            width: 136rpx;
            display: inline-block;
            margin-right: 40rpx;

            .shopItemImg {
              width: 100%;
              position: relative;

              .imgBox {
                width: 136rpx;
                height: 136rpx;
                border-radius: 50%;
                overflow: hidden;

                .shopImg {
                  width: 100%;
                  height: 100%;
                }
              }

              .discountedPrice {
                background: linear-gradient(90deg, #fd3404 0%, #fe7e1f 100%);
                padding: 4rpx 12rpx;
                font-family: DINAlternate, DINAlternate;
                font-weight: bold;
                font-size: 28rpx;
                color: #ffffff;
                line-height: 32rpx;
                font-style: normal;
                border-radius: 16rpx;
                position: absolute;
                bottom: -12rpx;
                left: 50%;
                transform: translateX(-50%);
              }
            }

            .price {
              width: 100%;
              display: inline-block;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #756c6a;
              line-height: 36rpx;
              text-align: center;
              font-style: normal;
              text-decoration-line: line-through;
              margin-top: 14rpx;
            }
          }
        }
      }

      .advertisementContentBox ::-webkit-scrollbar {
        display: none;
      }

      .sortBox {
        width: 100%;
        display: flex;
        align-items: flex-start;
        // align-items: center;
        justify-content: space-between;

        .leftSortBox {
          background: linear-gradient(180deg, #ffe8e8 0%, #ffffff 100%);
          border-radius: 16rpx;
          box-sizing: border-box;
          padding: 12rpx 24rpx;
          // margin-right: 16rpx;
          // min-width: 320rpx;
          width: calc(50% - 16rpx);

          .titleTopSort {
            width: 100%;

            .title {
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 32rpx;
              color: #130f05;
              line-height: 44rpx;
              text-align: left;
              font-style: normal;

              .red {
                color: #ff3e3e;
              }
            }
          }

          .notice {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 20rpx;
            color: #716f69;
            line-height: 28rpx;
            text-align: left;
            font-style: normal;
          }

          .shopList {
            width: 100%;
            height: 128rpx;
            display: flex;
            align-items: center;
            // justify-content: space-between;
            margin-top: 16rpx;

            .shopItem {
              width: 128rpx;
              height: 128rpx;

              .shopImg {
                width: 128rpx;
                height: 128rpx;
              }
            }
          }
        }

        .rightItem {
          width: 20%;
          border-radius: 16rpx;
          box-sizing: border-box;
          padding: 12rpx 24rpx;
          // min-width: 160rpx;

          .titleTopSort {
            width: 100%;

            .title {
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 32rpx;
              color: #130f05;
              line-height: 44rpx;
              text-align: left;
              font-style: normal;

              .red {
                color: #ff8000;
              }
            }
          }

          .notice {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 20rpx;
            color: #716f69;
            line-height: 28rpx;
            text-align: left;
            font-style: normal;
          }

          .shopList {
            width: 100%;
            height: 128rpx;
            margin-top: 16rpx;
            display: flex;
            align-items: center;
            justify-content: flex-start;

            .shopItem {
              width: 128rpx;
              height: 128rpx;
              margin-top: 16rpx;

              .shopImg {
                width: 128rpx;
                height: 128rpx;
              }
            }
          }
        }

        .bg2 {
          background: linear-gradient(180deg, #ffefe0 0%, #ffffff 100%);
        }

        .bg3 {
          background: linear-gradient(180deg, #d8f9de 0%, #ffffff 100%);
        }
      }
    }

    .advertisementSecond {
      width: 100%;
      margin-top: 24rpx;
      display: flex;
      justify-content: space-between;

      .advertisementItem {
        width: 100%;
        //width: calc((100% - 26rpx) / 2);
        height: 316rpx;
        background: #fff;
        border-radius: 14rpx;
        box-sizing: border-box;
        padding: 2rpx;

        .advertisementItemContent {
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          padding: 16rpx 22rpx;
          background-image: url("https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/recommendation.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;

          .contentTop {
            width: 100%;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .title {
              font-size: 14px;
              font-weight: 600;
              color: #181716;

              .titleImg {
                width: 112rpx;
                height: 36rpx;
              }
            }

            .moreBox {
              display: flex;
              align-items: center;

              .moreText {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #8b8280;
                line-height: 36rpx;
                text-align: left;
                font-style: normal;
              }

              .rightIcon {
                width: 24rpx;
                height: 24rpx;
                margin-left: 4rpx;
              }
            }
          }

          .contentTopUnionMall {
            width: 100%;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .title {
              font-size: 26rpx;
              font-weight: 600;
              color: #181716;
            }
          }

          .shopDesc {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #8b8280;
            line-height: 36rpx;
            text-align: left;
            font-style: normal;
          }

          .shopItemList {
            width: 100%;
            height: 95px;
            margin-top: 24rpx;

            .shopItem {
              width: 136rpx;
              display: inline-block;
              margin-right: 24rpx;

              .imgBox {
                width: 136rpx;
                height: 136rpx;
                border-radius: 50%;
                overflow: hidden;

                .shopImg {
                  width: 100%;
                  height: 100%;
                }
              }

              .shopImgText {
                display: inline-block;
                width: 100%;
                font-family: DINAlternate, DINAlternate;
                font-weight: bold;
                font-size: 28rpx;
                color: #fe3f22;
                line-height: 32rpx;
                text-align: center;
                font-style: normal;

                .shopSmallText {
                  font-size: 24rpx;
                }
              }
            }
          }
        }

        .advertisementItemContent ::-webkit-scrollbar {
          display: none;
        }
      }

      .advertisementItemUnionMall {
        width: 100%;
        background: #fff;
        border-radius: 14rpx;
        box-sizing: border-box;
        padding: 2rpx;

        .advertisementItemContent {
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          padding: 16rpx 22rpx;
          background: linear-gradient(rgba(255, 239, 238, 1) 0%,
              rgba(255, 254, 254, 1) 100%) no-repeat;
          background-size: 100% 176rpx;
          // background-image: url("https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/recommendation.png");
          // background-repeat: no-repeat;
          // background-size: 100% 100%;

          .contentTopUnionMall {
            width: 100%;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .title {
              font-size: 26rpx;
              font-weight: 600;
              color: #181716;
            }
          }

          .shopItemList {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;

            .shopItem {
              width: 20%;
              height: 166rpx;
              overflow: hidden;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;

              .imgBox {
                width: 96rpx;
                height: 96rpx;
                display: flex;
                align-items: center;
                background-color: #f3f6f9;
                border-radius: 50%;
                justify-content: center;
                font-size: 24rpx;
                margin-bottom: 4rpx;
              }

              .imgText {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #130f05;
                line-height: 36rpx;
                text-align: left;
                font-style: normal;
              }
            }
          }
        }
      }
    }



    .allShopList {
      width: 100%;
      margin-top: 40rpx;

      .allShopTitle {
        font-size: 16px;
        font-weight: 600;
        color: #181716;
      }

      .jfDescBox {
        width: 100%;
        margin-top: 24rpx;

        .descImg {
          width: 100%;
        }
      }


      .allTypeBox {
        width: calc(100vw - 48rpx);
        height: 60rpx;
        box-sizing: border-box;
        padding: 0 24rpx;
        white-space: nowrap;

        .typeItem {
          display: inline;
          margin-right: 32rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #020e1a;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }

        .selectTypeItem {
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 28rpx;
          color: #0787f3;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          position: relative;
        }

        .selectTypeItem:after {
          content: "";
          position: absolute;
          width: 48rpx;
          height: 6rpx;
          background: #1890ff;
          border-radius: 2rpx;
          bottom: -10rpx;
          left: 50%;
          transform: translateX(-50%);
        }
      }

      .allShopListContent {
        width: 100%;
        // height: 800rpx;
        margin-top: 38rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .buyShopItem {
          width: calc((100% - 22rpx) / 2);
          background: #fff;
          border-radius: 16rpx;
          box-sizing: border-box;
          margin-bottom: 24rpx;

          .shopImgContent {
            width: 100%;
            height: 330rpx;
            box-sizing: border-box;
            overflow: hidden;
            border-radius: 16rpx 16rpx 0 0;

            .shopImage {
              width: 100%;
              height: 100%;
            }
          }

          .priceBox {
            width: 100%;
            box-sizing: border-box;
            padding: 16rpx 24rpx 32rpx;

            .shopName {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #130f05;
              line-height: 32rpx;
              font-style: normal;
              width: calc((100vw - 80rpx) / 2 - 40rpx);
              height: 64rpx;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              /* 设置显示的行数，超出的行数会被省略 */
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .retailPrice {
              margin-top: 12rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #756c6a;
              line-height: 36rpx;
              text-align: left;
              font-style: normal;
              text-decoration-line: line-through;
            }

            .nowPrice {
              .unit {
                font-family: DINAlternate, DINAlternate;
                font-weight: bold;
                font-size: 24rpx;
                color: #fe3f22;
                line-height: 24rpx;
                text-align: left;
                font-style: normal;
              }

              .price {
                font-family: DINAlternate, DINAlternate;
                font-weight: bold;
                font-size: 36rpx;
                color: #fe3f22;
                line-height: 40rpx;
                text-align: left;
                font-style: normal;
              }
            }

            .shopState {
              font-size: 24rpx;
              color: #fff;
              background: #bbbbbb;
              padding: 4rpx 16rpx;
              border-radius: 8rpx;
            }

            .buyCarBox {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;

              .buyCarLeft {
                .price {
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 600;
                  font-size: 32rpx;
                  color: #ff6219;
                  line-height: 40rpx;
                  text-align: left;
                  font-style: normal;

                  .smallPrice {
                    font-size: 28rpx;
                  }
                }

                .unit {
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #9fa3a8;
                  line-height: 36rpx;
                  text-align: left;
                  font-style: normal;
                }
              }

              .buyCarIcon {
                width: 70rpx;
                height: 70rpx;
                border-radius: 50%;
                overflow: hidden;

                .icon {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
      }

      .shopLovely {
        width: 100%;
        box-sizing: border-box;
        padding: 4rpx 22rpx;

        .shopLovelyTop {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .shopLovelyTitle {
            font-size: 26rpx;
            font-weight: 600;
            color: #181716;
          }

          .shopLovelyRight {
            display: flex;
            align-items: center;

            .filterIcon {
              width: 32rpx;
              height: 32rpx;
              margin-right: 6rpx;
            }

            .filterText {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #716f69;
              line-height: 40rpx;
              text-align: left;
              font-style: normal;
            }
          }
        }

        .shopLovelyList {
          width: 100%;
          // height: 800rpx;
          margin-top: 24rpx;
          padding-bottom: 24rpx;

          .shopLovelyItem {
            display: inline-block;
            width: calc((100% - 22rpx) / 2);
            background: #fff;
            border-radius: 16rpx;
            box-sizing: border-box;
            margin-bottom: 24rpx;

            .shopImgContent {
              width: 100%;
              height: 330rpx;
              box-sizing: border-box;
              overflow: hidden;
              border-radius: 16rpx 16rpx 0 0;

              .shopImage {
                width: 100%;
                height: 100%;
              }
            }

            .priceBox {
              width: 100%;
              box-sizing: border-box;
              padding: 16rpx 24rpx 32rpx;

              .shopName {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 28rpx;
                color: #130f05;
                line-height: 32rpx;
                font-style: normal;
                width: calc((100vw - 80rpx) / 2 - 40rpx);
                height: 64rpx;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                /* 设置显示的行数，超出的行数会被省略 */
                overflow: hidden;
                text-overflow: ellipsis;
              }

              .retailPrice {
                margin-top: 12rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #756c6a;
                line-height: 36rpx;
                text-align: left;
                font-style: normal;
                text-decoration-line: line-through;
              }

              .nowPrice {
                .unit {
                  font-family: DINAlternate, DINAlternate;
                  font-weight: bold;
                  font-size: 24rpx;
                  color: #fe3f22;
                  line-height: 24rpx;
                  text-align: left;
                  font-style: normal;
                }

                .price {
                  font-family: DINAlternate, DINAlternate;
                  font-weight: bold;
                  font-size: 36rpx;
                  color: #fe3f22;
                  line-height: 40rpx;
                  text-align: left;
                  font-style: normal;
                }
              }

              .shopState {
                font-size: 24rpx;
                color: #fff;
                background: #bbbbbb;
                padding: 4rpx 16rpx;
                border-radius: 8rpx;
              }

              .buyCarBox {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .buyCarLeft {
                  .price {
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 600;
                    font-size: 32rpx;
                    color: #ff6219;
                    line-height: 40rpx;
                    text-align: left;
                    font-style: normal;

                    .smallPrice {
                      font-size: 28rpx;
                    }
                  }

                  .unit {
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #9fa3a8;
                    line-height: 36rpx;
                    text-align: left;
                    font-style: normal;
                  }
                }

                .buyCarIcon {
                  width: 70rpx;
                  height: 70rpx;
                  border-radius: 50%;
                  overflow: hidden;

                  .icon {
                    width: 100%;
                    height: 100%;
                  }
                }
              }
            }
          }
        }

        .inBottom {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          padding-bottom: 12rpx;

          .bottomText {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 26rpx;
            color: #d0d0d0;
            line-height: 40rpx;
            text-align: justify;
            font-style: normal;
            position: relative;
            padding: 6rpx 0;
          }

          .bottomText::after {
            content: "";
            width: 30vw;
            height: 2rpx;
            background: #e0e0e0;
            position: absolute;
            left: -32vw;
            top: 50%;
          }

          .bottomText::before {
            content: "";
            width: 30vw;
            height: 2rpx;
            background: #e0e0e0;
            position: absolute;
            right: -32vw;
            top: 50%;
          }
        }

        // .shopLovelyList::-webkit-scrollbar {
        //   display: none;
        // }
      }

      .inBottom {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 12rpx;

        .bottomText {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 26rpx;
          color: #d0d0d0;
          line-height: 40rpx;
          text-align: justify;
          font-style: normal;
          position: relative;
          padding: 6rpx 0;
        }

        .bottomText::after {
          content: "";
          width: 30vw;
          height: 2rpx;
          background: #e0e0e0;
          position: absolute;
          left: -32vw;
          top: 50%;
        }

        .bottomText::before {
          content: "";
          width: 30vw;
          height: 2rpx;
          background: #e0e0e0;
          position: absolute;
          right: -32vw;
          top: 50%;
        }
      }

      .advertisementSecond {
        width: 100%;
        margin-top: 24rpx;
        display: flex;
        justify-content: space-between;

        .advertisementItem {
          width: 100%;
          //width: calc((100% - 26rpx) / 2);
          height: 316rpx;
          background: #fff;
          border-radius: 14rpx;
          box-sizing: border-box;
          padding: 2rpx;

          .advertisementItemContent {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 16rpx 22rpx;
            background-image: url("https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/recommendation.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;

            .contentTop {
              width: 100%;
              box-sizing: border-box;
              display: flex;
              align-items: center;
              justify-content: space-between;

              .title {
                font-size: 14px;
                font-weight: 600;
                color: #181716;

                .titleImg {
                  width: 112rpx;
                  height: 36rpx;
                }
              }

              .moreBox {
                display: flex;
                align-items: center;

                .moreText {
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #8b8280;
                  line-height: 36rpx;
                  text-align: left;
                  font-style: normal;
                }

                .rightIcon {
                  width: 24rpx;
                  height: 24rpx;
                  margin-left: 4rpx;
                }
              }
            }

            .contentTopUnionMall {
              width: 100%;
              box-sizing: border-box;
              display: flex;
              align-items: center;
              justify-content: space-between;

              .title {
                font-size: 26rpx;
                font-weight: 600;
                color: #181716;
              }
            }

            .shopDesc {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #8b8280;
              line-height: 36rpx;
              text-align: left;
              font-style: normal;
            }

            .shopItemList {
              width: 100%;
              height: 95px;
              margin-top: 24rpx;

              .shopItem {
                width: 136rpx;
                display: inline-block;
                margin-right: 24rpx;

                .imgBox {
                  width: 136rpx;
                  height: 136rpx;
                  border-radius: 50%;
                  overflow: hidden;

                  .shopImg {
                    width: 100%;
                    height: 100%;
                  }
                }

                .shopImgText {
                  display: inline-block;
                  width: 100%;
                  font-family: DINAlternate, DINAlternate;
                  font-weight: bold;
                  font-size: 28rpx;
                  color: #fe3f22;
                  line-height: 32rpx;
                  text-align: center;
                  font-style: normal;

                  .shopSmallText {
                    font-size: 24rpx;
                  }
                }
              }
            }
          }

          .advertisementItemContent ::-webkit-scrollbar {
            display: none;
          }
        }

        .advertisementItemUnionMall {
          width: 100%;
          background: #fff;
          border-radius: 14rpx;
          box-sizing: border-box;
          padding: 2rpx;

          .advertisementItemContent {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 16rpx 22rpx;
            background: linear-gradient(rgba(255, 239, 238, 1) 0%,
                rgba(255, 254, 254, 1) 100%) no-repeat;
            background-size: 100% 176rpx;
            // background-image: url("https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/recommendation.png");
            // background-repeat: no-repeat;
            // background-size: 100% 100%;

            .contentTopUnionMall {
              width: 100%;
              box-sizing: border-box;
              display: flex;
              align-items: center;
              justify-content: space-between;

              .title {
                font-size: 26rpx;
                font-weight: 600;
                color: #181716;
              }
            }

            .shopItemList {
              width: 100%;
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              justify-content: center;

              .shopItem {
                width: 20%;
                height: 166rpx;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                .imgBox {
                  width: 96rpx;
                  height: 96rpx;
                  display: flex;
                  align-items: center;
                  background-color: #f3f6f9;
                  border-radius: 50%;
                  justify-content: center;
                  font-size: 24rpx;
                  margin-bottom: 4rpx;
                }

                .imgText {
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #130f05;
                  line-height: 36rpx;
                  text-align: left;
                  font-style: normal;
                }
              }
            }
          }
        }
      }
    }
  }

  .priceRangeBox {
    width: 100%;
    height: 800rpx;
    background-color: #fff;
    border-radius: 32rpx 32rpx 0 0;
    box-sizing: border-box;
    padding: 32rpx;
    transition: bottom 0.2s;
    position: fixed;

    .closeIcon {
      width: 48rpx;
      height: 48rpx;
      position: absolute;
      top: 32rpx;
      right: 32rpx;
    }

    .sortBox {
      width: 100%;
      height: 180rpx;
      box-sizing: border-box;
      padding-top: 48rpx;
      display: flex;
      align-items: center;
      margin-bottom: 10rpx;

      .sortItemBox {
        width: 50%;
        height: 100%;
        box-sizing: border-box;
        padding-right: 32rpx;

        .sortItemTitle {
          font-size: 28rpx;
        }

        .sortItemValue {
          background-color: #f5f6f7;
          box-sizing: border-box;
          padding: 16rpx;
          border-radius: 16rpx;
          margin-top: 16rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          display: block;
          font-size: 28rpx;

          .picker {
            width: 100%;
            text-align: center;

            .pickerIcon {
              width: 24rpx;
              height: 24rpx;
              margin-left: 8rpx;
            }
          }
        }
      }
    }

    .titleBox {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #130f05;
        line-height: 44rpx;
        text-align: left;
        font-style: normal;
      }


    }

    .inputBox {
      width: 100%;
      background-color: #f5f6f7;
      box-sizing: border-box;
      padding: 16rpx;
      border-radius: 16rpx;
      margin-top: 16rpx;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .inputItem {
        width: 48%;
        text-align: center;
      }

      .unit {
        width: 4%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .btnList {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .confirmBtn {
        // width: 100%;
        width: calc((100% - 32rpx) / 2);
        background: #fd4d4d;
        border-radius: 8rpx;
        padding: 18rpx 0;
        display: flex;
        justify-content: center;
        font-family: PingFangSC, PingFang SC;
        font-size: 32rpx;
        color: #ffffff;
        line-height: 44rpx;
        text-align: center;
        font-style: normal;
        margin-top: 40rpx;
      }

      .cancelBtn {
        width: calc((100% - 32rpx) / 2);
        background: #f2f2f2;
        border-radius: 8rpx;
        padding: 18rpx 0;
        display: flex;
        justify-content: center;
        font-family: PingFangSC, PingFang SC;
        font-size: 32rpx;
        color: #130f05;
        line-height: 44rpx;
        text-align: center;
        font-style: normal;
        margin-top: 40rpx;
      }
    }
  }

  .noticePopup {
    // width: 90vw;
    // height: 75vh;

    width: 70vw;
    height: calc(2688 * 70vw / 1242);

    background: #fff;
    border-radius: 32rpx;
    background-image: url(https://eshangtech.com/minTestImg/preSalePoster.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 300rpx 120rpx 160rpx;
    // .popupContent {
    //   width: 100%;
    //   height: 100%;
    //   overflow-y: auto;
    //   .title {
    //     font-family: PingFangSC, PingFang SC;
    //     font-weight: 600;
    //     font-size: 24rpx;
    //     color: #da291a;
    //     line-height: 40rpx;
    //     text-align: left;
    //     font-style: normal;
    //   }
    //   .contentText {
    //     font-family: PingFangSC, PingFang SC;
    //     font-weight: 400;
    //     font-size: 24rpx;
    //     color: #262626;
    //     line-height: 40rpx;
    //     text-align: left;
    //     font-style: normal;
    //     text-indent: 48rpx;
    //   }
    //   .textIndent {
    //     text-indent: 48rpx;
    //   }
    // }
    // .popupContent::-webkit-scrollbar {
    //   display: none;
    // }
  }

  .backTopBox {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    position: fixed;
    right: 32px;
    bottom: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;

    .backIcon {
      width: 20px;
      height: 20px;
    }
  }
}
</style>