3
0
Fork 0

feat(ticket): 添加门票功能

This commit is contained in:
woody 2025-05-28 09:16:29 +08:00
parent 8743a64873
commit b63155a5ac
7 changed files with 2453 additions and 53 deletions

View File

@ -5,76 +5,81 @@
* @Date: 2022-05-24 14:43:45
*/
import { getToken, removeToken } from '@/config/auth.js'
module.exports = (vm) => {
module.exports = vm => {
// 初始化请求配置
uni.$u.http.setConfig((config) => {
uni.$u.http.setConfig(config => {
// config.baseURL = 'https://p1.hzs413.com/inter-api';
// 192.168.0.100:8080
//#ifdef DEV_SERVER
console.log('DEV_SERVER')
config.baseURL = '/prod-api';
config.baseURL = 'http://localhost:8080'
//#endif
//#ifdef QA_SERVER
console.log('QA_SERVER')
config.baseURL = '/prod-api';
config.baseURL = '/prod-api'
//#endif
config.timeout = 30000;
config.timeout = 30000
return config
})
// 请求拦截
uni.$u.http.interceptors.request.use((config) => {
config.data = config.data || {}
config.header['Source'] = 3
let token = getToken();
let mToken = uni.getStorageSync('mToken');
let lang = uni.getStorageSync('lang');
if (lang) {
config.header['Accept-Language'] = lang
} else {
config.header['Accept-Language'] = 'zh-CN'
uni.$u.http.interceptors.request.use(
config => {
config.data = config.data || {}
config.header['Source'] = 3
let token = getToken()
let mToken = uni.getStorageSync('mToken')
let lang = uni.getStorageSync('lang')
if (lang) {
config.header['Accept-Language'] = lang
} else {
config.header['Accept-Language'] = 'zh-CN'
}
if (token) {
config.header['Authorization'] = token
}
config.header['token'] = mToken || ''
return config
},
config => {
return Promise.reject(config)
}
if (token) {
config.header['Authorization'] = token;
}
config.header['token'] = mToken || '';
return config
}, config => {
return Promise.reject(config)
})
)
// 响应拦截
uni.$u.http.interceptors.response.use((response) => {
const data = response.data
// uni.$u.toast(data.msg)
// if (data.code == 200) {
// return data;
// } else {
// token过期,清除token重新获取
if (data.code == 400 || data.code == 401 || data.code == 402) {
// uni.showToast({
// title: '登录超时',
// icon: 'none',
// duration: 1500,
// })
removeToken();
// 跳转到登录
setTimeout(() => {
uni.reLaunch({
url: '/pages/login/index'
})
}, 1500)
} else if (data.code == 500) {
uni.$u.toast(data.msg)
return data;
} else {
uni.$u.http.interceptors.response.use(
response => {
const data = response.data
// uni.$u.toast(data.msg)
return data;
// if (data.code == 200) {
// return data;
// } else {
// token过期,清除token重新获取
if (data.code == 400 || data.code == 401 || data.code == 402) {
// uni.showToast({
// title: '登录超时',
// icon: 'none',
// duration: 1500,
// })
removeToken()
// 跳转到登录
setTimeout(() => {
uni.reLaunch({
url: '/pages/login/index',
})
}, 1500)
} else if (data.code == 500) {
uni.$u.toast(data.msg)
return data
} else {
// uni.$u.toast(data.msg)
return data
}
},
response => {
uni.$u.toast('服务器错误,请稍后重试')
}
}, (response) => {
uni.$u.toast('服务器错误,请稍后重试')
})
)
}

23
config/ticket.js Normal file
View File

@ -0,0 +1,23 @@
/*
* @Descripttion: 门票活动相关API
* @version: 1.0.0
* @Author: Assistant
* @Date: 2025-01-22
*/
const http = uni.$u.http
// 查询门票活动列表
export const getTicketActivityList = params =>
http.get('/sale/api/ticket/query-ac', { params })
// 查询我的门票
export const getMyTicketList = params =>
http.get('/sale/api/ticket/query', { params })
// 购买门票(暂时定义,等待后端提供具体接口)
export const buyTicket = data => http.post('/sale/api/ticket/pay-ticket', data)
// 获取门票详情
export const getTicketDetail = params =>
http.get('/sale/api/ticket/detail', { params })

View File

@ -827,6 +827,41 @@
"navigationBarTitleText": "新增业绩",
"enablePullDownRefresh": false
}
},
{
"path": "pages/ticket/index",
"style": {
"navigationBarTitleText": "门票活动",
"navigationBarBackgroundColor": "#fff",
"navigationBarHidden": true,
"navigationStyle": "custom",
"enablePullDownRefresh": true
}
},
{
"path": "pages/ticket/buy",
"style": {
"navigationBarTitleText": "自助购票",
"navigationBarBackgroundColor": "#fff",
"navigationBarHidden": true,
"navigationStyle": "custom"
}
},
{
"path": "pages/ticket/detail",
"style": {
"navigationBarTitleText": "我的门票",
"navigationBarBackgroundColor": "#fff",
"navigationBarHidden": true,
"navigationStyle": "custom"
}
},
{
"path": "pages/test-ticket",
"style": {
"navigationBarTitleText": "门票模块测试",
"navigationBarBackgroundColor": "#fff"
}
}
],
"tabBar": {
@ -854,4 +889,4 @@
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
}

95
pages/test-ticket.vue Normal file
View File

@ -0,0 +1,95 @@
<!--
* @Descripttion: 门票模块测试页面
* @version: 1.0.0
* @Author: Assistant
* @Date: 2025-01-22
-->
<template>
<view class="test-container">
<view class="header">
<text class="title">门票模块测试</text>
</view>
<view class="button-list">
<button class="test-btn" @click="goToTicketList">进入门票活动</button>
<button class="test-btn" @click="goToBuyTicket">测试购票页面</button>
<button class="test-btn" @click="goToTicketDetail">测试门票详情</button>
</view>
<view class="info">
<text class="info-text">点击按钮测试相应功能模块</text>
</view>
</view>
</template>
<script>
export default {
methods: {
//
goToTicketList() {
uni.navigateTo({
url: '/pages/ticket/index',
})
},
//
goToBuyTicket() {
uni.navigateTo({
url: '/pages/ticket/buy?activityId=12&activityName=测试活动&price=0.03',
})
},
//
goToTicketDetail() {
uni.navigateTo({
url: '/pages/ticket/detail?ticketId=201',
})
},
},
}
</script>
<style lang="scss" scoped>
.test-container {
padding: 20px;
background: #f8f8f8;
min-height: 100vh;
}
.header {
text-align: center;
margin-bottom: 40px;
.title {
font-size: 24px;
font-weight: 600;
color: #333;
}
}
.button-list {
.test-btn {
width: 100%;
height: 50px;
background: #005bac;
color: #fff;
border: none;
border-radius: 25px;
margin-bottom: 20px;
font-size: 16px;
font-weight: 600;
}
}
.info {
text-align: center;
margin-top: 40px;
.info-text {
font-size: 14px;
color: #999;
}
}
</style>

851
pages/ticket/buy.vue Normal file
View File

@ -0,0 +1,851 @@
<!--
* @Descripttion: 自助购票页面
* @version: 1.0.0
* @Author: Assistant
* @Date: 2025-01-22
-->
<template>
<view class="buy-ticket-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 class="tip-banner">
<view class="tip-icon">
<u-icon name="info-circle" size="16" color="#f56c6c"></u-icon>
</view>
<text class="tip-text">自助购票请填写以下信息</text>
</view>
<!-- 购票人信息列表 -->
<view class="buyer-list">
<view
class="buyer-item"
v-for="(buyer, index) in buyerList"
:key="index"
>
<view class="buyer-header">
<text class="buyer-title">购票人信息{{ index + 1 }}</text>
<view
class="delete-btn"
v-if="buyerList.length > 1"
@click="removeBuyer(index)"
>
<u-icon name="trash" size="16" color="#999"></u-icon>
</view>
</view>
<view class="form-section">
<!-- 姓名 -->
<view class="form-item">
<view class="label required">
<text>姓名</text>
</view>
<view class="input-wrapper">
<input
class="form-input"
v-model="buyer.name"
placeholder="请输入"
maxlength="20"
/>
</view>
</view>
<!-- 联系方式 -->
<view class="form-item">
<view class="label required">
<text>联系方式</text>
</view>
<view class="input-wrapper">
<input
class="form-input"
v-model="buyer.phone"
placeholder="请输入"
type="number"
maxlength="11"
/>
</view>
</view>
<!-- 证件号码 -->
<view class="form-item">
<view class="label required">
<text>证件号码</text>
</view>
<view class="input-wrapper">
<input
class="form-input"
v-model="buyer.idCard"
placeholder="请输入"
maxlength="18"
/>
</view>
</view>
<!-- 性别 -->
<view class="form-item">
<view class="label required">
<text>性别</text>
</view>
<view class="input-wrapper">
<picker
:value="buyer.sexIndex"
:range="sexOptions"
@change="onSexChange($event, index)"
>
<view class="picker-input">
<text
class="picker-text"
:class="{ placeholder: buyer.sexIndex === -1 }"
>
{{
buyer.sexIndex !== -1
? sexOptions[buyer.sexIndex]
: '请选择'
}}
</text>
<u-icon name="arrow-down" size="12" color="#999"></u-icon>
</view>
</picker>
</view>
</view>
<!-- 服装尺寸 -->
<view class="form-item">
<view class="label required">
<text>服装尺寸</text>
</view>
<view class="input-wrapper">
<input
class="form-input"
v-model="buyer.clothSize"
placeholder="请输入"
maxlength="10"
/>
</view>
</view>
<!-- 同住人 -->
<view class="form-item">
<view class="label">
<text>同住人</text>
</view>
<view class="input-wrapper">
<input
class="form-input"
v-model="buyer.cohabitant"
placeholder="请输入"
maxlength="20"
/>
</view>
</view>
<!-- 紧急联系方式 -->
<view class="form-item">
<view class="label required">
<text>紧急联系方式</text>
</view>
<view class="input-wrapper">
<input
class="form-input"
v-model="buyer.emergencyPhone"
placeholder="请输入"
type="number"
maxlength="11"
/>
</view>
</view>
</view>
</view>
</view>
<!-- 添加购票人按钮 -->
<view class="add-buyer-btn" @click="addBuyer">
<u-icon name="plus" size="16" color="#666"></u-icon>
<text class="add-text">继续添加购票人</text>
</view>
<!-- 提交按钮 -->
<view class="submit-wrapper">
<button
class="submit-btn"
:class="{ disabled: submitting }"
:disabled="submitting"
@click="handleSubmit"
>
{{ submitting ? '提交中...' : '提交' }}
</button>
</view>
</view>
<!-- 支付密码弹窗 -->
<u-popup
:show="showPayPwdModal"
mode="center"
border-radius="16"
width="320px"
height="auto"
>
<view class="pay-pwd-modal">
<view class="modal-header">
<view class="header-icon">
<u-icon name="lock" size="24" color="#005bac"></u-icon>
</view>
<text class="modal-title">输入支付密码</text>
<text class="modal-subtitle">请输入您的支付密码以完成购票</text>
</view>
<view class="modal-body">
<view class="pwd-input-wrapper">
<input
class="pwd-input"
v-model="payPassword"
placeholder="请输入支付密码"
type="password"
maxlength="20"
@input="onPayPwdInput"
@focus="onPwdFocus"
@blur="onPwdBlur"
/>
<view
class="input-border"
:class="{ focused: pwdInputFocused }"
></view>
</view>
</view>
<view class="modal-footer">
<view class="btn-group">
<button class="modal-btn cancel-btn" @click="closePayPwdModal">
取消
</button>
<button
class="modal-btn confirm-btn"
:class="{ disabled: !isPayPwdValid }"
:disabled="!isPayPwdValid"
@click="confirmPayPwd"
>
确认支付
</button>
</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import { buyTicket } from '@/config/ticket.js'
export default {
data() {
return {
activityId: '',
activityName: '',
price: '',
buyerList: [
{
name: 'aa',
phone: '13333333333',
idCard: '123123',
sexIndex: 1,
sex: 1,
clothSize: '175/92A',
cohabitant: '13333333333',
emergencyPhone: '13333333333',
},
],
sexOptions: ['男', '女'],
submitting: false,
showPayPwdModal: false,
payPassword: '',
pwdInputFocused: false,
}
},
computed: {
//
isPayPwdValid() {
return this.payPassword.length > 0 && /^\d+$/.test(this.payPassword)
},
},
onLoad(options) {
if (options.activityId) {
this.activityId = options.activityId
}
if (options.activityName) {
this.activityName = decodeURIComponent(options.activityName)
}
if (options.price) {
this.price = options.price
}
},
methods: {
//
goBack() {
uni.navigateBack()
},
//
onSexChange(e, index) {
const sexIndex = e.detail.value
this.buyerList[index].sexIndex = sexIndex
this.buyerList[index].sex = sexIndex == 0 ? 1 : 2 // 1-2-
},
//
addBuyer() {
this.buyerList.push({
name: '',
phone: '',
idCard: '',
sexIndex: -1,
sex: '',
clothSize: '',
cohabitant: '',
emergencyPhone: '',
})
},
//
removeBuyer(index) {
uni.showModal({
title: '提示',
content: '确定删除该购票人信息吗?',
success: res => {
if (res.confirm) {
this.buyerList.splice(index, 1)
}
},
})
},
//
validateForm() {
for (let i = 0; i < this.buyerList.length; i++) {
const buyer = this.buyerList[i]
if (!buyer.name.trim()) {
uni.$u.toast(`购票人${i + 1}的姓名不能为空`)
return false
}
if (!buyer.phone.trim()) {
uni.$u.toast(`购票人${i + 1}的联系方式不能为空`)
return false
}
if (!/^1[3-9]\d{9}$/.test(buyer.phone)) {
uni.$u.toast(`购票人${i + 1}的联系方式格式不正确`)
return false
}
if (!buyer.idCard.trim()) {
uni.$u.toast(`购票人${i + 1}的证件号码不能为空`)
return false
}
if (buyer.sexIndex === -1 || !buyer.sex) {
uni.$u.toast(`请选择购票人${i + 1}的性别`)
return false
}
if (!buyer.clothSize.trim()) {
uni.$u.toast(`购票人${i + 1}的服装尺寸不能为空`)
return false
}
if (!buyer.emergencyPhone.trim()) {
uni.$u.toast(`购票人${i + 1}的紧急联系方式不能为空`)
return false
}
if (!/^1[3-9]\d{9}$/.test(buyer.emergencyPhone)) {
uni.$u.toast(`购票人${i + 1}的紧急联系方式格式不正确`)
return false
}
}
return true
},
//
handleSubmit() {
if (!this.validateForm()) {
return
}
console.log('支付弹窗?')
//
this.showPayPwdModal = true
this.payPassword = ''
},
//
closePayPwdModal() {
this.showPayPwdModal = false
this.payPassword = ''
},
//
onPayPwdInput(e) {
//
this.payPassword = e.detail.value.replace(/[^\d]/g, '')
},
//
onPwdFocus() {
this.pwdInputFocused = true
},
//
onPwdBlur() {
this.pwdInputFocused = false
},
//
confirmPayPwd() {
if (!this.isPayPwdValid) {
uni.$u.toast('请输入正确的支付密码')
return
}
this.showPayPwdModal = false
this.submitOrder()
},
//
async submitOrder() {
if (!this.validateForm()) {
return
}
this.submitting = true
try {
//
const orderData = {
payPwd: this.payPassword,
pkTicket: this.activityId,
ticketParamList: this.buyerList.map(buyer => ({
buyName: buyer.name,
phone: buyer.phone,
idCard: buyer.idCard,
sex: buyer.sex,
clothSize: buyer.clothSize,
cohabitant: buyer.cohabitant || '',
emergencyPhone: buyer.emergencyPhone,
})),
}
const res = await buyTicket(orderData)
if (res.code === 200) {
uni.showToast({
title: '购票成功',
icon: 'success',
duration: 2000,
})
setTimeout(() => {
// tab
uni.navigateBack({
delta: 1,
})
}, 2000)
} else {
uni.$u.toast(res.msg || '购票失败,请重试')
}
} catch (error) {
console.error('购票失败:', error)
uni.$u.toast('购票失败,请重试')
} finally {
this.submitting = false
}
},
},
}
</script>
<style lang="scss" scoped>
.buy-ticket-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;
padding-bottom: 100px;
}
.tip-banner {
background: #fff5f5;
border: 1px solid #ffebee;
border-radius: 8px;
padding: 12px 16px;
margin-bottom: 16px;
display: flex;
align-items: center;
.tip-icon {
margin-right: 8px;
}
.tip-text {
font-size: 14px;
color: #f56c6c;
}
}
.buyer-list {
.buyer-item {
background: #fff;
border-radius: 12px;
margin-bottom: 16px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
.buyer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px;
border-bottom: 1px solid #f5f5f5;
.buyer-title {
font-size: 16px;
font-weight: 600;
color: #333;
}
.delete-btn {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: #f8f8f8;
border-radius: 16px;
}
}
.form-section {
padding: 16px;
.form-item {
display: flex;
align-items: center;
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
.label {
width: 100px;
font-size: 14px;
color: #333;
position: relative;
&.required::before {
content: '*';
color: #f56c6c;
position: absolute;
left: -10px;
}
}
.input-wrapper {
flex: 1;
.form-input {
width: 100%;
height: 44px;
background: #f8f8f8;
border-radius: 8px;
border: none;
padding: 0 16px;
font-size: 14px;
color: #333;
box-sizing: border-box;
&::placeholder {
color: #c0c0c0;
}
}
.picker-input {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 44px;
background: #f8f8f8;
box-sizing: border-box;
border-radius: 8px;
padding: 0 16px;
.picker-text {
font-size: 14px;
color: #333;
&.placeholder {
color: #c0c0c0;
}
}
}
}
}
}
}
}
.add-buyer-btn {
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 12px;
padding: 16px;
margin-bottom: 24px;
border: 2px dashed #e0e0e0;
.add-text {
font-size: 14px;
color: #666;
margin-left: 8px;
}
}
.submit-wrapper {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
padding: 16px;
border-top: 1px solid #eee;
.submit-btn {
width: 100%;
height: 48px;
background: #005bac;
color: #fff;
border: none;
border-radius: 24px;
font-size: 16px;
font-weight: 600;
&.disabled {
background: #ccc;
}
}
}
/* 支付密码弹窗样式 */
.pay-pwd-modal {
background: #fff;
border-radius: 16rpx;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
.modal-header {
padding: 40rpx 40rpx 20rpx;
text-align: center;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
.header-icon {
width: 48px;
height: 48px;
background: rgba(0, 91, 172, 0.1);
border-radius: 24px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
}
.modal-title {
font-size: 18px;
font-weight: 600;
color: #333;
display: block;
margin-bottom: 8px;
}
.modal-subtitle {
font-size: 14px;
color: #666;
display: block;
line-height: 1.4;
}
}
.modal-body {
padding: 24rpx;
.pwd-input-wrapper {
position: relative;
margin-bottom: 16rpx;
.pwd-input {
width: 100%;
height: 80rpx;
background: #f8f9fa;
border-radius: 24rpx;
border: none;
padding: 0 20rpx;
font-size: 24rpx;
color: #333;
text-align: center;
letter-spacing: 4rpx;
box-sizing: border-box;
transition: all 0.3s ease;
&::placeholder {
color: #c0c0c0;
letter-spacing: normal;
}
&:focus {
background: #fff;
outline: none;
}
}
.input-border {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid transparent;
border-radius: 12px;
pointer-events: none;
transition: all 0.3s ease;
&.focused {
border-color: #005bac;
box-shadow: 0 0 0 4px rgba(0, 91, 172, 0.1);
}
}
}
.pwd-strength {
.strength-dots {
display: flex;
justify-content: center;
gap: 8px;
.dot {
width: 8px;
height: 8px;
border-radius: 4px;
background: #e9ecef;
transition: all 0.3s ease;
&.active {
background: #005bac;
transform: scale(1.2);
}
}
}
}
}
.modal-footer {
padding: 0 24px 24px;
.btn-group {
display: flex;
gap: 12px;
.modal-btn {
flex: 1;
height: 48rpx;
border: none;
border-radius: 24rpx;
font-size: 24rpx;
font-weight: 500;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
&.cancel-btn {
background: #f8f9fa;
color: #666;
&:active {
background: #e9ecef;
}
}
&.confirm-btn {
background: #005bac;
color: #fff;
font-weight: 600;
&:active {
background: #004494;
}
&.disabled {
background: #e9ecef;
color: #adb5bd;
cursor: not-allowed;
&:active {
background: #e9ecef;
}
}
}
}
}
}
}
</style>

378
pages/ticket/detail.vue Normal file
View File

@ -0,0 +1,378 @@
<!--
* @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>

1013
pages/ticket/index.vue Normal file

File diff suppressed because it is too large Load Diff