updata_version

src/App.vue

@@ -72,7 +72,10 @@
     @import '~vux/src/styles/reset.less';
     @import '~vux/src/styles/1px.less';
     @import '~vux/src/styles/close.less';
-
+    #app {
+        width: 750px;
+        margin: 0 auto;
+    }
     body {
         background-color: #F7F7F7;
         font-size: 24px;

src/components/blocks/GridList.vue

@@ -21,7 +21,12 @@
         components: {
             Scroller,
         },
-        props: ['special', 'proxy'],
+        computed:{
+            posId(){
+                return 'special'+this.pos;
+            }
+        },
+        props: ['special', 'proxy','pos'],
         render(createElement){
 
             let special = this.special;
@@ -47,7 +52,12 @@
 
 
            return createElement(
-                "div",{},
+                "div",{
+                   attrs:{
+                       id:this.posId,
+                       name:this.posId
+                   }
+               },
                 ret);
         }
     }

src/components/blocks/HomeGrid.vue

@@ -7,8 +7,14 @@
         },
         props: [
             "special",
-            "proxy"
+            "proxy",
+            'pos'
         ],
+        computed:{
+            posId(){
+                return 'special'+this.pos;
+            }
+        },
         render(createElement){
             let childs = [];
             let proxy = this.proxy;
@@ -36,7 +42,12 @@
                     wrap: "wrap"
                 }
             }, childs);
-            return createElement("div", {}, [grid]);
+            return createElement("div", {
+                attrs:{
+                    id:this.posId,
+                    name:this.posId
+                }
+            }, [grid]);
         },
         components: {}
     }

src/components/blocks/anchors.vue

@@ -0,0 +1,52 @@
+<template>
+    <div class="anchors_tabs">
+        <tab active-color="#ffffff" defaultColor="rgba(247,247,247,0.8)" custom-bar-width="0">
+            <tab-item v-for="handler in datas" class="anchor_tab_item" :selected="handler.ElementPos[0] <= scroll + 188 && scroll + 188 < handler.ElementPos[1]"  :key="handler" :data-pos="handler.pos" @on-item-click="anchors_handler(handler.pos)">{{handler.title}}</tab-item>
+        </tab>
+    </div>
+</template>
+<script>
+    import { Tab, TabItem } from 'vux';
+    export default {
+        props:['tabs','scroll','anchorElementsPos'],
+        methods:{
+            anchors_handler(special_id){
+                this.$emit('anchor_click',special_id);
+            }
+        },
+        computed:{
+            datas(){
+                let tabs = this.tabs;
+                let array = [];
+                this.anchorElementsPos[0] = 0;
+                this.anchorElementsPos.push(document.body.scrollHeight);
+                for(let i =0;i<tabs.length;i++) {
+                    let a = {};
+                    a.pos = tabs[i].pos;
+                    a.title = tabs[i].title;
+                    a.ElementPos = [this.anchorElementsPos[i],this.anchorElementsPos[i+1]];
+                    array.push(a);
+                }
+                return array;
+            }
+        },
+        components: {
+            Tab,
+            TabItem
+        }
+    }
+</script>
+<style scoped>
+    .anchors_tabs {
+        position: relative;
+        width: 750px;
+        overflow-y: auto;
+        background-color: #000000;
+    }
+    .vux-tab .vux-tab-item.vux-tab-selected {
+        background: red;
+    }
+    .vux-tab {
+        background-color: #000000;
+    }
+</style>

src/components/blocks/block_list.vue

@@ -2,6 +2,8 @@
     import Proxy from './util/proxy.js'
     import BlockUtil from './util/blockUtil.js'
     import {LoadMore} from 'vux'
+    import Anchors from '../blocks/anchors.vue';
+    import DownLoadApp from '../blocks/fixed_download_app.vue';
     export default
     {
         props: ['datasLink', "hot_id", "brand_id", "keyword", "special_id"],
@@ -53,6 +55,7 @@
             {
                 this.$store.commit('updateLoadingStatus', {isLoading: true});
                 let _self = this;
+                if(this.isload){return;}
                 this.isload = true;
                 this.$http.jsonp(this.datasLink + '&curpage=' + this.curpage, {_timeout: 5000}).then(function (res) {
                     this.isload = false;
@@ -65,9 +68,6 @@
                         });
                         return;
                     }
-                    if (_self.proxy.specialList.length <= 0) {
-                        _self.loadMoreTip = "暂无数据";
-                    }
                     window.removeEventListener('scroll', _self.loadMoreCallback);
                     let body = JSON.parse(res.bodyText);
                     _self.hasmore = body.datas['mobile_page'].hasmore;
@@ -77,12 +77,37 @@
                             window.addEventListener('scroll', _self.loadMoreCallback);
                         }, 1000)
                     }
-                    _self.proxy.addData(res.body.datas);
+                    _self.proxy.addData(res.body.datas,this.curpage == 1);
                     _self.proxy.setTag("SPECIAL_ID", this.special_id);
                     _self.proxy.setTag("HOT_ID", this.hot_id);
                     _self.proxy.setTag("BRAND_ID", this.brand_id);
                     _self.proxy.setTag("WORDS", this.keyword);
                     this.$store.commit('updateLoadingStatus', {isLoading: false});
+
+
+                    let lastPos = [];
+                    let elementPos = setInterval(function(){
+                        if(!_self.proxy.tabs || _self.proxy.tabs.length <= 0) {
+                            clearInterval(elementPos);
+                            return;
+                        }
+                        let tabs = _self.proxy.tabs;
+                        if(document.getElementById('special'+tabs[tabs.length - 1].pos)) {
+                            let posArray = [];
+                            for(let i=0;i<tabs.length;i++) {
+                                posArray.push(document.getElementById('special'+tabs[i].pos).offsetTop);
+                            }
+                            if(posArray.toString() == lastPos.toString()) {
+                                clearInterval(elementPos);
+                            }
+                            else {
+                                lastPos = [];
+                                lastPos = posArray.concat(lastPos);
+                            }
+                            _self.anchorElementsPos = posArray;
+                        }
+                    },1000);
+
                 }, (err) => {
                     this.$vux.toast.show({
                         type: 'text',
@@ -99,9 +124,16 @@
                 if (!this.isload && (this.documentHeight - (this.scrollTop + this.windowHeight) <= 100)) {
                     this.getDatas();
                 }
-//                if (!this.isload && (this.scrollTop + this.windowHeight >= this.documentHeight)) {
-//                    this.getDatas();
-//                }
+            },
+            animatePos(special_id){
+                let anchor_pos = 0;
+                if ((document.documentElement.scrollTop || document.body.scrollTop) <= 0) {
+                    anchor_pos = (document.getElementById('special' + special_id).offsetTop)-188;
+                }
+                else {
+                    anchor_pos = (document.getElementById('special' + special_id).offsetTop)-88;
+                }
+                window.scrollTo(0, anchor_pos);
             }
         },
         data()
@@ -117,7 +149,9 @@
                 documentHeight: 0,
                 windowHeight: 0,
                 isload: false,
-                loadMoreTip: "加载中"
+                loadMoreTip: "加载中",
+                windowScroll:0,
+                anchorElementsPos:[]
             }
         }
         ,
@@ -141,6 +175,33 @@
                 }, [loadMore]);
             }
             else {
+                let anchors = '';
+                let fixedTop='';
+                  if(_self.proxy.hasAnchors()) {
+                      window.addEventListener('scroll',function(e){
+                          _self.windowScroll = document.body.scrollTop || document.documentElement.scrollTop;
+                      });
+                      anchors = createElement(Anchors,{
+                          props:{
+                              tabs:_self.proxy.tabs,
+                              scroll:_self.windowScroll,
+                              anchorElementsPos:_self.anchorElementsPos
+                          },
+                          on:{
+                              anchor_click:_self.animatePos
+                          }
+                      })
+                  }
+                if(this.$route.query["is_special"] == "true" || this.$route.query["is_special"] == true) {
+                    fixedTop = createElement('div',{
+                        'class': {
+                            fixedTop:true
+                        }
+                    },[<DownLoadApp/>,anchors]);
+                }
+
+
+
                 let loadMore = createElement(LoadMore, {
                     props: {
                         tip: "正在为您全力加载",
@@ -152,27 +213,37 @@
                 });
                 let loadMoreBox = createElement('div', {
                     style: {
-                        backgroundColor: "#f9f9f9"
+                        backgroundColor: "#ffffff"
                     }
                 }, [loadMore]);
+
                 if (_self.proxy.specialList[0] == null) {
-                    return <div style={{background: '#F7F7F7'}}><LoadMore showLoading={false} tip="暂无数据"
-                                                                          backgroundColor="#F7F7F7"></LoadMore></div>
+                    return  <div style={{background: '#F7F7F7'}}>
+                                <LoadMore showLoading={false} tip="暂无数据" backgroundColor="#F7F7F7"></LoadMore>
+                            </div>
                 }
+                let specialList_pos = 0;
                 _self.proxy.specialList.map(function (special) {
-                    let comp = BlockUtil.createBlockComp(createElement, special, _self.proxy);
+                    let comp = BlockUtil.createBlockComp(createElement, special, _self.proxy,specialList_pos);
                     if (comp) {
                         specialArray.push(comp);
+                        specialList_pos++;
                     }
                 });
                 if (this.hasmore) {
                     specialArray.push(loadMoreBox);
                 }
+
+
+
                 return createElement('div', {
+                    "class":{
+                        padding_anchors:this.$route.query["special_id"]
+                    },
                     style: {
-                        backgroundColor: "#f9f9f9"
+                        backgroundColor: "#f9f9f9",
                     }
-                }, specialArray);
+                }, [fixedTop,specialArray]);
             }
         }
     }
@@ -190,4 +261,14 @@
         min-width: 40px;
         min-height: 40px;
     }
+    .fixedTop {
+        position: -webkit-sticky;
+        position: sticky;
+        top: 0;
+        width: 750px;
+        z-index: 999;
+    }
+    .padding_anchors {
+        /*margin-top:188px;*/
+    }
 </style>

src/components/blocks/comment.vue

@@ -0,0 +1,156 @@
+<template>
+    <div class="comment">
+        <div class="user">
+            <div class="member_avatar f_left">
+                <img :src="this.comments.member_avatar">
+            </div>
+            <div class="name f_left">{{this.comments.nickname}}</div>
+            <div class="scores f_right">
+                <p v-html="this.scoresHTML"></p>
+                <p class="comment_time">{{this.comment_time}}</p>
+            </div>
+        </div>
+        <div class="spec">规格:{{this.comments.goods_spec}}</div>
+        <div class="content">{{this.comments.content}}</div>
+        <div class="content_img" v-if="this.comments.images !== null">
+            <img v-for="image in this.comments.images" @click="preview_show" :key="image" :src="image">
+        </div>
+        <div class="content" v-if="this.comments.explain !== null">商家回复：{{this.comments.explain}}</div>
+        <span v-if="this.show_line" class="line"></span>
+        <div class="image_pop" @click="preview_hide" v-show="image_pop_show">
+            <img :src="preview">
+        </div>
+    </div>
+</template>
+<script>
+    export default {
+        data () {
+            return {
+                scoresHTML:'',
+                preview:'',
+                image_pop_show:false
+            }
+        },
+        mounted(){
+            let scores_num = this.comments.scores;
+            let html = '';
+            for(let i = 0;i < scores_num;i++) {
+                html += '<span class="star"></span>';
+            }
+            this.scoresHTML = html;
+        },
+        props:['comments','show_line'],
+        computed:{
+            comment_time(){
+                let add_time = this.comments.addtime;
+                let date = new Date(add_time*1000);
+                let year = date.getFullYear();
+                let month = date.getMonth()+1;
+                let day = date.getDate();
+                return `${year}.${month}.${day}`;
+            }
+        },
+        methods:{
+            preview_show(event){
+                let el = event.currentTarget;
+                this.image_pop_show = true;
+                this.preview = el.getAttribute('src');
+            },
+            preview_hide(){
+                this.preview = '';
+                this.image_pop_show = false;
+            }
+        },
+        components: {}
+    }
+</script>
+<style scoped>
+    .image_pop {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0,0,0,0.7);
+        z-index: 10;
+        text-align: center;
+        display: -webkit-box;
+        -webkit-box-pack: center;
+        -webkit-box-align: center;
+    }
+    .comment {
+        position: relative;
+        color: #a7a7a7;
+        padding-top: 28px;
+        padding-bottom: 20px;
+    }
+    .line {
+        content: " ";
+        position: absolute;
+        bottom:0;
+        right: 0;
+        width: 726px;
+        height: 1px;
+        border-bottom: 1px solid #C7C7C7;
+        color: #C7C7C7;
+        -webkit-transform-origin: 0 100%;
+        transform-origin: 0 100%;
+        -webkit-transform: scaleY(0.5);
+        transform: scaleY(0.5);
+    }
+    .f_left {
+        float: left;
+    }
+    .f_right {
+        float: right;
+    }
+    .member_avatar {
+        margin-right: 20px;
+    }
+    .member_avatar img {
+        width: 72px;
+        height: 72px;
+        border-radius: 50px;
+    }
+    .user {
+        overflow: hidden;
+        margin-bottom: 18px;
+        padding: 0 24px;
+    }
+    .spec,.content {
+        padding: 0 24px;
+        margin-bottom: 10px;
+    }
+    .content {
+        margin-bottom: 0;
+        font-size: 22px;
+        color: #000000;
+        line-height: 36px;
+        padding-bottom: 10px;
+    }
+    .spec,.comment_time {
+        font-size: 20px;
+    }
+    .comment_time {
+        text-align: right;
+    }
+    .name {
+        font-size: 28px;
+    }
+    .content_img img {
+        display: inline-block;
+        width: 116px;
+        margin-left: 24px;
+    }
+</style>
+<style>
+    .star {
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        margin-left: 4px;
+        background: url("../../assets/star.png") no-repeat;
+        background-size: 100%;
+        vertical-align: middle;
+    }
+</style>

src/components/blocks/divider.vue

@@ -17,6 +17,7 @@
                 img = createElement('img', {
                     attrs: {
                         src: special.bg_data,
+                        name:this.posId
                     },
                     style: {
                         height: height

src/components/blocks/empty_bock.vue

@@ -6,8 +6,14 @@
         },
         props: [
             "special",
-            "proxy"
+            "proxy",
+            'pos'
         ],
+        computed:{
+            posId(){
+                return 'special'+this.pos;
+            }
+        },
         render(createElement){
             let proxy = this.proxy;
             let scale = this.special.scale;
@@ -15,7 +21,12 @@
             this.special.items.forEach(function (item) {
                 ret.push(BlockUtil.createBlockItemComp(createElement, scale, item, proxy,''));
             });
-            return createElement("div", {}, ret);
+            return createElement("div", {
+                attrs:{
+                    id:this.posId,
+                    name:this.posId
+                }
+            }, ret);
         }
     }
 </script>

src/components/blocks/fixed_download_app.vue

@@ -0,0 +1,99 @@
+<template>
+    <div :class="{'fixed_bottom':true,'hidden':isScroll}">
+        <span class="logo"></span>
+        <div class="label">
+            <p>熊猫美妆</p>
+            <p>下载APP即可得更多奖励</p>
+        </div>
+        <a :href="app_download_link" class="download_app_btn" id="download_app">打开APP</a>
+    </div>
+</template>
+<script>
+    import UserAgent from '../../lib/userAgent';
+    export default {
+        data () {
+            return {
+                isScroll:false
+            }
+        },
+        mounted(){
+            let top = document.documentElement.scrollTop || document.body.scrollTop;
+            if(top > 100) {
+                this.isScroll = true;
+            }
+            window.addEventListener('scroll',this.isShow);
+        },
+        beforeDestroy(){
+            window.removeEventListener('scroll',this.isShow);
+        },
+        computed:{
+            app_download_link(){
+                if(UserAgent.iOS()) {
+                    return 'itms-apps://itunes.apple.com/app/id945609424';
+                }
+                if(UserAgent.Android()) {
+                    return 'http://p.lrlz.com/hfive/android_down';
+                }
+            }
+        },
+        methods:{
+            isShow:function(e){
+                let top = document.documentElement.scrollTop || document.body.scrollTop;
+                if (top > 100) {
+                    this.isScroll = true;
+                }
+                else {
+                    this.isScroll = false;
+                }
+            }
+        }
+    }
+</script>
+<style scoped>
+    .fixed_bottom {
+        position: relative;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100px;
+        display: -webkit-box;
+        -webkit-box-align: center;
+        background: rgba(51, 51, 51, 0.9);
+        z-index: 999;
+        /*-webkit-transition: height .3s ease;*/
+        overflow: hidden;
+    }
+
+    .fixed_bottom .logo {
+        display: block;
+        width: 72px;
+        height: 72px;
+        background: url("../../assets/logo.png") no-repeat;
+        background-size: 100% 100%;
+        margin-right: 20px;
+        margin-left: 31px;
+    }
+
+    .fixed_bottom .label {
+        font-size: 24px;
+        width: 454px;
+        line-height: 30px;
+        color: #ffffff;
+    }
+
+    .fixed_bottom a {
+        display: block;
+        width: 140px;
+        height: 56px;
+        line-height: 56px;
+        text-align: center;
+        font-size: 24px;
+        background: #FE4F4C;
+        color: #fff;
+        border-radius: 5px;
+    }
+
+    .hidden {
+        height: 0;
+    }
+</style>

src/components/blocks/goods_item.vue

@@ -1,39 +1,32 @@
 <template>
     <div class="goods_box">
         <router-link :to="{ path: '/goods_detail', query: { goods_id: summery['goods_id'] }}">
-            <div class="goods">
-                <div class="goods_img">
+            <div class="goods_item">
+                <div class="thumbnail">
                     <x-img :src="item.image" :default-src="defaultImg"></x-img>
                 </div>
                 <div class="goods_msg">
-                    <p class="text_left goods_name">{{summery["goods_jingle"]}}</p>
-                    <p class="text_left desc">{{item.title}}</p>
+                    <p class="text_left goods_name">{{item.title}}</p>
+                    <p class="text_left goods_desc">{{summery["goods_jingle"]}}</p>
 
                     <div class="price_box" v-if="summery['act_type'] == 0">
-                        <div class="f_left">
-                            <p class="text_left desc">专柜价{{summery["goods_price"]}}</p>
-                            <p class="text_left bonus_price"><span class="bonus_icon"></span>{{summery["bonus_price"]}}</p>
-                        </div>
-                        <div class="f_right discount">
-                            <p class="discounts_box"><span class="discounts">{{discount}}</span></p>
-                            <p class="conserve">立省{{conserve}}元</p>
+                        <div class="bonus_price"><span class="symbols">￥</span>{{summery["bonus_price"]}}</div>
+                        <div class="price_desc">
+                            <span class="f_left">专柜价{{summery["goods_price"]}}</span>
+                            <span class="f_right">红包抵{{conserve}}元</span>
                         </div>
                     </div>
 
                     <div class="price_box" v-if="summery['act_type'] == 1">
-                        <p class="text_right desc">专柜价{{summery["goods_price"]}}</p>
-                        <div>
-                            <span class="f_left desc" style="margin-top: 20px;position: relative;top: 3px;">仅剩{{grouptime}}天</span>
-                            <div class="f_right">
-                                <span class="desc groupbuy_label">抢购特价</span>
-                                <span class="bonus_price">¥{{parseFloat(summery["goods_promotion_price"])}}</span>
-                            </div>
+                        <div class="bonus_price"><span class="symbols">￥</span>{{parseFloat(getgroupbuy.promotion_price)}}</div>
+                        <div class="price_desc">
+                            <span class="f_left">专柜价{{summery["goods_price"]}}</span>
+                            <span class="f_right">仅剩{{grouptime}}天</span>
                         </div>
                     </div>
 
-                    <div class="badge" v-if="summery['act_type'] == 1" style="background:#FF4E4E;">抢</div>
-                    <div class="badge" v-if="summery['is_new']&&summery['act_type'] == 0" style="background:#3CB638;">新</div>
-                    <div class="badge" v-if="summery['act_type'] == 2" style="background:#FF4E4E;">限</div>
+                    <div class="badge_box" v-html="act_type"></div>
+                    <div class="opgoods" v-if="summery['is_opgoods']">{{summery['opgoods_shortdesc']}}</div>
                 </div>
             </div>
         </router-link>
@@ -53,6 +46,9 @@
         components:{
             XImg
         },
+        created(){
+        },
+
         props:['item','proxy'],
         computed:{
             getgroupbuy(){
@@ -79,32 +75,45 @@
             conserve(){
                 let num = this.summery["goods_price"]-this.summery["bonus_price"];
                 return num.toFixed(2);
+            },
+            act_type(){
+                if(this.summery['goods_storage'] <= 0) {
+                    return '<div class="badge" style="background:#9B9B9B;">已经售罄</div>';
+                }
+                if(this.summery['act_type'] == 1){
+                    return '<div class="badge" style="background:#FF4E4E;">抢购特价</div>';
+                }
+                if(this.summery['is_new']&&this.summery['act_type'] == 0){
+                    return '<div class="badge" style="background:#000000;">熊猫新品</div>';
+                }
+                if(this.summery['act_type'] == 2){
+                    return '<div class="badge" style="background:#FF4E4E;">限时特价</div>';
+                }
             }
         }
     }
 </script>
 <style>
     .goods_box {
-        width: 45.5%;
-        position: relative;
-        margin-top: 2.5%;
+        width: 363.75px;
         background: #fff;
-        margin-left: 3%;
+        margin-left: 7.5px;
+        margin-top: 7.5px;
     }
-    .goods .conserve {
+    .goods_item .conserve {
         color: #fff;
         font-size: 18px;
         padding:4px;
         border-bottom-right-radius: 11px;
         border-bottom-left-radius: 11px;
     }
-    .goods .discounts {
+    .goods_item .discounts {
         font-size: 28px;
         color: #FF4E4E;
         vertical-align: middle;
         line-height: 1.3;
     }
-    .goods .discounts_box {
+    .goods_item .discounts_box {
         font-size: 18px;
         color: #FF4E4E;;
         text-align: center;
@@ -112,10 +121,10 @@
         border-top-right-radius: 9px;
         border-top-left-radius: 9px;
     }
-    .goods .goods_msg {
+    .goods_item .goods_msg {
         padding: 12px;
     }
-    .goods .discount {
+    .goods_item .discount {
         border: 1px solid #FF4E4E;
         margin-right: 4px;
         background: #FF4E4E;
@@ -123,50 +132,85 @@
         margin-top: 6px;
     }
     .price_box {
-        margin-top: 15px;
         overflow: hidden;
     }
-    .goods .badge {
+    .goods_item .badge {
+        box-sizing: border-box;
         position: absolute;
-        top: 22px;
-        right: 22px;
+        top: 18px;
+        left: 18px;
         border-radius: 100px;
-        padding: 6px 6px;
+        padding-top: 11px;
+        padding-left: 4px;
         color: #fff;
-        font-size: 22px;
-        width: 30px;
-        height: 30px;
+        font-size: 17px;
+        width: 60px;
+        height: 60px;
         text-align: center;
-        line-height: 30px;
+        line-height: 19px;
+        letter-spacing: 2px;
     }
     .goods_name {
         font-size: 22px;
+        color: #4A4A4A;
         white-space:nowrap;
         text-overflow:ellipsis;
         -o-text-overflow:ellipsis;
         overflow:hidden;
     }
-    .desc {
-        font-size: 20px;
-        white-space:nowrap;
-        text-overflow:ellipsis;
-        -o-text-overflow:ellipsis;
-        overflow:hidden;
+    .goods_desc {
+        font-size: 22px;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        color: #7E7E7E;
+        min-height: 56px;
+        line-height: 28px;
+    }
+    .price_desc {
+        font-size: 18px;
         color: #7E7E7E;
     }
+    .price_desc span:first-child {
+        position: relative;
+    }
+    .price_desc span:first-child:after {
+        position: absolute;
+        left: 0;
+        top: 50%;
+        margin-top: -1px;
+        content: "";
+        width: 100%;
+        border-bottom: 2px solid #7E7E7E;
+    }
     .f_left {
         float: left;
     }
     .f_right {
         float: right;
     }
-    .goods_img {
+    .goods_item {
+        position: relative;
+    }
+    .thumbnail {
+        height: 370px;
         font-size: 0;
+        position: relative;
     }
-    .goods img {
+    .thumbnail:after {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        content: "";
         width: 100%;
-        max-height: 340px;
-        min-height: 340px;
+        height: 1px;
+        background: #9B9B9B;
+        opacity: 0.3;
+    }
+    .goods_item img {
+        width: 100%;
+        max-height: 370px;
     }
     .bonus_icon {
         display: inline-block;
@@ -177,13 +221,28 @@
         margin-right: 6px;
     }
     .bonus_price {
-        font-size: 40px;
+        font-size: 28px;
         color: #FF4E4E;
     }
+    .bonus_price .symbols {
+        font-size: 23px;
+    }
     .text_right {
         text-align: right;
     }
     .groupbuy_label {
         color: #FF4E4E;
     }
+    .opgoods {
+        position: absolute;
+        bottom: 215px;
+        left: 0;
+        padding: 0 14px;
+        color: #fff;
+        font-size: 20px;
+        text-align: center;
+        background: #feacaa;
+        border-bottom-right-radius: 20px;
+        border-top-right-radius: 20px;
+    }
 </style>

src/components/blocks/goods_list.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="{special_goods_list:specialGoodsStyle}">
+    <div :class="{special_goods_list:specialGoodsStyle}" :id="posId">
         <titles :special="special"></titles>
         <div class="goods_items">
             <goods-item v-for="goods in special.items" :key="goods" :item="goods" :proxy="proxy"></goods-item>
@@ -11,7 +11,7 @@
     import GoodsItem from './goods_item.vue'
     import Titles from './title.vue'
     export default {
-        props : ['special','proxy'],
+        props : ['special','proxy','pos'],
         components:{
             GoodsItem,
             Titles
@@ -21,6 +21,9 @@
                 if(this.$route.query['is_special'] == 'false' || this.$route.query['is_special'] == false) {
                     return true;
                 }
+            },
+            posId(){
+                return 'special'+ this.pos;
             }
         }
     }
@@ -33,10 +36,10 @@
         flex-flow: row wrap;
         color: #000;
         background: #f9f9f9;
-        margin-top: -2.5%;
+        margin-top: -7.5px;
     }
     .special_goods_list {
-        padding-top: 2.5%;
+        margin-top: 7.5px;
     }
 
 </style>

src/components/blocks/goods_top.vue

@@ -13,22 +13,18 @@
                         </div>
                         <div class="price_box" v-if="goods['act_type'] == 0">
                             <div class="f_left">
-                                <p class="text_left desc">专柜价{{goods["goods_price"]}}</p>
-                                <p class="text_left bonus_price"><span class="bonus_icon"></span>{{goods["bonus_price"]}}</p>
-                            </div>
-                            <div class="f_right discount">
-                                <p class="discounts_box"><span class="discounts">{{discount}}</span></p>
-                                <p class="conserve">立省{{(goods["goods_price"] - goods["bonus_price"]).toFixed(2)}}元</p>
+                                <p class="text_left bonus_price">￥{{goods["bonus_price"]}}<span></span></p>
+                                <p class="text_left desc"><span><s></s>专柜价{{goods["goods_price"]}}</span></p>
                             </div>
+                            <!--<div class="f_right discount">-->
+                                <!--<p class="discounts_box"><span class="discounts">{{discount}}</span></p>-->
+                                <!--<p class="conserve">立省{{(goods["goods_price"] - goods["bonus_price"]).toFixed(2)}}元</p>-->
+                            <!--</div>-->
                         </div>
                         <div class="price_box" v-if="goods['act_type'] == 1">
-                            <p class="text_right desc">专柜价{{goods["goods_price"]}}</p>
-                            <div>
-                                <span class="f_left desc" style="margin-top: 20px;">仅剩{{grouptime}}天</span>
-                                <div class="f_right">
-                                    <span class="desc groupbuy_label">抢购特价</span>
-                                    <span class="bonus_price">¥{{goods["goods_promotion_price"]}}</span>
-                                </div>
+                            <div class="f_left">
+                                <p class="bonus_price">¥{{goods["goods_promotion_price"]}}</p>
+                                <p class="text_left desc"><span><s></s>专柜价{{goods["goods_price"]}}</span><span class="f_right">仅剩{{grouptime}}天</span></p>
                             </div>
                         </div>
                     </flexbox-item>
@@ -103,6 +99,7 @@
     }
 </script>
 <style scoped>
+
     .top_bg {
         position: absolute;
         top: 10px;
@@ -147,4 +144,20 @@
    .vux-x-icon {
        color: red;
    }
+    .desc {
+        color: #bebebe;
+        font-size: 20px;
+        width: 320px;
+    }
+    .desc span:first-child {
+        position: relative;
+    }
+    .desc span:first-child s {
+        position: absolute;
+        width: 100%;
+        height: 2px;
+        top: 50%;
+        left: 0;
+        background: #bebebe;
+    }
 </style>

src/components/blocks/home2.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :id="posId">
     <flexbox :gutter="1">
       <flexbox-item :class="{'vux-1px-r':true}"><router-link :to="blockList[0].url"><img :src="blockList[0].image"/></router-link></flexbox-item>
       <flexbox-item>
@@ -16,7 +16,7 @@
   import { Flexbox, FlexboxItem } from 'vux'
   import BlockUtil from './util/blockUtil'
   export default {
-      props: ['special', 'proxy'],
+      props: ['special', 'proxy','pos'],
       components: {
           Flexbox,
           FlexboxItem
@@ -32,6 +32,9 @@
                   list.push(item);
               }
               return list;
+          },
+          posId(){
+              return 'special'+this.pos;
           }
       }
   }

src/components/blocks/horizongoods_item.vue

@@ -5,8 +5,7 @@
             <div>
                 <p class="title">{{item.title}}</p>
                 <p>
-                    <span class="bonus_icon"></span>
-                    <span class="bouns_price">{{parseFloat(goods_price)}}</span>
+                    <span class="bouns_price">￥{{parseFloat(goods_price)}}</span>
                 </p>
             </div>
         </router-link>

src/components/blocks/horizongoods_list.vue

@@ -24,7 +24,7 @@
             Scroller,
             HorizonGoodsItem
         },
-        props: ['special', 'proxy'],
+        props: ['special', 'proxy','pos'],
         data(){
             return {
                 widths: []
@@ -59,6 +59,11 @@
                 });
             }
         },
+        computed:{
+            posId(){
+                return 'special'+this.pos;
+            }
+        },
         render(createElement){
 
             let _self = this;
@@ -105,6 +110,10 @@
                         width: parentWidth,
                         paddingLeft: 0,
                         paddingRight: 0
+                    },
+                    attrs:{
+                        id:this.posId,
+                        name:this.posId
                     }
                 },
                 ret);

src/components/blocks/hot_search.vue

@@ -1,5 +1,5 @@
 <template>
-    <div style="padding-top: 2.5%;">
+    <div style="padding-top: 2.5%;" :id="posId">
         <titles :special="special"></titles>
         <flexbox class="flex-box" wrap="wrap" :gutter="0">
             <flexbox-item :span="1/4" v-for="item in special.items" :key="item">
@@ -15,13 +15,19 @@
     export default {
         props: [
             "special",
-            "proxy"
+            "proxy",
+            "pos"
         ],
         components: {
             Flexbox,
             FlexboxItem,
             Titles
         },
+        computed:{
+            posId(){
+                return 'special'+this.pos;
+            }
+        },
         methods: {
             onItemClick: (router, item, proxy) => {
                 BlockUtil.blockClick(router, item, proxy, false)

src/components/blocks/search.vue

@@ -1,6 +1,6 @@
 <template>
-    <div v-bind:class="{search_box:true,'search_bg':isScroll}">
-        <div :class="{search:!isScroll,'search_scroll_bg':isScroll}" @click="toSearch">
+    <div class="search_box" v-show="show">
+        <div class="search" @click="toSearch">
             <p><i class="weui-icon-search index_search_icon"></i>搜索商品 品牌 功效 规格</p>
         </div>
     </div>
@@ -8,7 +8,7 @@
 <script>
     import Actions from '../../lib/Actions'
     export default {
-        props: ["isScroll"],
+        props: ['show'],
         data () {
             return {}
         },
@@ -17,35 +17,30 @@
             toSearch(){
                 this.$router.push(Actions.toSearch());
             }
+        },
+        computed: {
+
         }
     }
 </script>
 <style scoped>
     .search_box {
-        position: fixed;
-        top: 0;
-        left: 0;
         width: 750px;
-        z-index: 999;
-        background: transparent;
-        padding: 12px 0;
+        padding: 14px 0;
         -webkit-transition: all .8s ease;
+        background-color:rgb(235,78,79);
     }
 
     .search_bg {
-        position: fixed;
-        top: 0;
-        left: 0;
         width: 750px;
         z-index: 999;
         padding: 12px 0;
-        background: rgba(235,78,79,0.9);
         -webkit-transition: all .8s ease;
     }
 
     .search {
         border-radius: 5px;
-        background: rgba(255,255,255,0.8);
+        background: rgba(255,255,255,1);
         height: 60px;
         width: 720px;
         margin: 0 auto;
@@ -69,23 +64,7 @@
         color: #666;
         margin-right: 10px;
     }
-    /*.search_logo {*/
-        /*float: left;*/
-        /*height: 60px;*/
-        /*width: 176px;*/
-        /*margin-left: 20px;*/
-        /*background: url('../../assets/scroll_logo.png') no-repeat center;*/
-        /*background-size: 100%;*/
-        /*-webkit-transition: all .8s ease;*/
-    /*}*/
-    /*.scroll_logo {*/
-        /*float: left;*/
-        /*height: 60px;*/
-        /*width: 176px;*/
-        /*margin-left: 20px;*/
-        /*background: url('../../assets/search_logo.png') no-repeat center;*/
-        /*background-size: 100%;*/
-        /*-webkit-transition: all .8s ease;*/
-    /*}*/
+
+
 
 </style>

src/components/blocks/swiper_list.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div :id="posId">
         <swiper :list="getSwiperListData" :show-desc-mask="false" :height="scale" :loop="true" :auto="true"></swiper>
     </div>
 </template>
@@ -12,7 +12,7 @@
 
             }
         },
-        props:['special','proxy'],
+        props:['special','proxy','pos'],
         components: {
             Swiper
         },
@@ -24,7 +24,7 @@
                 for (let i = 0; i < items.length; i++) {
                     let item = {};
                     item['img'] = items[i].image;
-                    let link=BlockUtil.blockClick('',items[i],_self.proxy,true);
+                    let link = BlockUtil.blockClick('',items[i],_self.proxy,true);
                     item['url'] = link;
                     SwiperList.push(item);
                 }
@@ -32,6 +32,9 @@
             },
             scale(){
                 return 750 / parseFloat(this.special.scale)+'px' ;
+            },
+            posId(){
+                return 'special'+this.pos;
             }
         }
     }

src/components/blocks/util/blockUtil.js

@@ -21,12 +21,13 @@ import Brand from '../brand.vue'
 import FCode from '../fcode.vue'
 import GoodsTop from '../goods_top.vue'
 class BlockUtil {
-    static createBlockComp(createElement, special, proxy) {
+    static createBlockComp(createElement, special, proxy, pos) {
         let comp;
         let params = {
             props: {
                 special: special,
-                proxy: proxy
+                proxy: proxy,
+                pos:pos
             },
         };
         try {
@@ -127,6 +128,9 @@ class BlockUtil {
 
         let action_type = item.type;
         let action_data = item.data;
+        if(item.data == '') {
+            return "";
+        }
         let title = item.title ? item.title : "熊猫美妆";
 
         if (!item || !proxy || !action_type || !action_data) {

src/components/blocks/util/proxy.js

@@ -6,18 +6,20 @@ class Proxy {
         this.summeryList = [];
         this.groupBuyList = [];
         this.fcodeList = [];
-        this.specialList = []
+        this.specialList = [];
         this.data = {};
+        this.tabs = [];
         this.tags = new Map();
     }
 
-    addData(json) {
+    addData(json,is_init) {
         this.specialList = this.specialList.concat(json.special_list);
         this.cartList = this.cartList.concat(json.cart_list);
         this.bundlingList = this.bundlingList.concat(json.bundling);
         this.summeryList = this.summeryList.concat(json.summary);
         this.groupBuyList = this.groupBuyList.concat(json.groupbuy);
         this.fcodeList = this.fcodeList.concat(json.fcodes);
+        this.tabs = json.tabs;
     }
 
     restoreData(text) {
@@ -31,17 +33,26 @@ class Proxy {
         this.fcodeList = this.fcodeList.concat(json.fcodeList);
     }
 
+    hasAnchors(){
+        if(!this.tabs) {
+            return false;
+        }
+        return this.tabs.length > 0;
+    }
+
+
     getDataText() {
         return JSON.stringify(this);
     }
 
+
     clearData() {
         this.cartList = [];
         this.bundlingList = [];
         this.summeryList = [];
         this.groupBuyList = [];
         this.fcodeList = [];
-        this.specialList = []
+        this.specialList = [];
         this.tags = new Map();
     }
 

src/components/comments/comments.vue

@@ -0,0 +1,73 @@
+<template>
+    <div class="comments">
+        <div v-document_title>用户评价</div>
+        <comment v-for="comment in this.datas" :key="comment" :comments="comment" :show_line="true"></comment>
+        <load-more v-if="hasmore" :tip="('正在为您全力加载')"></load-more>
+    </div>
+</template>
+<script>
+    import {LoadMore} from 'vux';
+    import Api from '../../lib/api';
+    import Comment from '../blocks/comment.vue';
+
+    export default {
+        created(){
+            this.$store.commit('updateLoadingStatus', {isLoading: true});
+            this.get_datas();
+        },
+        data () {
+            return {
+                datas: [],
+                curpage: 1,
+                hasmore: false,
+                isload:false
+            }
+        },
+        methods: {
+            get_datas(){
+                if(this.isload) {return;}
+                let self = this;
+                let goods_commonid = this.$route.query["goods_commonid"];
+                this.isload = true;
+                this.$http.jsonp(Api.comments(goods_commonid, self.curpage, {_timeout: 5000})).then(function (res) {
+                    this.$store.commit('updateLoadingStatus', {isLoading: false});
+                    self.isload = false;
+                    if (res.body.code != 200) {
+                        this.$vux.toast.show({
+                            type: 'text',
+                            text: res.body.message,
+                            position: 'middle',
+                            width: '600px'
+                        });
+                        return;
+                    }
+                    self.datas = self.datas.concat(res.body.datas.comments);
+                    self.curpage = self.curpage+1;
+                    if (res.body.datas.mobile_page.hasmore) {
+                        self.hasmore = true;
+                        window.addEventListener('scroll',self.loadmore);
+                    }
+                    else {
+                        self.hasmore = false;
+                        window.removeEventListener('scroll',self.loadmore);
+                    }
+                })
+            },
+            loadmore(){
+                let scrollHeight = document.body.scrollHeight;
+                let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+                let windowHeight = document.documentElement.clientHeight;
+                if(scrollHeight - (windowHeight + scrollTop) < 50){
+                    this.get_datas();
+                }
+            }
+        },
+        components: {
+            LoadMore,
+            Comment
+        }
+    }
+</script>
+<style scoped>
+
+</style>

src/components/goods/goods_detail.vue

@@ -1,39 +1,50 @@
 <template>
     <div v-if="datas!==null">
         <div v-document_title>商品详情</div>
+        <DownLoadApp></DownLoadApp>
+        <div class="goods_swiper" :style="{'-webkit-transform':'translate3d(0,'+scrollVal+',0)'}">
+            <swiper v-if="datas!=null" :list="getGoodsSwiperList" :show-desc-mask="false" height="720px" :auto="true" :loop="true"></swiper>
+        </div>
         <div class="goods_detail_content">
-            <div class="goods_img">
-                <swiper v-if="datas!=null" :list="getGoodsSwiperList" :show-desc-mask="false" height="720px" :auto="true" :loop="true"></swiper>
+            <div class="goods_comment">
+                <div class="comment_swiper" v-if="this.datas.comment !== null">
+                    <router-link :to="{ path: '/comments', query: { goods_commonid:this.datas.comment.common_id}}">
+                        <img :src="this.datas.comment.member_avatar">
+                        <span class="nick_name">{{this.datas.comment.nickname}}:</span>
+                        <span class="comment_content">{{this.datas.comment.content}}</span>
+                    </router-link>
+                </div>
                 <div class="collection">已收藏人数&nbsp;&nbsp;{{getOneSummary.goods_collect}}</div>
             </div>
-            <div v-if="getOneSummary['act_type'] == 1" class="groupbuy_msg">
-                <p><span class="groupbuy_title">抢购特价</span>仅剩<span class="groupbuy_label">{{getOneSummary.goods_storage}}</span>件,不可同享其他优惠。</p>
+            <div class="goods_content">
+                <div class="goods_name">
+                    <p style="font-size: 34px;color: #000;">{{getOneSummary.goods_mobile_name}}</p>
+                    <p>{{getOneSummary.goods_jingle}}</p>
+                </div>
+                <div class="bonus_price">
+                    <span>￥{{getOneSummary['act_type'] !== 1?getOneSummary.bonus_price:datas['groupbuy'][0]['promotion_price']}}</span>
+                    <span class="goods_price">专柜价&nbsp;{{getOneSummary.goods_price}}</span>
+                </div>
+                <div class="goods_desc">
+                    <span v-if="getOneSummary['act_type'] !== 1">红包抵{{(getOneSummary.goods_price - getOneSummary.bonus_price).toFixed(2)}}元&nbsp;/</span>
+                    <span>已售{{getOneSummary.goods_salenum}}件&nbsp;/&nbsp;库存{{getOneSummary.goods_storage}}件</span>
+                </div>
             </div>
-            <flexbox style="margin-top: 20px;">
-                <flexbox-item :class="{goods_bonus_price:true}">
-                    <span class="bonus_icon" style="position: relative;bottom: 16px; width: 25px;height: 32px;"></span>
-                    <span class="bonus_price">{{getOneSummary['act_type'] !== 1?getOneSummary.bonus_price:datas['groupbuy'][0]['promotion_price']}}</span>
-                    <div style="display: inline-block;">
-                        <span class="discount" v-if="getOneSummary['act_type'] !== 1">{{getOneSummary.bonus_price/getOneSummary.goods_price*10 == 10 ? "无折扣" : (getOneSummary.bonus_price/getOneSummary.goods_price*10).toFixed(1)+'折'}}</span>
-                        <span class="discount" style="margin-left: -1px;" v-if="getOneSummary['act_type'] !== 1">立省{{(getOneSummary.goods_price - getOneSummary.bonus_price).toFixed(2)}}元</span>
-                    </div>
-                </flexbox-item>
-                <flexbox-item :span="4" style="text-align: right;padding-right: 25px;">已售{{getOneSummary.goods_salenum}}件/库存{{getOneSummary.goods_storage}}件</flexbox-item>
-            </flexbox>
-            <p class="goods_price vux-1px-b">专柜价&nbsp;&nbsp;{{getOneSummary.goods_price}}</p>
             <div style="overflow: hidden; padding-left: 25px;" v-if="getOneSummary['act_type'] !== 1">
-                <p style="color: #a7a7a7; padding: 25px 0; float: right; width: 726px;" class="vux-1px-b">{{getOneSummary.gap_desc}}</p>
+                <p style="color: #a7a7a7; padding: 16px 0; float: right; width: 726px;" class="vux-1px-b">{{getOneSummary.gap_desc}}</p>
             </div>
             <div style="overflow: hidden; padding-left: 25px;" v-if="getOneSummary['is_fcode']">
-                <flexbox class="vux-1px-b" style="padding: 25px 0;">
-                    <flexbox-item style="color: #ef524d;">F码商品</flexbox-item>
-                    <flexbox-item style="color: #a7a7a7;text-align: right; padding-right: 25px;">{{getOneSummary.fcode_desc}}</flexbox-item>
+                <flexbox class="vux-1px-b" style="padding: 16px 0;">
+                    <flexbox-item style="color: #ef524d;">F码购买</flexbox-item>
+                    <flexbox-item style="color: #a7a7a7;text-align: right; padding-right: 25px;">
+                        <span style="float: right;padding: 3px 16px;background: #ec5c56;border-radius: 20px;color: #f2cb64;font-size: 20px;">
+                            <router-link :to="{ path: '/special', query: {title:'RueggeS4k-WMug,,',special_id:905,is_special:true}}">去看看 ></router-link>
+                        </span>
+                    </span>
+                    </flexbox-item>
                 </flexbox>
             </div>
-            <div class="goods_name">
-                <p style="font-size: 34px;color: #000;">{{getOneSummary.goods_mobile_name}}</p>
-                <p>{{getOneSummary.goods_jingle}}</p>
-            </div>
+
             <div class="stamps">
                 <Flexbox>
                     <FlexboxItem :class="{stamps_item:true}"><img :src="getOneSummary.brand_country_logo" :class="{goods_logo:true}">{{getOneSummary.brand_country}}品牌</FlexboxItem>
@@ -44,12 +55,36 @@
                     <FlexboxItem :class="{stamps_item:true}"><img src="../../assets/seven_icon.png" :class="{goods_logo:true}">7天无理由退货</FlexboxItem>
                 </Flexbox>
             </div>
-            <div class="spec vux-1px-b" v-if="datas!=null">
-                <p style="font-size: 28px;">选择{{getSpecName}}</p>
-                <button type="button" v-for="(skus,index) in getSkus" :class="{active:skus.active}" @click.prevent="skusChange(getSkus,skus,index)">{{skus.spv_name}}</button>
+            <div style="background: #F7F7F7;height: 20px;"></div>
+            <div v-if="getOneSummary['act_type'] == 1" class="groupbuy_msg">
+                <p><span class="groupbuy_title">抢购特价</span>仅剩<span class="groupbuy_label">{{getOneSummary.goods_storage}}</span>件,限购<span class="groupbuy_label">1</span>件,不可同享其他优惠。</p>
             </div>
-            <div style="background: #fbfbfb;height: 18px;"></div>
-            <p class="vux-1px-b" style="height: 80px; font-size:28px;line-height: 80px;width: 725px;position: relative;left: 25px;">产品参数</p>
+            <div class="opgoods_des" v-if="getOneSummary.is_opgoods">
+                <p style="color: #a7a7a7; padding: 16px 0; float: right; width: 726px;" class="vux-1px-b">
+                    <span></span>{{getOneSummary.opgoods_desc}}
+                    <span style="float: right;padding: 3px 16px;margin-right: 24px;background: #ec5c56;border-radius: 20px;color: #f2cb64;font-size: 20px;">
+                        <router-link :to="{ path: '/special', query: {title:'TuWFg-S7u-mAiQ,,',special_id:869,is_special:true}}">去看看 ></router-link>
+                    </span>
+                </p>
+            </div>
+            <div class="comments_block" v-if="this.datas.comment !== null">
+                <div class="label">
+                    <div class="f_left" style="font-size: 28px;">用户评价<span class="comment_num">({{this.datas.common_info.comments}})</span></div>
+                    <div class="f_right" style="font-size: 24px;">
+                     <router-link :to="{ path: '/comments', query: {goods_commonid:this.datas.comment.common_id}}">
+                            查看全部评论<span class="arrow_right"></span>
+                     </router-link>
+                    </div>
+                </div>
+                <Comment :comments="this.datas.comment"></Comment>
+                <div style="background: #F7F7F7;height: 20px;"></div>
+            </div>
+            <!--<div class="spec vux-1px-b" v-if="datas!=null">-->
+                <!--<p style="font-size: 28px;">选择{{getSpecName}}</p>-->
+                <!--<button type="button" v-for="(skus,index) in getSkus" :class="{active:skus.active}" @click.prevent="skusChange(getSkus,skus,index)">{{skus.spv_name}}</button>-->
+            <!--</div>-->
+
+            <p class="vux-1px-b" style="height: 80px; font-size:28px;line-height: 80px;width: 725px;position: relative;left: 25px;color:#a7a7a7;">产品参数</p>
             <ul v-if="datas!=null" class="vux-1px-b">
                 <li v-for="attr in attrs" class="attr_list">
                     <p style="float: left;color:#a7a7a7;">{{attr.label}}</p>
@@ -64,18 +99,23 @@
                     <img slot="icon-active" src="../../assets/tabbar_home_hight@2x.png">
                     <span slot="label">首页</span>
                 </tabbar-item>
-                <tabbar-item @on-item-click="is_cart" style="background:#ffa82d;" v-if="getOneSummary.goods_storage">
+                <tabbar-item link="/main/shopping_cart">
+                    <img slot="icon" src="../../assets/tabbar_shopcar_default@2x.png">
+                    <img slot="icon-active" src="../../assets/tabbar_shopcar_hight@2x.png">
+                    <span slot="label">购物车</span>
+                </tabbar-item>
+                <tabbar-item @on-item-click="is_cart" style="background:#000000; flex: 2; -webkit-flex: 2;" v-if="getOneSummary.goods_storage">
                     <span slot="label" style="color: #fff">加入购物车</span>
                 </tabbar-item>
-                <tabbar-item @on-item-click="is_buy" style="background: #ff4e4e;" v-if="getOneSummary.goods_storage">
+                <tabbar-item @on-item-click="is_buy" style="background: #ff4e4e; flex: 2;  -webkit-flex: 2;" v-if="getOneSummary.goods_storage">
                     <span slot="label" style="color: #fff">立即购买</span>
                 </tabbar-item>
-                <tabbar-item style="background: #ff4e4e; font-size: 30px;" v-if="!getOneSummary.goods_storage">
+                <tabbar-item style="background: #ff4e4e; font-size: 30px; flex: 3;  -webkit-flex: 3;" v-if="!getOneSummary.goods_storage">
                     <span slot="label" style="color: #fff">售罄</span>
                 </tabbar-item>
             </tabbar>
         </div>
-        <popup  height="800px" v-model="showPopup" :show-mask="true" @on-hide="closepopup">
+        <popup style="width: 750px;left:50%;margin-left: -375px;"  height="800px" v-model="showPopup" :show-mask="true" @on-hide="closepopup">
             <flexbox :class="{goods_price:true}" style="padding-bottom: 30px;">
                 <flexbox-item>
                     <div class="goods_small_img">
@@ -83,7 +123,7 @@
                     </div>
                 </flexbox-item>
                 <flexbox-item>
-                    <div><span class="bonus_icon popup_bonus_icon" style="position: relative;bottom: 6px;"></span><span style="color: #EB4E4F;font-size: 36px;">{{getOneSummary['act_type'] !== 1?getOneSummary.bonus_price:datas['groupbuy'][0]['promotion_price']}}</span>&nbsp;&nbsp;<span style="color: #a7a7a7;">{{getOneSummary.goods_price}}</span></div>
+                    <div><span style="color:#EB4E4F;font-size: 36px;">￥</span><span style="color: #EB4E4F;font-size: 36px;">{{getOneSummary['act_type'] !== 1?getOneSummary.bonus_price:datas['groupbuy'][0]['promotion_price']}}</span>&nbsp;&nbsp;<span style="color: #a7a7a7;">{{getOneSummary.goods_price}}</span></div>
                     <div>已售{{getOneSummary.goods_salenum}}件/库存{{getOneSummary.goods_storage}}件</div>
                 </flexbox-item>
             </flexbox>
@@ -123,6 +163,8 @@
     import Proxy from '../blocks/util/proxy.js'
     import WebView from '../blocks/webview.vue'
     import WechatShare from '../../wechat/WechatShare'
+    import DownLoadApp from '../blocks/fixed_download_app.vue';
+    import Comment from '../blocks/comment.vue';
 
     export default
     {
@@ -160,6 +202,7 @@
         });
         },
         mounted(){
+            var self = this;
             this.$http.jsonp(Api.goodsContent(this.goods_id)).then(function(res){
                 if (res.body.code != 200) {
                     this.$vux.toast.show({
@@ -172,6 +215,7 @@
                 }
                 this.goodsHtml = res.body.datas.body;
             });
+            window.addEventListener('scroll',this.hideSwiper);
         },
         beforeDestroy(){
             document.body.removeEventListener('touchmove',this.noscroll,false);
@@ -185,10 +229,15 @@
                 goodsNumber:1,
                 check_goods_id:'',
                 isCart:false,
-                goodsHtml:''
+                goodsHtml:'',
+                scrollVal:'0'
             }
         },
         methods:{
+            hideSwiper(){
+                let top = document.documentElement.scrollTop || document.body.scrollTop;
+                this.scrollVal = (top/7).toFixed(0) + 'px';
+            },
             closepopup(){
                 document.body.removeEventListener('touchmove',this.noscroll,false);
             },
@@ -337,6 +386,7 @@
             },
             getSkus(){
                 if(!this.datas)return;
+                if(this.datas.common_info.skus.length <= 0)return;
                 let newSkusArray = [];
                 let skusArray = this.datas.common_info.skus;
                 for(let i=0;i<skusArray.length;i++) {
@@ -361,7 +411,9 @@
             Divider,
             Popup,
             Tabbar,
-            TabbarItem
+            TabbarItem,
+            DownLoadApp,
+            Comment
         }
     }
 </script>
@@ -412,7 +464,7 @@
    .popup_bonus_icon {
         width: 22px;
     }
-    .goods_img {
+    .goods_comment {
         position: relative;
     }
     .collection {
@@ -426,16 +478,19 @@
         font-size: 24px;
     }
     .stamps {
-        background: #fbfbfb;
-        padding: 15px 0;
+        height: 166px;
+        padding-top: 40px;
+        box-sizing: border-box;
     }
     .stamps_item {
-        padding-left: 25px;
+        padding-left: 82px;
+        padding-top: 8px;
         color: #a7a7a7;
+        font-size: 24px;
     }
     .goods_logo {
-        width: 28px;
-        height: 28px;
+        width: 30px;
+        height: 30px;
         display: inline;
         padding-right: 22px;
         vertical-align: middle;
@@ -443,31 +498,44 @@
         bottom: 3px;
     }
     .goods_name {
-        padding: 20px 0 20px 25px;
+        color: #333333;
+        font-size: 28px;
+    }
+    .goods_name p {
+        padding: 0 30px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+    .goods_name p:first-child {
+        font-size: 32px;
     }
     .goods_name h3 {
         line-height: 80px;
         font-size: 30px;
     }
-    .goods_name p {
-        font-size: 26px;
-        color: #a7a7a7;
-    }
     .bonus_price {
-        font-size: 41px;
+        font-size: 36px;
         color: #ef524d;
-        vertical-align: bottom;
-        font-weight: bold;
+        overflow: hidden;
     }
-    .goods_bonus_price {
-        padding-left: 25px;
+    .bonus_price span {
+        float: left;
     }
-    .goods_price {
-        line-height: 64px;
-        color: #a7a7a7;
-        width: 725px;
+    .bonus_price span:first-child {
+        width: 415px;
+        text-align: right;
+    }
+    .bonus_price span.goods_price {
+        color: #9B9B9B;
+        font-size: 22px;
+        vertical-align: middle;
         position: relative;
-        left: 25px;
+        top: 13px;
+        left: 20px;
+    }
+    .goods_bonus_price {
+        padding-left: 25px;
     }
     .discount {
         border: 1px solid #f6495a;
@@ -504,12 +572,11 @@
     }
     .goods_detail_content {
         position: relative;
+        z-index: 2;
         -webkit-transition: all 0.6s;
         transition: all 0.6s;
+        background: #ffffff;
     }
-    /*.scale {*/
-        /*-webkit-transform: scale(0.95,0.95);*/
-    /*}*/
     .goods_small_img {
         width: 228px;
         height: 228px;
@@ -571,4 +638,82 @@
         list-style-type:none;
         overflow: hidden;
     }
+    .goods_swiper {
+        position: relative;
+        z-index: 1;
+        overflow: hidden;
+        -webkit-transition: transform .2s;
+    }
+    .goods_content {
+        text-align: center;
+        position: relative;
+    }
+    .goods_content:after {
+        position: absolute;
+        content: "";
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 1px;
+        background: #DADADA;
+    }
+    .goods_desc {
+        font-size: 24px;
+    }
+    .comment_swiper {
+        position: absolute;
+        bottom: 90px;
+        left: 19px;
+        background: rgba(140,140,140,0.5);
+        max-width: 430px;
+        height: 50px;
+        line-height: 50px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        border-radius: 30px;
+        padding: 0 21px;
+        box-sizing: border-box;
+        color: #ffffff;
+    }
+    .comment_swiper img {
+        width: 40px;
+        height: 40px;
+        border-radius: 50px;
+        display: inline;
+    }
+    .comments_block .label {
+        position: relative;
+        height: 70px;
+        line-height: 70px;
+        overflow: hidden;
+        box-sizing: border-box;
+        padding: 0 24px;
+        color: #a7a7a7;
+    }
+    .comments_block .label:after {
+        content: " ";
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        width: 726px;
+        height: 1px;
+        border-bottom: 1px solid #C7C7C7;
+        color: #C7C7C7;
+        -webkit-transform-origin: 0 100%;
+        transform-origin: 0 100%;
+        -webkit-transform: scaleY(0.5);
+        transform: scaleY(0.5);
+    }
+    .comments_block .comment_num {
+        color: #ef524d;
+    }
+    .comments_block .arrow_right {
+        display: inline-block;
+        width: 10px;
+        height: 20px;
+        background: url("../../assets/arrow_right.png") no-repeat;
+        background-size: 100% 100%;
+        margin-left: 12px;
+    }
 </style>

src/components/login/login.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div style="background: #F7F7F7;">
         <div v-document_title>登录</div>
         <div class="login_input">
             <input type="tel" name="userMobile" class="input_mobile" v-model="userMobile" placeholder="请输入您的手机号码">
@@ -144,7 +144,7 @@
         height:72px;
         padding-left: 2%;
         font-size: 24px;
-        background: #f2f2f2;
+        background: #ffffff;
         border: none;
         border-radius: 5px;
         margin-bottom: 20px;

src/components/main/home/homeTabs.vue

@@ -7,8 +7,7 @@
     export default {
         created() {
             let _self = this;
-            let arr = this.$route.path.split("\/");
-            this.current_id = arr [arr.length - 1];
+            this.current_id =this.getCurrentId(this.$route.path);
 
             this.$http.jsonp(Api.homeTabs(), {_timeout: 5000}).then(function (res) {
                 if (res.body.code != 200) {
@@ -30,21 +29,22 @@
             });
         },
         mounted(){
-            let _self = this;
-            let top = document.documentElement.scrollTop || document.body.scrollTop;
-            if (top > 0) {
-                this.isScrolls = true;
-            }
-            else {
-                this.isScrolls = false;
-            }
-            window.addEventListener('scroll', function () {
-                let top = document.documentElement.scrollTop || document.body.scrollTop;
-                if (top > 0) {
-                    _self.isScrolls = true;
+            let self = this;
+            self.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+            window.addEventListener('scroll',function(e){
+                let scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
+                if(scrolltop <= 0) {
+                    self.isScrolls = true;
+                    self.scrollTop = scrolltop;
+                    return;
                 }
-                else {
-                    _self.isScrolls = false;
+                if (self.scrollTop - scrolltop > 100 ) {
+                    self.isScrolls = true;
+                    self.scrollTop = scrolltop;
+                }
+                else if(scrolltop > self.scrollTop ) {
+                    self.isScrolls = false;
+                    self.scrollTop = scrolltop;
                 }
             });
         },
@@ -52,41 +52,63 @@
             return {
                 tabs: null,
                 current_id: 0,
-                isScrolls: false
+                isScrolls: true,
+                scrollTop:0
+            }
+        },
+        watch: {
+            '$route' (to, from) {
+                if (to.path !== from.path) {
+                    this.current_id=this.getCurrentId(to.path);
+                }
             }
         },
         methods: {
             isSelected(item, special_id){
                 return item.special_id == special_id;
+            },
+
+            getCurrentId(path){
+                let arr = path.split("\/");
+                return arr [arr.length - 1];
             }
         }
         ,
         render(createElement)
         {
             if (!this.tabs)
-                return
+                return;
             let nativeClickHandler = (index, item) => {
                 this.current_id = item.special_id;
                 this.$router.push({path: "" + this.current_id})
-            }
+            };
             //tab
             const top_tabs = this.tabs.map((item, index) => {
                 return <TabItem class="tab_item" selected={this.isSelected(item, this.current_id)}
-                                nativeOnClick={ () => nativeClickHandler(index, item)}>{ item.name}</TabItem>
-            })
+                                nativeOnClick={ () => nativeClickHandler(index, item)}>{item.name}</TabItem>
+            });
 
             let showTable = this.tabs.length >= 2;
             let tabDisplay = showTable ? "block" : "none";
-            let containerPaddingTop = showTable ? "170px" : "0";
+            let containerPaddingTop = showTable ? "168px" : "0";
+            let lineWidth = 5;
 
             return (
                     <div>
                         <div v-document_title>熊猫美妆</div>
-                        <Search isScroll={this.isScrolls}></Search>
-                        <div style={{display: tabDisplay}}>
-                            <div class="list_tab" style={{position: 'fixed'}}>
-                                <Tab style={{width: 150 * this.tabs.length + "px", background: "#fff"}}
-                                     customBarWidth="150px">{top_tabs}</Tab>
+                        <div class="fixed_top">
+                            <Search show={this.isScrolls}></Search>
+                            <div class="list_tab" style={{display: tabDisplay}}>
+                                <Tab lineWidth={lineWidth}
+                                     defaultColor="rgba(247,247,247,0.8)"
+                                     activeColor="#ffffff"
+                                     style={{
+                                         width: 150 * this.tabs.length + "px",
+                                         background: "rgb(235,78,79)"
+                                     }}
+                                     customBarWidth="150px">
+                                    {top_tabs}
+                                </Tab>
                             </div>
                         </div>
                         <div class="list_container" style={{paddingTop: containerPaddingTop}}>
@@ -110,9 +132,9 @@
     .list_tab {
         position: relative;
         z-index: 1000;
-        width: 100%;
-        margin-top: 83px;
-        overflow-y: auto;
+        width: 750px;
+        height: 78px;
+        overflow-y: hidden;
         -webkit-box-sizing: border-box;
         /*-webkit-overflow-scrolling: touch;*/
         background: #fff;
@@ -136,4 +158,20 @@
     .list_hide {
         display: none;
     }
+    .fixed_top {
+        position: fixed;
+        top: 0;
+        left: 50%;
+        z-index: 999;
+        box-shadow: 0 3px 10px #888888;
+        background: rgb(235,78,79);
+        -webkit-transform: translateX(-50%);
+    }
+    .vux-tab {
+        height: 80px;
+    }
+    .vux-tab .vux-tab-item {
+        line-height: 74px;
+        background:rgb(235,78,79);
+    }
 </style>

src/components/main/main.vue

@@ -59,6 +59,9 @@
     }
 </script>
 <style>
+    body {
+        font-family: PingFang SC,Hiragino Sans GB,Microsoft YaHei,微软雅黑,Arial,sans-serif;
+    }
     .slide-fade-enter-active {
         -webkit-transform: translateY(0);
         transition: all .4s;
@@ -89,4 +92,7 @@
         width: 50px;
         height: 50px;
     }
+    .weui-tabbar {
+        width: 750px;
+    }
 </style>

src/components/main/shop-car/shopping_cart.vue

@@ -3,8 +3,8 @@
         <div v-document_title>熊猫美妆</div>
         <div class="free_info">
             <group>
-                <cell-box v-for="info in proxy.infos" :key="info"
-                          style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 100%;">
+                <cell-box  v-for="info in proxy.infos" :key="info"
+                          style="overflow: hidden;padding:25px;text-overflow: ellipsis;white-space: nowrap;width: 100%;">
                     <span class="info_label">{{info.title}}</span>
                     <span class="info_data">{{info.value}}</span>
                 </cell-box>
@@ -20,15 +20,15 @@
                     <div slot="content" class="demo-content">
                         <flexbox :gutter="17">
                             <flexbox-item :span="1">
-                                <div @click="cart_select(cart)">
+                                <div @click="cart_select(cart)" style="margin-left: 17px;">
                                     <icon :type="cart.active"></icon>
                                 </div>
                             </flexbox-item>
-                            <flexbox-item :span="2.5">
+                            <flexbox-item :span="2">
                                 <img :src="proxy.getSummery(cart.goods_id).goods_image_url" class="goods_img"
                                      @click="link_goods_detail(proxy.getSummery(cart.goods_id).goods_id)">
                             </flexbox-item>
-                            <flexbox-item :span='8'>
+                            <flexbox-item :span='10'>
                                 <div @click="link_goods_detail(proxy.getSummery(cart.goods_id).goods_id)">
                                     <div class="goods_name">
                                         <p>{{proxy.getSummery(cart.goods_id).goods_mobile_name}}</p>
@@ -37,16 +37,20 @@
                                 </div>
                                 <div class="goods_price">
                                     <flexbox>
-                                        <flexbox-item :span="6">
-                                            <span class="bonus_icon"></span><span class="bonus_price">{{proxy.getSummery(cart.goods_id).act_type != 0?proxy.getSummery(cart.goods_id).goods_promotion_price:proxy.getSummery(cart.goods_id).bonus_price}}</span>专柜价<span
-                                                style="color: #929292">{{proxy.getSummery(cart.goods_id).goods_price}}</span>
+                                        <flexbox-item :span="6.5">
+                                            <span class="bonus_price" v-if="proxy.getSummery(cart.goods_id).act_type == 0">
+                                                ￥{{proxy.getSummery(cart.goods_id).bonus_price}}
+                                                <span style="color: #929292;font-size: 20px;">红包已抵扣{{parseFloat(proxy.getSummery(cart.goods_id).goods_price - proxy.getSummery(cart.goods_id).bonus_price).toFixed(2)}}元</span>
+                                            </span>
+                                            <span class="bonus_price" v-if="proxy.getSummery(cart.goods_id).act_type != 0">
+                                                ￥{{parseFloat(proxy.getSummery(cart.goods_id).goods_promotion_price)}}
+                                            </span>
                                         </flexbox-item>
-                                        <flexbox-item>
-                                            <div class="handle"><span class="handle_btn minus"
-                                                                      @click="goods_num_handle(cart,cart.goods_num-1,cart.cart_id)">-</span><span
-                                                    class="handle_number">{{cart.goods_num}}</span><span
-                                                    class="handle_btn add"
-                                                    @click="goods_num_handle(cart,cart.goods_num+1,cart.cart_id)">+</span>
+                                        <flexbox-item :span="5.5">
+                                            <div class="handle">
+                                                <span class="handle_btn minus" @click="goods_num_handle(cart,cart.goods_num-1,cart.cart_id)">-</span>
+                                                <span class="handle_number">{{cart.goods_num}}</span>
+                                                <span class="handle_btn add" @click="goods_num_handle(cart,cart.goods_num+1,cart.cart_id)">+</span>
                                             </div>
                                         </flexbox-item>
                                     </flexbox>
@@ -69,12 +73,11 @@
                     </div>
                 </flexbox-item>
                 <flexbox-item class="price">
-                    <p class="info_data" style="line-height:22px;">红包抵扣后</p>
-                    <p class="bonus_price">应付:¥{{total()}}</p>
+                    <p class="tatements">应付:¥{{allPrice}}<span>¥{{allGoodsPrice}}<s></s></span></p>
                 </flexbox-item>
                 <flexbox-item>
                     <div class="buy_btn" @click="just_buy">
-                        查看信息
+                        结算
                     </div>
                 </flexbox-item>
             </flexbox>
@@ -101,12 +104,9 @@
                 scrollTop: 0,
                 documentHeight: 0,
                 windowHeight: 0,
-                isload:false
-            }
-        },
-        watch: {
-            'cart_l_items'(oldVal, newVal){
-                this.total();
+                isload:false,
+                allPrice:0,
+                allGoodsPrice:0
             }
         },
         methods: {
@@ -155,7 +155,37 @@
             },
             total(){
                 try {
-                    return this.proxy.total_amount(this.getSelectedCar(), this.$store.state.user_bonus, this.$store.state.isLogIn);
+                    let _self = this;
+                    let carts = this.getSelectedCar().map(function (item) {
+                        return item.cart_id;
+                    });
+                    if(carts.length <= 0) {
+                        _self.allPrice = 0;
+                        _self.allGoodsPrice = 0;
+                        return;
+                    }
+                    let carts_items = carts.join(",");
+                    this.$http.jsonp(Api.cartMoney()+'&ifcart=1&cart_id='+carts_items).then(function (res) {
+                        this.isload = false;
+                        if (res.body.code != 200) {
+                            this.$vux.toast.show({
+                                type: 'text',
+                                text: res.body.message,
+                                position: 'middle',
+                                width: '600px'
+                            });
+                            return;
+                        }
+                        let datas = res.body.datas.payinfo.payinfo;
+                        _self.allPrice = parseFloat((datas.goods_amount + datas.freight - datas.available_pred - datas.full_discount - datas.opgoods_discount).toFixed(2));
+                        _self.allGoodsPrice = parseFloat((datas.goods_amount).toFixed(2));
+                    },(err) => {
+                        this.$vux.toast.show({
+                            type: 'text',
+                            text: "网络错误",
+                            position: 'middle'
+                        })
+                    })
                 } catch (e) {
                     return 0;
                 }
@@ -189,7 +219,40 @@
             },
             goods_num_handle(cart, quantity, cart_id){
                 if (quantity <= 0) {
+                    let _self = this;
                     quantity = 1;
+                    this.$vux.confirm.show({
+                        content: '确认删除?',
+                        onHide () {
+                            _self.$http.jsonp(Api.shoppingCartEdit(0, cart.cart_id),{_timeout:5000}).then(function (res) {
+                                if (res.body.message == '成功') {
+                                    let cart_item = cart;
+                                    let cart_id = cart_item.cart_id;
+                                    for (let i = 0; i < _self.cart_l_items.length; i++) {
+                                        if (cart_id == _self.cart_l_items[i].cart_id) {
+                                            _self.proxy.cartList.splice(i, 1);
+                                            this.cart_l_items.splice(i, 1);
+                                            break;
+                                        }
+                                    }
+                                }
+                                else {
+                                    _self.$vux.toast.show({
+                                        type: 'text',
+                                        text: '删除失败',
+                                        position: 'middle'
+                                    })
+                                }
+                            },(err) => {
+                                _self.$vux.toast.show({
+                                    type: 'text',
+                                    text: "网络错误",
+                                    position: 'middle'
+                                })
+                            })
+                        }
+                    });
+                    return;
                 }
                 let _self = this;
                 this.$http.jsonp(Api.shoppingCartEdit(quantity, cart_id),{_timeout:5000}).then(function (res) {
@@ -215,32 +278,37 @@
             },
             del_cart(cart){
                 let _self = this;
-                this.$http.jsonp(Api.shoppingCartEdit(0, cart.cart_id),{_timeout:5000}).then(function (res) {
-                    if (res.body.message == '成功') {
-                        let cart_item = cart;
-                        let cart_id = cart_item.cart_id;
-                        for (let i = 0; i < this.cart_l_items.length; i++) {
-                            if (cart_id == this.cart_l_items[i].cart_id) {
-                                _self.proxy.cartList.splice(i, 1);
-                                this.cart_l_items.splice(i, 1);
-                                break;
+                this.$vux.confirm.show({
+                    content: '确认删除?',
+                    onHide () {
+                        _self.$http.jsonp(Api.shoppingCartEdit(0, cart.cart_id),{_timeout:5000}).then(function (res) {
+                            if (res.body.message == '成功') {
+                                let cart_item = cart;
+                                let cart_id = cart_item.cart_id;
+                                for (let i = 0; i < _self.cart_l_items.length; i++) {
+                                    if (cart_id == _self.cart_l_items[i].cart_id) {
+                                        _self.proxy.cartList.splice(i, 1);
+                                        this.cart_l_items.splice(i, 1);
+                                        break;
+                                    }
+                                }
                             }
-                        }
-                    }
-                    else {
-                        this.$vux.toast.show({
-                            type: 'text',
-                            text: '删除失败',
-                            position: 'middle'
+                            else {
+                                _self.$vux.toast.show({
+                                    type: 'text',
+                                    text: '删除失败',
+                                    position: 'middle'
+                                })
+                            }
+                        },(err) => {
+                            _self.$vux.toast.show({
+                                type: 'text',
+                                text: "网络错误",
+                                position: 'middle'
+                            })
                         })
                     }
-                },(err) => {
-                    this.$vux.toast.show({
-                    type: 'text',
-                    text: "网络错误",
-                    position: 'middle'
-                })
-            })
+                });
             },
             cart_select(cart){
                 if (cart.active == 'circle') {
@@ -249,6 +317,7 @@
                 else {
                     cart.active = 'circle';
                 }
+                this.total();
             },
             all_handle(){
                 if (this.all_select == 'circle') {
@@ -265,6 +334,7 @@
                         cart_l_items[i].active = 'circle';
                     }
                 }
+                this.total();
             },
             just_buy(){
                 let carts = this.getSelectedCar().map(function (item) {
@@ -303,6 +373,9 @@
     }
 </script>
 <style scoped>
+    .vux-flexbox .vux-flexbox-item:first-child {
+        margin-left: 0 !important;
+    }
     .shopping_cart {
         padding-bottom: 185px;
         min-height: 100%;
@@ -347,18 +420,17 @@
     }
 
     .cart_item {
-        padding: 20px;
         background: #fff;
     }
 
     .vux-swipeout-button {
         font-size: 28px;
     }
-
     .goods_img {
         border: 1px solid #C7C7C7;
-        min-width: 149px;
-        min-height: 149px;
+        max-width: 114px;
+        max-height: 114px;
+        margin: 20px 0;
     }
 
     .goods_spec {
@@ -368,7 +440,6 @@
 
     .goods_price {
         font-size: 22px;
-        margin-top: 30px;
     }
 
     .bonus_price {
@@ -376,10 +447,23 @@
         margin-right: 10px;
     }
 
+    .bonus_price span {
+        position: relative;
+        color: rgb(146, 146, 146);
+        font-size: 20px;
+    }
+    .bonus_price span:before {
+        position: absolute;
+        left: 0;
+        top: 50%;
+        width: 100%;
+        height: 1px;
+        background: rgb(146, 146, 146);
+    }
     .handle_btn {
         color: #FF4E4E;
         display: inline-block;
-        width: 90px;
+        width: 56px;
         text-align: center;
         font-size: 30px;
         transform: scale(1.3);
@@ -413,9 +497,28 @@
     }
 
     .handle_number {
-        font-size: 30px;
+        font-size: 22px;
         display: inline-block;
         width: 40px;
         text-align: center;
     }
+    .tatements {
+        font-size: 26px;
+        color: #FF4E4E;
+    }
+    .tatements span {
+        position: relative;
+        display: inline-block;
+        font-size: 20px;
+        color: rgb(146, 146, 146);
+        padding-left: 10px;
+    }
+    .tatements span s{
+        position: absolute;
+        left: 5px;
+        top: 50%;
+        width: 100%;
+        height: 2px;
+        background:rgb(146, 146, 146);
+    }
 </style>

src/components/order/orderPaySn.vue

@@ -25,8 +25,9 @@
                     <flexbox>
                         <flexbox-item :span="4/5" style="line-height: 50px;">{{datas.order['order_info'].full_desc}}
                         </flexbox-item>
-                        <flexbox-item :span="1/5" style="text-align: right" v-if="datas.payinfo['full_desc']"><span
-                                class="letter_info">- ¥ {{datas.order['order_info'].full_discount}}</span></flexbox-item>
+                        <flexbox-item :span="1/5" style="text-align: right"><span
+                                class="letter_info">- ¥ {{datas.order['order_info'].full_discount}}</span>
+                        </flexbox-item>
                     </flexbox>
                 </flexbox-item>
             </flexbox>
@@ -57,28 +58,29 @@
                     <flexbox-item :span="4/6" style="text-align: center;line-height: 93px; font-size: 30px;">应付: <span
                             class="letter_warn">¥ {{datas.order.order_info['pay_cash']}}</span></flexbox-item>
                     <flexbox-item :span="2/6"
-                                  style="text-align: center;background:#EB4E4F;color: #fff;line-height: 93px; font-size: 32px; "><p @click="just_pay">去付款</p></flexbox-item>
+                                  style="text-align: center;background:#EB4E4F;color: #fff;line-height: 93px; font-size: 32px; ">
+                        <p @click="just_pay">去付款</p></flexbox-item>
                 </flexbox>
             </div>
         </div>
     </div>
 </template>
 <script>
-    import { Flexbox , FlexboxItem , Group , XInput ,  Icon} from 'vux'
+    import {Flexbox, FlexboxItem, Group, XInput, Icon} from 'vux'
     import Api from '../../lib/api'
     export default {
         data () {
             return {
-                datas:''
+                datas: ''
             }
         },
         created (){
             let pay_sn = this.$route.query["pay_sn"];
-            this.$http.jsonp(Api.paySn(pay_sn)).then(function(res){
+            this.$http.jsonp(Api.paySn(pay_sn)).then(function (res) {
                 this.datas = res.body.datas;
             })
         },
-        methods:{
+        methods: {
             just_pay(){
                 this.$vux.toast.show({
                     type: 'text',
@@ -100,6 +102,7 @@
     #router_view {
         background: #f9f9f9;
     }
+
     .order_pay {
         position: fixed;
         bottom: 0;
@@ -129,6 +132,7 @@
     .letter_warn {
         color: #EB4E4F;
     }
+
     .bonus_bg {
         background: #f2bb11;
         padding: 5px;

src/components/special/special_list.vue

@@ -5,7 +5,7 @@
     import WechatShare from '../../wechat/WechatShare'
     import CommonUtil from "../util/commonUtil"
     import DebugUtil from "../util/DebugUtil"
-
+    import DownLoadApp from '../blocks/fixed_download_app.vue';
     export default
     {
         beforeCreate() {
@@ -67,8 +67,8 @@
                     setTimeout(() => {
                         document.body.scrollTop = 0;
                     }, 100);
-
                 }
+                document.title = CommonUtil.base64decode(this.$route.query["title"])|| this.$route.query["keyword"];
             }
         },
         methods: {
@@ -95,10 +95,16 @@
                     DebugUtil.log("special_list","getNewData 2");
                     this.url = Api.special(params.special_id);
                 }
+            },
+            animatePos(special_id)
+            {
+                let anchor_pos = document.getElementById('special'+special_id).offsetTop;
+                window.scrollTo(0,anchor_pos);
             }
         },
         render(createElement)
         {
+            let _self = this;
             let xTitle = createElement('div', {
                 directives: [
                     {
@@ -114,6 +120,7 @@
             let brand_id = this.$route.query["brand_id"];
             let keyword = this.$route.query["keyword"];
 
+
             let blockList = createElement(BlockList, {
                 props: {
                     datasLink: this.url,
@@ -124,11 +131,17 @@
                 }
             });
 
-            return createElement('div', {}, [xTitle, blockList]);
+            let list =  [xTitle,blockList];
+
+            return createElement('div', {}, list);
         }
     }
 </script>
-
+<style>
+    body {
+        background-color: #F7F7F7;
+    }
+</style>
 <style>
     img {
         vertical-align: middle;

src/components/util/commonUtil.js

@@ -5,15 +5,24 @@ import {base64} from 'vux'
 class CommonUtil {
 
     static base64Encode(value) {
-        let temp = value.replace("+", "-").replace("=", ",");
-        return base64.encode(temp)
+        let temp = base64.encode(value);
+        return this.replaceAll(this.replaceAll(temp,"+","-"),"=",",");
     }
 
     static base64decode(value) {
-        let temp = value.replace("-", "+").replace(",", "=");
-        return base64.decode(temp)
+        let temp = this.replaceAll(this.replaceAll(value,"-","+"),",","=");
+        return base64.decode(temp);
     }
 
+    static replaceAll(source, target, replace) {
+        if (source.indexOf(target) > -1) {
+            return this.replaceAll(source.replace(target, replace), target, replace);
+        } else {
+            return source;
+        }
+    }
+
+
     static parseURL(url) {
         let a = document.createElement('a');
         a.href = url;

src/lib/api.js

@@ -1,29 +1,10 @@
 import WechatShare from '../wechat/WechatShare.js';
+import UserAgent from './userAgent';
 
 let envHost = process.env.API_ROOT;
 let enter_url = "";
 let gWxShare = null;
 
-let mobile = {
-    Android: function () {
-        return navigator.userAgent.match(/Android/i);
-    },
-    BlackBerry: function () {
-        return navigator.userAgent.match(/BlackBerry/i);
-    },
-    iOS: function () {
-        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
-    },
-    Opera: function () {
-        return navigator.userAgent.match(/Opera Mini/i);
-    },
-    Windows: function () {
-        return navigator.userAgent.match(/IEMobile/i);
-    },
-    any: function () {
-        return (mobile.Android() || mobile.BlackBerry() || mobile.iOS() || mobile.Opera() || mobile.Windows());
-    }
-};
 
 class Api {
     static host() {
@@ -66,6 +47,10 @@ class Api {
         return this.host() + '/mobile/index.php?act=cart&op=list&client_type=ajax'
     }
 
+    static cartMoney() {
+        return this.host() + '/mobile/index.php?act=member_buy&op=calc_cash&client_type=ajax'
+    }
+
     static changeOrderState(action, order_id) {
         return this.host() + '/mobile/index.php?act=member_order&op=change_state&client_type=ajax&act_type=' + action + "&order_id=" + order_id
     }
@@ -99,7 +84,7 @@ class Api {
     }
 
     static homeTabs() {
-        return this.host() + "/mobile/index.php?act=mshop&op=tabs&client_type=ajax"
+        return this.host() + "/mobile/index.php?act=index&op=tabs&client_type=ajax"
     }
 
     static login(mobile, code) {
@@ -148,6 +133,10 @@ class Api {
         return this.host() + `/mobile/index.php?act=member_order&op=pay_info&curpage=1&pay_sn=${pay_sn}&client_type=ajax`;
     }
 
+    static comments(common_id,curpage) {
+        return this.host() + `/mobile/index.php?act=goods_common&op=comments&curpage=${curpage}&page=10&goods_commonid=${common_id}&client_type=ajax`;
+    }
+
     static init_url() {
         if (enter_url == "") {
             enter_url = window.location.href;
@@ -155,7 +144,7 @@ class Api {
     }
 
     static create_share(data) {
-        if (mobile.iOS()) {
+        if (UserAgent.iOS()) {
             gWxShare = new WechatShare(data, this.sign_url());
             return gWxShare;
         }
@@ -166,7 +155,7 @@ class Api {
 
     static sign_url() {
         let temp;
-        if (mobile.iOS()) {
+        if (UserAgent.iOS()) {
             Api.init_url();
             temp = enter_url;
         } else {

src/lib/userAgent.js

@@ -0,0 +1,20 @@
+export default {
+    Android: function () {
+        return navigator.userAgent.match(/Android/i);
+    },
+    BlackBerry: function () {
+        return navigator.userAgent.match(/BlackBerry/i);
+    },
+    iOS: function () {
+        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
+    },
+    Opera: function () {
+        return navigator.userAgent.match(/Opera Mini/i);
+    },
+    Windows: function () {
+        return navigator.userAgent.match(/IEMobile/i);
+    },
+    any: function () {
+        return (mobile.Android() || mobile.BlackBerry() || mobile.iOS() || mobile.Opera() || mobile.Windows());
+    }
+};

src/router/routes.js

@@ -20,6 +20,7 @@ import BrandList from '../components/main/discovery/brandList.vue'
 import functionList from '../components/main/discovery/functionList.vue'
 import brandList from '../components/main/discovery/brandList.vue'
 import orderPaySn from '../components/order/orderPaySn.vue'
+import Comments from '../components/comments/comments.vue'
 
 export default [
     {
@@ -133,5 +134,9 @@ export default [
     {
         path:'/order_pay_sn',
         component:orderPaySn
+    },
+    {
+        path:'/comments',
+        component:Comments
     }
 ]