forked from gxwebsoft/mp-10550
refactor(api): 更新 API调用以使用新的请求工具- 将所有 API 调用中的 request-legacy 替换为 request
- 优化部分 API 调用的参数传递方式 - 统一导入 ApiResult 和 PageResult 类型的路径
This commit is contained in:
@@ -31,7 +31,7 @@ export interface GiftCardProps {
|
||||
/** 过期时间 */
|
||||
expireTime?: string
|
||||
/** 使用时间 */
|
||||
useTime?: string
|
||||
takeTime?: string
|
||||
/** 使用地址 */
|
||||
useLocation?: string
|
||||
/** 客服联系方式 */
|
||||
@@ -97,7 +97,7 @@ const GiftCard: React.FC<GiftCardProps> = ({
|
||||
type = 10,
|
||||
status = 0,
|
||||
expireTime,
|
||||
useTime,
|
||||
takeTime,
|
||||
useLocation,
|
||||
goodsInfo,
|
||||
promotionInfo,
|
||||
@@ -308,10 +308,10 @@ const GiftCard: React.FC<GiftCardProps> = ({
|
||||
|
||||
{/* 时间信息 */}
|
||||
<View className="gift-time-info">
|
||||
{status === 1 && useTime && (
|
||||
{status === 1 && takeTime && (
|
||||
<View className="time-item">
|
||||
<Clock size="14" className="text-gray-400" />
|
||||
<Text className="time-text">使用时间:{dayjs(useTime).format('YYYY-MM-DD HH:mm')}</Text>
|
||||
<Text className="time-text">使用时间:{dayjs(takeTime).format('YYYY-MM-DD HH:mm')}</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
|
||||
@@ -80,7 +80,7 @@ const GiftCardExample: React.FC = () => {
|
||||
onDetail={handleDetail}
|
||||
onClick={handleClick}
|
||||
/>
|
||||
|
||||
|
||||
{/* 简化版本示例 */}
|
||||
<GiftCard
|
||||
id={2}
|
||||
@@ -118,7 +118,7 @@ const GiftCardExample: React.FC = () => {
|
||||
faceValue="200"
|
||||
type={30}
|
||||
useStatus={1}
|
||||
useTime="2024-08-15 19:30:00"
|
||||
takeTime="2024-08-15 19:30:00"
|
||||
useLocation="海底捞王府井店"
|
||||
goodsInfo={{
|
||||
brand: '海底捞',
|
||||
|
||||
@@ -1,333 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import { Button, Popup, Tag } from '@nutui/nutui-react-taro'
|
||||
import { Close, Copy, Share, Refresh, QrCode } from '@nutui/icons-react-taro'
|
||||
import Taro from '@tarojs/taro'
|
||||
import dayjs from 'dayjs'
|
||||
import { generateVerificationCode } from '@/api/shop/shopGift'
|
||||
|
||||
export interface GiftCardQRCodeProps {
|
||||
/** 是否显示弹窗 */
|
||||
visible: boolean
|
||||
/** 关闭弹窗回调 */
|
||||
onClose: () => void
|
||||
/** 礼品卡信息 */
|
||||
giftCard: {
|
||||
id: number
|
||||
name?: string
|
||||
goodsName?: string
|
||||
code?: string
|
||||
faceValue?: string
|
||||
type?: number
|
||||
status?: number
|
||||
expireTime?: string
|
||||
contactInfo?: string
|
||||
}
|
||||
}
|
||||
|
||||
const GiftCardQRCode: React.FC<GiftCardQRCodeProps> = ({
|
||||
visible,
|
||||
onClose,
|
||||
giftCard
|
||||
}) => {
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [verificationCode, setVerificationCode] = useState<string>('')
|
||||
const [qrData, setQrData] = useState<string>('')
|
||||
|
||||
// 生成核销码(6位数字)
|
||||
const generateVerificationCode = () => {
|
||||
return Math.random().toString().slice(2, 8)
|
||||
}
|
||||
|
||||
// 生成二维码数据
|
||||
const generateQRData = () => {
|
||||
const code = generateVerificationCode()
|
||||
setVerificationCode(code)
|
||||
|
||||
const data = {
|
||||
type: 'gift_card_verification',
|
||||
giftId: giftCard.id,
|
||||
giftCode: giftCard.code,
|
||||
verificationCode: code,
|
||||
faceValue: giftCard.faceValue,
|
||||
timestamp: Date.now(),
|
||||
expireTime: giftCard.expireTime
|
||||
}
|
||||
|
||||
const jsonData = JSON.stringify(data)
|
||||
setQrData(jsonData)
|
||||
return jsonData
|
||||
}
|
||||
|
||||
// 生成二维码(调用后端API)
|
||||
const generateQRCode = async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
|
||||
// 调用后端API生成核销码
|
||||
const result = await generateVerificationCode(giftCard.id)
|
||||
if (result) {
|
||||
setVerificationCode(result.verificationCode)
|
||||
|
||||
// 生成二维码数据
|
||||
const data = {
|
||||
type: 'gift_card_verification',
|
||||
giftId: giftCard.id,
|
||||
giftCode: giftCard.code,
|
||||
verificationCode: result.verificationCode,
|
||||
faceValue: giftCard.faceValue,
|
||||
timestamp: Date.now(),
|
||||
expireTime: giftCard.expireTime,
|
||||
codeExpireTime: result.expireTime
|
||||
}
|
||||
|
||||
setQrData(JSON.stringify(data))
|
||||
console.log('二维码数据:', data)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('生成二维码失败:', error)
|
||||
Taro.showToast({
|
||||
title: '生成核销码失败',
|
||||
icon: 'error'
|
||||
})
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 复制核销码
|
||||
const copyVerificationCode = () => {
|
||||
Taro.setClipboardData({
|
||||
data: verificationCode,
|
||||
success: () => {
|
||||
Taro.showToast({
|
||||
title: '核销码已复制',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 复制礼品卡码
|
||||
const copyGiftCode = () => {
|
||||
if (giftCard.code) {
|
||||
Taro.setClipboardData({
|
||||
data: giftCard.code,
|
||||
success: () => {
|
||||
Taro.showToast({
|
||||
title: '兑换码已复制',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 分享二维码
|
||||
const shareQRCode = () => {
|
||||
// 这里可以实现分享功能
|
||||
Taro.showToast({
|
||||
title: '分享功能开发中',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
|
||||
// 刷新二维码
|
||||
const refreshQRCode = () => {
|
||||
generateQRCode()
|
||||
}
|
||||
|
||||
// 获取状态文本
|
||||
const getStatusText = (status?: number) => {
|
||||
switch (status) {
|
||||
case 0: return { text: '未使用', color: 'success' }
|
||||
case 1: return { text: '已使用', color: 'warning' }
|
||||
case 2: return { text: '失效', color: 'danger' }
|
||||
default: return { text: '未知', color: 'default' }
|
||||
}
|
||||
}
|
||||
|
||||
// 获取类型文本
|
||||
const getTypeText = (type?: number) => {
|
||||
switch (type) {
|
||||
case 10: return '实物礼品卡'
|
||||
case 20: return '虚拟礼品卡'
|
||||
case 30: return '服务礼品卡'
|
||||
default: return '礼品卡'
|
||||
}
|
||||
}
|
||||
|
||||
// 弹窗打开时生成二维码
|
||||
useEffect(() => {
|
||||
if (visible && giftCard.id) {
|
||||
generateQRCode()
|
||||
}
|
||||
}, [visible, giftCard.id])
|
||||
|
||||
const statusInfo = getStatusText(giftCard.status)
|
||||
|
||||
return (
|
||||
<Popup
|
||||
visible={visible}
|
||||
position="center"
|
||||
closeable
|
||||
closeIcon={<Close />}
|
||||
onClose={onClose}
|
||||
style={{ width: '90%', maxWidth: '400px' }}
|
||||
>
|
||||
<View className="p-6">
|
||||
{/* 标题 */}
|
||||
<View className="text-center mb-4">
|
||||
<Text className="text-lg font-bold">礼品卡核销</Text>
|
||||
<Text className="text-sm text-gray-500 mt-1">
|
||||
请向门店工作人员出示此二维码
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* 礼品卡信息 */}
|
||||
<View className="bg-gray-50 rounded-lg p-4 mb-4">
|
||||
<View className="flex justify-between items-start mb-2">
|
||||
<Text className="font-medium text-base">
|
||||
{giftCard.goodsName || giftCard.name}
|
||||
</Text>
|
||||
<Tag type={statusInfo.color} size="small">
|
||||
{statusInfo.text}
|
||||
</Tag>
|
||||
</View>
|
||||
|
||||
<View className="flex justify-between items-center mb-2">
|
||||
<Text className="text-sm text-gray-600">面值</Text>
|
||||
<Text className="text-lg font-bold text-red-500">
|
||||
¥{giftCard.faceValue}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View className="flex justify-between items-center mb-2">
|
||||
<Text className="text-sm text-gray-600">类型</Text>
|
||||
<Text className="text-sm">{getTypeText(giftCard.type)}</Text>
|
||||
</View>
|
||||
|
||||
{giftCard.expireTime && (
|
||||
<View className="flex justify-between items-center">
|
||||
<Text className="text-sm text-gray-600">有效期至</Text>
|
||||
<Text className="text-sm text-orange-600">
|
||||
{dayjs(giftCard.expireTime).format('YYYY-MM-DD')}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* 二维码区域 */}
|
||||
<View className="text-center mb-4">
|
||||
{loading ? (
|
||||
<View className="w-48 h-48 mx-auto bg-gray-100 rounded-lg flex items-center justify-center">
|
||||
<Text className="text-gray-500">生成中...</Text>
|
||||
</View>
|
||||
) : verificationCode ? (
|
||||
<View className="relative">
|
||||
{/* 模拟二维码显示区域 */}
|
||||
<View className="w-48 h-48 mx-auto bg-white border-2 border-gray-300 rounded-lg flex flex-col items-center justify-center">
|
||||
<QrCode size="80" className="text-gray-800 mb-2" />
|
||||
<Text className="text-xs text-gray-600">核销二维码</Text>
|
||||
<Text className="text-xs text-gray-500 mt-1">
|
||||
ID: {giftCard.id}
|
||||
</Text>
|
||||
</View>
|
||||
<Button
|
||||
size="small"
|
||||
fill="outline"
|
||||
icon={<Refresh />}
|
||||
className="absolute top-2 right-2"
|
||||
onClick={refreshQRCode}
|
||||
>
|
||||
刷新
|
||||
</Button>
|
||||
</View>
|
||||
) : (
|
||||
<View className="w-48 h-48 mx-auto bg-gray-100 rounded-lg flex items-center justify-center">
|
||||
<Text className="text-gray-500">生成失败</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* 核销码 */}
|
||||
{verificationCode && (
|
||||
<View className="bg-blue-50 rounded-lg p-3 mb-4">
|
||||
<View className="flex justify-between items-center">
|
||||
<View>
|
||||
<Text className="text-sm text-blue-600 mb-1">核销码</Text>
|
||||
<Text className="text-xl font-mono font-bold text-blue-800">
|
||||
{verificationCode}
|
||||
</Text>
|
||||
</View>
|
||||
<Button
|
||||
size="small"
|
||||
fill="outline"
|
||||
icon={<Copy />}
|
||||
onClick={copyVerificationCode}
|
||||
>
|
||||
复制
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 兑换码 */}
|
||||
{giftCard.code && (
|
||||
<View className="bg-green-50 rounded-lg p-3 mb-4">
|
||||
<View className="flex justify-between items-center">
|
||||
<View>
|
||||
<Text className="text-sm text-green-600 mb-1">兑换码</Text>
|
||||
<Text className="text-base font-mono text-green-800">
|
||||
{giftCard.code}
|
||||
</Text>
|
||||
</View>
|
||||
<Button
|
||||
size="small"
|
||||
fill="outline"
|
||||
icon={<Copy />}
|
||||
onClick={copyGiftCode}
|
||||
>
|
||||
复制
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<View className="flex">
|
||||
<Button
|
||||
size="large"
|
||||
fill="outline"
|
||||
icon={<Share />}
|
||||
onClick={shareQRCode}
|
||||
className="flex-1 mr-3"
|
||||
>
|
||||
分享
|
||||
</Button>
|
||||
<Button
|
||||
size="large"
|
||||
type="primary"
|
||||
onClick={onClose}
|
||||
className="flex-1"
|
||||
>
|
||||
完成
|
||||
</Button>
|
||||
</View>
|
||||
|
||||
{/* 使用说明 */}
|
||||
<View className="mt-4 p-3 bg-yellow-50 rounded-lg">
|
||||
<Text className="text-sm text-yellow-800 font-medium mb-2">使用说明:</Text>
|
||||
<View>
|
||||
<Text className="text-xs text-yellow-700 mb-1">• 请向门店工作人员出示此二维码或核销码</Text>
|
||||
<Text className="text-xs text-yellow-700 mb-1">• 工作人员扫码后即可完成核销</Text>
|
||||
<Text className="text-xs text-yellow-700 mb-1">• 每次使用会生成新的核销码,确保安全</Text>
|
||||
<Text className="text-xs text-yellow-700">• 如有问题请联系客服:{giftCard.contactInfo || '400-800-8888'}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</Popup>
|
||||
)
|
||||
}
|
||||
|
||||
export default GiftCardQRCode
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from 'react'
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import { Popup } from '@nutui/nutui-react-taro'
|
||||
import { Close, QrCode } from '@nutui/icons-react-taro'
|
||||
import React, {useEffect} from 'react'
|
||||
import {View, Text} from '@tarojs/components'
|
||||
import {Popup} from '@nutui/nutui-react-taro'
|
||||
import {Close, QrCode} from '@nutui/icons-react-taro'
|
||||
|
||||
export interface SimpleQRCodeModalProps {
|
||||
/** 是否显示弹窗 */
|
||||
@@ -17,12 +17,12 @@ export interface SimpleQRCodeModalProps {
|
||||
}
|
||||
|
||||
const SimpleQRCodeModal: React.FC<SimpleQRCodeModalProps> = ({
|
||||
visible,
|
||||
onClose,
|
||||
qrContent,
|
||||
giftName,
|
||||
faceValue
|
||||
}) => {
|
||||
visible,
|
||||
onClose,
|
||||
qrContent,
|
||||
giftName,
|
||||
faceValue
|
||||
}) => {
|
||||
|
||||
// const copyToClipboard = () => {
|
||||
// if (qrContent) {
|
||||
@@ -38,6 +38,9 @@ const SimpleQRCodeModal: React.FC<SimpleQRCodeModalProps> = ({
|
||||
// }
|
||||
// }
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<Popup
|
||||
@@ -53,15 +56,12 @@ const SimpleQRCodeModal: React.FC<SimpleQRCodeModalProps> = ({
|
||||
<View className="p-6">
|
||||
{/* 标题 */}
|
||||
<View className="mb-4">
|
||||
<Text className="text-lg font-bold">礼品卡二维码</Text>
|
||||
<Text className="text-sm text-gray-400 mt-1 px-2">
|
||||
请向商家出示此二维码
|
||||
</Text>
|
||||
<Text className="text-lg font-bold">核销码</Text>
|
||||
</View>
|
||||
|
||||
{/* 礼品卡信息 */}
|
||||
{(giftName || faceValue) && (
|
||||
<View className="bg-gray-50 rounded-lg p-3 mb-4">
|
||||
<View className="bg-gray-50 rounded-lg p-3 mb-4 hidden">
|
||||
{giftName && (
|
||||
<Text className="font-medium text-center mb-1">
|
||||
{giftName}
|
||||
@@ -79,12 +79,17 @@ const SimpleQRCodeModal: React.FC<SimpleQRCodeModalProps> = ({
|
||||
<View className="text-center mb-4">
|
||||
<View className="p-4 bg-white border border-gray-200 rounded-lg">
|
||||
{qrContent ? (
|
||||
<img
|
||||
src={`https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(qrContent)}`}
|
||||
alt="二维码"
|
||||
style={{width: '200px', height: '200px'}}
|
||||
className="mx-auto"
|
||||
/>
|
||||
<View className={'flex flex-col justify-center'}>
|
||||
<img
|
||||
src={`http://127.0.0.1:9200/api/qr-code/create-encrypted-qr-image?size=300x300&expireMinutes=60&businessType=gift&data=${encodeURIComponent(qrContent)}`}
|
||||
alt="二维码"
|
||||
style={{width: '200px', height: '200px'}}
|
||||
className="mx-auto"
|
||||
/>
|
||||
<Text className="text-sm text-gray-400 mt-1 px-2">
|
||||
请向商家出示此二维码
|
||||
</Text>
|
||||
</View>
|
||||
) : (
|
||||
<View className="bg-gray-100 rounded flex items-center justify-center mx-auto"
|
||||
style={{width: '200px', height: '200px'}}>
|
||||
|
||||
Reference in New Issue
Block a user