xuan/TestRestructureWechatLymarketDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🎈 perf(邀请码): 追加分页功能

Browse Source
This commit is contained in:
xuan 2022-12-12 12:05:32 +08:00
parent fbe6e9b449
commit a8f6eb6045
5 changed files with 139 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/api/inviteCode/index.ts
View File

@ -13,6 +13,7 @@ export const GetInvitationList = () => {
return useRequest({ return useRequest({
url: '/v2/mp/user/inviterList', url: '/v2/mp/user/inviterList',
method: 'get', method: 'get',
pagination: true,
}) })
} }
// 生成二维码 // 生成二维码

150
src/components/bindSalesmanPopup/index.module.scss → src/components/bindSalesmanDialog/index.module.scss
View File

@ -1,76 +1,76 @@
.bindSalesman_main{ .bindSalesman_main{
width: 100%; width: 100%;
height: 100vh; height: 100vh;
position: fixed; position: fixed;
left:0; left:0;
top:0; top:0;
.bindSalesman_pop{ .bindSalesman_pop{
width: 598px; width: 598px;
height: 654px; height: 654px;
background: #ffffff; background: #ffffff;
border-radius: 40px; border-radius: 40px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position:absolute; position:absolute;
margin:auto; margin:auto;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
z-index: 1999; z-index: 1999;
.bindSalesman_header{ .bindSalesman_header{
height: 300px; height: 300px;
width: 100%; width: 100%;
image{ image{
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 40px 40px 0 0; border-radius: 40px 40px 0 0;
} }
} }
.bindSalesman_message{ .bindSalesman_message{
color: #707070; color: #707070;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
flex:1; flex:1;
font-size: 26px; font-size: 26px;
padding: 0 30px; padding: 0 30px;
text{ text{
display: block; display: block;
&:nth-child(1) { &:nth-child(1) {
font-size: 28px; font-size: 28px;
font-weight: 700; font-weight: 700;
margin-bottom: 20px; margin-bottom: 20px;
} }
} }
} }
.bindSalesman_operation{ .bindSalesman_operation{
display: flex; display: flex;
.btns{ .btns{
flex:1; flex:1;
border-top: 1PX solid #dddddd; border-top: 1PX solid #dddddd;
height: 128px; height: 128px;
text-align: center; text-align: center;
line-height: 128px; line-height: 128px;
font-size: 26px; font-size: 26px;
color: #707070; color: #707070;
&:nth-child(2) { &:nth-child(2) {
border-left: 1PX solid #dddddd; border-left: 1PX solid #dddddd;
color: #007AFF; color: #007AFF;
} }
} }
} }
} }
.bindSalesman_mask{ .bindSalesman_mask{
z-index: 99; z-index: 99;
position: absolute; position: absolute;
left:0; left:0;
top:0; top:0;
width: 100%; width: 100%;
height: 100%; height: 100%;
opacity: 0.8; opacity: 0.8;
background: #000000; background: #000000;
} }
} }

116
src/components/bindSalesmanPopup/index.tsx → src/components/bindSalesmanDialog/index.tsx
View File

@ -1,58 +1,58 @@
import { Image, Swiper, SwiperItem, Text, View } from '@tarojs/components' import { Image, Swiper, SwiperItem, Text, View } from '@tarojs/components'
import Taro from '@tarojs/taro' import Taro from '@tarojs/taro'
import styles from './index.module.scss' import styles from './index.module.scss'
import { formatImgUrl } from '@/common/format' import { formatImgUrl } from '@/common/format'
import { goLink } from '@/common/common' import { goLink } from '@/common/common'
interface params { interface params {
show?: true | false show?: true | false
onClose?: () => void onClose?: () => void
} }
const BindSalesManPopUp = ({ show, onClose }: params) => { const BindSalesManDialog = ({ show, onClose }: params) => {
const onCustomer = async() => { const onCustomer = async() => {
const res = await Taro.showModal({ const res = await Taro.showModal({
title: '是否拨打服务热线', title: '是否拨打服务热线',
confirmText: '拨打', confirmText: '拨打',
content: '(0757) 8270 6695', content: '(0757) 8270 6695',
cancelText: '取消', cancelText: '取消',
}) })
if (res.confirm) { if (res.confirm) {
Taro.makePhoneCall({ Taro.makePhoneCall({
phoneNumber: '(0757)82706695', phoneNumber: '(0757)82706695',
}) })
} }
} }
const onConfirm = () => { const onConfirm = () => {
onClose?.() onClose?.()
goLink('/pages/bindSalesman/index') goLink('/pages/bindSalesman/index')
} }
return ( return (
<> <>
{show && ( {show && (
<View className={styles.bindSalesman_main}> <View className={styles.bindSalesman_main}>
<View className={styles.bindSalesman_pop}> <View className={styles.bindSalesman_pop}>
<View className={styles.bindSalesman_header}> <View className={styles.bindSalesman_header}>
<Image src={formatImgUrl('/mall/invite_code_top.png', '!w400')} mode="aspectFill" /> <Image src={formatImgUrl('/mall/invite_code_top.png', '!w400')} mode="aspectFill" />
</View> </View>
<View className={styles.bindSalesman_message}> <View className={styles.bindSalesman_message}>
<Text>提示</Text> <Text>提示</Text>
<Text>暂未开通下单权限功能，稍后有客服联系您，请注意接收电话。</Text> <Text>暂未开通下单权限功能，稍后有客服联系您，请注意接收电话。</Text>
</View> </View>
<View className={styles.bindSalesman_operation}> <View className={styles.bindSalesman_operation}>
<View className={styles.btns} onClick={() => onConfirm()}> <View className={styles.btns} onClick={() => onConfirm()}>
输入邀请码 输入邀请码
</View> </View>
<View className={styles.btns} onClick={() => onCustomer()}> <View className={styles.btns} onClick={() => onCustomer()}>
联系客服 联系客服
</View> </View>
</View> </View>
</View> </View>
<View className={styles.bindSalesman_mask} onClick={onClose}></View> <View className={styles.bindSalesman_mask} onClick={onClose}></View>
</View> </View>
)} )}
</> </>
) )
} }
export default BindSalesManPopUp export default BindSalesManDialog

2
src/components/shopCart/index.tsx
View File

@ -3,7 +3,7 @@ import Taro from '@tarojs/taro'
import classnames from 'classnames' import classnames from 'classnames'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react' import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import Counter from '../counter' import Counter from '../counter'
import BindSalesmanPopup from '../bindSalesmanPopup' import BindSalesmanPopup from '../bindSalesmanDialog'
import LabAndImgShow from '../LabAndImgShow' import LabAndImgShow from '../LabAndImgShow'
import LabAndImg from '../LabAndImg' import LabAndImg from '../LabAndImg'
import styles from './index.module.scss' import styles from './index.module.scss'

56
src/pages/inviteCode/index.tsx
View File

@ -11,40 +11,7 @@ import NormalButton from '@/components/normalButton'
import { alert } from '@/common/common' import { alert } from '@/common/common'
import { GenBarCodeOrQrCode, GetInvitationInfo, GetInvitationList } from '@/api' import { GenBarCodeOrQrCode, GetInvitationInfo, GetInvitationList } from '@/api'
import { getCDNSource } from '@/common/constant' import { getCDNSource } from '@/common/constant'
import Painter from '@/components/painter'
const SystemInfo = Taro.getSystemInfoSync()
let screenK = 5
/**
* 是否支持负数
* @param {Boolean} minus 是否支持负数
*/
const toPx = (num: string, minus = false) => {
let reg
if (minus) {
reg = /^-?[0-9]+([.]{1}[0-9]+){0,1}(rpx|px)$/g
}
else {
reg = /^[0-9]+([.]{1}[0-9]+){0,1}(rpx|px)$/g
}
const results = reg.exec(num)
console.log('results', results)
if (!num || !results) {
console.log(`The size: ${num} is illegal`)
return 0
}
const unit = results[2]
const value = parseFloat(num)
let res = 0
if (unit === 'rpx') {
res = Math.round(value * screenK)
}
else if (unit === 'px') {
res = value
}
return res
}
// 需要传进来的表头数据示例 // 需要传进来的表头数据示例
const inviteColumns = [ const inviteColumns = [
{ {
@ -60,10 +27,10 @@ const inviteColumns = [
width: '50%', width: '50%',
}, },
] ]
const defaultSize = 24
// 邀请码 // 邀请码
const InviteCode = () => { const InviteCode = () => {
screenK = SystemInfo.screenWidth / 750 const sizeRef = useRef(defaultSize)
const { fetchData: getInvitationListAPI } = GetInvitationList() const { fetchData: getInvitationListAPI } = GetInvitationList()
const { fetchData } = GetInvitationInfo() const { fetchData } = GetInvitationInfo()
const { fetchData: genCode } = GenBarCodeOrQrCode() const { fetchData: genCode } = GenBarCodeOrQrCode()
@ -74,7 +41,7 @@ const InviteCode = () => {
}) })
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const getInvitationList = async() => { const getInvitationList = async() => {
const res = await getInvitationListAPI() const res = await getInvitationListAPI({ size: sizeRef.current })
if (res.success) { if (res.success) {
console.log('getInviteCode', res) console.log('getInviteCode', res)
setCurrentTable((prev: any) => ({ setCurrentTable((prev: any) => ({
@ -134,7 +101,6 @@ const InviteCode = () => {
} }
// canvas 生成 图片 // canvas 生成 图片
const saveCanvasToImage = (canvas) => { const saveCanvasToImage = (canvas) => {
console.log('pixelRatio', SystemInfo.pixelRatio, canvas)
Taro.canvasToTempFilePath({ Taro.canvasToTempFilePath({
canvas, canvas,
fileType: 'png', fileType: 'png',
@ -186,7 +152,6 @@ const InviteCode = () => {
} }
} }
const [canvasStyle, setCanvasStyle] = useState<React.CSSProperties>({}) const [canvasStyle, setCanvasStyle] = useState<React.CSSProperties>({})
const painter = useRef<any>(null)
const startPaint = async(ctx: Taro.RenderingContext, canvas: Taro.Canvas, image: Taro.Image) => { const startPaint = async(ctx: Taro.RenderingContext, canvas: Taro.Canvas, image: Taro.Image) => {
// 开始绘制 // 开始绘制
const { width, height } = canvas const { width, height } = canvas
@ -273,7 +238,7 @@ const InviteCode = () => {
} }
// 加载更多 // 加载更多
const handleLoadMore = () => { const handleLoadMore = () => {
sizeRef.current += defaultSize
} }
const handleQRcodeShare = async() => { const handleQRcodeShare = async() => {
try { try {
@ -303,19 +268,6 @@ const InviteCode = () => {
initCanvas() initCanvas()
}, 200) }, 200)
}) })
const onImgErr = (e) => {
Taro.hideLoading()
console.error('onImgErr', e.error)
Taro.showToast({
title: '生成分享图失败，请刷新页面重试',
})
}
const onImgOK = (e) => {
console.log('onImgOK', e.path)
setTargetImageUrl(e.path)
setShowPopup(true)
Taro.hideLoading()
}
return <View className={style.main}> return <View className={style.main}>
<View className={style.content}> <View className={style.content}>
<View className={style.background}> <View className={style.background}>