commit
c7a55d14da
192 changed files with 6225 additions and 0 deletions
@ -0,0 +1,12 @@ |
|||||
|
# http://editorconfig.org |
||||
|
root = true |
||||
|
|
||||
|
[*] |
||||
|
indent_style = space |
||||
|
indent_size = 2 |
||||
|
charset = utf-8 |
||||
|
trim_trailing_whitespace = true |
||||
|
insert_final_newline = true |
||||
|
|
||||
|
[*.md] |
||||
|
trim_trailing_whitespace = false |
||||
@ -0,0 +1,2 @@ |
|||||
|
# 配置文档参考 https://taro-docs.jd.com/docs/next/env-mode-config |
||||
|
# TARO_APP_ID="开发环境下的小程序 AppID" |
||||
@ -0,0 +1 @@ |
|||||
|
# TARO_APP_ID="生产环境下的小程序 AppID" |
||||
@ -0,0 +1 @@ |
|||||
|
# TARO_APP_ID="测试环境下的小程序 AppID" |
||||
@ -0,0 +1,7 @@ |
|||||
|
{ |
||||
|
"extends": ["taro/react"], |
||||
|
"rules": { |
||||
|
"react/jsx-uses-react": "off", |
||||
|
"react/react-in-jsx-scope": "off" |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,8 @@ |
|||||
|
dist/ |
||||
|
deploy_versions/ |
||||
|
.temp/ |
||||
|
.rn_temp/ |
||||
|
node_modules/ |
||||
|
.DS_Store |
||||
|
.swc |
||||
|
*.local |
||||
@ -0,0 +1,78 @@ |
|||||
|
# jf_202506 |
||||
|
|
||||
|
#### 介绍 |
||||
|
202506小程序交付 |
||||
|
|
||||
|
#### 软件架构 |
||||
|
taro react |
||||
|
|
||||
|
### 依赖工具 |
||||
|
+ **开发框架**：[tarojs@4.1.2](https://docs.taro.zone/docs/) |
||||
|
+ **基础架构**：[react@18.0](https://reactjs.org/) |
||||
|
+ **ui框架**：[antd-mobile@5.39](https://mobile.ant.design/zh) |
||||
|
|
||||
|
### 项目启动 |
||||
|
1. node > ver.18 |
||||
|
2. 安装yarn@1.22.19，执行`yarn install` |
||||
|
3. 执行`npm run dev:h5`，本地启动 |
||||
|
4. 执行`npm run build:h5`，打包编译 |
||||
|
|
||||
|
### 项目部署 |
||||
|
|
||||
|
1. 本地构建 |
||||
|
|
||||
|
```bash |
||||
|
// 1. git 操作拉取项目，此处省略... |
||||
|
// 2. 进入到项目根目录 |
||||
|
yarn install |
||||
|
// 3. 编译构建 |
||||
|
npm run build:h5 |
||||
|
``` |
||||
|
|
||||
|
2. 登录宝塔平台 |
||||
|
|
||||
|
3. 网站/HTML项目 下 添加HTML项目 |
||||
|
|
||||
|
 |
||||
|
|
||||
|
4. 修改nginx配置文件 |
||||
|
|
||||
|
 |
||||
|
|
||||
|
```nginx |
||||
|
location ^~/api { |
||||
|
proxy_set_header X-Real-IP $remote_addr; |
||||
|
proxy_set_header REMOTE-HOST $remote_addr; |
||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; |
||||
|
|
||||
|
proxy_http_version 1.1; |
||||
|
proxy_set_header Connection ''; |
||||
|
|
||||
|
proxy_buffering off; |
||||
|
proxy_cache off; |
||||
|
|
||||
|
proxy_read_timeout 86400s; |
||||
|
send_timeout 86400s; |
||||
|
|
||||
|
client_max_body_size 50m; |
||||
|
|
||||
|
# 这里改成 [对应的域名 + /api] |
||||
|
proxy_pass https://he.lehuonianhua.com/api; |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
|
||||
|
|
||||
|
5. 上传生产包 |
||||
|
|
||||
|
 |
||||
|
|
||||
|
6. 重启nginx |
||||
|
|
||||
|
 |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
## 讨论 |
||||
|
联系人：jinech 13478707150@163.com |
||||
@ -0,0 +1,12 @@ |
|||||
|
// babel-preset-taro 更多选项和默认值：
|
||||
|
// https://docs.taro.zone/docs/next/babel-config
|
||||
|
module.exports = { |
||||
|
presets: [ |
||||
|
['taro', { |
||||
|
framework: 'react', |
||||
|
ts: false, |
||||
|
compiler: 'vite', |
||||
|
useBuiltIns: process.env.TARO_ENV === 'h5' ? 'usage' : false |
||||
|
}] |
||||
|
] |
||||
|
} |
||||
@ -0,0 +1,16 @@ |
|||||
|
|
||||
|
|
||||
|
export default { |
||||
|
|
||||
|
mini: {}, |
||||
|
h5: { |
||||
|
devServer: { |
||||
|
proxy: { |
||||
|
'/api/Open': { |
||||
|
target: 'https://he.lehuonianhua.com', |
||||
|
changeOrigin: true, |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,89 @@ |
|||||
|
import { defineConfig } from '@tarojs/cli' |
||||
|
|
||||
|
import devConfig from './dev' |
||||
|
import prodConfig from './prod' |
||||
|
|
||||
|
// https://taro-docs.jd.com/docs/next/config#defineconfig-辅助函数
|
||||
|
export default defineConfig(async (merge, { command, mode }) => { |
||||
|
const baseConfig = { |
||||
|
projectName: 'jf_20250608', |
||||
|
date: '2025-6-8', |
||||
|
designWidth: 750, |
||||
|
deviceRatio: { |
||||
|
640: 2.34 / 2, |
||||
|
750: 1, |
||||
|
375: 2, |
||||
|
828: 1.81 / 2 |
||||
|
}, |
||||
|
sourceRoot: 'src', |
||||
|
outputRoot: 'dist', |
||||
|
plugins: [], |
||||
|
defineConstants: { |
||||
|
}, |
||||
|
copy: { |
||||
|
patterns: [ |
||||
|
], |
||||
|
options: { |
||||
|
} |
||||
|
}, |
||||
|
framework: 'react', |
||||
|
compiler: 'vite', |
||||
|
mini: { |
||||
|
postcss: { |
||||
|
pxtransform: { |
||||
|
enable: true, |
||||
|
config: { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
cssModules: { |
||||
|
enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
|
||||
|
config: { |
||||
|
namingPattern: 'module', // 转换模式，取值为 global/module
|
||||
|
generateScopedName: '[name]__[local]___[hash:base64:5]' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
h5: { |
||||
|
publicPath: '/', |
||||
|
staticDirectory: 'static', |
||||
|
|
||||
|
miniCssExtractPluginOption: { |
||||
|
ignoreOrder: true, |
||||
|
filename: 'css/[name].[hash].css', |
||||
|
chunkFilename: 'css/[name].[chunkhash].css' |
||||
|
}, |
||||
|
postcss: { |
||||
|
autoprefixer: { |
||||
|
enable: true, |
||||
|
config: {} |
||||
|
}, |
||||
|
cssModules: { |
||||
|
enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
|
||||
|
config: { |
||||
|
namingPattern: 'module', // 转换模式，取值为 global/module
|
||||
|
generateScopedName: '[name]__[local]___[hash:base64:5]' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
rn: { |
||||
|
appName: 'taroDemo', |
||||
|
postcss: { |
||||
|
cssModules: { |
||||
|
enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
process.env.BROWSERSLIST_ENV = process.env.NODE_ENV |
||||
|
|
||||
|
if (process.env.NODE_ENV === 'development') { |
||||
|
// 本地开发构建配置（不混淆压缩）
|
||||
|
return merge({}, baseConfig, devConfig) |
||||
|
} |
||||
|
// 生产构建配置（默认开启压缩混淆等）
|
||||
|
return merge({}, baseConfig, prodConfig) |
||||
|
}) |
||||
@ -0,0 +1,37 @@ |
|||||
|
|
||||
|
|
||||
|
export default { |
||||
|
mini: {}, |
||||
|
h5: { |
||||
|
// publicPath: '/ryc/',
|
||||
|
// staticDirectory: './ryc/static'
|
||||
|
// 确保产物为 es5
|
||||
|
// legacy: true,
|
||||
|
/** |
||||
|
* WebpackChain 插件配置 |
||||
|
* @docs https://github.com/neutrinojs/webpack-chain
|
||||
|
*/ |
||||
|
// webpackChain (chain) {
|
||||
|
// /**
|
||||
|
// * 如果 h5 端编译后体积过大，可以使用 webpack-bundle-analyzer 插件对打包体积进行分析。
|
||||
|
// * @docs https://github.com/webpack-contrib/webpack-bundle-analyzer
|
||||
|
// */
|
||||
|
// chain.plugin('analyzer')
|
||||
|
// .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
|
||||
|
// /**
|
||||
|
// * 如果 h5 端首屏加载时间过长，可以使用 prerender-spa-plugin 插件预加载首页。
|
||||
|
// * @docs https://github.com/chrisvfritz/prerender-spa-plugin
|
||||
|
// */
|
||||
|
// const path = require('path')
|
||||
|
// const Prerender = require('prerender-spa-plugin')
|
||||
|
// const staticDir = path.join(__dirname, '..', 'dist')
|
||||
|
// chain
|
||||
|
// .plugin('prerender')
|
||||
|
// .use(new Prerender({
|
||||
|
// staticDir,
|
||||
|
// routes: [ '/pages/index/index' ],
|
||||
|
// postProcess: (context) => ({ ...context, outputPath: path.join(staticDir, 'index.html') })
|
||||
|
// }))
|
||||
|
// }
|
||||
|
} |
||||
|
} |
||||
|
After Width: | Height: | Size: 117 KiB |
|
After Width: | Height: | Size: 183 KiB |
|
After Width: | Height: | Size: 202 KiB |
|
After Width: | Height: | Size: 74 KiB |
@ -0,0 +1,93 @@ |
|||||
|
{ |
||||
|
"name": "jf_20250608", |
||||
|
"version": "1.0.0", |
||||
|
"private": true, |
||||
|
"description": "", |
||||
|
"templateInfo": { |
||||
|
"name": "default", |
||||
|
"typescript": false, |
||||
|
"css": "Less", |
||||
|
"framework": "React" |
||||
|
}, |
||||
|
"scripts": { |
||||
|
"build:weapp": "taro build --type weapp", |
||||
|
"build:swan": "taro build --type swan", |
||||
|
"build:alipay": "taro build --type alipay", |
||||
|
"build:tt": "taro build --type tt", |
||||
|
"build:h5": "taro build --type h5", |
||||
|
"build:rn": "taro build --type rn", |
||||
|
"build:qq": "taro build --type qq", |
||||
|
"build:jd": "taro build --type jd", |
||||
|
"build:harmony-hybrid": "taro build --type harmony-hybrid", |
||||
|
"dev:weapp": "npm run build:weapp -- --watch", |
||||
|
"dev:swan": "npm run build:swan -- --watch", |
||||
|
"dev:alipay": "npm run build:alipay -- --watch", |
||||
|
"dev:tt": "npm run build:tt -- --watch", |
||||
|
"dev:h5": "npm run build:h5 -- --watch", |
||||
|
"dev:rn": "npm run build:rn -- --watch", |
||||
|
"dev:qq": "npm run build:qq -- --watch", |
||||
|
"dev:jd": "npm run build:jd -- --watch", |
||||
|
"dev:harmony-hybrid": "npm run build:harmony-hybrid -- --watch" |
||||
|
}, |
||||
|
"browserslist": { |
||||
|
"development": [ |
||||
|
"defaults and fully supports es6-module", |
||||
|
"maintained node versions" |
||||
|
], |
||||
|
"production": [ |
||||
|
"last 3 versions", |
||||
|
"Android >= 4.1", |
||||
|
"ios >= 8" |
||||
|
] |
||||
|
}, |
||||
|
"author": "", |
||||
|
"dependencies": { |
||||
|
"@babel/runtime": "^7.24.4", |
||||
|
"@tarojs/components": "4.1.2", |
||||
|
"@tarojs/helper": "4.1.2", |
||||
|
"@tarojs/plugin-framework-react": "4.1.2", |
||||
|
"@tarojs/plugin-platform-alipay": "4.1.2", |
||||
|
"@tarojs/plugin-platform-h5": "4.1.2", |
||||
|
"@tarojs/plugin-platform-harmony-hybrid": "4.1.2", |
||||
|
"@tarojs/plugin-platform-jd": "4.1.2", |
||||
|
"@tarojs/plugin-platform-qq": "4.1.2", |
||||
|
"@tarojs/plugin-platform-swan": "4.1.2", |
||||
|
"@tarojs/plugin-platform-tt": "4.1.2", |
||||
|
"@tarojs/plugin-platform-weapp": "4.1.2", |
||||
|
"@tarojs/react": "4.1.2", |
||||
|
"@tarojs/runtime": "4.1.2", |
||||
|
"@tarojs/shared": "4.1.2", |
||||
|
"@tarojs/taro": "4.1.2", |
||||
|
"ahooks": "^3.8.5", |
||||
|
"antd-mobile": "^5.39.0", |
||||
|
"axios": "^1.10.0", |
||||
|
"classnames": "^2.5.1", |
||||
|
"lodash": "^4.17.21", |
||||
|
"md5": "^2.3.0", |
||||
|
"qrcode.react": "^4.2.0", |
||||
|
"react": "^18.0.0", |
||||
|
"react-copy-to-clipboard": "^5.1.0", |
||||
|
"react-dom": "^18.0.0" |
||||
|
}, |
||||
|
"devDependencies": { |
||||
|
"@babel/core": "^7.24.4", |
||||
|
"@babel/helper-compilation-targets": "^7.27.2", |
||||
|
"@babel/plugin-transform-class-properties": "7.25.9", |
||||
|
"@babel/preset-react": "^7.24.1", |
||||
|
"@tarojs/cli": "4.1.2", |
||||
|
"@tarojs/vite-runner": "4.1.2", |
||||
|
"@types/react": "^18.0.0", |
||||
|
"@vitejs/plugin-react": "^4.3.0", |
||||
|
"babel-preset-taro": "4.1.2", |
||||
|
"eslint": "^8.57.0", |
||||
|
"eslint-config-taro": "4.1.2", |
||||
|
"eslint-plugin-react": "^7.34.1", |
||||
|
"eslint-plugin-react-hooks": "^4.4.0", |
||||
|
"less": "^4.2.0", |
||||
|
"postcss": "^8.4.38", |
||||
|
"react-refresh": "^0.14.0", |
||||
|
"stylelint": "^16.4.0", |
||||
|
"terser": "^5.30.4", |
||||
|
"vite": "^4.2.0" |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,15 @@ |
|||||
|
{ |
||||
|
"miniprogramRoot": "./dist", |
||||
|
"projectname": "jf_20250608", |
||||
|
"description": "", |
||||
|
"appid": "touristappid", |
||||
|
"setting": { |
||||
|
"urlCheck": true, |
||||
|
"es6": false, |
||||
|
"enhance": false, |
||||
|
"compileHotReLoad": false, |
||||
|
"postcss": false, |
||||
|
"minified": false |
||||
|
}, |
||||
|
"compileType": "miniprogram" |
||||
|
} |
||||
@ -0,0 +1,56 @@ |
|||||
|
export default defineAppConfig({ |
||||
|
pages: [ |
||||
|
'pages/index/index', |
||||
|
'pages/dataset/index', |
||||
|
'pages/mine/index', |
||||
|
'pages/login/index', |
||||
|
'pages/forget/index', |
||||
|
'pages/payforget/index', |
||||
|
'pages/register/index', |
||||
|
'pages/shopinfo/index', |
||||
|
'pages/team/index', |
||||
|
'pages/invite/index', |
||||
|
'pages/paymentmethod/index', |
||||
|
'pages/funds/index', |
||||
|
'pages/safe/index', |
||||
|
'pages/feedback/index', |
||||
|
'pages/myfeedback/index', |
||||
|
'pages/notice/index', |
||||
|
'pages/notice-detail/index', |
||||
|
'pages/viplevelup/index', |
||||
|
'pages/sitemessage/index', |
||||
|
'pages/payconfirm/index', |
||||
|
'pages/feeconfirm/index', |
||||
|
], |
||||
|
window: { |
||||
|
backgroundTextStyle: 'light', |
||||
|
navigationBarBackgroundColor: '#fff', |
||||
|
navigationBarTitleText: 'WeChat', |
||||
|
navigationBarTextStyle: 'black' |
||||
|
}, |
||||
|
tabBar: { |
||||
|
color: '#7A7E83', |
||||
|
selectedColor: '#007AFF', |
||||
|
backgroundColor: '#FAFAFA', |
||||
|
list: [ |
||||
|
{ |
||||
|
pagePath: 'pages/index/index', |
||||
|
text: '首页', |
||||
|
iconPath: 'assets/icons/home.png', |
||||
|
selectedIconPath: 'assets/icons/home-active.png' |
||||
|
}, |
||||
|
{ |
||||
|
pagePath: 'pages/dataset/index', |
||||
|
text: '数据优化', |
||||
|
iconPath: 'assets/icons/dataset.png', |
||||
|
selectedIconPath: 'assets/icons/dataset-active.png' |
||||
|
}, |
||||
|
{ |
||||
|
pagePath: 'pages/mine/index', |
||||
|
text: '我的', |
||||
|
iconPath: 'assets/icons/mine.png', |
||||
|
selectedIconPath: 'assets/icons/mine-active.png' |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
}) |
||||
@ -0,0 +1,15 @@ |
|||||
|
|
||||
|
import { useLaunch } from '@tarojs/taro'; |
||||
|
|
||||
|
import './app.less'; |
||||
|
|
||||
|
function App({ children }) { |
||||
|
useLaunch(() => { |
||||
|
console.log('App launched.') |
||||
|
}); |
||||
|
|
||||
|
// children 是将要会渲染的页面
|
||||
|
return children; |
||||
|
} |
||||
|
|
||||
|
export default App; |
||||
@ -0,0 +1,3 @@ |
|||||
|
:root { |
||||
|
--color-primary: #007AFF; |
||||
|
} |
||||
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 51 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 172 KiB |
@ -0,0 +1,71 @@ |
|||||
|
|
||||
|
import cls from 'classnames'; |
||||
|
import styles from './index.module.less'; |
||||
|
import { Image, ImageViewer } from 'antd-mobile'; |
||||
|
import { CameraOutline } from 'antd-mobile-icons'; |
||||
|
import { View } from '@tarojs/components'; |
||||
|
import { uploadImage64Action } from '../../request/actions'; |
||||
|
import Taro from '@tarojs/taro'; |
||||
|
import React, { useState } from 'react'; |
||||
|
|
||||
|
const FormImage = ({ value, className, onChange, readonly, ...props }) => { |
||||
|
const prefix = cls(styles.img, className); |
||||
|
const [visible, updateVisible] = useState(false); |
||||
|
|
||||
|
const handleClick = () => { |
||||
|
// TODO |
||||
|
if (readonly || value) { |
||||
|
updateVisible(true); |
||||
|
return; |
||||
|
} |
||||
|
const input = document.createElement('input'); |
||||
|
input.type = 'file'; |
||||
|
input.accept = 'image/*'; |
||||
|
input.onchange = (event) => { |
||||
|
const file = event.target.files[0]; |
||||
|
if (file) { |
||||
|
const reader = new FileReader(); |
||||
|
reader.onload = async () => { |
||||
|
const imageBase64 = reader.result; |
||||
|
const res = await uploadImage64Action({ imageBase64 }); |
||||
|
onChange(res?.logo); |
||||
|
}; |
||||
|
reader.readAsDataURL(file); // 将文件读取为 Base64 |
||||
|
} |
||||
|
}; |
||||
|
input.click(); |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
if (!value) { |
||||
|
if (readonly) { |
||||
|
return ( |
||||
|
<Image src={value} className={prefix} fit='fill' {...props} /> |
||||
|
); |
||||
|
} |
||||
|
return ( |
||||
|
<View className={styles.empty} onClick={handleClick} {...props}> |
||||
|
<CameraOutline /> |
||||
|
</View> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
return ( |
||||
|
<React.Fragment> |
||||
|
<Image src={value} className={prefix} fit='fill' onClick={handleClick} {...props} /> |
||||
|
<ImageViewer |
||||
|
classNames={{ |
||||
|
mask: 'customize-mask', |
||||
|
body: 'customize-body', |
||||
|
}} |
||||
|
image={value} |
||||
|
visible={visible} |
||||
|
onClose={() => { |
||||
|
updateVisible(false) |
||||
|
}} |
||||
|
/> |
||||
|
</React.Fragment> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default FormImage; |
||||
@ -0,0 +1,15 @@ |
|||||
|
|
||||
|
.img { |
||||
|
width: 72px; |
||||
|
height: 72px; |
||||
|
} |
||||
|
|
||||
|
.empty { |
||||
|
width: 72px; |
||||
|
height: 72px; |
||||
|
border-radius: 6px; |
||||
|
background-color: #f4f5f7; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
@ -0,0 +1,7 @@ |
|||||
|
|
||||
|
const FormLabel = ({ value, render, ...props }) => { |
||||
|
|
||||
|
return <span {...props} >{render ? render(value) : value}</span>; |
||||
|
}; |
||||
|
|
||||
|
export default FormLabel; |
||||
@ -0,0 +1,96 @@ |
|||||
|
import { useEffect, useRef, useState } from 'react'; |
||||
|
|
||||
|
import { AxiosRequestConfig } from 'axios'; |
||||
|
import { Toast } from 'antd-mobile'; |
||||
|
|
||||
|
type Request<T, U> = (params: T, options?: any) => Promise<U>; |
||||
|
|
||||
|
interface UseRequestListProps<P, R> { |
||||
|
action: Request<P, R>; |
||||
|
immediate?: boolean; |
||||
|
onOk?: () => void | boolean; |
||||
|
initFilterParams?: Partial<P>; |
||||
|
showMsg?: boolean; |
||||
|
options?: AxiosRequestConfig; |
||||
|
loop?: boolean; |
||||
|
interval?: number; |
||||
|
onLoop?: (data: any) => boolean; |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
function useRequestList<P, R>({ |
||||
|
action, |
||||
|
immediate = true, |
||||
|
onOk, |
||||
|
initFilterParams, |
||||
|
showMsg = false, |
||||
|
options = {}, |
||||
|
loop = false, |
||||
|
interval = 2000, |
||||
|
onLoop |
||||
|
}: UseRequestListProps<P, R>) { |
||||
|
const [loading, updateLoading] = useState(false); |
||||
|
const filterParamsRef = useRef(initFilterParams); |
||||
|
const [data, updateData] = useState<R>(); |
||||
|
|
||||
|
const timer = useRef<any>(null); |
||||
|
|
||||
|
const abortLoop = () => { |
||||
|
if (timer.current) { |
||||
|
clearInterval(timer.current); |
||||
|
timer.current = null; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
const getDataTask = async (params: P, loading = true) => { |
||||
|
try { |
||||
|
loading && updateLoading(true); |
||||
|
const filterParams = filterParamsRef.current; |
||||
|
const queryParams = { ...filterParams, ...params }; |
||||
|
const res = await action(queryParams, options); |
||||
|
filterParamsRef.current = queryParams; |
||||
|
updateData(res); |
||||
|
if (loop && onLoop?.(res)) { |
||||
|
timer.current = setTimeout(() => { |
||||
|
getDataTask(queryParams, loading); |
||||
|
}, interval); |
||||
|
} |
||||
|
else { |
||||
|
loading && updateLoading(false); |
||||
|
onOk?.(); |
||||
|
return res; |
||||
|
} |
||||
|
} |
||||
|
catch (err) { |
||||
|
abortLoop(); |
||||
|
showMsg && Toast.show({ |
||||
|
icon: 'error', |
||||
|
content: `${err}` |
||||
|
}); |
||||
|
} |
||||
|
finally { |
||||
|
loading && !loop && updateLoading(false); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
useEffect(() => { |
||||
|
return abortLoop; |
||||
|
}, []); |
||||
|
|
||||
|
useEffect(() => { |
||||
|
if (!immediate) { |
||||
|
return; |
||||
|
} |
||||
|
getDataTask({} as P); |
||||
|
}, []); |
||||
|
|
||||
|
return { |
||||
|
getDataTask, |
||||
|
loading, |
||||
|
data, |
||||
|
filterParams: filterParamsRef.current, |
||||
|
abortLoop |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
export default useRequestList; |
||||
@ -0,0 +1,50 @@ |
|||||
|
/* |
||||
|
* @Author: WIN-J7OL7MK489U\EDY 13478707150@163.com |
||||
|
* @Date: 2023-06-28 16:45:43 |
||||
|
* @LastEditors: BJ-HPC3\13478 13478707150@163.com |
||||
|
* @LastEditTime: 2025-02-21 17:15:40 |
||||
|
* @FilePath: \jsure_zdbg_web_react\src\hooks\useRequest\index.ts |
||||
|
* @Description: 通用请求 |
||||
|
*/ |
||||
|
|
||||
|
import { useState } from 'react'; |
||||
|
|
||||
|
import type { Request } from '@/request/utils'; |
||||
|
|
||||
|
interface UseRequestListProps<P, R> { |
||||
|
action?: Request<P, R>; |
||||
|
onOk?: () => void; |
||||
|
}; |
||||
|
|
||||
|
function useRequestSubmit<P, R>({ |
||||
|
action, |
||||
|
onOk, |
||||
|
}: UseRequestListProps<P, R>) { |
||||
|
const [loading, updateLoading] = useState(false); |
||||
|
const [data, updateData] = useState<R>(null); |
||||
|
|
||||
|
const actionTask = async (params: P, loading = true) => { |
||||
|
try { |
||||
|
loading && updateLoading(true); |
||||
|
const res = await action(params); |
||||
|
updateData(res); |
||||
|
onOk?.(); |
||||
|
return res; |
||||
|
} |
||||
|
catch (err) { |
||||
|
console.log('[request submit err]: ', err); |
||||
|
return Promise.reject(err); |
||||
|
} |
||||
|
finally { |
||||
|
loading && updateLoading(false); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
return { |
||||
|
actionTask, |
||||
|
loading, |
||||
|
data |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
export default useRequestSubmit; |
||||
@ -0,0 +1,17 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
<head> |
||||
|
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"> |
||||
|
<meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport"> |
||||
|
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||
|
<meta name="apple-touch-fullscreen" content="yes"> |
||||
|
<meta name="format-detection" content="telephone=no,address=no"> |
||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="white"> |
||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" > |
||||
|
<title>jf_20250608</title> |
||||
|
<script><%= htmlWebpackPlugin.options.script %></script> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div id="app"></div> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,111 @@ |
|||||
|
import React, { useEffect, useState } from 'react'; |
||||
|
import { PullToRefresh, List, Empty, Button, Modal, Toast } from 'antd-mobile'; |
||||
|
import { View, Text, ScrollView } from '@tarojs/components'; |
||||
|
import { getOrderListLoopAction, orderConfirmAction } from '../../../../request/actions'; |
||||
|
import { OrderStatusEnum } from '../../constants'; |
||||
|
import Taro, { useDidShow } from '@tarojs/taro'; |
||||
|
|
||||
|
import styles from './index.module.less'; |
||||
|
|
||||
|
const fetchDataRecursively = async (times, params, datasource) => { |
||||
|
if (times <= 0 || (datasource && datasource?.length < 10)) { |
||||
|
return []; |
||||
|
} |
||||
|
const lastOrderId = datasource?.[datasource?.length - 1]?.orderId; |
||||
|
const result = await getOrderListLoopAction({ ...params, lastOrderId }); |
||||
|
const nextResults = await fetchDataRecursively(times - 1, params, result?.dataList); |
||||
|
return [...result?.dataList, ...nextResults]; |
||||
|
}; |
||||
|
|
||||
|
const DataList = ({ orderStatus }) => { |
||||
|
const [data, setData] = useState([]); |
||||
|
|
||||
|
const initData = async () => { |
||||
|
const dataSource = await fetchDataRecursively(1, { orderStatus }); |
||||
|
setData(dataSource); |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
const handleScrollToLower = async () => { |
||||
|
const lastLogId = data?.[data?.length - 1]?.orderId; |
||||
|
const result = await getOrderListLoopAction({ lastLogId }); |
||||
|
const newDataSource = result?.dataList; |
||||
|
setData([...data, ...newDataSource]); |
||||
|
}; |
||||
|
|
||||
|
const handleJump = item => { |
||||
|
// 去支付 |
||||
|
if (orderStatus === OrderStatusEnum.waittingForPay.value) { |
||||
|
Taro.navigateTo({ |
||||
|
url: `/pages/payconfirm/index?orderId=${item.orderId}` |
||||
|
}); |
||||
|
} |
||||
|
// 确认订单 |
||||
|
if (orderStatus === OrderStatusEnum.waittingForConfirm.value) { |
||||
|
// Modal.confirm({ |
||||
|
// title: '是否确认收款?', |
||||
|
// onConfirm: async () => { |
||||
|
// try { |
||||
|
// const orderId = item.orderId; |
||||
|
// await orderConfirmAction({ orderId }); |
||||
|
// initData(); |
||||
|
// Toast.show({ |
||||
|
// icon: 'success', |
||||
|
// content: '已成功确认收款信息' |
||||
|
// }); |
||||
|
// } |
||||
|
// catch (err) { |
||||
|
// console.log('err: ', err); |
||||
|
// } |
||||
|
// } |
||||
|
// }) |
||||
|
Taro.navigateTo({ |
||||
|
url: `/pages/feeconfirm/index?orderId=${item.orderId}` |
||||
|
}); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
useDidShow(initData); |
||||
|
|
||||
|
useEffect(() => { |
||||
|
initData(); |
||||
|
}, [orderStatus]); |
||||
|
|
||||
|
return ( |
||||
|
<PullToRefresh |
||||
|
onRefresh={initData} |
||||
|
> |
||||
|
{data.length > 0 ? ( |
||||
|
<ScrollView |
||||
|
scrollY |
||||
|
onScrollToLower={handleScrollToLower} |
||||
|
lowerThreshold={50} |
||||
|
> |
||||
|
<List className={styles.list}> |
||||
|
{data.map((item, index) => ( |
||||
|
<List.Item key={index} onClick={() => handleJump(item)} arrowIcon={false}> |
||||
|
<View className={styles.row}> |
||||
|
<Text>订单编号: {item.orderId}</Text> |
||||
|
<Text>订单日期: {item.orderDate || '-'}</Text> |
||||
|
</View> |
||||
|
<View className={styles.row}> |
||||
|
<Text>订单金额: {item.orderPrice}</Text> |
||||
|
</View> |
||||
|
{orderStatus !== OrderStatusEnum.done.value && ( |
||||
|
<Button className={styles.btn}>{item.buttonText}</Button> |
||||
|
)} |
||||
|
</List.Item> |
||||
|
))} |
||||
|
</List> |
||||
|
</ScrollView> |
||||
|
) : ( |
||||
|
<Empty |
||||
|
style={{ padding: '64px 0' }} |
||||
|
description='暂无数据' |
||||
|
/> |
||||
|
)} |
||||
|
</PullToRefresh > |
||||
|
) |
||||
|
}; |
||||
|
|
||||
|
export default DataList; |
||||
@ -0,0 +1,12 @@ |
|||||
|
.row { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
font-size: 28px; |
||||
|
line-height: 2; |
||||
|
} |
||||
|
.btn { |
||||
|
width: 100%; |
||||
|
} |
||||
|
.list { |
||||
|
height: calc(100vh - 92px - 120px); |
||||
|
} |
||||
@ -0,0 +1,15 @@ |
|||||
|
|
||||
|
export const OrderStatusEnum = { |
||||
|
waittingForPay: { |
||||
|
label: '待付款', |
||||
|
value: '0' |
||||
|
}, |
||||
|
waittingForConfirm: { |
||||
|
label: '待确认', |
||||
|
value: '1' |
||||
|
}, |
||||
|
done: { |
||||
|
label: '已完成', |
||||
|
value: '9' |
||||
|
} |
||||
|
}; |
||||
@ -0,0 +1,4 @@ |
|||||
|
export default definePageConfig({ |
||||
|
navigationBarTitleText: '数据优化', |
||||
|
usingComponents: {}, |
||||
|
}) |
||||
@ -0,0 +1,25 @@ |
|||||
|
import { View } from '@tarojs/components'; |
||||
|
import { Tabs } from 'antd-mobile'; |
||||
|
|
||||
|
import DataList from './components/DataList'; |
||||
|
import { OrderStatusEnum } from './constants'; |
||||
|
|
||||
|
import styles from './index.module.less'; |
||||
|
|
||||
|
export default function Dataset() { |
||||
|
return ( |
||||
|
<View className={styles.container}> |
||||
|
<Tabs className={styles.tabs} defaultActiveKey={OrderStatusEnum.waittingForPay.value}> |
||||
|
<Tabs.Tab title='待支付' key={OrderStatusEnum.waittingForPay.value}> |
||||
|
<DataList orderStatus={OrderStatusEnum.waittingForPay.value} /> |
||||
|
</Tabs.Tab> |
||||
|
<Tabs.Tab title='待确认' key={OrderStatusEnum.waittingForConfirm.value}> |
||||
|
<DataList orderStatus={OrderStatusEnum.waittingForConfirm.value} /> |
||||
|
</Tabs.Tab> |
||||
|
<Tabs.Tab title='已完成' key={OrderStatusEnum.done.value}> |
||||
|
<DataList orderStatus={OrderStatusEnum.done.value} /> |
||||
|
</Tabs.Tab> |
||||
|
</Tabs> |
||||
|
</View> |
||||
|
) |
||||
|
} |
||||
@ -0,0 +1,16 @@ |
|||||
|
.container { |
||||
|
position: relative; |
||||
|
|
||||
|
.tabs { |
||||
|
height: 82px; |
||||
|
position: sticky; |
||||
|
top: 0; |
||||
|
z-index: 9; |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
:global { |
||||
|
.adm-list-body { |
||||
|
border-top: unset; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,42 @@ |
|||||
|
import { View } from '@tarojs/components'; |
||||
|
import { Form } from 'antd-mobile'; |
||||
|
import FormLabel from '/components/FormLabel'; |
||||
|
import FormImage from '/components/FormImage'; |
||||
|
|
||||
|
import styles from './index.module.less'; |
||||
|
|
||||
|
export default function Alipay({ namePrefix }) { |
||||
|
|
||||
|
return ( |
||||
|
<View className={styles.container}> |
||||
|
<Form.Item |
||||
|
name={`${namePrefix}-alipay`} |
||||
|
label='支付宝账号' |
||||
|
childElementPosition='right' |
||||
|
> |
||||
|
<FormLabel /> |
||||
|
</Form.Item> |
||||
|
<Form.Item |
||||
|
name={`${namePrefix}-alipayName`} |
||||
|
label='支付宝姓名' |
||||
|
childElementPosition='right' |
||||
|
> |
||||
|
<FormLabel /> |
||||
|
</Form.Item> |
||||
|
{/* <Form.Item |
||||
|
name={`${namePrefix}-alipayImage`} |
||||
|
label='收款码' |
||||
|
childElementPosition='right' |
||||
|
> |
||||
|
<FormImage readonly width={72} height={72} /> |
||||
|
</Form.Item> */} |
||||
|
{/* <Form.Item |
||||
|
name='password' |
||||
|
label='支付密码' |
||||
|
rules={[{ required: true, message: '请输入支付密码' }]} |
||||
|
> |
||||
|
<Input type='password' placeholder='请输入支付密码' /> |
||||
|
</Form.Item> */} |
||||
|
</View > |
||||
|
) |
||||
|
} |
||||
@ -0,0 +1,3 @@ |
|||||
|
.container { |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,41 @@ |
|||||
|
import { View } from '@tarojs/components'; |
||||
|
import { Form } from 'antd-mobile'; |
||||
|
import FormLabel from '/components/FormLabel'; |
||||
|
|
||||
|
import styles from './index.module.less'; |
||||
|
|
||||
|
export default function BankPay({ namePrefix }) { |
||||
|
|
||||
|
return ( |
||||
|
<View className={styles.container}> |
||||
|
<Form.Item |
||||
|
name={`${namePrefix}-payeeBank`} |
||||
|
label='开户行' |
||||
|
childElementPosition='right' |
||||
|
> |
||||
|
<FormLabel /> |
||||
|
</Form.Item> |
||||
|
<Form.Item |
||||
|
name={`${namePrefix}-payeeAccount`} |
||||
|
label='银行卡号' |
||||
|
childElementPosition='right' |
||||
|
> |
||||
|
<FormLabel /> |
||||
|
</Form.Item> |
||||
|
<Form.Item |
||||
|
name={`${namePrefix}-payeeName`} |
||||
|
label='开户人' |
||||
|
childElementPosition='right' |
||||
|
> |
||||
|
<FormLabel /> |
||||
|
</Form.Item> |
||||
|
{/* <Form.Item |
||||
|
name='password' |
||||
|
label='支付密码' |
||||
|
rules={[{ required: true, message: '请输入支付密码' }]} |
||||
|
> |
||||
|
<Input type='password' placeholder='请输入支付密码' /> |
||||
|
</Form.Item> */} |
||||
|
</View > |
||||
|
) |
||||
|
} |
||||
@ -0,0 +1,2 @@ |
|||||
|
.container { |
||||
|
} |
||||
@ -0,0 +1,179 @@ |
|||||
|
import { View } from '@tarojs/components'; |
||||
|
import { Button, CapsuleTabs, Form, Modal, Toast } from 'antd-mobile'; |
||||
|
|
||||
|
import FormImage from '/components/FormImage'; |
||||
|
import FormLabel from '/components/FormLabel'; |
||||
|
import React, { useEffect, useMemo, useState } from 'react'; |
||||
|
import { getOrderInfoAction } from '/request/actions'; |
||||
|
import { getUrlParam } from '/utils'; |
||||
|
import Taro from '@tarojs/taro'; |
||||
|
|
||||
|
// import Alipay from '../Alipay'; |
||||
|
// import Wxpay from '../Wxpay'; |
||||
|
// import BankPay from '../BankPay'; |
||||
|
|
||||
|
// import aliSrc from '/assets/icons/ali.svg'; |
||||
|
// import wxSrc from '/assets/icons/wx.svg'; |
||||
|
// import bankSrc from '/assets/icons/bank.svg'; |
||||
|
import { orderConfirmAction } from '../../../../request/actions'; |
||||
|
|
||||
|
import styles from './index.module.less'; |
||||
|
|
||||
|
// const TabItem = ({ src, text }) => ( |
||||
|
// <View className={styles['tabitem']}> |
||||
|
// <img src={src} /> |
||||
|
// {text} |
||||
|
// </View> |
||||
|
// ); |
||||
|
|
||||
|
export default function FormBar() { |
||||
|
const [form] = Form.useForm(); |
||||
|
// const [showFee, updateShowFee] = useState(false); |
||||
|
|
||||
|
useEffect(() => { |
||||
|
getOrderInfoAction({ |
||||
|
orderId: getUrlParam('orderId') |
||||
|
}).then(res => { |
||||
|
const orderShopInfo = res.orderShopInfo || {}; |
||||
|
const feeShopInfo = res.feeShopInfo || {}; |
||||
|
const _orderShopInfo = Object.keys(orderShopInfo).reduce((res, key) => { |
||||
|
return { |
||||
|
...res, |
||||
|
[`pay-${key}`]: orderShopInfo[key] |
||||
|
} |
||||
|
}, {}); |
||||
|
const _feeShopInfo = Object.keys(orderShopInfo).reduce((res, key) => { |
||||
|
return { |
||||
|
...res, |
||||
|
[`fee-${key}`]: feeShopInfo[key] |
||||
|
} |
||||
|
}, {}); |
||||
|
form.setFieldsValue({ |
||||
|
...res, |
||||
|
..._orderShopInfo, |
||||
|
..._feeShopInfo |
||||
|
}); |
||||
|
|
||||
|
// updateShowFee(res.feePrice || res.feeImage || res.feeShopInfo) |
||||
|
}); |
||||
|
}, []); |
||||
|
|
||||
|
const handleSubmit = () => { |
||||
|
Modal.confirm({ |
||||
|
title: '是否确认收款?', |
||||
|
onConfirm: async () => { |
||||
|
try { |
||||
|
const orderId = getUrlParam('orderId'); |
||||
|
await orderConfirmAction({ orderId }); |
||||
|
Toast.show({ |
||||
|
icon: 'success', |
||||
|
content: '已成功确认收款信息' |
||||
|
}); |
||||
|
Taro.navigateTo({ |
||||
|
url: '/pages/dataset/index' |
||||
|
}); |
||||
|
} |
||||
|
catch (err) { |
||||
|
console.log('err: ', err); |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
}; |
||||
|
|
||||
|
// const way = Form.useWatch('way', form); |
||||
|
// const feeway = Form.useWatch('feeway', form); |
||||
|
|
||||
|
// const detailRenderer = useMemo(() => { |
||||
|
// return { |
||||
|
// alipay: <Alipay namePrefix='pay' />, |
||||
|
// wx: <Wxpay namePrefix='pay' />, |
||||
|
// bank: <BankPay namePrefix='pay' /> |
||||
|
// }[way]; |
||||
|
// }, [way]); |
||||
|
|
||||
|
// const feeDetailRenderer = useMemo(() => { |
||||
|
// return { |
||||
|
// alipay: <Alipay namePrefix='fee' />, |
||||
|
// wx: <Wxpay namePrefix='fee' />, |
||||
|
// bank: <BankPay namePrefix='fee' /> |
||||
|
// }[feeway]; |
||||
|
// }, [feeway]); |
||||
|
|
||||
|
const payImage = Form.useWatch('payImage', form); |
||||
|
const feeImage = Form.useWatch('feeImage', form); |
||||
|
|
||||
|
return ( |
||||
|
<View className={styles.container}> |
||||
|
<Form form={form} className={styles.form} layout='horizontal' > |
||||
|
<View className={styles.title}> |
||||
|
收款信息 |
||||
|
</View> |
||||
|
<Form.Item name='orderId' label='订单编号' childElementPosition='right'> |
||||
|
<FormLabel /> |
||||
|
</Form.Item> |
||||
|
<Form.Item name='orderDate' label='订单日期' childElementPosition='right'> |
||||
|
<FormLabel /> |
||||
|
</Form.Item> |
||||
|
<Form.Item name='orderPrice' label='订单金额' childElementPosition='right'> |
||||
|
<FormLabel render={val => `￥${val || 0}`} /> |
||||
|
</Form.Item> |
||||
|
<Form.Item name='feePrice' label='服务费金额' childElementPosition='right'> |
||||
|
<FormLabel render={val => `￥${val || 0}`} /> |
||||
|
</Form.Item> |
||||
|
<Form.Item name='payUserTelephone' label='付款账号' childElementPosition='right'> |
||||
|
<FormLabel /> |
||||
|
</Form.Item> |
||||
|
<Form.Item style={!payImage ? { display: 'none' } : {}} name='payImage' label='付款凭证' childElementPosition='right'> |
||||
|
<FormImage readonly /> |
||||
|
</Form.Item> |
||||
|
<Form.Item style={!feeImage ? { display: 'none' } : {}} name='feeImage' label='服务费凭证' childElementPosition='right'> |
||||
|
<FormImage readonly /> |
||||
|
</Form.Item> |
||||
|
{/* <Form.Item |
||||
|
name='way' |
||||
|
label='提现方式' |
||||
|
valuePropName='activeKey' |
||||
|
initialValue='alipay' |
||||
|
childElementPosition='right' |
||||
|
> |
||||
|
<CapsuleTabs style={{ padding: 0 }}> |
||||
|
<CapsuleTabs.Tab title={<TabItem text='支付宝' src={aliSrc} />} key='alipay' /> |
||||
|
<CapsuleTabs.Tab title={<TabItem text='微信' src={wxSrc} />} key='wx' /> |
||||
|
<CapsuleTabs.Tab title={<TabItem text='银行卡' src={bankSrc} />} key='bank' /> |
||||
|
</CapsuleTabs> |
||||
|
</Form.Item> |
||||
|
{detailRenderer} |
||||
|
{showFee && ( |
||||
|
<React.Fragment> |
||||
|
<View className={styles.title}> |
||||
|
服务费收款信息 |
||||
|
</View> |
||||
|
<Form.Item name='feePrice' label='服务费' childElementPosition='right'> |
||||
|
<FormLabel render={val => `￥${val || 0}`} /> |
||||
|
</Form.Item> |
||||
|
<Form.Item name='feeImage' label='服务费付款凭证' childElementPosition='right'> |
||||
|
<FormImage readonly /> |
||||
|
</Form.Item> |
||||
|
<Form.Item |
||||
|
name='feeway' |
||||
|
label='提现方式' |
||||
|
valuePropName='activeKey' |
||||
|
initialValue='alipay' |
||||
|
childElementPosition='right' |
||||
|
> |
||||
|
<CapsuleTabs style={{ padding: 0 }}> |
||||
|
<CapsuleTabs.Tab title={<TabItem text='支付宝' src={aliSrc} />} key='alipay' /> |
||||
|
<CapsuleTabs.Tab title={<TabItem text='微信' src={wxSrc} />} key='wx' /> |
||||
|
<CapsuleTabs.Tab title={<TabItem text='银行卡' src={bankSrc} />} key='bank' /> |
||||
|
</CapsuleTabs> |
||||
|
</Form.Item> |
||||
|
{feeDetailRenderer} |
||||
|
</React.Fragment> |
||||
|
)} */} |
||||
|
</Form > |
||||
|
<Button color='primary' shape='rounded' className={styles.submit} onClick={handleSubmit}> |
||||
|
确认收款 |
||||
|
</Button> |
||||
|
</View> |
||||
|
) |
||||
|
} |
||||
@ -0,0 +1,71 @@ |
|||||
|
.container { |
||||
|
background-color: #fff; |
||||
|
border-radius: 18px; |
||||
|
padding: 32px 32px 48px 32px; |
||||
|
|
||||
|
.tabitem { |
||||
|
font-size: 24px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
img { |
||||
|
width: 28px; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.btn { |
||||
|
width: 100%; |
||||
|
margin-top: 24px; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
font-size: 28px; |
||||
|
font-weight: 600; |
||||
|
margin: 24px 0; |
||||
|
} |
||||
|
|
||||
|
.margin { |
||||
|
margin-top: 32px; |
||||
|
} |
||||
|
|
||||
|
.submit { |
||||
|
width: 100%; |
||||
|
margin-top: 72px; |
||||
|
} |
||||
|
|
||||
|
:global { |
||||
|
.adm-capsule-tabs-header { |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
.adm-list-item-content-prefix { |
||||
|
width: 168px; |
||||
|
} |
||||
|
|
||||
|
.adm-capsule-tabs-tab { |
||||
|
padding: 8px; |
||||
|
border-radius: 6px; |
||||
|
border: 1px solid transparent; |
||||
|
transition: all .2s ease-in-out; |
||||
|
} |
||||
|
|
||||
|
.adm-capsule-tabs-tab-active { |
||||
|
color: var(--color-primary); |
||||
|
background-color: #f0f9ff; |
||||
|
border-color: var(--color-primary); |
||||
|
} |
||||
|
|
||||
|
.adm-list-body { |
||||
|
border-top: unset; |
||||
|
} |
||||
|
|
||||
|
.adm-list-item { |
||||
|
padding-left: 0; |
||||
|
} |
||||
|
|
||||
|
.adm-list-item-content { |
||||
|
border-top: unset; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,42 @@ |
|||||
|
import { View } from '@tarojs/components'; |
||||
|
import { Form } from 'antd-mobile'; |
||||
|
import FormLabel from '/components/FormLabel'; |
||||
|
import FormImage from '/components/FormImage'; |
||||
|
|
||||
|
import styles from './index.module.less'; |
||||
|
|
||||
|
export default function Wxpay({ namePrefix }) { |
||||
|
|
||||
|
return ( |
||||
|
<View className={styles.container}> |
||||
|
<Form.Item |
||||
|
name={`${namePrefix}-weixin`} |
||||
|
label='微信账号' |
||||
|
childElementPosition='right' |
||||
|
> |
||||
|
<FormLabel /> |
||||
|
</Form.Item> |
||||
|
<Form.Item |
||||
|
name={`${namePrefix}-weixinName`} |
||||
|
label='微信姓名' |
||||
|
childElementPosition='right' |
||||
|
> |
||||
|
<FormLabel /> |
||||
|
</Form.Item> |
||||
|
{/* <Form.Item |
||||
|
name={`${namePrefix}-weixinImage`} |
||||
|
label='收款码' |
||||
|
childElementPosition='right' |
||||
|
> |
||||
|
<FormImage readonly width={72} height={72} /> |
||||
|
</Form.Item> */} |
||||
|
{/* <Form.Item |
||||
|
name='password' |
||||
|
label='支付密码' |
||||
|
rules={[{ required: true, message: '请输入支付密码' }]} |
||||
|
> |
||||
|
<Input type='password' placeholder='请输入支付密码' /> |
||||
|
</Form.Item> */} |
||||
|
</View > |
||||
|
) |
||||
|
} |
||||
@ -0,0 +1,2 @@ |
|||||
|
.container { |
||||
|
} |
||||
@ -0,0 +1,4 @@ |
|||||
|
export default definePageConfig({ |
||||
|
navigationBarTitleText: '确认收款', |
||||
|
usingComponents: {}, |
||||
|
}) |
||||
@ -0,0 +1,25 @@ |
|||||
|
import { View } from '@tarojs/components'; |
||||
|
import Taro from '@tarojs/taro'; |
||||
|
|
||||
|
import FormBar from './components/FormBar'; |
||||
|
import { NavBar } from 'antd-mobile'; |
||||
|
|
||||
|
import styles from './index.module.less'; |
||||
|
|
||||
|
export default function ShopInfo() { |
||||
|
|
||||
|
const handleBack = () => { |
||||
|
Taro.navigateTo({ |
||||
|
url: '/pages/dataset/index' |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
return ( |
||||
|
<View className={styles.container}> |
||||
|
<NavBar onBack={handleBack} style={{ padding: 0 }}>确认收款</NavBar> |
||||
|
<View className={styles.wrapper}> |
||||
|
<FormBar /> |
||||
|
</View> |
||||
|
</View> |
||||
|
) |
||||
|
} |
||||
@ -0,0 +1,10 @@ |
|||||
|
.container { |
||||
|
background: linear-gradient(180deg, #d7ebfa, #f5f5f5 30vh); |
||||
|
height: 100%; |
||||
|
overflow-y: auto; |
||||
|
|
||||
|
.wrapper { |
||||
|
box-sizing: border-box; |
||||
|
padding: 42px; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,4 @@ |
|||||
|
export default definePageConfig({ |
||||
|
navigationBarTitleText: '反馈', |
||||
|
usingComponents: {}, |
||||
|
}) |
||||
@ -0,0 +1,45 @@ |
|||||
|
import { View } from '@tarojs/components'; |
||||
|
import Taro from '@tarojs/taro'; |
||||
|
|
||||
|
import { Button, Form, NavBar, TextArea } from 'antd-mobile'; |
||||
|
import { feedbackAction } from '../../request/actions'; |
||||
|
|
||||
|
import styles from './index.module.less'; |
||||
|
|
||||
|
export default function Feedback() { |
||||
|
const [form] = Form.useForm(); |
||||
|
|
||||
|
const handleBack = () => { |
||||
|
Taro.navigateTo({ |
||||
|
url: '/pages/mine/index' |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
const handleVery = async () => { |
||||
|
try { |
||||
|
const values = await form.validateFields(); |
||||
|
console.log('values: ', values); |
||||
|
await feedbackAction(values); |
||||
|
handleBack(); |
||||
|
} |
||||
|
catch (err) { |
||||
|
console.log('err: ', err); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
return ( |
||||
|
<View className={styles.container}> |
||||
|
<NavBar onBack={handleBack} style={{ padding: 0 }}> |
||||
|
反馈 |
||||
|
</NavBar> |
||||
|
<Form form={form} className={styles.form} layout='horizontal'> |
||||
|
<Form.Item name='contents' rules={[{ required: true, message: '请填写反馈内容' }]}> |
||||
|
<TextArea placeholder='请输入反馈' autoFocus autoSize={{ minRows: 12 }} /> |
||||
|
</Form.Item> |
||||
|
<Button color='primary' shape='rounded' className={styles.submit} onClick={handleVery}> |
||||
|
提交 |
||||
|
</Button> |
||||
|
</Form > |
||||
|
</View> |
||||
|
); |
||||
|
} |
||||
@ -0,0 +1,28 @@ |
|||||
|
.container { |
||||
|
background: linear-gradient(180deg, #d7ebfa, #f5f5f5 30vh); |
||||
|
height: 100%; |
||||
|
|
||||
|
.form { |
||||
|
background-color: #fff; |
||||
|
border-radius: 18px; |
||||
|
padding: 32px 32px 48px 32px; |
||||
|
width: 620px; |
||||
|
margin: 0 auto; |
||||
|
margin-top: 72px; |
||||
|
|
||||
|
:global { |
||||
|
.adm-list-body { |
||||
|
border-top: unset; |
||||
|
} |
||||
|
|
||||
|
.adm-list-item { |
||||
|
padding-left: 0; |
||||
|
} |
||||
|
} |
||||
|
.submit { |
||||
|
width: 100%; |
||||
|
margin-top: 72px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,93 @@ |
|||||
|
import { View } from '@tarojs/components'; |
||||
|
import { Button, Form, Input, Toast } from 'antd-mobile'; |
||||
|
import { useState } from 'react'; |
||||
|
import Taro from '@tarojs/taro'; |
||||
|
import { editPasswordAction } from '../../../../request/actions'; |
||||
|
|
||||
|
import styles from './index.module.less'; |
||||
|
|
||||
|
export default function FormBar() { |
||||
|
const [form] = Form.useForm(); |
||||
|
|
||||
|
const [countdown, setCountdown] = useState(60); |
||||
|
const [isCounting, setIsCounting] = useState(false); |
||||
|
|
||||
|
const sendVerificationCode = () => { |
||||
|
if (isCounting) { |
||||
|
return; |
||||
|
} |
||||
|
setIsCounting(true); |
||||
|
// Simulate sending verification code |
||||
|
console.log('Sending verification code...'); |
||||
|
const interval = setInterval(() => { |
||||
|
setCountdown(prev => { |
||||
|
if (prev <= 1) { |
||||
|
clearInterval(interval); |
||||
|
setIsCounting(false); |
||||
|
return 60; // Reset countdown |
||||
|
} |
||||
|
return prev - 1; |
||||
|
}); |
||||
|
}, 1000); |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
const handleReset = async () => { |
||||
|
try { |
||||
|
const values = await form.validateFields(); |
||||
|
await editPasswordAction(values); |
||||
|
Toast.show({ |
||||
|
icon: 'success', |
||||
|
content: '密码修改成功' |
||||
|
}); |
||||
|
Taro.navigateBack(); |
||||
|
} |
||||
|
catch (err) { |
||||
|
console.log('err: ', err); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
return ( |
||||
|
<View className={styles.container}> |
||||
|
<Form form={form} className={styles.form}> |
||||
|
<Form.Item |
||||
|
name='newPassword' |
||||
|
label='新密码' |
||||
|
rules={[ |
||||
|
{ required: true, message: '请输入密码' }, |
||||
|
{ whitespace: true, message: '请输入有效的密码' } |
||||
|
]} |
||||
|
> |
||||
|
<Input placeholder='请输入密码' /> |
||||
|
</Form.Item> |
||||
|
<Form.Item |
||||
|
name='repassword' |
||||
|
label='确认密码' |
||||
|
rules={[ |
||||
|
{ required: true, message: '请确认密码' }, |
||||
|
{ whitespace: true, message: '请输入有效的密码' } |
||||
|
]} |
||||
|
> |
||||
|
<Input type='password' placeholder='请确认密码' /> |
||||
|
</Form.Item> |
||||
|
{/* <Form.Item |
||||
|
name='veryCode' |
||||
|
label='验证码' |
||||
|
rules={[{ required: true, message: '请输入新密码' }]} |
||||
|
extra={ |
||||
|
<View className={styles.extra} onClick={sendVerificationCode}> |
||||
|
<a>{isCounting ? `（${countdown}秒后重新获取）` : '发送验证码'}</a> |
||||
|
</View> |
||||
|
} |
||||
|
> |
||||
|
<Input |
||||
|
placeholder='请输入验证码' |
||||
|
style={{ '--text-align': 'left' }} |
||||
|
clearable |
||||
|
/> |
||||
|
</Form.Item> */} |
||||
|
</Form > |
||||
|
<Button color='primary' className={styles.submit} onClick={handleReset}>确认修改</Button> |
||||
|
</View > |
||||
|
) |
||||
|
} |
||||
@ -0,0 +1,46 @@ |
|||||
|
.container { |
||||
|
background-color: #fff; |
||||
|
border-radius: 18px; |
||||
|
margin-top: 72px; |
||||
|
padding: 32px; |
||||
|
|
||||
|
.form { |
||||
|
:global { |
||||
|
.adm-list-body { |
||||
|
border-top: unset; |
||||
|
} |
||||
|
|
||||
|
.adm-list-item { |
||||
|
padding-left: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.extra { |
||||
|
color: #007AFF; |
||||
|
position: relative; |
||||
|
font-size: 24px; |
||||
|
top: 24px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.bar { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
padding: 24px 72px; |
||||
|
|
||||
|
.btn { |
||||
|
font-size: 24px; |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
|
||||
|
&:first-child { |
||||
|
border-right: 1px solid #eee; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.submit { |
||||
|
width: 100%; |
||||
|
margin-top: 72px; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,33 @@ |
|||||
|
import { View } from '@tarojs/components'; |
||||
|
import { useLoad } from '@tarojs/taro'; |
||||
|
import logoSrc from '/assets/icons/logo.png'; |
||||
|
|
||||
|
import styles from './index.module.less'; |
||||
|
|
||||
|
export default function HeaderBar() { |
||||
|
|
||||
|
useLoad(() => { |
||||
|
console.log('Page loaded.') |
||||
|
}); |
||||
|
|
||||
|
return ( |
||||
|
<View className={styles.container}> |
||||
|
<View className={styles.row}> |
||||
|
<View className={styles.title}> |
||||
|
Hi Weaith |
||||
|
</View> |
||||
|
<View className={styles.subtitle}> |
||||
|
欢迎您来到融易诚 |
||||
|
</View> |
||||
|
</View> |
||||
|
<View className={styles.row2}> |
||||
|
<View className={styles.item}> |
||||
|
<img src={logoSrc} className={styles.logo} alt='logo' /> |
||||
|
<View className={styles.title}> |
||||
|
融易诚 |
||||
|
</View> |
||||
|
</View> |
||||
|
</View> |
||||
|
</View> |
||||
|
) |
||||
|
} |
||||
@ -0,0 +1,42 @@ |
|||||
|
.container { |
||||
|
.row { |
||||
|
.title { |
||||
|
font-weight: normal; |
||||
|
overflow-wrap: normal; |
||||
|
font-size: 42px; |
||||
|
color: rgb(48, 49, 51); |
||||
|
} |
||||
|
|
||||
|
.subtitle { |
||||
|
font-weight: normal; |
||||
|
overflow-wrap: normal; |
||||
|
font-size: 32px; |
||||
|
color: rgb(48, 49, 51); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.row2 { |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
|
||||
|
.item { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
margin-right: 42px; |
||||
|
|
||||
|
.title { |
||||
|
font-weight: normal; |
||||
|
overflow-wrap: normal; |
||||
|
font-size: 32px; |
||||
|
color: rgb(48, 49, 51); |
||||
|
text-align: center; |
||||
|
} |
||||
|
.logo { |
||||
|
width: 120px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,4 @@ |
|||||
|
export default definePageConfig({ |
||||
|
navigationBarTitleText: '忘记密码', |
||||
|
usingComponents: {}, |
||||
|
}) |
||||
@ -0,0 +1,34 @@ |
|||||
|
import { View } from '@tarojs/components'; |
||||
|
import Taro, { useLoad } from '@tarojs/taro'; |
||||
|
|
||||
|
import HeaderBar from './components/HeaderBar'; |
||||
|
import FormBar from './components/FormBar'; |
||||
|
import { NavBar } from 'antd-mobile'; |
||||
|
|
||||
|
import styles from './index.module.less'; |
||||
|
|
||||
|
export default function Forget() { |
||||
|
const query = Taro.getCurrentInstance()?.router?.params; |
||||
|
|
||||
|
useLoad(() => { |
||||
|
console.log('Page loaded.') |
||||
|
}); |
||||
|
|
||||
|
const handleBack = () => { |
||||
|
Taro.navigateBack(); |
||||
|
}; |
||||
|
|
||||
|
return ( |
||||
|
<View className={styles.container}> |
||||
|
{query?.hasBack && ( |
||||
|
<NavBar onBack={handleBack} style={{ padding: 0 }}> |
||||
|
忘记密码 |
||||
|
</NavBar> |
||||
|
)} |
||||
|
<View className={styles.wrapper}> |
||||
|
<HeaderBar /> |
||||
|
<FormBar /> |
||||
|
</View> |
||||
|
</View> |
||||
|
); |
||||
|
} |
||||
@ -0,0 +1,51 @@ |
|||||
|
.container { |
||||
|
background: linear-gradient(180deg, #d7ebfa, #f5f5f5 30vh); |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.wrapper { |
||||
|
box-sizing: border-box; |
||||
|
padding: 120px 42px; |
||||
|
|
||||
|
.row { |
||||
|
.title { |
||||
|
font-weight: normal; |
||||
|
overflow-wrap: normal; |
||||
|
font-size: 42px; |
||||
|
color: rgb(48, 49, 51); |
||||
|
} |
||||
|
|
||||
|
.subtitle { |
||||
|
font-weight: normal; |
||||
|
overflow-wrap: normal; |
||||
|
font-size: 32px; |
||||
|
color: rgb(48, 49, 51); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.row2 { |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
|
||||
|
.item { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
margin-right: 42px; |
||||
|
|
||||
|
.title { |
||||
|
font-weight: normal; |
||||
|
overflow-wrap: normal; |
||||
|
font-size: 32px; |
||||
|
color: rgb(48, 49, 51); |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.logo { |
||||
|
width: 120px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,40 @@ |
|||||
|
import { View } from '@tarojs/components'; |
||||
|
import { Form } from 'antd-mobile'; |
||||
|
import FormLabel from '/components/FormLabel'; |
||||
|
import FormImage from '/components/FormImage'; |
||||
|
|
||||
|
import styles from './index.module.less'; |
||||
|
|
||||
|
export default function Alipay() { |
||||
|
|
||||
|
return ( |
||||
|
<View className={styles.container}> |
||||
|
<Form.Item |
||||
|
name='alipay' |
||||
|
label='支付宝账号' |
||||
|
> |
||||
|
<FormLabel /> |
||||
|
</Form.Item> |
||||
|
<Form.Item |
||||
|
name='alipayName' |
||||
|
label='支付宝姓名' |
||||
|
> |
||||
|
<FormLabel /> |
||||
|
</Form.Item> |
||||
|
<Form.Item |
||||
|
name='alipayImage' |
||||
|
label='收款码' |
||||
|
rules={[{ required: true, message: '请选择请码' }]} |
||||
|
> |
||||
|
<FormImage readonly width={72} height={72} /> |
||||
|
</Form.Item> |
||||
|
{/* <Form.Item |
||||
|
name='password' |
||||
|
label='支付密码' |
||||
|
rules={[{ required: true, message: '请输入支付密码' }]} |
||||
|
> |
||||
|
<Input type='password' placeholder='请输入支付密码' /> |
||||
|
</Form.Item> */} |
||||
|
</View > |
||||
|
) |
||||
|
} |
||||
@ -0,0 +1,3 @@ |
|||||
|
.container { |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,38 @@ |
|||||
|
import { View } from '@tarojs/components'; |
||||
|
import { Form } from 'antd-mobile'; |
||||
|
import FormLabel from '/components/FormLabel'; |
||||
|
|
||||
|
import styles from './index.module.less'; |
||||
|
|
||||
|
export default function BankPay() { |
||||
|
|
||||
|
return ( |
||||
|
<View className={styles.container}> |
||||
|
<Form.Item |
||||
|
name='payeeBank' |
||||
|
label='开户行' |
||||
|
> |
||||
|
<FormLabel /> |
||||
|
</Form.Item> |
||||
|
<Form.Item |
||||
|
name='payeeAccount' |
||||
|
label='银行卡号' |
||||
|
> |
||||
|
<FormLabel /> |
||||
|
</Form.Item> |
||||
|
<Form.Item |
||||
|
name='payeeName' |
||||
|
label='开户人' |
||||
|
> |
||||
|
<FormLabel /> |
||||
|
</Form.Item> |
||||
|
{/* <Form.Item |
||||
|
name='password' |
||||
|
label='支付密码' |
||||
|
rules={[{ required: true, message: '请输入支付密码' }]} |
||||
|
> |
||||
|
<Input type='password' placeholder='请输入支付密码' /> |
||||
|
</Form.Item> */} |
||||
|
</View > |
||||
|
) |
||||
|
} |
||||
@ -0,0 +1,2 @@ |
|||||
|
.container { |
||||
|
} |
||||
@ -0,0 +1,39 @@ |
|||||
|
import { View } from '@tarojs/components'; |
||||
|
import { Form } from 'antd-mobile'; |
||||
|
import FormLabel from '/components/FormLabel'; |
||||
|
import FormImage from '/components/FormImage'; |
||||
|
|
||||
|
import styles from './index.module.less'; |
||||
|
|
||||
|
export default function Wxpay() { |
||||
|
|
||||
|
return ( |
||||
|
<View className={styles.container}> |
||||
|
<Form.Item |
||||
|
name='weixin' |
||||
|
label='微信账号' |
||||
|
> |
||||
|
<FormLabel /> |
||||
|
</Form.Item> |
||||
|
<Form.Item |
||||
|
name='weixinName' |
||||
|
label='微信姓名' |
||||
|
> |
||||
|
<FormLabel /> |
||||
|
</Form.Item> |
||||
|
<Form.Item |
||||
|
name='weixinImage' |
||||
|
label='收款码' |
||||
|
> |
||||
|
<FormImage readonly width={72} height={72} /> |
||||
|
</Form.Item> |
||||
|
{/* <Form.Item |
||||
|
name='password' |
||||
|
label='支付密码' |
||||
|
rules={[{ required: true, message: '请输入支付密码' }]} |
||||
|
> |
||||
|
<Input type='password' placeholder='请输入支付密码' /> |
||||
|
</Form.Item> */} |
||||
|
</View > |
||||
|
) |
||||
|
} |
||||
@ -0,0 +1,2 @@ |
|||||
|
.container { |
||||
|
} |
||||
@ -0,0 +1,123 @@ |
|||||
|
import { useState } from 'react'; |
||||
|
import cls from 'classnames'; |
||||
|
import { View } from '@tarojs/components'; |
||||
|
import { Button, Form, Input, Popup, Toast } from 'antd-mobile'; |
||||
|
|
||||
|
// import Alipay from './Alipay'; |
||||
|
// import Wxpay from './Wxpay'; |
||||
|
// import BankPay from './BankPay'; |
||||
|
|
||||
|
// import aliSrc from '/assets/icons/ali.svg'; |
||||
|
// import wxSrc from '/assets/icons/wx.svg'; |
||||
|
// import bankSrc from '/assets/icons/bank.svg'; |
||||
|
|
||||
|
import FormLabel from '/components/FormLabel'; |
||||
|
|
||||
|
import { getShopInfoAction, userWithdrawalAction } from '../../../../request/actions'; |
||||
|
import styles from './index.module.less'; |
||||
|
|
||||
|
// const TabItem = ({ src, text }) => ( |
||||
|
// <View className={styles['tabitem']}> |
||||
|
// <img src={src} /> |
||||
|
// {text} |
||||
|
// </View> |
||||
|
// ); |
||||
|
|
||||
|
const Balance = ({ balanceData, className, onAfterClose }) => { |
||||
|
const prefix = cls(styles.container, className); |
||||
|
const [visible, setVisible] = useState(false); |
||||
|
const [form] = Form.useForm(); |
||||
|
|
||||
|
const onShow = () => { |
||||
|
setVisible(true); |
||||
|
// 商铺收款信息 |
||||
|
getShopInfoAction().then(res => { |
||||
|
form.setFieldsValue(res); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
const onClose = () => { |
||||
|
setVisible(false); |
||||
|
onAfterClose(); |
||||
|
setTimeout(() => { |
||||
|
form.resetFields(); |
||||
|
}, 200); |
||||
|
}; |
||||
|
|
||||
|
const handleWithdrawal = async () => { |
||||
|
try { |
||||
|
const values = await form.validateFields(); |
||||
|
const cash = values.cash; |
||||
|
await userWithdrawalAction({ cash }); |
||||
|
Toast.show({ |
||||
|
content: '您已提现成功' |
||||
|
}); |
||||
|
onClose(); |
||||
|
} |
||||
|
catch (err) { |
||||
|
console.log('err: ', err); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// const way = Form.useWatch('way', form); |
||||
|
|
||||
|
// const detailRenderer = useMemo(() => { |
||||
|
// return { |
||||
|
// alipay: <Alipay />, |
||||
|
// wx: <Wxpay />, |
||||
|
// bank: <BankPay /> |
||||
|
// }[way]; |
||||
|
// }, [way]); |
||||
|
|
||||
|
const balance = balanceData?.balance || '0.00'; |
||||
|
|
||||
|
return ( |
||||
|
<View className={prefix}> |
||||
|
<View className={styles.title}>账户余额</View> |
||||
|
<View className={styles.subtitle}>￥{balance}</View> |
||||
|
<Button color='primary' className={styles.btn} onClick={onShow}>提现</Button> |
||||
|
<Popup |
||||
|
visible={visible} |
||||
|
onMaskClick={onClose} |
||||
|
bodyClassName={styles['popup-wrapper']} |
||||
|
> |
||||
|
<Form form={form} className={styles.popup} layout='horizontal'> |
||||
|
<View className={styles.balance}> |
||||
|
<FormLabel value={balance} render={val => `当前可用提现余额￥${val}`} /> |
||||
|
</View> |
||||
|
<Form.Item |
||||
|
name='cash' |
||||
|
label='提现金额' |
||||
|
// extra={`当前可用提现余额￥${balance}`} |
||||
|
rules={[{ required: true, message: '请输入提现金额' }]} |
||||
|
> |
||||
|
<Input className={styles.cash} type='number' min={0} max={9999999999} placeholder='请输入提现金额' /> |
||||
|
</Form.Item> |
||||
|
{/* <Form.Item |
||||
|
name='way' |
||||
|
label='提现方式' |
||||
|
valuePropName='activeKey' |
||||
|
initialValue='alipay' |
||||
|
> |
||||
|
<CapsuleTabs style={{ padding: 0 }}> |
||||
|
<CapsuleTabs.Tab title={<TabItem text='支付宝' src={aliSrc} />} key='alipay' /> |
||||
|
<CapsuleTabs.Tab title={<TabItem text='微信' src={wxSrc} />} key='wx' /> |
||||
|
<CapsuleTabs.Tab title={<TabItem text='银行卡' src={bankSrc} />} key='bank' /> |
||||
|
</CapsuleTabs> |
||||
|
</Form.Item> |
||||
|
{detailRenderer} */} |
||||
|
<Button |
||||
|
className={styles.btn} |
||||
|
color='primary' |
||||
|
shape='rounded' |
||||
|
onClick={handleWithdrawal} |
||||
|
> |
||||
|
确认提现 |
||||
|
</Button> |
||||
|
</Form> |
||||
|
</Popup> |
||||
|
</View> |
||||
|
) |
||||
|
}; |
||||
|
|
||||
|
export default Balance; |
||||
@ -0,0 +1,98 @@ |
|||||
|
.container { |
||||
|
background-color: #fff; |
||||
|
border-radius: 18px; |
||||
|
padding: 32px; |
||||
|
|
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
|
||||
|
.title { |
||||
|
font-size: 28px; |
||||
|
font-weight: 600; |
||||
|
margin-bottom: 24px; |
||||
|
} |
||||
|
|
||||
|
.subtitle { |
||||
|
font-size: 42px; |
||||
|
font-weight: 600; |
||||
|
margin-bottom: 24px; |
||||
|
color: var(--color-primary); |
||||
|
} |
||||
|
|
||||
|
.btn { |
||||
|
width: 380px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.popup-wrapper { |
||||
|
height: 480px; |
||||
|
} |
||||
|
|
||||
|
.balance { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
margin: 48px 0 24px; |
||||
|
} |
||||
|
|
||||
|
.popup { |
||||
|
padding: 24px; |
||||
|
|
||||
|
.tabitem { |
||||
|
font-size: 24px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
img { |
||||
|
width: 28px; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.btn { |
||||
|
width: 100%; |
||||
|
margin-top: 24px; |
||||
|
} |
||||
|
|
||||
|
:global { |
||||
|
.adm-capsule-tabs-header { |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
.adm-capsule-tabs-tab { |
||||
|
padding: 8px 20px; |
||||
|
border-radius: 6px; |
||||
|
border: 1px solid transparent; |
||||
|
transition: all .2s ease-in-out; |
||||
|
} |
||||
|
|
||||
|
.adm-capsule-tabs-tab-active { |
||||
|
color: var(--color-primary); |
||||
|
background-color: #f0f9ff; |
||||
|
border-color: var(--color-primary); |
||||
|
} |
||||
|
|
||||
|
.adm-list-item { |
||||
|
padding: 32px 0; |
||||
|
} |
||||
|
|
||||
|
.adm-form-item-label { |
||||
|
font-size: 28px; |
||||
|
position: relative; |
||||
|
top: 12px; |
||||
|
} |
||||
|
.adm-input-element { |
||||
|
font-size: 42px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
:global { |
||||
|
.adm-list-default .adm-list-body { |
||||
|
border-top: unset; |
||||
|
} |
||||
|
.adm-list-item-content { |
||||
|
border-top: unset; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,38 @@ |
|||||
|
import React from 'react'; |
||||
|
import { List, Empty, Tag } from 'antd-mobile'; |
||||
|
import { Text, View } from '@tarojs/components'; |
||||
|
import cls from 'classnames'; |
||||
|
|
||||
|
import styles from './index.module.less'; |
||||
|
|
||||
|
const DataList = ({ dataSource = [], className }) => { |
||||
|
const prefix = cls(styles.container, className); |
||||
|
|
||||
|
return ( |
||||
|
<View className={prefix}> |
||||
|
<View className={styles.title}>交易记录</View> |
||||
|
{dataSource.length > 0 ? ( |
||||
|
<List> |
||||
|
{dataSource.map((item, index) => ( |
||||
|
<List.Item key={index}> |
||||
|
<View className={styles.row}> |
||||
|
<View className={styles.left}> |
||||
|
<Tag className={styles.status} color={item.isIn ? 'primary' : 'warning'}>{item.isIn ? '入账' : '出账'}</Tag> |
||||
|
{item.cash} |
||||
|
</View> |
||||
|
<Text className={styles.tag} color='default'>{item.remark}</Text> |
||||
|
</View> |
||||
|
</List.Item> |
||||
|
))} |
||||
|
</List> |
||||
|
) : ( |
||||
|
<Empty |
||||
|
style={{ padding: '64px 0' }} |
||||
|
description='暂无数据' |
||||
|
/> |
||||
|
)} |
||||
|
</View> |
||||
|
) |
||||
|
}; |
||||
|
|
||||
|
export default DataList; |
||||
@ -0,0 +1,44 @@ |
|||||
|
.container { |
||||
|
background-color: #fff; |
||||
|
border-radius: 18px; |
||||
|
padding: 32px; |
||||
|
margin-top: 24px; |
||||
|
|
||||
|
.title { |
||||
|
font-size: 28px; |
||||
|
font-weight: 600; |
||||
|
margin-bottom: 24px; |
||||
|
} |
||||
|
|
||||
|
.row { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
|
||||
|
.left { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 24px; |
||||
|
|
||||
|
.status { |
||||
|
margin-right: 12px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tag { |
||||
|
font-size: 24px; |
||||
|
} |
||||
|
|
||||
|
&:not(:last-child) { |
||||
|
border-bottom: 1px solid #eee; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
:global { |
||||
|
.adm-list-default .adm-list-body { |
||||
|
border: unset; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,4 @@ |
|||||
|
export default definePageConfig({ |
||||
|
navigationBarTitleText: '资产管理', |
||||
|
usingComponents: {}, |
||||
|
}) |
||||
@ -0,0 +1,77 @@ |
|||||
|
import { useState } from 'react'; |
||||
|
import { View, ScrollView } from '@tarojs/components'; |
||||
|
import Taro, { useLoad } from '@tarojs/taro'; |
||||
|
import { NavBar, PullToRefresh } from 'antd-mobile'; |
||||
|
|
||||
|
import DataList from './components/DataList'; |
||||
|
import Balance from './components/Balance'; |
||||
|
import { myBalanceAction, userWalletLogListLoopAction } from '../../request/actions'; |
||||
|
import useRequestList from '../../hooks/useRequestList'; |
||||
|
|
||||
|
import styles from './index.module.less'; |
||||
|
|
||||
|
const fetchDataRecursively = async (times, datasource) => { |
||||
|
if (times <= 0 || (datasource && datasource?.length < 10)) { |
||||
|
return []; |
||||
|
} |
||||
|
const lastLogId = datasource?.[datasource?.length - 1]?.logId; |
||||
|
const result = await userWalletLogListLoopAction({ lastLogId }); |
||||
|
const nextResults = await fetchDataRecursively(times - 1, result?.dataList); |
||||
|
return [...result?.dataList, ...nextResults]; |
||||
|
}; |
||||
|
|
||||
|
export default function Funds() { |
||||
|
const [data, setData] = useState([]); |
||||
|
|
||||
|
// 银行卡余额 |
||||
|
const { data: balanceData, getDataTask: getBananceData } = useRequestList({ |
||||
|
immediate: false, |
||||
|
showMsg: false, |
||||
|
action: myBalanceAction |
||||
|
}); |
||||
|
|
||||
|
const handleInitData = async () => { |
||||
|
getBananceData(); |
||||
|
const dataSource = await fetchDataRecursively(2); |
||||
|
setData(dataSource); |
||||
|
}; |
||||
|
|
||||
|
useLoad(() => { |
||||
|
handleInitData(); |
||||
|
}); |
||||
|
|
||||
|
const handleBack = () => { |
||||
|
Taro.navigateTo({ |
||||
|
url: '/pages/mine/index' |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
const handleScrollToLower = async () => { |
||||
|
const lastLogId = data?.[data?.length - 1]?.logId; |
||||
|
const result = await userWalletLogListLoopAction({ lastLogId }); |
||||
|
const newDataSource = result?.dataList; |
||||
|
setData([...data, ...newDataSource]); |
||||
|
}; |
||||
|
|
||||
|
return ( |
||||
|
<View className={styles.container}> |
||||
|
<NavBar onBack={handleBack} style={{ padding: 0 }}> |
||||
|
资金管理 |
||||
|
</NavBar> |
||||
|
<PullToRefresh |
||||
|
onRefresh={handleInitData} |
||||
|
> |
||||
|
<ScrollView |
||||
|
scrollY |
||||
|
onScrollToLower={handleScrollToLower} |
||||
|
lowerThreshold={50} |
||||
|
> |
||||
|
<View className={styles.wrapper}> |
||||
|
<Balance balanceData={balanceData} onAfterClose={handleInitData} /> |
||||
|
<DataList className={styles.list} dataSource={data} /> |
||||
|
</View> |
||||
|
</ScrollView> |
||||
|
</PullToRefresh> |
||||
|
</View> |
||||
|
) |
||||
|
} |
||||
@ -0,0 +1,11 @@ |
|||||
|
.container { |
||||
|
background: linear-gradient(180deg, #d7ebfa, #f5f5f5 30vh); |
||||
|
height: 100%; |
||||
|
|
||||
|
.wrapper { |
||||
|
box-sizing: border-box; |
||||
|
padding: 42px; |
||||
|
height: calc(100vh - 82px); |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,29 @@ |
|||||
|
|
||||
|
import { View, Swiper, SwiperItem, Image } from '@tarojs/components'; |
||||
|
|
||||
|
import styles from './index.module.less'; |
||||
|
|
||||
|
export default function Banner({ |
||||
|
swiperList = [] |
||||
|
}) { |
||||
|
if (swiperList.length === 0) { |
||||
|
return <View className={styles.container} style={{ background: '#eee' }}></View> |
||||
|
} |
||||
|
|
||||
|
return ( |
||||
|
<Swiper |
||||
|
className={styles.container} |
||||
|
indicatorColor='#999' |
||||
|
indicatorActiveColor='#007AFF' |
||||
|
circular |
||||
|
indicatorDots |
||||
|
autoplay |
||||
|
> |
||||
|
{swiperList.map((bannerSrc, index) => ( |
||||
|
<SwiperItem key={index}> |
||||
|
<Image style={{ width: '100%' }} src={bannerSrc} mode='aspectFit' /> |
||||
|
</SwiperItem> |
||||
|
))} |
||||
|
</Swiper> |
||||
|
) |
||||
|
} |
||||
@ -0,0 +1,5 @@ |
|||||
|
|
||||
|
.container { |
||||
|
margin-top: 36px; |
||||
|
height: 328px; |
||||
|
} |
||||
@ -0,0 +1,33 @@ |
|||||
|
import { View } from '@tarojs/components'; |
||||
|
import { NoticeBar } from 'antd-mobile'; |
||||
|
import Taro from '@tarojs/taro'; |
||||
|
|
||||
|
import logoSrc from '/assets/icons/logo.png'; |
||||
|
|
||||
|
import styles from './index.module.less'; |
||||
|
|
||||
|
export default function Header({ |
||||
|
noticeTitle |
||||
|
}) { |
||||
|
|
||||
|
return ( |
||||
|
<View className={styles.header}> |
||||
|
<View className={styles.left}> |
||||
|
<img src={logoSrc} className={styles.logo} alt='logo' /> |
||||
|
<View className={styles.title}> |
||||
|
融易诚 |
||||
|
</View> |
||||
|
</View> |
||||
|
{noticeTitle && ( |
||||
|
<NoticeBar |
||||
|
content={noticeTitle} |
||||
|
color='alert' |
||||
|
style={{ width: 206, height: 32, padding: '0 8px', color: 'red', background: '#f5f5f5' }} |
||||
|
shape='rounded' |
||||
|
bordered={false} |
||||
|
onClick={() => Taro.navigateTo({ url: '/pages/notice/index' })} |
||||
|
/> |
||||
|
)} |
||||
|
</View> |
||||
|
); |
||||
|
} |
||||
@ -0,0 +1,20 @@ |
|||||
|
.header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.left { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
.logo { |
||||
|
width: 68px; |
||||
|
margin-right: 12px; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
font-size: 28px; |
||||
|
font-weight: 500; |
||||
|
color: #333; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,53 @@ |
|||||
|
|
||||
|
import { ExclamationCircleFill } from 'antd-mobile-icons' |
||||
|
import { View } from '@tarojs/components'; |
||||
|
import { Button } from 'antd-mobile'; |
||||
|
import Taro from '@tarojs/taro'; |
||||
|
import logoSrc from '/assets/icons/logo.png'; |
||||
|
|
||||
|
import styles from './index.module.less'; |
||||
|
|
||||
|
const MyShop = () => { |
||||
|
|
||||
|
const handleVery = () => { |
||||
|
Taro.navigateTo({ |
||||
|
url: '/pages/shopinfo/index' |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
return ( |
||||
|
<View className={styles.container}> |
||||
|
<View className={styles.title}> |
||||
|
<img src={logoSrc} className={styles.logo} alt='logo' /> |
||||
|
<View className={styles.title}> |
||||
|
我的小店 |
||||
|
</View> |
||||
|
</View> |
||||
|
<View className={styles.card}> |
||||
|
<View className={styles.title}> |
||||
|
完成考试 帮您开启成功之路 |
||||
|
</View> |
||||
|
<View className={styles.info}> |
||||
|
<View className={styles.left}> |
||||
|
<ExclamationCircleFill className={styles.icon} /> |
||||
|
<View> |
||||
|
<View className={styles.title}>店铺认证</View> |
||||
|
<View className={styles.subtitle}>请完成店铺认证以开启完整功能</View> |
||||
|
</View> |
||||
|
</View> |
||||
|
<Button |
||||
|
className={styles.btn} |
||||
|
color='primary' |
||||
|
shape='rounded' |
||||
|
size='small' |
||||
|
onClick={handleVery} |
||||
|
> |
||||
|
立即认证 |
||||
|
</Button> |
||||
|
</View> |
||||
|
</View> |
||||
|
</View> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default MyShop; |
||||
@ -0,0 +1,70 @@ |
|||||
|
.container { |
||||
|
background: linear-gradient(180deg, #1677ff, #fff 30vh); |
||||
|
padding: 24px; |
||||
|
border-radius: 12px; |
||||
|
margin-top: 32px; |
||||
|
|
||||
|
.title { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
.logo { |
||||
|
width: 98px; |
||||
|
margin-right: 12px; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
font-size: 28px; |
||||
|
font-weight: 500; |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.card { |
||||
|
padding: 18px 24px; |
||||
|
border-radius: 12px; |
||||
|
background-color: #fff; |
||||
|
margin-top: 18px; |
||||
|
|
||||
|
.title { |
||||
|
font-size: 28px; |
||||
|
font-weight: 500; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.info { |
||||
|
margin-top: 18px; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
|
||||
|
.left { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
.icon { |
||||
|
color: rgb(255, 0, 0); |
||||
|
font-size: 42px; |
||||
|
margin-right: 18px; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
font-size: 24px; |
||||
|
color: #333; |
||||
|
font-weight: bolder; |
||||
|
} |
||||
|
.subtitle { |
||||
|
font-size: 22px; |
||||
|
color: #999; |
||||
|
margin-top: 4px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.btn { |
||||
|
font-size: 24px; |
||||
|
padding: 0px 18px; |
||||
|
height: 48px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,30 @@ |
|||||
|
|
||||
|
import { View, Text } from '@tarojs/components'; |
||||
|
import { List } from 'antd-mobile'; |
||||
|
import { FileOutline } from 'antd-mobile-icons'; |
||||
|
|
||||
|
import styles from './index.module.less'; |
||||
|
|
||||
|
const TodoList = () => { |
||||
|
|
||||
|
return ( |
||||
|
<View className={styles.container}> |
||||
|
<View className={styles.title}> |
||||
|
<Text className={styles.text}>今日任务</Text> |
||||
|
</View> |
||||
|
<List className={styles.list}> |
||||
|
<List.Item prefix={<FileOutline />} onClick={() => { }}> |
||||
|
1、完成店铺认证 |
||||
|
</List.Item> |
||||
|
<List.Item prefix={<FileOutline />} onClick={() => { }}> |
||||
|
2、完成信用优化 |
||||
|
</List.Item> |
||||
|
<List.Item prefix={<FileOutline />} onClick={() => { }}> |
||||
|
3、完成店铺认证 |
||||
|
</List.Item> |
||||
|
</List> |
||||
|
</View> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default TodoList; |
||||
@ -0,0 +1,30 @@ |
|||||
|
.container { |
||||
|
padding: 24px; |
||||
|
border-radius: 12px; |
||||
|
background-color: #fff; |
||||
|
margin-top: 24px; |
||||
|
|
||||
|
.title { |
||||
|
.text { |
||||
|
font-size: 28px; |
||||
|
font-weight: 500; |
||||
|
color: #333; |
||||
|
padding: 12px 0; |
||||
|
border-bottom: 4px solid #007AFF; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.list { |
||||
|
margin-top: 18px; |
||||
|
|
||||
|
>* { |
||||
|
font-size: 28px !important; |
||||
|
} |
||||
|
|
||||
|
:global { |
||||
|
.adm-list-item { |
||||
|
// padding-left: unset; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,30 @@ |
|||||
|
|
||||
|
import { ExclamationCircleFill } from 'antd-mobile-icons' |
||||
|
import { View, Text } from '@tarojs/components'; |
||||
|
import styles from './index.module.less'; |
||||
|
import { Button } from 'antd-mobile'; |
||||
|
|
||||
|
import { AddCircleOutline, TeamFill, RedoOutline } from 'antd-mobile-icons'; |
||||
|
import Taro from '@tarojs/taro'; |
||||
|
|
||||
|
const Toolbar = () => { |
||||
|
|
||||
|
return ( |
||||
|
<View className={styles.container}> |
||||
|
<View className={styles.card} onClick={() => Taro.navigateTo({ url: '/pages/dataset/index' })}> |
||||
|
<AddCircleOutline className={styles.icon} style={{ color: '#007AFF' }} /> |
||||
|
<View>数据优化</View> |
||||
|
</View> |
||||
|
<View className={styles.card} onClick={() => Taro.navigateTo({ url: '/pages/team/index' })}> |
||||
|
<TeamFill className={styles.icon} style={{ color: 'rgb(114, 46, 209)' }} /> |
||||
|
<View>团队矩阵</View> |
||||
|
</View> |
||||
|
<View className={styles.card} onClick={() => Taro.navigateTo({ url: '/pages/invite/index' })}> |
||||
|
<RedoOutline className={styles.icon} style={{ color: 'rgb(82, 196, 26)' }} /> |
||||
|
<View>邀请商户</View> |
||||
|
</View> |
||||
|
</View> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default Toolbar; |
||||
@ -0,0 +1,29 @@ |
|||||
|
.container { |
||||
|
padding: 8px 24px; |
||||
|
border-radius: 12px; |
||||
|
background-color: #fff; |
||||
|
margin-top: 24px; |
||||
|
|
||||
|
display: flex; |
||||
|
justify-content: space-around; |
||||
|
|
||||
|
.card { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
padding: 12px; |
||||
|
|
||||
|
transition: all .2s ease-in-out; |
||||
|
|
||||
|
&:active { |
||||
|
background-color: #fafafa; |
||||
|
border-radius: 12px; |
||||
|
} |
||||
|
|
||||
|
.icon { |
||||
|
font-size: 48px; |
||||
|
margin-bottom: 12px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,4 @@ |
|||||
|
export default definePageConfig({ |
||||
|
navigationBarTitleText: '首页', |
||||
|
usingComponents: {}, |
||||
|
}) |
||||
@ -0,0 +1,58 @@ |
|||||
|
import { View } from '@tarojs/components'; |
||||
|
import Header from './components/Header'; |
||||
|
import Banner from './components/Banner'; |
||||
|
import MyShop from './components/MyShop'; |
||||
|
import Toolbar from './components/Toolbar'; |
||||
|
import Taro from '@tarojs/taro'; |
||||
|
|
||||
|
import TodoList from './components/TodoList'; |
||||
|
import useRequestList from '../../hooks/useRequestList'; |
||||
|
import { getIndexPageAction } from '../../request/actions'; |
||||
|
import { useEffect } from 'react'; |
||||
|
import { Modal } from 'antd-mobile'; |
||||
|
|
||||
|
import styles from './index.module.less'; |
||||
|
|
||||
|
export default function Index() { |
||||
|
const { data } = useRequestList({ |
||||
|
action: getIndexPageAction |
||||
|
}); |
||||
|
|
||||
|
useEffect(() => { |
||||
|
if (!data) { |
||||
|
return; |
||||
|
} |
||||
|
if (data?.systemMessage && data?.systemMessage?.messageId !== localStorage.getItem('messageId')) { |
||||
|
let handler = null; |
||||
|
handler = Modal.show({ |
||||
|
title: '有新的站内新，点击查看详情', |
||||
|
showCloseButton: false, |
||||
|
actions: [ |
||||
|
{ |
||||
|
key: 'view', |
||||
|
text: '查看站内信', |
||||
|
}, |
||||
|
], |
||||
|
onAction: action => { |
||||
|
if (action.key === 'view') { |
||||
|
Taro.navigateTo({ |
||||
|
url: '/pages/sitemessage/index' |
||||
|
}); |
||||
|
localStorage.setItem('messageId', data.systemMessage?.messageId); |
||||
|
handler.close(); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}, [data]); |
||||
|
|
||||
|
return ( |
||||
|
<View className={styles.container}> |
||||
|
<Header {...data} /> |
||||
|
<Banner {...data} /> |
||||
|
<MyShop {...data} /> |
||||
|
<Toolbar {...data} /> |
||||
|
<TodoList {...data} /> |
||||
|
</View> |
||||
|
) |
||||
|
} |
||||
@ -0,0 +1,7 @@ |
|||||
|
|
||||
|
.container { |
||||
|
background: linear-gradient(180deg, #d7ebfa, #f5f5f5 30vh); |
||||
|
height: 100%; |
||||
|
box-sizing: border-box; |
||||
|
padding: 24px 24px; |
||||
|
} |
||||
@ -0,0 +1,88 @@ |
|||||
|
import { View } from '@tarojs/components'; |
||||
|
import { Button, Divider, Form } from 'antd-mobile'; |
||||
|
|
||||
|
import { useEffect, useRef } from 'react'; |
||||
|
import { QRCodeCanvas } from 'qrcode.react'; |
||||
|
import { CopyToClipboard } from 'react-copy-to-clipboard'; |
||||
|
import { useLocalStorageState } from 'ahooks'; |
||||
|
|
||||
|
import styles from './index.module.less'; |
||||
|
|
||||
|
const FormUser = ({ value }) => ( |
||||
|
<View className={styles.user}> |
||||
|
<View className={styles.logo}> |
||||
|
1 |
||||
|
</View> |
||||
|
<View className={styles.phone}> |
||||
|
{value} |
||||
|
</View> |
||||
|
</View> |
||||
|
); |
||||
|
|
||||
|
const FormCopyText = ({ value }) => ( |
||||
|
<View className={styles.copy}> |
||||
|
<View className={styles.text}>{value}</View> |
||||
|
<CopyToClipboard text={value}><a>复制</a></CopyToClipboard> |
||||
|
</View> |
||||
|
); |
||||
|
|
||||
|
const QRCode = ({ value }) => { |
||||
|
const ref = useRef(); |
||||
|
|
||||
|
const handleDownload = () => { |
||||
|
const canvas = ref.current; |
||||
|
if (canvas) { |
||||
|
const imageURL = canvas.toDataURL('image/png'); // 转换为图片数据 |
||||
|
const link = document.createElement('a'); |
||||
|
link.href = imageURL; |
||||
|
link.download = '邀请码.png'; |
||||
|
link.click(); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
return ( |
||||
|
<View className={styles.qrcode}> |
||||
|
<QRCodeCanvas value={value} ref={ref} /> |
||||
|
<Button className={styles.btn} color='primary' shape='default' onClick={handleDownload}> |
||||
|
下载 |
||||
|
</Button> |
||||
|
</View> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default function FormBar() { |
||||
|
const [form] = Form.useForm(); |
||||
|
const [storage] = useLocalStorageState('userInfo'); |
||||
|
|
||||
|
useEffect(() => { |
||||
|
const origin = window.location.origin; |
||||
|
const invite_code = storage?.shareCode; |
||||
|
const invite_url = `${origin}/#/pages/register/index?shareCode=${invite_code}`; |
||||
|
form.setFieldsValue({ |
||||
|
user_info: storage?.telephone, |
||||
|
qrcode: invite_url, |
||||
|
invite_code, |
||||
|
invite_url |
||||
|
}); |
||||
|
}, []); |
||||
|
|
||||
|
return ( |
||||
|
<View className={styles.container}> |
||||
|
<Form form={form} className={styles.form} layout='vertical'> |
||||
|
<Form.Item name='user_info'> |
||||
|
<FormUser /> |
||||
|
</Form.Item> |
||||
|
<Form.Item name='qrcode' style={{ display: 'flex', justifyContent: 'center' }}> |
||||
|
<QRCode /> |
||||
|
</Form.Item> |
||||
|
<Divider /> |
||||
|
<Form.Item name='invite_code' label='我的邀请码'> |
||||
|
<FormCopyText /> |
||||
|
</Form.Item> |
||||
|
<Form.Item name='invite_url' label='邀请链接'> |
||||
|
<FormCopyText /> |
||||
|
</Form.Item> |
||||
|
</Form > |
||||
|
</View> |
||||
|
) |
||||
|
} |
||||
@ -0,0 +1,80 @@ |
|||||
|
.container { |
||||
|
background-color: #fff; |
||||
|
border-radius: 18px; |
||||
|
margin-top: 72px; |
||||
|
padding: 32px 32px 48px 32px; |
||||
|
|
||||
|
.form { |
||||
|
:global { |
||||
|
.adm-list-body { |
||||
|
border-top: unset; |
||||
|
} |
||||
|
|
||||
|
.adm-list-item { |
||||
|
padding-left: 0; |
||||
|
} |
||||
|
|
||||
|
.adm-list-item-content { |
||||
|
border: unset; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.user { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
.logo { |
||||
|
width: 72px; |
||||
|
height: 72px; |
||||
|
border-radius: 50%; |
||||
|
background-color: pink; |
||||
|
font-size: 42px; |
||||
|
color: #fff; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
margin-right: 18px; |
||||
|
} |
||||
|
|
||||
|
.phone { |
||||
|
font-weight: 700; |
||||
|
font-size: 32px; |
||||
|
margin-bottom: 4px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.qrcode { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
|
||||
|
.btn { |
||||
|
width: 100%; |
||||
|
margin-top: 24px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.copy { |
||||
|
display: flex; |
||||
|
background-color: #f8f8f8; |
||||
|
padding: 12px; |
||||
|
border-radius: 2px; |
||||
|
font-size: 24px; |
||||
|
|
||||
|
.text { |
||||
|
flex: 1; |
||||
|
word-break: break-all; |
||||
|
margin-right: 24px; |
||||
|
} |
||||
|
|
||||
|
a { |
||||
|
flex-basis: 72px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.submit { |
||||
|
width: 100%; |
||||
|
margin-top: 72px; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,4 @@ |
|||||
|
export default definePageConfig({ |
||||
|
navigationBarTitleText: '店铺信息', |
||||
|
usingComponents: {}, |
||||
|
}) |
||||
@ -0,0 +1,31 @@ |
|||||
|
import { View } from '@tarojs/components'; |
||||
|
import Taro, { useLoad } from '@tarojs/taro'; |
||||
|
|
||||
|
import FormBar from './components/FormBar'; |
||||
|
import { NavBar } from 'antd-mobile'; |
||||
|
|
||||
|
import styles from './index.module.less'; |
||||
|
|
||||
|
export default function Invite() { |
||||
|
|
||||
|
useLoad(() => { |
||||
|
console.log('Page loaded.') |
||||
|
}); |
||||
|
|
||||
|
const handleBack = () => { |
||||
|
Taro.navigateTo({ |
||||
|
url: '/pages/index/index' |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
return ( |
||||
|
<View className={styles.container}> |
||||
|
<NavBar onBack={handleBack} style={{ padding: 0 }}> |
||||
|
邀请商户 |
||||
|
</NavBar> |
||||
|
<View className={styles.wrapper}> |
||||
|
<FormBar /> |
||||
|
</View> |
||||
|
</View> |
||||
|
); |
||||
|
} |
||||
@ -0,0 +1,9 @@ |
|||||
|
.container { |
||||
|
background: linear-gradient(180deg, #d7ebfa, #f5f5f5 30vh); |
||||
|
height: 100%; |
||||
|
|
||||
|
.wrapper { |
||||
|
box-sizing: border-box; |
||||
|
padding: 42px; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,41 @@ |
|||||
|
import { View } from '@tarojs/components'; |
||||
|
import { Button, Form, Input } from 'antd-mobile'; |
||||
|
import Taro from '@tarojs/taro'; |
||||
|
import { loginAction } from '../../../../request/actions'; |
||||
|
import { useLocalStorageState } from 'ahooks'; |
||||
|
|
||||
|
import styles from './index.module.less'; |
||||
|
|
||||
|
export default function FormBar() { |
||||
|
const [form] = Form.useForm(); |
||||
|
const [, updateStorage] = useLocalStorageState('userInfo', {defaultValue: null}); |
||||
|
|
||||
|
const handleLogin = async () => { |
||||
|
try { |
||||
|
const values = await form.validateFields(); |
||||
|
const data = await loginAction(values); |
||||
|
updateStorage(data); |
||||
|
Taro.navigateTo({ url: '/pages/index/index' }); |
||||
|
} |
||||
|
catch (err) { |
||||
|
console.log('err: ', err); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
return ( |
||||
|
<View className={styles.container}> |
||||
|
<Form form={form} className={styles.form}> |
||||
|
<Form.Item name='telephone' label='账号' rules={[{ required: true, message: '请输入手机号或电子邮箱' }]}> |
||||
|
<Input placeholder='请输入手机号或电子邮箱' /> |
||||
|
</Form.Item> |
||||
|
<Form.Item name='password' label='密码' rules={[{ required: true, message: '请输入密码' }]}> |
||||
|
<Input type='password' placeholder='请输入密码' /> |
||||
|
</Form.Item> |
||||
|
</Form> |
||||
|
<Button color='primary' className={styles.submit} onClick={handleLogin}>登录</Button> |
||||
|
<View className={styles.bar}> |
||||
|
<View className={styles.btn} onClick={() => Taro.navigateTo({ url: '/pages/register/index' })}>注册</View> |
||||
|
</View> |
||||
|
</View> |
||||
|
) |
||||
|
} |
||||
@ -0,0 +1,38 @@ |
|||||
|
.container { |
||||
|
background-color: #fff; |
||||
|
border-radius: 18px; |
||||
|
margin-top: 72px; |
||||
|
padding: 32px 32px 0 32px; |
||||
|
|
||||
|
.form { |
||||
|
:global { |
||||
|
.adm-list-body { |
||||
|
border-top: unset; |
||||
|
} |
||||
|
.adm-list-item { |
||||
|
padding-left: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.bar { |
||||
|
display: flex; |
||||
|
justify-content: space-around; |
||||
|
padding: 24px 72px; |
||||
|
|
||||
|
.btn { |
||||
|
font-size: 24px; |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
|
||||
|
&:first-child { |
||||
|
border-right: 1px solid #eee; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.submit { |
||||
|
width: 100%; |
||||
|
margin-top: 72px; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,34 @@ |
|||||
|
import { View } from '@tarojs/components'; |
||||
|
import { useLoad } from '@tarojs/taro'; |
||||
|
|
||||
|
import logoSrc from '/assets/icons/logo.png'; |
||||
|
|
||||
|
import styles from './index.module.less'; |
||||
|
|
||||
|
export default function HeaderBar() { |
||||
|
|
||||
|
useLoad(() => { |
||||
|
console.log('Page loaded.') |
||||
|
}); |
||||
|
|
||||
|
return ( |
||||
|
<View className={styles.container}> |
||||
|
<View className={styles.row}> |
||||
|
<View className={styles.title}> |
||||
|
Hi Weaith |
||||
|
</View> |
||||
|
<View className={styles.subtitle}> |
||||
|
欢迎您来到融易诚 |
||||
|
</View> |
||||
|
</View> |
||||
|
<View className={styles.row2}> |
||||
|
<View className={styles.item}> |
||||
|
<img src={logoSrc} className={styles.logo} alt='logo' /> |
||||
|
<View className={styles.title}> |
||||
|
融易诚 |
||||
|
</View> |
||||
|
</View> |
||||
|
</View> |
||||
|
</View> |
||||
|
) |
||||
|
} |
||||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue