wangxiaowei/chazhi_store
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature: room manage

Browse Source
This commit is contained in:
kaijierepo
2025-12-14 20:29:59 +08:00
parent 9e6e446c4c
commit 42298eace3
7 changed files with 276 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/pages.json
View File

@ -199,6 +199,14 @@
"navigationStyle": "custom"
}
},
{
"path": "pages/store/room-manage",
"type": "page",
"layout": "default",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/store/store",
"type": "page",

BIN
src/pages/store/img/bookroom.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
src/pages/store/img/device.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
src/pages/store/img/renew.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
src/pages/store/img/room.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

190
src/pages/store/room-manage.vue Normal file
View File

@ -0,0 +1,190 @@
<route lang="jsonc" type="page">
{
"layout": "default",
"style": {
"navigationStyle": "custom"
}
}
</route>
<script lang="ts" setup>
import { router } from '@/utils/tools'
const OSS = inject('OSS')
const navbarHeight = inject('navbarHeight')
// 房间状态枚举
enum RoomStatus {
AVAILABLE = 'available', // 空闲中 - 绿色
CLEANING = 'cleaning', // 待打扫 - 蓝色/橙色
MAINTENANCE = 'maintenance', // 维护中 - 红色
IN_USE = 'in_use', // 使用中 - 蓝色
}
// 房间状态配置
const statusConfig = {
[RoomStatus.AVAILABLE]: {
text: '空闲中',
color: '#4C9F44', // 绿色
},
[RoomStatus.CLEANING]: {
text: '待打扫',
color: '#1890FF', // 蓝色
},
[RoomStatus.MAINTENANCE]: {
text: '维护中',
color: '#F65353', // 红色
},
[RoomStatus.IN_USE]: {
text: '使用中',
color: '#1890FF', // 蓝色
},
}
// Mock 房间数据
const roomList = ref([
{
id: 1,
name: '对月',
type: '榻榻米',
image: `${OSS}images/room1.jpg`, // Mock图片，实际需要替换
status: RoomStatus.AVAILABLE,
},
{
id: 2,
name: '听雨',
type: '榻榻米',
image: `${OSS}images/room2.jpg`,
status: RoomStatus.CLEANING,
},
{
id: 3,
name: '观星',
type: '榻榻米',
image: `${OSS}images/room3.jpg`,
status: RoomStatus.MAINTENANCE,
},
{
id: 4,
name: '品茶',
type: '榻榻米',
image: `${OSS}images/room4.jpg`,
status: RoomStatus.CLEANING,
},
{
id: 5,
name: '静心',
type: '榻榻米',
image: `${OSS}images/room5.jpg`,
status: RoomStatus.IN_USE,
},
])
const RoomManage = {
/**
* 点击房间卡片
*/
handleClickRoom: (room: any) => {
router.navigateTo(`/pages/store/room-detail?id=${room.id}`)
},
/**
* 点击编辑房间图片
*/
handleEditImage: (room: any, event: any) => {
event.stopPropagation()
// TODO: 实现编辑房间图片功能
console.log('编辑房间图片:', room.id)
},
/**
* 点击更多选项
*/
handleMore: () => {
// TODO: 实现更多选项功能
console.log('更多选项')
},
/**
* 点击目标图标
*/
handleTarget: () => {
// TODO: 实现目标功能
console.log('目标功能')
},
}
/**
* 获取状态配置
*/
function getStatusConfig(status: RoomStatus) {
return statusConfig[status] || statusConfig[RoomStatus.AVAILABLE]
}
</script>
<template>
<view>
<!-- 导航栏 -->
<view>
<navbar title="包间管理" custom-class="!bg-white" />
</view>
<!-- 房间列表 -->
<view class="px-30rpx pb-40rpx pt-30rpx">
<view class="grid grid-cols-2 gap-24rpx">
<view
v-for="room in roomList"
:key="room.id"
class="flex flex-col overflow-hidden rounded-16rpx bg-white"
@click="RoomManage.handleClickRoom(room)"
>
<!-- 房间图片 -->
<view class="relative aspect-[4/3] w-full">
<wd-img width="100%" height="100%" :src="room.image" mode="aspectFill" />
<!-- 编辑图标覆盖层 -->
<view
class="absolute right-16rpx top-16rpx h-48rpx w-48rpx flex items-center justify-center rounded-24rpx bg-black bg-opacity-40"
@click.stop="RoomManage.handleEditImage(room, $event)"
>
<wd-icon name="edit" size="16px" color="#fff" />
</view>
</view>
<!-- 房间信息 -->
<view class="flex flex-col p-24rpx">
<!-- 房间名称 -->
<view class="mb-0rpx text-center text-28rpx text-[#303133] leading-40rpx">
{{ room.name }} ({{ room.type }})
</view>
<!-- 状态指示器 -->
<view class="flex items-baseline justify-center align-middle">
<!-- 状态点 -->
<view
class="mr-8rpx h-12rpx w-12rpx flex-shrink-0 rounded-full"
:style="{ backgroundColor: getStatusConfig(room.status).color }"
/>
<!-- 状态文字 -->
<view
class="text-24rpx text-[#303133] leading-34rpx"
:style="{ color: getStatusConfig(room.status).color }"
>
{{ getStatusConfig(room.status).text }}
</view>
<!-- 右箭头 -->
<view class="ml-8rpx">
<wd-icon name="arrow-right" size="12px" :color="getStatusConfig(room.status).color" />
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<style lang="scss">
page {
background: #f6f7f8;
}
</style>

380
src/pages/store/store.vue
View File

@ -1,338 +1,114 @@
<route lang="jsonc" type="page">
{
"layout": "tabbar",
"style": {
"navigationStyle": "custom"
}
}
{
"layout": "tabbar",
"style": {
"navigationStyle": "custom"
}
}
</route>
<script lang="ts" setup>
import type { IUserResult } from '@/api/types/user'
import { getUserInfo } from '@/api/user'
import { useUserStore } from '@/store'
import { router } from '@/utils/tools'
import headerBgImg from './img/bg.png'
import modifyBgImg from './img/modify.png'
import editIconImg from './img/修改 (1).png'
import defaultAvatarImg from './img/头像.png'
import playIconImg from './img/播放 (5).png'
import bookroomImg from './img/bookroom.png'
import deviceImg from './img/device.png'
import renewImg from './img/renew.png'
import roomImg from './img/room.png'
const OSS = inject('OSS')
const navbarHeight = inject('navbarHeight')
const rightPadding = inject('capsuleOffset')
// 本地图片资源
const defaultAvatar = defaultAvatarImg as string
const editIcon = editIconImg as string
const playIcon = playIconImg as string
const headerBg = headerBgImg as string
const modifyBg = modifyBgImg as string
const roomIcon = roomImg as string
const deviceIcon = deviceImg as string
const bookroomIcon = bookroomImg as string
const renewIcon = renewImg as string
// 调试：检查背景图片路径
console.log('headerBg:', headerBg)
// 登录信息相关
const user = ref<IUserResult>({
id: 0,
sn: 0,
sex: '未知',
account: '',
nickname: '',
real_name: '',
avatar: '',
collect_count: 0,
coupon_count: 0,
create_time: '',
has_auth: false,
has_password: false,
member: 0,
mobile: '',
user_money: '0.00',
version: '',
})
const isLogin = ref<boolean>(false)
// 客服电话
const showServiceMobile = ref<boolean>(false)
const sheetMenu = ref<{ name: string }[]>([])
// 门店信息
const storeInfo = ref({
douyin_uid: '236598984587',
address: '上海浦东新区新金桥路58号新银东大厦 15楼F室',
business_hours: '08:00-22:00',
contact_phone: '021-8888888',
})
// 门店媒体列表（视频/图片）
const storeMediaList = ref([
{ type: 'video', url: `${OSS}images/my/store_video_thumb.jpg`, overlay: null },
{ type: 'image', url: `${OSS}images/my/store_image1.jpg`, overlay: null },
{ type: 'image', url: `${OSS}images/my/store_image2.jpg`, overlay: null },
{ type: 'image', url: `${OSS}images/my/store_image3.jpg`, overlay: null },
{ type: 'image', url: `${OSS}images/my/store_image4.jpg`, overlay: null },
{ type: 'image', url: `${OSS}images/my/store_image5.jpg`, overlay: 8 },
// 功能卡片数据
const storeMenus = ref([
{
id: 1,
title: '包间管理',
icon: roomIcon,
path: '/pages/store/room-manage',
},
{
id: 2,
title: '设备控制',
icon: deviceIcon,
path: '/pages/store/device',
},
{
id: 3,
title: '包间预定',
icon: bookroomIcon,
path: '/pages/store/bookroom',
},
{
id: 4,
title: '订单续订',
icon: renewIcon,
path: '/pages/store/renew',
},
])
// 格式化账号显示（152****3412格式）
function formatAccount(account: string) {
if (!account)
return ''
if (account.length <= 7)
return account
return `${account.substring(0, 3)}****${account.substring(account.length - 4)}`
}
onShow(() => {
const userStore = useUserStore()
isLogin.value = userStore.isLoggedIn
console.log('🚀 ~ isLogin.value:', 1)
if (isLogin.value) {
console.log('🚀 ~ isLogin.value:', 3)
// 获取用户详情信息接口
getUserInfo().then((res) => {
user.value = res
})
}
else {
console.log('🚀 ~ isLogin.value:', 4)
Object.keys(user.value).forEach((key) => {
user.value[key] = ''
})
}
})
onLoad(() => {
uni.$on('clearUser', () => {
console.log('🚀 ~ isLogin.value:', 2)
const userStore = useUserStore()
isLogin.value = userStore.isLoggedIn
Object.keys(user.value).forEach((key) => {
user.value[key] = ''
})
})
})
onUnload(() => {
uni.$off('clearUser')
})
const My = {
// 跳转到个人信息
handleToProfile: () => {
if (!isLogin.value) {
router.navigateTo('/pages/my/profile')
}
else {
router.navigateTo('/pages/login/login')
}
const Store = {
/**
* 点击功能卡片
*/
handleClickMenu: (item: any) => {
router.navigateTo(item.path)
},
// 点击显示客服电话
handleShowService: () => {
showServiceMobile.value = true
sheetMenu.value = [
{ name: '400-800-8888' },
]
/**
* 点击更多选项
*/
handleMore: () => {
// TODO: 实现更多选项功能
console.log('更多选项')
},
// 选择菜单-拨打客服电话
handleSelectMenu: (item: any) => {
uni.makePhoneCall({
phoneNumber: item.item.name,
})
},
// 跳转到设置页面
handleToSettings: () => {
// TODO: 跳转到设置页面
console.log('跳转到设置页面')
},
// 编辑门店信息
handleEditStore: () => {
// TODO: 编辑门店信息
console.log('编辑门店信息')
},
// 预览媒体（视频/图片）
handlePreviewMedia: (index: number) => {
const item = storeMediaList.value[index]
if (item.type === 'video') {
// TODO: 播放视频
console.log('播放视频', item.url)
}
else {
// 预览图片
const urls = storeMediaList.value
.filter(i => i.type === 'image' && !i.overlay)
.map(i => i.url)
uni.previewImage({
current: index,
urls,
})
}
/**
* 点击目标图标
*/
handleTarget: () => {
// TODO: 实现目标功能
console.log('目标功能')
},
}
</script>
<template>
<view>
<view class="home-bg fixed left-0 top-0 w-[100%]" :style="{ backgroundImage: headerBg ? `url('${headerBg}')` : 'none' }">
<wd-navbar safe-area-inset-top :bordered="false" custom-style="background-color: transparent !important;">
<template #left>
<view class="ml-16rpx flex items-center" @click="My.handleToSettings" />
</template>
<template #right>
<view class="right-slot mr-16rpx flex">
<view class="mr-16rpx flex flex-col" @click="My.handleShowService">
<wd-icon name="setting" color="#fff" size="16px" />
</view>
</view>
</template>
</wd-navbar>
<!-- 导航栏 -->
<view>
<navbar title="门店管理" custom-class="!bg-white" />
</view>
<view class="pb-0rpx" :style="{ paddingTop: `${navbarHeight}px` }">
<!-- 账号昵称显示 -->
<view class="user-info-bg relative z-10 ml-30rpx mr-30rpx flex items-center" :style="{ backgroundImage: headerBg ? `url('${headerBg}')` : 'none' }">
<view class="relative z-10">
<wd-img width="120rpx" height="120rpx" :src="(isLogin && user.avatar) ? user.avatar : defaultAvatar" mode="aspectFill" round />
</view>
<view class="relative z-10 ml-22rpx flex flex-1 items-center justify-between">
<view class="flex-1" @click="My.handleToProfile">
<view class="ml-8rpx flex items-center text-36rpx leading-50rpx" style="color: #fff;">
{{ isLogin ? user.nickname : '立即登录' }}
<wd-icon v-if="isLogin" name="arrow-right" size="24rpx" color="#fff" class="ml-8rpx" />
</view>
<view v-if="isLogin" class="ml-8rpx mt-8rpx text-24rpx leading-34rpx" style="color: #fff;">
账号: {{ formatAccount(user.account || user.mobile) }}
</view>
<!-- 功能卡片网格 -->
<view class="px-30rpx pt-40rpx">
<view class="grid grid-cols-2 gap-30rpx">
<view
v-for="item in storeMenus"
:key="item.id"
class="flex flex-col items-center rounded-16rpx bg-white p-40rpx"
@click="Store.handleClickMenu(item)"
>
<!-- 图标区域 -->
<view class="mb-24rpx h-160rpx w-160rpx flex items-center justify-center rounded-16rpx bg-[#F0F9FF]">
<wd-img width="120rpx" height="120rpx" :src="item.icon" mode="aspectFit" />
</view>
<view class="relative ml-20rpx" @click="router.navigateTo('/bundle/wallet/wallet')">
<view class="h-148rpx w-300rpx">
<wd-img width="100%" height="100%" :src="`${OSS}images/my/my_image3.png`" mode="aspectFill" />
</view>
<view class="absolute bottom-12rpx left-24rpx">
<view class="flex items-center">
<view class="text-30rpx text-[#303133] font-bold leading-36rpx">
￥{{ isLogin ? user.user_money : '0.00' }}
</view>
</view>
<view class="ml-0rpx mt-4rpx text-20rpx text-[#909399] leading-28rpx">
钱包余额
</view>
</view>
</view>
</view>
</view>
<!-- 门店信息区域 -->
<view class="store-info-card mt-28rpx bg-white py-30rpx pl-30rpx">
<view class="mb-24rpx text-32rpx text-[#303133] font-bold leading-44rpx">
门店茶址24小时智能茶室(中新店)地址
</view>
<view class="mb-16rpx flex items-center text-24rpx text-[#606266] leading-40rpx">
<text class="w-140rpx">抖音uid:</text>
<text class="flex-1 text-[#000]">{{ storeInfo.douyin_uid || '236598984587' }}</text>
</view>
<view class="mb-16rpx flex items-center text-24rpx text-[#606266] leading-40rpx">
<text class="w-140rpx">门店地址:</text>
<text class="flex-1 text-[#000]">{{ storeInfo.address || '上海浦东新区新金桥路58号新银东大厦 15楼F室' }}</text>
</view>
<view class="relative mb-16rpx flex items-center">
<view class="flex items-center text-24rpx text-[#606266] leading-40rpx">
<text class="w-140rpx">营业时间:</text>
<text class="flex-1 text-[#000]">{{ storeInfo.business_hours || '08:00-22:00' }}</text>
</view>
<view class="modify-btn absolute right-0 flex items-center px-20rpx py-8rpx" :style="{ backgroundImage: modifyBg ? `url('${modifyBg}')` : 'none' }" @click="My.handleEditStore">
<wd-img width="24rpx" height="24rpx" :src="editIcon" class="mr-8rpx" />
<text class="text-24rpx text-[#fff]">修改</text>
</view>
</view>
<view class="flex items-center text-24rpx text-[#606266] leading-40rpx">
<text class="w-140rpx">联系电话:</text>
<text class="flex-1 text-[#000]">{{ storeInfo.contact_phone || '021-8888888' }}</text>
</view>
</view>
<!-- 门店视频/图片区域 -->
<view class="bg-white px-30rpx">
<view class="mb-24rpx text-32rpx text-[#303133] font-bold leading-44rpx">
门店视频/图片
</view>
<view class="grid grid-cols-3 gap-16rpx">
<view
v-for="(item, index) in storeMediaList"
:key="index"
class="relative aspect-square w-full overflow-hidden rounded-8rpx"
@click="My.handlePreviewMedia(index)"
>
<wd-img
width="100%"
height="100%"
:src="item.url"
mode="aspectFill"
/>
<!-- 视频播放图标 -->
<view v-if="item.type === 'video'" class="absolute inset-0 flex items-center justify-center">
<wd-img width="60rpx" height="60rpx" :src="playIcon" />
</view>
<!-- +8 遮罩 -->
<view v-if="item.overlay" class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50">
<text class="text-32rpx text-[#fff] font-bold">+{{ item.overlay }}</text>
</view>
<!-- 标题 -->
<view class="text-30rpx text-[#303133] leading-42rpx">
{{ item.title }}
</view>
</view>
</view>
</view>
<!-- 客服电话 -->
<wd-action-sheet v-model="showServiceMobile" :actions="sheetMenu" cancel-text="取消" @close="showServiceMobile = false" @select="My.handleSelectMenu" />
</view>
</template>
<style lang="scss">
page {
background: #fff;
}
.home-bg {
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: top center;
min-height: 450rpx;
}
.user-info-bg {
background-size: 100% auto;
background-repeat: no-repeat;
background-position: top center;
padding-top: 20rpx;
padding-bottom: 20rpx;
min-height: 200rpx;
}
.store-info-card {
position: relative;
z-index: 10;
border-radius: 32rpx 32rpx 0 0;
}
.modify-btn {
position: absolute;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
min-width: 160rpx;
height: 90rpx;
justify-content: space-around;
}
.right-slot {
padding-right: v-bind(rightPadding);
page {
background: #f6f7f8;
}
</style>