feat(home): 添加常见问题动态加载功能并优化查找页面样式
- 集成 CMS API 动态加载常见问题列表数据 - 实现常见问题列表点击跳转详情页功能 - 调整查找页面侧边栏宽度从 160rpx 到 120rpx - 优化导航箭头图标尺寸和边框样式 - 修改距离显示格式从"距离xxx"到直接显示距离值 - 更新滚动容器高度计算并移除固定总数显示 - 将距离单位从
This commit is contained in:
@@ -102,7 +102,7 @@ page {
|
||||
}
|
||||
|
||||
.siteSide {
|
||||
width: 160rpx;
|
||||
width: 120rpx;
|
||||
flex: 0 0 160rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -112,13 +112,13 @@ page {
|
||||
}
|
||||
|
||||
.navArrow {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
border-top: 8rpx solid #e60012;
|
||||
border-right: 8rpx solid #e60012;
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
border-top: 5rpx solid #e60012;
|
||||
border-right: 5rpx solid #e60012;
|
||||
border-radius: 4rpx;
|
||||
transform: rotate(45deg);
|
||||
margin-right: 8rpx;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
|
||||
.distanceText {
|
||||
|
||||
@@ -48,7 +48,7 @@ const formatDistance = (meter: number | undefined) => {
|
||||
const m = Math.max(0, Math.round(meter as number))
|
||||
if (m < 1000) return `${m}米`
|
||||
const km = m / 1000
|
||||
return `${km.toFixed(km >= 10 ? 0 : 1)}公里`
|
||||
return `${km.toFixed(km >= 10 ? 0 : 1)}km`
|
||||
}
|
||||
|
||||
const Find = () => {
|
||||
@@ -181,7 +181,7 @@ const Find = () => {
|
||||
</View>
|
||||
|
||||
<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 ? (
|
||||
<View className='emptyWrap'>
|
||||
<Empty description='暂无网点' style={{ backgroundColor: 'transparent' }} />
|
||||
@@ -240,7 +240,7 @@ const Find = () => {
|
||||
<View className='siteSide' onClick={() => onNavigate(item)}>
|
||||
<View className='navArrow' />
|
||||
<Text className='distanceText'>
|
||||
{distanceText ? `距离${distanceText}` : '查看导航'}
|
||||
{distanceText ? `${distanceText}` : '查看导航'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
@@ -249,11 +249,6 @@ const Find = () => {
|
||||
})}
|
||||
</InfiniteLoading>
|
||||
|
||||
{total > 0 && (
|
||||
<View className='emptyWrap' style={{ paddingTop: '10rpx' }}>
|
||||
<Text className='emptyText'>共 {total} 个网点</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
@@ -1,10 +1,13 @@
|
||||
import Taro, {useShareAppMessage, useShareTimeline} from '@tarojs/taro'
|
||||
import {Image, Swiper, SwiperItem, Text, View} from '@tarojs/components'
|
||||
import {useEffect, useState} from 'react'
|
||||
import iconShop from '@/assets/tabbar/shop.png'
|
||||
import iconFind from '@/assets/tabbar/find.png'
|
||||
import iconKefu from '@/assets/tabbar/kefu.png'
|
||||
import './index.scss'
|
||||
import navTo from "@/utils/common";
|
||||
import {pageCmsArticle} from '@/api/cms/cmsArticle'
|
||||
import type {CmsArticle} from '@/api/cms/cmsArticle/model'
|
||||
|
||||
function Home() {
|
||||
useShareTimeline(() => {
|
||||
@@ -41,6 +44,29 @@ function Home() {
|
||||
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 (
|
||||
<View className='home'>
|
||||
<View className='bannerCard'>
|
||||
@@ -123,25 +149,32 @@ function Home() {
|
||||
<View className='sectionHeader'>
|
||||
<View className='sectionAccent' />
|
||||
<Text className='sectionTitle'>常见问题解答</Text>
|
||||
<Text className='sectionMore'>更多>></Text>
|
||||
<Text
|
||||
className='sectionMore'
|
||||
onClick={() => navTo(`/cms/category/index?id=${FAQ_CATEGORY_ID}`)}
|
||||
>
|
||||
更多>>
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View className='faqList'>
|
||||
{[
|
||||
{title: '常见问题一', date: '2025-11-12'},
|
||||
{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
|
||||
key={`${item.title}-${idx}`}
|
||||
className={`faqItem ${idx === arr.length - 1 ? 'faqItemLast' : ''}`}
|
||||
>
|
||||
<Text className='faqTitle'>{item.title}</Text>
|
||||
<Text className='faqDate'>{item.date}</Text>
|
||||
{faqList.length > 0 ? (
|
||||
faqList.map((item, idx, arr) => (
|
||||
<View
|
||||
key={item.articleId || `${item.title}-${idx}`}
|
||||
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='faqDate'>{(item.createTime || '').slice(0, 10)}</Text>
|
||||
</View>
|
||||
))
|
||||
) : (
|
||||
<View className='faqItem faqItemLast'>
|
||||
<Text className='faqTitle'>暂无常见问题</Text>
|
||||
<Text className='faqDate' />
|
||||
</View>
|
||||
))}
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user