模拟本地数据

zhiyangdu
1 parent e40ba17e
Showing 2 changed files with 139 additions and 9 deletions
src/pages/pointsMall/pointsMall.less
src/pages/pointsMall/pointsMall.vue
@@ -110,8 +110,8 @@
   .tab_item_box{
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    margin:50px 340px 33px 30px;
+    // justify-content: space-between;
+    margin:50px 30px 33px 30px;
     .item{
       height: 33px;
       font-size: 24px;
@@ -132,4 +132,22 @@
       background: #999999;
       margin: 0 16px;
     }
-  }
 \ No newline at end of file
+  }
+  // 为你推荐
+  .list-box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .discount-flag {
+        position: absolute;
+        top: 4px;
+        left: 22px;
+        z-index: 1;
+        background: linear-gradient(90deg, #F9EE7A 0%, #FAD844 100%);
+        padding: 1px 8px;
+        color: #945A08;
+        font-size: 20px;
+        font-weight: 400;
+        border-radius: 6px;
+    }
+}
 \ No newline at end of file
@@ -41,23 +41,34 @@
         <!-- 分割线 -->
         <div class="line"> </div>
         <div class="item">热门商品</div>
-        <div class="item">精品推荐</div>
+      </div>
+      <!-- 为你推荐商品列表 -->
+      <div class="list-box">
+          <!-- 商品展示样式 2 -->
+          <goods-item-2 class="item" v-for="(item, index) in goodsLists" :key="index" @jump="toDiscountList(item)"
+              :item="item"
+              pid="4">
+          </goods-item-2>
       </div>
       <!-- 实物商品 -->
       <div class="tab_item_box">
         <div class="item active">实物商品</div>
         <!-- 分割线 -->
         <div class="line"> </div>
-        <div class="item">实物商品</div>
-        <div class="item">精品推荐</div>
+        <div class="item">实物商品实物商品实物商品实物商品</div>
       </div>
+      <!-- 实物商品裂变 -->
+       <!-- 商品样式 7 列表 -->
+      <column-list-box class="column-list-box" v-if="phyicalGoods && phyicalGoods.list && phyicalGoods.list.length" @jump="toDetail" @primary="primary"
+          :lists="phyicalGoods"
+          com="7">
+      </column-list-box>
       <!-- 虚拟商品 -->
       <div class="tab_item_box">
         <div class="item active">虚拟商品</div>
         <!-- 分割线 -->
         <div class="line"> </div>
         <div class="item">热门商品</div>
-        <div class="item">精品推荐</div>
       </div>
       <!-- 满减红包 -->
       <div class="tab_item_box">
@@ -65,21 +76,27 @@
         <!-- 分割线 -->
         <div class="line"> </div>
         <div class="item">热门商品</div>
-        <div class="item">精品推荐</div>
       </div>
   </div>
 </div>
 </template>
  
 <script>
+import goodsItem2 from "@/components/goodsItem_2/goodsItem_2";
+import columnListBox from "@/components/columnListBox/columnListBox";
 export default {
   data () {
     return {
-
+      goodsLists: null,  // 为你推荐商品
+      phyicalGoods: null, // 实物商品
+      virtualGoods: null,   // 虚拟商品
+      redEnvelopeFull: null // 满减红包
     }
   },
   //部件
   components: {
+    goodsItem2,
+    columnListBox
   },
   //静态
   props: [
@@ -95,6 +112,101 @@ export default {
   },
   //请求数据
   created () {
+    // 临时，为你推荐商品数据
+    this.$set(this, 'goodsLists', [
+      {
+        ads: "广告语",
+        id: "9519164",
+        price: "5.01",
+        prices: "6.00",
+        shop_type: "1",
+        simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
+        title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
+      },
+      {
+        ads: "广告语",
+        id: "9519164",
+        price: "5.01",
+        prices: "6.00",
+        shop_type: "1",
+        simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
+        title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
+      },
+      {
+        ads: "广告语",
+        id: "9519164",
+        price: "5.01",
+        prices: "6.00",
+        shop_type: "1",
+        simg: "http://wjjseller.cnlive.com/uploads/05ac5ee31c3bb363d95072559d205bd8.png",
+        title: "L'OCCITANE/欧舒丹 芍药花香润手霜 30ML 30ml"
+      }
+    ]);
+    // 临时，实物商品列表
+    this.$set(this, 'phyicalGoods', {
+      list: [
+        {
+          activity: "0",
+          activity_desc: "",
+          addtime: "1604544867",
+          ads: "23123",
+          code: "160454486791776561000",
+          id: "9525539",
+          price: "0.01",
+          prices: "0.00",
+          shop_type: "1",
+          simg: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/11/05/5fa3695e39ae6.png",
+          stock: "0",
+          stoptime: "0",
+          title: "aabbsdf350ml"
+        },
+        {
+          activity: "0",
+          activity_desc: "",
+          addtime: "1604544867",
+          ads: "23123",
+          code: "160454486791776561000",
+          id: "9525539",
+          price: "0.01",
+          prices: "0.00",
+          shop_type: "1",
+          simg: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/11/05/5fa3695e39ae6.png",
+          stock: "0",
+          stoptime: "0",
+          title: "aabbsdf350ml"
+        },
+        {
+          activity: "0",
+          activity_desc: "",
+          addtime: "1604544867",
+          ads: "23123",
+          code: "160454486791776561000",
+          id: "9525539",
+          price: "0.01",
+          prices: "0.00",
+          shop_type: "1",
+          simg: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/11/05/5fa3695e39ae6.png",
+          stock: "0",
+          stoptime: "0",
+          title: "aabbsdf350ml"
+        },
+        {
+          activity: "0",
+          activity_desc: "",
+          addtime: "1604544867",
+          ads: "23123",
+          code: "160454486791776561000",
+          id: "9525539",
+          price: "0.01",
+          prices: "0.00",
+          shop_type: "1",
+          simg: "https://wjjtest.ys2.cnliveimg.com/802/shop/img/2020/11/05/5fa3695e39ae6.png",
+          stock: "0",
+          stoptime: "0",
+          title: "aabbsdf350ml"
+        }
+      ]
+    });
   },
   mounted () {
   }