整合代码

assets/scss/mobileCommon.scss

@@ -17,6 +17,13 @@
       color: #fff;
       text-align: center;
       font-size: .32rem;
+      position: relative;
+      i {
+        position: absolute;
+        right: -.13rem;
+        font-size: .4rem;
+        bottom: .46rem;
+      }
     }
     .mobile-modal-content {
       background: #fff;
@@ -24,7 +31,7 @@
       padding: 0 .54rem;
       div {
         padding: .2rem 0;
-        line-height: .31rem;
+        line-height: .4rem;
         border-bottom: .01rem solid rgb(183,213,254);
         text-align: center;
         &:last-child {

components/mobile/MobileHeader.vue

@@ -1,15 +1,20 @@
 <template>
   <div>
-    <div class="mobile-modal" v-if="false">
-      <div class="mobile-modal-box">
-        <div class="mobile-modal-header">联系方式</div>
-        <div class="mobile-modal-content">
-          <div>商家地址：啊沙发沙发发撒发沙发沙发发沙发沙发</div>
+    <div class="mobile-modal" v-if="showStoreInfo || showShare">
+      <div class="mobile-modal-box" v-if="showStoreInfo">
+        <div class="mobile-modal-header">联系方式<i @click="showStoreInfo = false" class="icon-guanbi iconfont"></i></div>
+        <div class="mobile-modal-content" v-if="showDefaultAddr">
+          <div>商家地址：深圳市南山区英唐大厦6楼</div>
           <div class="content-line link-url">在线咨询</div>
-          <div>致电：<span class="content-line link-url">0791-21312322</span></div>
+          <div>致电：<span class="content-line link-url">0755-96586323</span></div>
+        </div>
+        <div class="mobile-modal-content" v-if="!showDefaultAddr">
+        <div>商家地址：{{store.enterprise.enAddress || store.enterprise.address}}</div>
+        <div class="content-line link-url">在线咨询</div>
+        <div>致电：<span class="content-line link-url">{{store.enterprise.enTel}}</span></div>
         </div>
       </div>
-      <div class="mobile-share-box">
+      <div class="mobile-share-box" v-if="showShare">
         <div class="share-area">
           <ul>
             <li class="share-item">
@@ -42,24 +47,81 @@
             </li>
           </ul>
         </div>
-        <div class="cancel-share">取消</div>
+        <div class="cancel-share" @click="showShare=false">取消</div>
       </div>
     </div>
     <div class="mobile-header">
-      <nuxt-link class="iconfont icon-fanhui" to="/">返回</nuxt-link>
-      <p>优软商城</p>
-      <i class="iconfont icon-fenxiang"></i>
+      <a class="iconfont icon-fanhui" @click="goLastPage">返回</a>
+      <p>{{title}}</p>
+      <i v-show="rightIcon=='share'" class="iconfont icon-fenxiang" @click="showShare = true"></i>
+      <i v-show="rightIcon=='phone'" class="iconfont icon-dianhua" @click="showLink"></i>
     </div>
   </div>
 </template>
 <script>
-
+  export default {
+    data () {
+      return {
+        showStoreInfo: false,
+        showShare: false,
+        rightIcon: 'share',
+        showDefaultAddr: true
+      }
+    },
+    computed: {
+      brandDetail () {
+        return this.$store.state.brandDetail.detail.data
+      },
+      title () {
+        return this.initHeader(this.$route.path)
+      },
+      store () {
+        return this.$store.state.shop.storeInfo.store.data
+      }
+    },
+    methods: {
+      goLastPage: function () {
+        window.history.back(-1)
+      },
+      initHeader: function (val) {
+        let title = '优软商城'
+        if (val.startsWith('/mobile/brand/')) {
+          title = this.brandDetail.nameCn
+          this.rightIcon = 'share'
+        } else if (val.startsWith('/mobile/shop')) {
+          title = '店铺列表'
+          this.rightIcon = 'phone'
+        } else if (val.startsWith('/mobile/merchantDescription/')) {
+          title = '商家简介'
+          this.rightIcon = 'phone'
+        } else if (val.startsWith('/mobile/user')) {
+          title = '我的收藏'
+          this.rightIcon = 'phone'
+        } else if (val.startsWith('/mobile/search')) {
+          title = '搜索结果'
+          this.rightIcon = 'share'
+        } else {
+          title = '优软商城'
+          this.rightIcon = 'phone'
+        }
+        return title
+      },
+      showLink: function () {
+        this.showStoreInfo = true
+        if (this.title === '商家简介') {
+          this.showDefaultAddr = false
+        } else {
+          this.showDefaultAddr = true
+        }
+      }
+    }
+  }
 </script>
 <style lang="scss" scoped>
   @import '~assets/scss/mobileCommon';
   .mobile-header{
     width:100%;
-    /*position:fixed;*/
+    position:fixed;
     top:0;
     z-index:10000;
     height:.88rem;
@@ -81,7 +143,7 @@
     font-size:.28rem;
     color:#fff;
   }
-  .mobile-header a:last-child{
-    font-size:.4rem;
+  .mobile-header i{
+    font-size:.32rem;
   }
 </style>