slide select

@@ -246,14 +246,13 @@ const component = {
             page: req.query.page || 1,
             limit: 20,
             gender: GENDER[CHANNEL_MAP[channel]],
-            udid: req.sessionID ,
+            udid: req.sessionID,
             rec_pos: req.query.rec_pos || 100001,
             yh_channel: CHANNEL_MAP[channel] || 1,
             client_id: req.cookies._yasvd || '1'
         };
 
         model.mightLike(params).then(result => {
-            console.log(result.data.product_list);
             if (result && result.code === 200) {
                 res.json({
                     code: 200,

@@ -97,6 +97,7 @@
     "postcss-sprites": "^4.2.1",
     "postcss-use": "^2.2.0",
     "precss": "^1.4.0",
+    "sass-loader": "^6.0.6",
     "shelljs": "^0.7.3",
     "style-loader": "^0.17.0",
     "stylelint": "^7.1.0",

+const postImport = require('postcss-import');
+const precss = require('precss');
+const autoprefixer = require('autoprefixer');
+const cssnano = require('cssnano');
+
+module.exports = () => {
+    return [
+        postImport({}),
+        precss(),
+        autoprefixer(),
+        cssnano()
+    ];
+};

@@ -2,12 +2,14 @@ const Vue = require('vue');
 const lazyload = require('vue-lazyload');
 const directive = require('common/vue-directive');
 const app = require('product/detail/index.vue');
+const VueTouch = require('vue-touch');
 const yoho = require('yoho');
 
 require('common/vue-filter')(Vue);
 Vue.use(lazyload, {
     preLoad: 3
 });
+Vue.use(VueTouch);
 Vue.use(directive);
 
 yoho.ready(() => {

+<template>
+<div class="add-cart" :class="cartClass">
+    <ul class="cart-detail">
+        <li v-touch:tap="pickColor">
+            <span class="color">{{colorName || '颜色'}}</span>
+            <i class="icon color" :class="sortClass('color')"></i>
+        </li>
+        <li v-touch:tap="pickSize">
+            <span class="size">{{sizeName || '尺码'}}</span>
+            <i class="icon size" :class="sortClass('size')"></i
+        </li>
+    </ul>
+    <a class="add-btn" v-touch:tap="toCart">{{buttonText}}</a>
+    <slide-select v-ref:slideSelect
+        :slides="slideList"
+        :model="slideId"
+        :title="slideTitle"
+        :tag="slideTag"
+        @selected="slideSelect"
+        @hide="slideHide"></slide-select>
+</div>
+</template>
+
+<script>
+const slideSelect = require('./slide-select.vue');
+const tip = require('common/tip');
+
+module.exports = {
+    name: 'add-to-cart',
+    props: {
+        value: {
+            type: Object,
+            default() {
+                return {};
+            }
+        }
+    },
+    data() {
+        return {
+            skuList: [],
+            slideList: [],
+            slideTitle: '',
+            slideId: 0,
+            slideTag: '',
+            colorName: '',
+            sizeName: '',
+            colorId: 0,
+            sizeId: 0,
+            sku: 0,
+        };
+    },
+    computed: {
+        cartClass() {
+            if (this.value.storage_sum <= 0) {
+                return {'no-storage': true};
+            }
+            return {};
+        },
+        buttonText() {
+            if (this.value.storage_sum <= 0) {
+                return '已售罄';
+            }
+            return '加入购物车';
+        }
+    },
+    methods: {
+        sortClass(tag) {
+            if (this.slideTag === tag) {
+                return {'icon-sort-up': true};
+            }
+            if (this.slideTag === tag) {
+                return {'icon-sort-up': true};
+            }
+            return {'icon-sort-down': true};
+        },
+        pickColor() {
+            if (this.skuList.length && this.value.storage_sum > 0) {
+                let slides = [];
+
+                this.skuList.filter(sku => sku.storage).forEach(sku => {
+                    if (!slides.some(slide => slide.id === sku.colorId)) {
+                        slides.push({
+                            text: sku.colorName,
+                            id: sku.colorId
+                        });
+                    }
+                });
+                this.slideList = slides;
+                this.slideId = this.colorId;
+                this.slideTitle = '颜色';
+                this.slideTag = 'color';
+                this.$refs.slideselect.show();
+            }
+        },
+        pickSize() {
+            if (this.skuList.length && this.value.storage_sum > 0) {
+                let slides = [];
+
+                this.skuList.filter(sku => sku.storage).forEach(sku => {
+                    if (!slides.some(slide => slide.id === sku.sizeId) &&
+                        (!this.colorId || sku.colorId === this.colorId)) {
+                        slides.push({
+                            text: sku.sizeName,
+                            id: sku.sizeId
+                        });
+                    }
+                });
+                this.slideList = slides;
+                this.slideId = this.sizeId;
+                this.slideTitle = '尺码';
+                this.slideTag = 'size';
+                this.$refs.slideselect.show();
+            }
+        },
+        slideSelect(params) {
+            if (params.tag === 'color') {
+                this.colorId = params.slide.id;
+                this.colorName = params.slide.text;
+                this.sizeId = 0;
+                this.sizeName = '';
+            } else {
+                this.sizeId = params.slide.id;
+                this.sizeName = params.slide.text;
+            }
+        },
+        processSku(goodsList) {
+            let skus = [];
+
+            goodsList.filter(color => color.status).forEach(color => {
+                color.size_list.filter(size => size.status).forEach(size => {
+                    if (!skus.some(sku => sku.colorId === color.color_id && sku.sizeId === size.size_id)) {
+                        skus.push({
+                            colorId: color.color_id,
+                            colorName: color.factory_goods_name,
+                            sizeId: size.size_id,
+                            sizeName: size.size_name,
+                            sku: size.product_sku,
+                            storage: size.storage_number,
+                        });
+                    }
+                });
+            });
+            return skus;
+        },
+        toCart() {
+            if (this.value.storage_sum <= 0) {
+                return;
+            }
+            if (!this.colorId) {
+                return tip('请选择颜色');
+            }
+            if (!this.sizeId) {
+                return tip('请选择尺码');
+            }
+            let sku = this.skuList.find(s => s.colorId === this.colorId && s.sizeId === this.sizeId);
+
+            if (sku) {
+                this.reset();
+                this.$emit('add-cart', sku);
+            }
+        },
+        slideHide() {
+            this.slideTag = '';
+        },
+        reset() {
+            this.colorName = '';
+            this.sizeName = '';
+            this.colorId = 0;
+            this.sizeId = 0;
+        },
+    },
+    watch: {
+        value(val) {
+            if (val) {
+                this.skuList = this.processSku(val.goods_list);
+            }
+        }
+    },
+    components: {slideSelect}
+};
+</script>
+
+<style>
+.add-cart {
+    &.no-storage {
+        .cart-detail {
+            color: #b0b0b0;
+
+            .icon {
+                display: none;
+            }
+        }
+
+        .add-btn {
+            background-color: #b0b0b0;
+            border-color: #b0b0b0;
+        }
+    }
+
+    .cart-detail {
+        font-size: 0;
+        height: 100px;
+        margin-bottom: 40px;
+        border-top: 1px solid #eee;
+        border-bottom: 1px solid #eee;
+        display: flex;
+
+        li {
+            position: relative;
+            display: flex;
+            line-height: 100px;
+            height: 100px;
+            overflow: hidden;
+            font-size: 32px;
+            flex: 1 1 100%;
+            align-items: center;
+            justify-content: space-between;
+
+            .icon {
+                float: right;
+                font-weight: bold;
+                font-size: 40px;
+
+                &.icon-sort-down {
+                    margin-top: -15px;
+                }
+            }
+
+            span {
+                display: block;
+                height: 40px;
+                line-height: 40px;
+            }
+
+            &:first-child {
+                padding-right: 30px;
+            }
+
+            &:last-child {
+                span {
+                    padding-left: 30px;
+                    border-left: solid 1px #e0e0e0;
+                }
+            }
+        }
+    }
+
+    .add-btn {
+        display: inline-block;
+        width: 100%;
+        height: 85px;
+        color: #fff;
+        font-size: 32px;
+        text-align: center;
+        line-height: 82px;
+        background-color: #000;
+        border: 1px solid #7a7a7a;
+    }
+}
+</style>

+<template>
+    <div class="select-header">
+        <div class="title">{{title}}</div>
+        <a href="javascript:;" class="btn-sure" @click="selected">确定</a>
+    </div>
+</template>
+
+<script>
+module.exports = {
+    name: 'slide-select-header',
+    props: ['title'],
+    methods: {
+        selected() {
+            this.$emit('selected');
+        }
+    }
+};
+</script>
+
+<style>
+.select-header {
+    width: 100%;
+    height: 80px;
+    line-height: 80px;
+    border-bottom: 1px solid #e0e0e0;
+    font-size: 32px;
+    background-color: #000;
+
+    .title {
+        float: left;
+        padding-left: 25px;
+        color: #fff;
+    }
+
+    .btn-sure {
+        float: right;
+        display: block;
+        width: 100px;
+        color: #4a90e2;
+        text-align: center;
+    }
+}
+</style>

+<template>
+  <div class="select-swipe"
+        v-touch:panmove="panmove" 
+        v-touch:panstart="panstart"
+        v-touch:panend="panend">
+    <div class="select-foucs"></div>
+    <ul class="select-ul"
+        :style="selectStyle">
+        <li class="item" :class="itemClass(size)" v-for="size in slides" :key="size.id">
+            <p>{{size.text}}</p>
+        </li>
+    </ul>
+</div>
+</template>
+
+<script>
+module.exports = {
+    name: 'slide-select-swipe',
+    props: {
+        slides: {
+            type: Array,
+            default() {
+                return [];
+            }
+        },
+        model: {
+            type: Number,
+            default: 0
+        }
+    },
+    data() {
+        return {
+            selectStyle: {
+                transform: 'translate(0, 0)',
+            },
+            transitionStyle: '',
+            translateY: 0,
+            currentIndex: 2,
+            itemHeight: 0,
+        };
+    },
+    methods: {
+        renderModel() {
+            if (this.model > 0) {
+                this.currentIndex = this.slides.findIndex(slide => slide.id === this.model);
+            } else {
+                if (this.slides.length > 3) {
+                    this.currentIndex = 2;
+                } else {
+                    this.currentIndex = 0;
+                }
+            }
+            this.$emit('change', this.slides[this.currentIndex].id);
+            this.$nextTick(() => {
+                this.itemHeight = document.querySelector('.select-ul .item').clientHeight;
+                this.translateY = 0 - this.currentIndex * this.itemHeight;
+                this.transform();
+            });
+        },
+        transform() {
+            this.selectStyle.transform = `translate(0px, ${this.translateY + this.itemHeight * 2}px)`;
+            this.selectStyle.transition = this.transitionStyle;
+        },
+        itemClass(slide) {
+            let cls = {};
+            let slideIndex = this.slides.findIndex(s => s === slide);
+
+            if (this.currentIndex === slideIndex) {
+                cls.current = true;
+            } else if (this.currentIndex - slideIndex === 1) {
+                cls['current-prev'] = true;
+            } else if (this.currentIndex - slideIndex === -1) {
+                cls['current-next'] = true;
+            } else if (this.currentIndex > slideIndex) {
+                cls.prev = true;
+            } else {
+                cls.next = true;
+            }
+            return cls;
+        },
+        panstart() {
+            this.originY = 0 - this.currentIndex * this.itemHeight;
+            this.transitionStyle = '';
+            this.selectStyle['will-change'] = 'transform';
+            this.transform();
+        },
+        panmove(e) {
+            this.translateY = e.deltaY / 1.5 + this.originY;
+            if (this.translateY > 0) {
+                this.currentIndex = 0;
+            } else {
+                this.currentIndex = Math.abs(Math.round(this.translateY / this.itemHeight));
+                if (this.currentIndex >= this.slides.length) {
+                    this.currentIndex = this.slides.length - 1;
+                }
+            }
+            this.transform();
+        },
+        panend() {
+            this.translateY = 0 - this.currentIndex * this.itemHeight;
+            this.transitionStyle = 'transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)';
+            delete this.selectStyle['will-change'];
+            this.$emit('change', this.slides[this.currentIndex].id);
+            this.transform();
+        },
+    },
+    watch: {
+        slides(val) {
+            this.slides = val;
+            this.renderModel();
+        }
+    },
+};
+</script>
+
+<style>
+$item-height: 68px;
+
+.select-swipe {
+    width: 100%;
+    height: 340px;
+    margin-top: 46px;
+    position: relative;
+    overflow: hidden;
+
+    .select-foucs {
+        width: 100%;
+        height: $item-height;
+        margin-top: calc(2 * $item-height);
+        border-top: 1px solid #e0e0e0;
+        border-bottom: 1px solid #e0e0e0;
+    }
+
+    .select-ul {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+
+        .item {
+            width: 100%;
+            float: left;
+            height: $item-height;
+            text-align: center;
+
+            p {
+                transition: transform 0.1s linear;
+                line-height: $item-height;
+                font-size: 32px;
+            }
+
+            &.current p {
+                transform: rotateX(0deg);
+                color: #000;
+            }
+
+            &.current-prev p {
+                transform: rotateX(10deg) translate(0, -5px);
+                color: #b0b0b0;
+            }
+
+            &.current-next p {
+                transform: rotateX(-10deg) translate(0, 5px);
+                color: #b0b0b0;
+            }
+
+            &.prev p {
+                transform: rotateX(25deg);
+                color: #d9d9d9;
+            }
+
+            &.next p {
+                transform: rotateX(-25deg);
+                color: #d9d9d9;
+            }
+        }
+    }
+}
+</style>

+<template>
+<div class="slide-select" :class="{active: active, 'slide-in': slideIn}">
+    <div class="shadow" v-touch:tap="hide"></div>
+    <div class="select-box">
+        <slide-select-header :title="title" @selected="selected"></slide-select-header>
+        <slide-select-swipe v-if="active"
+            :model="model" 
+            :slides="currentSlides" 
+            @change="slideChange"></slide-select-swipe>
+    </div>
+</div>
+</template>
+
+<script>
+const slideSelectHeader = require('./slide-select-header.vue');
+const slideSelectSwipe = require('./slide-select-swipe.vue');
+
+module.exports = {
+    name: 'slide-select',
+    props: {
+        slides: {
+            type: Array,
+            default() {
+                return [];
+            }
+        },
+        model: {
+            type: Number,
+            default: 0
+        },
+        title: {
+            type: String,
+        },
+        tag: {
+            type: String,
+        }
+    },
+    data() {
+        return {
+            active: false,
+            slideIn: false,
+            currentSlides: this.slides,
+            currentModel: this.model
+        };
+    },
+    methods: {
+        show() {
+            this.active = true;
+            setTimeout(() => {
+                this.slideIn = true;
+            }, 0);
+            this.bodyElStyle = document.querySelector('body').style;
+            this.bodyElStyle.position = 'absolute';
+            this.bodyElStyle.top = 0;
+            this.bodyElStyle.left = 0;
+            this.bodyElStyle.right = 0;
+            this.bodyElStyle.bottom = 0;
+            this.bodyElStyle.overflow = 'hidden';
+            this.$emit('show', this.tag);
+        },
+        hide() {
+            this.slideIn = false;
+            setTimeout(() => {
+                this.active = false;
+            }, 200);
+            this.bodyElStyle.position = 'static';
+            this.bodyElStyle.overflow = 'auto';
+            this.$emit('hide', this.tag);
+        },
+        slideChange(model) {
+            this.currentModel = model;
+        },
+        selected() {
+            let currentSlide = this.currentSlides.find(slide => slide.id === this.currentModel);
+
+            this.hide();
+            this.$emit('selected', {slide: currentSlide, tag: this.tag });
+        }
+    },
+    beforeDestroy() {
+        this.bodyElStyle.position = 'static';
+        this.bodyElStyle.overflow = 'auto';
+    },
+    watch: {
+        slides(val) {
+            this.currentSlides = val;
+        },
+        model(val) {
+            this.model = val;
+        }
+    },
+    components: {
+        slideSelectHeader,
+        slideSelectSwipe,
+    }
+};
+
+</script>
+
+<style>
+$show-speed: 0.2s;
+
+.slide-select {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 211;
+    display: none;
+
+    &.active {
+        display: block;
+    }
+
+    &.slide-in {
+        .shadow {
+            background-color: rgba(0, 0, 0, 0.2);
+        }
+
+        .select-box {
+            transform: translate(0, 0);
+        }
+    }
+}
+
+.shadow {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+    background-color: rgba(0, 0, 0, 0);
+    transition: background-color $show-speed ease-in-out;
+}
+
+.select-box {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 511px;
+    background-color: #fff;
+    z-index: 2;
+    transform: translate(0, 100%);
+    transition: transform $show-speed ease-in-out;
+}
+
+</style>

 <template>
+<div>
     <top-nav v-if="isApp"></top-nav>
     <show-box :is-first="true">
         <image-swiper :goods="entity.goods_list"></image-swiper>
@@ -23,29 +24,16 @@
                 </li>
             </ul>
         </div>
-        <hr>
-        <div>
-            <ul class="service">
+        <div class="service">
+            <ul>
                 <li><i class="icon icon-real"></i>100%品牌正品</li>
                 <li class="return" v-if="intro.supportRefundExchange === 'N'">
                     <i class="icon icon-unsupport-seven"></i>不支持7天无理由退换货</li>
-                <li class="return" v-else><i class="icon icon-seven"></i>支持7天无理由退换货</li>
+                <li class="return" v-else><i class="icon icon-seven"></i>7天无理由退换货</li>
                 <li><i class="icon icon-onlineservice"></i>便捷在线客服</li>
             </ul>
         </div>
-        <hr>
-        <div class="add-cart">
-            <ul class="cart-detail">
-                <li>
-                    <span class="color">颜色 <i class="icon icon-sort-up color" @click="pickColor"></i></span>
-                </li>
-                <li>
-                    <span class="size">尺码 <i class="icon icon-sort-down size"></i></span>
-                </li>
-            </ul>
-            <hr>
-            <a class="add-btn">加入购物车</a>
-        </div>
+        <add-to-cart :value="entity" @add-cart="addCart"></add-to-cart>
     </show-box>
     <show-box :is-last="preferList.length <= 0">
         <div v-if="intro.productDescBo">
@@ -269,9 +257,7 @@
     <div v-if="!isApp">
         <share-bottom></share-bottom>
     </div>
-
-    <feature-selector :is-visible="showFeatureSelector" :entity="entity"
-                      :on-add-to-cart="onAddToCart"></feature-selector>
+</div>
 </template>
 <script>
     /**
@@ -300,36 +286,7 @@
                 entity: {},
                 showFeatureSelector: false,
                 cartCount: 0,
-
-                /**
-                 * 加入购物车回调
-                 *
-                 * @param result
-                 */
-                onAddToCart: (selection, selector)=> {
-                    $.post('/product/cart.json', {
-                        productSku: selection.size.value,
-                        buyNumber: 1
-                    }).then((result)=> {
-                        if (yoho.goShopingKey && result.data && result.data.shopping_key) {
-                            yoho.goShopingKey({shoppingKey: result.data.shopping_key});
-                        }
-
-                        // TODO: 库存不足 后台暂未实现
-                        // TODO: 商品已下架 后台暂未实现
-                        if (result.code === 200) {
-                            this.cartCount = result.data.goods_count;
-
-                            selector.playAnimation();
-                        } else {
-                            result.message = '添加购物车失败 >_<';
-                        }
-
-                        this.showFeatureSelector = false;
-                        tip(result.message);
-                    });
-                },
-                isApp: yoho.isApp,
+                isApp: true, // TODO yoho.isApp,
                 isSoldOut: false,
                 isReady: false,
                 preferTitle: 'You Might Also Like',
@@ -348,6 +305,7 @@
         components: {
             imageSwiper: require('./image-swiper.vue'),
             featureSelector: require('component/product/feature-selector.vue'),
+            addToCart: require('component/product/cart/add-to-cart.vue'),
             showBox: require('./show-box.vue'),
             topNav: require('./top-nav.vue'),
             shareBottom: require('component/tool/share-bottom.vue'),
@@ -356,9 +314,30 @@
             operationBar: require('./operation-bar.vue')
         },
         methods: {
-            extendSwitch: function (module) {
+            extendSwitch: function(module) {
                 this.extSwitch[module] = !this.extSwitch[module];
             },
+            addCart(sku) {
+                $.post('/product/cart.json', {
+                    productSku: sku.sku,
+                    buyNumber: 1
+                }).then((result)=> {
+                    if (yoho.goShopingKey && result.data && result.data.shopping_key) {
+                        yoho.goShopingKey({shoppingKey: result.data.shopping_key});
+                    }
+
+                    // TODO: 库存不足 后台暂未实现
+                    // TODO: 商品已下架 后台暂未实现
+                    if (result.code === 200) {
+                        this.cartCount = result.data.goods_count;
+                    } else {
+                        result.message = '添加购物车失败 >_<';
+                    }
+
+                    this.showFeatureSelector = false;
+                    tip(result.message);
+                });
+            },
 
             /**
              * 添加到购物车
@@ -392,10 +371,6 @@
                 });
             },
 
-            pickColor(){
-                this.$refs.picker.show();
-            },
-
             share() {
                 yoho.goShare({
                     title: this.title || '',
@@ -469,7 +444,7 @@
 
                         // 是否支持7天无理由退换货
                         $.get(`/product/refundExchange/${data.product_skn}`).then(sd => {
-                            let support = sd.data[data.product_skn] === "N" ? "Y" : "N";
+                            let support = sd.data[data.product_skn] === 'N' ? 'Y' : 'N';
 
                             this.$set('intro.supportRefundExchange', support);
                         });
@@ -536,81 +511,42 @@
         }
     }
 
-    ul.service {
-        font-size: 0;
+    .service {
+        border-top: 1px solid #eee;
+
+        ul {
+            font-size: 0;
+            height: 108px;
+            width: 700px;
+            transform-origin: left;
+            transform: scale(0.985);
+        }
 
         li {
-            font-size: 24px;
-            width: 195px;
-            line-height: 22px;
+            font-size: 20px;
+            width: 200px;
             text-align: center;
+            line-height: 108px;
+            height: 108px;
+            overflow: hidden;
             display: inline-block;
+            color: #b0b0b0;
 
             i.icon {
                 margin-right: 6px;
             }
 
-            &.return {
-                width: 300px;
-                border-left: 1px solid #eee;
-                border-right: 1px solid #eee;
+            &:first-child {
+                text-align: left;
             }
-        }
-    }
-
-    .add-cart {
-        .cart-detail {
-            font-size: 0;
-
-            li {
-                position: relative;
-                display: inline-block;
-                width: 50%;
-                font-size: 32px;
-
-                .icon {
-                    position: absolute;
-                    font-size: 40px;
-
-                    &.color {
-                        right: 25px;
-                    }
-
-                    &.size {
-                        right: 0;
-                    }
-                }
-
-                .icon-sort-up {
-                    top: 14px;
-                }
-
-                .icon-sort-down {
-                    top: -10px;
-                }
-
-                &:first-child {
-                    padding-right: 25px;
-                    border-right: 1px solid #e0e0e0;
-                }
-
-                &:last-child {
-                    padding-left: 30px;
-                }
 
+            &:last-child {
+                text-align: right;
             }
-        }
 
-        .add-btn {
-            display: inline-block;
-            width: 100%;
-            height: 85px;
-            color: #fff;
-            font-size: 32px;
-            text-align: center;
-            line-height: 82px;
-            background-color: #000;
-            border: 1px solid #7a7a7a;
+            &.return {
+                width: 300px;
+            }
         }
     }
 

@@ -152,7 +152,7 @@ array-differ@^1.0.0:
   version "1.0.0"
   resolved "http://npm.yoho.cn/array-differ/-/array-differ-1.0.0.tgz#eff52e3758249d33be402b8bb8e564bb2b5d4031"
 
-array-find-index@^1.0.1:
+array-find-index@^1.0.1, array-find-index@^1.0.2:
   version "1.0.2"
   resolved "http://npm.yoho.cn/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
 
@@ -263,7 +263,7 @@ async@^1.5.2:
   version "1.5.2"
   resolved "http://npm.yoho.cn/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
 
-async@^2.1.2, async@^2.4.1:
+async@^2.1.2, async@^2.1.5, async@^2.4.1:
   version "2.5.0"
   resolved "http://npm.yoho.cn/async/-/async-2.5.0.tgz#843190fd6b7357a0b9e1c956edddd5ec8462b54d"
   dependencies:
@@ -1310,6 +1310,15 @@ clone-buffer@^1.0.0:
   version "1.0.0"
   resolved "http://npm.yoho.cn/clone-buffer/-/clone-buffer-1.0.0.tgz#e3e25b207ac4e701af721e2cb5a16792cac3dc58"
 
+clone-deep@^0.3.0:
+  version "0.3.0"
+  resolved "http://npm.yoho.cn/clone-deep/-/clone-deep-0.3.0.tgz#348c61ae9cdbe0edfe053d91ff4cc521d790ede8"
+  dependencies:
+    for-own "^1.0.0"
+    is-plain-object "^2.0.1"
+    kind-of "^3.2.2"
+    shallow-clone "^0.1.2"
+
 clone-function@>=1.0.1:
   version "1.0.6"
   resolved "http://npm.yoho.cn/clone-function/-/clone-function-1.0.6.tgz#428471937750bca9c48ecbfbc16f6e232f74a03d"
@@ -2806,6 +2815,10 @@ flatten@^1.0.2:
   version "1.0.2"
   resolved "http://npm.yoho.cn/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
 
+for-in@^0.1.3:
+  version "0.1.8"
+  resolved "http://npm.yoho.cn/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"
+
 for-in@^1.0.1:
   version "1.0.2"
   resolved "http://npm.yoho.cn/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -2816,6 +2829,12 @@ for-own@^0.1.4:
   dependencies:
     for-in "^1.0.1"
 
+for-own@^1.0.0:
+  version "1.0.0"
+  resolved "http://npm.yoho.cn/for-own/-/for-own-1.0.0.tgz#c63332f415cedc4b04dbfe70cf836494c53cb44b"
+  dependencies:
+    for-in "^1.0.1"
+
 foreach@^2.0.5:
   version "2.0.5"
   resolved "http://npm.yoho.cn/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
@@ -3686,6 +3705,12 @@ is-plain-obj@^1.0.0:
   version "1.1.0"
   resolved "http://npm.yoho.cn/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
 
+is-plain-object@^2.0.1:
+  version "2.0.4"
+  resolved "http://npm.yoho.cn/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
+  dependencies:
+    isobject "^3.0.1"
+
 is-posix-bracket@^0.1.0:
   version "0.1.1"
   resolved "http://npm.yoho.cn/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz#3334dc79774368e92f016e6fbc0a88f5cd6e6bc4"
@@ -3758,6 +3783,10 @@ isobject@^2.0.0:
   dependencies:
     isarray "1.0.0"
 
+isobject@^3.0.1:
+  version "3.0.1"
+  resolved "http://npm.yoho.cn/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
+
 isstream@0.1.x, isstream@~0.1.2:
   version "0.1.2"
   resolved "http://npm.yoho.cn/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -3894,7 +3923,13 @@ kew@~0.7.0:
   version "0.7.0"
   resolved "http://npm.yoho.cn/kew/-/kew-0.7.0.tgz#79d93d2d33363d6fdd2970b335d9141ad591d79b"
 
-kind-of@^3.0.2:
+kind-of@^2.0.1:
+  version "2.0.1"
+  resolved "http://npm.yoho.cn/kind-of/-/kind-of-2.0.1.tgz#018ec7a4ce7e3a86cb9141be519d24c8faa981b5"
+  dependencies:
+    is-buffer "^1.0.2"
+
+kind-of@^3.0.2, kind-of@^3.2.2:
   version "3.2.2"
   resolved "http://npm.yoho.cn/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
   dependencies:
@@ -3928,6 +3963,10 @@ layout@~2.2.0:
   dependencies:
     bin-pack "~1.0.1"
 
+lazy-cache@^0.2.3:
+  version "0.2.7"
+  resolved "http://npm.yoho.cn/lazy-cache/-/lazy-cache-0.2.7.tgz#7feddf2dcb6edb77d11ef1d117ab5ffdf0ab1b65"
+
 lazy-cache@^1.0.3:
   version "1.0.4"
   resolved "http://npm.yoho.cn/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
@@ -3992,7 +4031,7 @@ loader-utils@1.0.x, loader-utils@^1.0.2:
     emojis-list "^2.0.0"
     json5 "^0.5.0"
 
-loader-utils@^1.1.0:
+loader-utils@^1.0.1, loader-utils@^1.1.0:
   version "1.1.0"
   resolved "http://npm.yoho.cn/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd"
   dependencies:
@@ -4201,6 +4240,10 @@ lodash.some@^4.2.2:
   version "4.6.0"
   resolved "http://npm.yoho.cn/lodash.some/-/lodash.some-4.6.0.tgz#1bb9f314ef6b8baded13b549169b2a945eb68e4d"
 
+lodash.tail@^4.1.1:
+  version "4.1.1"
+  resolved "http://npm.yoho.cn/lodash.tail/-/lodash.tail-4.1.1.tgz#d2333a36d9e7717c8ad2f7cacafec7c32b444664"
+
 lodash.template@^3.0.0:
   version "3.6.2"
   resolved "http://npm.yoho.cn/lodash.template/-/lodash.template-3.6.2.tgz#f8cdecc6169a255be9098ae8b0c53d378931d14f"
@@ -4443,6 +4486,28 @@ minimist@^1.1.0, minimist@^1.1.3, minimist@^1.2.0:
   version "1.2.0"
   resolved "http://npm.yoho.cn/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
 
+mint-ui@^1.0.2:
+  version "1.0.2"
+  resolved "http://npm.yoho.cn/mint-ui/-/mint-ui-1.0.2.tgz#168318925c59a7da4c3f8ec6d9960e138e55fefc"
+  dependencies:
+    array-find-index "^1.0.2"
+    raf.js "0.0.4"
+    vue-clickoutside "^0.2.0"
+    vue-infinite-scroll "^0.2.3"
+    vue-lazyload "^0.7.1"
+    vue-msgbox "^0.2.14"
+    vue-popup "0.1.13"
+    vue-swipe "^0.2.7"
+    vue-toast-mobile "^0.1.3"
+    wind-dom "0.0.3"
+
+mixin-object@^2.0.1:
+  version "2.0.1"
+  resolved "http://npm.yoho.cn/mixin-object/-/mixin-object-2.0.1.tgz#4fb949441dab182540f1fe035ba60e1947a5e57e"
+  dependencies:
+    for-in "^0.1.3"
+    is-extendable "^0.1.1"
+
 mkdirp@0.5.0:
   version "0.5.0"
   resolved "http://npm.yoho.cn/mkdirp/-/mkdirp-0.5.0.tgz#1d73076a6df986cd9344e15e71fcc05a4c9abf12"
@@ -6469,6 +6534,16 @@ sass-graph@^2.1.1:
     scss-tokenizer "^0.2.3"
     yargs "^7.0.0"
 
+sass-loader@^6.0.6:
+  version "6.0.6"
+  resolved "http://npm.yoho.cn/sass-loader/-/sass-loader-6.0.6.tgz#e9d5e6c1f155faa32a4b26d7a9b7107c225e40f9"
+  dependencies:
+    async "^2.1.5"
+    clone-deep "^0.3.0"
+    loader-utils "^1.0.1"
+    lodash.tail "^4.1.1"
+    pify "^3.0.0"
+
 save-pixels@~2.3.0:
   version "2.3.4"
   resolved "http://npm.yoho.cn/save-pixels/-/save-pixels-2.3.4.tgz#49d349c06b8d7c0127dbf0da24b44aca5afb59fe"
@@ -6616,6 +6691,15 @@ sha.js@^2.4.0, sha.js@^2.4.8:
   dependencies:
     inherits "^2.0.1"
 
+shallow-clone@^0.1.2:
+  version "0.1.2"
+  resolved "http://npm.yoho.cn/shallow-clone/-/shallow-clone-0.1.2.tgz#5909e874ba77106d73ac414cfec1ffca87d97060"
+  dependencies:
+    is-extendable "^0.1.1"
+    kind-of "^2.0.1"
+    lazy-cache "^0.2.3"
+    mixin-object "^2.0.1"
+
 shallow-copy@~0.0.1:
   version "0.0.1"
   resolved "http://npm.yoho.cn/shallow-copy/-/shallow-copy-0.0.1.tgz#415f42702d73d810330292cc5ee86eae1a11a170"
@@ -7163,6 +7247,10 @@ swap-case@^1.1.0:
     lower-case "^1.1.1"
     upper-case "^1.1.1"
 
+swiper@^3.4.2:
+  version "3.4.2"
+  resolved "http://npm.yoho.cn/swiper/-/swiper-3.4.2.tgz#39d6b410b1a39833e1f72d3b72999df5f5e38392"
+
 synesthesia@^1.0.1:
   version "1.0.1"
   resolved "http://npm.yoho.cn/synesthesia/-/synesthesia-1.0.1.tgz#5ef95ea548c0d5c6e6f9bb4b0d0731dff864a777"
@@ -7562,6 +7650,16 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
+vue-awesome-swiper@^2.5.4:
+  version "2.5.4"
+  resolved "http://npm.yoho.cn/vue-awesome-swiper/-/vue-awesome-swiper-2.5.4.tgz#265a2a3ec2f9830d6b0175ea06784c36a261c54a"
+  dependencies:
+    swiper "^3.4.2"
+
+vue-clickoutside@^0.2.0:
+  version "0.2.0"
+  resolved "http://npm.yoho.cn/vue-clickoutside/-/vue-clickoutside-0.2.0.tgz#a0f16840dd4f29f019bd09d07247c99a581e48e3"
+
 vue-hot-reload-api@^1.2.0:
   version "1.3.3"
   resolved "http://npm.yoho.cn/vue-hot-reload-api/-/vue-hot-reload-api-1.3.3.tgz#54d22d83786a878493f639cc76bca7992a23be46"
@@ -7576,11 +7674,11 @@ vue-html-loader@^1.0.0:
     loader-utils "^1.0.2"
     object-assign "^4.1.0"
 
-vue-infinite-scroll@0.2.3:
+vue-infinite-scroll@0.2.3, vue-infinite-scroll@^0.2.3:
   version "0.2.3"
   resolved "http://npm.yoho.cn/vue-infinite-scroll/-/vue-infinite-scroll-0.2.3.tgz#9eb9fa1972e363e69a572edb66a7a06f5ff8dc42"
 
-vue-lazyload@^0.7.0:
+vue-lazyload@^0.7.0, vue-lazyload@^0.7.1:
   version "0.7.5"
   resolved "http://npm.yoho.cn/vue-lazyload/-/vue-lazyload-0.7.5.tgz#585787eeaf256e764620ad47d2a3eac4301d2da3"
   dependencies:
@@ -7603,12 +7701,22 @@ vue-loader@^8.3.0:
     source-map "^0.5.3"
     vue-template-validator "^1.0.0"
 
+vue-msgbox@^0.2.14:
+  version "0.2.14"
+  resolved "http://npm.yoho.cn/vue-msgbox/-/vue-msgbox-0.2.14.tgz#daf027faf2eeca798de3248e85ae802c87c38540"
+  dependencies:
+    vue-popup "^0.1.13"
+
 vue-picker@0.0.4:
   version "0.0.4"
   resolved "http://npm.yoho.cn/vue-picker/-/vue-picker-0.0.4.tgz#cd4c4b824cdb3bd9060964b73391b9eb4f7eaa2e"
   dependencies:
     raf.js "0.0.4"
 
+vue-popup@0.1.13, vue-popup@^0.1.13:
+  version "0.1.13"
+  resolved "http://npm.yoho.cn/vue-popup/-/vue-popup-0.1.13.tgz#fc03251ec17751b520c79c41ad4c69f8889833db"
+
 vue-style-loader@^1.0.0:
   version "1.0.0"
   resolved "http://npm.yoho.cn/vue-style-loader/-/vue-style-loader-1.0.0.tgz#abeb7bd0f46313083741244d3079d4f14449e049"
@@ -7621,6 +7729,12 @@ vue-swipe@0.2.6:
   dependencies:
     wind-dom "0.0.3"
 
+vue-swipe@^0.2.7:
+  version "0.2.7"
+  resolved "http://npm.yoho.cn/vue-swipe/-/vue-swipe-0.2.7.tgz#4c23ee982953a2c7e96dace55b1fafde518ab719"
+  dependencies:
+    wind-dom "0.0.3"
+
 vue-template-compiler@^2.3.3:
   version "2.4.1"
   resolved "http://npm.yoho.cn/vue-template-compiler/-/vue-template-compiler-2.4.1.tgz#20115cf8714f222f9be4111ec75b079a1c9b8197"
@@ -7634,6 +7748,10 @@ vue-template-validator@^1.0.0:
   dependencies:
     chalk "^1.1.1"
 
+vue-toast-mobile@^0.1.3:
+  version "0.1.3"
+  resolved "http://npm.yoho.cn/vue-toast-mobile/-/vue-toast-mobile-0.1.3.tgz#ab683c3ac5af69da8f399b048f692a0f78b03a6f"
+
 vue-touch@1.1.0:
   version "1.1.0"
   resolved "http://npm.yoho.cn/vue-touch/-/vue-touch-1.1.0.tgz#f69da3b4bf033f3f7bcf5864011a6b4d4bb596b9"