完成二维码显示

pages/show_product/show_product.js

@@ -11,6 +11,7 @@ Page({
     pixelRatio: 2,
     accountType: '',
     from_share: false,
+
     codeFloatingData: {},
     codeFloatingStyle: {
       width: 100,
@@ -20,7 +21,9 @@ Page({
     codeFloatingPos: {
       left: 650,
       top: 650
-    }
+    },
+    codeFloatingUrl: '',
+    codeFloatingImgStyle: ''
   },
 
   onShareAppMessage: function () {
@@ -77,6 +80,11 @@ Page({
         title: product.name
       })
     }
+
+    var reqPath = {path: `pages/show_product/show_product?id=${this.data.product.id}&share=1`}
+    productUtil.getProductPageQrCode(reqPath, function(resp){
+      that.setData({codeFloatingUrl: resp.data.url})
+    })
   },
 
   onShow() {
@@ -176,13 +184,13 @@ Page({
       timingFunction: 'ease',
     })
 
-    var state
+    var state, width
     if (this.data.codeFloatingState == "small") {
-      let width = "750rpx"
+      width = "750rpx"
       state = 'big'
       animation.left(0).top('100rpx').width(width).height(width).step()
     } else {
-      let width = "100rpx"
+      width = "100rpx"
       let pos = this.data.codeFloatingPos
       state = 'small'
       animation.left(`${pos.left}rpx`).top(`${pos.top}rpx`).width(width).height(width).step()
@@ -190,7 +198,8 @@ Page({
 
     this.setData({
       codeFloatingData: animation.export(),
-      codeFloatingState: state
+      codeFloatingState: state,
+      codeFloatingImgStyle: `width: ${width}; height: ${width};`
     })
   }
 })

pages/show_product/show_product.wxml

@@ -38,4 +38,5 @@
 </view>
 
 <view id="codeFloating" catchtouchmove="changeCodeState" catchtap="catchScaleCode" animation="{{codeFloatingData}}">
+  <image src="{{codeFloatingUrl || '../../images/1.png'}}" style="{{codeFloatingImgStyle}}"></image>
 </view>

pages/show_product/show_product.wxss

@@ -55,7 +55,12 @@
   bottom: 20%;
   left: 650rpx;
   top: 650rpx;
-  background:red;
-  height:100rpx;
-  width:100rpx;
+  background: transparent;
+  height: 100rpx;
+  width: 100rpx;
+}
+
+#codeFloating image {
+  height: 100rpx;
+  width: 100rpx;
 }

utils/product.js

@@ -32,6 +32,15 @@ function getCategories (data, resolve, reject) {
   })
 }
 
+function getProductPageQrCode (data, resolve) {
+  app.request({
+    url: `${app.globalData.API_URL}/product_qr_codes/image`,
+    data: data,
+    success: resolve,
+    fail: function() {}
+  })
+}
+
 
 module.exports = {
   getProducts (resolve) {
@@ -48,5 +57,9 @@ module.exports = {
 
   getCategories (data, resolve, reject) {
     return getCategories(data, resolve, reject)
+  },
+
+  getProductPageQrCode (data, resolve) {
+    return getProductPageQrCode(data, resolve)
   }
 }