商品以及商品详情
This commit is contained in:
@@ -0,0 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '对话',
|
||||
navigationStyle: 'custom',
|
||||
})
|
||||
@@ -0,0 +1,160 @@
|
||||
/* ========================================
|
||||
对话页
|
||||
======================================== */
|
||||
|
||||
.chat-page {
|
||||
min-height: 100vh;
|
||||
background: #f7f8fa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ========== 导航栏 ========== */
|
||||
.chat-nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
|
||||
.nav-content {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
position: relative;
|
||||
|
||||
.nav-back {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
.nav-info {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.nav-name {
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.nav-role {
|
||||
font-size: 22px;
|
||||
color: #969799;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-placeholder {
|
||||
width: 50px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 消息列表滚动区 ========== */
|
||||
.chat-scroll {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* ========== 消息列表容器 ========== */
|
||||
.message-list {
|
||||
padding: 16px 24px;
|
||||
}
|
||||
|
||||
/* ========== 消息项 ========== */
|
||||
.message-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 24px;
|
||||
|
||||
/* 接收消息：左对齐 */
|
||||
&.received {
|
||||
align-items: flex-start;
|
||||
|
||||
.bubble {
|
||||
background: #fff;
|
||||
color: #323233;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
/* 发送消息：右对齐 */
|
||||
&.sent {
|
||||
align-items: flex-end;
|
||||
|
||||
.bubble {
|
||||
background: linear-gradient(135deg, #1989fa 0%, #06b7f0 100%);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.bubble {
|
||||
max-width: 70%;
|
||||
padding: 20px 24px;
|
||||
border-radius: 16px;
|
||||
font-size: 30px;
|
||||
line-height: 1.5;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.msg-time {
|
||||
font-size: 22px;
|
||||
color: #c8c9cc;
|
||||
margin-top: 8px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 底部输入栏 ========== */
|
||||
.chat-input-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px 24px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #f2f3f5;
|
||||
gap: 16px;
|
||||
|
||||
.input-wrap {
|
||||
flex: 1;
|
||||
background: #f7f8fa;
|
||||
border-radius: 40px;
|
||||
padding: 12px 24px;
|
||||
|
||||
.chat-input {
|
||||
font-size: 28px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
flex-shrink: 0;
|
||||
padding: 12px 28px;
|
||||
background: #1989fa;
|
||||
border-radius: 40px;
|
||||
|
||||
.send-text {
|
||||
font-size: 28px;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 底部安全区占位 ========== */
|
||||
.scroll-bottom-safe {
|
||||
height: 120px;
|
||||
}
|
||||
@@ -0,0 +1,168 @@
|
||||
import { useState, useMemo, useCallback, useRef, useEffect } from 'react'
|
||||
import Taro, { useDidShow } from '@tarojs/taro'
|
||||
import { View, Text, ScrollView, Input } from '@tarojs/components'
|
||||
import { Icon } from '@antmjs/vantui'
|
||||
import { chatList } from '@/mock/messages'
|
||||
import { conversations } from '@/mock/conversations'
|
||||
import type { ChatMessage } from '@/mock/conversations'
|
||||
import './index.less'
|
||||
|
||||
/** 角色标签映射 */
|
||||
const ROLE_LABEL: Record<string, string> = {
|
||||
rider: '骑手',
|
||||
merchant: '商家',
|
||||
user: '同学',
|
||||
}
|
||||
|
||||
function getStatusBarH(): number {
|
||||
try { return Taro.getSystemInfoSync().statusBarHeight || 20 }
|
||||
catch { return 20 }
|
||||
}
|
||||
|
||||
function getSafeBottom(): number {
|
||||
try {
|
||||
const info = Taro.getSystemInfoSync()
|
||||
return (info.screenHeight - info.safeArea!.bottom) || 0
|
||||
} catch { return 0 }
|
||||
}
|
||||
|
||||
export default function ChatPage() {
|
||||
const id = String(Taro.getCurrentInstance().router?.params?.id || '')
|
||||
|
||||
/* ---- 查找聊天对象 ---- */
|
||||
const partner = useMemo(() => chatList.find((c) => c.id === id), [id])
|
||||
|
||||
/* ---- 对话消息 ---- */
|
||||
const [messages, setMessages] = useState<ChatMessage[]>([])
|
||||
const [inputValue, setInputValue] = useState('')
|
||||
|
||||
const statusBarH = useMemo(getStatusBarH, [])
|
||||
const safeBottom = useMemo(getSafeBottom, [])
|
||||
|
||||
// 初始化消息
|
||||
useDidShow(() => {
|
||||
if (id && conversations[id]) {
|
||||
setMessages(conversations[id])
|
||||
}
|
||||
})
|
||||
|
||||
/* ---- 事件 ---- */
|
||||
const handleBack = useCallback(() => {
|
||||
Taro.navigateBack()
|
||||
}, [])
|
||||
|
||||
const handleSend = useCallback(() => {
|
||||
const text = inputValue.trim()
|
||||
if (!text) return
|
||||
|
||||
const now = new Date()
|
||||
const time = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`
|
||||
|
||||
const newMsg: ChatMessage = {
|
||||
id: `m${Date.now()}`,
|
||||
sender: 'me',
|
||||
content: text,
|
||||
time,
|
||||
}
|
||||
|
||||
setMessages((prev) => [...prev, newMsg])
|
||||
setInputValue('')
|
||||
|
||||
// 模拟对方自动回复（1.5 秒后）
|
||||
if (partner) {
|
||||
setTimeout(() => {
|
||||
const autoReply: ChatMessage = {
|
||||
id: `m${Date.now() + 1}`,
|
||||
sender: 'other',
|
||||
content: '好的，收到你的消息了～',
|
||||
time: `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes() + 1).padStart(2, '0')}`,
|
||||
}
|
||||
setMessages((prev) => [...prev, autoReply])
|
||||
}, 1500)
|
||||
}
|
||||
}, [inputValue, partner])
|
||||
|
||||
if (!partner) {
|
||||
return (
|
||||
<View className='chat-page'>
|
||||
<View className='chat-nav' style={{ paddingTop: `${statusBarH}px` }}>
|
||||
<View className='nav-content'>
|
||||
<View className='nav-back' onClick={handleBack}>
|
||||
<Icon name='arrow-left' size={22} color='#323233' />
|
||||
</View>
|
||||
<View className='nav-info'>
|
||||
<Text className='nav-name'>未知用户</Text>
|
||||
</View>
|
||||
<View className='nav-placeholder' />
|
||||
</View>
|
||||
</View>
|
||||
<View style={{ height: `${statusBarH + 44}px` }} />
|
||||
<View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 1 }}>
|
||||
<Text style={{ color: '#969799', fontSize: '30px' }}>对话不存在</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const roleLabel = partner.role ? ROLE_LABEL[partner.role] : ''
|
||||
|
||||
return (
|
||||
<View className='chat-page'>
|
||||
{/* ===== 导航栏 ===== */}
|
||||
<View className='chat-nav' style={{ paddingTop: `${statusBarH}px` }}>
|
||||
<View className='nav-content'>
|
||||
<View className='nav-back' onClick={handleBack}>
|
||||
<Icon name='arrow-left' size={22} color='#323233' />
|
||||
</View>
|
||||
<View className='nav-info'>
|
||||
<Text className='nav-name'>{partner.name}</Text>
|
||||
{roleLabel && <Text className='nav-role'>{roleLabel}</Text>}
|
||||
</View>
|
||||
<View className='nav-placeholder' />
|
||||
</View>
|
||||
</View>
|
||||
<View style={{ height: `${statusBarH + 44}px` }} />
|
||||
|
||||
{/* ===== 消息列表 ===== */}
|
||||
<ScrollView
|
||||
className='chat-scroll'
|
||||
scrollY
|
||||
enhanced
|
||||
showScrollbar={false}
|
||||
scrollTop={99999}
|
||||
scrollWithAnimation
|
||||
>
|
||||
<View className='message-list'>
|
||||
{messages.map((msg) => (
|
||||
<View
|
||||
key={msg.id}
|
||||
className={`message-item ${msg.sender === 'me' ? 'sent' : 'received'}`}
|
||||
>
|
||||
<Text className='bubble'>{msg.content}</Text>
|
||||
<Text className='msg-time'>{msg.time}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
<View className='scroll-bottom-safe' />
|
||||
</ScrollView>
|
||||
|
||||
{/* ===== 底部输入栏 ===== */}
|
||||
<View className='chat-input-bar' style={{ paddingBottom: `${safeBottom}px` }}>
|
||||
<View className='input-wrap'>
|
||||
<Input
|
||||
className='chat-input'
|
||||
value={inputValue}
|
||||
placeholder='输入消息...'
|
||||
placeholderStyle='color: #c8c9cc;'
|
||||
onInput={(e) => setInputValue(String(e.detail.value))}
|
||||
confirmType='send'
|
||||
onConfirm={handleSend}
|
||||
/>
|
||||
</View>
|
||||
<View className='send-btn' onClick={handleSend}>
|
||||
<Text className='send-text'>发送</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
+98
-13
@@ -80,30 +80,115 @@
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
/* ========== 标签区域 ========== */
|
||||
.tabs-section {
|
||||
/* ========== 统一板块 ========== */
|
||||
.main-tabs-section {
|
||||
margin: 0 24px 20px;
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
margin: 0 24px 20px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.van-tabs__wrap {
|
||||
border-radius: 16px 16px 0 0;
|
||||
/* 校园商城内容 */
|
||||
.mall-content {
|
||||
padding: 16px 20px 24px;
|
||||
}
|
||||
|
||||
/* 分类标签 */
|
||||
.category-scroll {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.category-tabs {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
white-space: nowrap;
|
||||
|
||||
.category-tab {
|
||||
flex-shrink: 0;
|
||||
padding: 10px 24px;
|
||||
border-radius: 32px;
|
||||
background: #f7f8fa;
|
||||
font-size: 26px;
|
||||
color: #646566;
|
||||
transition: all 0.2s;
|
||||
|
||||
&.active {
|
||||
background: #1989fa;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 文章列表 ========== */
|
||||
.article-list {
|
||||
padding: 0 24px;
|
||||
/* 商品双列网格 */
|
||||
.product-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.empty-grid {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
font-size: 28px;
|
||||
color: #c8c9cc;
|
||||
}
|
||||
}
|
||||
|
||||
/* 商家入驻入口 */
|
||||
.merchant-join-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 24px;
|
||||
background: linear-gradient(135deg, #f0f7ff 0%, #e8f4ff 100%);
|
||||
border: 1px dashed #1989fa;
|
||||
border-radius: 12px;
|
||||
|
||||
.join-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
.join-icon { font-size: 48px; }
|
||||
|
||||
.join-text-wrap {
|
||||
.join-title {
|
||||
display: block;
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.join-desc {
|
||||
font-size: 24px;
|
||||
color: #969799;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.join-arrow {
|
||||
font-size: 36px;
|
||||
color: #1989fa;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
/* 文章列表内容 */
|
||||
.article-content {
|
||||
padding: 0 20px 16px;
|
||||
|
||||
.article-item {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
||||
padding: 24px 0;
|
||||
transition: transform 0.2s;
|
||||
|
||||
& + .article-item {
|
||||
border-top: 1px solid #f2f3f5;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
+126
-29
@@ -1,10 +1,14 @@
|
||||
import { useState, useMemo } from 'react'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { View, ScrollView } from '@tarojs/components'
|
||||
import { View, Text, ScrollView } from '@tarojs/components'
|
||||
import { Search, Swiper, SwiperItem, Grid, GridItem, Tabs, Tab, Image as VantImage } from '@antmjs/vantui'
|
||||
import ArticleCard from '@/components/ArticleCard'
|
||||
import ProductCard from '@/components/ProductCard'
|
||||
import { banners, navItems, articles } from '@/mock/articles'
|
||||
import { products } from '@/mock/products'
|
||||
import type { ArticleCategory } from '@/types/article'
|
||||
import type { ProductCategory } from '@/types/product'
|
||||
import type { Product } from '@/types/product'
|
||||
import CustomTabBar from "@/custom-tab-bar";
|
||||
import './index.less'
|
||||
|
||||
@@ -21,22 +25,45 @@ function getNavBarHeight() {
|
||||
}
|
||||
}
|
||||
|
||||
/** 分类标签映射 */
|
||||
const TAB_LIST = [
|
||||
{ title: '最新', value: 'latest' as ArticleCategory },
|
||||
{ title: '推荐', value: 'recommend' as ArticleCategory },
|
||||
{ title: '热点', value: 'hot' as ArticleCategory },
|
||||
/** 统一板块标签：校园商城 + 文章分类 */
|
||||
const MAIN_TABS = [
|
||||
{ title: '校园商城', value: 'mall' },
|
||||
{ title: '最新', value: 'latest' },
|
||||
{ title: '推荐', value: 'recommend' },
|
||||
{ title: '热点', value: 'hot' },
|
||||
]
|
||||
|
||||
/** 商品分类标签 */
|
||||
const PRODUCT_CATEGORIES: { title: string; value: ProductCategory | 'all' }[] = [
|
||||
{ title: '全部', value: 'all' },
|
||||
{ title: '数码', value: 'digital' },
|
||||
{ title: '图书', value: 'book' },
|
||||
{ title: '生活', value: 'life' },
|
||||
{ title: '美食', value: 'food' },
|
||||
{ title: '服饰', value: 'cloth' },
|
||||
]
|
||||
|
||||
export default function Index() {
|
||||
const [activeTab, setActiveTab] = useState(0)
|
||||
const [activeMainTab, setActiveMainTab] = useState(0)
|
||||
const [activeCategory, setActiveCategory] = useState(0)
|
||||
const navBarHeight = useMemo(() => getNavBarHeight(), [])
|
||||
|
||||
/** 根据当前 tab 筛选文章 */
|
||||
/** 当前选中的板块 */
|
||||
const currentTab = MAIN_TABS[activeMainTab]?.value || 'mall'
|
||||
|
||||
/** 根据文章分类筛 */
|
||||
const filteredArticles = useMemo(() => {
|
||||
const category = TAB_LIST[activeTab]?.value || 'latest'
|
||||
return articles.filter((a) => a.category === category)
|
||||
}, [activeTab])
|
||||
const value = MAIN_TABS[activeMainTab]?.value || 'latest'
|
||||
if (value === 'mall') return articles.filter((a) => a.category === 'latest')
|
||||
return articles.filter((a) => a.category === value)
|
||||
}, [activeMainTab])
|
||||
|
||||
/** 根据当前分类筛选商品 */
|
||||
const filteredProducts = useMemo(() => {
|
||||
const catValue = PRODUCT_CATEGORIES[activeCategory]?.value || 'all'
|
||||
if (catValue === 'all') return products
|
||||
return products.filter((p) => p.category === catValue)
|
||||
}, [activeCategory])
|
||||
|
||||
/** 搜索 */
|
||||
const handleSearch = () => {
|
||||
@@ -57,6 +84,21 @@ export default function Index() {
|
||||
Taro.navigateTo({ url: `/pages/article/index?id=${id}` })
|
||||
}
|
||||
|
||||
/** 商品点击 */
|
||||
const handleProductClick = (product: Product) => {
|
||||
Taro.navigateTo({ url: `/pages/product-detail/index?id=${product.id}` })
|
||||
}
|
||||
|
||||
/** 查看全部商品 */
|
||||
const handleViewAll = () => {
|
||||
Taro.showToast({ title: '商城即将上线', icon: 'none' })
|
||||
}
|
||||
|
||||
/** 商家入驻 */
|
||||
const handleMerchantJoin = () => {
|
||||
Taro.showToast({ title: '商家入驻即将上线', icon: 'none' })
|
||||
}
|
||||
|
||||
return (
|
||||
<View className='home-page'>
|
||||
{/* ========== 自定义导航栏 (毛玻璃) ========== */}
|
||||
@@ -128,36 +170,91 @@ export default function Index() {
|
||||
</Grid>
|
||||
</View>
|
||||
|
||||
{/* ========== 文章标签导航 (最新 / 推荐 / 热点) ========== */}
|
||||
<View className='tabs-section'>
|
||||
{/* ========== 统一板块：校园商城 | 最新 | 推荐 | 热点 ========== */}
|
||||
<View className='main-tabs-section'>
|
||||
<Tabs
|
||||
active={activeTab}
|
||||
onChange={(e) => setActiveTab(e.detail.index)}
|
||||
active={activeMainTab}
|
||||
onChange={(e) => setActiveMainTab(e.detail.index)}
|
||||
sticky
|
||||
offsetTop={navBarHeight.totalHeight}
|
||||
color='#1989fa'
|
||||
titleActiveColor='#1989fa'
|
||||
titleInactiveColor='#646566'
|
||||
animated
|
||||
swipeable
|
||||
>
|
||||
{TAB_LIST.map((tab) => (
|
||||
{MAIN_TABS.map((tab) => (
|
||||
<Tab key={tab.value} title={tab.title} />
|
||||
))}
|
||||
</Tabs>
|
||||
</View>
|
||||
|
||||
{/* ========== 文章列表 ========== */}
|
||||
<View className='article-list'>
|
||||
{filteredArticles.map((article) => (
|
||||
<View
|
||||
key={article.id}
|
||||
className='article-item'
|
||||
onClick={() => handleArticleClick(article.id)}
|
||||
>
|
||||
<ArticleCard article={article} />
|
||||
{/* ===== 校园商城内容 ===== */}
|
||||
{currentTab === 'mall' && (
|
||||
<View className='mall-content'>
|
||||
{/* 商品分类标签 */}
|
||||
<ScrollView
|
||||
className='category-scroll'
|
||||
scrollX
|
||||
enhanced
|
||||
showScrollbar={false}
|
||||
>
|
||||
<View className='category-tabs'>
|
||||
{PRODUCT_CATEGORIES.map((cat, idx) => (
|
||||
<View
|
||||
key={cat.value}
|
||||
className={`category-tab ${activeCategory === idx ? 'active' : ''}`}
|
||||
onClick={() => setActiveCategory(idx)}
|
||||
>
|
||||
<Text className='category-text'>{cat.title}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</ScrollView>
|
||||
|
||||
{/* 商品双列网格 */}
|
||||
<View className='product-grid'>
|
||||
{filteredProducts.map((product) => (
|
||||
<ProductCard
|
||||
key={product.id}
|
||||
product={product}
|
||||
onClick={handleProductClick}
|
||||
/>
|
||||
))}
|
||||
{filteredProducts.length === 0 && (
|
||||
<View className='empty-grid'>暂无商品</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* 商家入驻入口 */}
|
||||
<View className='merchant-join-card' onClick={handleMerchantJoin}>
|
||||
<View className='join-content'>
|
||||
<Text className='join-icon'>🏪</Text>
|
||||
<View className='join-text-wrap'>
|
||||
<Text className='join-title'>商家入驻</Text>
|
||||
<Text className='join-desc'>拥有自己的店铺，开启校园创业之旅</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Text className='join-arrow'>›</Text>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* ===== 文章列表内容 ===== */}
|
||||
{currentTab !== 'mall' && (
|
||||
<View className='article-content'>
|
||||
{filteredArticles.map((article) => (
|
||||
<View
|
||||
key={article.id}
|
||||
className='article-item'
|
||||
onClick={() => handleArticleClick(article.id)}
|
||||
>
|
||||
<ArticleCard article={article} />
|
||||
</View>
|
||||
))}
|
||||
{filteredArticles.length === 0 && (
|
||||
<View className='empty-tip'>暂无文章</View>
|
||||
)}
|
||||
</View>
|
||||
))}
|
||||
{filteredArticles.length === 0 && (
|
||||
<View className='empty-tip'>暂无文章</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
|
||||
@@ -14,7 +14,11 @@ const ROLE_LABEL: Record<string, { text: string; className: string }> = {
|
||||
|
||||
export default function Messages() {
|
||||
const handleChatClick = (item: ChatItem) => {
|
||||
Taro.showToast({ title: `${item.name || item.title} 聊天即将上线`, icon: 'none' })
|
||||
if (item.type === 'system') {
|
||||
Taro.navigateTo({ url: '/pages/system-messages/index' })
|
||||
} else {
|
||||
Taro.navigateTo({ url: `/pages/chat/index?id=${item.id}` })
|
||||
}
|
||||
}
|
||||
|
||||
// 分组：置顶系统消息 + 普通聊天
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '商品详情',
|
||||
navigationStyle: 'custom',
|
||||
})
|
||||
@@ -0,0 +1,237 @@
|
||||
/* ========================================
|
||||
商品详情页
|
||||
======================================== */
|
||||
|
||||
.product-detail-page {
|
||||
min-height: 100vh;
|
||||
background: #f7f8fa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ========== 导航栏 ========== */
|
||||
.detail-nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
|
||||
.nav-content {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
|
||||
.nav-back {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.nav-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
width: 50px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 滚动区域 ========== */
|
||||
.detail-scroll {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* ========== 图片轮播 ========== */
|
||||
.image-swiper {
|
||||
width: 100%;
|
||||
height: 750px;
|
||||
background: #fff;
|
||||
|
||||
.swiper-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 价格信息卡片 ========== */
|
||||
.price-card {
|
||||
background: #fff;
|
||||
padding: 24px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.price-row {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.current-price {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
color: #ee0a24;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.original-price {
|
||||
font-size: 28px;
|
||||
color: #c8c9cc;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.discount-badge {
|
||||
font-size: 24px;
|
||||
color: #ee0a24;
|
||||
background: #fff0f0;
|
||||
padding: 2px 10px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-name {
|
||||
display: block;
|
||||
font-size: 34px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.product-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.product-sales {
|
||||
font-size: 26px;
|
||||
color: #969799;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 规格选择行 ========== */
|
||||
.sku-select-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.sku-label {
|
||||
font-size: 28px;
|
||||
color: #646566;
|
||||
}
|
||||
|
||||
.sku-value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 28px;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 商家信息 ========== */
|
||||
.merchant-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.merchant-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
.merchant-avatar {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.merchant-name {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
}
|
||||
|
||||
.merchant-arrow {
|
||||
font-size: 28px;
|
||||
color: #c8c9cc;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 商品描述 ========== */
|
||||
.desc-card {
|
||||
background: #fff;
|
||||
padding: 24px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.desc-title {
|
||||
display: block;
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.desc-content {
|
||||
display: block;
|
||||
font-size: 28px;
|
||||
color: #646566;
|
||||
line-height: 1.8;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 推荐商品 ========== */
|
||||
.recommend-section {
|
||||
padding: 0 24px 16px;
|
||||
|
||||
.section-title {
|
||||
display: block;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 16px;
|
||||
padding-left: 8px;
|
||||
border-left: 6px solid #1989fa;
|
||||
}
|
||||
}
|
||||
|
||||
.recommend-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
|
||||
.empty-recommend {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
font-size: 28px;
|
||||
color: #c8c9cc;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 底部安全区 ========== */
|
||||
.scroll-bottom-safe {
|
||||
height: 120px;
|
||||
}
|
||||
@@ -0,0 +1,411 @@
|
||||
import { useState, useMemo, useCallback } from 'react'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { View, Text, ScrollView } from '@tarojs/components'
|
||||
import {
|
||||
Swiper,
|
||||
SwiperItem,
|
||||
Tag,
|
||||
Image as VantImage,
|
||||
Icon,
|
||||
GoodsAction,
|
||||
GoodsActionIcon,
|
||||
GoodsActionButton,
|
||||
Stepper,
|
||||
Sku,
|
||||
Popup,
|
||||
Button,
|
||||
} from '@antmjs/vantui'
|
||||
import type { ISkuItem, IGoodItem } from '@antmjs/vantui/types/sku'
|
||||
import { products } from '@/mock/products'
|
||||
import ProductCard from '@/components/ProductCard'
|
||||
import type { Product } from '@/types/product'
|
||||
import './index.less'
|
||||
|
||||
/* ==============================
|
||||
辅助函数
|
||||
============================== */
|
||||
|
||||
function getStatusBarH(): number {
|
||||
try { return Taro.getSystemInfoSync().statusBarHeight || 20 }
|
||||
catch { return 20 }
|
||||
}
|
||||
|
||||
function getSafeBottom(): number {
|
||||
try {
|
||||
const info = Taro.getSystemInfoSync()
|
||||
return (info.screenHeight - info.safeArea!.bottom) || 0
|
||||
} catch { return 0 }
|
||||
}
|
||||
|
||||
/** 根据商品生成简单 SKU 数据 */
|
||||
function buildSkuData(product: Product) {
|
||||
const goodsList: IGoodItem[] = [
|
||||
{
|
||||
id: 1,
|
||||
skuIds: [1, 11],
|
||||
price: Math.round(product.price * 100),
|
||||
stock: 999,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
skuIds: [1, 12],
|
||||
price: Math.round(product.price * 100),
|
||||
stock: 0,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
skuIds: [2, 11],
|
||||
price: Math.round(product.price * 100) + 1000,
|
||||
stock: 500,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
skuIds: [2, 12],
|
||||
price: Math.round(product.price * 100) + 1000,
|
||||
stock: 300,
|
||||
},
|
||||
]
|
||||
|
||||
const sku: ISkuItem[] = [
|
||||
{
|
||||
id: 1,
|
||||
name: '颜色',
|
||||
items: [
|
||||
{ id: 1, name: '黑色' },
|
||||
{ id: 2, name: '白色' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '版本',
|
||||
items: [
|
||||
{ id: 11, name: '标准版' },
|
||||
{ id: 12, name: '高配版' },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
return { goodsList, sku }
|
||||
}
|
||||
|
||||
/* ==============================
|
||||
页面组件
|
||||
============================== */
|
||||
|
||||
export default function ProductDetail() {
|
||||
const id = String(Taro.getCurrentInstance().router?.params?.id || '')
|
||||
|
||||
/* ---- 数据 ---- */
|
||||
const product = useMemo(() => products.find((p) => p.id === id), [id])
|
||||
|
||||
const statusBarH = useMemo(getStatusBarH, [])
|
||||
const safeBottom = useMemo(getSafeBottom, [])
|
||||
|
||||
const [isFavorited, setIsFavorited] = useState(false)
|
||||
|
||||
/* ---- SKU 弹窗 ---- */
|
||||
const [skuVisible, setSkuVisible] = useState(false)
|
||||
const [skuAction, setSkuAction] = useState<'cart' | 'buy'>('cart')
|
||||
const [quantity, setQuantity] = useState(1)
|
||||
|
||||
const skuData = useMemo(() => {
|
||||
if (!product) return { goodsList: [], sku: [] }
|
||||
return buildSkuData(product)
|
||||
}, [product])
|
||||
|
||||
/* ---- 推荐商品 ---- */
|
||||
const recommendedProducts = useMemo(() => {
|
||||
if (!product) return []
|
||||
return products
|
||||
.filter((p) => p.category === product.category && p.id !== product.id)
|
||||
.slice(0, 4)
|
||||
}, [product])
|
||||
|
||||
/* ---- 事件 ---- */
|
||||
const handleBack = useCallback(() => { Taro.navigateBack() }, [])
|
||||
|
||||
const handleNavigateToDetail = useCallback((targetId: string) => {
|
||||
Taro.navigateTo({ url: `/pages/product-detail/index?id=${targetId}` })
|
||||
}, [])
|
||||
|
||||
/** 打开 SKU 弹窗 */
|
||||
const openSku = (action: 'cart' | 'buy') => {
|
||||
setSkuAction(action)
|
||||
setSkuVisible(true)
|
||||
}
|
||||
|
||||
const handleSkuClose = () => setSkuVisible(false)
|
||||
|
||||
/** SKU 确认 */
|
||||
const handleSkuConfirm = () => {
|
||||
setSkuVisible(false)
|
||||
if (skuAction === 'cart') {
|
||||
Taro.showToast({ title: '已加入购物车', icon: 'success' })
|
||||
} else {
|
||||
Taro.showToast({ title: '下单成功', icon: 'success' })
|
||||
}
|
||||
setQuantity(1)
|
||||
}
|
||||
|
||||
/* ---- 空状态 ---- */
|
||||
if (!product) {
|
||||
return (
|
||||
<View className='product-detail-page'>
|
||||
<View className='detail-nav' style={{ paddingTop: `${statusBarH}px` }}>
|
||||
<View className='nav-content'>
|
||||
<View className='nav-back' onClick={handleBack}>
|
||||
<Icon name='arrow-left' size={22} color='#323233' />
|
||||
</View>
|
||||
<Text className='nav-title'>商品详情</Text>
|
||||
<View className='nav-actions' />
|
||||
</View>
|
||||
</View>
|
||||
<View style={{ height: `${statusBarH + 44}px` }} />
|
||||
<View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 1 }}>
|
||||
<Text style={{ color: '#969799', fontSize: '30px' }}>商品不存在</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const discount = product.originalPrice
|
||||
? Math.round((product.price / product.originalPrice) * 10)
|
||||
: null
|
||||
|
||||
return (
|
||||
<View className='product-detail-page'>
|
||||
{/* ===== 导航栏 ===== */}
|
||||
<View className='detail-nav' style={{ paddingTop: `${statusBarH}px` }}>
|
||||
<View className='nav-content'>
|
||||
<View className='nav-back' onClick={handleBack}>
|
||||
<Icon name='arrow-left' size={22} color='#323233' />
|
||||
</View>
|
||||
<Text className='nav-title'>商品详情</Text>
|
||||
<View className='nav-actions' />
|
||||
</View>
|
||||
</View>
|
||||
<View style={{ height: `${statusBarH + 44}px` }} />
|
||||
|
||||
{/* ===== 滚动内容 ===== */}
|
||||
<ScrollView className='detail-scroll' scrollY enhanced showScrollbar={false}>
|
||||
{/* 图片轮播 — 使用商品图片 + 模拟多张 */}
|
||||
<Swiper
|
||||
className='image-swiper'
|
||||
autoPlay={0}
|
||||
loop
|
||||
paginationVisible
|
||||
paginationColor='#1989fa'
|
||||
height={750}
|
||||
>
|
||||
{[product.image, product.image, product.image].map((img, idx) => (
|
||||
<SwiperItem key={idx}>
|
||||
<VantImage
|
||||
className='swiper-image'
|
||||
src={img}
|
||||
fit='cover'
|
||||
width='100%'
|
||||
height='100%'
|
||||
/>
|
||||
</SwiperItem>
|
||||
))}
|
||||
</Swiper>
|
||||
|
||||
{/* 价格信息 */}
|
||||
<View className='price-card'>
|
||||
<View className='price-row'>
|
||||
<Text className='current-price'>¥{product.price.toFixed(2)}</Text>
|
||||
{product.originalPrice && (
|
||||
<Text className='original-price'>¥{product.originalPrice.toFixed(2)}</Text>
|
||||
)}
|
||||
{discount && discount < 10 && (
|
||||
<Text className='discount-badge'>{discount}折</Text>
|
||||
)}
|
||||
</View>
|
||||
<Text className='product-name'>{product.title}</Text>
|
||||
{product.tags && product.tags.length > 0 && (
|
||||
<View className='product-tags'>
|
||||
{product.tags.map((t) => (
|
||||
<Tag key={t} type='danger' plain>
|
||||
{t}
|
||||
</Tag>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
<Text className='product-sales'>已售 {product.sales}</Text>
|
||||
</View>
|
||||
|
||||
{/* 规格选择 */}
|
||||
<View className='sku-select-row' onClick={() => openSku('cart')}>
|
||||
<Text className='sku-label'>已选</Text>
|
||||
<View className='sku-value'>
|
||||
<Text>颜色: 黑色 / 版本: 标准版 ×{quantity}</Text>
|
||||
<Icon name='arrow' size={16} color='#c8c9cc' />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 商家信息 */}
|
||||
<View className='merchant-card'>
|
||||
<View className='merchant-info'>
|
||||
<VantImage
|
||||
className='merchant-avatar'
|
||||
src={product.merchant.avatar}
|
||||
fit='cover'
|
||||
width={72}
|
||||
height={72}
|
||||
round
|
||||
/>
|
||||
<Text className='merchant-name'>{product.merchant.name}</Text>
|
||||
</View>
|
||||
<Icon name='arrow' size={16} color='#c8c9cc' />
|
||||
</View>
|
||||
|
||||
{/* 商品描述 */}
|
||||
<View className='desc-card'>
|
||||
<Text className='desc-title'>商品描述</Text>
|
||||
<Text className='desc-content'>{product.desc}</Text>
|
||||
</View>
|
||||
|
||||
{/* 推荐商品 */}
|
||||
<View className='recommend-section'>
|
||||
<Text className='section-title'>推荐商品</Text>
|
||||
<View className='recommend-grid'>
|
||||
{recommendedProducts.length > 0 ? (
|
||||
recommendedProducts.map((p) => (
|
||||
<ProductCard
|
||||
key={p.id}
|
||||
product={p}
|
||||
onClick={(prod) => handleNavigateToDetail(prod.id)}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<Text className='empty-recommend'>暂无推荐</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className='scroll-bottom-safe' />
|
||||
</ScrollView>
|
||||
|
||||
{/* ===== 底部操作栏 ===== */}
|
||||
<GoodsAction safeAreaInsetBottom={false}>
|
||||
<GoodsActionIcon
|
||||
icon='chat-o'
|
||||
text='客服'
|
||||
onClick={() => Taro.showToast({ title: '联系客服中...', icon: 'none' })}
|
||||
/>
|
||||
<GoodsActionIcon
|
||||
icon={isFavorited ? 'star' : 'star-o'}
|
||||
text='收藏'
|
||||
color={isFavorited ? '#ff976a' : undefined}
|
||||
onClick={() => {
|
||||
setIsFavorited(!isFavorited)
|
||||
Taro.showToast({
|
||||
title: isFavorited ? '已取消收藏' : '已收藏',
|
||||
icon: 'none',
|
||||
})
|
||||
}}
|
||||
/>
|
||||
<GoodsActionIcon
|
||||
icon='cart-o'
|
||||
text='购物车'
|
||||
info='0'
|
||||
onClick={() => Taro.showToast({ title: '购物车即将上线', icon: 'none' })}
|
||||
/>
|
||||
<GoodsActionButton
|
||||
text='加入购物车'
|
||||
type='warning'
|
||||
onClick={() => openSku('cart')}
|
||||
/>
|
||||
<GoodsActionButton
|
||||
text='立即购买'
|
||||
type='danger'
|
||||
onClick={() => openSku('buy')}
|
||||
/>
|
||||
</GoodsAction>
|
||||
|
||||
{/* ===== SKU 选择弹窗 ===== */}
|
||||
<Popup
|
||||
show={skuVisible}
|
||||
position='bottom'
|
||||
round
|
||||
rootPortal
|
||||
onClose={handleSkuClose}
|
||||
overlayStyle={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
|
||||
>
|
||||
<View style={{ background: '#fff', paddingBottom: `${safeBottom}px` }}>
|
||||
{/* 弹窗头部 — 商品概要 */}
|
||||
<View style={{ display: 'flex', padding: '24px', borderBottom: '1px solid #f2f3f5' }}>
|
||||
<VantImage
|
||||
src={product.image}
|
||||
fit='cover'
|
||||
width={160}
|
||||
height={160}
|
||||
radius={8}
|
||||
/>
|
||||
<View style={{ marginLeft: '20px', flex: 1 }}>
|
||||
<Text style={{ fontSize: '40px', fontWeight: 700, color: '#ee0a24', display: 'block' }}>
|
||||
¥{product.price.toFixed(2)}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: '24px',
|
||||
color: '#969799',
|
||||
display: 'block',
|
||||
marginTop: '8px',
|
||||
}}
|
||||
>
|
||||
库存 999 件
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* SKU 规格选择 */}
|
||||
<View style={{ padding: '0 24px', maxHeight: '500px', overflowY: 'auto' }}>
|
||||
<Sku
|
||||
goodsId={1}
|
||||
goodsList={skuData.goodsList}
|
||||
sku={skuData.sku}
|
||||
onChange={(goods) => {
|
||||
if (goods) {
|
||||
// SKU 变化时更新价格
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* 数量选择 */}
|
||||
<View
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
padding: '24px',
|
||||
borderTop: '1px solid #f2f3f5',
|
||||
borderBottom: '1px solid #f2f3f5',
|
||||
}}
|
||||
>
|
||||
<Text style={{ fontSize: '28px', color: '#646566' }}>数量</Text>
|
||||
<Stepper
|
||||
value={quantity}
|
||||
min={1}
|
||||
max={99}
|
||||
onChange={(e) => setQuantity(Number(e.detail))}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* 确认按钮 */}
|
||||
<View style={{ padding: '24px' }}>
|
||||
<Button
|
||||
type={skuAction === 'buy' ? 'danger' : 'warning'}
|
||||
round
|
||||
block
|
||||
onClick={handleSkuConfirm}
|
||||
>
|
||||
{skuAction === 'buy' ? '立即购买' : '加入购物车'}
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
</Popup>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '发布文章',
|
||||
navigationStyle: 'custom',
|
||||
})
|
||||
@@ -0,0 +1,109 @@
|
||||
/* ========================================
|
||||
发布文章页
|
||||
======================================== */
|
||||
|
||||
.publish-page {
|
||||
min-height: 100vh;
|
||||
background: #f7f8fa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ========== 导航栏（复用 article 页样式） ========== */
|
||||
.publish-nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
|
||||
.nav-content {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
position: relative;
|
||||
|
||||
.nav-back {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.nav-placeholder {
|
||||
width: 50px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 滚动区域 ========== */
|
||||
.publish-scroll {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* ========== 表单卡片 ========== */
|
||||
.form-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
margin: 16px 24px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
||||
|
||||
.card-title {
|
||||
display: block;
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: #323233;
|
||||
padding: 24px 24px 0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 图片上传区域 ========== */
|
||||
.upload-section {
|
||||
padding: 16px 24px 24px;
|
||||
|
||||
.upload-label {
|
||||
display: block;
|
||||
font-size: 26px;
|
||||
color: #969799;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 底部提交栏 ========== */
|
||||
.bottom-submit-bar {
|
||||
padding: 16px 24px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #f2f3f5;
|
||||
|
||||
.submit-btn {
|
||||
:global(.van-button) {
|
||||
height: 88px;
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 底部安全区占位 ========== */
|
||||
.scroll-bottom-safe {
|
||||
height: 160px;
|
||||
}
|
||||
@@ -0,0 +1,124 @@
|
||||
import { useState, useMemo, useCallback } from 'react'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { View, Text, ScrollView } from '@tarojs/components'
|
||||
import { Field, Icon, Button, Uploader } from '@antmjs/vantui'
|
||||
import './index.less'
|
||||
|
||||
function getStatusBarH(): number {
|
||||
try { return Taro.getSystemInfoSync().statusBarHeight || 20 }
|
||||
catch { return 20 }
|
||||
}
|
||||
|
||||
function getSafeBottom(): number {
|
||||
try {
|
||||
const info = Taro.getSystemInfoSync()
|
||||
return (info.screenHeight - info.safeArea!.bottom) || 0
|
||||
} catch { return 0 }
|
||||
}
|
||||
|
||||
export default function PublishArticle() {
|
||||
const [title, setTitle] = useState('')
|
||||
const [content, setContent] = useState('')
|
||||
const [images, setImages] = useState<any[]>([])
|
||||
|
||||
const statusBarH = useMemo(getStatusBarH, [])
|
||||
const safeBottom = useMemo(getSafeBottom, [])
|
||||
|
||||
const handleBack = useCallback(() => { Taro.navigateBack() }, [])
|
||||
|
||||
const handleSubmit = useCallback(() => {
|
||||
if (!title.trim()) {
|
||||
Taro.showToast({ title: '请输入文章标题', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!content.trim()) {
|
||||
Taro.showToast({ title: '请输入正文内容', icon: 'none' })
|
||||
return
|
||||
}
|
||||
Taro.showToast({ title: '发布成功', icon: 'success' })
|
||||
setTimeout(() => { Taro.navigateBack() }, 1500)
|
||||
}, [title, content])
|
||||
|
||||
const handleUploadRead = useCallback((e: any) => {
|
||||
const file = e.detail?.file || e.detail
|
||||
if (file) {
|
||||
setImages((prev) => [...prev, { url: file.path || file.url, name: file.name || 'image' }])
|
||||
}
|
||||
}, [])
|
||||
|
||||
const handleUploadDelete = useCallback((e: any) => {
|
||||
const idx = e.detail?.index ?? e.detail
|
||||
setImages((prev) => prev.filter((_, i) => i !== idx))
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<View className='publish-page'>
|
||||
{/* 导航栏 */}
|
||||
<View className='publish-nav' style={{ paddingTop: `${statusBarH}px` }}>
|
||||
<View className='nav-content'>
|
||||
<View className='nav-back' onClick={handleBack}>
|
||||
<Icon name='arrow-left' size={22} color='#323233' />
|
||||
</View>
|
||||
<Text className='nav-title'>发布文章</Text>
|
||||
<View className='nav-placeholder' />
|
||||
</View>
|
||||
</View>
|
||||
<View style={{ height: `${statusBarH + 44}px` }} />
|
||||
|
||||
<ScrollView className='publish-scroll' scrollY enhanced showScrollbar={false}>
|
||||
{/* 基本信息卡片 */}
|
||||
<View className='form-card'>
|
||||
<Text className='card-title'>文章内容</Text>
|
||||
<Field
|
||||
value={title}
|
||||
placeholder='请输入文章标题'
|
||||
border={false}
|
||||
required
|
||||
onInput={(e) => setTitle(String(e.detail.value))}
|
||||
/>
|
||||
<View style={{ height: '1px', background: '#f2f3f5', margin: '0 24px' }} />
|
||||
<Field
|
||||
value={content}
|
||||
placeholder='请输入正文内容'
|
||||
type='textarea'
|
||||
autosize
|
||||
border={false}
|
||||
maxlength={5000}
|
||||
showWordLimit
|
||||
onInput={(e) => setContent(String(e.detail.value))}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* 封面图片 */}
|
||||
<View className='form-card'>
|
||||
<Text className='card-title'>封面图片</Text>
|
||||
<View className='upload-section'>
|
||||
<Text className='upload-label'>支持 jpg/png，最多 3 张</Text>
|
||||
<Uploader
|
||||
fileList={images}
|
||||
accept='image'
|
||||
maxCount={3}
|
||||
multiple
|
||||
deletable
|
||||
previewFullImage
|
||||
uploadText='上传图片'
|
||||
onAfterRead={handleUploadRead}
|
||||
onDelete={handleUploadDelete}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className='scroll-bottom-safe' />
|
||||
</ScrollView>
|
||||
|
||||
{/* 底部提交 */}
|
||||
<View className='bottom-submit-bar' style={{ paddingBottom: `${safeBottom}px` }}>
|
||||
<View className='submit-btn'>
|
||||
<Button type='primary' round block onClick={handleSubmit}>
|
||||
发布文章
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '快递代取',
|
||||
navigationStyle: 'custom',
|
||||
})
|
||||
@@ -0,0 +1,104 @@
|
||||
/* ========================================
|
||||
快递代取发布页
|
||||
======================================== */
|
||||
|
||||
.publish-page {
|
||||
min-height: 100vh;
|
||||
background: #f7f8fa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ========== 导航栏（复用 article 页样式） ========== */
|
||||
.publish-nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
|
||||
.nav-content {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
position: relative;
|
||||
|
||||
.nav-back {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.nav-placeholder {
|
||||
width: 50px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 滚动区域 ========== */
|
||||
.publish-scroll {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* ========== 表单卡片 ========== */
|
||||
.form-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
margin: 16px 24px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
||||
|
||||
.card-title {
|
||||
display: block;
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: #323233;
|
||||
padding: 24px 24px 0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 金额单位提示 ========== */
|
||||
.reward-hint {
|
||||
padding: 0 24px 16px;
|
||||
font-size: 24px;
|
||||
color: #969799;
|
||||
}
|
||||
|
||||
/* ========== 底部提交栏 ========== */
|
||||
.bottom-submit-bar {
|
||||
padding: 16px 24px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #f2f3f5;
|
||||
|
||||
.submit-btn {
|
||||
:global(.van-button) {
|
||||
height: 88px;
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 底部安全区占位 ========== */
|
||||
.scroll-bottom-safe {
|
||||
height: 160px;
|
||||
}
|
||||
@@ -0,0 +1,137 @@
|
||||
import { useState, useMemo, useCallback } from 'react'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { View, Text, ScrollView } from '@tarojs/components'
|
||||
import { Field, Icon, Button } from '@antmjs/vantui'
|
||||
import './index.less'
|
||||
|
||||
function getStatusBarH(): number {
|
||||
try { return Taro.getSystemInfoSync().statusBarHeight || 20 }
|
||||
catch { return 20 }
|
||||
}
|
||||
|
||||
function getSafeBottom(): number {
|
||||
try {
|
||||
const info = Taro.getSystemInfoSync()
|
||||
return (info.screenHeight - info.safeArea!.bottom) || 0
|
||||
} catch { return 0 }
|
||||
}
|
||||
|
||||
export default function PublishExpress() {
|
||||
const [title, setTitle] = useState('')
|
||||
const [desc, setDesc] = useState('')
|
||||
const [location, setLocation] = useState('')
|
||||
const [reward, setReward] = useState('')
|
||||
const [deadline, setDeadline] = useState('')
|
||||
|
||||
const statusBarH = useMemo(getStatusBarH, [])
|
||||
const safeBottom = useMemo(getSafeBottom, [])
|
||||
|
||||
const handleBack = useCallback(() => { Taro.navigateBack() }, [])
|
||||
|
||||
const handleSubmit = useCallback(() => {
|
||||
if (!title.trim()) {
|
||||
Taro.showToast({ title: '请输入任务标题', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!desc.trim()) {
|
||||
Taro.showToast({ title: '请输入任务描述', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!location.trim()) {
|
||||
Taro.showToast({ title: '请输入取件地点', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!reward.trim()) {
|
||||
Taro.showToast({ title: '请输入报酬金额', icon: 'none' })
|
||||
return
|
||||
}
|
||||
Taro.showToast({ title: '发布成功', icon: 'success' })
|
||||
setTimeout(() => { Taro.navigateBack() }, 1500)
|
||||
}, [title, desc, location, reward])
|
||||
|
||||
return (
|
||||
<View className='publish-page'>
|
||||
{/* 导航栏 */}
|
||||
<View className='publish-nav' style={{ paddingTop: `${statusBarH}px` }}>
|
||||
<View className='nav-content'>
|
||||
<View className='nav-back' onClick={handleBack}>
|
||||
<Icon name='arrow-left' size={22} color='#323233' />
|
||||
</View>
|
||||
<Text className='nav-title'>快递代取</Text>
|
||||
<View className='nav-placeholder' />
|
||||
</View>
|
||||
</View>
|
||||
<View style={{ height: `${statusBarH + 44}px` }} />
|
||||
|
||||
<ScrollView className='publish-scroll' scrollY enhanced showScrollbar={false}>
|
||||
{/* 基本信息 */}
|
||||
<View className='form-card'>
|
||||
<Text className='card-title'>任务信息</Text>
|
||||
<Field
|
||||
value={title}
|
||||
placeholder='简要描述代取任务，如：帮我取个快递'
|
||||
border={false}
|
||||
required
|
||||
onInput={(e) => setTitle(String(e.detail.value))}
|
||||
/>
|
||||
<View style={{ height: '1px', background: '#f2f3f5', margin: '0 24px' }} />
|
||||
<Field
|
||||
value={desc}
|
||||
placeholder='详细描述快递信息，如快递公司、柜号、包裹大小等'
|
||||
type='textarea'
|
||||
autosize
|
||||
border={false}
|
||||
maxlength={500}
|
||||
showWordLimit
|
||||
onInput={(e) => setDesc(String(e.detail.value))}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* 详细信息 */}
|
||||
<View className='form-card'>
|
||||
<Text className='card-title'>详细信息</Text>
|
||||
<Field
|
||||
value={location}
|
||||
placeholder='如：南区菜鸟驿站3号柜'
|
||||
label='取件地点'
|
||||
border={false}
|
||||
required
|
||||
onInput={(e) => setLocation(String(e.detail.value))}
|
||||
/>
|
||||
<View style={{ height: '1px', background: '#f2f3f5', margin: '0 24px' }} />
|
||||
<Field
|
||||
value={reward}
|
||||
placeholder='如：5'
|
||||
label='报酬 (元)'
|
||||
type='digit'
|
||||
border={false}
|
||||
required
|
||||
onInput={(e) => setReward(String(e.detail.value))}
|
||||
/>
|
||||
{reward && (
|
||||
<Text className='reward-hint'>报酬金额：¥{Number(reward).toFixed(2)}</Text>
|
||||
)}
|
||||
<View style={{ height: '1px', background: '#f2f3f5', margin: '0 24px' }} />
|
||||
<Field
|
||||
value={deadline}
|
||||
placeholder='如：今天18:00前'
|
||||
label='截止时间'
|
||||
border={false}
|
||||
onInput={(e) => setDeadline(String(e.detail.value))}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View className='scroll-bottom-safe' />
|
||||
</ScrollView>
|
||||
|
||||
{/* 底部提交 */}
|
||||
<View className='bottom-submit-bar' style={{ paddingBottom: `${safeBottom}px` }}>
|
||||
<View className='submit-btn'>
|
||||
<Button type='primary' round block onClick={handleSubmit}>
|
||||
发布任务
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '发布二手',
|
||||
navigationStyle: 'custom',
|
||||
})
|
||||
@@ -0,0 +1,116 @@
|
||||
/* ========================================
|
||||
发布二手页
|
||||
======================================== */
|
||||
|
||||
.publish-page {
|
||||
min-height: 100vh;
|
||||
background: #f7f8fa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ========== 导航栏（复用 article 页样式） ========== */
|
||||
.publish-nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
|
||||
.nav-content {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
position: relative;
|
||||
|
||||
.nav-back {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.nav-placeholder {
|
||||
width: 50px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 滚动区域 ========== */
|
||||
.publish-scroll {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* ========== 表单卡片 ========== */
|
||||
.form-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
margin: 16px 24px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
||||
|
||||
.card-title {
|
||||
display: block;
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: #323233;
|
||||
padding: 24px 24px 0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 图片上传区域 ========== */
|
||||
.upload-section {
|
||||
padding: 16px 24px 24px;
|
||||
|
||||
.upload-label {
|
||||
display: block;
|
||||
font-size: 26px;
|
||||
color: #969799;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 标签提示 ========== */
|
||||
.tag-hint {
|
||||
padding: 0 24px 16px;
|
||||
font-size: 24px;
|
||||
color: #969799;
|
||||
}
|
||||
|
||||
/* ========== 底部提交栏 ========== */
|
||||
.bottom-submit-bar {
|
||||
padding: 16px 24px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #f2f3f5;
|
||||
|
||||
.submit-btn {
|
||||
:global(.van-button) {
|
||||
height: 88px;
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 底部安全区占位 ========== */
|
||||
.scroll-bottom-safe {
|
||||
height: 160px;
|
||||
}
|
||||
@@ -0,0 +1,167 @@
|
||||
import { useState, useMemo, useCallback } from 'react'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { View, Text, ScrollView } from '@tarojs/components'
|
||||
import { Field, Icon, Button, Uploader } from '@antmjs/vantui'
|
||||
import './index.less'
|
||||
|
||||
function getStatusBarH(): number {
|
||||
try { return Taro.getSystemInfoSync().statusBarHeight || 20 }
|
||||
catch { return 20 }
|
||||
}
|
||||
|
||||
function getSafeBottom(): number {
|
||||
try {
|
||||
const info = Taro.getSystemInfoSync()
|
||||
return (info.screenHeight - info.safeArea!.bottom) || 0
|
||||
} catch { return 0 }
|
||||
}
|
||||
|
||||
export default function PublishSecondhand() {
|
||||
const [title, setTitle] = useState('')
|
||||
const [desc, setDesc] = useState('')
|
||||
const [images, setImages] = useState<any[]>([])
|
||||
const [price, setPrice] = useState('')
|
||||
const [location, setLocation] = useState('')
|
||||
const [tags, setTags] = useState('')
|
||||
|
||||
const statusBarH = useMemo(getStatusBarH, [])
|
||||
const safeBottom = useMemo(getSafeBottom, [])
|
||||
|
||||
const handleBack = useCallback(() => { Taro.navigateBack() }, [])
|
||||
|
||||
const handleSubmit = useCallback(() => {
|
||||
if (!title.trim()) {
|
||||
Taro.showToast({ title: '请输入商品标题', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!desc.trim()) {
|
||||
Taro.showToast({ title: '请输入商品描述', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!price.trim()) {
|
||||
Taro.showToast({ title: '请输入售价', icon: 'none' })
|
||||
return
|
||||
}
|
||||
Taro.showToast({ title: '发布成功', icon: 'success' })
|
||||
setTimeout(() => { Taro.navigateBack() }, 1500)
|
||||
}, [title, desc, price])
|
||||
|
||||
const handleUploadRead = useCallback((e: any) => {
|
||||
const file = e.detail?.file || e.detail
|
||||
if (file) {
|
||||
setImages((prev) => [...prev, { url: file.path || file.url, name: file.name || 'image' }])
|
||||
}
|
||||
}, [])
|
||||
|
||||
const handleUploadDelete = useCallback((e: any) => {
|
||||
const idx = e.detail?.index ?? e.detail
|
||||
setImages((prev) => prev.filter((_, i) => i !== idx))
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<View className='publish-page'>
|
||||
{/* 导航栏 */}
|
||||
<View className='publish-nav' style={{ paddingTop: `${statusBarH}px` }}>
|
||||
<View className='nav-content'>
|
||||
<View className='nav-back' onClick={handleBack}>
|
||||
<Icon name='arrow-left' size={22} color='#323233' />
|
||||
</View>
|
||||
<Text className='nav-title'>发布二手</Text>
|
||||
<View className='nav-placeholder' />
|
||||
</View>
|
||||
</View>
|
||||
<View style={{ height: `${statusBarH + 44}px` }} />
|
||||
|
||||
<ScrollView className='publish-scroll' scrollY enhanced showScrollbar={false}>
|
||||
{/* 商品信息 */}
|
||||
<View className='form-card'>
|
||||
<Text className='card-title'>商品信息</Text>
|
||||
<Field
|
||||
value={title}
|
||||
placeholder='简要描述商品，如：出手99新 iPad Air 5'
|
||||
border={false}
|
||||
required
|
||||
onInput={(e) => setTitle(String(e.detail.value))}
|
||||
/>
|
||||
<View style={{ height: '1px', background: '#f2f3f5', margin: '0 24px' }} />
|
||||
<Field
|
||||
value={desc}
|
||||
placeholder='详细描述商品状况、购买时间、配件等'
|
||||
type='textarea'
|
||||
autosize
|
||||
border={false}
|
||||
maxlength={1000}
|
||||
showWordLimit
|
||||
onInput={(e) => setDesc(String(e.detail.value))}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* 商品图片 */}
|
||||
<View className='form-card'>
|
||||
<Text className='card-title'>商品图片</Text>
|
||||
<View className='upload-section'>
|
||||
<Text className='upload-label'>支持 jpg/png，最多 6 张，第一张为封面</Text>
|
||||
<Uploader
|
||||
fileList={images}
|
||||
accept='image'
|
||||
maxCount={6}
|
||||
multiple
|
||||
deletable
|
||||
previewFullImage
|
||||
uploadText='上传图片'
|
||||
onAfterRead={handleUploadRead}
|
||||
onDelete={handleUploadDelete}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 交易信息 */}
|
||||
<View className='form-card'>
|
||||
<Text className='card-title'>交易信息</Text>
|
||||
<Field
|
||||
value={price}
|
||||
placeholder='如：3200'
|
||||
label='售价 (元)'
|
||||
type='digit'
|
||||
border={false}
|
||||
required
|
||||
onInput={(e) => setPrice(String(e.detail.value))}
|
||||
/>
|
||||
{price && (
|
||||
<Text className='tag-hint'>售价金额：¥{Number(price).toFixed(2)}</Text>
|
||||
)}
|
||||
<View style={{ height: '1px', background: '#f2f3f5', margin: '0 24px' }} />
|
||||
<Field
|
||||
value={location}
|
||||
placeholder='如：东区宿舍'
|
||||
label='交易地点'
|
||||
border={false}
|
||||
onInput={(e) => setLocation(String(e.detail.value))}
|
||||
/>
|
||||
<View style={{ height: '1px', background: '#f2f3f5', margin: '0 24px' }} />
|
||||
<Field
|
||||
value={tags}
|
||||
placeholder='如：数码,99新,在保'
|
||||
label='商品标签'
|
||||
border={false}
|
||||
onInput={(e) => setTags(String(e.detail.value))}
|
||||
/>
|
||||
{tags && (
|
||||
<Text className='tag-hint'>使用逗号分隔，如：数码,99新</Text>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View className='scroll-bottom-safe' />
|
||||
</ScrollView>
|
||||
|
||||
{/* 底部提交 */}
|
||||
<View className='bottom-submit-bar' style={{ paddingBottom: `${safeBottom}px` }}>
|
||||
<View className='submit-btn'>
|
||||
<Button type='primary' round block onClick={handleSubmit}>
|
||||
发布商品
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '系统消息',
|
||||
navigationStyle: 'custom',
|
||||
})
|
||||
@@ -0,0 +1,112 @@
|
||||
/* ========================================
|
||||
系统消息页
|
||||
======================================== */
|
||||
|
||||
.system-msg-page {
|
||||
min-height: 100vh;
|
||||
background: #f7f8fa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ========== 导航栏 ========== */
|
||||
.sys-nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
|
||||
.nav-content {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
position: relative;
|
||||
|
||||
.nav-back {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.nav-placeholder {
|
||||
width: 50px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 滚动区域 ========== */
|
||||
.sys-scroll {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* ========== 消息列表 ========== */
|
||||
.sys-list {
|
||||
padding: 16px 24px;
|
||||
}
|
||||
|
||||
/* ========== 消息卡片 ========== */
|
||||
.sys-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
||||
|
||||
.sys-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.sys-card-icon {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #1989fa 0%, #07c160 100%);
|
||||
color: #fff;
|
||||
font-size: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sys-card-title {
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
color: #1a1a1a;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.sys-card-content {
|
||||
font-size: 28px;
|
||||
color: #646566;
|
||||
line-height: 1.7;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.sys-card-time {
|
||||
text-align: right;
|
||||
font-size: 24px;
|
||||
color: #c8c9cc;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import { useMemo, useCallback } from 'react'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { View, Text, ScrollView } from '@tarojs/components'
|
||||
import { Icon } from '@antmjs/vantui'
|
||||
import { chatList } from '@/mock/messages'
|
||||
import './index.less'
|
||||
|
||||
function getStatusBarH(): number {
|
||||
try { return Taro.getSystemInfoSync().statusBarHeight || 20 }
|
||||
catch { return 20 }
|
||||
}
|
||||
|
||||
export default function SystemMessages() {
|
||||
const statusBarH = useMemo(getStatusBarH, [])
|
||||
|
||||
const systemMsgs = useMemo(
|
||||
() => chatList.filter((m) => m.type === 'system'),
|
||||
[],
|
||||
)
|
||||
|
||||
const handleBack = useCallback(() => {
|
||||
Taro.navigateBack()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<View className='system-msg-page'>
|
||||
{/* ===== 导航栏 ===== */}
|
||||
<View className='sys-nav' style={{ paddingTop: `${statusBarH}px` }}>
|
||||
<View className='nav-content'>
|
||||
<View className='nav-back' onClick={handleBack}>
|
||||
<Icon name='arrow-left' size={22} color='#323233' />
|
||||
</View>
|
||||
<Text className='nav-title'>系统消息</Text>
|
||||
<View className='nav-placeholder' />
|
||||
</View>
|
||||
</View>
|
||||
<View style={{ height: `${statusBarH + 44}px` }} />
|
||||
|
||||
{/* ===== 消息列表 ===== */}
|
||||
<ScrollView className='sys-scroll' scrollY enhanced showScrollbar={false}>
|
||||
<View className='sys-list'>
|
||||
{systemMsgs.length > 0 ? (
|
||||
systemMsgs.map((msg) => (
|
||||
<View key={msg.id} className='sys-card'>
|
||||
<View className='sys-card-header'>
|
||||
<View className='sys-card-icon'>
|
||||
<Text>{msg.title.slice(0, 2)}</Text>
|
||||
</View>
|
||||
<Text className='sys-card-title'>{msg.title}</Text>
|
||||
</View>
|
||||
<Text className='sys-card-content'>{msg.content}</Text>
|
||||
<Text className='sys-card-time'>{msg.time}</Text>
|
||||
</View>
|
||||
))
|
||||
) : (
|
||||
<View style={{ textAlign: 'center', padding: '80px 0' }}>
|
||||
<Text style={{ fontSize: '28px', color: '#c8c9cc' }}>暂无系统消息</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '任务详情',
|
||||
navigationStyle: 'custom',
|
||||
})
|
||||
@@ -0,0 +1,381 @@
|
||||
/* ========================================
|
||||
任务详情页
|
||||
======================================== */
|
||||
|
||||
.task-detail-page {
|
||||
min-height: 100vh;
|
||||
background: #f7f8fa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ========== 导航栏 ========== */
|
||||
.detail-nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
|
||||
.nav-content {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
position: relative;
|
||||
|
||||
.nav-back {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.nav-placeholder {
|
||||
width: 50px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 滚动区域 ========== */
|
||||
.detail-scroll {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* ========== 已取消提示条 ========== */
|
||||
.cancelled-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 16px 24px 0;
|
||||
padding: 16px 20px;
|
||||
background: #fff0f0;
|
||||
border: 1px solid #ffcccc;
|
||||
border-radius: 12px;
|
||||
|
||||
.cancelled-icon {
|
||||
font-size: 28px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cancelled-text {
|
||||
font-size: 28px;
|
||||
color: #ee0a24;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 内容卡片通用 ========== */
|
||||
.content-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
margin: 16px 24px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
/* ========== Steps 进度条区域 ========== */
|
||||
.steps-section {
|
||||
margin-top: 16px;
|
||||
padding: 28px 24px 24px;
|
||||
}
|
||||
|
||||
/* ========== 类型徽章 ========== */
|
||||
.type-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 14px;
|
||||
border-radius: 8px;
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
line-height: 1.5;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.badge-express { background: #1989fa; }
|
||||
.badge-secondhand { background: #ff976a; }
|
||||
.badge-help { background: #ff8c00; }
|
||||
.badge-activity { background: #6465e0; }
|
||||
.badge-carpool { background: #07c160; }
|
||||
|
||||
/* ========== 状态徽章 ========== */
|
||||
.status-badge {
|
||||
font-size: 24px;
|
||||
padding: 2px 12px;
|
||||
border-radius: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status-open { color: #07c160; background: #e8f8ef; }
|
||||
.status-progress { color: #1989fa; background: #e8f3ff; }
|
||||
.status-done { color: #969799; background: #f2f3f5; }
|
||||
.status-cancelled { color: #ee0a24; background: #fff0f0; }
|
||||
|
||||
/* ========== 类型/状态行 ========== */
|
||||
.type-status-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.participants-count {
|
||||
font-size: 26px;
|
||||
color: #646566;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 标题和描述 ========== */
|
||||
.detail-title {
|
||||
display: block;
|
||||
font-size: 34px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.detail-desc {
|
||||
display: block;
|
||||
font-size: 28px;
|
||||
color: #646566;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* ========== 分割线 ========== */
|
||||
.detail-divider {
|
||||
height: 1px;
|
||||
background: #f2f3f5;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
/* ========== 信息行 ========== */
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 28px;
|
||||
color: #646566;
|
||||
line-height: 1.6;
|
||||
|
||||
& + .info-row {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
margin-right: 8px;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 报酬/价格 ========== */
|
||||
.reward-large {
|
||||
display: block;
|
||||
font-size: 44px;
|
||||
font-weight: 700;
|
||||
color: #ee0a24;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* ========== 标签行 ========== */
|
||||
.tag-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* ========== 二手商品图片 ========== */
|
||||
.image-gallery {
|
||||
margin-bottom: 20px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
|
||||
.gallery-img {
|
||||
width: 100%;
|
||||
height: 420px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 单张图片（不需要 swiper） */
|
||||
.single-image-wrap {
|
||||
margin-bottom: 20px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ========== 拼车：报酬+余座行 ========== */
|
||||
.reward-seat-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 12px;
|
||||
|
||||
.seats-info {
|
||||
font-size: 28px;
|
||||
color: #ff8c00;
|
||||
font-weight: 600;
|
||||
padding: 4px 16px;
|
||||
background: #fff7e6;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 活动参与进度条 ========== */
|
||||
.progress-section {
|
||||
margin-top: 16px;
|
||||
|
||||
.progress-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.progress-text {
|
||||
font-size: 26px;
|
||||
color: #646566;
|
||||
}
|
||||
|
||||
.progress-percent {
|
||||
font-size: 26px;
|
||||
color: #1989fa;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-track {
|
||||
height: 12px;
|
||||
background: #f2f3f5;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #1989fa, #06b7f0);
|
||||
border-radius: 6px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 内联操作按钮 ========== */
|
||||
.action-section {
|
||||
margin: 0 24px 16px;
|
||||
|
||||
.action-contact-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px 0;
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
font-size: 30px;
|
||||
color: #1989fa;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 发布者卡片 ========== */
|
||||
.publisher-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.pub-avatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pub-info {
|
||||
flex: 1;
|
||||
margin-left: 20px;
|
||||
|
||||
.pub-name {
|
||||
display: block;
|
||||
font-size: 30px;
|
||||
font-weight: 500;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.pub-time {
|
||||
font-size: 26px;
|
||||
color: #969799;
|
||||
}
|
||||
}
|
||||
|
||||
.pub-contact-btn {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 推荐任务区域 ========== */
|
||||
.recommend-section {
|
||||
padding: 0 24px 16px;
|
||||
|
||||
.section-title {
|
||||
display: block;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 16px;
|
||||
padding-left: 8px;
|
||||
border-left: 6px solid #1989fa;
|
||||
}
|
||||
|
||||
.recommend-card-wrap {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.empty-recommend {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
font-size: 28px;
|
||||
color: #c8c9cc;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 底部操作栏 ========== */
|
||||
.bottom-action-bar {
|
||||
padding: 16px 24px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #f2f3f5;
|
||||
|
||||
.cta-button {
|
||||
:global(.van-button) {
|
||||
height: 88px;
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 底部安全区占位 ========== */
|
||||
.scroll-bottom-safe {
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
/* ========== 空状态 ========== */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
font-size: 30px;
|
||||
color: #969799;
|
||||
}
|
||||
@@ -0,0 +1,641 @@
|
||||
import { useMemo, useCallback } from 'react'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { View, Text, Image, ScrollView } from '@tarojs/components'
|
||||
import {
|
||||
Steps,
|
||||
Tag,
|
||||
Icon,
|
||||
Button,
|
||||
Image as VantImage,
|
||||
Swiper,
|
||||
SwiperItem,
|
||||
} from '@antmjs/vantui'
|
||||
import type { Step } from '@antmjs/vantui/types/steps'
|
||||
import type { Task, TaskType, TaskStatus } from '@/types/task'
|
||||
import { tasks } from '@/mock/tasks'
|
||||
import TaskCard from '@/components/TaskCard'
|
||||
import './index.less'
|
||||
|
||||
/* ==============================
|
||||
常量映射
|
||||
============================== */
|
||||
|
||||
/** 任务类型 → 中文名称 */
|
||||
const TYPE_BADGE_LABEL: Record<TaskType, string> = {
|
||||
express: '快递代取',
|
||||
secondhand: '二手交易',
|
||||
help: '求助',
|
||||
activity: '校园活动',
|
||||
carpool: '拼车出行',
|
||||
}
|
||||
|
||||
/** 任务类型 → 徽章CSS类名 */
|
||||
const TYPE_BADGE_CLASS: Record<TaskType, string> = {
|
||||
express: 'badge-express',
|
||||
secondhand: 'badge-secondhand',
|
||||
help: 'badge-help',
|
||||
activity: 'badge-activity',
|
||||
carpool: 'badge-carpool',
|
||||
}
|
||||
|
||||
/** 任务状态 → 中文 */
|
||||
const STATUS_LABEL: Record<TaskStatus, string> = {
|
||||
open: '待接单',
|
||||
progress: '进行中',
|
||||
done: '已完成',
|
||||
cancelled: '已取消',
|
||||
}
|
||||
|
||||
/** 二手交易专用状态文案（与快递/求助不同） */
|
||||
const SECONDHAND_STATUS_LABEL: Record<TaskStatus, string> = {
|
||||
open: '待售',
|
||||
progress: '已预订',
|
||||
done: '已售出',
|
||||
cancelled: '已取消',
|
||||
}
|
||||
|
||||
/** 各类型 Steps 步骤配置 */
|
||||
const STATUS_STEPS_MAP: Record<TaskType, Step[]> = {
|
||||
express: [
|
||||
{ text: '待接单', desc: '等待接单' },
|
||||
{ text: '进行中', desc: '配送中' },
|
||||
{ text: '已完成', desc: '任务完成' },
|
||||
],
|
||||
secondhand: [
|
||||
{ text: '待售', desc: '商品待售' },
|
||||
{ text: '已预订', desc: '已被预订' },
|
||||
{ text: '已售出', desc: '交易完成' },
|
||||
],
|
||||
help: [
|
||||
{ text: '待接单', desc: '等待响应' },
|
||||
{ text: '进行中', desc: '帮助进行中' },
|
||||
{ text: '已完成', desc: '帮助完成' },
|
||||
],
|
||||
activity: [
|
||||
{ text: '待开始', desc: '活动待开始' },
|
||||
{ text: '进行中', desc: '活动进行中' },
|
||||
{ text: '已结束', desc: '活动已结束' },
|
||||
],
|
||||
carpool: [
|
||||
{ text: '待出发', desc: '等待乘客' },
|
||||
{ text: '进行中', desc: '行程途中' },
|
||||
{ text: '已完成', desc: '行程结束' },
|
||||
],
|
||||
}
|
||||
|
||||
/** 状态 → Steps active 索引 */
|
||||
const STATUS_TO_STEP_INDEX: Record<TaskStatus, number> = {
|
||||
open: 0,
|
||||
progress: 1,
|
||||
done: 2,
|
||||
cancelled: -1,
|
||||
}
|
||||
|
||||
/* ==============================
|
||||
辅助函数
|
||||
============================== */
|
||||
|
||||
function getStatusBarH(): number {
|
||||
try {
|
||||
return Taro.getSystemInfoSync().statusBarHeight || 20
|
||||
} catch {
|
||||
return 20
|
||||
}
|
||||
}
|
||||
|
||||
function getSafeBottom(): number {
|
||||
try {
|
||||
const info = Taro.getSystemInfoSync()
|
||||
return (info.screenHeight - info.safeArea!.bottom) || 0
|
||||
} catch {
|
||||
return 0
|
||||
}
|
||||
}
|
||||
|
||||
/** 获取当前任务类型对应的状态文案 */
|
||||
function getStatusLabel(task: Task): string {
|
||||
if (task.type === 'secondhand') return SECONDHAND_STATUS_LABEL[task.status]
|
||||
return STATUS_LABEL[task.status]
|
||||
}
|
||||
|
||||
/* ==============================
|
||||
页面组件
|
||||
============================== */
|
||||
|
||||
export default function TaskDetail() {
|
||||
const id = String(Taro.getCurrentInstance().router?.params?.id || '')
|
||||
|
||||
/* ---- 数据 ---- */
|
||||
const task = useMemo(() => tasks.find((t) => t.id === id), [id])
|
||||
|
||||
const statusBarH = useMemo(getStatusBarH, [])
|
||||
const safeBottom = useMemo(getSafeBottom, [])
|
||||
|
||||
const stepsConfig = useMemo<Step[]>(() => {
|
||||
if (!task) return []
|
||||
return STATUS_STEPS_MAP[task.type] || []
|
||||
}, [task])
|
||||
|
||||
const activeStepIndex = useMemo(() => {
|
||||
if (!task) return 0
|
||||
return STATUS_TO_STEP_INDEX[task.status] ?? 0
|
||||
}, [task])
|
||||
|
||||
/** 推荐任务：同类型优先，不足时补充其他类型（排除当前任务），最多 3 条 */
|
||||
const recommendedTasks = useMemo(() => {
|
||||
if (!task) return []
|
||||
const sameType = tasks.filter(
|
||||
(t) => t.type === task.type && t.id !== task.id,
|
||||
)
|
||||
if (sameType.length >= 3) return sameType.slice(0, 3)
|
||||
const others = tasks.filter(
|
||||
(t) => t.id !== task.id && t.type !== task.type,
|
||||
)
|
||||
return [...sameType, ...others].slice(0, 3)
|
||||
}, [task])
|
||||
|
||||
/* ---- 事件 ---- */
|
||||
const handleBack = useCallback(() => {
|
||||
Taro.navigateBack()
|
||||
}, [])
|
||||
|
||||
const handleNavigateToDetail = useCallback((targetId: string) => {
|
||||
Taro.navigateTo({ url: `/pages/task-detail/index?id=${targetId}` })
|
||||
}, [])
|
||||
|
||||
const handlePrimaryAction = useCallback(() => {
|
||||
Taro.showToast({ title: '功能开发中', icon: 'none' })
|
||||
}, [])
|
||||
|
||||
const handleContact = useCallback(() => {
|
||||
Taro.showToast({ title: '联系功能开发中', icon: 'none' })
|
||||
}, [])
|
||||
|
||||
/* ---- 空状态 ---- */
|
||||
if (!task) {
|
||||
return (
|
||||
<View className='task-detail-page'>
|
||||
<View className='empty-state'>任务不存在</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
/* ---- 底部主按钮文案 ---- */
|
||||
const getPrimaryBtnText = (): string => {
|
||||
if (task.status === 'done') return '已完成'
|
||||
if (task.status === 'cancelled') return '已取消'
|
||||
if (task.status === 'open') {
|
||||
return task.type === 'activity' ? '报名参加' : '接单'
|
||||
}
|
||||
// progress
|
||||
return '标记完成'
|
||||
}
|
||||
|
||||
const primaryBtnDisabled =
|
||||
task.status === 'done' || task.status === 'cancelled'
|
||||
|
||||
/* ---- 类型信息渲染函数 ---- */
|
||||
|
||||
const renderExpressInfo = () => (
|
||||
<View className='content-card'>
|
||||
<View className='type-status-row'>
|
||||
<Text className={`type-badge ${TYPE_BADGE_CLASS[task.type]}`}>
|
||||
{TYPE_BADGE_LABEL[task.type]}
|
||||
</Text>
|
||||
<Text className={`status-badge status-${task.status}`}>
|
||||
{getStatusLabel(task)}
|
||||
</Text>
|
||||
</View>
|
||||
<Text className='detail-title'>{task.title}</Text>
|
||||
<Text className='detail-desc'>{task.desc}</Text>
|
||||
<Text className='reward-large'>{task.reward}</Text>
|
||||
<View className='detail-divider' />
|
||||
<View className='info-row'>
|
||||
<Text className='info-icon'>📍</Text>
|
||||
<Text>取件地点：{task.location}</Text>
|
||||
</View>
|
||||
{task.deadline && (
|
||||
<View className='info-row'>
|
||||
<Text className='info-icon'>⏰</Text>
|
||||
<Text>截止时间：{task.deadline}</Text>
|
||||
</View>
|
||||
)}
|
||||
<View className='info-row'>
|
||||
<Text className='info-icon'>🕐</Text>
|
||||
<Text>发布时间：{task.time}</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
|
||||
const renderSecondhandInfo = () => (
|
||||
<View className='content-card'>
|
||||
{/* 商品图片 */}
|
||||
{task.images && task.images.length > 0 && (
|
||||
<>
|
||||
{task.images.length === 1 ? (
|
||||
<View className='single-image-wrap'>
|
||||
<VantImage
|
||||
src={task.images[0]}
|
||||
fit='cover'
|
||||
width='100%'
|
||||
height={420}
|
||||
radius={12}
|
||||
/>
|
||||
</View>
|
||||
) : (
|
||||
<Swiper
|
||||
className='image-gallery'
|
||||
autoPlay={0}
|
||||
loop
|
||||
paginationVisible
|
||||
paginationColor='#1989fa'
|
||||
height={420}
|
||||
>
|
||||
{task.images.map((img, idx) => (
|
||||
<SwiperItem key={idx}>
|
||||
<VantImage
|
||||
src={img}
|
||||
fit='cover'
|
||||
width='100%'
|
||||
height={420}
|
||||
/>
|
||||
</SwiperItem>
|
||||
))}
|
||||
</Swiper>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
<View className='type-status-row'>
|
||||
<Text className={`type-badge ${TYPE_BADGE_CLASS[task.type]}`}>
|
||||
{TYPE_BADGE_LABEL[task.type]}
|
||||
</Text>
|
||||
<Text className={`status-badge status-${task.status}`}>
|
||||
{getStatusLabel(task)}
|
||||
</Text>
|
||||
</View>
|
||||
<Text className='detail-title'>{task.title}</Text>
|
||||
<Text className='detail-desc'>{task.desc}</Text>
|
||||
|
||||
{task.tags && task.tags.length > 0 && (
|
||||
<View className='tag-row'>
|
||||
{task.tags.map((t) => (
|
||||
<Tag key={t} type='primary' plain>
|
||||
{t}
|
||||
</Tag>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
|
||||
<Text className='reward-large'>{task.reward}</Text>
|
||||
|
||||
<View className='detail-divider' />
|
||||
<View className='info-row'>
|
||||
<Text className='info-icon'>📍</Text>
|
||||
<Text>交易地点：{task.location}</Text>
|
||||
</View>
|
||||
<View className='info-row'>
|
||||
<Text className='info-icon'>🕐</Text>
|
||||
<Text>发布时间：{task.time}</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
|
||||
const renderHelpInfo = () => (
|
||||
<View className='content-card'>
|
||||
<View className='type-status-row'>
|
||||
<Text className={`type-badge ${TYPE_BADGE_CLASS[task.type]}`}>
|
||||
{TYPE_BADGE_LABEL[task.type]}
|
||||
</Text>
|
||||
{task.tags && task.tags.length > 0 && (
|
||||
<View className='tag-row' style={{ marginTop: 0 }}>
|
||||
{task.tags.map((t) => (
|
||||
<Tag key={t} type='warning' size='medium'>
|
||||
{t}
|
||||
</Tag>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
<Text className={`status-badge status-${task.status}`}>
|
||||
{getStatusLabel(task)}
|
||||
</Text>
|
||||
</View>
|
||||
<Text className='detail-title'>{task.title}</Text>
|
||||
<Text className='detail-desc'>{task.desc}</Text>
|
||||
<Text className='reward-large'>{task.reward}</Text>
|
||||
<View className='detail-divider' />
|
||||
<View className='info-row'>
|
||||
<Text className='info-icon'>📍</Text>
|
||||
<Text>帮助地点：{task.location}</Text>
|
||||
</View>
|
||||
<View className='info-row'>
|
||||
<Text className='info-icon'>🕐</Text>
|
||||
<Text>发布时间：{task.time}</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
|
||||
const renderActivityInfo = () => {
|
||||
const progress = task.maxParticipants
|
||||
? Math.round(
|
||||
((task.participants || 0) / task.maxParticipants) * 100,
|
||||
)
|
||||
: 0
|
||||
|
||||
return (
|
||||
<View className='content-card'>
|
||||
{/* 活动图片（可选） */}
|
||||
{task.images && task.images.length > 0 && (
|
||||
<>
|
||||
{task.images.length === 1 ? (
|
||||
<View className='single-image-wrap'>
|
||||
<VantImage
|
||||
src={task.images[0]}
|
||||
fit='cover'
|
||||
width='100%'
|
||||
height={360}
|
||||
radius={12}
|
||||
/>
|
||||
</View>
|
||||
) : (
|
||||
<Swiper
|
||||
className='image-gallery'
|
||||
autoPlay={0}
|
||||
loop
|
||||
paginationVisible
|
||||
paginationColor='#1989fa'
|
||||
height={360}
|
||||
>
|
||||
{task.images.map((img, idx) => (
|
||||
<SwiperItem key={idx}>
|
||||
<VantImage
|
||||
src={img}
|
||||
fit='cover'
|
||||
width='100%'
|
||||
height={360}
|
||||
/>
|
||||
</SwiperItem>
|
||||
))}
|
||||
</Swiper>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
<View className='type-status-row'>
|
||||
<Text className={`type-badge ${TYPE_BADGE_CLASS[task.type]}`}>
|
||||
{TYPE_BADGE_LABEL[task.type]}
|
||||
</Text>
|
||||
<Text className={`status-badge status-${task.status}`}>
|
||||
{getStatusLabel(task)}
|
||||
</Text>
|
||||
</View>
|
||||
<Text className='detail-title'>{task.title}</Text>
|
||||
<Text className='detail-desc'>{task.desc}</Text>
|
||||
|
||||
{/* 参与人数 + 进度条 */}
|
||||
<View className='progress-section'>
|
||||
<View className='progress-label'>
|
||||
<Text className='progress-text'>
|
||||
👥 已报名 {task.participants || 0}/{task.maxParticipants || 0} 人
|
||||
</Text>
|
||||
<Text className='progress-percent'>{progress}%</Text>
|
||||
</View>
|
||||
<View className='progress-track'>
|
||||
<View
|
||||
className='progress-bar'
|
||||
style={{ width: `${progress}%` }}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{task.tags && task.tags.length > 0 && (
|
||||
<View className='tag-row'>
|
||||
{task.tags.map((t) => (
|
||||
<Tag key={t} type='primary' plain>
|
||||
{t}
|
||||
</Tag>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View className='detail-divider' />
|
||||
<View className='info-row'>
|
||||
<Text className='info-icon'>📍</Text>
|
||||
<Text>活动地点：{task.location}</Text>
|
||||
</View>
|
||||
<View className='info-row'>
|
||||
<Text className='info-icon'>🕐</Text>
|
||||
<Text>发布时间：{task.time}</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const renderCarpoolInfo = () => {
|
||||
const remainingSeats =
|
||||
task.participants != null && task.maxParticipants != null
|
||||
? task.maxParticipants - task.participants
|
||||
: null
|
||||
|
||||
return (
|
||||
<View className='content-card'>
|
||||
<View className='type-status-row'>
|
||||
<Text className={`type-badge ${TYPE_BADGE_CLASS[task.type]}`}>
|
||||
{TYPE_BADGE_LABEL[task.type]}
|
||||
</Text>
|
||||
<Text className={`status-badge status-${task.status}`}>
|
||||
{getStatusLabel(task)}
|
||||
</Text>
|
||||
</View>
|
||||
<Text className='detail-title'>{task.title}</Text>
|
||||
<Text className='detail-desc'>{task.desc}</Text>
|
||||
|
||||
<View className='reward-seat-row'>
|
||||
<Text className='reward-large' style={{ marginTop: 0 }}>
|
||||
{task.reward}
|
||||
</Text>
|
||||
{remainingSeats !== null && (
|
||||
<Text className='seats-info'>
|
||||
🚗 余{remainingSeats}座
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View className='detail-divider' />
|
||||
<View className='info-row'>
|
||||
<Text className='info-icon'>📍</Text>
|
||||
<Text>出发地点：{task.location}</Text>
|
||||
</View>
|
||||
{task.deadline && (
|
||||
<View className='info-row'>
|
||||
<Text className='info-icon'>⏰</Text>
|
||||
<Text>出发时间：{task.deadline}</Text>
|
||||
</View>
|
||||
)}
|
||||
<View className='info-row'>
|
||||
<Text className='info-icon'>🕐</Text>
|
||||
<Text>发布时间：{task.time}</Text>
|
||||
</View>
|
||||
|
||||
{task.tags && task.tags.length > 0 && (
|
||||
<View className='tag-row'>
|
||||
{task.tags.map((t) => (
|
||||
<Tag key={t} type='primary' plain>
|
||||
{t}
|
||||
</Tag>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const renderTaskInfo = () => {
|
||||
switch (task.type) {
|
||||
case 'express':
|
||||
return renderExpressInfo()
|
||||
case 'secondhand':
|
||||
return renderSecondhandInfo()
|
||||
case 'help':
|
||||
return renderHelpInfo()
|
||||
case 'activity':
|
||||
return renderActivityInfo()
|
||||
case 'carpool':
|
||||
return renderCarpoolInfo()
|
||||
default:
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- 主渲染 ---- */
|
||||
return (
|
||||
<View className='task-detail-page'>
|
||||
{/* ===== 自定义导航栏 ===== */}
|
||||
<View
|
||||
className='detail-nav'
|
||||
style={{ paddingTop: `${statusBarH}px` }}
|
||||
>
|
||||
<View className='nav-content'>
|
||||
<View className='nav-back' onClick={handleBack}>
|
||||
<Icon name='arrow-left' size={22} color='#323233' />
|
||||
</View>
|
||||
<Text className='nav-title'>任务详情</Text>
|
||||
<View className='nav-placeholder' />
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 导航栏占位 */}
|
||||
<View style={{ height: `${statusBarH + 44}px` }} />
|
||||
|
||||
{/* ===== 可滚动内容 ===== */}
|
||||
<ScrollView
|
||||
className='detail-scroll'
|
||||
scrollY
|
||||
enhanced
|
||||
showScrollbar={false}
|
||||
>
|
||||
{/* 已取消提示条 */}
|
||||
{task.status === 'cancelled' && (
|
||||
<View className='cancelled-banner'>
|
||||
<Text className='cancelled-icon'>⚠️</Text>
|
||||
<Text className='cancelled-text'>
|
||||
该任务已取消，不再接受新的操作
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Steps 进度条 */}
|
||||
{stepsConfig.length > 0 && (
|
||||
<View className='content-card steps-section'>
|
||||
<Steps
|
||||
steps={stepsConfig}
|
||||
active={
|
||||
activeStepIndex >= 0 ? activeStepIndex : -1
|
||||
}
|
||||
direction='horizontal'
|
||||
activeColor='#1989fa'
|
||||
activeIcon='checked'
|
||||
inactiveIcon='checked'
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 类型相关信息 */}
|
||||
{renderTaskInfo()}
|
||||
|
||||
{/* 联系发布者按钮（非已取消状态） */}
|
||||
{task.status !== 'cancelled' && (
|
||||
<View className='action-section' onClick={handleContact}>
|
||||
<View className='action-contact-btn'>
|
||||
<Icon name='chat-o' size={20} color='#1989fa' />
|
||||
<Text style={{ marginLeft: '8px' }}>联系发布者</Text>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 发布者信息卡 */}
|
||||
<View className='content-card publisher-card'>
|
||||
<Image
|
||||
className='pub-avatar'
|
||||
src={task.publisher.avatar}
|
||||
mode='aspectFill'
|
||||
/>
|
||||
<View className='pub-info'>
|
||||
<Text className='pub-name'>{task.publisher.name}</Text>
|
||||
<Text className='pub-time'>发布于 {task.time}</Text>
|
||||
</View>
|
||||
<View className='pub-contact-btn'>
|
||||
<Button
|
||||
size='small'
|
||||
plain
|
||||
type='primary'
|
||||
round
|
||||
onClick={handleContact}
|
||||
>
|
||||
联系
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 推荐任务区 */}
|
||||
<View className='recommend-section'>
|
||||
<Text className='section-title'>推荐任务</Text>
|
||||
{recommendedTasks.length > 0 ? (
|
||||
recommendedTasks.map((t) => (
|
||||
<View
|
||||
key={t.id}
|
||||
className='recommend-card-wrap'
|
||||
onClick={() => handleNavigateToDetail(t.id)}
|
||||
>
|
||||
<TaskCard task={t} />
|
||||
</View>
|
||||
))
|
||||
) : (
|
||||
<Text className='empty-recommend'>暂无推荐任务</Text>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* 底部安全区占位 */}
|
||||
<View className='scroll-bottom-safe' />
|
||||
</ScrollView>
|
||||
|
||||
{/* ===== 底部操作栏 ===== */}
|
||||
<View
|
||||
className='bottom-action-bar'
|
||||
style={{ paddingBottom: `${safeBottom}px` }}
|
||||
>
|
||||
<View className='cta-button'>
|
||||
<Button
|
||||
type='primary'
|
||||
round
|
||||
block
|
||||
disabled={primaryBtnDisabled}
|
||||
onClick={handlePrimaryAction}
|
||||
>
|
||||
{getPrimaryBtnText()}
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
@@ -46,7 +46,7 @@ export default function Tasks() {
|
||||
}, [activeFilter, searchValue])
|
||||
|
||||
const handleTaskClick = (id: string) => {
|
||||
Taro.showToast({ title: '任务详情即将上线', icon: 'none' })
|
||||
Taro.navigateTo({ url: `/pages/task-detail/index?id=${id}` })
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user