手机端店铺分享

components/mobile/share/store/CommodityList.vue

@@ -7,7 +7,7 @@
       </div>
       <div class="fr">真实库存、真实价格</div>
     </div>
-    <ul>
+    <ul v-if="commodities.content && commodities.content.length">
       <li v-for="commodity in commodities.content">
         <div class="fl">
           <p>{{commodity.code || '-'}}</p>
@@ -19,6 +19,10 @@
         </div>
       </li>
     </ul>
+    <div v-else class="empty">
+      <img src="/images/mobile/@2x/shareStore/empty.png" alt="">
+      <p>抱歉，该店铺暂未上架商品</p>
+    </div>
   </div>
 </template>
 <script>
@@ -31,6 +35,7 @@
     computed: {
       commodities () {
         return this.$store.state.shop.storeInfo.storeCommodity.data
+//        return []
       },
       date () {
         let now = new Date()
@@ -116,5 +121,18 @@
         }
       }
     }
+    .empty {
+      text-align: center;
+      padding: 1.44rem 0 2.04rem 0;
+      img {
+        width: 1.21rem;
+        height: 1.21rem;
+      }
+      p {
+        font-size: .24rem;
+        color: #ddd;
+        margin-top: .17rem;
+      }
+    }
   }
 </style>

components/store/common/StoreHeader.vue

@@ -25,6 +25,17 @@
                     <img src="/images/all/songguo.png">
 							      <a @click="goWebChat()" class="contact_btn">联系卖家</a>
                   </span>
+                  <div class="share">
+                    <span @click="setShowShare(!showShare, $event)">生成手机版链接</span>
+                    <div v-if="showShare">
+                      <i class="icon-guanbi1 iconfont" @click="setShowShare(false, $event)"></i>
+                      <h1>分享链接</h1>
+                      <p>随时随地使用手机查看店铺现货</p>
+                      <vue-q-art :config="config"></vue-q-art>
+                      <input :value="url" readonly>
+                      <span id="copyLink"  :data-clipboard-text="url">复制链接</span>
+                    </div>
+                  </div>
                 </div>
               </div>
               <div class="clearfix"></div>
@@ -70,17 +81,44 @@
   </div>
 </template>
 <script>
+import Clipboard from 'clipboard'
 import SearchBox from '~components/main/Search.vue'
 export default {
   name: 'store-header',
   data () {
     return {
       isOpen: false,
-      dialogVisible: false
+      dialogVisible: false,
+      clipboard: {},
+      showShare: false
+//      config: {
+//        value: 'https://www.baidu.com',
+//        imagePath: '/images/all/default.png',
+//        filter: 'color'
+//      }
     }
   },
   components: {
-    SearchBox
+    SearchBox,
+    VueQArt: (resolve) => {
+      require(['vue-qart'], resolve)
+    }
+  },
+  mounted () {
+    let _this = this
+    _this.url = window.location.href
+    _this.clipboard = new Clipboard('#copyLink')
+    _this.clipboard.on('success', e => {
+      _this.clipboard.destroy()
+      _this.$message.success('已复制到剪切板')
+    })
+    _this.clipboard.on('error', e => {
+      _this.$message.error('浏览器不支持自动复制，请手动复制')
+      _this.clipboard.destroy()
+    })
+    document.addEventListener('click', function () {
+      _this.showShare = false
+    })
   },
   computed: {
     storeInfo () {
@@ -94,6 +132,20 @@ export default {
     },
     tab () {
       return this.$store.state.chat.tab.tab.data
+    },
+    url: {
+      get: function () {
+        return '/mobile/share/storeShare/' + this.storeInfo.uuid
+      },
+      set: function () {
+      }
+    },
+    config () {
+      return {
+        value: this.url,
+        imagePath: '/images/all/default.png',
+        filter: 'color'
+      }
     }
   },
   methods: {
@@ -177,6 +229,10 @@ export default {
             newTab.location.href = 'https://im.ubtob.com/chat/visit?gid=' + response.data.content
           }
         })
+    },
+    setShowShare: function (flag, event) {
+      event.stopPropagation()
+      this.showShare = flag
     }
   }
 }
@@ -475,4 +531,50 @@ export default {
     background: #ef7f03;
     border-radius: 2px;
   }
+  .icon-style .share {
+    display: inline-block;
+    margin-left: 5px;
+    position: relative;
+  }
+  .icon-style .share > span {
+    color: #4290f7;
+    cursor: pointer;
+  }
+  .icon-style .share > div {
+    position: absolute;
+    top: 26px;
+    left: -94px;
+    width: 300px;
+    height: 380px;
+    background: #fff;
+    box-shadow: 1px 1px 4px 0 #ccbebe;
+    z-index: 1;
+    text-align: center;
+  }
+  .icon-style .share > div input {
+    display: inline-block;
+    width: 140px;
+    overflow: hidden;
+    height: 35px;
+    vertical-align: middle;
+  }
+  .icon-style .share > div span {
+    display: inline-block;
+    color: #fff;
+    background: #4290f7;
+    height: 36px;
+    line-height: 36px;
+    width: 70px;
+    font-style: normal;
+    vertical-align: middle;
+    cursor: pointer;
+  }
+  .icon-style .share > div i {
+    position: absolute;
+    right: 10px;
+    top: 5px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: bold;
+  }
 </style>

nuxt.config.js

@@ -1,6 +1,6 @@
 const path = require('path')
 const isProdMode = Object.is(process.env.NODE_ENV, 'production')
-const baseUrl = process.env.BASE_URL || (isProdMode ? 'http://192.168.253.60:9090/platform-b2c/' : 'http://10.1.51.90:8080/platform-b2c/')
+const baseUrl = process.env.BASE_URL || (isProdMode ? 'http://192.168.253.60:9090/platform-b2c/' : 'http://192.168.253.121:9090/platform-b2c/')
 const commonUrl = process.env.COMMON_URL || (isProdMode ? 'http://218.17.158.219:24000/' : 'http://218.17.158.219:24000/')
 
 module.exports = {

package.json

@@ -18,6 +18,7 @@
     "jsonp": "^0.2.1",
     "nuxt": "0.10.6",
     "vue-awesome-swiper": "^2.5.4",
+    "vue-qart": "^2.1.1",
     "vue2-filters": "^0.1.9"
   },
   "scripts": {

plugins/qart.js

@@ -0,0 +1,4 @@
+import VueQArt from 'vue-qart'
+import Vue from 'vue'
+
+Vue.use(VueQArt)