列表页添加购物袋

@@ -43,19 +43,19 @@
                 <li class="card">
                     <div class="card-pic">
                         <a href="{{goodsUrl this}}">
-                            <img src="{{resizeImage default_images 372 499}}" alt="{{product_name}}">
+                            <img src="{{resizeImage default_images 330 440}}" alt="{{product_name}}">
                         </a>
                     </div>
                     <div class="card-bd">
                         <h2 class="card-label">
-                            <a href="{{goodsUrl this}}" class="line-clamp-2">{{product_name}}</a>
+                            <a href="{{goodsUrl this}}" class="line-clamp-1">{{product_name}}</a>
                         </h2>
+                        <span class="good-price {{#if market_price}}sale-price{{/if}}">¥ {{toFixed sales_price}}</span>
                         {{#if marketPrice}}
                             <span class="good-price" class="old-price">
                                 ¥ {{toFixed market_price}}
                             </span>
                         {{/if}}
-                        <span class="good-price {{#if market_price}}sale-price{{/if}}">¥ {{toFixed sales_price}}</span>
                     </div>
                 </li>
             {{/list}}

@@ -4,18 +4,18 @@
             <li class="card" v-for="item in data">
                 <div class="card-pic">
                     <a href="{{item | goodsUrl}}">
-                        <img v-bind:src="item.default_images | resize 372 499" alt="{{item.product_name}}">
+                        <img v-bind:src="item.default_images | resize 330 440" alt="{{item.product_name}}">
                     </a>
                 </div>
                 <div class="card-bd">
                     <h2 class="card-label">
-                        <a href="{{item | goodsUrl}}" class="line-clamp-2">{{item.product_name}}</a>
+                        <a href="{{item | goodsUrl}}" class="line-clamp-1">{{item.product_name}}</a>
                     </h2>
                     <h2 class="card-label-desc" v-if="item.product_name1">
-                        <a href="{{item | goodsUrl}}" class="line-clamp-2">{{item.product_name}}</a>
+                        <a href="{{item | goodsUrl}}" class="line-clamp-1">{{item.product_name}}</a>
                     </h2>
-                    <span class="good-price" :class="{'old-price': item.market_price}" v-if="item.market_price">¥ {{item.market_price | toFixed}}</span>
                     <span class="good-price" :class="{'sale-price': item.market_price}">¥ {{item.sales_price | toFixed}}</span>
+                    <span class="good-price" :class="{'old-price': item.market_price}" v-if="item.market_price">¥ {{item.market_price | toFixed}}</span>
                 </div>
             </li>
         </ul>
@@ -82,11 +82,11 @@
 
         .card {
             float: left;
-            width: 374px;
-            margin-right: 2px;
+            width: 330px;
+            margin: 0 30px;
 
             &:nth-child(2n) {
-                margin-right: 0;
+                margin: 0;
             }
         }
 
@@ -104,18 +104,14 @@
 
         .card-bd {
             min-height: 180px;
-            margin-left: 30px;
-            margin-right: 30px;
-            padding-top: 26px;
-            text-align: center;
+            padding-top: 40px;
             font-size: 0;
         }
 
         .card-label {
-            margin: 0 0 14px;
+            margin: 0 0 30px;
             font-size: 24px;
             line-height: 1.4;
-            height: 67.1999999999px;
             font-weight: normal;
         }
 
@@ -133,7 +129,7 @@
     }
 
     .good-price {
-        color: #000;
+        color: #b0b0b0;
         margin-right: 14px;
         font-size: 24px;
 
@@ -142,12 +138,13 @@
         }
 
         &.old-price {
-            text-decoration: line-through;
+            font-size: 18px;
             color: #b0b0b0;
+            text-decoration: line-through;
         }
 
         &.sale-price {
-            color: #000;
+            color: #d0021b;
         }
     }
 

@@ -10,8 +10,8 @@
 <style>
     .shopping-bag {
         position: fixed;
-        bottom: 100px;
-        left: 50px;
+        bottom: 160px;
+        left: 30px;
         text-align: center;
 
         .background {

@@ -352,7 +352,7 @@
             topNav: require('./top-nav.vue'),
             shareBottom: require('component/tool/share-bottom.vue'),
             preferList: require('component/product/prefer-list.vue'),
-            shoppingBag: require('./shopping-bag.vue'),
+            shoppingBag: require('component/product/shopping-bag.vue'),
             operationBar: require('./operation-bar.vue')
         },
         methods: {

@@ -7,6 +7,7 @@
         <order :config="orderConfig" :val="order" v-if="enableOrder"></order>
         <List :data="productList" :state="listState"></List>
         <Filter :config="filterConfig" v-ref:filter></Filter>
+        <shopping-bag :cart-count="cartCount" v-if="isApp"></shopping-bag>
     </div>
 </template>
 <script>
@@ -22,6 +23,7 @@
     const order = require('component/product/order.vue');
     const list = require('component/product/list.vue');
     const filter = require('component/product/filter.vue');
+    const shoppingBag = require('component/product/shopping-bag.vue');
 
     let locationQuery = qs(decodeURIComponent(location.search.replace(/^\?/, '')));
 
@@ -33,6 +35,7 @@
         el: '#product-list',
         data: function() {
             return {
+                isApp: yoho.isApp,
                 isiOS: yoho.isiOS,
                 sortName: locationQuery.title || locationQuery.sort_name, // 优先使用 title
                 orderConfig: [],
@@ -50,7 +53,8 @@
 
                 // state
                 inSearching: false, // 请求中
-                enableOrder: false
+                enableOrder: false,
+                cartCount: 0
             };
         },
         computed: {
@@ -79,7 +83,8 @@
             cheader,
             list,
             order,
-            filter
+            filter,
+            shoppingBag
         },
         methods: {
             search: function() {
@@ -135,6 +140,14 @@
                 this.page = 0;
                 this.$set('productList', []);
                 this.search();
+            },
+
+            refreshCart: function() {
+                $.get('/product/cart-count.json').then(result=> {
+                    if (result.code === 200) {
+                        this.cartCount = result.data.cart_goods_count;
+                    }
+                });
             }
         },
         watch: {
@@ -175,6 +188,12 @@
                         self.enableOrder = true;
                     }
                 });
+
+            // 读取购物车数量
+            if (this.isApp) {
+                this.refreshCart();
+                bus.$on('app.shoppingcart.refresh', this.refreshCart);
+            }
         }
     };