feat(home): 添加常见问题动态加载功能并优化查找页面样式

- 集成 CMS API 动态加载常见问题列表数据
- 实现常见问题列表点击跳转详情页功能
- 调整查找页面侧边栏宽度从 160rpx 到 120rpx
- 优化导航箭头图标尺寸和边框样式
- 修改距离显示格式从"距离xxx"到直接显示距离值
- 更新滚动容器高度计算并移除固定总数显示
- 将距离单位从
This commit is contained in:
2026-03-04 11:17:06 +08:00
parent 1d199c8441
commit 61397b1711
3 changed files with 57 additions and 29 deletions

View File

@@ -102,7 +102,7 @@ page {
} }
.siteSide { .siteSide {
width: 160rpx; width: 120rpx;
flex: 0 0 160rpx; flex: 0 0 160rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -112,13 +112,13 @@ page {
} }
.navArrow { .navArrow {
width: 34rpx; width: 14rpx;
height: 34rpx; height: 14rpx;
border-top: 8rpx solid #e60012; border-top: 5rpx solid #e60012;
border-right: 8rpx solid #e60012; border-right: 5rpx solid #e60012;
border-radius: 4rpx; border-radius: 4rpx;
transform: rotate(45deg); transform: rotate(45deg);
margin-right: 8rpx; margin-right: 6rpx;
} }
.distanceText { .distanceText {

View File

@@ -48,7 +48,7 @@ const formatDistance = (meter: number | undefined) => {
const m = Math.max(0, Math.round(meter as number)) const m = Math.max(0, Math.round(meter as number))
if (m < 1000) return `${m}` if (m < 1000) return `${m}`
const km = m / 1000 const km = m / 1000
return `${km.toFixed(km >= 10 ? 0 : 1)}公里` return `${km.toFixed(km >= 10 ? 0 : 1)}km`
} }
const Find = () => { const Find = () => {
@@ -181,7 +181,7 @@ const Find = () => {
</View> </View>
<PullToRefresh onRefresh={() => loadStores(true)} headHeight={60}> <PullToRefresh onRefresh={() => loadStores(true)} headHeight={60}>
<View style={{ height: 'calc(100vh)', overflowY: 'auto' }} id='store-scroll'> <View style={{ height: 'calc(100vh) - 160px', overflowY: 'auto' }} id='store-scroll'>
{viewList.length === 0 && !loading ? ( {viewList.length === 0 && !loading ? (
<View className='emptyWrap'> <View className='emptyWrap'>
<Empty description='暂无网点' style={{ backgroundColor: 'transparent' }} /> <Empty description='暂无网点' style={{ backgroundColor: 'transparent' }} />
@@ -240,7 +240,7 @@ const Find = () => {
<View className='siteSide' onClick={() => onNavigate(item)}> <View className='siteSide' onClick={() => onNavigate(item)}>
<View className='navArrow' /> <View className='navArrow' />
<Text className='distanceText'> <Text className='distanceText'>
{distanceText ? `距离${distanceText}` : '查看导航'} {distanceText ? `${distanceText}` : '查看导航'}
</Text> </Text>
</View> </View>
</View> </View>
@@ -249,11 +249,6 @@ const Find = () => {
})} })}
</InfiniteLoading> </InfiniteLoading>
{total > 0 && (
<View className='emptyWrap' style={{ paddingTop: '10rpx' }}>
<Text className='emptyText'> {total} </Text>
</View>
)}
</View> </View>
)} )}
</View> </View>

View File

@@ -1,10 +1,13 @@
import Taro, {useShareAppMessage, useShareTimeline} from '@tarojs/taro' import Taro, {useShareAppMessage, useShareTimeline} from '@tarojs/taro'
import {Image, Swiper, SwiperItem, Text, View} from '@tarojs/components' import {Image, Swiper, SwiperItem, Text, View} from '@tarojs/components'
import {useEffect, useState} from 'react'
import iconShop from '@/assets/tabbar/shop.png' import iconShop from '@/assets/tabbar/shop.png'
import iconFind from '@/assets/tabbar/find.png' import iconFind from '@/assets/tabbar/find.png'
import iconKefu from '@/assets/tabbar/kefu.png' import iconKefu from '@/assets/tabbar/kefu.png'
import './index.scss' import './index.scss'
import navTo from "@/utils/common"; import navTo from "@/utils/common";
import {pageCmsArticle} from '@/api/cms/cmsArticle'
import type {CmsArticle} from '@/api/cms/cmsArticle/model'
function Home() { function Home() {
useShareTimeline(() => { useShareTimeline(() => {
@@ -41,6 +44,29 @@ function Home() {
Taro.showToast({title: '发需求(示例)', icon: 'none'}) Taro.showToast({title: '发需求(示例)', icon: 'none'})
} }
const FAQ_CATEGORY_ID = 4558
const [faqList, setFaqList] = useState<CmsArticle[]>([])
const loadFaq = async () => {
try {
const res = await pageCmsArticle({
categoryId: FAQ_CATEGORY_ID,
page: 1,
limit: 5,
status: 0
})
setFaqList(res?.list || [])
} catch (e) {
console.error('loadFaq error:', e)
setFaqList([])
Taro.showToast({title: '常见问题加载失败', icon: 'none'})
}
}
useEffect(() => {
loadFaq().then()
}, [])
return ( return (
<View className='home'> <View className='home'>
<View className='bannerCard'> <View className='bannerCard'>
@@ -123,25 +149,32 @@ function Home() {
<View className='sectionHeader'> <View className='sectionHeader'>
<View className='sectionAccent' /> <View className='sectionAccent' />
<Text className='sectionTitle'></Text> <Text className='sectionTitle'></Text>
<Text className='sectionMore'>&gt;&gt;</Text> <Text
className='sectionMore'
onClick={() => navTo(`/cms/category/index?id=${FAQ_CATEGORY_ID}`)}
>
&gt;&gt;
</Text>
</View> </View>
<View className='faqList'> <View className='faqList'>
{[ {faqList.length > 0 ? (
{title: '常见问题一', date: '2025-11-12'}, faqList.map((item, idx, arr) => (
{title: '常见问题二', date: '2025-11-12'},
{title: '常见问题三', date: '2025-11-12'},
{title: '常见问题四', date: '2025-11-12'},
{title: '常见问题五', date: '2025-11-12'}
].map((item, idx, arr) => (
<View <View
key={`${item.title}-${idx}`} key={item.articleId || `${item.title}-${idx}`}
className={`faqItem ${idx === arr.length - 1 ? 'faqItemLast' : ''}`} className={`faqItem ${idx === arr.length - 1 ? 'faqItemLast' : ''}`}
onClick={() => item.articleId && navTo(`/cms/detail/index?id=${item.articleId}`)}
> >
<Text className='faqTitle'>{item.title}</Text> <Text className='faqTitle'>{item.title}</Text>
<Text className='faqDate'>{item.date}</Text> <Text className='faqDate'>{(item.createTime || '').slice(0, 10)}</Text>
</View> </View>
))} ))
) : (
<View className='faqItem faqItemLast'>
<Text className='faqTitle'></Text>
<Text className='faqDate' />
</View>
)}
</View> </View>
</View> </View>