去除悬浮按钮

assets/scss/mobileCommon.scss

@@ -1,9 +1,10 @@
 .mobile-modal {
+  position: fixed;
+  top: 0;
   width: 100%;
   height: 100%;
   z-index: 999;
   background: rgba(0,0,0,.3);
-  position: fixed;
   .mobile-modal-box {
     position: fixed;
     width: 5.92rem;

components/mobile/MobileHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="mobile-nav">
-    <div class="mobile-modal" v-if="showStoreInfo || showShare" @click="cancelModal">
+   <!-- <div class="mobile-modal" v-if="showStoreInfo || showShare" @click="cancelModal">
       <div class="mobile-modal-box" v-if="showStoreInfo" @click="stopPropagation($event)">
         <div class="mobile-modal-header">联系方式<i @click="showStoreInfo = false" class="icon-guanbi iconfont"></i></div>
         <div class="mobile-modal-content" v-if="showDefaultAddr">
@@ -53,7 +53,7 @@
         </div>
         <div class="cancel-share" @click="showShare=false">取消</div>
       </div>
-    </div>
+    </div>-->
     <div class="mobile-header" v-if="showHeader && !showMainSearch">
       <!--<a class="iconfont icon-fanhui" @click="goLastPage">返回</a>-->
       <p>{{title}}
@@ -61,22 +61,22 @@
       </p>
     </div>
     <main-search v-if="showMainSearch" @cancelSearchAction="onCancelSearch"></main-search>
-    <i v-show="rightIcon=='share'" class="iconfont icon-fenxiang" @click="showShare = true" @touchmove="onTouchMove($event)"></i>
-    <i v-show="rightIcon=='phone'" class="iconfont icon-dianhua" @click="showLink" @touchmove="onTouchMove($event)"></i>
+<!--    <i v-show="rightIcon=='share'" class="iconfont icon-fenxiang" @click="showShare = true" @touchmove="onTouchMove($event)"></i>
+    <i v-show="rightIcon=='phone'" class="iconfont icon-dianhua" @click="showLink" @touchmove="onTouchMove($event)"></i>-->
   </div>
 </template>
 <script>
-  import Clipboard from 'clipboard'
+//  import Clipboard from 'clipboard'
   import MainSearch from '~/components/mobile/search/MainSearch.vue'
   export default {
     data () {
       return {
-        showStoreInfo: false,
-        showShare: false,
-        rightIcon: 'phone',
-        showDefaultAddr: true,
-        url: '',
-        clipboard: {},
+//        showStoreInfo: false,
+//        showShare: false,
+//        rightIcon: 'phone',
+//        showDefaultAddr: true,
+//        url: '',
+//        clipboard: {},
         showMainSearch: false,
         title: '优软商城'
       }
@@ -110,19 +110,19 @@
         return this.$route.path !== '/' && !this.$route.path.startsWith('/mobile/search')
       }
     },
-    mounted () {
-      let _this = this
-      _this.url = window.location.href
-      _this.clipboard = new Clipboard('#copyLink')
-      _this.clipboard.on('success', e => {
-        _this.clipboard.destroy()
-        _this.showShare = false
-      })
-      _this.clipboard.on('error', e => {
-        alert('浏览器不支持自动复制，请手动复制')
-        _this.clipboard.destroy()
-      })
-    },
+//    mounted () {
+//      let _this = this
+//      _this.url = window.location.href
+//      _this.clipboard = new Clipboard('#copyLink')
+//      _this.clipboard.on('success', e => {
+//        _this.clipboard.destroy()
+//        _this.showShare = false
+//      })
+//      _this.clipboard.on('error', e => {
+//        alert('浏览器不支持自动复制，请手动复制')
+//        _this.clipboard.destroy()
+//      })
+//    },
     methods: {
       goLastPage: function () {
         window.history.back(-1)
@@ -131,10 +131,10 @@
         let title = '优软商城'
         if (val.startsWith('/mobile/brand/componentDetail/')) {
           title = this.component.code
-          this.rightIcon = 'share'
+//          this.rightIcon = 'share'
         } else if (val.startsWith('/mobile/brand/brandCenter')) {
           title = '品牌墙'
-          this.rightIcon = 'share'
+//          this.rightIcon = 'share'
         } else if (val.startsWith('/mobile/brand/')) {
           if (this.brandDetail.nameCn) {
             if (this.brandDetail.nameCn !== this.brandDetail.nameEn) {
@@ -149,91 +149,91 @@
               title = this.component.brand.nameCn
             }
           }
-          this.rightIcon = 'share'
+//          this.rightIcon = 'share'
         } else if (val.startsWith('/mobile/shop/')) {
           title = this.store.storeName
-          this.rightIcon = 'phone'
+//          this.rightIcon = 'phone'
         } else if (val.startsWith('/mobile/shop')) {
           title = '店铺列表'
-          this.rightIcon = 'phone'
+//          this.rightIcon = 'phone'
         } else if (val.startsWith('/mobile/user')) {
           title = '我的收藏'
-          this.rightIcon = 'phone'
+//          this.rightIcon = 'phone'
         } else if (val.startsWith('/mobile/search')) {
           title = '搜索结果'
-          this.rightIcon = 'share'
+//          this.rightIcon = 'share'
         } else if (val === '' || val === '/' || !val) {
           title = '优软商城'
-          this.rightIcon = 'phone'
+//          this.rightIcon = 'phone'
         } else {
           title = '优软商城'
-          this.rightIcon = 'phone'
+//          this.rightIcon = 'phone'
         }
         return title
       },
-      showLink: function () {
-        this.showStoreInfo = true
-        if (this.$route.path.startsWith('/mobile/shop/')) {
-          this.showDefaultAddr = false
-        } else {
-          this.showDefaultAddr = true
-        }
-      },
-      shareWeibo: function () {
-        let _shareUrl = 'http://v.t.sina.com.cn/share/share.php?&appkey=895033136'     // 真实的appkey，必选参数
-        _shareUrl += '&url=' + encodeURIComponent(document.location)     // 参数url设置分享的内容链接|默认当前页location，可选参数
-        _shareUrl += '&title=' + encodeURIComponent(document.title)    // 参数title设置分享的标题|默认当前页标题，可选参数
-        _shareUrl += '&source=' + encodeURIComponent('')
-        _shareUrl += '&sourceUrl=' + encodeURIComponent('')
-        _shareUrl += '&content=' + 'utf-8'   // 参数content设置页面编码gb2312|utf-8，可选参数
-        _shareUrl += '&pic=' + encodeURIComponent('')  // 参数pic设置图片链接|默认为空，可选参数
-        window.open(_shareUrl)
-        this.showShare = false
-      },
-      shareWeChat: function () {
-      },
-      shareQQ: function () {
-        let url = encodeURIComponent(document.location)
-        let title = encodeURIComponent(document.title)
-        let source = encodeURIComponent('')
-        let desc = '优软商城'
-        let pics = 'http://dfs.ubtob.com/group1/M00/4F/C3/CgpkyFnxWjOAMy5DAAlh1PrLlc8684.png'
-        window.open('http://connect.qq.com/widget/shareqq/index.html?url=' +
-          url + '&title=' + title + '&source=' + source + '&desc=' + desc + '&pics=' + pics)
-        this.showShare = false
-      },
-      shareMessage: function () {
-        document.getElementById('share-sms').click()
-      },
-      shareEmail: function () {
-        document.getElementById('share-mail').click()
-      },
-      flash: function () {
-        window.location.reload()
-      },
-      copyLink: function () {
-        let _this = this
-        _this.url = window.location.href
-        _this.clipboard = new Clipboard('#copyLink')
-      },
-      onTouchMove: function (e) {
-        let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
-        let height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
-        let x = Math.min(width - 40, e.touches[0].clientX)
-        let y = Math.min(height - 40, e.touches[0].clientY)
-        x = Math.max(0, x)
-        y = Math.max(0, y)
-        e.preventDefault()
-        e.target.style.left = x * 2 / 100.0 + 'rem'
-        e.target.style.top = y * 2 / 100.0 + 'rem'
-      },
+//      showLink: function () {
+//        this.showStoreInfo = true
+//        if (this.$route.path.startsWith('/mobile/shop/')) {
+//          this.showDefaultAddr = false
+//        } else {
+//          this.showDefaultAddr = true
+//        }
+//      },
+//      shareWeibo: function () {
+//        let _shareUrl = 'http://v.t.sina.com.cn/share/share.php?&appkey=895033136'     // 真实的appkey，必选参数
+//        _shareUrl += '&url=' + encodeURIComponent(document.location)     // 参数url设置分享的内容链接|默认当前页location，可选参数
+//        _shareUrl += '&title=' + encodeURIComponent(document.title)    // 参数title设置分享的标题|默认当前页标题，可选参数
+//        _shareUrl += '&source=' + encodeURIComponent('')
+//        _shareUrl += '&sourceUrl=' + encodeURIComponent('')
+//        _shareUrl += '&content=' + 'utf-8'   // 参数content设置页面编码gb2312|utf-8，可选参数
+//        _shareUrl += '&pic=' + encodeURIComponent('')  // 参数pic设置图片链接|默认为空，可选参数
+//        window.open(_shareUrl)
+//        this.showShare = false
+//      },
+//      shareWeChat: function () {
+//      },
+//      shareQQ: function () {
+//        let url = encodeURIComponent(document.location)
+//        let title = encodeURIComponent(document.title)
+//        let source = encodeURIComponent('')
+//        let desc = '优软商城'
+//        let pics = 'http://dfs.ubtob.com/group1/M00/4F/C3/CgpkyFnxWjOAMy5DAAlh1PrLlc8684.png'
+//        window.open('http://connect.qq.com/widget/shareqq/index.html?url=' +
+//          url + '&title=' + title + '&source=' + source + '&desc=' + desc + '&pics=' + pics)
+//        this.showShare = false
+//      },
+//      shareMessage: function () {
+//        document.getElementById('share-sms').click()
+//      },
+//      shareEmail: function () {
+//        document.getElementById('share-mail').click()
+//      },
+//      flash: function () {
+//        window.location.reload()
+//      },
+//      copyLink: function () {
+//        let _this = this
+//        _this.url = window.location.href
+//        _this.clipboard = new Clipboard('#copyLink')
+//      },
+//      onTouchMove: function (e) {
+//        let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
+//        let height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
+//        let x = Math.min(width - 40, e.touches[0].clientX)
+//        let y = Math.min(height - 40, e.touches[0].clientY)
+//        x = Math.max(0, x)
+//        y = Math.max(0, y)
+//        e.preventDefault()
+//        e.target.style.left = x * 2 / 100.0 + 'rem'
+//        e.target.style.top = y * 2 / 100.0 + 'rem'
+//      },
       onCancelSearch: function () {
         this.showMainSearch = false
       },
-      cancelModal: function () {
-        this.showStoreInfo = false
-        this.showShare = false
-      },
+//      cancelModal: function () {
+//        this.showStoreInfo = false
+//        this.showShare = false
+//      },
       stopPropagation: function (event) {
         event.stopPropagation()
       },

pages/mobile/shop/index.vue

@@ -21,12 +21,24 @@
           <p>电话：<span>{{item.enterprise.enTel}}</span></p>
           <p>传真：<span>{{item.enterprise.enFax}}</span></p>
           <!--<p>商家介绍： <nuxt-link :to="'/mobile/merchantDescription/'+item.uuid">点击查看</nuxt-link></p>-->
+          <p>联系商家：<a @click="selectStoreInfo(item, $event)">点击查看</a></p>
           <i class="iconfont icon-shoucang" :style="item.isFocus=='true'?'color:#ff7800':'color:#bbb'" @click="focusStore(item, $event)"></i>
         </div>
       </div>
     </div>
     <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
     <loading v-show="isSearchingMore"></loading>
+    <div class="mobile-modal" v-if="showStoreInfo">
+      <div class="mobile-modal-box">
+        <div class="mobile-modal-header">联系方式<i @click="showStoreInfo = false" class="icon-guanbi iconfont"></i></div>
+        <div class="mobile-modal-content">
+          <div v-if="checkInfo(enterpriseInfo.address || enterpriseInfo.enAddress)">商家地址：{{enterpriseInfo.address || enterpriseInfo.enAddress}}</div>
+          <div class="content-line link-url">在线咨询</div>
+          <div v-if="checkInfo(enterpriseInfo.enTel)">致电：<a href="tel:0755-96586323" class="content-line link-url">{{enterpriseInfo.enTel}}</a></div>
+          <div v-if="checkInfo(enterpriseInfo.enEmail)">邮件：<a href="mailto:yrsc@usoftchina.com" class="content-line link-url">{{enterpriseInfo.enEmail}}</a></div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -46,7 +58,9 @@
         timeoutCount: 0,
         isSearchingMore: false,
         searchLists: [],
-        isChange: false
+        isChange: false,
+        showStoreInfo: false,
+        enterpriseInfo: {}
       }
     },
     components: {
@@ -149,12 +163,21 @@
       },
       goStoreDetail: function (uuid) {
         this.$router.push('/mobile/shop/' + uuid)
+      },
+      selectStoreInfo: function (store, $event) {
+        $event.stopPropagation()
+        this.enterpriseInfo = store.enterprise || {}
+        this.showStoreInfo = true
+      },
+      checkInfo: function (str) {
+        return str && str.trim() !== ''
       }
     }
   }
 </script>
 
 <style scoped lang="scss">
+  @import '~assets/scss/mobileCommon';
   .shop{
     margin-bottom: .98rem;
     min-height: 10rem;