联系商家和分享按钮

assets/scss/mobileCommon.scss

@@ -17,6 +17,13 @@
       color: #fff;
       text-align: center;
       font-size: .32rem;
+      position: relative;
+      i {
+        position: absolute;
+        right: -13px;
+        font-size: .32rem;
+        bottom: 46px;
+      }
     }
     .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

@@ -2,12 +2,17 @@
   <div>
     <div class="mobile-modal" v-if="showStoreInfo || showShare">
       <div class="mobile-modal-box" v-if="showStoreInfo">
-        <div class="mobile-modal-header">联系方式</div>
-        <div class="mobile-modal-content">
+        <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">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" v-if="showShare">
         <div class="share-area">
@@ -48,7 +53,8 @@
     <div class="mobile-header">
       <a class="iconfont icon-fanhui" @click="goLastPage">返回</a>
       <p>{{title}}</p>
-      <i class="iconfont icon-fenxiang" @click="showShare = !showShare"></i>
+      <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>
@@ -58,14 +64,55 @@
       return {
         showStoreInfo: false,
         showShare: false,
-        title: '优软商城'
+        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
+        }
       }
     }
   }
@@ -94,7 +141,7 @@
     font-size:.28rem;
     color:#fff;
   }
-  .mobile-header a:last-child{
-    font-size:.4rem;
+  .mobile-header i{
+    font-size:.32rem;
   }
 </style>