商品详情

@@ -21,7 +21,7 @@
         props: ['title', 'class'],
         methods: {
             goBack() {
-                 yoho.goBack({}, function() {}, function() {});
+                yoho.goBack({}, function() {}, function() {});
             }
         }
     };
@@ -33,6 +33,7 @@
         right: 0;
         left: 0;
         z-index: 210;
+        padding-top: 60px;
         padding-left: 30px;
         padding-right: 30px;
         width: 100%;

 <template>
     <top-nav></top-nav>
-    <div class="show-box no-padding first-box">
+    <div class="show-box no-padding first-box" :class="{'is-app': isApp}">
         <div class="news-box">
             <h1>{{article.articleTitle}}</h1>
             <div class="status-bar">
@@ -61,6 +61,10 @@
             margin-top: 120px;
         }
 
+        &.first-box.is-app {
+            margin-top: 180px;
+        }
+
         background: $bgcolor;
         margin-top: 30px;
         border-bottom: 1px solid #eee;
@@ -183,8 +187,9 @@
 
 </style>
 <script>
-    require('common/vue-filter');
+    const yoho = require('yoho');
 
+    require('common/vue-filter');
     module.exports = {
         components: {
             'content-block': require('./content-block.vue'),
@@ -193,6 +198,7 @@
         },
         data() {
             return {
+                isApp: yoho.isApp,
                 article: {},
                 content: {},
                 brands: {},

 <template>
     <div class="top-nav">
-        <a class="left-button" href="javascript:alert('TODO');">
-            <span class="icon icon-left"></span>
-        </a>
+        <navbar>
+            <a slot="left" href="javascript:alert('TODO');">
+                <span class="icon icon-left"></span>
+            </a>
 
-        <a class="right-button" href="javascript:alert('TODO');">
-            <span class="icon icon-share"></span>
-        </a>
-        <a class="right-button" href="javascript:alert('TODO');">
-            <span class="icon icon-love"></span>
-        </a>
-        <a class="right-button" href="javascript:alert('TODO');" :click="">
-            <span class="icon icon-check"></span>
-            {{likeCount}}
-        </a>
+            <template slot="right">
+                <a class="right-button" href="javascript:alert('TODO');">
+                    <span class="icon icon-check"></span>
+                    {{likeCount}}
+                </a>
+
+                <a class="right-button" href="javascript:alert('TODO');">
+                    <span class="icon icon-love"></span>
+                </a>
+
+                <a class="right-button" href="javascript:alert('TODO');">
+                    <span class="icon icon-share"></span>
+                </a>
+            </template>
+        </navbar>
     </div>
 </template>
 <style>
     .top-nav {
-        position: fixed;
-        z-index: 10;
-        font-size: 40px;
-        padding: 30px;
-        width: 100%;
-        top: 0;
-        background: #fff;
-
-        .left-button {
-            float: left;
-        }
-
         .right-button {
-            float: right;
             margin-left: 30px;
         }
     }
 </style>
 <script>
+    const yoho = require('yoho');
+
     require('common/vue-filter');
 
     module.exports = {
         components: {
+            navbar: require('component/header.vue')
         },
         data() {
             return {
+                isApp: yoho.isApp,
                 likeCount: 9,
             };
         },

 <template>
     <div class="image-carousel">
-        <swipe :continuous="false" :auto="0" :show-indicators="goods && goods.length > 1">
+        <swipe :continuous="false" :auto="0" :show-indicators="goods && goods.length > 1" v-ref:swipe>
             <swipe-item v-for="item in goods">
-                <a href="javascript:void(0);" title="{{item.title}}" @click.prevent="showcase()">
-                    <img :src="item.colorImage | resize 750 1000" width="100%" alt="">
-                </a>
+                <img title="{{item.title}}"
+                     :src="item.colorImage | resize 750 1000"
+                     width="100%" alt=""
+                     @click.prevent="showcase()">
             </swipe-item>
         </swipe>
     </div>
@@ -63,7 +64,7 @@
                     images: this.goods.map((item)=> {
                         return item.colorImage;
                     }),
-                    index: 0 // TODO: 活动下标无法获取
+                    index: this.$refs.swipe.index
                 };
 
                 yoho.goImageBrowser(opts);