You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
230 lines
8.8 KiB
230 lines
8.8 KiB
/** |
|
* 订单详情页面 |
|
*/ |
|
import { View, Text, Image } from '@tarojs/components' |
|
import Taro, { useLoad, useRouter } from '@tarojs/taro' |
|
import { useState } from 'react' |
|
import { ArrowDown } from '@taroify/icons' |
|
import './index.scss' |
|
|
|
// 使用本地图片资源 |
|
const phoneIcon = require('../../pageScan/startTable/images/phone.png') |
|
const locationIcon = require('../../assets/icon/locationIcon.png') |
|
const tableBgImg = require('../../pageScan/startTable/images/startBiliardCardBg.png') |
|
|
|
const OrderDetail = () => { |
|
const router = useRouter() |
|
const { orderId } = router.params as { orderId?: string } |
|
const [expanded, setExpanded] = useState(false) // 订单详情是否展开 |
|
const [couponExpanded, setCouponExpanded] = useState(false) // 优惠券详情是否展开 |
|
const [priceExpanded, setPriceExpanded] = useState(false) // 收费标准详情是否展开 |
|
|
|
useLoad(() => { |
|
console.log('订单详情页面加载，订单ID:', orderId) |
|
}) |
|
|
|
// 拨打电话 |
|
const handlePhoneCall = () => { |
|
Taro.makePhoneCall({ |
|
phoneNumber: '100-666-XXXX', |
|
}).catch((err) => { |
|
console.error('拨打电话失败:', err) |
|
}) |
|
} |
|
|
|
// 切换展开/收起 |
|
const handleToggleExpand = () => { |
|
setExpanded(!expanded) |
|
} |
|
|
|
return ( |
|
<View className="order-detail-page"> |
|
{/* 内容区域 */} |
|
<View className="content-area"> |
|
{/* 台球桌信息卡片 */} |
|
<View className="table-card" style={{ backgroundImage: `url(${tableBgImg})` }}> |
|
{/* 顶部：类型和店名 */} |
|
<View className="card-header"> |
|
<Text className="table-type">中式台球</Text> |
|
<View className="phone-box" onClick={handlePhoneCall}> |
|
<Image className="phone-icon" src={phoneIcon} mode="aspectFit" /> |
|
<Text className="phone-text">联系店长</Text> |
|
</View> |
|
</View> |
|
|
|
{/* 台球桌标题和使用状态 */} |
|
<View className="table-title-row"> |
|
<Text className="table-title">来力.山岩-A03/3号球桌</Text> |
|
<Text className="table-status">已完成</Text> |
|
</View> |
|
|
|
{/* 位置信息 */} |
|
<View className="location-info"> |
|
<Image className="location-icon" src={locationIcon} mode="aspectFit" /> |
|
<Text className="location-text">北京黑八大师联盟球厅店</Text> |
|
</View> |
|
</View> |
|
|
|
{/* 开台订单信息卡片 */} |
|
<View className="order-info-card"> |
|
{/* 顶部：开台方式和详情按钮 */} |
|
<View className="order-header" onClick={handleToggleExpand}> |
|
<View className="order-tag"> |
|
<Text className="tag-text">开台方式</Text> |
|
</View> |
|
<View className="detail-btn"> |
|
<Text className="detail-text">详情</Text> |
|
<ArrowDown |
|
className={`arrow-icon ${expanded ? 'expanded' : ''}`} |
|
size="16px" |
|
color="#646566" |
|
/> |
|
</View> |
|
</View> |
|
|
|
{/* 订单统计 */} |
|
<View className="order-stats"> |
|
<View className="stat-item"> |
|
<Text className="stat-value">1小时56分</Text> |
|
<Text className="stat-label">已消费时长</Text> |
|
</View> |
|
<View className="stat-item"> |
|
<Text className="stat-value">100.00元</Text> |
|
<Text className="stat-label">已消费金额</Text> |
|
</View> |
|
</View> |
|
|
|
{/* 收费规则 */} |
|
<View className="pricing-rules"> |
|
<View className="rules-content"> |
|
<Text className="rules-title">收费规则</Text> |
|
<View className="price-row"> |
|
<View className="price-item"> |
|
<Text className="price-label">价格：</Text> |
|
<Text className="price-value">90.00元/小时</Text> |
|
</View> |
|
<View className="price-item"> |
|
<Text className="price-label">折扣价：</Text> |
|
<Text className="price-value">80.00元/小时</Text> |
|
</View> |
|
</View> |
|
</View> |
|
</View> |
|
</View> |
|
|
|
{/* 展开的详细信息 */} |
|
{expanded && ( |
|
<> |
|
{/* 支付信息卡片 */} |
|
<View className="info-card"> |
|
<Text className="card-title">支付信息</Text> |
|
|
|
<View className="info-row"> |
|
<Text className="info-label">在线总支付：</Text> |
|
<View className="info-value-box"> |
|
<Text className="info-desc">0元</Text> |
|
</View> |
|
</View> |
|
|
|
<View className="info-row"> |
|
<Text className="info-label">押金</Text> |
|
<Text className="info-value">0元</Text> |
|
</View> |
|
|
|
<View className="info-row"> |
|
<Text className="info-label">订单原价</Text> |
|
<Text className="info-value">92.80元</Text> |
|
</View> |
|
|
|
{/* 优惠券抵扣 - 可展开 */} |
|
<View className="info-row expandable" onClick={() => setCouponExpanded(!couponExpanded)}> |
|
<Text className="info-label">优惠券抵扣</Text> |
|
<View className="info-right"> |
|
<Text className="info-desc">不可用</Text> |
|
<Text className="info-value">-96.00元</Text> |
|
<ArrowDown |
|
className={`arrow-icon ${couponExpanded ? 'expanded' : ''}`} |
|
size="16px" |
|
color="#646566" |
|
/> |
|
</View> |
|
</View> |
|
|
|
{/* 优惠券展开内容 */} |
|
{couponExpanded && ( |
|
<View className="expand-content coupon"> |
|
<Text className="expand-text">美团：2小时通用券（新人奖励）</Text> |
|
<Text className="expand-value">-96.00元</Text> |
|
</View> |
|
)} |
|
|
|
<View className="info-row total"> |
|
<Text className="info-label">待结算：</Text> |
|
<Text className="info-value">92.8元</Text> |
|
</View> |
|
</View> |
|
|
|
{/* 开台信息卡片 */} |
|
<View className="info-card"> |
|
<Text className="card-title">开台信息</Text> |
|
|
|
<View className="info-row"> |
|
<Text className="info-label">门店信息</Text> |
|
<Text className="info-value">XXXXXX店</Text> |
|
</View> |
|
|
|
<View className="info-row"> |
|
<Text className="info-label">桌台信息</Text> |
|
<Text className="info-value">中式台球 来力.山岩-A03/3号球桌</Text> |
|
</View> |
|
|
|
<View className="info-row"> |
|
<Text className="info-label">开始时间</Text> |
|
<Text className="info-value">2025-01-01 00:00:00</Text> |
|
</View> |
|
|
|
<View className="info-row"> |
|
<Text className="info-label">使用时长</Text> |
|
<Text className="info-value">1小时56分</Text> |
|
</View> |
|
|
|
<View className="info-row"> |
|
<Text className="info-label">订单编号</Text> |
|
<Text className="info-value">987654321012345678</Text> |
|
</View> |
|
|
|
{/* 收费标准 - 可展开 */} |
|
<View className="info-row expandable" onClick={() => setPriceExpanded(!priceExpanded)}> |
|
<Text className="info-label">收费标准</Text> |
|
<View className="info-right"> |
|
<Text className="info-value">80元/小时</Text> |
|
<ArrowDown |
|
className={`arrow-icon ${priceExpanded ? 'expanded' : ''}`} |
|
size="16px" |
|
color="#646566" |
|
/> |
|
</View> |
|
</View> |
|
|
|
{/* 收费标准展开内容 */} |
|
{priceExpanded && ( |
|
<View className="expand-content"> |
|
<Text className="expand-text">1分钟以内不计费，超过1分钟按6.67元/5分钟计费</Text> |
|
<Text className="expand-text">• 00:00-11:00 原价90元/小时，折扣价80元/小时</Text> |
|
<Text className="expand-text">• 11:00-24:00 原价100元/小时，折扣价90元/小时</Text> |
|
</View> |
|
)} |
|
|
|
<View className="info-row"> |
|
<Text className="info-label">支付方式</Text> |
|
<Text className="info-value">微信支付</Text> |
|
</View> |
|
</View> |
|
</> |
|
)} |
|
</View> |
|
</View> |
|
) |
|
} |
|
|
|
export default OrderDetail
|
|
|