admin

12_vuecli/mediaapp/src/components/ProductItem.vue

@@ -1,21 +1,26 @@
 <template>
     <div class="product-item">
-        <div class="img-content"></div>
+        <div class="img-content" :style="{ backgroundImage: `url(https://images.weserv.nl/?url=${val.image})` }"></div>
         <div class="product-title">
-            豆瓣电影日历2025 套装礼盒 年底圣诞元旦跨年新年电影礼物
+            {{val.title}}
         </div>
         <div class="product-info">
-            圣诞元旦跨年新年电影礼物                  
+            {{val.desc}}                  
         </div>
         <div class="product-tag">
-            <van-tag type="danger">立减70元</van-tag>
+            <van-tag style="margin-right:.1rem" type="danger" v-for="item in val.tags" :key="item">{{item}}</van-tag>
         </div>
         <div class="product-price">
-            <span class="new-price">¥69</span>
-            <span class="old-price">¥79</span>
+            <span class="new-price">¥{{val.promote_price}}</span>
+            <span class="old-price">¥{{val.price}}</span>
         </div>
     </div>
 </template>
+<script>
+export default {
+    props:["val"]
+}
+</script>
 <style scoped>
     .product-item{
         margin:.1rem 0;
@@ -23,7 +28,7 @@
     .img-content{
         width: 100%;
         padding-top: 100%;
-        background-image: url("https://img01.yzcdn.cn/vant/cat.jpeg");
+        /* background-image: url("https://img01.yzcdn.cn/vant/cat.jpeg"); */
         background-size: cover;
         margin-bottom: .1rem;
     }

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

@@ -70,28 +70,20 @@
       </div>
     </div>
     <div class="type-product">
-      <van-tabs swipe-threshold="4" color="#191919">
-        <van-tab title="全部商品">
-          <van-row gutter="10">
-            <van-col span="12">
-              <ProductItem></ProductItem>
-            </van-col>
-            <van-col span="12">
-              <ProductItem></ProductItem>
-            </van-col>
-            <van-col span="12">
-              <ProductItem></ProductItem>
-            </van-col>
-            <van-col span="12">
-              <ProductItem></ProductItem>
+      <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>
-        </van-tab>
-        <van-tab title="豆瓣经典">内容 2</van-tab>
-        <van-tab title="家居生活">内容 3</van-tab>
-        <van-tab title="外出旅行">内容 4</van-tab>
-        <van-tab title="文具小物">内容 4</van-tab>
-      </van-tabs>
+      </div>
     </div>
   </div>
 </template>
@@ -166,12 +158,39 @@ export default {
   data() {
     return {
       dataList: [],
+      typeProductList: []
     };
   },
   created() {
     this.getDataList();
+    this.getTyepProduct();
   },
   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"){
+      let url = "/market/market/"+_typeUrl;
+      axios.get(url,{
+        params:{
+          start:0,
+          count:10
+        }
+      }).then((res)=>{
+        console.log(res)
+        this.typeProductList = res.data.data.products;
+      })
+    },
     // 获取轮播图及新品发布数据
     getDataList() {
       Toast.loading({