cps：省钱接口对接

htmldev/cps/public/index.html

@@ -18,6 +18,8 @@
     Please enable it to continue.</strong>
 </noscript>
 <div id="app"></div>
+<div id="fbt-qr-code" style="display: none;"></div>
+<canvas id="fbt-canvas" style="display:none;"></canvas>
 <!-- built files will be auto injected -->
 </body>
 <script>

htmldev/cps/src/views/marketing/make/api/api.js

@@ -1,10 +0,0 @@
-import request from '@/api/request'
-
-/**
- * 订单列表接口
- */
-export const apiOrderList = (params) => request({
-  method: 'GET',
-  url: '/api/v1/user/order/list',
-  params: params
-})

htmldev/cps/src/views/marketing/make/api/index.js

@@ -0,0 +1,13 @@
+import request from '@/api/request'
+
+/**
+ * 赚钱列表
+ */
+export const apiMakeList = (obj) => request({
+  method: 'GET',
+  url: '/api/home/commission/list',
+  params: {
+    ...obj,
+    type: 0
+  }
+})

htmldev/cps/src/views/marketing/make/index.vue

@@ -26,14 +26,16 @@
           <div class="wrap">
             <div>
               <p class="avatar">
-                <img src="" alt="">
+                <img
+                  :src="item.user_head_img_url"
+                  alt="">
               </p>
-              <p class="user">L YongL YongL Yong</p>
-              <p class="shop">饿了么</p>
+              <p class="user">todo</p>
+              <p class="shop">{{ item.order_title }}</p>
             </div>
-            <p class="money">+99999.00</p>
+            <p class="money">+{{ item.order_commission | fen2Yuan }}</p>
           </div>
-          <p class="date">2021-08-21</p>
+          <p class="date">{{ item.created_at }}</p>
         </li>
         <li class="pullup-wrapper">
           <van-loading
@@ -55,7 +57,7 @@
 <script>
 import BScroll from 'better-scroll'
 import { Toast, Loading } from 'vant'
-import { apiOrderList } from './api/api'
+import { apiMakeList } from './api'
 
 export default {
   components: {
@@ -106,7 +108,7 @@ export default {
       this.isFetchLock = true
       this.pagenum++
       try {
-        const { status, data, msg } = await apiOrderList({ page: this.pagenum, page_size: this.pagesize })
+        const { status, data, msg } = await apiMakeList({ page: this.pagenum, page_size: this.pagesize })
         if (status) {
           const { list } = data
           // 下拉刷新数据清空

htmldev/cps/src/views/marketing/return/api/api.js

@@ -1,10 +0,0 @@
-import request from '@/api/request'
-
-/**
- * 订单列表接口
- */
-export const apiOrderList = (params) => request({
-  method: 'GET',
-  url: '/api/v1/user/order/list',
-  params: params
-})

htmldev/cps/src/views/marketing/return/api/index.js

@@ -0,0 +1,13 @@
+import request from '@/api/request'
+
+/**
+ * 返钱列表
+ */
+export const apiReturnList = (obj) => request({
+  method: 'GET',
+  url: '/api/home/commission/list',
+  params: {
+    ...obj,
+    type: 1
+  }
+})

htmldev/cps/src/views/marketing/return/index.vue

@@ -24,10 +24,10 @@
           :key="index"
           class="list-item">
           <div class="wrap">
-            <p class="shop">饿了么</p>
+            <p class="shop">{{ item.order_title }}</p>
             <p class="money">
               <span>返</span>
-              <span>1.00</span>
+              <span>{{ item.order_commission | fen2Yuan }}</span>
             </p>
           </div>
           <p class="date">2021-08-21</p>
@@ -52,7 +52,7 @@
 <script>
 import BScroll from 'better-scroll'
 import { Toast, Loading } from 'vant'
-import { apiOrderList } from './api/api'
+import { apiReturnList } from './api'
 
 export default {
   components: {
@@ -103,7 +103,7 @@ export default {
       this.isFetchLock = true
       this.pagenum++
       try {
-        const { status, data, msg } = await apiOrderList({ page: this.pagenum, page_size: this.pagesize })
+        const { status, data, msg } = await apiReturnList({ page: this.pagenum, page_size: this.pagesize })
         if (status) {
           const { list } = data
           // 下拉刷新数据清空

htmldev/cps/src/views/marketing/save/index.vue

@@ -71,7 +71,7 @@ export default {
       top.location.href = shop.link_url
     },
     handleShowMall () {
-      this.$refs.myMall.show()
+      this.shops.length && this.$refs.myMall.show()
     },
     async fetchData () {
       try {

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

@@ -28,7 +28,8 @@
 </template>
 
 <script>
-import { Button, Popup, Notify } from 'vant'
+import { Button, Popup, Notify, Toast } from 'vant'
+import QRCode from 'qrcodejs2'
 
 export default {
   name: 'index',
@@ -38,12 +39,129 @@ export default {
   },
   data () {
     return {
-      booShareTip: false
+      booShareTip: false,
+      strPostSrc: '',
+      qrcode: null,
+      codeParams: {}
     }
   },
   methods: {
     handleSave () {
       Notify({ type: 'success', message: '长按图片保存到手机' })
+    },
+    createQRCode () {
+      const { link } = this.codeParams
+      Toast.loading({
+        message: '海报生成中...',
+        forbidClick: true,
+        duration: 0
+      })
+      if (!this.qrcode) {
+        this.qrcode = new QRCode('fbt-qr-code', {
+          width: 212,
+          height: 212,
+          text: link,
+          colorDark: '#000',
+          colorLight: '#fff'
+        })
+      } else {
+        this.qrcode.clear()
+        this.qrcode.makeCode(link)
+      }
+      const timer = setTimeout(() => {
+        clearTimeout(timer)
+        this.createPoster()
+      }, 500)
+    },
+    setImg (params) {
+      const { isDrewCircle } = params
+      const img = new Image()
+      img.crossOrigin = 'anonymous'
+      img.onload = function () {
+        if (isDrewCircle) {
+          params.ctx.beginPath()
+          params.ctx.arc(params.x + params.width / 2, params.y + params.width / 2, params.width / 2, 0, Math.PI * 2, false)
+          params.ctx.clip()
+        }
+        params.ctx.drawImage(img, params.x, params.y, params.width, params.height)
+        params.cb()
+      }
+      img.src = params.src
+    },
+    createPoster () {
+      const vm = this
+      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
+      // 绘制背景
+      vm.setImg({
+        ctx,
+        src: posterBg,
+        x: 0,
+        y: 0,
+        width: 750,
+        height: 1446,
+        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 })
+              }
+            })
+          }
+        }
+      })
     }
   }
 }