<template>
  <view class="main">
    <view
      class="top"
      :style="{
        height: `${loginType === 'min' ? menu.bottom + 8 : ''}px`,
        paddingTop: `${menu.top}px`,
      }"
    >
      <div class="topContent">
        <!-- <span class="pageTitle">精选互动</span> -->
        <!-- <image
          class="backIcon"
          src="https://eshangtech.com/wanmeiyizhanImg/home/backArrow.svg"
          @click="handleBack"
        />-->

        <div style="display: inline-block">
          <view class="currentServiceBox" @click="goSelectServer">
            <image
              class="pointIcon"
              src="https://eshangtech.com/wanmeiyizhanImg/home/blackFixed.png"
            />
            <span class="serviceName">{{
              currentServiceMessage.SERVERPART_NAME || ""
            }}</span>
            <image
              class="rightArrowIcon"
              src="https://eshangtech.com/wanmeiyizhanImg/home/rightArrowIcon.png"
            />
          </view>
        </div>
      </div>
    </view>

    <view class="newTab">
      <view
        :class="selectTab === item.value ? 'tabItem selectTab' : 'tabItem'"
        v-for="(item, index) in tabList"
        :key="index"
        @click="handleChangeTab(item.value)"
      >
        {{ item.label }}
      </view>
    </view>

    <view class="newContent">
      <view class="content" v-if="selectTab === 1">
        <view class="contentItem">
          <image
            class="contentImg"
            src="https://eshangtech.com/wanmeiyizhanImg/home/activityNo1.png"
          />
        </view>
      </view>

      <view class="content" v-if="selectTab === 2">
        <no-data :text="'暂无活动'" :isShow="true" />
      </view>

      <view class="content" v-if="selectTab === 3">
        <no-data :text="'暂无活动'" :isShow="true" />
      </view>
    </view>

    <view class="todayRecommendation">
      <view class="todayTitle">今日推荐</view>

      <view class="todayItem">
        <image
          class="todayImg"
          src="https://eshangtech.com/wanmeiyizhanImg/home/activityNo2.png"
        />
      </view>

      <view class="todayItem">
        <image
          class="todayImg"
          src="https://eshangtech.com/wanmeiyizhanImg/home/activityNo3.png"
        />
      </view>
    </view>
    <!-- <view class="selectService">
      <div style="display: inline-block">
        <view class="currentServiceBox" @click="goSelectServer">
          <image
            class="pointIcon"
            src="https://eshangtech.com/wanmeiyizhanImg/home/blackFixed.png"
          />
          <span class="serviceName">{{
            currentServiceMessage.SERVERPART_NAME || ""
          }}</span>
          <image
            class="rightArrowIcon"
            src="https://eshangtech.com/wanmeiyizhanImg/home/rightArrowIcon.png"
          />
        </view>
      </div>
    </view> -->

    <view class="newBox" v-if="false">
      <view class="activityTitle">折扣优惠</view>
      <scroll-view scroll-x class="activityBox">
        <view
          class="couponList"
          :style="{
            width: `${356 * newActivityList.length}rpx`,
          }"
          v-if="newActivityList && newActivityList.length > 0"
        >
          <view
            class="couponItem"
            v-for="(item, index) in newActivityList"
            :key="index"
            @click="goCoupon(item)"
          >
            <view class="couponItemTop">
              <image
                class="itemImg"
                :src="
                  item.COUPON_IMAGEURL ||
                  'https://eshangtech.com/ShopICO/no-picture.png'
                "
                mode="aspectFit"
              />
            </view>
            <view class="couponItemBottom">
              <view class="couponText">
                {{ item.MERCHANTS_NAME || "" }}{{ item.COUPON_NAME || "" }}
              </view>
              <view class="couponTime">
                <image
                  class="timeIcon"
                  src="https://eshangtech.com/wanmeiyizhanImg/home/timeIcon.png"
                />
                <span class="couponTimeText">
                  {{
                    item.START_TIME ? $utils.formatDate(item.START_TIME) : ""
                  }}-{{ item.END_TIME ? $utils.formatDate(item.END_TIME) : "" }}
                </span>
              </view>
            </view>
          </view>
        </view>
        <view v-else class="noDataBox">
          <no-data
            text="暂无活动"
            :isShow="!(newActivityList && newActivityList.length > 0)"
          />
        </view>
      </scroll-view>

      <view class="activityTitle" style="margin-top: 32rpx">会员活动</view>
      <scroll-view scroll-x class="activityBox">
        <view
          class="couponList"
          :style="{
            width: `${356 * memberActivitiesList.length}rpx`,
          }"
          v-if="memberActivitiesList && memberActivitiesList.length > 0"
        >
          <view
            class="couponItem"
            v-for="(item, index) in memberActivitiesList"
            :key="index"
          >
            <view class="couponItemTop">
              <image
                class="itemImg"
                :src="
                  item.ImageList && item.ImageList.length > 0
                    ? item.ImageList[0].ImageUrl
                    : 'https://eshangtech.com/ShopICO/no-picture.png'
                "
                mode="aspectFit"
              />
            </view>
            <view class="couponItemBottom">
              <view class="couponText">
                {{ item.NOTICEINFO_TITLE || "" }}
              </view>
              <view class="couponTime">
                <image
                  class="timeIcon"
                  src="https://eshangtech.com/wanmeiyizhanImg/home/timeIcon.png"
                />
                <span class="couponTimeText">
                  {{
                    item.START_DATE ? $utils.formatDate(item.START_DATE) : ""
                  }}-{{ item.END_DATE ? $utils.formatDate(item.END_DATE) : "" }}
                </span>
              </view>
            </view>
          </view>
        </view>
        <view v-else class="noDataBox">
          <no-data
            text="暂无活动"
            :isShow="!(memberActivitiesList && memberActivitiesList.length > 0)"
          />
        </view>
      </scroll-view>

      <view class="activityTitle" style="margin-top: 32rpx">线上商城</view>
      <scroll-view scroll-x class="activityBox">
        <view
          class="couponList"
          :style="{
            width: `${356 * onlineShoppingMallList.length}rpx`,
          }"
          v-if="onlineShoppingMallList && onlineShoppingMallList.length > 0"
        >
          <view
            class="couponItem"
            v-for="(item, index) in onlineShoppingMallList"
            :key="index"
          >
            <view class="couponItemTop">
              <image
                class="itemImg"
                :src="
                  item.ImageList && item.ImageList.length > 0
                    ? item.ImageList[0].ImageUrl
                    : 'https://eshangtech.com/ShopICO/no-picture.png'
                "
                mode="aspectFit"
              />
            </view>
            <view class="couponItemBottom">
              <view class="couponText">
                {{ item.NOTICEINFO_TITLE || "" }}
              </view>
              <view class="couponTime">
                <image
                  class="timeIcon"
                  src="https://eshangtech.com/wanmeiyizhanImg/home/timeIcon.png"
                />
                <span class="couponTimeText">
                  {{
                    item.START_DATE ? $utils.formatDate(item.START_DATE) : ""
                  }}-{{ item.END_DATE ? $utils.formatDate(item.END_DATE) : "" }}
                </span>
              </view>
            </view>
          </view>
        </view>
        <view v-else class="noDataBox">
          <no-data
            text="暂无活动"
            :isShow="
              !(onlineShoppingMallList && onlineShoppingMallList.length > 0)
            "
          />
        </view>
      </scroll-view>
    </view>

    <view class="header" v-if="false">
      <!-- ; margin-left: 16rpx -->
      <div style="display: inline-block; margin-top: 16rpx">
        <view class="currentServiceBox" @click="goSelectServer">
          <image
            class="pointIcon"
            src="https://eshangtech.com/wanmeiyizhanImg/home/blackFixed.png"
          />
          <span class="serviceName">{{
            currentServiceMessage.SERVERPART_NAME || ""
          }}</span>
          <image
            class="rightArrowIcon"
            src="https://eshangtech.com/wanmeiyizhanImg/home/rightArrowIcon.png"
          />
        </view>
      </div>

      <!-- <view
        class="arrowBox"
        :style="{
          height: menu.height + 10 + 'px',
        }"
      >
        <view @click="goSelectServer">
          <view class="selectServiceBox">
            <image
              class="serviceIcon"
              src="https://eshangtech.com/ShopICO/discovery/serviceIcon.png"
            />
            <view class="nameBox">
              <span class="service">{{
                currentServiceMessage.SERVERPART_NAME || ""
              }}</span>
              <image
                class="moreIcon"
                src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"
              />
            </view>
          </view>
        </view>
      </view> -->
    </view>
    <!-- :style="{ paddingTop: menu.height + 10 + 'px' }" -->
    <view class="serviceBox" v-if="false">
      <!-- :style="{ paddingTop: menu.height + menu.top + 10 + 'px' }" -->

      <!-- v-if="pageMsg.ImagePath" -->
      <view class="serviceImg" v-if="false">
        <image class="img" :src="pageMsg.ImagePath"></image>
        <view class="serviceInfoBox">
          <span
            class="serviceName"
            :style="{ color: pageMsg.ImagePath ? '#fff' : '#000' }"
            >{{ currentServiceMessage.SERVERPART_NAME || "" }}</span
          >
          <!--                    <span class="state">营业中</span>-->
        </view>
      </view>

      <current-service
        :goDetail="true"
        :currentServiceMessage="currentServiceMessage"
      />

      <div class="serviceTypeTabs" @click="handleGoDetail" v-if="false">
        <div class="serviceTypeItem">
          <image
            class="itemIcon"
            :src="
              serviceMessage.chargingStation
                ? 'https://eshangtech.com/ShopICO/discovery/chargingStationSelect.png'
                : 'https://eshangtech.com/ShopICO/discovery/chargingStationNo.png'
            "
          />
          <span class="itemText">充电桩</span>
        </div>
        <div class="serviceTypeItem">
          <!--                    <image class="itemIcon" :src="serviceMessage.gasStation?'https://eshangtech.com/ShopICO/discovery/gasStationSelect.png':'https://eshangtech.com/ShopICO/discovery/gasStationNo.png'" />-->
          <image
            class="itemIcon"
            src="https://eshangtech.com/ShopICO/discovery/gasStationSelect.png"
          />
          <span class="itemText">加油站</span>
        </div>
        <div class="serviceTypeItem">
          <image
            class="itemIcon"
            :src="
              serviceMessage.nursery
                ? 'https://eshangtech.com/ShopICO/discovery/nurserySelect.png'
                : 'https://eshangtech.com/ShopICO/discovery/nurseryNo.png'
            "
          />
          <span class="itemText">母婴室</span>
        </div>
        <div class="serviceTypeItem">
          <image
            class="itemIcon"
            :src="
              serviceMessage.parkingSpace
                ? 'https://eshangtech.com/ShopICO/discovery/parkingSpaceSelect.png'
                : 'https://eshangtech.com/ShopICO/discovery/parkingSpaceNo.png'
            "
          />
          <span class="itemText">停车位</span>
        </div>
        <div class="serviceTypeItem">
          <image
            class="itemIcon"
            :src="
              serviceMessage.store
                ? 'https://eshangtech.com/ShopICO/discovery/storeSelect.png'
                : 'https://eshangtech.com/ShopICO/discovery/storeNo.png'
            "
          />
          <span class="itemText">便利店</span>
        </div>
      </div>
    </view>

    <div class="list-box">
      <div v-if="false">
        <div class="listTitle">精选商家</div>
        <div class="shopList">
          <div
            class="shopItem"
            v-for="(item, index) in couponList"
            :key="index"
            @click="goShop(item)"
          >
            <div class="shopLeft">
              <image
                class="shopIcon"
                :src="
                  item.MERCHANTS_LOGO ||
                  'https://eshangtech.com/ShopICO/no-picture.png'
                "
              />
            </div>

            <div class="shopRight">
              <div class="first">
                <span class="shopName">{{ item.MERCHANTS_NAME || "-" }}</span>
                <span class="tradeType" v-if="item.SHOPTRADE_TEXT">{{
                  item.SHOPTRADE_TEXT
                }}</span>
              </div>
              <div class="rateBox">
                <uni-rate
                  :value="item.MERCHANTS_SCORE"
                  size="16"
                  allowHalf
                  color="#B8B7B4"
                  activeColor="#BA922F"
                  style="margin-right: 8rpx"
                />
                <span class="markNumber"
                  >{{ item.MERCHANTS_SCORE || "-" }}分</span
                >
              </div>
              <div class="otherBox">
                <div class="otherItem">
                  <span class="label">月销</span>
                  <span class="value">{{ item.MONTHLYSALES || "-" }}</span>
                </div>
                <div class="otherItem">
                  <span class="label">人均</span>
                  <span class="value">{{ item.PERCAPITA || "-" }}</span>
                </div>
                <div class="otherItem">
                  <span class="label">评论</span>
                  <span class="value">{{ item.COMMENT_COUNT || "-" }}</span>
                </div>
              </div>
            </div>

            <!-- 去点餐 -->
            <div
              class="goOrder"
              v-if="item.SCANCODE_ORDER === 1"
              @click.stop="goBuy(item)"
            >
              <image
                class="orderIcon"
                src="https://eshangtech.com/wanmeiyizhanImg/home/goOrderIcon.png"
              />
              <span class="goOrderText">去点餐</span>
            </div>
          </div>

          <no-data
            text="暂无商家"
            :isShow="!(couponList && couponList.length > 0)"
          />
        </div>
      </div>

      <!-- 定位当前位置 -->
      <div class="shoplist-service" v-if="false">
        <div style="display: flex; align-items: center">
          <image
            mode="aspectFit"
            src="https://eshangtech.com/ShopICO/discovery/shop-dw.png"
            style="margin-right: 8rpx; width: 33rpx; height: 33rpx"
          ></image>
          <!-- <span class="position-name">{{city}}</span> -->
          <span
            class="service-name"
            style="flex: 5"
            @tap="isShowSeviceBox = !isShowSeviceBox"
          >
            <!-- 萧山服务区 -->
            {{ currentServiceMessage.SERVERPART_NAME }}
          </span>
        </div>
        <div class="service-btn" @click="goSelectServer">
          更换服务区<span class="sj"></span>
        </div>
      </div>
      <div style="transition: all 0.5s; background: #fff">
        <!--        :style="isShowSeviceBox? 'transform: translateY('+translateY+'px);': 'transform: translateY(-8rpx)'"-->
        <div class="banner-box" v-if="false">
          <!-- <image src="https://eshangtech.com/ShopICO/discovery/discovery_b.png"></image> -->
          <swiper
            scroll-x="true"
            autoplay="true"
            circular="true"
            class="banner"
            @change="swiperChange"
            :current="currentBan"
          >
            <swiper-item v-for="(img, o) in bannerList" :key="o">
              <image :src="img"></image>
            </swiper-item>
          </swiper>
          <div class="swiper-dots">
            <div
              v-for="(dot, i) in bannerList"
              :key="i"
              class="dot"
              :class="{ active: currentBan === i }"
            ></div>
          </div>
        </div>
        <div
          class="banner-text"
          v-if="
            !user.MEMBERSHIP_MOBILEPHONE || user.MEMBERSHIP_MOBILEPHONE == ''
          "
        >
          <div style="display: flex; align-items: center">
            <!-- <i></i> -->
            <span>成为会员超多权益等你享</span>
          </div>

          <span class="vip-btn" @click="goRegister">立即开启</span>
        </div>

        <div class="mt8"></div>
        <div class="newTabList" v-if="false">
          <!-- v-if="selectTypeList && selectTypeList.length > 0" -->
          <div
            :class="
              selectTypeTab === index
                ? 'newTabItem selectTabItem'
                : 'newTabItem'
            "
            v-for="(item, index) in selectTypeList"
            :key="index"
            @click="handleChangeType(index)"
          >
            {{ item.label }}
          </div>
        </div>
        <div v-if="false">
          <div
            class="newShopUnit"
            v-for="(item, i) in onShowTypeList"
            :key="i"
            @click="goShop(item)"
            :style="{ borderWidth: i + 1 === onShowTypeList.length ? '0' : '' }"
          >
            <div v-if="selectTypeTab !== 0">
              <div class="shopItemTop">
                <div class="shopImg">
                  <image
                    class="shopIcon"
                    :src="
                      item.MERCHANTS_LOGO ||
                      'https://eshangtech.com/ShopICO/no-picture.png'
                    "
                    mode="aspectFit"
                  />
                </div>
                <div class="shopDetail">
                  <div class="shopName">
                    <!-- max-width: calc(100% - 133rpx); -->
                    <span
                      class="shopTitle"
                      :style="{
                        maxWidth:
                          item.SCANCODE_ORDER === 1 &&
                          item.CouponList &&
                          item.CouponList.length > 0
                            ? 'calc(100% - 270rpx)'
                            : 'calc(100% - 133rpx)',
                      }"
                      >{{ item.MERCHANTS_NAME }}</span
                    >
                    <!-- <span
                    class="titleIcon"
                    v-if="item.SCANCODE_ORDER === 1"
                    @click.stop="goBuy(item)"
                  ></span> -->
                  </div>
                  <div class="otherDetail">
                    <div class="leftDetail">
                      <span class="mark"
                        >{{ item.MERCHANTS_SCORE || "-" }}分</span
                      >
                      <span class="monthSales"
                        >月售{{ item.MONTHLYSALES || "-" }}</span
                      >
                      <span class="perCapita"
                        >人均 ￥{{ item.PERCAPITA || "-" }}</span
                      >
                    </div>
                    <div class="rightDetail">
                      <!-- <span class="perCapita"
                      >人均 ￥{{ item.PERCAPITA || "-" }}</span
                    > -->
                      <!-- <span
                      v-show="item.CouponList && item.CouponList.length > 0"
                      class="icon-coupon"
                      >优惠券</span
                    > -->
                    </div>
                  </div>

                  <!-- 去点餐 -->
                  <div
                    class="goOrder"
                    v-if="item.SCANCODE_ORDER === 1"
                    @click.stop="goBuy(item)"
                  >
                    <image
                      class="orderIcon"
                      src="https://eshangtech.com/wanmeiyizhanImg/home/goOrderIcon.png"
                    />
                    <span class="goOrderText">去点餐</span>
                  </div>
                  <!-- 优惠券 -->
                  <div
                    class="couponBox"
                    :style="{
                      right:
                        item.SCANCODE_ORDER === 1 &&
                        item.CouponList &&
                        item.CouponList.length > 0
                          ? '160rpx'
                          : '0',
                    }"
                    v-if="item.CouponList && item.CouponList.length > 0"
                  >
                    <image
                      class="couponIcon"
                      src="https://eshangtech.com/wanmeiyizhanImg/home/useCoupon.png"
                    />
                    <span class="couponText">优惠券</span>
                  </div>
                </div>
              </div>

              <div
                class="shopList"
                v-if="item.GoodsList && item.GoodsList.length > 0"
              >
                <div
                  class="shopItem"
                  style="padding: 0"
                  v-for="(subItem, subIndex) in item.GoodsList"
                  :key="subIndex"
                >
                  <div class="shopImgBox">
                    <image class="shopImg" :src="subItem.IMAGE_URL" />
                  </div>
                  <div class="shopName">{{ subItem.COMMODITY_NAME || "" }}</div>
                  <div class="itemPrice">
                    <span class="itemUnit">¥</span>
                    <span class="itemPrice">{{
                      subItem.COMMODITY_RETAILPRICE || ""
                    }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="selectTypeTab === 0" class="activitieBox">
              <div style="width: 100%">
                <div class="activeTitle">{{ item.label }}</div>
                <div class="couponList">
                  <div
                    class="couponItem"
                    v-for="(subItem, subIndex) in item.children"
                    :key="subIndex"
                    @click.stop="goCoupon(subItem)"
                  >
                    <div class="itemImgBox">
                      <image
                        class="itemImg"
                        :src="
                          item.MERCHANTS_LOGO ||
                          'https://eshangtech.com/ShopICO/no-picture.png'
                        "
                        mode="aspectFit"
                      />
                    </div>
                    <div class="couponText">
                      {{ subItem.MERCHANTS_NAME || ""
                      }}{{ subItem.COUPON_NAME || "" }}
                    </div>
                    <div class="couponTime">
                      <image
                        class="timeIcon"
                        src="https://eshangtech.com/wanmeiyizhanImg/home/timeIcon.png"
                      />
                      <span class="couponTimeText">
                        {{
                          subItem.START_TIME
                            ? $utils.formatDate(subItem.START_TIME)
                            : ""
                        }}-{{
                          subItem.END_TIME
                            ? $utils.formatDate(subItem.END_TIME)
                            : ""
                        }}
                      </span>
                    </div>
                  </div>

                  <no-data
                    v-if="!(item.children && item.children.length > 0)"
                    :style="{ width: '100%' }"
                    :text="selectTypeTab === 0 ? '暂无活动' : ''"
                    :isShow="!(item.children && item.children.length > 0)"
                  />
                </div>
              </div>
            </div>
          </div>
          <no-data
            :text="selectTypeTab === 0 ? '暂无活动' : ''"
            :isShow="!(onShowTypeList && onShowTypeList.length > 0)"
          />
        </div>
      </div>

      <div v-if="false">
        <div v-if="false">
          <div class="mt8"></div>
          <div class="shop-unit" v-for="(item, i) in couponList" :key="i">
            <div class="coupon-card" @click="goShop(item)">
              <div class="conpon-img">
                <image
                  :src="
                    item.MERCHANTS_LOGO ||
                    'https://eshangtech.com/ShopICO/no-picture.png'
                  "
                  mode="aspectFit"
                ></image>
              </div>
              <div class="newListItemRight">
                <div class="titleItemRight">
                  <span class="title">{{ item.MERCHANTS_NAME }}</span>
                  <span
                    class="titleIcon"
                    v-if="item.SCANCODE_ORDER === 1"
                    @click.stop="goBuy(item)"
                  ></span>
                </div>
                <div class="scoreBox">
                  <van-rate
                    :value="item.MERCHANTS_SCORE"
                    size="12"
                    allow-half="true"
                    color="#f28c44"
                    void-color="#eee"
                    void-icon="star"
                    readonly
                  >
                  </van-rate>
                  <span class="value">{{ " " + item.MERCHANTS_SCORE }}</span>
                  <span class="value" style="margin-left: 48rpx"
                    >评论{{ item.COMMENT_COUNT }}</span
                  >
                </div>
                <view class="labelList">
                  <view class="labelItem" style="width: 40%">
                    <image
                      class="labelIcon"
                      src="https://eshangtech.com/wanmeiyizhanImg/discovery/trade.png"
                    />
                    <view class="labelName">{{
                      item.SHOPTRADE_TEXT || "品类"
                    }}</view>
                  </view>
                  <view class="labelItem">
                    <view class="labelName">人均 ￥{{ item.PERCAPITA }}</view>
                  </view>
                  <view class="labelItem">
                    <view class="labelName">月售{{ item.MONTHLYSALES }}</view>
                  </view>
                </view>
                <!--                            <div class="flex-s text246">-->
                <!--                                <span class="text246 mr32 icon-trade flex-item">{{item.SHOPTRADE_TEXT || "品类"}}</span>-->
                <!--                                <span class="text246 mr32 flex-item">人均 ￥{{item.PERCAPITA}}</span>-->
                <!--                                <span class="text246 flex-item">月售{{item.MONTHLYSALES}}</span>-->
                <!--                            </div>-->
                <div class="flex-b mtb16">
                  <span class="shop-comment-text">{{
                    item.COMMENT ? '"' + item.COMMENT + '"' : '"等你来评价哟"'
                  }}</span>
                  <span v-show="item.CouponList.length > 0" class="icon-coupon"
                    >优惠券</span
                  >
                </div>
                <!-- <hr /> -->
                <div class="line"></div>
              </div>
            </div>
          </div>
        </div>

        <!-- <div class="loading-text" v-if="onShowTypeList.length > 0">
          {{
            pageMsg.isLoadMore
              ? "正在加载数据..."
              : "——— 尽请期待更多精彩门店 ———"
          }}
        </div> -->

        <button
          type="primary"
          size="mini"
          open-type="openSetting"
          class="getLocation"
          @opensetting="bindopensetting"
          v-show="openSetting"
        >
          开启定位
        </button>
      </div>
      <UniPopup
        :show="isLogin && !user.MEMBERSHIP_MOBILEPHONE"
        @close="isLogin = false"
        custom-style="border-radius: 24rpx;"
      >
        <div class="pop-box">
          <div class="pop-title">温馨提示</div>
          <div class="pop-body">您还没有登录，快去登录吧!</div>
          <div class="popbtn-box">
            <div class="popbtn cancel-btn" @click="isLogin = false">取消</div>
            <div class="popbtn confirm-btn" @click="goRegister">去登录</div>
          </div>
        </div>
      </UniPopup>
      <UniPopup
        :show="isShow"
        position="bottom"
        overlay="false"
        @close="isShow = false"
      >
        <van-picker
          show-toolbar
          :columns="serverList"
          @cancel="isShow = false"
          @confirm="chosePart"
          value-key="showName"
        />
      </UniPopup>
    </div>

    <tabbar :page="'/pages/discovery/index'" />
    <CustomLoading
      :visible="isLoading"
      v-if="isLoading"
      @update:visible="(val) => (isLoading = val)"
    />
  </view>
</template>

<script>
import UniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
import currentService from "@/components/currentService.vue";
import noData from "../../components/noData.vue";
import tabbar from "../../components/tabbar.vue";
import CustomLoading from "../../components/customLoading.vue";

import { mapGetters, mapMutations } from "vuex";
export default {
  data() {
    return {
      pageMsg: {
        pageSize: 6,
        pageIndex: 1,
        total: 0,
        isLoadMore: false,
        serverDesc: "",
        ImagePath: "",
      },
      loadTime: 0,
      couponList: [],
      serverPartList: [],
      serverPart: "",
      isShow: false,
      isShowSeviceBox: true,
      isFresh: false,
      openSetting: false,
      isLogin: false,
      showServerList: [],
      translateY: 0,
      currentBan: 0,
      bannerList: ["https://eshangtech.com/ShopICO/discovery/discovery_b.png"],
      servepartSeviceList: {
        HASPANTRY: {
          id: "1",
          label: "男厕",
          icos: "https://eshangtech.com/ShopICO/yifu/spico/manWC.png",
        },
        HASWIFI: {
          id: "2",
          label: "女厕",
          icos: "https://eshangtech.com/ShopICO/yifu/spico/womenWC.png",
        },
        HASTHIRDTOILETS: {
          id: "3",
          label: "第三卫生间",
          icos: "https://eshangtech.com/ShopICO/yifu/spico/thirdToilets.png",
        },
        TOILETCOUNT: {
          id: "4",
          label: "潮汐厕位",
          icos: "https://eshangtech.com/ShopICO/yifu/spico/tidalSpace.png",
        },
        HASWATERROOM: {
          id: "5",
          label: "开水器",
          icos: "https://eshangtech.com/ShopICO/yifu/spico/waterBoiler.png",
        },
        HASSHOWERROOM: {
          id: "6",
          label: "车辆加水",
          icos: "https://eshangtech.com/ShopICO/yifu/spico/vehicleRefueling.png",
        },
        HASCHILD: {
          id: "7",
          label: "车辆维修",
          icos: "https://eshangtech.com/ShopICO/yifu/spico/maintenance.png",
        },
        SMALLPARKING: {
          id: "8",
          icos: "https://eshangtech.com/ShopICO/yifu/spico/car.png",
          label: "轿车车位",
        },
        PACKING: {
          id: "9",
          label: "客车车位",
          icos: "https://eshangtech.com/ShopICO/yifu/spico/bus.png",
        },
        TRUCKPACKING: {
          id: "10",
          label: "货车车位",
          icos: "https://eshangtech.com/ShopICO/yifu/spico/trainCar.png",
        },
        DININGROOMCOUNT: {
          id: "11",
          label: "餐饮",
          icos: "https://eshangtech.com/ShopICO/yifu/spico/food.png",
        },
        HASBACKGROUNDRADIO: {
          id: "12",
          label: "便利店",
          icos: "https://eshangtech.com/ShopICO/yifu/spico/minimart.png",
        },
        HASMESSAGESEARCH: {
          id: "13",
          label: "住宿",
          icos: "https://eshangtech.com/ShopICO/yifu/spico/room.png",
        },
        DININGBXCOUNT: {
          id: "14",
          label: "商铺",
          icos: "https://eshangtech.com/ShopICO/yifu/spico/shop.png",
        },
        DANPACKING: {
          id: "15",
          label: "危化品车位",
          icos: "https://eshangtech.com/ShopICO/yifu/spico/chemicals.png",
        },
      },
      currentServiceMessage: {}, // 当前的服务区数据
      showServerIconList: [],
      showServerInfo: false,
      currentServiceInfo: {},
      menu: {}, // 用户手机导航按钮数据
      serviceMessage: {}, // 判断服务区 充电桩母婴室.... 是否有的对象
      allTypeList: [], // 所有业态的
      onShowTypeList: [], // 当前显示的业态列表
      selectTypeTab: 0, // 选中的业态类型
      selectTypeList: [], // 选择业态的列表
      newActivityList: [], // 折扣优惠
      memberActivitiesList: [], // 会员活动
      onlineShoppingMallList: [], // 线上商城
      tabList: [
        { label: "折扣优惠", value: 1 },
        { label: "会员活动", value: 2 },
        { label: "线上商城", value: 3 },
      ], // 新的tab内容
      selectTab: 1,
      loginType: "",
      isLoading: false,
    };
  },
  computed: {
    ...mapGetters({
      user: "user",
      canIuse: "canIuse",
      homeserverPart: "serverPart",
      discoveryServerPart: "discoveryServerPart",
      refresh: "refresh",
      serverList: "severList",
    }),
  },
  components: {
    // popGet
    noData,
    UniPopup,
    currentService,
    tabbar,
    CustomLoading,
  },
  onLoad() {
    let systemInfo = uni.getSystemInfoSync();
    let type = uni.getStorageSync("loginType");
    console.log("type", type);
    if (type === "min") {
      this.menu = uni.getMenuButtonBoundingClientRect();
    } else {
      this.menu = systemInfo.safeArea;
    }
    console.log("this.menu", this.menu);
    console.log("this.user", this.user);
    this.handleGetMemberData();
    this.handleGetOnlineShoppingMall();
  },
  onHide() {
    this.isLoading = false;
  },
  onUnload() {
    this.isShow = false;
    this.isLoading = false;
  },
  destroyed() {
    this.isLoading = false;
  },
  onShow() {
    uni.hideTabBar({
      animation: false,
    });
    let res = uni.getStorageSync("currentService");
    console.log("this.currentServiceMessage", this.currentServiceMessage);
    if (this.currentServiceMessage.SERVERPART_ID !== res.SERVERPART_ID) {
      this.couponList = [];
      this.currentServiceMessage = res;
      this.getCouponList();
      this.getServerpartInfo();
    }

    // if (this.homeserverPart.ServerPart_Id === this.discoveryServerPart.ServerPart_Id) {
    //   if (this.serverPart.ServerPart_Id !== this.discoveryServerPart.ServerPart_Id) {
    //     this.serverPart = this.homeserverPart
    //     this.couponList = []
    //     this.pageMsg.pageIndex = 1
    //     this.pageMsg.isLoadMore = true
    //     // this.isShowSeviceBox = false
    //
    //     this.getCouponList()
    //     this.getServerpartInfo()
    //   }
    // } else {
    //   if (this.serverPart.ServerPart_Id !== this.discoveryServerPart.ServerPart_Id) {
    //     this.serverPart = this.discoveryServerPart
    //     this.couponList = []
    //     this.pageMsg.pageIndex = 1
    //     this.pageMsg.isLoadMore = true
    //     // this.isShowSeviceBox = false
    //     this.getServerpartInfo()
    //     this.getCouponList()
    //   }
    // }
    // if (this.refresh) {
    //   this.setFresh(false)
    //   // this.isShowSeviceBox = false
    //   this.couponList = []
    //   this.getCouponList()
    //   this.getServerpartInfo()
    // }
  },
  onPullDownRefresh() {
    // let _this = this
    // this.isShowSeviceBox = false
    this.pageMsg.pageIndex = 1;
    this.pageMsg.isLoadMore = true;

    // _this.getLocalServer()
    setTimeout(function () {
      // this.isShowSeviceBox = true
      uni.stopPullDownRefresh();
    }, 1000);
  },
  methods: {
    ...mapMutations({
      setFresh: "refresh",
      setArea: "setHomeServer",
      setServerPart: "discoveryServerPart",
      setprovinceCode: "setprovinceCode",
      setSeverList: "severList",
    }),
    // 切换tab触发的方法
    handleChangeTab(value) {
      this.selectTab = value;
    },
    // 拿到会员活动的数据
    async handleGetMemberData() {
      this.isLoading = true;
      let req = {
        SearchParameter: {
          NOTICEINFO_TYPES: 2020,
          PROVINCE_CODE: this.user.PROVINCE_CODE || "340000",
          NOTICEINFO_STATE: 1,
        },
        PageIndex: 1,
        PageSize: 999999,
      };
      const data = await this.$api.$post(
        "/EShangApiMain/Notice/GetNOTICEINFOList",
        req
      );
      let list = data.Result_Data.List;
      console.log("handleGetMemberData", list);
      this.memberActivitiesList = list;
      this.isLoading = false;
    },
    // 拿到线上商城的数据
    async handleGetOnlineShoppingMall() {
      this.isLoading = true;
      let req = {
        SearchParameter: {
          NOTICEINFO_TYPES: 2030,
          PROVINCE_CODE: this.user.PROVINCE_CODE || "340000",
          NOTICEINFO_STATE: 1,
        },
        PageIndex: 1,
        PageSize: 999999,
      };
      const data = await this.$api.$post(
        "/EShangApiMain/Notice/GetNOTICEINFOList",
        req
      );
      let list = data.Result_Data.List;
      console.log("handleGetOnlineShoppingMall", list);
      this.onlineShoppingMallList = list;
      this.isLoading = false;
    },
    handleToMap() {
      let currentService = uni.getStorageSync("currentService");
      uni.openLocation({
        latitude: currentService.SERVERPART_Y * 1,
        longitude: currentService.SERVERPART_X * 1,
        scale: 16, // 缩放比例
        name: currentService.SERVERPART_NAME,
        address: "", // 这个可能会影响地图的定位，所以可以选择不填
        success(data) {
          console.log(data);
        },
        fail(err) {
          console.log(err);
        },
      });
    },
    // 跳转领取优惠券
    goCoupon(item) {
      console.log("item", item);
      uni.navigateTo({ url: "/pages/couponDetail/index?id=" + item.COUPON_ID });
    },
    // ...mapActions('city', {
    //   'getLocation': 'CITY_GET_LOCATION'
    // }),
    handleGoDetail() {
      uni.navigateTo({
        url:
          "/pages/serviceDetail/index?id=" +
          this.currentServiceMessage.SERVERPART_ID,
      });
    },
    // 改变是否显示服务区的详情
    handleChangeShowServiceInfo() {
      this.showServerInfo = !this.showServerInfo;
    },
    // 将列表按照月销排序
    handleGetSort(list) {
      console.log("list", list);
      let res = [];
      if (list && list.length > 0) {
        var len = list.length;
        for (var i = 0; i < len - 1; i++) {
          for (var j = 0; j < len - 1 - i; j++) {
            if (list[j].MONTHLYSALES < list[j + 1].MONTHLYSALES) {
              var temp = list[j];
              list[j] = list[j + 1];
              list[j + 1] = temp;
            }
          }
        }
        res = list;
      }
      return res;
    },
    // 跳转到地图选择服务区
    goSelectServer() {
      uni.navigateTo({ url: "/pages/newMap/index/index" });
    },
    goRegister() {
      if (this.type === "min") {
        uni.navigateTo({ url: "/pages/register/index" });
      } else {
        uni.navigateTo({ url: "/pages/login/index" });
      }
    },
    goDetail(id) {
      if (this.user.MEMBERSHIP_MOBILEPHONE) {
        uni.navigateTo({ url: "/pages/couponDetail/index?id=" + id });
      } else {
        this.isLogin = true;
      }
    },
    goShop(item) {
      console.log("goShop", item);
      if (item.SCANCODE_ORDER === 1) {
        this.goBuy(item);
      } else {
        uni.navigateTo({
          url: `/pages/storeDetail/index?id=${item.MERCHANTS_ID}`,
        });
      }
    },
    goBuy(item) {
      console.log("goBuy", item);
      if (this.user.MEMBERSHIP_MOBILEPHONE) {
        let id = item.SERVERPARTSHOP_IDS.split(",")[0];
        // let arr = {
        //   id: id
        // shopName: item.MERCHANTS_NAME,
        // serverpartId: item.SERVERPART_ID

        // }
        // this.setprovinceCode(item.PROVINCE_CODE)
        // this.$store.commit('nowStore', arr)
        uni.navigateTo({
          url: `/pages/shopPages/shop/index?id=${id}&mid=${item.MERCHANTS_ID}&province=${item.PROVINCE_CODE}`,
        });
      } else {
        let id = item.SERVERPARTSHOP_IDS.split(",")[0];
        uni.navigateTo({
          url: `/pages/shopPages/shop/index?id=${id}&mid=${item.MERCHANTS_ID}&province=${item.PROVINCE_CODE}`,
        });
        this.isLogin = true;
      }
    },
    toggleSever() {
      if (this.serverList.length > 0) {
        this.isShow = !this.isShow;
      } else {
        uni.showToast({ title: "没有可选择服务区数据。", icon: "none" });
      }
    },
    getLocalServer() {
      // 根据定位获取周边服务区
      let _this = this;
      uni.choosePoi({
        // type: 'wgs84',
        success: function (res) {
          let latitude = res.latitude;
          let longitude = res.longitude;
          _this.$api
            .getCoop({
              action_type: "getServerPartByLocation",
              action_data: latitude,
              action_record: longitude,
              distance: 150,
              type: 1000,
            })
            .then(function (data) {
              if (data.ResultCode === "100") {
                let _data = data.Data.List;
                _data.map((n) => {
                  n.showName =
                    n.ServerPart_Name +
                    "(" +
                    Math.round(n.Distance * 100) / 100 +
                    "km)";
                });
                _this.serverPartList = _data;
                _this.setSeverList(_data);
                let hasIt = _data.findIndex((element) => {
                  return (
                    _this.serverPart.ServerPart_Id === element.ServerPart_Id
                  );
                });
                if (hasIt === -1) {
                  // 如果新获取的服务区列表不包含当前选中项 则默认选中服务区第一个
                  _this.serverPart = _data[0];
                  _this.setArea(_data[0]);
                }
                //   _this.isShowSeviceBox = false
                _this.getServerpartInfo();
                _this.getCouponList();
                _this.openSetting = false;
              }
            });
        },
        fail(res) {
          _this.openSetting = true;
        },
      });
    },
    bindopensetting(e) {
      if (
        e.mp.detail.authSetting["scope.userLocation"] &&
        e.mp.detail.authSetting
      ) {
        this.getLocalServer();
      }
    },
    chosePart(event) {
      let index = event.target.index;
      this.serverPart = this.serverList[index];
      this.setServerPart(this.serverList[index]);
      this.isShow = false;
      this.pageMsg.isLoadMore = true;
      this.pageMsg.pageIndex = 1;
      this.couponList = [];
      this.getCouponList();
      this.getServerpartInfo();
    },
    getCouponList() {
      let _this = this;
      uni.showLoading({
        title: "加载中...",
      });
      _this.$api
        .getCoop({
          action_type: "GetSellerList",
          showSales: 1,
          showCoupon: 1,
          showComment: 1,
          serverpartId:
            this.serverPart.ServerPart_Id ||
            this.currentServiceMessage.SERVERPART_ID,
          provinceCode: this.serverPart.ProvinceCode || "340000",
          showGoods: 1,
          pageSize: 9999,
          pageIndex: 1,
        })
        .then(function (data) {
          if (data.ResultCode === "100") {
            data.Data.List.map((n) => {
              if (n.COUPON_TYPE === 1000) {
                n.coast =
                  Math.round((n.WITH_AMOUNT - n.USED_AMOUNT) * 100) / 100;
              }
            });
            console.log("data.Data.List", data.Data.List);
            if (_this.pageMsg.pageIndex === 1) {
              _this.couponList = data.Data.List;
              _this.couponList = _this.handleGetSort(_this.couponList);
            } else {
              _this.couponList = _this.couponList.concat(data.Data.List);
              _this.couponList = _this.handleGetSort(_this.couponList);
            }

            if (data.Data.TotalCount > _this.couponList.length) {
              _this.pageMsg.isLoadMore = true;
            } else {
              _this.pageMsg.isLoadMore = false;
            }
            _this.handleSortShopList(_this.couponList);

            console.log("_this.couponList", _this.couponList);
          } else {
            _this.pageMsg.isLoadMore = false;
          }
          uni.hideLoading();
        });
    },
    // 切换查看的业态
    handleChangeType(value) {
      this.selectTypeTab = value;
      this.onShowTypeList = this.allTypeList[this.selectTypeTab];
    },
    // 按照查出来的门店的业态进行分类
    handleSortShopList(list) {
      let allList = [];
      let tabList = [];
      // 优惠券列表
      let couponList = [];

      // 先遍历出 全部门店的业态
      if (list && list.length > 0) {
        let idList = [];
        list.forEach((item) => {
          if (item.SHOPTRADE) {
            if (idList.indexOf(item.SHOPTRADE) === -1) {
              idList.push(item.SHOPTRADE);
              tabList.push({
                label: item.SHOPTRADE_TEXT,
                value: item.SHOPTRADE,
              });
            }
          } else {
            if (idList.indexOf("0") === -1) {
              idList.push("0");
              tabList.push({
                label: "其他",
                value: "0",
              });
            }
          }

          if (item.CouponList && item.CouponList.length > 0) {
            item.CouponList.forEach((subItem) => {
              let obj = JSON.parse(JSON.stringify(subItem));
              obj.MERCHANTS_LOGO = item.MERCHANTS_LOGO;
              obj.MERCHANTS_NAME = item.MERCHANTS_NAME;
              obj.parent = item;
              couponList.push(obj);
            });
          }
        });
        this.newActivityList = couponList;
        // 根据遍历出的业态种类 变成一个二维数据
        if (idList && idList.length > 0) {
          idList.forEach((item) => {
            allList.push([]);
          });
          idList.forEach((item, index) => {
            list.forEach((subItem) => {
              if (subItem.SHOPTRADE) {
                if (item === subItem.SHOPTRADE) {
                  let oldList = allList[index];
                  oldList.push(subItem);
                }
              } else {
                if (item === "0") {
                  let oldList = allList[index];
                  oldList.push(subItem);
                }
              }
            });
          });
        }

        console.log("allList", allList);
      }

      console.log("couponList", couponList);

      if (allList && allList.length > 0) {
        allList.unshift([{ label: "折扣优惠", children: couponList }]);
        // 各种业态类型的二维数组
        this.allTypeList = allList;
        this.onShowTypeList = allList[this.selectTypeTab];
        // 在说明有数据的情况下 在tab列表里面添加一个精选活动的tab选择
        tabList.unshift({ label: "精选活动", value: "精选活动" });
        this.selectTypeList = tabList;
      }
    },
    async getServerpartInfo() {
      let seatInfo = JSON.parse(uni.getStorageSync("actualLocation"));
      console.log("seatInfo", seatInfo);

      const req = {
        ServerpartId: this.currentServiceMessage.SERVERPART_ID,
        longitude: seatInfo.longitude || "",
        latitude: seatInfo.latitude || "",
      };
      const data = await this.$api.$get(
        "/CommercialApi/BaseInfo/GetServerpartInfo",
        req
      );
      console.log("_data", data);
      let _data = data.Result_Data;
      this.currentServiceInfo = _data;
      console.log("this.currentServiceInfo", this.currentServiceInfo);
      this.pageMsg.serverDesc = _data.ServerpartInfo.SERVERPART_INFO;
      this.pageMsg.ImagePath =
        _data.ImageLits && _data.ImageLits.length > 0 ? _data.ImageLits[0] : "";
      let arr = Object.keys(this.servepartSeviceList);
      console.log("arr", arr);

      let resList = _data.RegionInfo;
      let result = [];
      //   拥有配置的列表
      let configList = {
        chargingStation: false,
        gasStation: false,
        nursery: false,
        parkingSpace: false,
        store: false,
      };
      if (resList && resList.length > 0) {
        resList.forEach((item) => {
          let itemList = [];
          arr.forEach((n) => {
            if (item[n]) {
              let obj = this.servepartSeviceList[n];
              obj.value = item[n];
              itemList.push(obj);
            }
          });
          result.push({ label: item.SERVERPART_REGIONNAME, list: itemList });
          if (item.LIVESTOCKPACKING) {
            configList.chargingStation = true;
          }
          if (
            item.REFUELINGGUN92 > 0 ||
            item.REFUELINGGUN95 > 0 ||
            item.REFUELINGGUN0 > 0
          ) {
            configList.gasStation = true;
          }
          if (item.HASMOTHER || item.HASMOTHER > 0) {
            configList.nursery = true;
          }
          if (
            item.SMALLPARKING > 0 ||
            item.PACKING > 0 ||
            item.TRUCKPACKING > 0 ||
            item.LONGPACKING > 0 ||
            item.DANPACKING > 0
          ) {
            configList.parkingSpace = true;
          }
          if (item.HASBACKGROUNDRADIO || item.HASBACKGROUNDRADIO > 0) {
            configList.store = true;
          }
        });
      }
      this.serviceMessage = configList;
      console.log("result", result);
      this.showServerIconList = result;
      let height = 0;
      if (result && result.length > 0) {
        result.forEach((item) => {
          if (item.list && item.list.length > 0) {
            height += (Math.ceil(item.list.length / 4) + 1) * 30 + 20;
          } else {
            height += -32;
          }
          console.log("height", height);
        });
      }
      this.translateY = height;

      this.isShowSeviceBox = true;

      // let _this = this
      // this.$forceUpdate()
      // this.$api.getCoop({
      //   action_type: 'getServerPartInfo',
      //   provinceCode: this.serverPart.ProvinceCode || '340000',
      //   serverpartId: this.serverPart.ServerPart_Id || this.currentServiceMessage.SERVERPART_ID
      // }).then(res => {
      //   let _data = res.Data
      //   console.log('_data2222', _data)
      //
      //   _this.showServerList = [{
      //     icos: 'https://eshangtech.com/ShopICO/discovery/manWC.png',
      //     label: '男厕所'
      //   }]
      //
      // // 服务区基础信息
      // let height = 0
      //
      // _this.pageMsg.serverDesc = _data.SERVERPART_DESC // 服务区信息描述
      // height = (_data.SERVERPART_DESC || _data.ImagePath) ? 160 : -8
      // _this.pageMsg.ImagePath = _data.ImagePath
      // _this.$forceUpdate()
      // let arr = Object.keys(_this.servepartSeviceList)
      // arr.forEach(n => {
      //   if (_data[n]) {
      //     _this.showServerList.push(_this.servepartSeviceList[n])
      //   }
      // })
      // height += _this.showServerList.length > 0 ? ((_this.showServerList.length / 4) * 40 + 32) : -32
      // _this.translateY = height + 32
      //
      // _this.isShowSeviceBox = true
      // })
    },
    // 服务区图片的改变
    swiperChange() {},
  },

  onReachBottom() {
    if (this.pageMsg.isLoadMore) {
      this.pageMsg.pageIndex += 1;
      this.getCouponList();
      // this.getServerpartInfo()
    }
  },
};
</script>

<style scoped lang="less">
.main {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  padding: 0 32rpx;
  // padding-bottom: calc(90rpx + env(safe-area-inset-bottom));

  .top {
    width: 100%;
    box-sizing: border-box;
    background: #fff;

    .topContent {
      display: flex;
      align-items: center;
      box-sizing: border-box;

      .pageTitle {
        font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
          "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: 400;
        font-size: 40rpx;
        color: #090c1a;
        line-height: 56rpx;
        text-align: left;
        font-style: normal;
      }

      .backIcon {
        width: 48rpx;
        height: 48rpx;
        margin-right: 8px;
      }

      .currentServiceBox {
        display: flex;
        align-items: center;
        padding: 8rpx 20rpx;
        border-radius: 32rpx;
        border: 1rpx solid #e7e7e6;

        .pointIcon {
          width: 24rpx;
          height: 24rpx;
          margin-right: 8rpx;
        }

        .serviceName {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #090c1a;
          line-height: 40rpx;
          text-align: justify;
          font-style: normal;
        }

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

  .newTab {
    width: 100%;
    height: 58rpx;
    display: flex;
    align-items: center;
    margin-top: 28rpx;
    border-bottom: 2rpx solid #f5f6f7;

    .tabItem {
      width: calc(100% / 3);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: "PingFangSC";
      font-weight: 400;
      font-size: 28rpx;
      color: #716f69;
      line-height: 36rpx;
      text-align: left;
      font-style: normal;
      padding-bottom: 16rpx;
    }

    .selectTab {
      color: #130f05;
      position: relative;
    }

    .selectTab::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 2rem;
      height: 4rpx;
      background: #ba922f;
    }
  }

  .newContent {
    width: 100%;
    box-sizing: border-box;
    padding-top: 24rpx;

    .content {
      .contentItem {
        width: 686rpx;
        height: 272rpx;
        border-radius: 16rpx;
        overflow: hidden;

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

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

    .todayTitle {
      font-family: "PingFangSC";
      font-weight: 400;
      font-size: 30rpx;
      color: #130f05;
      line-height: 36rpx;
      text-align: left;
      font-style: normal;
      margin-bottom: 16rpx;
    }

    .todayItem {
      width: 100%;
      height: 272rpx;
      border-radius: 16rpx;
      overflow: hidden;
      margin-bottom: 24rpx;

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

  .selectService {
    .currentServiceBox {
      display: flex;
      align-items: center;
      padding: 8rpx 20rpx;
      border-radius: 32rpx;
      border: 1rpx solid #e7e7e6;

      .pointIcon {
        width: 24rpx;
        height: 24rpx;
        margin-right: 8rpx;
      }

      .serviceName {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #090c1a;
        line-height: 40rpx;
        text-align: justify;
        font-style: normal;
      }

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

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

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

    .activityBox {
      width: 100%;
      height: 284rpx;
      margin-top: 16rpx;

      .couponList {
        .couponItem {
          display: inline-block;
          width: 332rpx;
          height: 100%;
          margin-right: 24rpx;

          .couponItemTop {
            width: 100%;
            height: 192rpx;

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

          .couponItemBottom {
            width: 100%;
            margin-top: 16rpx;

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

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

              .timeIcon {
                width: 24rpx;
                height: 24rpx;
                margin-right: 4rpx;
              }

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

      .noDataBox {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    margin-bottom: 44rpx;
    background-color: #fff;
    box-sizing: border-box;
    padding: 0 32rpx;
    z-index: 10;

    .currentServiceBox {
      display: flex;
      align-items: center;
      padding: 8rpx 20rpx;
      border-radius: 32rpx;
      border: 1rpx solid #e7e7e6;

      .pointIcon {
        width: 24rpx;
        height: 24rpx;
        margin-right: 8rpx;
      }

      .serviceName {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #090c1a;
        line-height: 40rpx;
        text-align: justify;
        font-style: normal;
      }

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

    .arrowBox {
      width: 100%;
      display: flex;
      align-items: center;

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

      .selectServiceBox {
        margin-left: 16rpx;
        display: flex;
        align-items: center;

        .serviceIcon {
          width: 70rpx;
          height: 70rpx;
          position: relative;
          z-index: 2;
        }

        .nameBox {
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 24rpx;
          color: #160002;
          line-height: 36rpx;
          text-align: left;
          font-style: normal;
          padding: 12rpx 34rpx 12rpx 48rpx;
          display: inline-block;
          border-top-right-radius: 200rpx;
          border-bottom-right-radius: 200rpx;
          background: #f4f3f2;
          transform: translateX(-20px);

          .moreIcon {
            width: 24rpx;
            height: 24rpx;
            margin-left: 14rpx;
          }
        }
      }
    }
  }

  .serviceBox {
    .serviceImg {
      width: 100%;
      height: 350rpx;
      border-radius: 16rpx;
      overflow: hidden;
      position: relative;

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

      .defaultImgBox {
        width: 100%;
        height: 100%;
        display: flex;
        align-content: center;
        justify-content: center;

        .defaultImg {
          width: 350rpx;
          height: 350rpx;
        }
      }

      .serviceInfoBox {
        position: absolute;
        bottom: 24rpx;
        left: 24rpx;
        display: flex;
        align-items: center;

        .serviceName {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 36rpx;
          color: #ffffff;
          line-height: 52rpx;
          text-align: left;
          font-style: normal;
        }

        .state {
          display: inline-block;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #1ba74d;
          line-height: 36rpx;
          text-align: left;
          font-style: normal;
          padding: 2rpx 8rpx;
          background: #e9f8ee;
          border-radius: 4rpx;
          margin-left: 16rpx;
        }
      }
    }

    .serviceMessage {
      width: 100%;
      box-sizing: border-box;
      padding: 8rpx 0;
      margin-top: 24rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .leftMessage {
        width: calc(100% - 178rpx);
        margin-right: 16rpx;
        box-sizing: border-box;

        .leftTop {
          flex: 1;
          display: flex;
          align-items: center;

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

          .massageNameBox {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 32rpx;
            color: #282622;
            line-height: 44rpx;
            text-align: left;
            font-style: normal;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }

          .state {
            display: inline-block;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #1ba74d;
            line-height: 36rpx;
            text-align: left;
            font-style: normal;
            padding: 2rpx 8rpx;
            background: #e9f8ee;
            border-radius: 4rpx;
            margin-left: 16rpx;
          }
        }

        .leftBottom {
          width: 100%;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;

          .address {
            width: 100%;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #5f5b52;
            line-height: 32rpx;
            text-align: left;
            font-style: normal;
            margin-left: 36rpx;
          }
        }
      }

      .rightMessage {
        width: 162rpx;
        height: 64rpx;
        border-radius: 32rpx;
        border: 2rpx solid #ae8d3e;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 16rpx 8rpx;

        .navigationIcon {
          width: 32rpx;
          height: 32rpx;
        }

        .distance {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 22rpx;
          color: #ae8d3e;
          line-height: 32rpx;
          text-align: left;
          font-style: normal;
        }
      }
    }

    .serviceTypeTabs {
      width: 100%;
      height: 86px;
      background: #fcf8ef;
      border-radius: 4px;
      margin-top: 16px;
      display: flex;
      margin-bottom: 30rpx;

      .serviceTypeItem {
        width: 25%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .itemIcon {
          width: 48rpx;
          height: 48rpx;
          margin-bottom: 8px;
        }

        .itemText {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.65);
          line-height: 18px;
        }
      }
    }
  }

  .newListItemRight {
    flex: 1;

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

      .title {
        font-size: 30rpx;
        font-family: "PingFang SC Bold";
        color: #313131;
        font-weight: bolder;
      }

      .titleIcon {
        background: url("https://eshangtech.com/ShopICO/icos/to-eat.png")
          no-repeat center; // eshangtech.com/ShopICO/icos/to-eat.png) no-repeat center;
        background-size: contain;
        width: 133rpx;
        height: 48rpx;
      }
    }

    .scoreBox {
      width: 100%;
      display: flex;
      align-content: center;
      margin-top: 8rpx;

      .value {
        font-size: 24rpx;
        color: #333;
        margin-top: 6rpx;
      }
    }

    .labelList {
      width: 100%;
      display: flex;
      align-content: center;
      margin-top: 8rpx;

      .labelItem {
        width: 30%;
        display: flex;
        align-content: center;
        overflow: hidden;

        .labelIcon {
          width: 24rpx;
          height: 24rpx;
          margin-right: 6rpx;
          margin-top: 4rpx;
        }

        .labelName {
          flex: 1;
          font-size: 24rpx;
          color: #666;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
  }
}

/* 头部搜索 */
* {
  box-sizing: border-box;
}

.mt8 {
  margin-top: 16rpx;
}

.text263 {
  font-size: 24rpx;
  color: #333;
}

.text246 {
  font-size: 24rpx;
  color: #666;
}

.flex-item {
  width: calc((100% / 3));
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.flex-s {
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 8rpx;
}

.flex-b {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mtb16 {
  margin: 16rpx 0 24rpx 0;
}

hr {
  color: #eeeeee !important;
  height: 2rpx;
  width: 100%;
  background: #eee !important;
}

.line {
  color: #eeeeee !important;
  height: 2rpx;
  width: 100%;
  background: #eee !important;
}

.list-box {
  width: 100%;
  background: #fff;
  height: 100%;
  // margin-top: 48rpx;
  // border-bottom: 2rpx solid #f0f0f0;

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

  .shopList {
    width: 100%;
    margin-top: 12rpx;

    .shopItem {
      width: 100%;
      align-items: center;
      box-sizing: border-box;
      padding: 32rpx 0;
      // border-bottom: 2rpx solid #f0f0f0;
      position: relative;

      .shopLeft {
        width: 160rpx;
        height: 160rpx;
        border-radius: 12rpx;
        overflow: hidden;
        margin-right: 24rpx;

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

      .shopRight {
        width: calc(100% - 184rpx);
        height: 160rpx;

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

          .shopName {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 32rpx;
            color: #130f05;
            line-height: 44rpx;
            text-align: left;
            font-style: normal;
            display: inline-block;
            max-width: 300rpx;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }

          .tradeType {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 22rpx;
            color: #c27003;
            line-height: 32rpx;
            text-align: left;
            font-style: normal;
            padding: 2rpx 6rpx;
            background: #f9f0e5;
            border-radius: 2rpx;
            margin-left: 12rpx;
          }
        }

        .rateBox {
          margin-top: 4rpx;
          display: flex;
          align-items: center;

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

        .otherBox {
          margin-top: 16rpx;
          display: flex;
          align-items: center;

          .otherItem {
            margin-right: 54rpx;
            display: flex;
            flex-direction: column;

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

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

          .otherItem:nth-last-child(1) {
            margin-right: 0;
          }
        }
      }

      .goOrder {
        position: absolute;
        right: 0;
        top: 32rpx;
        padding: 10rpx 12rpx;
        border-radius: 4rpx;
        border: 2rpx solid #ae8d3e;
        display: flex;
        align-items: center;

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

        .goOrderText {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 22rpx;
          color: #ba922f;
          line-height: 32rpx;
          text-align: left;
          font-style: normal;
        }
      }

      .couponBox {
        padding: 4rpx 6rpx;
        background: rgba(247, 80, 49, 0.08);
        border-radius: 2rpx;
        display: flex;
        align-items: center;
        position: absolute;
        right: 160rpx;
        bottom: 32rpx;

        .couponIcon {
          width: 24rpx;
          height: 24rpx;
          margin-right: 4rpx;
        }

        .couponText {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 22rpx;
          color: #f75031;
          line-height: 32rpx;
          text-align: left;
          font-style: normal;
          white-space: nowrap;
        }
      }
    }
  }
}

.card-list {
  padding-top: 24rpx;
  padding-bottom: 24rpx;
  margin-top: 30rpx;
  background: #fff;
}

.banner-box {
  // padding-bottom 16rpx
  background: #ffffff;
  text-align: center;
  position: relative;
}

// .banner-box image

// width 690rpx
// height 197rpx
.banner {
  background: #fff;
  height: 197rpx;
  width: 690rpx;
  margin: 0 auto;
}

.banner image {
  width: 100%;
  height: 197rpx;
}

.swiper-dots {
  width: 90rpx;
  height: 20rpx;
  display: flex;
  flex-direction: row;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 6rpx;
}

.dot {
  width: 30rpx;
  height: 8rpx;
  border-radius: 14rpx;
  margin-right: 12rpx;
  background-color: #ffffff;
  opacity: 0.3;
}

.active.dot {
  background-color: #fff;
  opacity: 1;
}

.banner-text {
  width: 690rpx;
  margin: 20rpx auto 0 auto;
  border-radius: 12rpx;
  background: #383838;
  color: #d5c8a6;
  padding: 20rpx 32rpx;
  font-size: 24rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;

  i {
    background: url("https://eshangtech.com/ShopICO/vip-ico.png") no-repeat
      center; // eshangtech.com/ShopICO/vip-ico.png) no-repeat center
    background-size: contain;
    width: 36rpx;
    height: 36rpx;
    margin-right: 16rpx;
  }

  .vip-btn {
    width: 132rpx;
    height: 38rpx;
    line-height: 38rpx;
    border: 1rpx solid #d5c8a6;
    border-radius: 20rpx;
    margin-left: 74rpx;
    font-family: "PingFang SC Regular";
    text-align: center;
  }
}

span.ico-t-count {
  font-style: normal;
  color: #fff;
  border-radius: 18px;
  min-width: 8px;
  width: auto;
  height: auto;
  padding: 2rpx 8rpx;
  font-size: 20rpx;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  background: #ed4d3e;
  position: absolute;
  right: -4rpx;
  top: -12rpx;
}

.zhanwei {
  height: 112rpx;
}

.shoplist-service {
  position: fixed;
  display: flex;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  font-size: 24rpx;
  height: 104rpx;
  display: flex;
  align-items: center;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  z-index: 1;
}

.position-btn,
.service-btn {
  border-radius: 8rpx;
  font-size: 24rpx;
  height: 40rpx;
  color: #d5c59d;
  background: #383838;
  padding: 8rpx 16rpx;
  border-radius: 16rpx;
  line-height: 40rpx;
  display: flex;
  align-items: baseline;
}

.service-name,
.position-name {
  color: #555;
  font-weight: bolder;
  font-size: 28rpx;
  display: inline-block;
}

.sj {
  width: 0;
  height: 0;
  border: 0;
  border-left: 16rpx solid transparent;
  border-bottom: 14rpx solid #d5c59d;
  margin-left: 16rpx;
}

.servepart-sevice-box {
  font-size: 24rpx;
  background: #ffffff;
  box-shadow: 0 0 8rpx 0 #eee;
  padding: 16rpx;
  margin: 0 32rpx 32rpx;
  border-radius: 8upx;
  // position absolute
  z-index: 0;
  width: 686rpx;
  box-sizing: border-box;
  border-radius: 6rpx;
  transition: all 1s;

  .sevice-des-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16rpx;
    padding-bottom: 16rpx;
    border-bottom: 1rpx solid #f1f1f1;
  }

  .sevice-unit-box {
    // display flex
    // align-items center
    // flex-wrap wrap
    .sevice-unit {
      width: 160rpx;
      font-size: 22rpx;
      display: flex;
      align-items: center;
      margin: 8rpx 0;
    }

    .image {
      height: 33rpx;
      width: 33rpx;
      margin-right: 8rpx;
    }
  }

  .sevice-des {
    width: 918rpx;
    height: 102rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  image {
    width: 348rpx;
    height: 104rpx;
    margin-right: 16rpx;
  }
}

// image.my-ico4
// width 17rpx
// height 30rpx
// .coupon-list
// border-top 1rpx solid #F2F2F2
// margin-top 20rpx
// padding-top 20rpx
// .coupon-card
// padding 12rpx 0
// .hot-block
// background-color #ffffff
// padding 10rpx 30rpx 30rpx 30rpx
// .block-title
// font-size 32rpx
// font-weight bolder
// color #303030

// .block-title:before
// content ''
// width 8rpx
// height 30rpx
// background #444
// display inline-block
// vertical-align middle
// margin-right 16rpx
// border-radius 4rpx
// .title-ico:before
// content '预'
// color #ffffff
// background #F5BC50
// font-size 20rpx
// border-radius 4rpx
// padding 0 5rpx
// margin-right 8rpx
.title-ico {
  background: url("https://eshangtech.com/ShopICO/icos/to-eat.png") no-repeat
    center; // eshangtech.com/ShopICO/icos/to-eat.png) no-repeat center
  background-size: contain;
  width: 133rpx;
  height: 48rpx;
}

// .title-ico:after
// content ''
// background url(https://eshangtech.com/ShopICO/you-ico.png) no-repeat
// width 20rpx
// height 20rpx
// background-size contain
// margin-left 16rpx
.shop-unit {
  // margin 36rpx 36rpx
  padding: 26rpx 0 0 0;
  background-color: #ffffff;
  // border-radius 16rpx
}

.newTabList {
  width: 100%;
  overflow-x: auto;
  display: flex;
  flex-wrap: nowrap;
  border-bottom: 1px solid #f5f6f7;

  .newTabItem {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #716f69;
    line-height: 40rpx;
    text-align: left;
    font-style: normal;
    padding: 0 50rpx 12rpx 50rpx;
    white-space: nowrap;
  }

  .selectTabItem {
    font-family: PingFangSC, PingFang SC;
    font-weight: bold;
    font-size: 28rpx;
    color: #130f05;
    line-height: 40rpx;
    text-align: left;
    font-style: normal;
    position: relative;
  }

  .selectTabItem:after {
    content: "";
    position: absolute;
    width: 2rem;
    height: 4rpx;
    background: #ba922f;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}

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

.newShopUnit {
  padding: 26rpx 0 26rpx 0;
  background-color: #ffffff;
  border-bottom: 2rpx solid #f0f0f0;

  .shopItemTop {
    width: 100%;
    display: flex;
    align-items: flex-start;

    .shopImg {
      width: 96rpx;
      height: 96rpx;
      overflow: hidden;
      border-radius: 8rpx;
      margin-right: 16rpx;

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

    .shopDetail {
      width: calc(100% - 112rpx);
      height: 96rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;

      .shopName {
        width: 100%;
        display: flex;
        align-items: center;

        .shopTitle {
          display: inline-block;
          max-width: calc(100% - 133rpx);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-family: PingFangSC, PingFang SC;
          font-weight: bold;
          font-size: 30rpx;
          color: #130f05;
          text-align: justify;
          font-style: normal;
        }

        .titleIcon {
          display: inline-block;
          background: url("https://eshangtech.com/ShopICO/icos/to-eat.png")
            no-repeat center; // eshangtech.com/ShopICO/icos/to-eat.png) no-repeat center;
          background-size: contain;
          width: 133rpx;
          height: 48rpx;
        }
      }

      .otherDetail {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .leftDetail {
          .mark {
            color: #d45e0e;
            font-size: 26rpx;
            font-weight: bold;
          }

          .monthSales {
            margin-left: 8px;
            font-size: 24rpx;
            color: #666;
          }

          .perCapita {
            margin-left: 8px;
            font-size: 24rpx;
            color: #666;
          }
        }

        .rightDetail {
          .perCapita {
            font-size: 24rpx;
            color: #666;
          }

          .icon-coupon {
            background: url("https://eshangtech.com/ShopICO/icos/y-yhq.png")
              no-repeat left center; // eshangtech.com/ShopICO/icos/y-yhq.png) no-repeat left center
            background-size: contain;
            // width 75rpx
            // height 22rpx
            padding-left: 40rpx;
            height: 27rpx;
            line-height: 27rpx;
            // padding-left 25rpx
            font-size: 24rpx;
            color: #ec5930;
            margin-left: 8px;
          }
        }
      }

      .goOrder {
        position: absolute;
        right: 0;
        top: 0;
        padding: 10rpx 12rpx;
        border-radius: 4rpx;
        border: 2rpx solid #ae8d3e;
        display: flex;
        align-items: center;

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

        .goOrderText {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 22rpx;
          color: #ba922f;
          line-height: 32rpx;
          text-align: left;
          font-style: normal;
        }
      }

      .couponBox {
        padding: 4rpx 6rpx;
        background: rgba(247, 80, 49, 0.08);
        border-radius: 2rpx;
        display: flex;
        align-items: center;
        position: absolute;
        right: 160rpx;
        top: 0;

        .couponIcon {
          width: 24rpx;
          height: 24rpx;
          margin-right: 4rpx;
        }

        .couponText {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 22rpx;
          color: #f75031;
          line-height: 32rpx;
          text-align: left;
          font-style: normal;
          white-space: nowrap;
        }
      }
    }
  }

  .shopList {
    width: calc(100% - 120rpx);
    box-sizing: border-box;
    margin-left: 120rpx;
    overflow-x: auto;
    display: flex;

    .shopItem {
      width: 168rpx;
      margin-right: 16rpx;

      .shopImgBox {
        width: 168rpx;
        height: 128rpx;
        overflow: hidden;
        border-radius: 12rpx;
        margin-bottom: 8rpx;

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

      .shopName {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 22rpx;
        color: #130f05;
        line-height: 32rpx;
        text-align: justify;
        font-style: normal;
      }

      .itemPrice {
        .itemUnit {
          font-family: DINAlternate, DINAlternate;
          font-weight: bold;
          font-size: 24rpx;
          color: #130f05;
          text-align: left;
          font-style: normal;
        }

        .itemPrice {
          font-family: DINAlternate, DINAlternate;
          font-weight: bold;
          font-size: 32rpx;
          color: #130f05;
          text-align: left;
          font-style: normal;
        }
      }
    }
  }

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

  // .activitieBox {
  //   width: 100%;
  //   box-sizing: border-box;
  //   padding-top: 24rpx;
  //   .activeTitle {
  //     font-family: PingFangSC, PingFang SC;
  //     font-weight: 400;
  //     font-size: 28rpx;
  //     color: #716f69;
  //     line-height: 40rpx;
  //     text-align: left;
  //     font-style: normal;
  //     margin-bottom: 16rpx;
  //   }
  //   .couponList {
  //     width: 100%;
  //     display: flex;
  //     align-items: center;
  //     justify-content: space-between;
  //     flex-wrap: wrap;
  //     .couponItem {
  //       width: calc((100% - 24rpx) / 2) !important;
  //       margin-right: 24rpx;
  //       .itemImgBox {
  //         width: 100%;
  //         height: 192rpx;
  //         border-radius: 12rpx;
  //         overflow: hidden;
  //         margin-bottom: 16rpx;
  //         .itemImg {
  //           width: 100%;
  //           height: 100%;
  //         }
  //       }
  //       .couponText {
  //         font-family: PingFangSC, PingFang SC;
  //         font-weight: 400;
  //         font-size: 28rpx;
  //         color: #130f05;
  //         line-height: 40rpx;
  //         text-align: left;
  //         font-style: normal;
  //         white-space: nowrap;
  //         overflow: hidden;
  //         text-overflow: ellipsis;
  //       }
  //       .couponTime {
  //         display: flex;
  //         align-items: center;
  //         .timeIcon {
  //           width: 24rpx;
  //           height: 24rpx;
  //           margin-right: 4rpx;
  //         }
  //         .couponTimeText {
  //           width: calc(100% - 32rpx);
  //           font-family: PingFangSC, PingFang SC;
  //           font-weight: 400;
  //           font-size: 24rpx;
  //           color: #716f69;
  //           line-height: 36rpx;
  //           text-align: justify;
  //           font-style: normal;
  //           white-space: nowrap;
  //           overflow: hidden;
  //           text-overflow: ellipsis;
  //         }
  //       }
  //     }
  //     .couponItem:nth-child(2n) {
  //       margin-right: 0;
  //     }
  //   }
  // }
}

.icon-coupon {
  background: url("https://eshangtech.com/ShopICO/icos/y-yhq.png") no-repeat
    left center; // eshangtech.com/ShopICO/icos/y-yhq.png) no-repeat left center
  background-size: contain;
  // width 75rpx
  // height 22rpx
  padding-left: 40rpx;
  height: 27rpx;
  line-height: 27rpx;
  // padding-left 25rpx
  font-size: 24rpx;
  color: #ec5930;
}

.icon-trade {
  display: flex;
  align-items: center;
}

.icon-trade:before {
  content: "";
  background: url("https://eshangtech.com/wanmeiyizhanImg/discovery/trade.png")
    no-repeat center;
  background-size: contain;
  width: 27rpx;
  height: 24rpx;
  margin-right: 4rpx;
}

.shop-comment-text {
  color: #f3b680;
  background: #fdf5ec;
  padding: 0 4rpx;
  border-radius: 2rpx;
  font-size: 20rpx;
  max-width: 344rpx;
}

// .coupon-card-box
// background-color #ffffff
// padding 24rpx 30rpx

// .coupon-card-box + .coupon-card-box
// margin-top 16rpx
.coupon-card {
  display: flex;
  // justify-content space-between
  align-items: center;
  font-family: "PingFang SC ";
  // padding-bottom 24rpx
}

.card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1rpx solid #f2f2f2;
  padding-top: 24rpx;
}

.conpon-img {
  margin-right: 24rpx;
  width: 190rpx;
  height: 190rpx;
}

.conpon-img image {
  width: 180rpx;
  height: 180rpx;
  border-radius: 8rpx;
}

.coupon-title {
  font-size: 30rpx;
  font-family: "PingFang SC Bold";
  color: #313131;
  font-weight: bolder;
}

.coupon-store {
  font-size: 28rpx;
  color: #444;
}

.coupon-detail {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.coupon-price {
  color: #d74942;
  font-size: 40rpx;
}

.coupon-price-unit {
  color: #d7493f;
  font-size: 20rpx;
}

.coupon-price-though {
  // text-decoration line-through
  color: #a1a1a1;
  font-size: 24rpx;
  margin-left: 32rpx;
}

.coupon-price-sell {
  color: #454246;
  font-size: 24rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.coupon-get-btn {
  background: #c6a375;
  border-radius: 32rpx;
  width: 164rpx;
  height: 50rpx;
  color: #fff;
  line-height: 50rpx;
  font-size: 24rpx;
  text-align: center;
  box-shadow: none;
}

.getLocation {
  width: 240rpx;
  margin: 24rpx auto;
  display: block;
}

.loading-text {
  text-align: center;
  font-size: 24rpx;
  color: #a1a1a1;
  line-height: 80rpx;
}

.pop-box {
  width: 588rpx;
  height: 256rpx;
  text-align: center;
  padding: 40rpx 0;
  border-radius: 30rpx;
  overflow: hidden;
}

.pop-title {
  font-size: 32rpx;
}

.pop-body {
  font-size: 28rpx;
  margin-top: 36rpx;
}

.popbtn-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 72rpx;
}

.popbtn {
  height: 60rpx;
  width: 208rpx;
  border-radius: 32rpx;
  text-align: center;
  font-size: 24rpx;
  line-height: 60rpx;
}

.popbtn + .popbtn {
  margin-left: 60rpx;
}

.cancel-btn {
  border: 1rpx solid #616161;
  color: #616161;
}

.confirm-btn {
  background: #515151;
  color: #fff;
}
</style>
