feats

src/app.jsx

@@ -37,6 +37,13 @@ class App extends Component {
   onLaunch (options) {
     // 加载远程字体
     this.loadFontFace()
+
+    // 当前设备相关
+    Taro.getSystemInfo({
+      success: (data) => {
+        Taro.setStorage({ key: 'systemInfo', data })
+      }
+    })
   
     getLocation().then((loc) => {
       getRouterParams(options).then(router => {

src/components/Auth/AuthRole.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+
+export default (props) => {
+  const { role } = props
+
+  const { person } = useSelector(s => s.user.userInfo)
+  const { personType } = person || {}
+  const isSame = personType === role
+
+  return isSame ? props.children : null
+}

src/components/Poster/index.jsx

@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from 'react'
+import Taro from '@tarojs/taro'
+import { Canvas, View } from '@tarojs/components'
+import rtLog from '@/utils/rtLog'
+import { getConfig, getCanvas } from './sdk'
+
+export default (props) => {
+  const { poster, miniCode, name, desc = '长按识别在线看房', onStart, onEnd } = props
+
+  const [posterData, setPosterData] = useState()
+  const [codeData, setCodeData] = useState()
+  const [canvas, setCanvas] = useState()
+
+  useEffect(() => {
+    Taro.nextTick(() => {
+      getCanvas('#canvas-poster').then(setCanvas)
+    })
+  }, [])
+
+  useEffect(() => {
+    if (poster) {
+      Taro.downloadFile({
+        url: poster,
+        success: (res) => {
+          if (res.statusCode === 200) {
+            setPosterData(res.tempFilePath)
+          }
+        },
+        fail: (err) => {
+          rtLog.error(err)
+          Taro.showToast({
+            title: '下载海报图出错',
+            icon: 'none',
+          })
+        }
+      })
+    }
+  }, [poster])
+  
+  useEffect(() => {
+    if (miniCode) {
+      Taro.downloadFile({
+        url: miniCode,
+        success: (res) => {
+          if (res.statusCode === 200) {
+            setCodeData(res.tempFilePath)
+          }
+        },
+        fail: (err) => {
+          rtLog.error(err)
+          Taro.showToast({
+            title: '下载海报二维码出错',
+            icon: 'none',
+          })
+        }
+      })
+    }
+  }, [miniCode])
+
+  useEffect(() => {
+    if (canvas && posterData && codeData) {
+      onStart()
+      const config = getConfig()
+      const dpr = config.systemInfo.pixelRatio
+      const ctx = canvas.getContext('2d')
+      canvas.width = config.canvas.width
+      canvas.height = config.canvas.height
+      ctx.scale(dpr, dpr)
+
+      //
+    }
+  }, [canvas, posterData, codeData, onStart, onEnd])
+
+  return <View style={{width: 0, height: 0}}><Canvas type='2d' id='canvas-poster' /></View>
+}

src/components/Poster/sdk.js

@@ -0,0 +1,112 @@
+import Taro from '@tarojs/taro'
+
+/**
+ * 获取配置
+ * @returns 
+ */
+export function getConfig() {
+  // https://developers.weixin.qq.com/miniprogram/dev/api/base/system/wx.getSystemInfo.html
+  const systemInfo = Taro.getStorageSync('systemInfo')
+  const { windowWidth, pixelRatio } = systemInfo
+
+  // canvas
+  const canvas = {
+    width: windowWidth * pixelRatio,
+    // 设计稿宽高比 2.16  = height / width
+    height: windowWidth * pixelRatio * 2.16,
+  }
+
+  // 图片
+  const image = {
+    width: canvas.width,
+    height: canvas.width * 16 / 9, // 图片宽高 9 : 16
+    x: 0,
+    y: 0,
+  }
+
+  // 头像
+  const avatar = {
+    width: 88,
+    height: 88,
+    x: 30,
+    y: image.height + 50,
+  }
+
+  // 小程序码
+  const miniCode = {
+    width: 132,
+    height: 132,
+    x: canvas.width - 132 - 30,  // 128 是宽度, 30 是右边距
+    y: image.height + 50,
+  }
+
+  // 姓名
+  const name = {
+    // https://developer.mozilla.org/zh-CN/docs/Web/CSS/font
+    font: '28px',
+    // https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/fillStyle
+    fillStyle: '#333333',
+
+    // 60 是头像左边距 + 小程序码右边距
+    // 40 是文字距离头像的左边距 20 + 距离小程序码的右边距 20
+    maxWidth: canvas.width - 60 - avatar.width - miniCode.width - 40,
+
+    x: image.height + 66,
+    // 30 是头像左边距, 20 文字距离头像的左边距
+    y: 30 + avatar.width + 20,
+  }
+
+  // 说明
+  const desc = {
+    font: '20px',
+    fillStyle: '#666666',
+    maxWidth: name.maxWidth,
+    x: name.x,
+    y: image.height + 106,
+  }
+
+  return {
+    systemInfo,
+    canvas,
+    image,
+    miniCode,
+    name,
+    desc,
+  }
+}
+
+/**
+ * 绘制图像
+ * @param {*} ctx 
+ * @param {*} image 
+ * @param {*} config 
+ */
+export function drawImage(ctx, image, config) {
+  ctx.drawImage(image, config.x, config.y, config.width, config.height)
+}
+
+/**
+ * 绘制文字
+ * @param {*} ctx 
+ * @param {*} text 
+ * @param {*} config 
+ */
+export function darwText(ctx, text, config) {
+  ctx.setFillStyle(config.fillStyle)
+  ctx.font = config.font
+  ctx.fillText(text, config.x, config.y, config.maxWidth)
+}
+
+/**
+ * 获取 canvas
+ * @param {*} selector 
+ * @returns 
+ */
+export function getCanvas(selector) {
+  return new Promise((resolve) => {
+    const query = Taro.createSelectorQuery()
+    query.select(selector)
+      .node((res) => resolve(res.node))
+      .exec()
+  })
+}

src/pages/index/buildingDetail/components/DetailBottom/index.jsx

@@ -2,6 +2,9 @@ import React from 'react'
 import Taro from '@tarojs/taro'
 import { useSelector } from 'react-redux'
 import { Image } from '@tarojs/components'
+import AuthRole from '@/components/auth/AuthRole'
+import Poster from '@/components/Poster'
+import { ROLE_CODE } from '@/constants/user'
 import './index.scss'
 
 export default function DetailBottom (props) {
@@ -33,25 +36,38 @@ export default function DetailBottom (props) {
     }
   }
 
+  const handleRecommender = () => {
+    const params = `buildingId=${Info?.buildingId}&buildingName=${Info?.buildingName}`
+
+    Taro.navigateTo({
+      url: `/pages/mine/recommendUser/index?${params}`
+    })
+  }
+
   return (
-    <view className='components DetailBottom flex-h'>
-      <view className='Item'>
-        <Image mode='heightFix' src={require('@/assets/buildingDetail-icon3.png')}></Image>
-        <text>一键海报</text>
-      </view>
-      <view className='Item'>
-        <Image mode='heightFix' src={require('@/assets/buildingDetail-icon1.png')}></Image>
-        <text>一键带看</text>
-      </view>
-      <view className='Item'>
-        <Image mode='heightFix' src={require('@/assets/buildingDetail-icon2.png')}></Image>
-        <text>一键推荐</text>
-      </view>
-      <view className='flex-item'></view>
-      <view className='Btn'>
-        <text onClick={handleChat}>一键咨询</text>
-        <text className='active' onClick={handleCall}>一键电话</text>
+    <view>
+      <view className='components DetailBottom flex-h'>
+        <view className='Item'>
+          <Image mode='heightFix' src={require('@/assets/buildingDetail-icon3.png')}></Image>
+          <text>一键海报</text>
+        </view>
+        <view className='Item'>
+          <Image mode='heightFix' src={require('@/assets/buildingDetail-icon1.png')}></Image>
+          <text>一键带看</text>
+        </view>
+        <AuthRole role={ROLE_CODE.CONSULTANT}>
+          <view className='Item' onClick={handleRecommender}>
+            <Image mode='heightFix' src={require('@/assets/buildingDetail-icon2.png')}></Image>
+            <text>一键推荐</text>
+          </view>
+        </AuthRole>
+        <view className='flex-item'></view>
+        <view className='Btn'>
+          <text onClick={handleChat}>一键咨询</text>
+          <text className='active' onClick={handleCall}>一键电话</text>
+        </view>
       </view>
+      <Poster />
     </view>
   )
 }

src/pages/index/buildingDetail/index.config.js

@@ -1,3 +1,3 @@
 export default {
-  navigationBarTitleText: '楼盘详情'
+  navigationBarTitleText: '楼盘详情',
 }

yarn.lock

@@ -3284,16 +3284,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.5:
+classnames@^2.2.5, classnames@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
   integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
 
-classnames@^2.3.1:
-  version "2.3.1"
-  resolved "https://registry.npm.taobao.org/classnames/download/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
-  integrity sha1-38+jiR4wbsHa0QXQ6I9EF7hTXo4=
-
 clean-css@4.2.x, clean-css@^4.2.1:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"