feat(home): 将首页菜单改为硬编码

- 首页4个功能按钮改为硬编码,删除后端接口请求
- 菜单项包括:我要推荐、客户列表、邀请好友、个人中心
- 菜单图标使用OSS直链,减少接口延迟
- Grid组件中map数据源由接口返回改为本地硬编码数据
- ContactSection中在线咨询功能改用button标签并简化逻辑
- 增加ContactSection按钮样式覆盖,去除默认边框和样式
This commit is contained in:
2026-04-09 13:52:06 +08:00
parent 61025522aa
commit f14e190a79
6 changed files with 334 additions and 61 deletions

View File

@@ -13,5 +13,5 @@
} }
] ]
}, },
"lastUpdated": 1775712243089 "lastUpdated": 1775713542885
} }

View File

@@ -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直链避免接口延迟
- 对应页面路径保持不变

View 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;
}

View File

@@ -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;

View File

@@ -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>
{/* 底部信息 */} {/* 底部信息 */}

View File

@@ -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',
}}/> }}/>