<template>
  <page-meta
    :page-font-size="$baseFontSize() + 'px'"
    :root-font-size="$baseFontSize() + 'px'"
  ></page-meta>
  <view class="">
    <view class="shopHeader">
      <!-- 顶部导航栏 -->
      <z-nav-bar title="健康超市"></z-nav-bar>
      <!-- 搜索 -->
      <!-- <view class="search" @click="goSearch()">
				<u-search placeholder="请输入需4545要的商品" v-model="keyword" :show-action="false"></u-search>
			</view> -->
    </view>
    <!-- 主盒子 -->
    <view class="indexBox">
      <!-- 轮播图 -->
      <view class="swiper_box">
        <swiper
          :indicator-dots="true"
          :autoplay="true"
          :interval="3000"
          :duration="1000"
        >
          <swiper-item v-for="(item, index) in swiperlist" :key="index">
            <view class="swiper-item">
              <image
                :src="item.image"
                mode="widthFix "
                class="swiperImg"
              ></image>
            </view>
          </swiper-item>
        </swiper>
      </view>
      <!-- 分类 -->
      <view class="head_line">
        <b></b>
        <text>商品分类</text>
      </view>
      <view class="classfy">
        <view
          v-for="(item, index) in gridArr"
          :key="index"
          @click="toClassify(item.catId, index)"
        >
          <!-- <u-icon v-if="item.icon" :name="item.icon" :size="46"></u-icon> -->
          <image :src="item.icon"></image>
          <text class="grid-text">{{ item.name }}</text>
        </view>
        <br clear="both" />
      </view>
      <!-- 商品展示 -->
      <view class="head_line">
        <b></b>
        <text>限时秒杀</text>
        <i @click="onShopMore('Sale')">查看更多 ></i>
      </view>
      <!-- 限时秒杀 -->
      <view class="limited">
        <view class="limitedSymbol">
          <image src="../../static/icon/shopping_xsh.png"></image>
        </view>
        <view class="limitedScrollBox">
          <u-scroll-list indicatorActiveColor="#27b386">
            <view
              class="limitedItem"
              v-for="(item, index) in seckillList"
              :key="index"
              @click="goDetail(item.prodInfo.productId)"
            >
              <image :src="item.prodInfo.productImages" mode=""></image>
              <text class="biaoti">{{ item.prodInfo.productName }}</text>
              <text class="xian">￥{{ item.seckillPrice }}</text>
              <text class="yuan">￥{{ item.prodInfo.price }}</text>
            </view>
          </u-scroll-list>
        </view>
      </view>
      <!-- 商品展示 -->
      <view class="head_line">
        <b></b>
        <text>精选商品</text>
        <i @click="onShopMore('Hot')">查看更多 ></i>
      </view>
      <view class="goods">
        <view
          class="goodsItem"
          v-for="(item, index) in goodsList"
          :key="item.productId"
          @click="goDetail(item.productId)"
        >
          <image :src="item.productImages" mode="" class="goodsImg"></image>
          <view class="goodsContent">
            <view class="goodsName">
              {{ item.productName }}
            </view>
            <view class="goodsPrice"> ￥{{ item.price }} </view>
          </view>
        </view>
        <br clear="both" />
      </view>
      <view style="height: 30rpx"></view>
      <!-- 公共组件-每个页面必须引入 -->
      <public-module></public-module>
      <music-play :playData="playData"></music-play>
    </view>
  </view>
</template>

<script>
import musicPlay from "@/components/music.vue";
import { mapState } from "vuex";
export default {
  data() {
    return {
      playData: {},
      keyword: "", // 搜索索引值
      // 轮播图数据
      swiperlist: [
        {
          image: "../../static/icon/home_ban_1.jpg",
        },
        {
          image: "../../static/icon//home_ban_2.jpg",
        },
        {
          image: "../../static/icon//home_ban_3.jpg",
        },
      ],
      totalCount: 4,
      pageSize: 1,
      totalPage: 4,
      currPage: 1,
      limit: 4,
      page: 1,
      istop: 1, // 是否是精选商品
      // 秒杀列表
      seckillList: [],
      // 商品列表
      goodsList: [],
      // 分类数据
      gridArr: [
        {
          icon: "list-dot",
          name: "更多",
        },
      ],
    };
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  components: {
    musicPlay,
  },
  onLoad() {
    // 获取分类
    this.$http.post("book/shopcategory/getOneLevel").then((res) => {
      // 用一个空数组去接分类数据
      let arr = [];
      if (res.list.length >= 5) {
        for (let i in res.list) {
          if (i < 5) {
            arr.push({
              icon:
                "../../static/icon/shop_bar_" +
                (Number(i) + Number(1)) +
                ".png",
              name: res.list[i].name,
              catId: res.list[i].catId,
            });
          }
        }
        arr.push({
          icon: "../../static/icon/shop_bar_more.png",
          name: "更多",
        });
        this.gridArr = arr;
      }
    });

    // 获取限时秒杀
    this.$http.get(`book/shopseckill/getSeckillProd`).then((res) => {
      this.seckillList = res.list;
      console.log(this.seckillList);
    });

    // 获取精选商品
    this.$http
      .post(
        `book/shopproduct/appGetList?limit=${this.limit}&page=${this.page}&istop=${this.istop}`,
      )
      .then((res) => {
        this.goodsList = res.page.list;
      });
  },
  methods: {
    // 跳转详情页
    goDetail(id) {
      uni.navigateTo({
        url: "./commodityDetail?id=" + id,
      });
    },

    // 跳转分类页
    toClassify(catId, index) {
      if (catId) {
        uni.navigateTo({
          url: `./classify?type=${index}`,
        });
      } else {
        uni.navigateTo({
          url: "./classifyAll",
        });
      }
    },

    // 跳转搜索页
    goSearch() {
      uni.navigateTo({
        url: "./commoditySearch",
      });
    },

    // 列表跳页
    onShopMore(e) {
      uni.navigateTo({
        url: "./bookShopType?type=" + e,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.shopHeader {
  position: relative;
  top: 0;
  left: 0;
}

.search {
  padding: 10rpx;
  background-color: #fff;
  margin: 10rpx 0;
}

.swiper_box {
  margin-top: 20rpx;
  padding: 0 20rpx;

  .swiper-item {
    width: 100%;
    height: 100%;
    border-radius: 20rpx;

    .swiperImg {
      width: 100%;
      height: 100%;
      border-radius: 20rpx;
    }
  }
}

.classfy {
  margin: 0 10rpx;
  border-radius: 30rpx;

  view {
    float: left;
    width: 16.6%;
    text-align: center;

    image {
      width: 100rpx;
      height: 100rpx;
      margin: 0 auto;
    }

    .grid-text {
      font-size: 25rpx;
      margin-top: 4rpx;
    }
  }
}

.head_line {
  margin: 30rpx 0 30rpx 0;
  padding: 10rpx;

  b {
    display: inline-block;
    width: 12rpx;
    height: 40rpx;
    background-color: #54a966;
    vertical-align: bottom;
    margin: 0 20rpx 0 0;
  }

  text {
    font-size: 32rpx;
    font-weight: bold;
  }

  i {
    float: right;
    font-style: normal;
    color: #8b8a91;
    font-size: 24rpx;
    margin: 15rpx 35rpx 0 0;
  }
}

.limited {
  width: 100%;
  height: auto;
  padding: 20rpx 10rpx 10rpx 10rpx;
  display: flex;
  align-items: center;
  background-color: #fff;
  margin-top: 10rpx;

  .limitedSymbol {
    width: 22%;
    height: 300rpx;
    border-right: 1px solid #eee;
    vertical-align: middle;

    image {
      width: 120rpx;
      height: 120rpx;
      margin: 45px auto 0 auto;
    }
  }

  .limitedScrollBox {
    width: 76%;
    padding: 0 10rpx;
  }

  .limitedItem {
    width: 200rpx;
    text-align: center;

    image {
      width: 150upx;
      height: 200upx;
      margin: 15rpx auto 20rpx auto;
    }

    text {
      font-size: 20rpx;
      display: block;
    }

    .biaoti {
      font-size: 30rpx;
      margin: 10rpx 0 10rpx 0;
      font-weight: bold;
    }

    .xian {
      font-size: 32rpx;
      color: #bf0c0c;
      font-weight: bold;
    }

    .yuan {
      text-decoration: line-through;
      color: #c1c1c1;
    }
  }
}

.goods {
  width: 100%;

  .goodsItem {
    display: inline-block;
    width: 46%;
    border-radius: 20rpx;
    padding: 25rpx 25rpx 20rpx 25rpx;
    margin: 0 20rpx 20rpx 20rpx;
    background-color: #fff;
    border: 1px solid #eee;

    .goodsImg {
      width: 98%;
      height: 380rpx;
      border-radius: 10rpx;
    }

    .goodsContent {
      .goodsName {
        margin-top: 10rpx;
        font-size: 30rpx;
        font-weight: bold;
      }

      .goodsPrice {
        font-size: 30rpx;
        margin: 5rpx 0 0 3rpx;
        color: #bf0c0c;
        font-weight: bold;
      }
    }
  }

  .goodsItem:nth-child(2n) {
    margin-left: 0;
  }
}
</style>
