admin

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

@@ -1,16 +1,17 @@
 <template>
   <div class="book-container">
     <div class="swiper-content">
-      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
-        <van-swipe-item>
-          <img
-            src="https://images.weserv.nl/?url=https://img1.doubanio.com/img/files/file-1739868345-0.jpg"
-          />
-        </van-swipe-item>
-        <van-swipe-item>
-          <img
-            src="https://images.weserv.nl/?url=https://img1.doubanio.com/img/files/file-1739869022-0.jpg"
-          />
+      <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>
@@ -22,31 +23,41 @@
         <van-grid-item icon="gift-card" text="文具小物" />
       </van-grid>
     </div>
-    <div class="new-product">
+    <div class="new-product" v-if="dataList.length > 0">
       <div class="new-product-title">新品首发</div>
-      <div class="product-item">
+      <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://img01.yzcdn.cn/vant/cat.jpeg"
+            :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">《好东西》官方授权周边商品</div>
+              <div class="product-info">{{ item.desc }}</div>
               <div class="product-tag">
-                <van-tag type="danger">最高减138元</van-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">¥69</span>
-                <span class="old-price">¥79</span>
+                <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"
@@ -59,7 +70,7 @@
       </div>
     </div>
     <div class="type-product">
-      <van-tabs swipe-threshold="4" color="#191919" >
+      <van-tabs swipe-threshold="4" color="#191919">
         <van-tab title="全部商品">
           <van-row gutter="10">
             <van-col span="12">
@@ -75,7 +86,6 @@
               <ProductItem></ProductItem>
             </van-col>
           </van-row>
-          
         </van-tab>
         <van-tab title="豆瓣经典">内容 2</van-tab>
         <van-tab title="家居生活">内容 3</van-tab>
@@ -87,14 +97,17 @@
 </template>
 <style scoped>
 /* 商品分类 */
-.type-product{
+.type-product {
   margin-top: 1rem;
-  padding:0 .2rem;
+  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;
@@ -143,13 +156,40 @@
 }
 </style>
 <script>
-import ProductItem from "@/components/ProductItem.vue"
+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: [],
+    };
+  },
+  created() {
+    this.getDataList();
+  },
+  methods: {
+    // 获取轮播图及新品发布数据
+    getDataList() {
+      Toast.loading({
+        message: "加载中...",
+        forbidClick: true,
+        duration: 0
+      });
+      axios.get("/market/market/home/modules").then((res) => {
+        this.dataList = res.data.data.modules;
+        Toast.clear();
+      });
+    },
+  },
   mounted() {
     this.$emit("changePage", "1002");
   },
-  components:{
-    ProductItem
-  }
+  components: {
+    ProductItem,
+  },
 };
 </script>

12_vuecli/mediaapp/vue.config.js

@@ -8,6 +8,13 @@ module.exports = defineConfig({
         pathRewrite:{
           '^/api':''
         }
+      },
+      '/market':{
+        target:'https://market.douban.com/api/v2',
+        changeOrigin:true,
+        pathRewrite:{
+          '^/market':''
+        }
       }
     }
   },