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.
250 lines
10 KiB
250 lines
10 KiB
/** |
|
* 关台页面 |
|
*/ |
|
import { View, Text, Image } from '@tarojs/components' |
|
import Taro, { useLoad, useRouter } from '@tarojs/taro' |
|
import { useState } from 'react' |
|
import { observer } from 'mobx-react' |
|
import { ArrowDown } from '@taroify/icons' |
|
import FooterButtons from './components/FooterButtons' |
|
import { tableStore } from '../../store' |
|
import './index.scss' |
|
|
|
// 使用本地图片资源 |
|
const phoneIcon = require('../startTable/images/phone.png') |
|
const locationIcon = require('../../assets/icon/locationIcon.png') |
|
|
|
const CloseTable = observer(() => { |
|
const router = useRouter() |
|
const { type = 'owner' } = router.params as { type?: 'owner' | 'guest' } // owner: 开台人员, guest: 非开台人 |
|
const [expanded, setExpanded] = useState(false) // 订单详情是否展开 |
|
const [couponExpanded, setCouponExpanded] = useState(false) // 优惠券详情是否展开 |
|
const [priceExpanded, setPriceExpanded] = useState(false) // 收费标准详情是否展开 |
|
|
|
// 从路由参数获取设备信息和操作记录ID，如果没有则从 store 获取 |
|
const grpSn = tableStore.getGrpSn(router.params.grpSn) |
|
const operationId = tableStore.getOperationId(Number(router.params.operationId)) |
|
|
|
const scanInfo = tableStore.scanInfo |
|
const opInfo = scanInfo?.opInfo |
|
const priceInfo = scanInfo?.price |
|
|
|
useLoad(() => { |
|
console.log('关台页面加载，类型:', type, '设备编码:', grpSn, '操作记录ID:', operationId) |
|
if (grpSn) tableStore.setCurrentGrpSn(grpSn) |
|
if (operationId) tableStore.setCurrentOperationId(operationId) |
|
}) |
|
|
|
// 拨打电话 |
|
const handlePhoneCall = () => { |
|
Taro.makePhoneCall({ |
|
phoneNumber: '100-666-XXXX', |
|
}).catch((err) => { |
|
console.error('拨打电话失败:', err) |
|
}) |
|
} |
|
|
|
// 切换展开/收起 |
|
const handleToggleExpand = () => { |
|
setExpanded(!expanded) |
|
} |
|
|
|
return ( |
|
<View className="close-table-page"> |
|
{/* 内容区域 */} |
|
<View className="content-area"> |
|
{/* 台球桌信息卡片 */} |
|
<View className="table-card"> |
|
{/* 顶部：类型和店名 */} |
|
<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">{scanInfo?.tableInfo?.name || '--'}</Text> |
|
<Text className="table-status">{scanInfo?.tableInfo?.statusDescription || '使用中...'}</Text> |
|
</View> |
|
|
|
{/* 位置信息 */} |
|
<View className="location-info"> |
|
<Image className="location-icon" src={locationIcon} mode="aspectFit" /> |
|
<Text className="location-text">{scanInfo?.shopName || '--'}</Text> |
|
</View> |
|
</View> |
|
|
|
{/* 开台订单信息卡片 */} |
|
<View className="order-info-card"> |
|
{/* 顶部：开台方式和详情按钮 */} |
|
<View className="order-header" onClick={handleToggleExpand}> |
|
<View className="order-tag"> |
|
<Text className="tag-text">{opInfo?.ctrlTypeDescription || '开台方式'}</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">{opInfo?.usedTime || '--'}</Text> |
|
<Text className="stat-label">已消费时长</Text> |
|
</View> |
|
<View className="stat-item"> |
|
<Text className="stat-value">{opInfo ? `${opInfo.currentAmount.toFixed(2)}元` : '--'}</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">{priceInfo ? `${priceInfo.standard.toFixed(2)}元/小时` : '--'}</Text> |
|
</View> |
|
{priceInfo && priceInfo.memberPrice > 0 && ( |
|
<View className="price-item"> |
|
<Text className="price-label">折扣价：</Text> |
|
<Text className="price-value">{priceInfo.memberPrice.toFixed(2)}元/小时</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">{opInfo ? `${opInfo.deposit.toFixed(2)}元` : '0元'}</Text> |
|
</View> |
|
</View> |
|
|
|
<View className="info-row"> |
|
<Text className="info-label">押金</Text> |
|
<Text className="info-value">{opInfo ? `${opInfo.deposit.toFixed(2)}元${opInfo.depositStatus ? `（${opInfo.depositStatus}）` : ''}` : '--'}</Text> |
|
</View> |
|
|
|
<View className="info-row"> |
|
<Text className="info-label">订单原价</Text> |
|
<Text className="info-value">{opInfo ? `${opInfo.currentAmount.toFixed(2)}元` : '--'}</Text> |
|
</View> |
|
|
|
{/* 优惠券抵扣 - 可展开 */} |
|
<View className="info-row expandable" onClick={() => setCouponExpanded(!couponExpanded)}> |
|
<Text className="info-label">优惠券抵扣</Text> |
|
<View className="info-right"> |
|
<Text className="info-desc">{opInfo && opInfo.discountAmount > 0 ? '已使用' : '不可用'}</Text> |
|
<Text className="info-value">{opInfo && opInfo.discountAmount > 0 ? `-${opInfo.discountAmount.toFixed(2)}元` : '-0.00元'}</Text> |
|
<ArrowDown |
|
className={`arrow-icon ${couponExpanded ? 'expanded' : ''}`} |
|
size="16px" |
|
color="#646566" |
|
/> |
|
</View> |
|
</View> |
|
|
|
{/* 优惠券展开内容 */} |
|
{couponExpanded && ( |
|
<View className="expand-content coupon"> |
|
{opInfo && opInfo.discountAmount > 0 |
|
? <Text className="expand-text">优惠金额：{opInfo.discountAmount.toFixed(2)}元</Text> |
|
: <Text className="expand-text">暂无优惠券</Text> |
|
} |
|
</View> |
|
)} |
|
|
|
<View className="info-row total"> |
|
<Text className="info-label">待结算：</Text> |
|
<Text className="info-value">{opInfo ? `${opInfo.payableAmount.toFixed(2)}元` : '--'}</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">{scanInfo?.shopName || '--'}</Text> |
|
</View> |
|
|
|
<View className="info-row"> |
|
<Text className="info-label">桌台信息</Text> |
|
<Text className="info-value">{scanInfo?.tableInfo?.name || '--'}</Text> |
|
</View> |
|
|
|
<View className="info-row"> |
|
<Text className="info-label">开始时间</Text> |
|
<Text className="info-value">{opInfo?.startTime || '--'}</Text> |
|
</View> |
|
|
|
<View className="info-row"> |
|
<Text className="info-label">使用时长</Text> |
|
<Text className="info-value">{opInfo?.usedTime || '--'}</Text> |
|
</View> |
|
|
|
<View className="info-row"> |
|
<Text className="info-label">订单编号</Text> |
|
<Text className="info-value">{opInfo?.orderNo || '--'}</Text> |
|
</View> |
|
|
|
{/* 收费标准 - 可展开 */} |
|
<View className="info-row expandable" onClick={() => setPriceExpanded(!priceExpanded)}> |
|
<Text className="info-label">收费标准</Text> |
|
<View className="info-right"> |
|
<Text className="info-value">{priceInfo ? `${priceInfo.currentPrice.toFixed(2)}元/小时` : '--'}</Text> |
|
<ArrowDown |
|
className={`arrow-icon ${priceExpanded ? 'expanded' : ''}`} |
|
size="16px" |
|
color="#646566" |
|
/> |
|
</View> |
|
</View> |
|
|
|
{/* 收费标准展开内容 */} |
|
{priceExpanded && ( |
|
<View className="expand-content"> |
|
{priceInfo?.descript && <Text className="expand-text">{priceInfo.descript}</Text>} |
|
{priceInfo?.timePrices?.map((tp, i) => ( |
|
<Text key={i} className="expand-text">• {tp.startTime}-{tp.endTime} {tp.description || `${tp.price}元/小时`}</Text> |
|
))} |
|
</View> |
|
)} |
|
|
|
<View className="info-row"> |
|
<Text className="info-label">支付方式</Text> |
|
<Text className="info-value">{opInfo?.payTypeDescription || '--'}</Text> |
|
</View> |
|
</View> |
|
</> |
|
)} |
|
</View> |
|
|
|
{/* 底部按钮区域 */} |
|
<FooterButtons type={type} grpSn={grpSn} operationId={operationId} /> |
|
</View> |
|
) |
|
}) |
|
|
|
export default CloseTable
|
|
|