<template>
  <div v-cloak ref="container">
    <div class="indexs" v-if="status === 200">
      <div
        class="follow acea-row row-between-wrapper"
        v-if="followHid && isWeixin"
      >
        <div>点击“立即关注”即可关注公众号</div>
        <div class="acea-row row-middle">
          <div class="bnt" @click="followTap">立即关注</div>
          <span class="iconfont icon-guanbi" @click="closeFollow"></span>
        </div>
      </div>
      <div class="followCode" v-if="followCode">
        <div class="pictrue"><img :src="followUrl" /></div>
        <div class="mask" @click="closeFollowCode"></div>
      </div>
      <div class="header acea-row row-center-wrapper" ref="header">
        <div class="logo"><img :src="logoUrl" v-if="logoUrl" /></div>
        <router-link :to="'/search'" class="search acea-row row-middle">
          <span class="iconfont icon-xiazai5"></span>搜索商品
        </router-link>
      </div>
      <Tabs
        title-inactive-color="#fff"
        title-active-color="#fff"
        color="#fff"
        line-width="0.32rem"
        line-height="0.04rem"
        v-model="tapActive"
        class="tabs"
        sticky
        @click="categoryTap"
      >
        <Tab>
          <div slot="title" ref="title">精选</div>
          <div class="wrapper">
            <div class="slider-banner banner">
              <swiper
                :options="swiperOption"
                ref="mySwiper"
                v-if="banner.length > 0"
              >
                <swiper-slide v-for="(item, index) in banner" :key="index">
                  <img :data-src="item.pic" class="swiper-lazy" />
                  <div class="swiper-lazy-preloader"></div>
                </swiper-slide>
                <div
                  class="swiper-pagination paginationBanner"
                  slot="pagination"
                ></div>
              </swiper>
            </div>
            <div class="nav acea-row">
              <router-link
                :to="item.wap_url ? item.wap_url : ''"
                class="item"
                v-for="(item, index) in menus"
                :key="index"
              >
                <div class="pictrue"><img v-lazy="item.pic" alt="img" /></div>
                <div>{{ item.name }}</div>
              </router-link>
            </div>
            <div class="scroll-coupon" v-if="getCouponList.length">
              <swiper :options="swiperScroll">
                <swiper-slide
                  v-for="(item, index) in getCouponList"
                  :key="index"
                >
                  <div
                    class="item"
                    :class="item.is_use ? 'on' : ''"
                    @click="receiveCoupon(item.id, index)"
                  >
                    <img
                      src="@assets/images/label01.png"
                      class="lable"
                      v-if="item.is_use === true"
                    />
                    <img
                      src="@assets/images/label02.png"
                      class="lable"
                      v-else-if="item.is_use === 2"
                    />
                    <div class="coupon-slide acea-row row-center-wrapper">
                      <div class="money">
                        ¥<span class="num">{{ item.coupon_price }}</span>
                      </div>
                      <div>
                        <div class="minPrice">
                          满¥<span class="num">{{ item.use_min_price }}</span
                          >可用
                        </div>
                        <div class="time">
                          {{ item.start_time ? item.start_time + "-" : ""
                          }}{{ item.end_time }}
                        </div>
                      </div>
                    </div>
                  </div>
                </swiper-slide>
                <swiper-slide class="more"
                  ><router-link :to="'/user/get_coupon'"
                    >领取更多</router-link
                  ></swiper-slide
                >
              </swiper>
            </div>
            <!-- <div class="activity" v-if="activity.length">
              <div class="title"><img src="@assets/images/title.png" /></div>
              <div class="activityCon acea-row row-between-wrapper">
                <router-link
                  :to="activityOne[0].wap_link ? activityOne[0].wap_link : ''"
                  class="left"
                  :style="'background-image: url(' + activityOne[0].pic + ');'"
                >
                  <div class="name">{{ activityOne[0].title }}</div>
                  <div class="info">{{ activityOne[0].info }}</div>
                  <CountDown
                    :is-day="false"
                    :tip-text="''"
                    :day-text="''"
                    :hour-text="' : '"
                    :minute-text="' : '"
                    :second-text="''"
                    :datatime="killIndexTime"
                  ></CountDown>
                </router-link>
                <div class="right acea-row row-column-between">
                  <router-link
                    :to="item.wap_link ? item.wap_link : ''"
                    class="item"
                    :style="'background-image: url(' + item.pic + ');'"
                    v-for="(item, index) in activity"
                    :key="index"
                  >
                    <div class="name">{{ item.title }}</div>
                    <div class="info">{{ item.info }}</div>
                  </router-link>
                </div>
              </div>
            </div> -->
            <div class="flashSale" v-if="seckillCont">
              <div class="title acea-row row-between row-bottom">
                <div class="left acea-row row-middle">
                  <div class="pictrue">
                    <img src="@assets/images/buyTitle.png" />
                  </div>
                  <div class="text">
                    <div>top sellers</div>
                    <div class="chinese">拼手速抢惊喜 每日更新</div>
                  </div>
                </div>
                <div class="right acea-row row-middle">
                  <div class="item">
                    <span class="iconfont icon-xuanzhong"></span>限时低价
                  </div>
                  <div class="item">
                    <span class="iconfont icon-xuanzhong"></span>正品保证
                  </div>
                </div>
              </div>
              <div class="pictrueBg">
                <img src="@assets/images/timeBg.png" />
              </div>
              <Tabs
                class="tabCon"
                line-height="0"
                swipe-threshold="4"
                v-model="killIndex"
                ref="timeList"
              >
                <Tab v-for="(item, index) in timeList" :key="index">
                  <div slot="title" class="timeItem" @click="setTime(index)">
                    <div class="time">{{ item.time }}</div>
                    <div class="stateCon acea-row row-center-wrapper">
                      <div class="state acea-row row-center-wrapper">
                        {{ item.state }}
                      </div>
                    </div>
                  </div>
                  <div class="list">
                    <swiper :options="swiperScroll">
                      <swiper-slide
                        v-for="(itemSeckill, indexSeckill) in seckillList"
                        :key="indexSeckill"
                      >
                        <div class="item">
                          <div
                            class="pictrue"
                            v-if="item.status === 1"
                            @click="goDetail(itemSeckill.id, item.status)"
                          >
                            <img :src="itemSeckill.image" />
                            <div class="bar">
                              <div class="pos">
                                <div
                                  class="num acea-row row-center-wrapper"
                                  :style="'width:' + itemSeckill.percent + '%;'"
                                ></div>
                                <div
                                  class="stock"
                                  v-text="itemSeckill.percent + '%'"
                                ></div>
                              </div>
                            </div>
                          </div>
                          <div
                            class="pictrue"
                            v-if="item.status === 2"
                            @click="goDetail(itemSeckill.id, item.status)"
                          >
                            <img :src="itemSeckill.image" />
                            <div class="bar">
                              <div class="pos">
                                <div
                                  class="num acea-row row-center-wrapper"
                                  :style="
                                    'width:' +
                                      (100 - itemSeckill.percent) +
                                      '%;'
                                  "
                                ></div>
                                <div class="stock">
                                  剩余{{ itemSeckill.stock }}件
                                </div>
                              </div>
                            </div>
                          </div>
                          <div
                            class="pictrue"
                            v-if="item.status === 0"
                            @click="goDetail(itemSeckill.id, item.status)"
                          >
                            <img :src="itemSeckill.image" />
                            <div class="bar">
                              <div class="pos">
                                <div
                                  class="num acea-row row-center-wrapper"
                                  :style="
                                    'width:' +
                                      (100 - itemSeckill.percent) +
                                      '%;'
                                  "
                                ></div>
                                <div class="stock">
                                  剩余{{ itemSeckill.stock }}件
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="text">
                            <div class="name line1">
                              {{ itemSeckill.title }}
                            </div>
                            <div class="ot-money">
                              ¥{{ itemSeckill.ot_price }}
                            </div>
                            <div class="acea-row row-between-wrapper">
                              <div class="money font-color-red">
                                ¥<span class="num">{{
                                  itemSeckill.price
                                }}</span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </swiper-slide>
                    </swiper>
                  </div>
                </Tab>
              </Tabs>
            </div>
            <router-link
              :to="lovely[0].wap_link ? lovely[0].wap_link : ''"
              class="advert"
              v-if="lovely.length"
              ><img :src="lovely[0].img"
            /></router-link>
            <div class="newProducts" v-if="info.firstList.length > 0">
              <div class="publicTitle acea-row row-center-wrapper">
                <img src="@assets/images/newsTitle.png" />
                <router-link :to="{ path: '/hot_new_goods/' + 3 }" class="more"
                  >更多 ></router-link
                >
              </div>
              <div class="newSwiper">
                <swiper :options="newProducts" ref="newSwiper">
                  <swiper-slide
                    v-for="(item, index) in info.firstList"
                    :key="index"
                  >
                    <div class="item">
                      <img :src="item.image" />
                      <span
                        class="pictrue_log_big pictrue_log_class"
                        v-if="item.activity && item.activity.type === '1'"
                        >秒杀</span
                      >
                      <span
                        class="pictrue_log_big pictrue_log_class"
                        v-if="item.activity && item.activity.type === '2'"
                        >砍价</span
                      >
                      <span
                        class="pictrue_log_big pictrue_log_class"
                        v-if="item.activity && item.activity.type === '3'"
                        >拼团</span
                      >
                    </div>
                  </swiper-slide>
                </swiper>
                <div
                  class="text"
                  v-for="(item, index) in info.firstList"
                  :key="index"
                >
                  <div v-if="index === avtiveIndex">
                    <div class="name line1">{{ item.store_name }}</div>
                    <div class="money font-color-red">
                      ¥<span class="num">{{ item.price }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="recommend"
              v-if="info.bastList.length || info.bastBanner.length"
            >
              <div class="publicTitle acea-row row-center-wrapper">
                <img src="@assets/images/boutiqueTitle.png" />
                <router-link :to="{ path: '/hot_new_goods/' + 1 }" class="more"
                  >更多 ></router-link
                >
              </div>
              <div class="slider-banner recommendSwiper">
                <swiper
                  :options="recommendOption"
                  ref="recommendSwiper"
                  v-if="info.bastBanner.length > 0"
                >
                  <swiper-slide
                    v-for="(item, index) in info.bastBanner"
                    :key="index"
                  >
                    <router-link
                      :to="item.wap_url ? item.wap_url : ''"
                      class="pictrue acea-row row-middle"
                    >
                      <img :src="item.img" />
                    </router-link>
                  </swiper-slide>
                  <div
                    class="swiper-pagination recommendBanner"
                    slot="pagination"
                  ></div>
                </swiper>
              </div>
              <div class="publicList acea-row row-between-wrapper">
                <div
                  @click="goDetails(item)"
                  class="item"
                  v-for="(item, index) in info.bastList"
                  :key="index"
                >
                  <div class="pictrue">
                    <img :src="item.image" />
                    <span
                      class="pictrue_log_big pictrue_log_class"
                      v-if="item.activity && item.activity.type === '1'"
                      >秒杀</span
                    >
                    <span
                      class="pictrue_log_big pictrue_log_class"
                      v-if="item.activity && item.activity.type === '2'"
                      >砍价</span
                    >
                    <span
                      class="pictrue_log_big pictrue_log_class"
                      v-if="item.activity && item.activity.type === '3'"
                      >拼团</span
                    >
                  </div>
                  <div class="text">
                    <div class="name line1">{{ item.store_name }}</div>
                    <div class="acea-row row-between-wrapper">
                      <div>
                        <div class="money font-color-red">
                          ¥<span class="num">{{ item.price }}</span>
                        </div>
                        <div class="ot-money">¥{{ item.ot_price }}</div>
                      </div>
                      <div class="cart acea-row row-center-wrapper">
                        <span class="iconfont icon-mzshopping"></span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="hotList" v-if="likeInfo.length">
              <div class="publicTitle acea-row row-center-wrapper">
                <img src="@assets/images/hotTitle.png" />
                <router-link :to="{ path: '/hot_new_goods/' + 2 }" class="more"
                  >更多 ></router-link
                >
              </div>
              <div class="list acea-row">
                <router-link
                  :to="{ path: '/detail/' + item.id }"
                  class="item"
                  v-for="(item, index) in likeInfo"
                  :key="index"
                >
                  <div class="pictrue">
                    <img :src="item.image" />
                    <img
                      src="@assets/images/one01.png"
                      class="icon"
                      v-if="index === 0"
                    />
                    <img
                      src="@assets/images/two02.png"
                      class="icon"
                      v-if="index === 1"
                    />
                    <img
                      src="@assets/images/three03.png"
                      class="icon"
                      v-if="index === 2"
                    />
                  </div>
                  <div class="text">
                    <div class="name line1">{{ item.store_name }}</div>
                    <div class="money font-color-red">
                      ¥<span class="num">{{ item.price }}</span
                      ><span class="ot-money">¥{{ item.ot_price }}</span>
                    </div>
                  </div>
                </router-link>
              </div>
            </div>
            <div class="promotion" v-if="benefit.length">
              <div class="publicTitle acea-row row-center-wrapper">
                <img src="@assets/images/promotionTitle.png" />
                <router-link :to="'/promotion'" class="more"
                  >更多 ></router-link
                >
              </div>
              <div class="publicList acea-row row-between-wrapper">
                <div
                  @click="goDetails(item)"
                  class="item"
                  v-for="(item, index) in benefit"
                  :key="index"
                >
                  <div class="pictrue">
                    <img :src="item.image" />
                    <span
                      class="pictrue_log_big pictrue_log_class"
                      v-if="item.activity && item.activity.type === '1'"
                      >秒杀</span
                    >
                    <span
                      class="pictrue_log_big pictrue_log_class"
                      v-if="item.activity && item.activity.type === '2'"
                      >砍价</span
                    >
                    <span
                      class="pictrue_log_big pictrue_log_class"
                      v-if="item.activity && item.activity.type === '3'"
                      >拼团</span
                    >
                  </div>
                  <div class="text">
                    <div class="name line1">{{ item.store_name }}</div>
                    <div class="acea-row row-between-wrapper">
                      <div>
                        <div
                          class="money font-color-red acea-row row-between-wrapper"
                        >
                          ¥<span class="num">{{ item.price }}</span
                          ><span class="label bg-color-red">疯抢</span>
                        </div>
                        <div class="ot-money">¥{{ item.ot_price }}</div>
                      </div>
                      <div class="cart acea-row row-center-wrapper">
                        <span class="iconfont icon-mzshopping"></span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="recommend" v-if="hostProduct.length">
              <div class="title">
                <img src="@assets/images/becommendTitle.png" />
              </div>
              <div class="publicList acea-row row-between-wrapper">
                <div
                  @click="goDetails(item)"
                  v-for="(item, index) in hostProduct"
                  :key="index"
                  class="item"
                >
                  <div class="pictrue">
                    <img :src="item.image" />
                    <span
                      class="pictrue_log_big pictrue_log_class"
                      v-if="item.activity && item.activity.type === '1'"
                      >秒杀</span
                    >
                    <span
                      class="pictrue_log_big pictrue_log_class"
                      v-if="item.activity && item.activity.type === '2'"
                      >砍价</span
                    >
                    <span
                      class="pictrue_log_big pictrue_log_class"
                      v-if="item.activity && item.activity.type === '3'"
                      >拼团</span
                    >
                  </div>
                  <div class="text">
                    <div class="name line1">{{ item.store_name }}</div>
                    <div class="acea-row row-between-wrapper">
                      <div>
                        <div class="money font-color-red">
                          ¥<span class="num">{{ item.price }}</span>
                        </div>
                        <div class="ot-money">¥{{ item.ot_price }}</div>
                      </div>
                      <div class="cart acea-row row-center-wrapper">
                        <span class="iconfont icon-mzshopping"></span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <Loading :loaded="loadend" :loading="loading"></Loading>
            </div>
          </div>
        </Tab>
        <Tab
          v-for="(item, index) in categoryOne"
          :title="item.cate_name"
          :key="index"
        >
          <div class="wrapper">
            <div
              class="scroll-classify acea-row row-middle"
              v-if="item.children.length"
            >
              <swiper :options="classifyScroll">
                <swiper-slide
                  v-for="(itemn, indexn) in item.children"
                  :key="indexn"
                >
                  <div
                    class="item"
                    :class="categoryActive === indexn ? 'on' : ''"
                    @click="productTap(indexn)"
                  >
                    <div class="pictrue">
                      <img :src="itemn.pic" />
                    </div>
                    <div class="name line1">{{ itemn.cate_name }}</div>
                  </div>
                </swiper-slide>
              </swiper>
            </div>
            <div class="classifyList acea-row row-between-wrapper">
              <div
                class="item"
                v-for="(productItem, productIndex) in productList"
                :key="productIndex"
                @click="goDetails(productItem)"
              >
                <div class="pictrue">
                  <img :src="productItem.image" />
                  <span
                    class="pictrue_log_big pictrue_log_class"
                    v-if="
                      productItem.activity && productItem.activity.type === '1'
                    "
                    >秒杀</span
                  >
                  <span
                    class="pictrue_log_big pictrue_log_class"
                    v-if="
                      productItem.activity && productItem.activity.type === '2'
                    "
                    >砍价</span
                  >
                  <span
                    class="pictrue_log_big pictrue_log_class"
                    v-if="
                      productItem.activity && productItem.activity.type === '3'
                    "
                    >拼团</span
                  >
                </div>
                <div class="text">
                  <div class="name line1">{{ productItem.store_name }}</div>
                  <div class="money font-color-red">
                    ¥<span class="num">{{ productItem.price }}</span>
                  </div>
                  <div class="acea-row row-between-wrapper">
                    <div
                      class="vipMoney"
                      v-if="productItem.vip_price && productItem.vip_price > 0"
                    >
                      ￥{{ productItem.vip_price
                      }}<img src="@assets/images/vip.png" />
                    </div>
                    <div class="sales">已售{{ productItem.sales }}件</div>
                  </div>
                </div>
              </div>
            </div>
            <Loading :loaded="loadends" :loading="loadings"></Loading>
            <div
              class="noCommodity"
              v-cloak
              style="background-color: #fff;"
              v-if="productList.length === 0 && where.page > 1"
            >
              <div class="noPictrue">
                <img src="@assets/images/noGood.png" class="image" />
              </div>
            </div>
            <Recommend
              v-if="productList.length === 0 && where.page > 1"
            ></Recommend>
          </div>
        </Tab>
      </Tabs>
      <Coupon-window
        :coupon-list="couponList"
        v-if="showCoupon"
        @checked="couponClose"
        @close="couponClose"
      ></Coupon-window>
      <div style="height:1rem;"></div>
      <div>
        <iframe
          v-if="mapKey && !isWeixin"
          ref="geoPage"
          width="0"
          height="0"
          frameborder="0"
          scrolling="no"
          :src="
            'https://apis.map.qq.com/tools/geolocation?key=' +
              mapKey +
              '&referer=myapp'
          "
        >
        </iframe>
      </div>
    </div>
    <loadLogo v-else></loadLogo>
  </div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "@assets/css/swiper.min.css";
import { Tab, Tabs } from "vant";
import CouponWindow from "@components/CouponWindow";
import Recommend from "@components/Recommend";
import cookie from "@utils/store/cookie";
import { openShareAll, wxShowLocation } from "@libs/wechat";
import { isWeixin } from "@utils/index";
import { getHomeData, getShare, follow } from "@api/public";
import { getHostProducts, getCategory, getProducts } from "@api/store";
import { getCoupon, getCouponReceive } from "@api/user";
import { getSeckillConfig, getSeckillList } from "@api/activity";
import Loading from "@components/Loading";
import debounce from "lodash.debounce";
import { goShopDetail } from "@libs/order";
import JPush from "@libs/jpush";
const HAS_COUPON_WINDOW = "has_coupon_window";
const LONGITUDE = "user_longitude";
const LATITUDE = "user_latitude";
let vm = null;
export default {
  name: "Index",
  components: {
    swiper,
    swiperSlide,
    Tab,
    Tabs,
    CouponWindow,
    Loading,
    Recommend
  },
  props: {},
  data: function() {
    let that = this;
    return {
      isWeixin: isWeixin(),
      followUrl: "",
      subscribe: false,
      followHid: false,
      followCode: false,
      status: 0,
      logoUrl: "",
      banner: [],
      menus: [],
      activity: [],
      activityOne: [],
      lovely: [],
      info: {
        fastList: [],
        bastBanner: [],
        firstList: [],
        bastList: []
      },
      avtiveIndex: 0,
      likeInfo: [],
      benefit: [],
      hostProduct: [],
      page: 1,
      limit: 20,
      loading: false,
      loadend: false,
      getCouponList: [],
      timeList: [],
      killIndex: 0,
      seckillList: [],
      tapActive: 0,
      killIndexTime: 0,
      seckillTimeIndex: 0, //当前index；
      killIndexLen: 0,
      couponList: [],
      showCoupon: false,
      categoryOne: [],
      categoryActive: 0,
      where: {
        page: 1,
        limit: 20,
        cid: 0, //一级分类id
        sid: 0 //二级分类id
      },
      productList: [],
      loadings: false,
      loadends: false,
      seckillCont: true,
      swiperOption: {
        pagination: {
          el: ".paginationBanner",
          clickable: true
        },
        autoplay: {
          disableOnInteraction: false,
          delay: 2000
        },
        lazy: {
          loadPrevNext: true
        },
        // effect: "fade",
        loop: true,
        speed: 1000,
        observer: true,
        observeParents: true,
        on: {
          tap: function() {
            const realIndex = this.realIndex;
            vm.goUrl(realIndex);
          }
        }
      },
      swiperScroll: {
        freeMode: true,
        freeModeMomentum: false,
        slidesPerView: "auto",
        observer: true,
        observeParents: true
      },
      newProducts: {
        autoplay: {
          disableOnInteraction: false,
          delay: 2000
        },
        loop: true,
        effect: "coverflow",
        centeredSlides: true,
        slidesPerView: "auto",
        speed: 1000,
        touchRatio: 1,
        coverflowEffect: {
          rotate: 0, // 旋转的角度
          stretch: 20, // 拉伸   图片间左右的间距和密集度
          depth: 200, // 深度   切换图片间上下的间距和密集度
          modifier: 2, // 修正值 该值越大前面的效果越明显
          slideShadows: false // 页面阴影效果
        },
        on: {
          slideChangeTransitionStart: function() {
            that.avtiveIndex = this.realIndex;
          },
          tap: function() {
            const realIndex = this.realIndex;
            let item = that.info.firstList[realIndex];
            vm.goDetails(item);
          }
        },
        observer: true,
        observeParents: true
      },
      recommendOption: {
        pagination: {
          el: ".recommendBanner",
          clickable: true
        },
        autoplay: {
          disableOnInteraction: false,
          delay: 3000
        },
        loop: true,
        speed: 1000,
        observer: true,
        observeParents: true
      },
      classifyScroll: {
        freeMode: true,
        freeModeMomentum: false,
        slidesPerView: "auto",
        observer: true,
        observeParents: true
      },
      mapKey: ""
    };
  },
  created() {
    vm = this;
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
    newSwiper() {
      return this.$refs.newSwiper.swiper;
    },
    recommendSwiper() {
      return this.$refs.recommendSwiper.swiper;
    }
  },
  watch: {
    tapActive(to) {
      if (to === 0) {
        this.tapActive = 0;
        this.swiper.autoplay.start();
        this.newSwiper.autoplay.start();
        this.recommendSwiper.autoplay.start();
      } else {
        this.swiper.autoplay.stop();
        this.newSwiper.autoplay.stop();
        this.recommendSwiper.autoplay.stop();
      }
    },
    $route(n) {
      if (n.name === "Index") {
        this.getCoupon();
        this.swiper.autoplay.start();
        this.newSwiper.autoplay.start();
        this.recommendSwiper.autoplay.start();
      } else {
        this.swiper.autoplay.stop();
        this.newSwiper.autoplay.stop();
        this.recommendSwiper.autoplay.stop();
      }
    }
  },
  mounted: function() {
    JPush.init();
    this.getFollow();
    this.getHomeData();
    this.getCoupon();
    this.getSeckillTime();
    this.hostProducts();
    this.getCategoryData();
    this.$scroll(this.$refs.container, () => {
      !this.loading && this.hostProducts();
    });
    cookie.get("expires");
  },
  methods: {
    closeFollow() {
      this.followHid = false;
    },
    followTap() {
      this.followCode = true;
      this.followHid = false;
    },
    closeFollowCode() {
      this.followCode = false;
      this.followHid = true;
    },
    getFollow() {
      follow()
        .then(res => {
          this.followUrl = res.data.path;
        })
        .catch(() => {});
    },
    // 轮播图跳转
    goUrl(index) {
      let url = this.banner[index].wap_url;
      let newStr = url.indexOf("http") === 0;
      if (newStr) {
        window.location.href = url;
      } else {
        this.$router.push({
          path: url
        });
      }
    },
    // 商品详情跳转
    goDetails(item) {
      goShopDetail(item).then(() => {
        this.$router.push({ path: "/detail/" + item.id });
      });
    },
    getHomeData: function() {
      let that = this;
      getHomeData().then(res => {
        that.status = res.status;
        that.mapKey = res.data.tengxun_map_key;
        that.logoUrl = res.data.logoUrl;
        that.subscribe = res.data.subscribe;
        if (!that.subscribe && that.followUrl) {
          setTimeout(function() {
            that.followHid = true;
          }, 200);
        } else {
          that.followHid = false;
        }
        that.$set(that, "banner", res.data.banner);
        that.$set(that, "menus", res.data.menus);
        that.$set(that, "activity", res.data.activity);
        if (res.data.activity.length) {
          var activityOne = res.data.activity.splice(1, 1);
          that.$set(that, "activityOne", activityOne);
        }
        that.$set(that, "lovely", res.data.lovely);
        that.$set(that, "info", res.data.info);
        that.$set(that, "likeInfo", res.data.likeInfo);
        that.$set(that, "benefit", res.data.benefit);
        that.$set(that, "couponList", res.data.couponList);
        that.setOpenShare();
        this.showCoupon =
          !cookie.has(HAS_COUPON_WINDOW) &&
          res.data.couponList.some(coupon => coupon.is_use);
        if (!cookie.get(LATITUDE) && !cookie.get(LONGITUDE))
          this.getWXLocation();
      });
    },
    getWXLocation() {
      if (isWeixin()) {
        wxShowLocation();
      } else {
        if (!this.mapKey) console.log("无法使用地图缺少腾讯地图KEY");
        let loc;
        // if (_this.$route.params.mapKey) _this.locationShow = true;
        //监听定位组件的message事件
        window.addEventListener(
          "message",
          function(event) {
            loc = event.data; // 接收位置信息 LONGITUDE
            console.log("location", loc);
            if (loc && loc.module == "geolocation") {
              cookie.set(LATITUDE, loc.lat);
              cookie.set(LONGITUDE, loc.lng);
            } else {
              cookie.remove(LATITUDE);
              cookie.remove(LONGITUDE);
              //定位组件在定位失败后，也会触发message, event.data为null
              console.log("定位失败");
            }
          },
          false
        );
      }
    },
    hostProducts: function() {
      let that = this;
      if (that.loading) return; //阻止下次请求（false可以进行请求）；
      if (that.loadend) return; //阻止结束当前请求（false可以进行请求）；
      that.loading = true;
      getHostProducts(that.page, that.limit).then(res => {
        that.loading = false;
        //apply();js将一个数组插入另一个数组;
        that.hostProduct.push.apply(that.hostProduct, res.data);
        that.loadend = res.data.length < that.limit; //判断所有数据是否加载完成；
        that.page = that.page + 1;
      });
    },
    getCoupon: function() {
      let that = this;
      let q = { page: 1, limit: 6 };
      getCoupon(q).then(res => {
        that.$set(that, "getCouponList", res.data);
      });
    },
    receiveCoupon: function(id, index) {
      let that = this;
      let list = that.getCouponList;
      getCouponReceive(id)
        .then(function() {
          list[index].is_use = true;
          that.$dialog.toast({ mes: "领取成功" });
        })
        .catch(function(res) {
          that.$dialog.toast({ mes: res.msg });
        });
    },
    getSeckillTime: function() {
      let that = this;
      getSeckillConfig().then(res => {
        that.$set(that, "timeList", res.data.seckillTime);
        that.seckillCont = res.data.seckillCont;
        that.killIndex = res.data.seckillTimeIndex;
        that.seckillTimeIndex = res.data.seckillTimeIndex;
        that.killIndexTime = res.data.seckillTime[that.killIndex].stop;
        that.getSeckillList();
        that.$nextTick(function() {
          if (that.killIndexLen) that.$refs.timeList.scrollIntoView();
        });
      });
    },
    setTime: function(index) {
      var that = this;
      that.killIndex = index;
      that.getSeckillList();
    },
    getSeckillList: function() {
      let that = this;
      let timeId = that.timeList[that.killIndex].id;
      getSeckillList(timeId, { page: 1, limit: 20 }).then(res => {
        that.$set(that, "seckillList", res.data);
        if (that.killIndex === that.seckillTimeIndex) {
          that.killIndexLen = res.data.length;
        }
      });
    },
    goDetail: function(id, status) {
      var that = this;
      var time = that.timeList[that.killIndex].stop;
      this.$router.push({
        path: "/activity/seckill_detail/" + id + "/" + time + "/" + status
      });
    },
    getCategoryData: function() {
      let that = this;
      getCategory().then(res => {
        that.$set(that, "categoryOne", res.data);
      });
    },
    get_product_list: debounce(function() {
      let that = this;
      if (that.loadings) return; //阻止下次请求（false可以进行请求）；
      if (that.loadends) return; //阻止结束当前请求（false可以进行请求）；
      that.loadings = true;
      let q = that.where;
      getProducts(q).then(res => {
        that.loadings = false;
        that.productList.push.apply(that.productList, res.data);
        that.loadends = res.data.length < that.where.limit; //判断所有数据是否加载完成；
        that.where.page = that.where.page + 1;
      });
    }, 300),
    categoryTap: function() {
      let that = this;
      if (that.tapActive > 0) {
        that.$set(that, "productList", []);
        that.where.page = 1;
        that.loadends = false;
        that.loadings = false;
        that.where.cid = that.categoryOne[that.tapActive - 1].id;
        that.where.sid = that.categoryOne[that.tapActive - 1].children.length
          ? that.categoryOne[that.tapActive - 1].children[0].id
          : -1;
        that.categoryActive = 0;
        that.get_product_list();
        this.$scroll(this.$refs.container, () => {
          !this.loadings && this.get_product_list();
        });
      }
    },
    productTap: function(index) {
      let that = this;
      that.categoryActive = index;
      that.$set(that, "productList", []);
      that.where.page = 1;
      that.loadends = false;
      that.loadings = false;
      that.where.sid = that.categoryOne[that.tapActive - 1].children[index].id;
      that.get_product_list();
      this.$scroll(this.$refs.container, () => {
        !this.loadings && this.get_product_list();
      });
    },
    couponClose() {
      cookie.set(HAS_COUPON_WINDOW, 1);
    },
    setOpenShare: function() {
      if (isWeixin()) {
        getShare().then(res => {
          var data = res.data.data;
          var configAppMessage = {
            desc: data.synopsis,
            title: data.title,
            link: location.href,
            imgUrl: data.img
          };
          openShareAll(configAppMessage);
        });
      }
    }
  }
};
</script>

<style scoped>
[v-cloak] {
  display: none;
}
.index {
  background-color: #fff;
}

.index .follow {
  z-index: 100000;
}
.indexs .publicTitle {
  position: relative;
  width: 100%;
  margin: 0.3rem auto 0.5rem auto;
}
.indexs .publicTitle img {
  width: 4.31rem;
  height: 0.88rem;
  display: block;
}
.indexs .publicTitle .more {
  position: absolute;
  font-size: 0.24rem;
  color: #666;
  right: 0.2rem;
}
.indexs .header {
  height: 0.98rem;
  width: 100%;
  background: linear-gradient(to left, #ff3366 0%, #ff6533 100%);
  background: -webkit-linear-gradient(to left, #ff3366 0%, #ff6533 100%);
  background: -moz-linear-gradient(to left, #ff3366 0%, #ff6533 100%);
}
.indexs .header .logo {
  width: 1.27rem;
  height: 0.45rem;
  margin-right: 0.25rem;
}
.indexs .header .logo img {
  width: 100%;
  height: 100%;
  display: block;
}
.indexs .header .search {
  width: 5rem;
  height: 0.64rem;
  background-color: #f7f7f7;
  border-radius: 0.5rem;
  padding: 0 0.28rem;
  font-size: 0.28rem;
  color: #bbb;
}
.indexs .header .search .iconfont {
  font-size: 0.34rem;
  margin-right: 0.16rem;
}
.indexs .wrapper {
  width: 7.5rem;
}
.indexs .banner {
  height: 3rem;
}
.indexs .banner .pictrue {
  width: 100%;
  height: 100%;
}
.indexs .banner img {
  width: 100%;
  height: 100%;
}
.indexs .banner .swiper-pagination {
  bottom: 0.13rem;
}
.indexs .nav {
  padding-top: 0.26rem;
  width: 7.5rem;
}
.indexs .nav .item {
  width: 20%;
  text-align: center;
  font-size: 0.26rem;
  margin-bottom: 0.29rem;
  color: #282828;
}
.indexs .nav .item .pictrue {
  width: 0.9rem;
  height: 0.9rem;
  margin: 0 auto 0.08rem auto;
}
.indexs .nav .item .pictrue img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.indexs .scroll-coupon {
  white-space: nowrap;
  overflow: hidden;
  margin-top: 0.1rem;
}
.indexs .scroll-coupon .more {
  width: 0.36rem !important;
  height: 0.96rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.06rem;
  margin-right: 0.2rem;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  font-size: 0.17rem;
  color: #666;
  padding: 0.09rem 0.01rem;
}
.indexs .scroll-coupon .swiper-slide {
  width: 3.1rem;
  margin-left: 0.2rem;
}
.indexs .scroll-coupon .item {
  display: inline-block;
  width: 100%;
  height: 0.96rem;
  background: url("../../assets/images/coupon01.png") no-repeat;
  background-size: 100% 100%;
  color: #fff;
  position: relative;
}
.indexs .scroll-coupon .item .lable {
  position: absolute;
  width: 0.62rem;
  height: 0.62rem;
  display: block;
  top: 0;
  right: 0;
}
.indexs .scroll-coupon .item.on {
  background-image: url("../../assets/images/coupon02.png");
}
.indexs .scroll-coupon .item .coupon-slide {
  padding: 0.05rem 0;
  height: 100%;
}
.indexs .scroll-coupon .item .coupon-slide .money {
  font-size: 0.3rem;
  color: #fff;
  margin-right: 0.1rem;
}
.indexs .scroll-coupon .item .coupon-slide .money .num {
  font-family: "GuildfordProBook 5";
  font-size: 0.48rem;
}
.indexs .scroll-coupon .item .coupon-slide .minPrice {
  font-size: 0.24rem;
  color: #feeaae;
}
.indexs .scroll-coupon .item .coupon-slide .minPrice .num {
  font-family: "GuildfordProBook 5";
}
.indexs .scroll-coupon .item.on .coupon-slide .minPrice {
  color: #fff;
}
.indexs .scroll-coupon .item .coupon-slide .time {
  font-size: 0.16rem;
  color: #fefefe;
}
.indexs .activity .title {
  width: 100%;
  height: 0.85rem;
  margin-top: 0.39rem;
}
.indexs .activity .title img {
  width: 100%;
  height: 100%;
}
.indexs .activity .activityCon {
  padding: 0 0.2rem;
  margin-top: 0.43rem;
}
.indexs .activity .activityCon .left {
  width: 2.46rem;
  height: 3.46rem;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0.35rem 0.18rem;
  box-shadow: 0 0 0.1rem 0.1rem #f8f8f8;
  -webkit-box-shadow: 0 0 0.1rem 0.1rem #f8f8f8;
  -moz-box-shadow: 0 0 0.1rem 0.1rem #f8f8f8;
  -o-box-shadow: 0 0 0.1rem 0.1rem #f8f8f8;
}
.indexs .activity .activityCon .left .name,
.indexs .activity .activityCon .right .item .name {
  font-size: 0.36rem;
  background: linear-gradient(to left, #ff3366 0%, #ff6533 100%);
  background: -webkit-linear-gradient(to left, #ff3366 0%, #ff6533 100%);
  background: -moz-linear-gradient(to left, #ff3366 0%, #ff6533 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}
.indexs .activity .activityCon .left .info,
.indexs .activity .activityCon .right .item .info {
  font-size: 0.2rem;
  color: #2c2c2c;
  margin-bottom: 0.04rem;
}
.indexs .activity .activityCon .right {
  height: 3.46rem;
}
.indexs .activity .activityCon .right .item {
  background-repeat: no-repeat;
  width: 4.48rem;
  height: 1.64rem;
  background-size: 100% 100%;
  padding: 0.35rem 0.18rem;
  box-shadow: 0 0 0.1rem 0.1rem #f8f8f8;
  -webkit-box-shadow: 0 0 0.1rem 0.1rem #f8f8f8;
  -moz-box-shadow: 0 0 0.1rem 0.1rem #f8f8f8;
  -o-box-shadow: 0 0 0.1rem 0.1rem #f8f8f8;
}
.indexs .activity .activityCon .right .item:nth-of-type(1) .name {
  background: linear-gradient(to left, #000 0%, #555 100%);
  background: -webkit-linear-gradient(to left, #000 0%, #555 100%);
  background: -moz-linear-gradient(to left, #000 0%, #555 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}
.indexs .flashSale .title {
  margin: 0.3rem 0;
  padding: 0 0.2rem;
}
.indexs .flashSale .title .left .pictrue {
  width: 1.36rem;
  height: 0.4rem;
  margin-right: 0.12rem;
}
.indexs .flashSale .title .left .pictrue img {
  width: 100%;
  height: 100%;
  display: block;
}
.indexs .flashSale .title .left .text {
  font-size: 0.16rem;
  color: #666;
}
.indexs .flashSale .title .left .text .chinese {
  font-size: 0.18rem;
  color: #999;
}
.indexs .flashSale .title .right {
  font-size: 0.24rem;
  color: #999;
}
.indexs .flashSale .title .right .item ~ .item {
  margin-left: 0.2rem;
}
.indexs .flashSale .title .right .item .iconfont {
  color: #ff2c58;
  font-size: 0.25rem;
  margin-right: 0.1rem;
}
.indexs .flashSale .van-tabs--line {
  position: unset;
}
.indexs .flashSale .pictrueBg {
  width: 7.1rem;
  height: 2.62rem;
  margin: 0 auto;
}
.indexs .flashSale .pictrueBg img {
  width: 100%;
  height: 100%;
  display: block;
}
.indexs .flashSale .tabCon {
  margin: -2.4rem auto 0 auto;
  width: 7.1rem;
  overflow: hidden;
}
.indexs .flashSale .van-tabs--line {
  padding-top: 0 !important;
}
.indexs .flashSale .tabCon .timeItem {
  color: #feeaae;
}
.indexs .flashSale .tabCon .timeItem .time {
  font-size: 0.38rem;
  font-family: "GuildfordProBook 5";
}
.indexs .flashSale .tabCon .timeItem .state {
  font-size: 0.22rem;
}
.indexs .flashSale .tabCon .list {
  margin: 0.3rem 0 0 0.3rem;
}
.indexs .flashSale .tabCon .list .swiper-slide {
  width: 2.5rem;
  margin-right: 0.2rem;
}
.indexs .flashSale .tabCon .list .item {
  width: 100%;
}
.indexs .flashSale .tabCon .list .item .grab {
  background-color: #999;
  color: #fff;
  font-size: 0.16rem;
  width: 0.9rem;
  height: 0.4rem;
  text-align: center;
  line-height: 0.4rem;
  border-radius: 0.08rem;
}
.indexs .flashSale .tabCon .list .item .pictrue {
  width: 100%;
  height: 2.5rem;
  border-radius: 0.06rem 0.06rem 0 0;
  position: relative;
}
.indexs .flashSale .tabCon .list .item .pictrue img {
  width: 100%;
  height: 100%;
  border-radius: 0.06rem 0.06rem 0 0;
  display: block;
}
.indexs .flashSale .tabCon .list .item .pictrue .bar {
  position: absolute;
  width: 2.3rem;
  height: 0.22rem;
  border-radius: 0.11rem;
  background-color: #ffefef;
  bottom: 0.1rem;
  left: 50%;
  margin-left: -1.15rem;
  font-size: 0.16rem;
  color: #fff;
}
.indexs .flashSale .tabCon .list .item .pictrue .bar .pos {
  width: 100%;
  height: 100%;
  position: relative;
}
.indexs .flashSale .tabCon .list .item .pictrue .bar .stock {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0.2rem;
  color: #ffb9b9 !important;
}
.indexs .flashSale .tabCon .list .item .pictrue .bar .num {
  width: 1.2rem;
  height: 100%;
  background: linear-gradient(to left, #ff3366 0%, #ff6533 100%);
  background: -webkit-linear-gradient(to left, #ff3366 0%, #ff6533 100%);
  background: -moz-linear-gradient(to left, #ff3366 0%, #ff6533 100%);
  border-radius: 0.11rem;
}
.indexs .flashSale .tabCon .list .item .text {
  width: 100%;
  margin-top: 0.18rem;
}
.indexs .flashSale .tabCon .list .item .text .name {
  font-size: 0.28rem;
  color: #333;
  width: 100%;
}
.indexs .flashSale .tabCon .list .item .text .ot-money {
  font-size: 0.2rem;
  color: #aaa;
  text-decoration-line: line-through;
  margin-top: 0.02rem;
}
.indexs .flashSale .tabCon .list .item .text .money {
  font-size: 0.24rem;
}
.indexs .flashSale .tabCon .list .item .text .money .num {
  font-size: 0.3rem;
  font-weight: bold;
}
.indexs .advert {
  width: 100%;
  height: 1.8rem;
  margin-top: 0.33rem;
  display: block;
}
.indexs .advert img {
  width: 100%;
  height: 100%;
}
.indexs .newProducts .newSwiper {
  padding: 0 0.5rem;
}
.indexs .newProducts .newSwiper .swiper-slide {
  width: 4rem;
}
.indexs .newProducts .newSwiper .item {
  width: 100%;
  height: 4rem;
  display: block;
}
.indexs .newProducts .newSwiper .item img {
  width: 100%;
  height: 100%;
  display: block;
}
.indexs .newProducts .newSwiper .text {
  width: 4rem;
  margin: 0.2rem auto 0 auto;
}
.indexs .newProducts .newSwiper .text .name {
  font-size: 0.28rem;
  color: #282828;
  text-align: center;
}
.indexs .newProducts .newSwiper .text .money {
  font-size: 0.24rem;
  text-align: center;
}
.indexs .newProducts .newSwiper .text .money .num {
  font-size: 0.32rem;
  font-weight: bold;
}
.indexs .recommendSwiper {
  width: 7.1rem;
  margin: 0 auto 0.2rem auto;
  height: 2.66rem;
}
.indexs .recommendSwiper .pictrue {
  width: 100%;
  height: 100%;
}
.indexs .publicList {
  padding: 0 0.2rem;
}
.indexs .publicList .item {
  width: 3.45rem;
  margin-bottom: 0.37rem;
}
.indexs .publicList .item .pictrue {
  width: 100%;
  height: 3.45rem;
  position: relative;
}
.indexs .publicList .item .pictrue img {
  width: 100%;
  height: 100%;
  border-radius: 0.1rem;
}
.indexs .publicList .item .text {
  width: 100%;
}
.indexs .publicList .item .text .name {
  font-size: 0.3rem;
  color: #282828;
  width: 100%;
  margin: 0.2rem 0 0.05rem 0;
}
.indexs .publicList .item .text .money {
  font-size: 0.24rem;
  height: 0.55rem;
}
.indexs .publicList .item .text .money .label {
  font-size: 0.18rem;
  color: #fff;
  padding: 0 0.05rem;
  border-radius: 0.03rem;
  margin-left: 0.08rem;
}
.indexs .publicList .item .text .money .num {
  font-size: 0.36rem;
}
.indexs .publicList .item .text .ot-money {
  font-size: 0.22rem;
  color: #aaa;
  text-decoration: line-through;
  margin-top: -0.1rem;
}
.indexs .publicList .item .text .cart {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: #f5f5f5;
}
.indexs .publicList .item .text .cart .iconfont {
  color: #000;
  font-size: 0.25rem;
}
.indexs .hotList {
  width: 100%;
  overflow: hidden;
}
.indexs .hotList .list .item {
  width: 2.23rem;
  margin: 0 0 0.3rem 0.2rem;
}
.indexs .hotList .list .item .pictrue {
  width: 100%;
  height: 2.23rem;
  position: relative;
}
.indexs .hotList .list .item .pictrue img {
  width: 100%;
  height: 100%;
}
.indexs .hotList .list .item .pictrue .icon {
  width: 0.38rem;
  height: 0.43rem;
  display: block;
  position: absolute;
  top: 0.1rem;
  left: 0.15rem;
}
.indexs .hotList .list .item .text .name {
  width: 100%;
  font-size: 0.28rem;
  color: #282828;
  margin-top: 0.15rem;
}
.indexs .hotList .list .item .text .money {
  font-size: 0.24rem;
}
.indexs .hotList .list .item .text .money .num {
  font-size: 0.3rem;
}
.indexs .hotList .list .item .text .money .ot-money {
  font-size: 0.2rem;
  color: #aaa;
  text-decoration: line-through;
  margin-left: 0.1rem;
}
.indexs .recommend .title {
  width: 4.26rem;
  height: 0.79rem;
  margin: 0.4rem auto;
}
.indexs .recommend .title img {
  width: 100%;
  height: 100%;
}
/*分类*/
.indexs .scroll-classify .swiper-container {
  margin: 0;
}
.indexs .scroll-classify {
  white-space: nowrap;
  overflow: hidden;
  height: 1.8rem;
  width: 100%;
  box-shadow: 0 0.1rem 0.1rem #f9f9f9;
  -webkit-box-shadow: 0 0.1rem 0.1rem #f9f9f9;
  -o-box-shadow: 0 0.1rem 0.1rem #f9f9f9;
  -moz-box-shadow: 0 0.1rem 0.1rem #f9f9f9;
  border-radius: 0 0 0.3rem 0.3rem;
}
.indexs .scroll-classify .swiper-slide {
  width: 1.4rem;
}
.indexs .scroll-classify .item {
  width: 100%;
  margin-left: 0.2rem;
}
.indexs .scroll-classify .item .pictrue {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  margin: 0 auto;
}
.indexs .scroll-classify .item .pictrue img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 0.02rem solid #fff;
}
.indexs .scroll-classify .item .name {
  font-size: 0.24rem;
  color: #282828;
  text-align: center;
  margin-top: 0.09rem;
}
.indexs .scroll-classify .item.on .pictrue img {
  border-color: #ff3366;
}
.indexs .scroll-classify .item.on .name {
  color: #ff3366;
}
.indexs .classifyList {
  padding: 0 0.2rem;
  margin-top: 0.2rem;
}
.indexs .classifyList .item {
  width: 3.45rem;
  margin-bottom: 0.46rem;
}
.indexs .classifyList .item .pictrue {
  width: 100%;
  height: 3.45rem;
  border-radius: 0.1rem 0.1rem 0 0;
  position: relative;
}
.indexs .classifyList .item .pictrue img {
  width: 100%;
  height: 100%;
  border-radius: 0.1rem 0.1rem 0 0;
}
.indexs .classifyList .item .text {
  width: 100%;
}
.indexs .classifyList .item .text .name {
  font-size: 0.3rem;
  color: #222;
  margin-top: 0.2rem;
}
.indexs .classifyList .item .text .money {
  font-size: 0.24rem;
  font-weight: bold;
  margin-top: 0.05rem;
}
.indexs .classifyList .item .text .money .num {
  font-size: 0.38rem;
  font-family: "GuildfordProBook 5";
}
.indexs .classifyList .item .text .vipMoney {
  font-size: 0.24rem;
  color: #282828;
  font-weight: bold;
}
.indexs .classifyList .item .text .vipMoney img {
  display: inline-block;
  width: 0.46rem;
  height: 0.21rem;
}
.indexs .classifyList .item .text .sales {
  font-size: 0.22rem;
  color: #aaa;
}
</style>
