379 lines
8.8 KiB
Vue
379 lines
8.8 KiB
Vue
<!--
|
|
* @Descripttion: 门票详情页面
|
|
* @version: 1.0.0
|
|
* @Author: Assistant
|
|
* @Date: 2025-01-22
|
|
-->
|
|
<template>
|
|
<view class="ticket-detail-container">
|
|
<!-- 自定义导航栏 -->
|
|
<view class="custom-navbar">
|
|
<view class="navbar-content">
|
|
<view class="back-btn" @click="goBack">
|
|
<u-icon name="arrow-left" size="20" color="#333"></u-icon>
|
|
</view>
|
|
<view class="navbar-title">我的门票</view>
|
|
<view class="placeholder"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 内容区域 -->
|
|
<view class="content-area">
|
|
<view v-if="ticketDetail" class="ticket-detail-card">
|
|
<!-- 订单编号 -->
|
|
<view class="order-section">
|
|
<text class="order-label">订单编号：</text>
|
|
<text class="order-code">{{ ticketDetail.orderCode }}</text>
|
|
</view>
|
|
|
|
<!-- 活动信息 -->
|
|
<view class="activity-section">
|
|
<view class="activity-title">{{ ticketDetail.actName }}</view>
|
|
|
|
<view class="detail-item">
|
|
<text class="detail-label">门票价格：</text>
|
|
<text class="detail-value price">¥{{ ticketDetail.price }}</text>
|
|
</view>
|
|
|
|
<view class="detail-item">
|
|
<text class="detail-label">支付时间：</text>
|
|
<text class="detail-value">{{ ticketDetail.creationTime }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 支付信息 -->
|
|
<view class="pay-section">
|
|
<view class="section-title">支付信息</view>
|
|
|
|
<view class="detail-item">
|
|
<text class="detail-label">支付编号：</text>
|
|
<text class="detail-value">{{ ticketDetail.memberCode }}</text>
|
|
</view>
|
|
|
|
<view class="detail-item">
|
|
<text class="detail-label">支付昵称：</text>
|
|
<text class="detail-value">{{ ticketDetail.memberName }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 购票人信息 -->
|
|
<view class="buyer-section">
|
|
<view class="section-title">购票人信息</view>
|
|
|
|
<view class="detail-item">
|
|
<text class="detail-label">姓名：</text>
|
|
<text class="detail-value">{{ ticketDetail.buyName }}</text>
|
|
</view>
|
|
|
|
<view class="detail-item">
|
|
<text class="detail-label">联系方式：</text>
|
|
<text class="detail-value">{{ ticketDetail.phone }}</text>
|
|
</view>
|
|
|
|
<view class="detail-item">
|
|
<text class="detail-label">证件证号：</text>
|
|
<text class="detail-value">{{ ticketDetail.idCard }}</text>
|
|
</view>
|
|
|
|
<view class="detail-item">
|
|
<text class="detail-label">性别：</text>
|
|
<text class="detail-value">{{ ticketDetail.sexVal }}</text>
|
|
</view>
|
|
|
|
<view class="detail-item">
|
|
<text class="detail-label">服装尺寸：</text>
|
|
<text class="detail-value">{{ ticketDetail.clothSize }}</text>
|
|
</view>
|
|
|
|
<view class="detail-item" v-if="ticketDetail.cohabitant">
|
|
<text class="detail-label">同住人：</text>
|
|
<text class="detail-value">{{ ticketDetail.cohabitant }}</text>
|
|
</view>
|
|
|
|
<view class="detail-item">
|
|
<text class="detail-label">紧急联系方式：</text>
|
|
<text class="detail-value">{{ ticketDetail.emergencyPhone }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 展开更多信息 -->
|
|
<view class="expand-section" @click="toggleExpand">
|
|
<text class="expand-text">{{ expanded ? '收起' : '查看更多' }}</text>
|
|
<u-icon
|
|
:name="expanded ? 'arrow-up' : 'arrow-down'"
|
|
size="12"
|
|
color="#999"
|
|
></u-icon>
|
|
</view>
|
|
|
|
<!-- 更多信息（展开时显示） -->
|
|
<view v-if="expanded" class="more-info">
|
|
<view class="section-title">其他信息</view>
|
|
|
|
<view class="detail-item">
|
|
<text class="detail-label">订单金额：</text>
|
|
<text class="detail-value price"
|
|
>¥{{ ticketDetail.orderAmount }}</text
|
|
>
|
|
</view>
|
|
|
|
<view class="detail-item">
|
|
<text class="detail-label">购买数量：</text>
|
|
<text class="detail-value">{{ ticketDetail.quantity }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 加载状态 -->
|
|
<view v-if="loading" class="loading-state">
|
|
<u-loading-icon mode="spinner"></u-loading-icon>
|
|
<text class="loading-text">加载中...</text>
|
|
</view>
|
|
|
|
<!-- 错误状态 -->
|
|
<view v-if="error && !loading" class="error-state">
|
|
<text class="error-text">{{ error }}</text>
|
|
<button class="retry-btn" @click="loadTicketDetail">重试</button>
|
|
</view>
|
|
|
|
<!-- 空状态 -->
|
|
<view v-if="!ticketDetail && !loading && !error" class="empty-state">
|
|
<text class="empty-text">暂无数据</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getTicketDetail } from '@/config/ticket.js'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
ticketId: '',
|
|
ticketDetail: null,
|
|
loading: false,
|
|
error: '',
|
|
expanded: false,
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
if (options.ticketId) {
|
|
this.ticketId = options.ticketId
|
|
this.loadTicketDetail()
|
|
}
|
|
},
|
|
methods: {
|
|
// 返回上一页
|
|
goBack() {
|
|
uni.navigateBack()
|
|
},
|
|
|
|
// 切换展开状态
|
|
toggleExpand() {
|
|
this.expanded = !this.expanded
|
|
},
|
|
|
|
// 加载门票详情
|
|
async loadTicketDetail() {
|
|
if (!this.ticketId) {
|
|
this.error = '缺少门票ID'
|
|
return
|
|
}
|
|
|
|
this.loading = true
|
|
this.error = ''
|
|
|
|
try {
|
|
const res = await getTicketDetail({ ticketId: this.ticketId })
|
|
|
|
if (res.code === 200) {
|
|
this.ticketDetail = res.data || res.rows?.[0]
|
|
} else {
|
|
this.error = res.msg || '加载失败'
|
|
}
|
|
} catch (error) {
|
|
console.error('加载门票详情失败:', error)
|
|
this.error = '网络错误，请重试'
|
|
} finally {
|
|
this.loading = false
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.ticket-detail-container {
|
|
min-height: 100vh;
|
|
background: #f8f8f8;
|
|
}
|
|
|
|
.custom-navbar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 999;
|
|
background: #fff;
|
|
padding-top: var(--status-bar-height);
|
|
border-bottom: 1px solid #eee;
|
|
|
|
.navbar-content {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 44px;
|
|
padding: 0 16px;
|
|
|
|
.back-btn {
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.navbar-title {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.placeholder {
|
|
width: 40px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content-area {
|
|
margin-top: calc(var(--status-bar-height) + 44px);
|
|
padding: 16px;
|
|
}
|
|
|
|
.ticket-detail-card {
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
|
|
|
.order-section {
|
|
padding: 16px;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
|
|
.order-label {
|
|
font-size: 14px;
|
|
color: #999;
|
|
}
|
|
|
|
.order-code {
|
|
font-size: 14px;
|
|
color: #666;
|
|
margin-left: 4px;
|
|
}
|
|
}
|
|
|
|
.activity-section {
|
|
padding: 16px;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
|
|
.activity-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 16px;
|
|
line-height: 1.4;
|
|
}
|
|
}
|
|
|
|
.pay-section,
|
|
.buyer-section,
|
|
.more-info {
|
|
padding: 16px;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
|
|
.section-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 12px;
|
|
}
|
|
}
|
|
|
|
.detail-item {
|
|
display: flex;
|
|
margin-bottom: 12px;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.detail-label {
|
|
font-size: 14px;
|
|
color: #999;
|
|
min-width: 100px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.detail-value {
|
|
font-size: 14px;
|
|
color: #666;
|
|
flex: 1;
|
|
|
|
&.price {
|
|
color: #005bac;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
|
|
.expand-section {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 16px;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
cursor: pointer;
|
|
|
|
.expand-text {
|
|
font-size: 14px;
|
|
color: #999;
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
|
|
.more-info {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
.loading-state,
|
|
.error-state,
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 60px 0;
|
|
|
|
.loading-text,
|
|
.error-text,
|
|
.empty-text {
|
|
font-size: 14px;
|
|
color: #999;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.retry-btn {
|
|
margin-top: 16px;
|
|
background: #005bac;
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 20px;
|
|
padding: 8px 24px;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
</style>
|