From b63155a5acd6c16632f5400dbd41ca0ec14878f6 Mon Sep 17 00:00:00 2001
From: woody <woody@163>
Date: Wed, 28 May 2025 09:16:29 +0800
Subject: [PATCH] =?UTF-8?q?feat(ticket):=20=E6=B7=BB=E5=8A=A0=E9=97=A8?=
 =?UTF-8?q?=E7=A5=A8=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config/request.js       |  109 +++--
 config/ticket.js        |   23 +
 pages.json              |   37 +-
 pages/test-ticket.vue   |   95 ++++
 pages/ticket/buy.vue    |  851 ++++++++++++++++++++++++++++++++
 pages/ticket/detail.vue |  378 +++++++++++++++
 pages/ticket/index.vue  | 1013 +++++++++++++++++++++++++++++++++++++++
 7 files changed, 2453 insertions(+), 53 deletions(-)
 create mode 100644 config/ticket.js
 create mode 100644 pages/test-ticket.vue
 create mode 100644 pages/ticket/buy.vue
 create mode 100644 pages/ticket/detail.vue
 create mode 100644 pages/ticket/index.vue

diff --git a/config/request.js b/config/request.js
index 5fa9b1b..7a85d8a 100644
--- a/config/request.js
+++ b/config/request.js
@@ -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('服务器错误，请稍后重试')
-  })
+  )
 }
diff --git a/config/ticket.js b/config/ticket.js
new file mode 100644
index 0000000..5324a92
--- /dev/null
+++ b/config/ticket.js
@@ -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 })
diff --git a/pages.json b/pages.json
index aef63ae..45e9f2b 100644
--- a/pages.json
+++ b/pages.json
@@ -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"
   }
-}
\ No newline at end of file
+}
diff --git a/pages/test-ticket.vue b/pages/test-ticket.vue
new file mode 100644
index 0000000..a3373b7
--- /dev/null
+++ b/pages/test-ticket.vue
@@ -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>
diff --git a/pages/ticket/buy.vue b/pages/ticket/buy.vue
new file mode 100644
index 0000000..31b964e
--- /dev/null
+++ b/pages/ticket/buy.vue
@@ -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>
diff --git a/pages/ticket/detail.vue b/pages/ticket/detail.vue
new file mode 100644
index 0000000..18babcc
--- /dev/null
+++ b/pages/ticket/detail.vue
@@ -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>
diff --git a/pages/ticket/index.vue b/pages/ticket/index.vue
new file mode 100644
index 0000000..57be89e
--- /dev/null
+++ b/pages/ticket/index.vue
@@ -0,0 +1,1013 @@
+<!--
+ * @Descripttion: 门票活动页面
+ * @version: 1.0.0
+ * @Author: Assistant
+ * @Date: 2025-01-22
+-->
+<template>
+  <view class="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>
+
+    <!-- Tab切换 -->
+    <view class="tab-container">
+      <view class="tab-wrapper">
+        <view
+          class="tab-item"
+          :class="{ active: currentTab === 0 }"
+          @click="switchTab(0)"
+        >
+          <text class="tab-text">门票活动</text>
+          <view class="tab-line" v-if="currentTab === 0"></view>
+        </view>
+        <view
+          class="tab-item"
+          :class="{ active: currentTab === 1 }"
+          @click="switchTab(1)"
+        >
+          <text class="tab-text">我的门票</text>
+          <view class="tab-line" v-if="currentTab === 1"></view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 内容区域 -->
+    <view class="content-area">
+      <!-- 门票活动列表 -->
+      <view v-if="currentTab === 0" class="activity-list">
+        <view
+          class="activity-card"
+          v-for="item in activityList"
+          :key="item.pkId"
+        >
+          <view class="card-content">
+            <view class="activity-image">
+              <image :src="item.actCover" mode="aspectFill"></image>
+            </view>
+            <view class="activity-info">
+              <view class="activity-title">{{ item.actName }}</view>
+              <view class="activity-detail">
+                <text class="detail-label">活动日期：</text>
+                <text class="detail-value"
+                  >{{ item.actStartDate }}~{{ item.actEndDate }}</text
+                >
+              </view>
+              <view class="activity-detail">
+                <text class="detail-label">购买日期：</text>
+                <text class="detail-value"
+                  >{{ item.disStartDate }}~{{ item.disEndDate }}</text
+                >
+              </view>
+              <view class="activity-detail">
+                <text class="detail-label">总票数：</text>
+                <text class="detail-value">{{ item.quantity }}</text>
+              </view>
+              <view class="bottom-section">
+                <view class="price-info">
+                  <text class="price-symbol">¥</text>
+                  <text class="price-value">{{ item.payMoney }}</text>
+                </view>
+                <button class="buy-btn" @click="goBuyTicket(item)">购买</button>
+              </view>
+            </view>
+          </view>
+        </view>
+
+        <!-- 空状态 -->
+        <view v-if="!activityList.length && !loading" class="empty-state">
+          <text class="empty-text">没有更多数据了</text>
+        </view>
+
+        <!-- 加载状态 -->
+        <view v-if="loading" class="loading-state">
+          <u-loading-icon mode="spinner"></u-loading-icon>
+          <text class="loading-text">加载中...</text>
+        </view>
+      </view>
+
+      <!-- 我的门票列表 -->
+      <view v-if="currentTab === 1" class="ticket-list">
+        <view class="ticket-card" v-for="item in ticketList" :key="item.pkId">
+          <view class="ticket-header">
+            <text class="order-code">订单编号：{{ item.orderCode }}</text>
+          </view>
+          <view class="ticket-content">
+            <view class="ticket-info">
+              <view class="ticket-title">{{ item.actName }}</view>
+              <!-- 基础信息：始终显示 -->
+              <view class="ticket-detail">
+                <text class="detail-label">门票价格：</text>
+                <text class="detail-value price">¥{{ item.price }}</text>
+              </view>
+              <view class="ticket-detail">
+                <text class="detail-label">支付时间：</text>
+                <text class="detail-value">{{ item.creationTime }}</text>
+              </view>
+              <view class="ticket-detail">
+                <text class="detail-label">支付编号：</text>
+                <text class="detail-value">{{ item.memberCode }}</text>
+              </view>
+              <view class="ticket-detail">
+                <text class="detail-label">支付昵称：</text>
+                <text class="detail-value">{{ item.memberName }}</text>
+              </view>
+              <view class="ticket-detail">
+                <text class="detail-label">姓名：</text>
+                <text class="detail-value">{{ item.buyName }}</text>
+              </view>
+              <view class="ticket-detail">
+                <text class="detail-label">联系方式：</text>
+                <text class="detail-value">{{ item.phone }}</text>
+              </view>
+
+              <!-- 展开显示的更多信息 -->
+              <view v-if="item.expanded" class="expanded-details">
+                <view class="ticket-detail" v-if="item.idCard">
+                  <text class="detail-label">证件证号：</text>
+                  <text class="detail-value">{{ item.idCard }}</text>
+                </view>
+                <view class="ticket-detail" v-if="item.sexVal">
+                  <text class="detail-label">性别：</text>
+                  <text class="detail-value">{{ item.sexVal }}</text>
+                </view>
+                <view class="ticket-detail" v-if="item.clothSize">
+                  <text class="detail-label">服装尺寸：</text>
+                  <text class="detail-value">{{ item.clothSize }}</text>
+                </view>
+                <view class="ticket-detail" v-if="item.cohabitant">
+                  <text class="detail-label">同住人：</text>
+                  <text class="detail-value">{{ item.cohabitant }}</text>
+                </view>
+                <view class="ticket-detail" v-if="item.emergencyPhone">
+                  <text class="detail-label">紧急联系方式：</text>
+                  <text class="detail-value">{{ item.emergencyPhone }}</text>
+                </view>
+              </view>
+
+              <!-- 操作按钮：仅在24小时内显示 -->
+              <view
+                v-if="isWithin24Hours(item.creationTime)"
+                class="action-buttons"
+              >
+                <button class="cancel-btn" @click="showCancelConfirm(item)">
+                  撤销门票
+                </button>
+                <button class="edit-btn" @click="showEditModal(item)">
+                  修改信息
+                </button>
+              </view>
+
+              <view class="expand-action" @click="toggleExpand(item)">
+                <text class="expand-text">{{
+                  item.expanded ? '收起' : '查看更多'
+                }}</text>
+                <u-icon
+                  :name="item.expanded ? 'arrow-up' : 'arrow-down'"
+                  size="12"
+                  color="#999"
+                ></u-icon>
+              </view>
+            </view>
+          </view>
+        </view>
+
+        <!-- 空状态 -->
+        <view v-if="!ticketList.length && !ticketLoading" class="empty-state">
+          <text class="empty-text">没有更多数据了</text>
+        </view>
+
+        <!-- 加载状态 -->
+        <view v-if="ticketLoading" class="loading-state">
+          <u-loading-icon mode="spinner"></u-loading-icon>
+          <text class="loading-text">加载中...</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 撤销确认弹窗 -->
+    <u-modal
+      v-model="showCancelModal"
+      title="确认撤销"
+      :content="cancelModalContent"
+      confirm-text="确认撤销"
+      cancel-text="取消"
+      @confirm="confirmCancel"
+      @cancel="showCancelModal = false"
+    ></u-modal>
+
+    <!-- 修改信息弹窗 -->
+    <u-popup v-model="editModalVisible" mode="center" border-radius="12">
+      <view class="edit-modal">
+        <view class="modal-header">
+          <text class="modal-title">修改门票信息</text>
+          <u-icon name="close" size="20" @click="closeEditModal"></u-icon>
+        </view>
+        <scroll-view scroll-y class="modal-content">
+          <view class="form-item">
+            <text class="form-label optional">活动名称</text>
+            <input
+              class="form-input disabled"
+              :value="editForm.actName"
+              disabled
+            />
+          </view>
+          <view class="form-item">
+            <text class="form-label optional">订单编号</text>
+            <input
+              class="form-input disabled"
+              :value="editForm.orderCode"
+              disabled
+            />
+          </view>
+          <view class="form-item">
+            <text class="form-label">姓名 *</text>
+            <input
+              class="form-input"
+              v-model="editForm.buyName"
+              placeholder="请输入姓名"
+            />
+          </view>
+          <view class="form-item">
+            <text class="form-label">手机号 *</text>
+            <input
+              class="form-input"
+              v-model="editForm.phone"
+              placeholder="请输入手机号"
+            />
+          </view>
+          <view class="form-item">
+            <text class="form-label">身份证号 *</text>
+            <input
+              class="form-input"
+              v-model="editForm.idCard"
+              placeholder="请输入身份证号"
+            />
+          </view>
+          <view class="form-item">
+            <text class="form-label">性别 *</text>
+            <u-radio-group v-model="editForm.sex" direction="row">
+              <u-radio name="1" label="男"></u-radio>
+              <u-radio name="0" label="女"></u-radio>
+            </u-radio-group>
+          </view>
+          <view class="form-item">
+            <text class="form-label">尺码 *</text>
+            <input
+              class="form-input"
+              v-model="editForm.clothSize"
+              placeholder="请输入尺码"
+            />
+          </view>
+          <view class="form-item">
+            <text class="form-label optional">同住人</text>
+            <input
+              class="form-input"
+              v-model="editForm.cohabitant"
+              placeholder="请输入同住人"
+            />
+          </view>
+          <view class="form-item">
+            <text class="form-label optional">紧急联系人</text>
+            <input
+              class="form-input"
+              v-model="editForm.emergencyPhone"
+              placeholder="请输入紧急联系人电话"
+            />
+          </view>
+        </scroll-view>
+        <view class="modal-footer">
+          <button class="confirm-btn" @click="updateTicketInfo">确定</button>
+        </view>
+      </view>
+    </u-popup>
+  </view>
+</template>
+
+<script>
+import { getTicketActivityList, getMyTicketList } from '@/config/ticket.js'
+
+export default {
+  data() {
+    return {
+      currentTab: 0,
+      activityList: [],
+      ticketList: [],
+      loading: false,
+      ticketLoading: false,
+      activityPage: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      ticketPage: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      // 弹窗相关
+      showCancelModal: false,
+      editModalVisible: false,
+      selectedTicket: null,
+      editForm: {
+        pkId: '',
+        actName: '',
+        memberCode: '',
+        memberName: '',
+        orderCode: '',
+        orderAmount: '',
+        price: '',
+        quantity: '',
+        buyName: '',
+        phone: '',
+        idCard: '',
+        sex: '',
+        sexVal: '',
+        clothSize: '',
+        cohabitant: '',
+        emergencyPhone: '',
+        creationTime: '',
+      },
+    }
+  },
+  computed: {
+    // 撤销弹窗内容
+    cancelModalContent() {
+      return this.selectedTicket
+        ? `确定要撤销订单 ${this.selectedTicket.orderCode} 吗？撤销后不可恢复。`
+        : '确定要撤销此订单吗？撤销后不可恢复。'
+    },
+  },
+  onLoad() {
+    this.loadActivityList()
+  },
+  onPullDownRefresh() {
+    this.refreshCurrentTab()
+  },
+  // onReachBottom() {
+  //   this.loadMoreData()
+  // },
+  methods: {
+    // 返回上一页
+    goBack() {
+      uni.navigateBack()
+    },
+
+    // 切换Tab
+    switchTab(index) {
+      this.currentTab = index
+      if (index === 0) {
+        this.loadActivityList()
+      } else {
+        this.loadTicketList()
+      }
+    },
+
+    // 刷新当前Tab数据
+    refreshCurrentTab() {
+      if (this.currentTab === 0) {
+        this.activityPage.pageNum = 1
+        this.activityList = []
+        this.loadActivityList()
+      } else {
+        this.ticketPage.pageNum = 1
+        this.ticketList = []
+        this.loadTicketList()
+      }
+    },
+
+    // 加载更多数据
+    loadMoreData() {
+      if (this.currentTab === 0) {
+        this.activityPage.pageNum++
+        this.loadActivityList()
+      } else {
+        this.ticketPage.pageNum++
+        this.loadTicketList()
+      }
+    },
+
+    // 加载活动列表
+    async loadActivityList() {
+      this.loading = true
+      try {
+        const res = await getTicketActivityList(this.activityPage)
+        if (res.code === 200) {
+          if (this.activityPage.pageNum === 1) {
+            this.activityList = res.rows || []
+          } else {
+            this.activityList.push(...(res.rows || []))
+          }
+        }
+      } catch (error) {
+        console.error('加载活动列表失败:', error)
+        uni.$u.toast('加载失败，请重试')
+      } finally {
+        this.loading = false
+        uni.stopPullDownRefresh()
+      }
+    },
+
+    // 加载门票列表
+    async loadTicketList() {
+      this.ticketLoading = true
+      try {
+        const res = await getMyTicketList(this.ticketPage)
+        if (res.code === 200) {
+          if (this.ticketPage.pageNum === 1) {
+            this.ticketList = res.rows || []
+          } else {
+            this.ticketList.push(...(res.rows || []))
+          }
+        }
+      } catch (error) {
+        console.error('加载门票列表失败:', error)
+        uni.$u.toast('加载失败，请重试')
+      } finally {
+        this.ticketLoading = false
+        uni.stopPullDownRefresh()
+      }
+    },
+
+    // 去购买门票
+    goBuyTicket(activity) {
+      uni.navigateTo({
+        url: `/pages/ticket/buy?activityId=${activity.pkId}&activityName=${encodeURIComponent(activity.actName)}&price=${activity.payMoney}`,
+      })
+    },
+
+    // 查看门票详情
+    goTicketDetail(ticket) {
+      uni.navigateTo({
+        url: `/pages/ticket/detail?ticketId=${ticket.pkId}`,
+      })
+    },
+
+    // 切换展开/收起状态
+    toggleExpand(item) {
+      // 使用 $set 确保响应式更新
+      this.$set(item, 'expanded', !item.expanded)
+    },
+
+    // 判断是否在24小时内
+    isWithin24Hours(creationTime) {
+      if (!creationTime) return false
+      const createDate = new Date(creationTime)
+      const now = new Date()
+      const timeDiff = now.getTime() - createDate.getTime()
+      const hoursDiff = timeDiff / (1000 * 3600)
+      return hoursDiff <= 24
+    },
+
+    // 显示撤销确认弹窗
+    showCancelConfirm(ticket) {
+      this.selectedTicket = ticket
+      this.showCancelModal = true
+    },
+
+    // 确认撤销门票
+    async confirmCancel() {
+      if (!this.selectedTicket) return
+
+      try {
+        uni.showLoading({ title: '撤销中...' })
+        const res = await this.$http.post(
+          '/sale/api/ticket/cancel-pay-ticket',
+          {
+            orderCode: this.selectedTicket.orderCode,
+          }
+        )
+
+        if (res.code === 200) {
+          uni.$u.toast('撤销成功')
+          this.showCancelModal = false
+          this.selectedTicket = null
+          // 刷新列表
+          this.refreshCurrentTab()
+        } else {
+          uni.$u.toast(res.msg || '撤销失败')
+        }
+      } catch (error) {
+        console.error('撤销门票失败:', error)
+        uni.$u.toast('撤销失败，请重试')
+      } finally {
+        uni.hideLoading()
+      }
+    },
+
+    // 显示修改信息弹窗
+    showEditModal(ticket) {
+      this.selectedTicket = ticket
+      // 填充表单数据
+      this.editForm = {
+        pkId: ticket.pkId,
+        actName: ticket.actName,
+        memberCode: ticket.memberCode,
+        memberName: ticket.memberName,
+        orderCode: ticket.orderCode,
+        orderAmount: ticket.orderAmount,
+        price: ticket.price,
+        quantity: ticket.quantity,
+        buyName: ticket.buyName || '',
+        phone: ticket.phone || '',
+        idCard: ticket.idCard || '',
+        sex: ticket.sex || '',
+        sexVal: ticket.sexVal || '',
+        clothSize: ticket.clothSize || '',
+        cohabitant: ticket.cohabitant || '',
+        emergencyPhone: ticket.emergencyPhone || '',
+        creationTime: ticket.creationTime,
+      }
+      this.editModalVisible = true
+    },
+
+    // 关闭修改弹窗
+    closeEditModal() {
+      this.editModalVisible = false
+      this.selectedTicket = null
+      this.editForm = {
+        pkId: '',
+        actName: '',
+        memberCode: '',
+        memberName: '',
+        orderCode: '',
+        orderAmount: '',
+        price: '',
+        quantity: '',
+        buyName: '',
+        phone: '',
+        idCard: '',
+        sex: '',
+        sexVal: '',
+        clothSize: '',
+        cohabitant: '',
+        emergencyPhone: '',
+        creationTime: '',
+      }
+    },
+
+    // 更新门票信息
+    async updateTicketInfo() {
+      // 表单验证
+      if (!this.editForm.buyName) {
+        uni.$u.toast('请输入姓名')
+        return
+      }
+      if (!this.editForm.phone) {
+        uni.$u.toast('请输入手机号')
+        return
+      }
+      if (!this.editForm.idCard) {
+        uni.$u.toast('请输入身份证号')
+        return
+      }
+      if (!this.editForm.sex) {
+        uni.$u.toast('请选择性别')
+        return
+      }
+      if (!this.editForm.clothSize) {
+        uni.$u.toast('请输入尺码')
+        return
+      }
+
+      // 设置性别值
+      this.editForm.sexVal = this.editForm.sex === '1' ? '男' : '女'
+
+      try {
+        uni.showLoading({ title: '更新中...' })
+        const res = await this.$http.post(
+          'sale/api/ticket/update-ticket',
+          this.editForm
+        )
+
+        if (res.code === 200) {
+          uni.$u.toast('修改成功')
+          this.closeEditModal()
+          // 刷新列表
+          this.refreshCurrentTab()
+        } else {
+          uni.$u.toast(res.msg || '修改失败')
+        }
+      } catch (error) {
+        console.error('更新门票信息失败:', error)
+        uni.$u.toast('修改失败，请重试')
+      } finally {
+        uni.hideLoading()
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.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: 2rpx solid #eee;
+
+  .navbar-content {
+    display: flex;
+    align-items: center;
+    height: 88rpx;
+    padding: 0 32rpx;
+
+    .back-btn {
+      width: 80rpx;
+      height: 80rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .navbar-title {
+      flex: 1;
+      text-align: center;
+      font-size: 36rpx;
+      font-weight: 600;
+      color: #333;
+    }
+
+    .placeholder {
+      width: 80rpx;
+    }
+  }
+}
+
+.tab-container {
+  position: fixed;
+  top: calc(var(--status-bar-height) + 88rpx);
+  left: 0;
+  right: 0;
+  z-index: 998;
+  background: #fff;
+  border-bottom: 2rpx solid #eee;
+
+  .tab-wrapper {
+    display: flex;
+    align-items: center;
+
+    .tab-item {
+      flex: 1;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 32rpx 0;
+      cursor: pointer;
+
+      .tab-text {
+        font-size: 32rpx;
+        color: #666;
+        transition: color 0.3s;
+      }
+
+      .tab-line {
+        position: absolute;
+        bottom: 0;
+        width: 60rpx;
+        height: 6rpx;
+        background: #005bac;
+        border-radius: 3rpx;
+      }
+
+      &.active .tab-text {
+        color: #005bac;
+        font-weight: 600;
+      }
+    }
+  }
+}
+
+.content-area {
+  margin-top: calc(var(--status-bar-height) + 88rpx + 120rpx);
+  padding: 24rpx;
+  min-height: calc(100vh - var(--status-bar-height) - 88rpx - 120rpx);
+}
+
+.activity-card {
+  background: #fff;
+  border-radius: 16rpx;
+  margin-bottom: 24rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  border: 1rpx solid #f0f0f0;
+
+  .card-content {
+    display: flex;
+    padding: 24rpx;
+    gap: 20rpx;
+
+    .activity-image {
+      flex-shrink: 0;
+      width: 208rpx;
+      height: 208rpx;
+      border-radius: 40rpx;
+      overflow: hidden;
+      image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .activity-info {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+
+      .activity-title {
+        font-size: 28rpx;
+        font-weight: 600;
+        color: #333;
+        line-height: 1.4;
+        margin-bottom: 16rpx;
+      }
+
+      .activity-detail {
+        display: flex;
+        margin-bottom: 8rpx;
+
+        .detail-label {
+          font-size: 20rpx;
+          color: #999;
+          min-width: 140rpx;
+        }
+
+        .detail-value {
+          font-size: 20rpx;
+          color: #666;
+          flex: 1;
+        }
+      }
+
+      .bottom-section {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .price-info {
+          display: flex;
+          align-items: baseline;
+          color: #ff4444;
+
+          .price-symbol {
+            font-size: 24rpx;
+            margin-right: 2rpx;
+          }
+
+          .price-value {
+            font-size: 32rpx;
+            font-weight: 700;
+          }
+        }
+
+        .buy-btn {
+          background: #005bac;
+          color: #fff;
+          border: none;
+          border-radius: 40rpx;
+          padding: 0rpx 32rpx;
+          font-size: 20rpx;
+          font-weight: 600;
+          margin: 0;
+        }
+      }
+    }
+  }
+}
+
+.ticket-card {
+  background: #fff;
+  border-radius: 16rpx;
+  margin-bottom: 24rpx;
+  padding: 24rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+
+  .ticket-header {
+    margin-bottom: 16rpx;
+
+    .order-code {
+      font-size: 24rpx;
+      color: #999;
+    }
+  }
+
+  .ticket-content {
+    .ticket-info {
+      .ticket-title {
+        font-size: 28rpx;
+        font-weight: 600;
+        color: #333;
+        margin-bottom: 16rpx;
+        line-height: 1.3;
+      }
+
+      .ticket-detail {
+        display: flex;
+        margin-bottom: 12rpx;
+
+        .detail-label {
+          font-size: 24rpx;
+          color: #999;
+          min-width: 140rpx;
+        }
+
+        .detail-value {
+          font-size: 24rpx;
+          color: #666;
+
+          &.price {
+            color: #005bac;
+            font-weight: 600;
+          }
+        }
+      }
+
+      .expanded-details {
+        animation: fadeIn 0.3s ease-in-out;
+
+        .ticket-detail {
+          margin-bottom: 12rpx;
+        }
+      }
+
+      .action-buttons {
+        display: flex;
+        gap: 16rpx;
+        margin-top: 16rpx;
+        padding: 16rpx 0;
+
+        .cancel-btn,
+        .edit-btn {
+          flex: 1;
+          height: 60rpx;
+          border: none;
+          border-radius: 30rpx;
+          font-size: 24rpx;
+          font-weight: 600;
+          margin: 0;
+        }
+
+        .cancel-btn {
+          background: #fff;
+          color: #ff4444;
+          border: 2rpx solid #ff4444;
+        }
+
+        .edit-btn {
+          background: #005bac;
+          color: #fff;
+        }
+      }
+
+      .expand-action {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 16rpx;
+        padding: 16rpx 0;
+        border-top: 1rpx solid #eee;
+        cursor: pointer;
+        transition: background-color 0.2s;
+
+        &:active {
+          background-color: #f8f8f8;
+        }
+
+        .expand-text {
+          font-size: 24rpx;
+          color: #999;
+          margin-right: 8rpx;
+        }
+      }
+    }
+  }
+}
+
+.empty-state,
+.loading-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 120rpx 0;
+
+  .empty-text,
+  .loading-text {
+    font-size: 28rpx;
+    color: #999;
+    margin-top: 16rpx;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// 修改信息弹窗样式
+.edit-modal {
+  width: 640rpx;
+  max-height: 80vh;
+  background: #fff;
+  border-radius: 24rpx;
+  overflow: hidden;
+
+  .modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 32rpx;
+    border-bottom: 2rpx solid #eee;
+
+    .modal-title {
+      font-size: 32rpx;
+      font-weight: 600;
+      color: #333;
+    }
+  }
+
+  .modal-content {
+    max-height: 60vh;
+    padding: 32rpx;
+
+    .form-item {
+      margin-bottom: 32rpx;
+
+      .form-label {
+        display: block;
+        font-size: 28rpx;
+        color: #333;
+        margin-bottom: 16rpx;
+
+        &::after {
+          content: '*';
+          color: #ff4444;
+          margin-left: 4rpx;
+        }
+
+        &.optional::after {
+          display: none;
+        }
+      }
+
+      .form-input {
+        width: 100%;
+        height: 80rpx;
+        padding: 0 24rpx;
+        border: 2rpx solid #ddd;
+        border-radius: 12rpx;
+        font-size: 28rpx;
+        color: #333;
+        background: #fff;
+        box-sizing: border-box;
+
+        &.disabled {
+          background: #f5f5f5;
+          color: #999;
+        }
+
+        &:focus {
+          border-color: #005bac;
+        }
+      }
+    }
+  }
+
+  .modal-footer {
+    padding: 32rpx;
+    border-top: 2rpx solid #eee;
+
+    .confirm-btn {
+      width: 100%;
+      height: 80rpx;
+      background: #005bac;
+      color: #fff;
+      border: none;
+      border-radius: 40rpx;
+      font-size: 32rpx;
+      font-weight: 600;
+      margin: 0;
+    }
+  }
+}
+</style>