feat(home): 将首页菜单改为硬编码
- 首页4个功能按钮改为硬编码,删除后端接口请求 - 菜单项包括:我要推荐、客户列表、邀请好友、个人中心 - 菜单图标使用OSS直链,减少接口延迟 - Grid组件中map数据源由接口返回改为本地硬编码数据 - ContactSection中在线咨询功能改用button标签并简化逻辑 - 增加ContactSection按钮样式覆盖,去除默认边框和样式
This commit is contained in:
@@ -13,5 +13,5 @@
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"lastUpdated": 1775712243089
|
"lastUpdated": 1775713542885
|
||||||
}
|
}
|
||||||
@@ -21,3 +21,9 @@
|
|||||||
- `Fire` 图标在 @nutui/icons-react-taro 中不存在,改用 `StarFill`
|
- `Fire` 图标在 @nutui/icons-react-taro 中不存在,改用 `StarFill`
|
||||||
- Banner 组件保留动态数据加载能力,圆角样式通过外层 CSS 控制
|
- Banner 组件保留动态数据加载能力,圆角样式通过外层 CSS 控制
|
||||||
- Menu 组件已在原代码中 hidden,本次未改动
|
- Menu 组件已在原代码中 hidden,本次未改动
|
||||||
|
|
||||||
|
## Grid.tsx 硬编码改造 (13:48)
|
||||||
|
- 将首页4个功能按钮从后端接口请求改为硬编码
|
||||||
|
- 菜单项:我要推荐、客户列表、邀请好友、个人中心
|
||||||
|
- 图片使用OSS直链,避免接口延迟
|
||||||
|
- 对应页面路径保持不变
|
||||||
|
|||||||
276
src/dealer/customer/add.scss
Normal file
276
src/dealer/customer/add.scss
Normal file
@@ -0,0 +1,276 @@
|
|||||||
|
.add-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: #f5f5f7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ═══ 顶部模式提示条 ═══ */
|
||||||
|
.add-page__mode-bar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 10px 16px;
|
||||||
|
background: linear-gradient(135deg, #3b82f6, #2563eb);
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-page__mode-bar--edit {
|
||||||
|
background: linear-gradient(135deg, #f59e0b, #d97706);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ═══ 表单卡片分组 ═══ */
|
||||||
|
.add-page__card {
|
||||||
|
margin: 12px 12px 0;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: white;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ═══ NutUI Form/CellGroup 样式覆盖 ═══ */
|
||||||
|
.add-page__card .nut-cell-group {
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-page__card .nut-cell::after {
|
||||||
|
left: 16px;
|
||||||
|
right: 16px;
|
||||||
|
border-color: #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-page__card .nut-form-item .nut-cell__title {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #374151;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-page__card .nut-form-item .nut-input {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #111827;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-page__card .nut-form-item .nut-input__inner {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #111827;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-page__card .nut-cell__value {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #111827;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ═══ 章节标题 ═══ */
|
||||||
|
.add-page__section-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 16px 16px 8px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #9ca3af;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-page__section-title::before {
|
||||||
|
content: '';
|
||||||
|
display: inline-block;
|
||||||
|
width: 3px;
|
||||||
|
height: 14px;
|
||||||
|
border-radius: 2px;
|
||||||
|
background: #3b82f6;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ═══ 接待人员选择 ═══ */
|
||||||
|
.add-page__receptionist-cell {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 14px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-page__receptionist-value {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-page__receptionist-name {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #111827;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-page__receptionist-placeholder {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #d1d5db;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-page__receptionist-clear {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ═══ 日期选择器触发器 ═══ */
|
||||||
|
.add-page__date-trigger {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-page__date-text {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #111827;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-page__date-placeholder {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #d1d5db;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ═══ 底部按钮区 ═══ */
|
||||||
|
.add-page__footer {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 50;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: 12px 16px;
|
||||||
|
padding-bottom: calc(12px + env(safe-area-inset-bottom));
|
||||||
|
background: linear-gradient(to top, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 0));
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-page__submit-btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 48px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: linear-gradient(135deg, #3b82f6, #2563eb);
|
||||||
|
color: white;
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-page__submit-btn--disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-page__bottom-spacer {
|
||||||
|
height: 100px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ═══ 审核状态区 ═══ */
|
||||||
|
.add-page__status-section {
|
||||||
|
margin: 12px 12px 0;
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-page__status-cell {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 14px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-page__status-label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #6b7280;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-page__status-value {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #374151;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ═══ Popup 选择接待人员 ═══ */
|
||||||
|
.add-page__picker-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 16px;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-page__picker-title {
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #111827;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-page__picker-cancel {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #3b82f6;
|
||||||
|
padding: 4px 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-page__picker-search {
|
||||||
|
padding: 12px 12px 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-page__picker-list {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-page__picker-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 14px 16px;
|
||||||
|
border-bottom: 1px solid #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-page__picker-item:active {
|
||||||
|
background: #f9fafb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-page__picker-item-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-page__picker-item-name {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #111827;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-page__picker-item-phone {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #9ca3af;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-page__picker-item-selected {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-page__picker-empty {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 40px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-page__picker-empty-text {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #d1d5db;
|
||||||
|
}
|
||||||
@@ -24,6 +24,18 @@
|
|||||||
padding: 16px 18px;
|
padding: 16px 18px;
|
||||||
border-radius: 14px;
|
border-radius: 14px;
|
||||||
transition: opacity 0.2s;
|
transition: opacity 0.2s;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
background: none;
|
||||||
|
font-size: inherit;
|
||||||
|
line-height: inherit;
|
||||||
|
text-align: left;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
|
|||||||
@@ -31,39 +31,6 @@ const ContactSection: React.FC = () => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleOnlineChat = () => {
|
|
||||||
Taro.getStorage({
|
|
||||||
key: 'userInfo',
|
|
||||||
success: (_) => {
|
|
||||||
Taro.navigateTo({
|
|
||||||
url: '/pages/user/chat/conversation/index',
|
|
||||||
fail: (err) => {
|
|
||||||
console.error('跳转失败:', err)
|
|
||||||
Taro.showToast({title: '跳转失败,请稍后重试', icon: 'none'})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
fail: () => {
|
|
||||||
Taro.showModal({
|
|
||||||
title: '登录提示',
|
|
||||||
content: '需要登录后才能在线咨询,是否立即登录?',
|
|
||||||
confirmText: '去登录',
|
|
||||||
cancelText: '稍后再说',
|
|
||||||
success: (loginRes) => {
|
|
||||||
if (loginRes.confirm) {
|
|
||||||
Taro.navigateTo({
|
|
||||||
url: '/pages/passport/login',
|
|
||||||
fail: (err) => {
|
|
||||||
console.error('跳转到登录页失败:', err)
|
|
||||||
Taro.showToast({title: '跳转失败', icon: 'none'})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View className={'px-2'}>
|
<View className={'px-2'}>
|
||||||
@@ -86,13 +53,13 @@ const ContactSection: React.FC = () => {
|
|||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
<View className="contact-section__action contact-section__action--secondary" onClick={handleOnlineChat}>
|
<button className="contact-section__action contact-section__action--secondary" open-type="contact">
|
||||||
<Message size={22} color="#3b82f6"/>
|
<Message size={22} color="#3b82f6"/>
|
||||||
<View className="contact-section__action-text">
|
<View className="contact-section__action-text">
|
||||||
<Text className="text-17 font-semibold text-white">在线咨询</Text>
|
<Text className="text-17 font-semibold text-white">在线咨询</Text>
|
||||||
<Text className="text-sm text-white">点击立即咨询</Text>
|
<Text className="text-sm text-white">点击立即咨询</Text>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</button>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
{/* 底部信息 */}
|
{/* 底部信息 */}
|
||||||
|
|||||||
@@ -1,32 +1,44 @@
|
|||||||
import {useEffect, useState} from 'react'
|
|
||||||
import {Grid} from '@nutui/nutui-react-taro'
|
import {Grid} from '@nutui/nutui-react-taro'
|
||||||
import {Avatar} from '@nutui/nutui-react-taro'
|
import {Avatar} from '@nutui/nutui-react-taro'
|
||||||
import {View, Text} from '@tarojs/components'
|
import {View, Text} from '@tarojs/components'
|
||||||
import {listCmsNavigation} from "@/api/cms/cmsNavigation";
|
|
||||||
import {CmsNavigation} from "@/api/cms/cmsNavigation/model";
|
|
||||||
import navTo from "@/utils/common";
|
import navTo from "@/utils/common";
|
||||||
|
|
||||||
|
interface MenuItem {
|
||||||
|
id: number;
|
||||||
|
title: string;
|
||||||
|
icon: string;
|
||||||
|
path: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 硬编码首页菜单数据
|
||||||
|
const menuList: MenuItem[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: '我要推荐',
|
||||||
|
icon: 'https://oss.wsdns.cn/20260330/5f54527123864193b0a2078f812b117f.png?x-oss-process=image/resize,m_fixed,w_750/quality,Q_90',
|
||||||
|
path: '/dealer/qrcode/index'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: '客户列表',
|
||||||
|
icon: 'https://oss.wsdns.cn/20260330/24485bb4684d4ae2a64cc7dd49ec4d3d.png?x-oss-process=image/resize,m_fixed,w_750/quality,Q_90',
|
||||||
|
path: '/dealer/customer/index'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: '邀请好友',
|
||||||
|
icon: 'https://oss.wsdns.cn/20260330/64cac0d5cbe645af8a574a257cd00302.png?x-oss-process=image/resize,m_fixed,w_750/quality,Q_90',
|
||||||
|
path: '/dealer/qrcode/index'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
title: '个人中心',
|
||||||
|
icon: 'https://oss.wsdns.cn/20260330/6b198116f2d94b1e942c55ebe2f73728.png?x-oss-process=image/resize,m_fixed,w_750/quality,Q_90',
|
||||||
|
path: '/user/wallet/wallet'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
const MyGrid = () => {
|
const MyGrid = () => {
|
||||||
const [list, setList] = useState<CmsNavigation[]>([])
|
|
||||||
const reload = async () => {
|
|
||||||
// 读取首页菜单
|
|
||||||
const home = await listCmsNavigation({model: 'index'});
|
|
||||||
const homeId = home[0].navigationId;
|
|
||||||
if(homeId){
|
|
||||||
const menu = await listCmsNavigation({home: 0, parentId: homeId, hide: 0})
|
|
||||||
setList(menu)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
reload().then()
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
if (list.length == 0) {
|
|
||||||
return <></>
|
|
||||||
}
|
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<View className={'p-0'}>
|
<View className={'p-0'}>
|
||||||
@@ -36,8 +48,8 @@ const MyGrid = () => {
|
|||||||
'--nutui-grid-border-color': 'transparent',
|
'--nutui-grid-border-color': 'transparent',
|
||||||
}}>
|
}}>
|
||||||
{
|
{
|
||||||
list.map((item) => (
|
menuList.map((item) => (
|
||||||
<Grid.Item key={item.navigationId} onClick={() => navTo(`${item.path}`,true)}>
|
<Grid.Item key={item.id} onClick={() => navTo(`${item.path}`,true)}>
|
||||||
<Avatar src={item.icon} className={'mb-1'} shape="square" style={{
|
<Avatar src={item.icon} className={'mb-1'} shape="square" style={{
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: 'transparent',
|
||||||
}}/>
|
}}/>
|
||||||
|
|||||||
Reference in New Issue
Block a user