购物袋重构

@@ -86,10 +86,6 @@
             swipeItem: swipe.SwipeItem,
             swipeItem: swipe.SwipeItem,
         },
         },
         methods: {
         methods: {
-            initActiveSides: function () {
-
-
-            },
             showcase: function() {
             showcase: function() {
                 const opts = {
                 const opts = {
                     images: this.goods.map((item) => {
                     images: this.goods.map((item) => {

 <template>
 <template>
     <div class="image-swipe">
     <div class="image-swipe">
         <div class="swipe-wrap">
         <div class="swipe-wrap">
-            <swiper :options="swiperOption">
+            <swiper :options="swiperOption" v-ref:swiper>
                 <swiper-slide v-for="item in goods">
                 <swiper-slide v-for="item in goods">
                     <img title="{{item.title}}"
                     <img title="{{item.title}}"
                          :src="item.color_image | resize 580 770"
                          :src="item.color_image | resize 580 770"
                          width="100%" alt=""
                          width="100%" alt=""
-                         @click.prevent="showcase()">
+                         data-index="{{$index}}"
+                         @click.stop.prevent="showcase()">
                 </swiper-slide>
                 </swiper-slide>
             </swiper>
             </swiper>
         </div>
         </div>
@@ -60,7 +61,8 @@
     }
     }
 </style>
 </style>
 <script>
 <script>
-    import { swiper, swiperSlide } from 'vue-awesome-swiper'
+    const yoho = require('yoho');
+    const vas = require('vue-awesome-swiper');
 
 
     module.exports = {
     module.exports = {
         props: {
         props: {
@@ -71,26 +73,26 @@
                 swiperOption: {
                 swiperOption: {
                     loop: true,
                     loop: true,
                     pagination : '.swiper-pagination',
                     pagination : '.swiper-pagination',
-                    paginationClickable :true,
                     slidesPerView: 3
                     slidesPerView: 3
                 }
                 }
             };
             };
         },
         },
         components: {
         components: {
-            swiper,
-            swiperSlide,
+            swiper: vas.swiper,
+            swiperSlide: vas.swiperSlide,
+        },
+        computed: {
+            swiper() {
+                return this.$refs.swiper.swiper
+            }
         },
         },
         methods: {
         methods: {
-            initActiveSides: function () {
-
-
-            },
             showcase: function() {
             showcase: function() {
                 const opts = {
                 const opts = {
                     images: this.goods.map((item) => {
                     images: this.goods.map((item) => {
                         return item.color_image;
                         return item.color_image;
                     }).filter(image => image),
                     }).filter(image => image),
-                    index: this.$refs.swipe.index
+                    index: this.swiper.activeIndex
                 };
                 };
 
 
                 yoho.goImageBrowser(opts);
                 yoho.goImageBrowser(opts);

@@ -263,7 +263,7 @@
     </show-box>
     </show-box>
 
 
     <div v-if="isApp && isReady">
     <div v-if="isApp && isReady">
-        <shopping-bag></shopping-bag>
+        <shopping-bag :cart-count="cartCount"></shopping-bag>
     </div>
     </div>
 
 
     <div v-if="!isApp">
     <div v-if="!isApp">
@@ -352,6 +352,7 @@
             topNav: require('./top-nav.vue'),
             topNav: require('./top-nav.vue'),
             shareBottom: require('component/tool/share-bottom.vue'),
             shareBottom: require('component/tool/share-bottom.vue'),
             preferList: require('component/product/prefer-list.vue'),
             preferList: require('component/product/prefer-list.vue'),
+            shoppingBag: require('./shopping-bag.vue'),
             operationBar: require('./operation-bar.vue')
             operationBar: require('./operation-bar.vue')
         },
         },
         methods: {
         methods: {

 <template>
 <template>
-    <div class="shopping-bag">
+    <div class="shopping-bag" @click="yoho.goShopingCart()">
         <div class="background"></div>
         <div class="background"></div>
-
-        <!--<button class="button control-button">-->
-            <!--<span @click="yoho.goShopingCart()" style="position: relative;">-->
-                <!--<span class="shopbag"></span>-->
-                <!--<span v-if="isApp && cartCount > 0" class="badge badge-tr">{{cartCount >= 100 ? '99+': cartCount}}</span>-->
-            <!--</span>-->
-        <!--</button>-->
-        <!--<button class="button control-button" @click="toggleFavorite()">-->
-            <!--<span v-if="entity.is_collect === 'Y' " class="icon icon-focused"></span>-->
-            <!--<span v-else class="focus"></span>-->
-        <!--</button>-->
-        <!--<button class="button button-solid add-to-cart"-->
-                <!--@click="showAddToCart()"-->
-                <!--:disabled="isSoldOut">-->
-            <!--<span v-if="isSoldOut">-->
-                <!--已售完-->
-            <!--</span>-->
-            <!--<span v-else="">-->
-                <!--加入购物袋-->
-            <!--</span>-->
-        <!--</button>-->
+        <div class="bag"></div>
+        <span v-if="cartCount > 0" class="number" :class="{over: cartCount > 99}">
+            {{cartCount > 99 ? '99+' : cartCount}}
+        </span>
     </div>
     </div>
 </template>
 </template>
 <style>
 <style>
     .shopping-bag {
     .shopping-bag {
+        position: fixed;
+        bottom: 100px;
+        left: 50px;
+        text-align: center;
+
+        .background {
+            width: 108px;
+            height: 108px;
+            opacity: .3;
+            border-radius: 50%;
+            background-color: #000;
+        }
+
+        .bag {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 48px;
+            height: 48px;
+            margin-left: -24px;
+            margin-top: -26px;
+            background: resolve("product/shopping-bag.png");
+            background-size: contain;
+        }
 
 
+        .number {
+            position: absolute;
+            width: 36px;
+            height: 36px;
+            top: 0;
+            right: 0;
+            color: #fff;
+            font-size: 20px;
+            line-height: 36px;
+            text-align: center;
+            border-radius: 50%;
+            background-color: #d0021b;
+
+            &.over {
+                font-size: 14px;
+            }
+        }
     }
     }
 </style>
 </style>
 <script>
 <script>
@@ -36,36 +60,12 @@
     module.exports = {
     module.exports = {
         name: 'shopping-bag',
         name: 'shopping-bag',
         props: {
         props: {
-            shareImg: String
+            cartCount: [Number, String]
         },
         },
         data() {
         data() {
-            return {};
-        },
-        methods: {
-            share() {
-                yoho.goShare({
-                    title: this.shareTitle || '',
-                    des: '我在BLK发现了一个不错的商品，快来看看吧！',
-                    img: location.protocol + this.shareImg,
-                    url: location.href
-                });
-            },
-            toggleFavorite: function() {
-                $.post('/product/favorite.json', {
-                    operation: this.entity.is_collect === 'Y' ? 'remove' : 'add',
-                    id: this.entity.product_id
-                }).then((result)=> {
-                    if (result.code === 200) {
-                        tip(this.entity.is_collect === 'Y' ? '取消收藏成功' : '收藏成功');
-                        this.entity.is_collect = this.entity.is_collect === 'Y' ? 'N' : 'Y';
-                        yoho.store.set('productReload', true);
-                    } else if (result.code === 401) {
-                        yoho.goLogin('', () => {
-                            this.toggleFavorite();
-                        });
-                    }
-                });
-            }
+            return {
+                yoho: yoho
+            };
         }
         }
     };
     };
 </script>
 </script>