From db303eb0a916386e699de54eeb637cf9cdf00e1c Mon Sep 17 00:00:00 2001
From: zjf <1799650030@qq.com>
Date: Wed, 25 Jun 2025 17:44:02 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=BC=E5=90=88=E6=9C=8D=E5=8A=A1-=E4=BC=9A?=
 =?UTF-8?q?=E8=AE=AE=E6=A8=A1=E5=9D=97=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MeetingTabbar.vue              |  65 ++++++
 src/pages.json                                |   6 +
 src/pages/integrated/meeting/index.vue        |   4 +-
 .../integrated/meeting/my-reservations.vue    | 199 ++++++++++++++++++
 src/pages/integrated/visitor/myvisitor.vue    |  43 +++-
 5 files changed, 315 insertions(+), 2 deletions(-)
 create mode 100644 src/components/MeetingTabbar.vue
 create mode 100644 src/pages/integrated/meeting/my-reservations.vue

diff --git a/src/components/MeetingTabbar.vue b/src/components/MeetingTabbar.vue
new file mode 100644
index 0000000..0537379
--- /dev/null
+++ b/src/components/MeetingTabbar.vue
@@ -0,0 +1,65 @@
+<template>
+  <view class="tabbar">
+    <view
+      class="tabbar-item"
+      :class="{ active: activeTab === 'home' }"
+      @tap="goHome"
+    >
+      <image src="/static/icons/home.png" class="tabbar-icon" />
+      <text>首页</text>
+    </view>
+    <view
+      class="tabbar-item"
+      :class="{ active: activeTab === 'mine' }"
+      @tap="goMine"
+    >
+      <image src="/static/icons/mine.png" class="tabbar-icon" />
+      <text>我的</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ activeTab: 'home' | 'mine' }>()
+function goHome() {
+  uni.reLaunch({
+    url: '/pages/integrated/meeting/index'
+  })
+}
+function goMine() {
+  uni.reLaunch({
+    url: '/pages/integrated/meeting/my-reservations'
+  })
+}
+</script>
+
+<style scoped>
+.tabbar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 100rpx;
+  background: #fff;
+  display: flex;
+  border-top: 1px solid #eee;
+  z-index: 999;
+}
+.tabbar-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #888;
+  font-size: 24rpx;
+}
+.tabbar-icon {
+  width: 48rpx;
+  height: 48rpx;
+  margin-bottom: 4rpx;
+}
+.tabbar-item.active {
+  color: #1777FF;
+}
+</style>
diff --git a/src/pages.json b/src/pages.json
index 024e5f0..426bf83 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -472,6 +472,12 @@
 					"style": {
 						"navigationBarTitleText": "预约会议"
 					}
+				},
+				{
+					"path": "meeting/my-reservations",
+					"style": {
+						"navigationBarTitleText": "我的预约"
+					}
 				}
 			]
 		}
diff --git a/src/pages/integrated/meeting/index.vue b/src/pages/integrated/meeting/index.vue
index 0018fcd..aec2f19 100644
--- a/src/pages/integrated/meeting/index.vue
+++ b/src/pages/integrated/meeting/index.vue
@@ -41,11 +41,13 @@
       </view>
     </view>
   </view>
+  <MeetingTabbar activeTab="home" />
 </template>
 
 <script lang="ts" setup>
 import { ref, onMounted } from 'vue'
 import meetingRoomApi from '@/sheep/api/meetingRoom'
+import MeetingTabbar from '@/components/MeetingTabbar.vue'
 
 const goBack = () => {
   uni.navigateBack()
@@ -228,4 +230,4 @@ function goDetail(room) {
   color: #bbb;
   font-size: 20rpx;
 }
-</style> 
\ No newline at end of file
+</style>
diff --git a/src/pages/integrated/meeting/my-reservations.vue b/src/pages/integrated/meeting/my-reservations.vue
new file mode 100644
index 0000000..205c9c5
--- /dev/null
+++ b/src/pages/integrated/meeting/my-reservations.vue
@@ -0,0 +1,199 @@
+<template>
+  <view class="container">
+    <!-- 顶部自定义导航栏 -->
+    <view class="custom-nav">
+      <view class="nav-title">我的预约</view>
+    </view>
+
+    <!-- 顶部tab -->
+    <view class="tabs">
+      <view
+        v-for="(tab, idx) in tabs"
+        :key="tab"
+        :class="['tab', idx === activeTab ? 'active' : '']"
+        @tap="activeTab = idx"
+      >{{ tab }}</view>
+    </view>
+
+    <!-- 优惠礼包（可选） -->
+    <view class="coupon-box">
+      <text class="coupon-title">优惠礼包</text>
+      <text class="coupon-desc">还未购买过优惠礼包</text>
+      <text class="arrow">&gt;</text>
+    </view>
+
+    <!-- 预约卡片列表 -->
+    <view v-for="item in reservationList" :key="item.id" class="card">
+      <view class="card-header">
+        <image src="/static/icons/meeting.png" class="card-icon" />
+        <text class="card-title">{{ item.roomName }} → {{ item.location }}</text>
+        <text class="card-status" :class="item.statusClass">{{ item.statusText }}</text>
+      </view>
+      <view class="card-info">
+        <view>预约时间：{{ item.time }}</view>
+        <view>会议主题：{{ item.subject }}</view>
+        <view>参会人：{{ item.attendees }}</view>
+      </view>
+      <view class="card-footer">
+        <view class="card-btn" v-for="btn in item.actions" :key="btn">{{ btn }}</view>
+      </view>
+    </view>
+  </view>
+  <MeetingTabbar activeTab="mine" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import MeetingTabbar from '@/components/MeetingTabbar.vue'
+
+const tabs = ['全部', '未开始', '已结束', '已取消']
+const activeTab = ref(0)
+
+// 静态假数据，等你有接口后再对接
+const reservationList = ref([
+  {
+    id: 1,
+    roomName: '一号会议室',
+    location: '总部大厦A座',
+    time: '2025-06-20 14:00~15:00',
+    subject: '周例会',
+    attendees: '张三、李四、王五',
+    statusText: '已结束',
+    statusClass: 'done',
+    actions: ['更多', '再次预约']
+  },
+  {
+    id: 2,
+    roomName: '二号会议室',
+    location: '总部大厦B座',
+    time: '2025-06-22 09:00~10:00',
+    subject: '项目讨论',
+    attendees: '张三、赵六',
+    statusText: '未开始',
+    statusClass: 'pending',
+    actions: ['取消预约', '查看详情']
+  }
+])
+</script>
+
+<style lang="less" scoped>
+.container {
+  min-height: 100vh;
+  background: #f5f6fa;
+  padding-bottom: 120rpx;
+}
+.custom-nav {
+  height: 88rpx;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32rpx;
+  font-weight: 600;
+  border-bottom: 1px solid #f0f0f0;
+}
+.tabs {
+  display: flex;
+  background: #fff;
+  border-bottom: 1px solid #f0f0f0;
+}
+.tab {
+  flex: 1;
+  text-align: center;
+  padding: 24rpx 0;
+  font-size: 28rpx;
+  color: #888;
+  position: relative;
+}
+.tab.active {
+  color: #1777FF;
+  font-weight: 600;
+}
+.tab.active::after {
+  content: '';
+  display: block;
+  width: 60rpx;
+  height: 6rpx;
+  background: #1777FF;
+  border-radius: 3rpx;
+  margin: 0 auto;
+  position: absolute;
+  left: 0; right: 0; bottom: 0;
+}
+.coupon-box {
+  margin: 24rpx;
+  background: #fffbe6;
+  border-radius: 12rpx;
+  padding: 24rpx;
+  display: flex;
+  align-items: center;
+  font-size: 26rpx;
+  color: #bfa243;
+  position: relative;
+}
+.coupon-title {
+  font-weight: 600;
+  margin-right: 16rpx;
+}
+.coupon-desc {
+  flex: 1;
+}
+.arrow {
+  color: #bfa243;
+  font-size: 32rpx;
+  margin-left: 16rpx;
+}
+.card {
+  margin: 24rpx;
+  background: #fff;
+  border-radius: 16rpx;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+  padding: 24rpx;
+  margin-bottom: 16rpx;
+}
+.card-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12rpx;
+}
+.card-icon {
+  width: 40rpx;
+  height: 40rpx;
+  margin-right: 12rpx;
+}
+.card-title {
+  font-size: 30rpx;
+  font-weight: 600;
+  flex: 1;
+}
+.card-status {
+  font-size: 26rpx;
+  margin-left: 12rpx;
+}
+.card-status.done {
+  color: #888;
+}
+.card-status.pending {
+  color: #1777FF;
+}
+.card-status.cancel {
+  color: #ff4d4f;
+}
+.card-info {
+  font-size: 26rpx;
+  color: #666;
+  margin-bottom: 12rpx;
+  line-height: 1.7;
+}
+.card-footer {
+  display: flex;
+  gap: 24rpx;
+}
+.card-btn {
+  background: #f2f6ff;
+  color: #1777FF;
+  border-radius: 8rpx;
+  padding: 8rpx 24rpx;
+  font-size: 24rpx;
+}
+</style> 
\ No newline at end of file
diff --git a/src/pages/integrated/visitor/myvisitor.vue b/src/pages/integrated/visitor/myvisitor.vue
index 3c67402..a5ee811 100644
--- a/src/pages/integrated/visitor/myvisitor.vue
+++ b/src/pages/integrated/visitor/myvisitor.vue
@@ -59,7 +59,16 @@
 			<view v-if="!loading && visitorList.length === 0" class="empty">暂无访客记录</view>
 		</scroll-view>
 
-		<tabbar :tabBarList="tabBarList" :current="tabbarStore.current" />
+		<view class="tabbar">
+			<view class="tabbar-item" @tap="goHome">
+				<image src="/static/icons/home.png" class="tabbar-icon" />
+				<text>首页</text>
+			</view>
+			<view class="tabbar-item" @tap="goMine">
+				<image src="/static/icons/mine.png" class="tabbar-icon" />
+				<text>我的</text>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -480,5 +489,37 @@ onMounted(() => {
 		color: #999;
 		font-size: 26rpx;
 	}
+
+	.tabbar {
+		position: fixed;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		height: 100rpx;
+		background: #fff;
+		display: flex;
+		border-top: 1px solid #eee;
+		z-index: 999;
+	}
+
+	.tabbar-item {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		color: #888;
+		font-size: 24rpx;
+	}
+
+	.tabbar-icon {
+		width: 48rpx;
+		height: 48rpx;
+		margin-bottom: 4rpx;
+	}
+
+	.tabbar-item.active {
+		color: #1777FF;
+	}
 }
 </style>