w1020/12_vuecli/mediaapp/src/views/book/BookPage.vue

<template>
  <div class="book-container">
    <div class="swiper-content">
      <van-swipe
        v-if="dataList.length > 0"
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
      >
        <van-swipe-item
          v-for="item in dataList[0].data.banner"
          :key="item.image"
        >
          <img :src="'https://images.weserv.nl/?url=' + item.image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="nav-content">
      <van-grid :border="false" :clickable="true">
        <van-grid-item icon="fire" text="豆瓣经典" />
        <van-grid-item icon="shop-collect" text="家居生活" />
        <van-grid-item icon="photograph" text="外出旅行" />
        <van-grid-item icon="gift-card" text="文具小物" />
      </van-grid>
    </div>
    <div class="new-product" v-if="dataList.length > 0">
      <div class="new-product-title">新品首发</div>
      <div
        class="product-item"
        v-for="item in dataList[3].data.product_items"
        :key="item.id"
      >
        <div class="product-img-content">
          <van-image
            width="100%"
            height="4rem"
            :src="'https://images.weserv.nl/?url=' + item.image"
          />
        </div>
        <div class="product-info-content">
          <van-row gutter="20">
            <van-col span="18">
              <div class="product-name">
                {{ item.title }}
              </div>
              <div class="product-info">{{ item.desc }}</div>
              <div class="product-tag">
                <van-tag
                  style="margin-right: 0.1rem"
                  type="danger"
                  v-for="val in item.tags"
                  :key="val"
                  >{{ val }}</van-tag
                >
              </div>
            </van-col>
            <van-col span="6">
              <div class="product-price">
                <span class="new-price">¥{{ item.promote_price }}</span>
                <span class="old-price">¥{{ item.price }}</span>
              </div>
              <div class="btn-content">
                <van-button size="small" round type="danger"
                  >立即购买</van-button
                >
              </div>
            </van-col>
          </van-row>
        </div>
      </div>
    </div>
    <div class="type-product">
      <van-tabs @click="tabChange" swipe-threshold="4" color="#191919">
        <van-tab title="全部商品"></van-tab>
        <van-tab title="豆瓣经典"></van-tab>
        <van-tab title="家居生活"></van-tab>
        <van-tab title="外出旅行"></van-tab>
        <van-tab title="文具小物"></van-tab>
      </van-tabs>
      <div class="type-product-list">
        <van-row gutter="10">
          <van-col span="12" v-for="item in typeProductList" :key="item.id">
            <ProductItem :val="item"></ProductItem>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>
<style scoped>
/* 商品分类 */
.type-product {
  margin-top: 1rem;
  padding: 0 0.2rem;
}
/* 新品区域 */
.new-product {
  padding: 0.2rem;
}
.new-product .product-item {
  margin-bottom: 0.2rem;
}
.new-product .new-product-title {
  font-size: 0.3rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}
.new-product .product-name {
  font-size: 0.3rem;
  font-weight: 700;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.1rem;
}
.new-product .product-info {
  font-size: 0.25rem;
  color: #999;
  margin-bottom: 0.06rem;
}
.new-product .product-tag {
  line-height: 0;
}
.new-product .product-price {
  margin-bottom: 0.3rem;
}
.new-product .product-price .new-price {
  font-size: 0.3rem;
  color: #dd1944;
  font-weight: 700;
}
.new-product .product-price .old-price {
  font-size: 0.2rem;
  color: #999;
  text-decoration: line-through;
}
.new-product .product-price,
.new-product .btn-content {
  line-height: 0;
}
/* 轮播图 */
.my-swipe .van-swipe-item img {
  width: 100%;
}
.nav-content {
  border-bottom: 0.2rem solid #f9f9f9;
}
</style>
<script>
import Vue from "vue";
import { Toast } from "vant";

Vue.use(Toast);
import ProductItem from "@/components/ProductItem.vue";
import axios from "axios";
export default {
  data() {
    return {
      dataList: [],
      typeProductList: [],
    };
  },
  created() {
    Toast.loading({
      message: "加载中...",
      forbidClick: true,
      duration: 0,
    });
    Promise.all([this.getDataList(), this.getTyepProduct()]).then(() => {
      Toast.clear();
    });
  },
  methods: {
    // tab切换
    tabChange(name) {
      let _typeUrl = "";
      switch (name) {
        case 0:
          _typeUrl = "products";
          break;
        case 1:
          _typeUrl = "category/classic";
          break;
        case 2:
          _typeUrl = "category/homelife";
          break;
        case 3:
          _typeUrl = "category/travel";
          break;
        case 4:
          _typeUrl = "category/stationery";
          break;
      }
      this.getTyepProduct(_typeUrl);
    },
    // 获取分类商品数据
    getTyepProduct(_typeUrl = "products") {
      return new Promise((resolve, reject) => {
        let url = "/market/market/" + _typeUrl;
        axios
          .get(url, {
            params: {
              start: 0,
              count: 10,
            },
          })
          .then((res) => {
            this.typeProductList = res.data.data.products;
            resolve(res);
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    // 获取轮播图及新品发布数据
    getDataList() {
      return new Promise((resolve, reject) => {
        axios
          .get("/market/market/home/modules")
          .then((res) => {
            this.dataList = res.data.data.modules;
            resolve(res);
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
  },
  mounted() {
    this.$emit("changePage", "1002");
  },
  components: {
    ProductItem,
  },
};
</script>