店铺分享

components/mobile/share/store/CommodityList.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="share-store-commodity">
-    <div class="title">
+    <div class="title" v-if="commodities.content && commodities.content.length">
       <img src="/images/mobile/@2x/shareStore/commodity-title@2x.png" alt="">
       <div class="date">
         <span>{{date.month}}</span>月<span>{{date.day}}</span>日
       </div>
       <div class="fr">真实库存、真实价格</div>
     </div>
-    <ul v-if="commodities.content && commodities.content.length">
+    <ul>
       <li v-for="commodity in commodities.content">
         <div class="fl">
           <p>{{commodity.code || '-'}}</p>
@@ -19,7 +19,7 @@
         </div>
       </li>
     </ul>
-    <div v-else class="empty">
+    <div v-if="!commodities.content || !commodities.content.length" class="empty">
       <img src="/images/mobile/@2x/shareStore/empty.png" alt="">
       <p>抱歉，该店铺暂未上架商品</p>
     </div>

components/store/common/StoreHeader.vue

@@ -27,13 +27,13 @@
                   </span>
                   <div class="share">
                     <span @click="setShowShare(!showShare, $event)">生成手机版链接</span>
-                    <div v-if="showShare">
+                    <div v-show="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="hrefUrl" readonly>
-                      <span id="copyLink"  :data-clipboard-text="hrefUrl">复制链接</span>
+                      <canvas id="qrccode-canvas"></canvas>
+                      <input v-if="showShare" :value="url" readonly>
+                      <span v-if="showShare" id="copyLink"  :data-clipboard-text="url">复制链接</span>
                     </div>
                   </div>
                 </div>
@@ -83,6 +83,9 @@
 <script>
 import Clipboard from 'clipboard'
 import SearchBox from '~components/main/Search.vue'
+
+let QRCode = require('qrcode')
+
 export default {
   name: 'store-header',
   data () {
@@ -90,20 +93,11 @@ export default {
       isOpen: false,
       dialogVisible: false,
       clipboard: {},
-      showShare: false,
-      hrefUrl: 'https://www.usoftmall.com'
-//      config: {
-//        value: 'https://www.baidu.com',
-//        imagePath: '/images/all/default.png',
-//        filter: 'color'
-//      }
+      showShare: false
     }
   },
   components: {
-    SearchBox,
-    VueQArt: (resolve) => {
-      require(['vue-qart'], resolve)
-    }
+    SearchBox
   },
   mounted () {
     let _this = this
@@ -136,21 +130,23 @@ export default {
     },
     url: {
       get: function () {
-        this.hrefUrl = window.location.protocol + '//' + window.location.host + '/mobile/share/storeShare/' + this.storeInfo.uuid
-        return '/mobile/share/storeShare/' + this.storeInfo.uuid
+        return window.location.protocol + '//' + window.location.host + '/mobile/share/storeShare/' + this.storeInfo.uuid
       },
       set: function () {
       }
-    },
-    config () {
-      return {
-        value: window.location.protocol + '//' + window.location.host + this.url,
-        imagePath: '/images/all/default.png',
-        filter: 'color'
-      }
     }
   },
   methods: {
+    loadQRcode: function () {
+      let canvas = document.getElementById('qrccode-canvas')
+      QRCode.toCanvas(canvas, this.url, (error) => {
+        if (error) {
+          console.log(error)
+        } else {
+          console.log('QRcode success')
+        }
+      })
+    },
     closeDropDown () {
       this.isOpen = false
     },
@@ -234,6 +230,7 @@ export default {
     },
     setShowShare: function (flag, event) {
       event.stopPropagation()
+      this.loadQRcode()
       this.showShare = flag
     }
   }

package.json

@@ -17,8 +17,8 @@
     "http-proxy-middleware": "^0.17.4",
     "jsonp": "^0.2.1",
     "nuxt": "0.10.6",
+    "qrcode": "^1.2.0",
     "vue-awesome-swiper": "^2.5.4",
-    "vue-qart": "^2.1.1",
     "vue2-filters": "^0.1.9"
   },
   "scripts": {