综合服务-会议模块页面
This commit is contained in:
zjf committed
1 parent
0bbcb64d21
commit
db303eb0a9
5 files changed
+315
-2
No files matched your search
@@ -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>
|
||||
@@ -472,6 +472,12 @@
|
||||
"style": {
|
||||
"navigationBarTitleText": "预约会议"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "meeting/my-reservations",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的预约"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
</style>
|
||||
@@ -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">></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>
|
||||
@@ -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>
|
||||
Reference in new issue
Block a user