diff --git a/src/app.config.ts b/src/app.config.ts index e3aa9ca..f13dc9f 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -65,7 +65,8 @@ export default defineAppConfig({ "info", "customer/index", "customer/add", - "customer/trading" + "customer/trading", + "wechat/index" ] }, // { diff --git a/src/assets/images/README.md b/src/assets/images/README.md new file mode 100644 index 0000000..da89d2b --- /dev/null +++ b/src/assets/images/README.md @@ -0,0 +1,22 @@ +# 微信二维码图片说明 + +请将以下微信二维码图片放置在此目录中: + +## 需要的图片文件 + +1. `wechat-service-qr.png` - 客服微信二维码 +2. `wechat-tech-qr.png` - 技术支持微信二维码 + +## 图片要求 + +- 格式:PNG 或 JPG +- 尺寸:建议 200x200 像素或更高分辨率 +- 背景:建议白色背景,确保二维码清晰可见 + +## 使用说明 + +这些图片将在 `/dealer/wechat` 页面中显示,用户可以长按保存并扫码添加微信好友。 + +## 自定义 + +如需修改图片路径或添加更多二维码,请编辑 `src/dealer/wechat/index.tsx` 文件中的 `qrCodeData` 数组。 diff --git a/src/assets/images/wechat-service-qr.png b/src/assets/images/wechat-service-qr.png new file mode 100644 index 0000000..6e23ecb Binary files /dev/null and b/src/assets/images/wechat-service-qr.png differ diff --git a/src/assets/images/wechat-tech-qr.png b/src/assets/images/wechat-tech-qr.png new file mode 100644 index 0000000..6e23ecb Binary files /dev/null and b/src/assets/images/wechat-tech-qr.png differ diff --git a/src/dealer/customer/trading.tsx b/src/dealer/customer/trading.tsx index f9af7f4..243fc75 100644 --- a/src/dealer/customer/trading.tsx +++ b/src/dealer/customer/trading.tsx @@ -1,12 +1,11 @@ import {useState, useEffect, useCallback} from 'react' import {View, Text} from '@tarojs/components' -import {Loading, Space} from '@nutui/nutui-react-taro' +import {Loading, Space, SearchBar} from '@nutui/nutui-react-taro' import type {ShopDealerApply as UserType} from "@/api/shop/shopDealerApply/model"; import { CustomerStatus, mapApplyStatusToCustomerStatus, } from '@/utils/customerStatus'; -import navTo from "@/utils/common"; import {pageShopDealerApply} from "@/api/shop/shopDealerApply"; // 扩展User类型,添加客户状态 @@ -17,7 +16,7 @@ interface CustomerUser extends UserType { const CustomerTrading = () => { const [list, setList] = useState([]) const [loading, setLoading] = useState(false) - const [searchValue, _] = useState('') + const [searchValue, setSearchValue] = useState('') // 获取客户数据 const fetchCustomerData = useCallback(async () => { @@ -75,8 +74,7 @@ const CustomerTrading = () => { // 渲染客户项 const renderCustomerItem = (customer: CustomerUser) => ( - navTo(`/dealer/customer/add?id=${customer.applyId}`, true)}> + @@ -125,6 +123,16 @@ const CustomerTrading = () => { return ( + {/* 搜索栏 */} + + setSearchValue(value)} + onSearch={(value) => setSearchValue(value)} + onClear={() => setSearchValue('')} + /> + {/* 客户列表 */} {renderCustomerList()} diff --git a/src/dealer/orders/index.config.ts b/src/dealer/orders/index.config.ts index 3bb5694..c5e4e41 100644 --- a/src/dealer/orders/index.config.ts +++ b/src/dealer/orders/index.config.ts @@ -1,3 +1,3 @@ export default definePageConfig({ - navigationBarTitleText: '分销订单' + navigationBarTitleText: '电费收益' }) diff --git a/src/dealer/orders/index.tsx b/src/dealer/orders/index.tsx index f3b6bbf..0f56df4 100644 --- a/src/dealer/orders/index.tsx +++ b/src/dealer/orders/index.tsx @@ -180,7 +180,7 @@ const DealerOrders: React.FC = () => { )} ) : ( - + )} diff --git a/src/dealer/qrcode/index.tsx b/src/dealer/qrcode/index.tsx index 882931b..01b2623 100644 --- a/src/dealer/qrcode/index.tsx +++ b/src/dealer/qrcode/index.tsx @@ -126,7 +126,7 @@ const DealerQrcode: React.FC = () => { const inviteText = `🎉 邀请您加入我的团队! -扫描小程序码或搜索"时里院子市集"小程序,即可享受优质商品和服务! +扫描小程序码或搜索"九云售电云"小程序,即可享受优质商品和服务! 💰 成为我的团队成员,一起赚取丰厚佣金 🎁 新用户专享优惠等你来拿 diff --git a/src/dealer/wechat/index.config.ts b/src/dealer/wechat/index.config.ts new file mode 100644 index 0000000..a3d18db --- /dev/null +++ b/src/dealer/wechat/index.config.ts @@ -0,0 +1,3 @@ +export default definePageConfig({ + navigationBarTitleText: '微信客服' +}) diff --git a/src/dealer/wechat/index.scss b/src/dealer/wechat/index.scss new file mode 100644 index 0000000..ea3fb82 --- /dev/null +++ b/src/dealer/wechat/index.scss @@ -0,0 +1,176 @@ +.wechat-service-page { + min-height: 100vh; + + .service-tabs { + background-color: #fff; + + .nut-tabs__titles { + background-color: #fff; + } + + .nut-tabs__content { + padding: 0; + } + } + + .qr-container { + padding: 20px; + min-height: calc(100vh - 100px); + + .qr-header { + text-align: center; + margin-bottom: 30px; + + .qr-title { + display: block; + font-weight: bold; + color: #333; + margin-bottom: 8px; + } + + .qr-description { + display: block; + color: #666; + line-height: 1.5; + } + } + + .qr-content { + display: flex; + flex-direction: column; + align-items: center; + gap: 30px; + + .qr-code-wrapper { + background-color: #fff; + border-radius: 12px; + padding: 30px; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); + text-align: center; + + .qr-code-image { + width: 360px; + height: 360px; + border-radius: 8px; + margin-bottom: 15px; + } + + .wechat-id { + display: block; + color: #333; + font-weight: 500; + } + } + + .qr-tips { + background-color: #fff; + border-radius: 12px; + padding: 20px; + width: 100%; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); + + .tip-title { + display: block; + font-weight: bold; + color: #333; + margin-bottom: 15px; + } + + .tip-item { + display: block; + color: #666; + line-height: 1.8; + margin-bottom: 8px; + padding-left: 10px; + position: relative; + + &:before { + content: '•'; + color: #07c160; + font-weight: bold; + position: absolute; + left: 0; + } + + &:last-child { + margin-bottom: 0; + } + } + } + } + } +} + +// 响应式适配 +@media (max-width: 375px) { + .wechat-service-page { + .qr-container { + padding: 15px; + + .qr-content { + .qr-code-wrapper { + padding: 20px; + + .qr-code-image { + width: 180px; + height: 180px; + } + } + } + } + } +} + +// 深色模式适配 +@media (prefers-color-scheme: dark) { + .wechat-service-page { + background-color: #1a1a1a; + + .service-tabs { + .nut-tabs__titles { + background-color: #2a2a2a; + border-bottom-color: #333; + } + } + + .qr-container { + background-color: #1a1a1a; + + .qr-header { + .qr-title { + color: #fff; + } + + .qr-description { + color: #ccc; + } + } + + .qr-content { + .qr-code-wrapper { + background-color: #2a2a2a; + + .qr-code-image { + border-color: #444; + } + + .wechat-id { + color: #fff; + } + } + + .qr-tips { + background-color: #2a2a2a; + + .tip-title { + color: #fff; + } + + .tip-item { + color: #ccc; + } + } + } + } + } +} diff --git a/src/dealer/wechat/index.tsx b/src/dealer/wechat/index.tsx new file mode 100644 index 0000000..bbf567d --- /dev/null +++ b/src/dealer/wechat/index.tsx @@ -0,0 +1,68 @@ +import {useEffect, useState} from 'react' +import {View, Text, Image} from '@tarojs/components' +import {Tabs} from '@nutui/nutui-react-taro' +import './index.scss' +import {listCmsWebsiteField} from "@/api/cms/cmsWebsiteField"; +import {CmsWebsiteField} from "@/api/cms/cmsWebsiteField/model"; + +interface QrCodeData { + id: string + title: string + description: string + qrCode: string + wechatId: string +} +const WechatService = () => { + const [activeTab, setActiveTab] = useState('0') + const [codes, setCodes] = useState([]) + + const renderQRCode = (data: typeof codes[0]) => ( + + + + + + 微信号:{data.comments} + + + + 使用说明: + 1. 长按二维码保存到相册 + 2. 打开微信扫一扫 + 3. 选择相册中的二维码图片 + 4. 添加好友并发送验证消息 + + + + ) + + useEffect(() => { + listCmsWebsiteField({ name: 'kefu'}).then(data => { + if(data){ + setCodes(data) + } + }) + }, []); + + return ( + + setActiveTab(`${value}`)} + className="service-tabs" + > + {codes.map((item) => ( + + {renderQRCode(item)} + + ))} + + + ) +} + +export default WechatService