97 lines
4.6 KiB
TypeScript
97 lines
4.6 KiB
TypeScript
import { View, Text, Image } from '@tarojs/components'
|
||
import Taro from '@tarojs/taro'
|
||
import './index.scss'
|
||
import { useThemeContext } from '../../context/ThemeContext'
|
||
import { useSafeArea } from '../../hooks/useSafeArea'
|
||
import { useStatusBar } from '../../hooks/useStatusBar'
|
||
import ThemedPageMeta from '../../components/ThemedPageMeta'
|
||
import { assetUrl } from '../../utils/asset'
|
||
|
||
const FAQ_ITEMS = [
|
||
{ q: '定制周期需要多久？', a: '通常下单后3-5个工作日内发货，批量订单（50件以上）可能需要7-10个工作日。' },
|
||
{ q: '可以修改设计稿吗？', a: '生产前可随时在设计工作台修改。确认下单后进入排队生产阶段，不可再修改。' },
|
||
{ q: '支持退款/售后吗？', a: '非质量问题定制商品不支持7天无理由退款。如收到商品有破损或雕刻缺陷，请在签收48小时内联系客服处理。' },
|
||
{ q: '可以开发票吗？', a: '支持开具增值税普通发票。请在下单时填写发票信息，或联系客服补开。' }
|
||
]
|
||
|
||
export default function ServicePage() {
|
||
const { theme, resolvedTheme } = useThemeContext()
|
||
const safe = useSafeArea()
|
||
useStatusBar(resolvedTheme)
|
||
|
||
return (
|
||
<View className={`theme-${resolvedTheme}`} style={{ minHeight: '100vh' }}>
|
||
<ThemedPageMeta />
|
||
<View className='service-page'>
|
||
<View className='page-header service-header' style={{ paddingTop: `${safe.headerPaddingTop}px` }}>
|
||
<Text className='page-title'>联系客服</Text>
|
||
</View>
|
||
|
||
{/* 客服入口 */}
|
||
<View className='service-hero surface-card'>
|
||
<Image className='service-hero-icon' src={assetUrl('/icon/电话.png')} mode='aspectFit' />
|
||
<Text className='service-title'>智绘微刻客服中心</Text>
|
||
<Text className='service-desc'>工作日 09:00 - 18:00 在线为您服务</Text>
|
||
<View className='btn-primary service-btn' onTap={() => Taro.showToast({ title: '跳转客服会话', icon: 'none' })}>
|
||
<Text>发起咨询</Text>
|
||
</View>
|
||
</View>
|
||
|
||
{/* 联系方式 */}
|
||
<View className='mt-20'>
|
||
<Text className='section-title'>联系方式</Text>
|
||
<View className='contact-list surface-card'>
|
||
<View className='contact-item'>
|
||
<Image className='contact-icon-img' src={assetUrl('/icon/电话.png')} mode='aspectFit' />
|
||
<View className='contact-info'>
|
||
<Text className='contact-label'>客服电话</Text>
|
||
<Text className='contact-value'>400-XXX-XXXX</Text>
|
||
</View>
|
||
</View>
|
||
<View className='contact-item contact-item-link' onTap={() => Taro.setClipboardData({ data: 'smart_engraving' })}>
|
||
<Image className='contact-icon-img' src={assetUrl('/icon/词云生成.png')} mode='aspectFit' />
|
||
<View className='contact-info'>
|
||
<Text className='contact-label'>客服微信</Text>
|
||
<Text className='contact-value'>smart_engraving（点击复制）</Text>
|
||
</View>
|
||
<Text className='contact-arrow'>›</Text>
|
||
</View>
|
||
<View className='contact-item'>
|
||
<Image className='contact-icon-img' src={assetUrl('/icon/使用帮助.png')} mode='aspectFit' />
|
||
<View className='contact-info'>
|
||
<Text className='contact-label'>商务邮箱</Text>
|
||
<Text className='contact-value'>biz@smart-engraving.com</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
|
||
{/* 常见问题 */}
|
||
<View className='mt-20'>
|
||
<Text className='section-title'>常见问题</Text>
|
||
{FAQ_ITEMS.map((item, idx) => (
|
||
<View key={idx} className='faq-card surface-card'>
|
||
<Text className='faq-q'>Q: {item.q}</Text>
|
||
<Text className='faq-a'>A: {item.a}</Text>
|
||
</View>
|
||
))}
|
||
</View>
|
||
|
||
{/* B端专属 */}
|
||
<View className='enterprise-service surface-card mt-20 mb-20'>
|
||
<View className='flex-center'>
|
||
<Image className='enterprise-icon' src={assetUrl('/icon/企业批量定制.png')} mode='aspectFit' />
|
||
<Text className='enterprise-title'>企业专属客户经理</Text>
|
||
</View>
|
||
<Text className='enterprise-desc'>批量订单（50件以上）享专属报价、优先排产、专人对接</Text>
|
||
<View className='btn-secondary enterprise-btn'>
|
||
<Text>预约企业咨询</Text>
|
||
</View>
|
||
</View>
|
||
|
||
<View style={{ height: '80rpx' }} />
|
||
</View>
|
||
</View>
|
||
)
|
||
}
|