静态页面

src/pages/WoDe/TuiJianErWeiMa/index.css

@@ -5,3 +5,15 @@
   background: #f8f8f8;
   overflow: hidden;
 }
+.TuiJianErWeiMa > image {
+  width: 100%;
+  display: block;
+  position: relative;
+  z-index: 1;
+}
+.TuiJianErWeiMa > image.QrCodeImg {
+  position: absolute;
+  z-index: 2;
+  width: 50%;
+  height: auto;
+}

src/pages/WoDe/TuiJianErWeiMa/index.jsx

@@ -1,18 +1,30 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import Taro from '@tarojs/taro'
 import CustomHeader from '@/components/CustomHeader/index'
+import { getQrCodeImage, getCardQrParam } from '@/utils/qrcode'
 import Page from '@/layouts'
+import { useModel } from '@/store'
 import '@/assets/css/reset.less'
 import '@/assets/css/iconfont.less'
 import './index.less'
 
-export default function TuiJianErWeiMa (props) {
+export default function TuiJianErWeiMa () {
+
+  const { user } = useModel('user')
+  const [QrCodeImg, setQrCodeImg] = useState(null)
+
+  useEffect(() => {
+    if (QrCodeImg === null) {
+      setQrCodeImg(getQrCodeImage(getCardQrParam(user)))
+    }
+  }, [QrCodeImg])
 
   return (
     <Page>
       <view className='TuiJianErWeiMa'>
         <CustomHeader IsFixed={true} BgColor='none' Title='推荐二维码'></CustomHeader>
         <image mode='widthFix' src='https://zhiyun-image.oss-cn-shanghai.aliyuncs.com/xiangsong/img2.jpg'></image>
+        <image mode='widthFix' className='QrCodeImg' src={QrCodeImg}></image>
       </view>
     </Page>
   )

src/pages/WoDe/TuiJianErWeiMa/index.less

@@ -10,5 +10,12 @@
     display: block;
     position: relative;
     z-index: 1;
+
+    &.QrCodeImg {
+      position: absolute;
+      z-index: 2;
+      width: 50%;
+      height: auto;
+    }
   }
 }

src/utils/qrcode.js

@@ -1,15 +1,16 @@
 import { apis, request2 } from './request'
 
-export function getCardQrParam(user) {
-  const param = [
-    `id=${user.personId}`,
-    `from=card`,
-    `recommender=${user.personId}`
-  ]
+export function getCardQrParam (user) {
+  // const param = [
+  //   `id=${user.personId}`,
+  //   `from=card`,
+  //   `recommender=${user.personId}`
+  // ]
 
-  return param.join('&')
+  // return param.join('&')
+  return {id: user.personId, from: 'card', recommender: user.personId}
 }
 
-export function getQrCodeImage(data) {
-  return request2({...apis.qrcode, data})
+export function getQrCodeImage (data) {
+  return request2({ ...apis.qrcode, data: { ...data } })
 }