预约.
This commit is contained in:
parent
4bf41e8e34
commit
7b28ea6b5c
26
pages.json
26
pages.json
|
|
@ -97,6 +97,29 @@
|
|||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/me/my-message-page",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/appointment/book-room-page",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/me/my-earnings-page",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
|
|
@ -118,7 +141,8 @@
|
|||
"text": "首页"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/appointment/appointment-page",
|
||||
// "pagePath": "pages/appointment/appointment-page",
|
||||
"pagePath": "pages/appointment/book-room-page",
|
||||
"iconPath": "/static/tabbar/appointment.png",
|
||||
"selectedIconPath": "/static/tabbar/appointment_s.png",
|
||||
"text": "预约"
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
176
pages/appointment/book-room-page.vue
Normal file
176
pages/appointment/book-room-page.vue
Normal file
|
|
@ -0,0 +1,176 @@
|
|||
<template>
|
||||
<view class="content column">
|
||||
|
||||
<view class="column" style="width: 100%; height: 308rpx; background-color: white;">
|
||||
<view style="flex: 1;"></view>
|
||||
<text class="page-title">发起预约</text>
|
||||
<view class="row" style="width: 90%; height: 120rpx; margin: 20rpx auto 0;">
|
||||
<view class="column center" v-for="(item,index) in dateList" :style="setBgColor(index)"
|
||||
@click="clickTime(index)" style="width: 96rpx; height: 100%;">
|
||||
<text style="font-size: 26rpx;">{{item.time}}</text>
|
||||
<text style="font-size: 22rpx;">{{item.weekday}}</text>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<text style="margin-top: 20rpx; margin-left: 32rpx; font-size: 24rpx;">营业时间：早XX点 至 晚XX点</text>
|
||||
|
||||
<view class="row"
|
||||
style="width: 686rpx; height: 56rpx; background-color: #2ED9BF; border-radius: 5rpx; margin: 20rpx auto 0; align-items: center;">
|
||||
<text style="font-size: 22rpx; color: #262626; margin-left: 16rpx;">查看当前时段空闲时间</text>
|
||||
<up-switch style="margin-right: 16rpx; margin-left: auto; " v-model="value" @change="change"
|
||||
size="20"></up-switch>
|
||||
</view>
|
||||
|
||||
<view class="" style="width: 100%; flex: 1; margin-top: 12rpx; overflow-y: auto;">
|
||||
|
||||
<view class="" v-for="(item,index) in roomList"
|
||||
style="position: relative; width: 706rpx; height: 270rpx; border-radius: 20rpx; background-color: white; margin: 0 auto 20rpx;">
|
||||
|
||||
|
||||
<image src=""
|
||||
style="width: 180rpx; height: 156rpx; background-color: #DEDEDE; border-radius: 14rpx; position: absolute; top: 10rpx; left: 10rpx;"
|
||||
mode=""></image>
|
||||
|
||||
<view class="column" style=" position: absolute; left: 200rpx; top: 20rpx;">
|
||||
<text style="font-size: 28rpx;">房间号或房间名</text>
|
||||
<text style="font-size: 20rpx;">房间类型</text>
|
||||
|
||||
<text style="font-size: 24rpx; margin-top: 24rpx;">¥30/4小时</text>
|
||||
<text style="font-size: 24rpx; color: #FF0000;">会员价¥30/5小时</text>
|
||||
</view>
|
||||
|
||||
<text
|
||||
style="font-size: 20rpx; position: absolute; top: 10rpx; right: 16rpx; color: #FF9901;">当前使用中</text>
|
||||
|
||||
<view class="center"
|
||||
style="width: 92rpx; height: 46rpx; background-color: #20BBA4; border-radius: 52rpx; font-size: 26rpx; color: white; position: absolute; bottom: 94rpx; right: 10rpx;">
|
||||
预约
|
||||
</view>
|
||||
|
||||
<view class="row" style="align-items: center; position: absolute; left: 10rpx; bottom: 60rpx;">
|
||||
<view style="width: 24rpx; height: 4rpx; background-color: #FF9901;"></view>
|
||||
<text style="font-size: 16rpx; color: #323232; margin-left: 8rpx;">已预定时段</text>
|
||||
<view style="width: 24rpx; height: 4rpx; background-color: #E6E6E6; margin-left: 22rpx;"></view>
|
||||
<text style="font-size: 16rpx; color: #323232; margin-left: 8rpx;">已预定时段</text>
|
||||
</view>
|
||||
|
||||
<view class="row" style="align-items: center; position: absolute; left: 10rpx; bottom: 14rpx;">
|
||||
|
||||
<view class="column center" style="margin-right: 20rpx;">
|
||||
<view style="width: 70rpx; height: 4rpx; background-color: #FF9901;"></view>
|
||||
<text style="font-size: 12rpx; margin-top: 4rpx;">凌晨</text>
|
||||
</view>
|
||||
<view class="column center" style="margin-right: 20rpx;">
|
||||
<view style="width: 70rpx; height: 4rpx; background-color: #E6E6E6;"></view>
|
||||
<text style="font-size: 12rpx; margin-top: 4rpx;">上午</text>
|
||||
</view>
|
||||
<view class="column center" style="margin-right: 20rpx;">
|
||||
<view style="width: 70rpx; height: 4rpx; background-color: #FF9901;"></view>
|
||||
<text style="font-size: 12rpx; margin-top: 4rpx;">下午</text>
|
||||
</view>
|
||||
<view class="column center" style="margin-right: 20rpx;">
|
||||
<view style="width: 70rpx; height: 4rpx; background-color: #E6E6E6;"></view>
|
||||
<text style="font-size: 12rpx; margin-top: 4rpx;">晚上</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentTimeIndex: 0,
|
||||
dateList: [],
|
||||
value: false,
|
||||
roomList: [1, 2, 3, 4, 5, 6],
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.getDateList();
|
||||
},
|
||||
|
||||
methods: {
|
||||
change(e) {
|
||||
console.log('change', e);
|
||||
},
|
||||
/**
|
||||
* 生成日期列表：当天+后续6天，共7天
|
||||
*/
|
||||
getDateList() {
|
||||
const list = [];
|
||||
const today = new Date(); // 当天日期（用于判断是否为今天）
|
||||
const weekNames = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
|
||||
|
||||
for (let i = 0; i < 7; i++) {
|
||||
const current = new Date();
|
||||
current.setDate(today.getDate() + i); // 计算第i天的日期
|
||||
|
||||
// 1. 处理时间格式：月.日（如10.1、12.30）
|
||||
const month = current.getMonth() + 1; // 月份从0开始
|
||||
const day = current.getDate();
|
||||
const time = `${month}.${day}`;
|
||||
|
||||
// 2. 处理星期显示：当天显示“今天”，其他显示周几
|
||||
let weekday;
|
||||
if (i === 0) {
|
||||
weekday = "今天"; // 当天
|
||||
} else {
|
||||
const weekIndex = current.getDay(); // 0=周日，6=周六
|
||||
weekday = weekNames[weekIndex];
|
||||
}
|
||||
|
||||
list.push({
|
||||
time,
|
||||
weekday
|
||||
});
|
||||
}
|
||||
|
||||
this.dateList = list;
|
||||
},
|
||||
|
||||
//设置背景
|
||||
setBgColor(index) {
|
||||
if (this.currentTimeIndex == index) {
|
||||
return {
|
||||
backgroundColor: "#20BBA4",
|
||||
color: "#FFFFFF",
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
backgroundColor: "#FFFFFF",
|
||||
color: "#000000",
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
clickTime(index) {
|
||||
this.currentTimeIndex = index;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: #F7F7F7;
|
||||
}
|
||||
|
||||
/* 页面标题 */
|
||||
.page-title {
|
||||
margin-top: 100rpx;
|
||||
text-align: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -154,7 +154,8 @@ const commonActions = [
|
|||
{ label: '常见问题', icon: '@@:app/static/me/cjwt.png', action: 'faq' },
|
||||
{ label: '黑名单', icon: '@@:app/static/me/hmd.png', action: 'blacklist' },
|
||||
{ label: '联系我们', icon: '@@:app/static/me/lxwm.png', action: 'contact' },
|
||||
|
||||
{ label: '我的消息', icon: '@@:app/static/me/lxwm.png', action: 'message' },
|
||||
{ label: '我的收益', icon: '@@:app/static/me/lxwm.png', action: 'revenue' },
|
||||
]
|
||||
|
||||
const handleCommonAction = (item) => {
|
||||
|
|
@ -192,6 +193,16 @@ const handleCommonAction = (item) => {
|
|||
url: '/pages/other/agreement?type=about'
|
||||
});
|
||||
break;
|
||||
case 'message':
|
||||
uni.navigateTo({
|
||||
url: '/pages/me/my-message-page'
|
||||
});
|
||||
break;
|
||||
case 'revenue':
|
||||
uni.navigateTo({
|
||||
url: '/pages/me/my-earnings-page'
|
||||
});
|
||||
break;
|
||||
default:
|
||||
uni.showToast({ title: '敬请期待', icon: 'none' });
|
||||
break;
|
||||
|
|
|
|||
46
pages/me/my-earnings-page.vue
Normal file
46
pages/me/my-earnings-page.vue
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<template>
|
||||
<view class="content column">
|
||||
<view class="row" style="width: 90%; margin: 100rpx auto 0; justify-content: space-between;">
|
||||
<image src="/static/back.png" style="width: 40rpx; height: 40rpx;" @click="goBack()" mode=""></image>
|
||||
<text style="font-size: 30rpx;">我的收益</text>
|
||||
<view style="width: 40rpx;"></view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="" style="width: 728rpx; height: 2rpx; background-color: #EBEBEB; margin: 40rpx auto 0;"></view>
|
||||
|
||||
|
||||
<view class=""
|
||||
style="width: 686rpx; height: 282rpx; box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.08); margin: 20rpx auto 0; background-color: white;">
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 返回上一页
|
||||
goBack() {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: #F7F7F7;
|
||||
}
|
||||
</style>
|
||||
87
pages/me/my-message-page.vue
Normal file
87
pages/me/my-message-page.vue
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
<template>
|
||||
<view class="content column">
|
||||
<view class="row" style="width: 90%; margin: 100rpx auto 0; justify-content: space-between;">
|
||||
<image src="/static/back.png" style="width: 40rpx; height: 40rpx;" @click="goBack()" mode=""></image>
|
||||
<text style="font-size: 30rpx;">我的消息</text>
|
||||
<view style="width: 40rpx;"></view>
|
||||
</view>
|
||||
|
||||
<view class="row" style="width: 100%; margin-top: 40rpx; margin-left: 56rpx;">
|
||||
<view class="center" @click="clickTab(index)"
|
||||
style="margin-right: 20rpx; width: 134rpx; height: 48rpx; font-size: 26rpx; border-radius: 34rpx;"
|
||||
:style="setBgColor(index)" v-for="(item,index) in teabList">
|
||||
{{item}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="" style="width: 100%; height: 1rpx; background-color: #EBEBEB; margin-top: 20rpx;"></view>
|
||||
|
||||
<view class="column"
|
||||
style="width: 100%; flex: 1; margin-top: 20rpx; overflow-y: auto;">
|
||||
<view class="column" v-for="(item,index) in messageList"
|
||||
style="width: 686rpx; margin: 0rpx auto 30rpx; background-color: white; border-radius: 32rpx; ">
|
||||
<text style="font-size: 32rpx; margin-top: 22rpx; margin-left: 30rpx;">标题标题标题</text>
|
||||
|
||||
<text
|
||||
style="font-size: 32rpx; margin-top: 10rpx; margin-left: 30rpx;">正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文
|
||||
正文正文正文正文正文正文正文</text>
|
||||
|
||||
<text
|
||||
style="font-size: 32rpx; margin-top: 70rpx; margin-left: auto; margin-right: 18rpx; margin-bottom: 10rpx;">2025//1/1
|
||||
11：12</text>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentIndex: 0,
|
||||
teabList: ["全部", "私信"],
|
||||
messageList: [1, 2, 3, 4, 5]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 返回上一页
|
||||
goBack() {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
},
|
||||
|
||||
setBgColor(index) {
|
||||
if (this.currentIndex == index) {
|
||||
return {
|
||||
backgroundColor: '#C4FFDF',
|
||||
color: '#00AC4E',
|
||||
border: 'solid 1rpx #00AC4E',
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
backgroundColor: '#FFFFFF',
|
||||
color: '#000000',
|
||||
border: 'solid 1rpx #EBEBEB',
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
clickTab(index) {
|
||||
this.currentIndex = index;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: #F7F7F7;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user