20 changed files with 825 additions and 60 deletions
@ -0,0 +1,116 @@ |
|||||||
|
|
||||||
|
|
||||||
|
## 微信登录 |
||||||
|
|
||||||
|
|
||||||
|
**接口地址**:`/api/v2/WechatAuth/login-wechat` |
||||||
|
|
||||||
|
|
||||||
|
**请求方式**:`POST` |
||||||
|
|
||||||
|
|
||||||
|
**请求数据类型**:`application/x-www-form-urlencoded,application/json,text/json,application/*+json` |
||||||
|
|
||||||
|
|
||||||
|
**响应数据类型**:`text/plain` |
||||||
|
|
||||||
|
|
||||||
|
**接口描述**: |
||||||
|
|
||||||
|
|
||||||
|
**请求示例**: |
||||||
|
|
||||||
|
|
||||||
|
```javascript |
||||||
|
{ |
||||||
|
"code": "" |
||||||
|
} |
||||||
|
``` |
||||||
|
|
||||||
|
|
||||||
|
**请求参数**: |
||||||
|
|
||||||
|
|
||||||
|
**请求参数**: |
||||||
|
|
||||||
|
|
||||||
|
| 参数名称 | 参数说明 | 请求类型 | 是否必须 | 数据类型 | schema | |
||||||
|
| -------- | -------- | ----- | -------- | -------- | ------ | |
||||||
|
|wechatLoginRequest|微信授权请求模型\n\n用于微信登录|body|true|WechatLoginRequest|WechatLoginRequest| |
||||||
|
|  code|微信登录凭证code\n\n通过 wx.login() 获取的临时登录凭证||true|string|| |
||||||
|
|
||||||
|
|
||||||
|
**响应状态**: |
||||||
|
|
||||||
|
|
||||||
|
| 状态码 | 说明 | schema | |
||||||
|
| -------- | -------- | ----- | |
||||||
|
|200|OK|WechatAuthResultDtoOpResult| |
||||||
|
|
||||||
|
|
||||||
|
**响应参数**: |
||||||
|
|
||||||
|
|
||||||
|
| 参数名称 | 参数说明 | 类型 | schema | |
||||||
|
| -------- | -------- | ----- |----- | |
||||||
|
|message|描述消息|string|| |
||||||
|
|code|返回值|integer(int32)|integer(int32)| |
||||||
|
|success|是否成功|boolean|| |
||||||
|
|data||WechatAuthResultDto|WechatAuthResultDto| |
||||||
|
|  success|是否成功|boolean|| |
||||||
|
|  customer|客户Dto|CustomerDto|CustomerDto| |
||||||
|
|    id|id|integer|| |
||||||
|
|    sn|客户编码|string|| |
||||||
|
|    wxOpenId|OpenId|string|| |
||||||
|
|    name|名称|string|| |
||||||
|
|    type|类型 0会员 1VIP|integer|| |
||||||
|
|    typeName|类型描述|string|| |
||||||
|
|    amount|余额|number|| |
||||||
|
|    wchart|微信号|string|| |
||||||
|
|    phone|手机号|string|| |
||||||
|
|    bpSn|店铺编码|string|| |
||||||
|
|    bpInfoName|店铺名称|string|| |
||||||
|
|    instSn|机构编码|string|| |
||||||
|
|    ownerName|机构名称|string|| |
||||||
|
|    createTime|创建时间|string|| |
||||||
|
|    lastLoginTime||string|| |
||||||
|
|    wxNickName|微信昵称|string|| |
||||||
|
|    wxAvatarUrl|头像URL|string|| |
||||||
|
|  operationResult|操作结果||| |
||||||
|
|  isNewCustomer|是否是新用户|boolean|| |
||||||
|
|  message|消息|string|| |
||||||
|
|
||||||
|
|
||||||
|
**响应示例**: |
||||||
|
```javascript |
||||||
|
{ |
||||||
|
"message": "", |
||||||
|
"code": 0, |
||||||
|
"success": true, |
||||||
|
"data": { |
||||||
|
"success": true, |
||||||
|
"customer": { |
||||||
|
"id": 0, |
||||||
|
"sn": "", |
||||||
|
"wxOpenId": "", |
||||||
|
"name": "", |
||||||
|
"type": 0, |
||||||
|
"typeName": "", |
||||||
|
"amount": 0, |
||||||
|
"wchart": "", |
||||||
|
"phone": "", |
||||||
|
"bpSn": "", |
||||||
|
"bpInfoName": "", |
||||||
|
"instSn": "", |
||||||
|
"ownerName": "", |
||||||
|
"createTime": "", |
||||||
|
"lastLoginTime": "", |
||||||
|
"wxNickName": "", |
||||||
|
"wxAvatarUrl": "" |
||||||
|
}, |
||||||
|
"operationResult": {}, |
||||||
|
"isNewCustomer": true, |
||||||
|
"message": "" |
||||||
|
} |
||||||
|
} |
||||||
|
``` |
||||||
@ -0,0 +1,19 @@ |
|||||||
|
/** |
||||||
|
* 微信登录相关接口 |
||||||
|
*/ |
||||||
|
import request from '../services/request' |
||||||
|
import { WechatLoginRequest, WechatAuthResponse } from '../types/login' |
||||||
|
|
||||||
|
/** |
||||||
|
* 微信登录 |
||||||
|
* @param code 微信登录凭证 |
||||||
|
*/ |
||||||
|
export const wechatLogin = (code: string, grpSn=''): Promise<WechatAuthResponse> => { |
||||||
|
const data: WechatLoginRequest = { code,grpSn } |
||||||
|
|
||||||
|
return request({ |
||||||
|
url: '/WechatAuth/login-wechat', |
||||||
|
method: 'POST', |
||||||
|
data |
||||||
|
}) |
||||||
|
} |
||||||
@ -0,0 +1,47 @@ |
|||||||
|
/** |
||||||
|
* 微信登录相关类型定义 |
||||||
|
*/ |
||||||
|
|
||||||
|
// 微信登录请求参数
|
||||||
|
export interface WechatLoginRequest { |
||||||
|
code: string |
||||||
|
grpSn?: string |
||||||
|
} |
||||||
|
|
||||||
|
// 客户信息
|
||||||
|
export interface CustomerDto { |
||||||
|
id: number |
||||||
|
sn: string |
||||||
|
wxOpenId: string |
||||||
|
name: string |
||||||
|
type: number |
||||||
|
typeName: string |
||||||
|
amount: number |
||||||
|
wchart: string |
||||||
|
phone: string |
||||||
|
bpSn: string |
||||||
|
bpInfoName: string |
||||||
|
instSn: string |
||||||
|
ownerName: string |
||||||
|
createTime: string |
||||||
|
lastLoginTime: string |
||||||
|
wxNickName: string |
||||||
|
wxAvatarUrl: string |
||||||
|
} |
||||||
|
|
||||||
|
// 微信登录结果数据
|
||||||
|
export interface WechatAuthResultDto { |
||||||
|
success: boolean |
||||||
|
customer: CustomerDto |
||||||
|
operationResult: any |
||||||
|
isNewCustomer: boolean |
||||||
|
message: string |
||||||
|
} |
||||||
|
|
||||||
|
// 微信登录响应
|
||||||
|
export interface WechatAuthResponse { |
||||||
|
message: string |
||||||
|
code: number |
||||||
|
success: boolean |
||||||
|
data: WechatAuthResultDto |
||||||
|
} |
||||||
@ -0,0 +1,176 @@ |
|||||||
|
# 图片工具使用说明 |
||||||
|
|
||||||
|
## 概述 |
||||||
|
|
||||||
|
`imageHelper.ts` 是一个用于管理服务器端大图资源的工具类，可以将本地大图迁移到服务器，减少小程序包体积。 |
||||||
|
|
||||||
|
## 配置 |
||||||
|
|
||||||
|
图片服务器地址在 `src/config/index.ts` 中配置： |
||||||
|
|
||||||
|
```typescript |
||||||
|
const BIG_IMAGE_URL = 'http://39.101.75.71:8888/img/MiniBgImage' |
||||||
|
``` |
||||||
|
|
||||||
|
## 使用方法 |
||||||
|
|
||||||
|
### 1. 基础用法 - 通过文件名获取 |
||||||
|
|
||||||
|
```typescript |
||||||
|
import { getBigImageUrl } from '@/utils/imageHelper' |
||||||
|
|
||||||
|
// 直接传入文件名 |
||||||
|
const imageUrl = getBigImageUrl('noData.png') |
||||||
|
// 结果: http://39.101.75.71:8888/img/MiniBgImage/noData.png |
||||||
|
``` |
||||||
|
|
||||||
|
### 2. 推荐用法 - 使用预定义常量 |
||||||
|
|
||||||
|
```typescript |
||||||
|
import { getBigImage, BIG_IMAGES } from '@/utils/imageHelper' |
||||||
|
|
||||||
|
// 使用预定义的图片键 |
||||||
|
const noDataUrl = getBigImage('NO_DATA') |
||||||
|
const backgroundUrl = getBigImage('SW_BG') |
||||||
|
|
||||||
|
// 查看所有可用的图片键 |
||||||
|
console.log(BIG_IMAGES) |
||||||
|
// { |
||||||
|
// NO_DATA: 'noData.png', |
||||||
|
// SW_BG: 'swBG.png', |
||||||
|
// USER_BG: 'user_bg.png', |
||||||
|
// FJMD: 'fjmd.png', |
||||||
|
// SMKT: 'smkt.png', |
||||||
|
// TGHX: 'tghx.png' |
||||||
|
// } |
||||||
|
``` |
||||||
|
|
||||||
|
### 3. 批量获取 |
||||||
|
|
||||||
|
```typescript |
||||||
|
import { getBigImagesUrl } from '@/utils/imageHelper' |
||||||
|
|
||||||
|
const urls = getBigImagesUrl(['noData.png', 'swBG.png']) |
||||||
|
// 结果: [ |
||||||
|
// 'http://39.101.75.71:8888/img/MiniBgImage/noData.png', |
||||||
|
// 'http://39.101.75.71:8888/img/MiniBgImage/swBG.png' |
||||||
|
// ] |
||||||
|
``` |
||||||
|
|
||||||
|
### 4. 图片预加载 |
||||||
|
|
||||||
|
```typescript |
||||||
|
import { preloadImages, getBigImage } from '@/utils/imageHelper' |
||||||
|
|
||||||
|
// 预加载关键图片 |
||||||
|
const keyImages = [ |
||||||
|
getBigImage('NO_DATA'), |
||||||
|
getBigImage('SW_BG'), |
||||||
|
getBigImage('USER_BG') |
||||||
|
] |
||||||
|
|
||||||
|
preloadImages(keyImages).then(() => { |
||||||
|
console.log('关键图片预加载完成') |
||||||
|
}) |
||||||
|
``` |
||||||
|
|
||||||
|
## 迁移指南 |
||||||
|
|
||||||
|
### 原来的写法： |
||||||
|
```typescript |
||||||
|
// ❌ 旧写法 - 本地图片 |
||||||
|
import noDataImg from '../../assets/big/noData.png' |
||||||
|
const noDataImg = require('../../assets/big/noData.png') |
||||||
|
|
||||||
|
<Image src={noDataImg} /> |
||||||
|
``` |
||||||
|
|
||||||
|
### 现在的写法： |
||||||
|
```typescript |
||||||
|
// ✅ 新写法 - 服务器图片 |
||||||
|
import { getBigImage } from '@/utils/imageHelper' |
||||||
|
|
||||||
|
<Image src={getBigImage('NO_DATA')} /> |
||||||
|
``` |
||||||
|
|
||||||
|
## 在组件中的使用示例 |
||||||
|
|
||||||
|
### 空数据组件 |
||||||
|
```typescript |
||||||
|
import { getBigImage } from '@/utils/imageHelper' |
||||||
|
|
||||||
|
const EmptyData = () => { |
||||||
|
return ( |
||||||
|
<View className="empty-data"> |
||||||
|
<Image |
||||||
|
src={getBigImage('NO_DATA')} |
||||||
|
mode="aspectFit" |
||||||
|
/> |
||||||
|
<Text>没有数据哦~</Text> |
||||||
|
</View> |
||||||
|
) |
||||||
|
} |
||||||
|
``` |
||||||
|
|
||||||
|
### 轮播图组件 |
||||||
|
```typescript |
||||||
|
import { getBigImage } from '@/utils/imageHelper' |
||||||
|
|
||||||
|
const Banner = () => { |
||||||
|
return ( |
||||||
|
<Swiper> |
||||||
|
<Swiper.Item> |
||||||
|
<Image |
||||||
|
src={getBigImage('SW_BG')} |
||||||
|
mode="aspectFill" |
||||||
|
/> |
||||||
|
</Swiper.Item> |
||||||
|
</Swiper> |
||||||
|
) |
||||||
|
} |
||||||
|
``` |
||||||
|
|
||||||
|
## 添加新图片 |
||||||
|
|
||||||
|
1. **将图片上传到服务器**：`http://39.101.75.71:8888/img/MiniBgImage/新图片.png` |
||||||
|
|
||||||
|
2. **在 `BIG_IMAGES` 中添加映射**： |
||||||
|
```typescript |
||||||
|
export const BIG_IMAGES = { |
||||||
|
// 现有图片... |
||||||
|
NEW_IMAGE: '新图片.png', // 添加新图片 |
||||||
|
} as const |
||||||
|
``` |
||||||
|
|
||||||
|
3. **在代码中使用**： |
||||||
|
```typescript |
||||||
|
<Image src={getBigImage('NEW_IMAGE')} /> |
||||||
|
``` |
||||||
|
|
||||||
|
## 注意事项 |
||||||
|
|
||||||
|
1. **文件名规范**：确保服务器上的文件名与代码中定义的一致 |
||||||
|
2. **网络依赖**：图片加载依赖网络，建议添加加载失败的兜底处理 |
||||||
|
3. **缓存策略**：小程序会自动缓存网络图片，但首次加载会有延迟 |
||||||
|
4. **预加载**：对于关键图片，建议在应用启动时预加载 |
||||||
|
|
||||||
|
## 错误处理 |
||||||
|
|
||||||
|
```typescript |
||||||
|
// 添加图片加载失败的处理 |
||||||
|
<Image |
||||||
|
src={getBigImage('NO_DATA')} |
||||||
|
mode="aspectFit" |
||||||
|
onError={() => { |
||||||
|
console.warn('图片加载失败') |
||||||
|
// 可以设置默认图片或隐藏图片 |
||||||
|
}} |
||||||
|
/> |
||||||
|
``` |
||||||
|
|
||||||
|
## 性能优化建议 |
||||||
|
|
||||||
|
1. **按需加载**：只在需要时获取图片 URL |
||||||
|
2. **预加载关键图片**：在应用启动时预加载常用图片 |
||||||
|
3. **图片压缩**：确保服务器上的图片已经过压缩优化 |
||||||
|
4. **CDN 加速**：考虑使用 CDN 加速图片访问 |
||||||
@ -0,0 +1,108 @@ |
|||||||
|
/** |
||||||
|
* 图片资源工具类 |
||||||
|
* 用于获取服务器端的大图资源 |
||||||
|
*/ |
||||||
|
|
||||||
|
import { config } from '@/config' |
||||||
|
|
||||||
|
/** |
||||||
|
* 获取大图的完整 URL |
||||||
|
* @param fileName 图片文件名（包含扩展名） |
||||||
|
* @returns 完整的图片 URL |
||||||
|
* |
||||||
|
* @example |
||||||
|
* getBigImageUrl('noData.png') // 返回: http://39.101.75.71:8888/img/MiniBgImage/noData.png
|
||||||
|
* getBigImageUrl('swBG.png') // 返回: http://39.101.75.71:8888/img/MiniBgImage/swBG.png
|
||||||
|
*/ |
||||||
|
export const getBigImageUrl = (fileName: string): string => { |
||||||
|
// 确保文件名不为空
|
||||||
|
if (!fileName) { |
||||||
|
console.warn('图片文件名不能为空') |
||||||
|
return '' |
||||||
|
} |
||||||
|
|
||||||
|
// 移除可能的前导斜杠
|
||||||
|
const cleanFileName = fileName.startsWith('/') ? fileName.slice(1) : fileName |
||||||
|
|
||||||
|
return `${config.bigImageUrl}/${cleanFileName}` |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 预定义的大图映射 |
||||||
|
* 方便使用和维护，避免硬编码文件名 |
||||||
|
*/ |
||||||
|
export const BIG_IMAGES = { |
||||||
|
// 空数据占位图
|
||||||
|
NO_DATA: 'noData.png', |
||||||
|
|
||||||
|
// 背景图片
|
||||||
|
SW_BG: 'swBG.png', |
||||||
|
USER_BG: 'user_bg.png', |
||||||
|
|
||||||
|
// 功能图片
|
||||||
|
FJMD: 'fjmd.png', |
||||||
|
SMKT: 'smkt.png', |
||||||
|
TGHX: 'tghx.png', |
||||||
|
} as const |
||||||
|
|
||||||
|
/** |
||||||
|
* 获取预定义大图的 URL |
||||||
|
* @param imageKey 图片键名 |
||||||
|
* @returns 完整的图片 URL |
||||||
|
* |
||||||
|
* @example |
||||||
|
* getBigImage('NO_DATA') // 返回: http://39.101.75.71:8888/img/MiniBgImage/noData.png
|
||||||
|
* getBigImage('SW_BG') // 返回: http://39.101.75.71:8888/img/MiniBgImage/swBG.png
|
||||||
|
*/ |
||||||
|
export const getBigImage = (imageKey: keyof typeof BIG_IMAGES): string => { |
||||||
|
const fileName = BIG_IMAGES[imageKey] |
||||||
|
if (!fileName) { |
||||||
|
console.warn(`未找到图片键: ${imageKey}`) |
||||||
|
return '' |
||||||
|
} |
||||||
|
|
||||||
|
return getBigImageUrl(fileName) |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 批量获取大图 URL |
||||||
|
* @param fileNames 图片文件名数组 |
||||||
|
* @returns 图片 URL 数组 |
||||||
|
* |
||||||
|
* @example |
||||||
|
* getBigImagesUrl(['noData.png', 'swBG.png']) |
||||||
|
* // 返回: ['http://39.101.75.71:8888/img/MiniBgImage/noData.png', 'http://39.101.75.71:8888/img/MiniBgImage/swBG.png']
|
||||||
|
*/ |
||||||
|
export const getBigImagesUrl = (fileNames: string[]): string[] => { |
||||||
|
return fileNames.map(fileName => getBigImageUrl(fileName)) |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 图片预加载工具 |
||||||
|
* @param imageUrls 图片 URL 数组 |
||||||
|
* @returns Promise，所有图片加载完成后 resolve |
||||||
|
*/ |
||||||
|
export const preloadImages = (imageUrls: string[]): Promise<void[]> => { |
||||||
|
const promises = imageUrls.map(url => { |
||||||
|
return new Promise<void>((resolve, reject) => { |
||||||
|
const img = new Image() |
||||||
|
img.onload = () => resolve() |
||||||
|
img.onerror = () => { |
||||||
|
console.warn(`图片预加载失败: ${url}`) |
||||||
|
resolve() // 即使失败也 resolve，避免阻塞其他图片
|
||||||
|
} |
||||||
|
img.src = url |
||||||
|
}) |
||||||
|
}) |
||||||
|
|
||||||
|
return Promise.all(promises) |
||||||
|
} |
||||||
|
|
||||||
|
// 默认导出主要方法
|
||||||
|
export default { |
||||||
|
getBigImageUrl, |
||||||
|
getBigImage, |
||||||
|
getBigImagesUrl, |
||||||
|
preloadImages, |
||||||
|
BIG_IMAGES |
||||||
|
} |
||||||
@ -0,0 +1,36 @@ |
|||||||
|
/** |
||||||
|
* 图片工具测试文件 |
||||||
|
* 用于验证服务器图片是否可以正常访问 |
||||||
|
*/ |
||||||
|
|
||||||
|
import { getBigImage, getBigImageUrl, BIG_IMAGES } from './imageHelper' |
||||||
|
|
||||||
|
// 测试所有预定义图片的 URL 生成
|
||||||
|
export const testImageUrls = () => { |
||||||
|
console.log('=== 图片工具测试 ===') |
||||||
|
|
||||||
|
// 测试预定义图片
|
||||||
|
Object.keys(BIG_IMAGES).forEach(key => { |
||||||
|
const url = getBigImage(key as keyof typeof BIG_IMAGES) |
||||||
|
console.log(`${key}: ${url}`) |
||||||
|
}) |
||||||
|
|
||||||
|
// 测试直接文件名
|
||||||
|
console.log('\n=== 直接文件名测试 ===') |
||||||
|
console.log('noData.png:', getBigImageUrl('noData.png')) |
||||||
|
console.log('swBG.png:', getBigImageUrl('swBG.png')) |
||||||
|
|
||||||
|
return { |
||||||
|
NO_DATA: getBigImage('NO_DATA'), |
||||||
|
SW_BG: getBigImage('SW_BG'), |
||||||
|
USER_BG: getBigImage('USER_BG'), |
||||||
|
FJMD: getBigImage('FJMD'), |
||||||
|
SMKT: getBigImage('SMKT'), |
||||||
|
TGHX: getBigImage('TGHX'), |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 在开发环境下自动运行测试
|
||||||
|
if (process.env.NODE_ENV === 'development') { |
||||||
|
testImageUrls() |
||||||
|
} |
||||||
Loading…
Reference in new issue