cps：账单详情

htmldev/cps/src/views/recommend/api/api.js

@@ -0,0 +1,13 @@
+import request from '@/api/request'
+
+/**
+ * 获取用户推广二维码
+ * @returns {AxiosPromise}
+ */
+export const apiRecommendUrl = () => request({
+  method: 'GET',
+  url: '/api/user/recommend/url',
+  params: {
+    code: 'fanbuting'
+  }
+})

htmldev/cps/src/views/recommend/index.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="recommend-container">
     <div class="poster">
-      <img src="" alt="">
+      <img
+        :src="strPostSrc"
+        alt="">
     </div>
     <div class="footer">
       <van-button
@@ -29,6 +31,7 @@
 
 <script>
 import { Button, Popup, Notify, Toast } from 'vant'
+import { apiRecommendUrl } from './api/api'
 import QRCode from 'qrcodejs2'
 
 export default {
@@ -42,13 +45,36 @@ export default {
       booShareTip: false,
       strPostSrc: '',
       qrcode: null,
-      codeParams: {}
+      codeParams: {},
+      posterBg: require('./image/bg.png')
+    }
+  },
+  computed: {
+    userInfo () {
+      return this.$store.state.common.userinfo
     }
   },
+  created () {
+    this.fetchRecommendUrl()
+  },
   methods: {
     handleSave () {
       Notify({ type: 'success', message: '长按图片保存到手机' })
     },
+    async fetchRecommendUrl () {
+      try {
+        const { status, data, msg } = await apiRecommendUrl()
+        if (status) {
+          const { url } = data
+          this.$set(this.codeParams, 'link', url)
+          this.$nextTick(() => {
+            this.createQRCode()
+          })
+        } else {
+          Toast(msg)
+        }
+      } catch (err) {}
+    },
     createQRCode () {
       const { link } = this.codeParams
       Toast.loading({
@@ -90,15 +116,15 @@ export default {
     },
     createPoster () {
       const vm = this
+      const userNickname = this.userInfo.user_nickname
       const { posterBg } = this
-      const { partnerImgUrl, partnerName, x, y, width, height } = this.codeParams
       const canvas = document.getElementById('fbt-canvas')
       const ctx = canvas.getContext('2d')
       const canvas2 = document.getElementById('fbt-qr-code').getElementsByTagName('canvas')[0]
       const code = {}
       code.src = canvas2.toDataURL('image/png', 1)
       canvas.width = 750
-      canvas.height = 1446
+      canvas.height = 1110
       // 绘制背景
       vm.setImg({
         ctx,
@@ -106,60 +132,31 @@ export default {
         x: 0,
         y: 0,
         width: 750,
-        height: 1446,
+        height: 1110,
         cb () {
-          if (partnerImgUrl) {
-            ctx.font = '400 28px/40px STYuanti-Regular'
-            ctx.fillStyle = '#C9AD8D'
-            ctx.fillText('推广人：', 236, 1128)
-            ctx.save()
-            vm.setImg({
-              ctx,
-              src: partnerImgUrl,
-              x: 346,
-              y: 1100,
-              width: 40,
-              height: 40,
-              isDrewCircle: true,
-              cb () {
-                ctx.restore()
-                ctx.font = '600 28px/40px STYuanti-Regular'
-                ctx.fillStyle = '#C9AD8D'
-                ctx.fillText(partnerName, 398, 1130)
-                // 绘制二维码
-                vm.setImg({
-                  ctx,
-                  src: code.src,
-                  x: x,
-                  y: y,
-                  width: width,
-                  height: height,
-                  cb () {
-                    vm.strPostSrc = canvas.toDataURL('image/png', 1)
-                    vm.showPoster = true
-                    Toast.clear()
-                    Notify({ type: 'primary', message: '长按图片保存到相册', duration: 3000 })
-                  }
-                })
-              }
-            })
-          } else {
-            // 绘制二维码
-            vm.setImg({
-              ctx,
-              src: code.src,
-              x: x,
-              y: y,
-              width: width,
-              height: height,
-              cb () {
-                vm.strPostSrc = canvas.toDataURL('image/png', 1)
-                vm.showPoster = true
-                Toast.clear()
-                Notify({ type: 'primary', message: '长按图片保存到相册', duration: 3000 })
-              }
-            })
-          }
+          ctx.restore()
+          ctx.font = '600 28px/40px STYuanti-Regular'
+          ctx.fillStyle = '#FA4A4A'
+          ctx.fillText('扫码开启"返不停"', 100, 960)
+
+          ctx.font = '400 24px/40px STYuanti-Regular'
+          ctx.fillStyle = '#000'
+          ctx.fillText('推荐人：' + userNickname, 100, 1020)
+          // 绘制二维码
+          vm.setImg({
+            ctx,
+            src: code.src,
+            x: 510,
+            y: 875,
+            width: 212,
+            height: 212,
+            cb () {
+              vm.strPostSrc = canvas.toDataURL('image/png', 1)
+              vm.showPoster = true
+              Toast.clear()
+              Notify({ type: 'primary', message: '长按图片保存到相册', duration: 3000 })
+            }
+          })
         }
       })
     }
@@ -174,7 +171,6 @@ export default {
 
 .poster {
   width: 344px;
-  height: 586px;
   margin: 22px auto 0;
   box-shadow: 0 2px 4px 0 rgba(209, 219, 236, 0.72);
   border-radius: 8px;