删除多余页面
This commit is contained in:
parent
aecf09dbc0
commit
169ae83a66
|
|
@ -1,164 +0,0 @@
|
|||
<template>
|
||||
<!-- 空白loading页 -->
|
||||
<view class="loading-container">
|
||||
<view class="loading-text">正在登录中，请稍候...</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
login
|
||||
} from '@/api/login.js'
|
||||
|
||||
export default {
|
||||
onLoad(options) {
|
||||
// 页面加载 → 自动执行流程
|
||||
this.getToken()
|
||||
this.autoLogin(options)
|
||||
},
|
||||
|
||||
methods: {
|
||||
getToken() {
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.request({
|
||||
url: '/epoint-web-cs/rest/oauth2/token',
|
||||
method: 'POST',
|
||||
header: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
data: {
|
||||
client_id: '316f983b-2b93-4c57-b912-c00e05aceed2', // 你接口需要的参数名
|
||||
client_secret: 'cd2cf239-1506-47bb-9b63-507b6b759a06',
|
||||
grant_type: 'password',
|
||||
platform: 'mobile',
|
||||
username: '马贤宝',
|
||||
password: 'Epoint@123',
|
||||
// 其他需要的参数继续加
|
||||
},
|
||||
success: (res) => {
|
||||
const data = res.data
|
||||
console.log(data, 'data')
|
||||
|
||||
// 接口返回成功判断（根据接口标准结构）
|
||||
if (data.status.code === 1) {
|
||||
resolve(data.custom) // 返回用户信息：name, phone, idCard
|
||||
} else {
|
||||
reject(new Error(data.status.text || '获取用户信息失败'))
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 自动登录流程
|
||||
*/
|
||||
async autoLogin(options) {
|
||||
try {
|
||||
// 1. 从URL获取token
|
||||
const token = options.token
|
||||
if (!token) {
|
||||
uni.showToast({
|
||||
title: '未获取到登录凭证',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 2. 使用token 请求【获取用户信息接口】
|
||||
const userInfo = await this.getUserInfo(token)
|
||||
|
||||
|
||||
// 4. 执行你系统的登录逻辑（保存信息）
|
||||
this.doLocalLogin(userInfo)
|
||||
|
||||
// 5. 登录成功 → 跳首页
|
||||
// uni.switchTab({
|
||||
// url: '/pages/home/home' // 你的首页路径
|
||||
// })
|
||||
|
||||
} catch (err) {
|
||||
console.error('登录失败：', err)
|
||||
uni.showToast({
|
||||
title: err.message || '登录失败，请重试',
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 请求接口：获取用户信息（你给的正式接口）
|
||||
* @param {string} token
|
||||
*/
|
||||
getUserInfo(token) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let url = '/epoint-web-cs/rest/wechatloginrest/getuserinfo'
|
||||
|
||||
// if (process.env.NODE_ENV === 'development') {
|
||||
// // 开发环境接口地址
|
||||
// url = 'epoint-web-cs/rest/wechatloginrest/getuserinfo'
|
||||
// } else if (process.env.NODE_ENV === 'production') {
|
||||
// // 正式环境接口地址
|
||||
// url = 'epoint-web/rest/wechatloginrest/getuserinfo'
|
||||
// }
|
||||
|
||||
uni.request({
|
||||
url: url,
|
||||
method: 'POST',
|
||||
header: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
'authorization': 'Bearer ' + token // 按接口要求携带token
|
||||
},
|
||||
success: (res) => {
|
||||
const data = res.data
|
||||
|
||||
// 接口返回成功判断（根据接口标准结构）
|
||||
if (data.status.code === 1) {
|
||||
resolve(data.custom) // 返回用户信息：name, phone, idCard
|
||||
} else {
|
||||
reject(new Error(data.status.text || '获取用户信息失败'))
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 你系统本地登录：缓存token + 用户信息
|
||||
*/
|
||||
doLocalLogin(userInfo) {
|
||||
login({
|
||||
// username: userInfo.idnumber,
|
||||
username: userInfo.mobile,
|
||||
|
||||
grant_type: "third"
|
||||
})
|
||||
.then(data => {
|
||||
this.$u.func.login(data, '/pages/home/home')
|
||||
})
|
||||
.catch(err => {
|
||||
this.$u.func.showToast({
|
||||
title: '用户名或密码错误'
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.loading-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,260 +0,0 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
|
||||
<!-- 蓝色头部信息区 -->
|
||||
<view class="header-section">
|
||||
<view class="serial-no">流水号：{{orderInfo.code}}</view>
|
||||
<view class="time-info">{{orderInfo.bookingTime}}</view>
|
||||
<view class="project-info"> {{orderInfo.itemName}} </view>
|
||||
</view>
|
||||
|
||||
<!-- 取号信息卡片 -->
|
||||
<view class="info-card new-card" v-if="isTicketInfoShow">
|
||||
<view class="ticket_status">无感取号成功</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">排队号</text>
|
||||
<text class="info-value">{{ticketInfo.queueNum}}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">窗口号</text>
|
||||
<text class="info-value">{{ticketInfo.counterlist}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 详情信息卡片 -->
|
||||
<view class="info-card">
|
||||
<view class="info-row">
|
||||
<text class="info-label">预约大厅</text>
|
||||
<text class="info-value">广西区直住房保障中心</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">预约部门</text>
|
||||
<text class="info-value">{{orderInfo.deptName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-card">
|
||||
<view class="info-row">
|
||||
<text class="info-label">姓名</text>
|
||||
<text class="info-value">{{ userinfo.name }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">手机号</text>
|
||||
<text class="info-value">{{ userinfo.phone }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">证件类型</text>
|
||||
<text class="info-value">身份证</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">证件号码</text>
|
||||
<text class="info-value">{{ userinfo.idCard }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 取消预约按钮 -->
|
||||
<view class="btn-wrap">
|
||||
<button class="btn-cancel" v-if="orderInfo.status==1" @click="handleCancel">取消预约</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getDetail,
|
||||
getUserInfo,
|
||||
cancel,
|
||||
getIsSuccessTicket
|
||||
} from '@/api/reserve.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 可通过页面传参动态获取以下数据
|
||||
isTicketInfoShow: false,
|
||||
ticketInfo: {},
|
||||
orderInfo: {},
|
||||
userinfo: {},
|
||||
id: '',
|
||||
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.id = options.id
|
||||
this.getTicketInfo()
|
||||
this.getUserInfo()
|
||||
this.getDetail()
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 取号详情
|
||||
getTicketInfo() {
|
||||
getIsSuccessTicket({
|
||||
yyNo: this.id
|
||||
}).then(res => {
|
||||
if (res.code) {
|
||||
this.isTicketInfoShow = Object.keys(res.data).length > 0 ? true : false
|
||||
this.ticketInfo = res.data
|
||||
}
|
||||
})
|
||||
},
|
||||
// 预约详情
|
||||
getDetail() {
|
||||
getDetail({
|
||||
id: this.id
|
||||
}).then(res => {
|
||||
this.orderInfo = res.data
|
||||
|
||||
})
|
||||
},
|
||||
// 个人信息详情
|
||||
getUserInfo() {
|
||||
getUserInfo().then(res => {
|
||||
this.userinfo = res.data
|
||||
})
|
||||
},
|
||||
// 返回上一页
|
||||
handleGoBack() {
|
||||
uni.navigateBack()
|
||||
},
|
||||
// 取消预约
|
||||
handleCancel() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要取消该预约吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
cancel({
|
||||
id: this.orderInfo.id
|
||||
}).then(res => {
|
||||
if (res.code == 200) {
|
||||
uni.showToast({
|
||||
title: '取消成功',
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
uni.navigateBack({
|
||||
delta: 1 // 返回的页面数
|
||||
})
|
||||
}, 2000)
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 全局容器 */
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 蓝色头部信息区 */
|
||||
.header-section {
|
||||
width: 100%;
|
||||
background: linear-gradient(to right, rgba(75, 112, 252, 1), rgba(67, 195, 252, 1));
|
||||
padding: 40rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.serial-no {
|
||||
font-size: 32rpx;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
margin-bottom: 30rpx;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.time-info {
|
||||
font-size: 38rpx;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
margin-bottom: 15rpx;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.project-info {
|
||||
font-size: 32rpx;
|
||||
color: #ffffff;
|
||||
line-height: 1.5;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
/* 信息卡片 */
|
||||
.info-card {
|
||||
background-color: #ffffff;
|
||||
border-radius: 24rpx;
|
||||
margin: 20rpx 30rpx;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.new-card {
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
|
||||
.ticket_status {
|
||||
margin: 0 auto;
|
||||
padding: 10rpx 32rpx;
|
||||
width: fit-content;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: rgba(3, 195, 106, 1);
|
||||
background-color: rgba(220, 255, 239, 1);
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
width: 220rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
flex: 1;
|
||||
font-size: 34rpx;
|
||||
color: #333333;
|
||||
text-align: right;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 取消预约按钮 */
|
||||
.btn-wrap {
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background-color: rgba(255, 239, 239, 1);
|
||||
color: rgba(244, 54, 54, 1);
|
||||
border-radius: 44rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: 500;
|
||||
border: 2rpx solid rgba(255, 195, 195, 1);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,204 +0,0 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<!-- 预约列表 -->
|
||||
<view class="list-container">
|
||||
<!-- 预约成功状态 -->
|
||||
<view class="reserve-item" v-for="(item, index) in successList" :key="`success-${index}`">
|
||||
<view class="item-header">
|
||||
<text class="item-time">{{ item.bookingTime }}</text>
|
||||
<text
|
||||
:class="['status', item.status == 1 ? 'success' : 'canceled']">{{ item.status == 1 ? '预约成功' : '已取消' }}</text>
|
||||
</view>
|
||||
<view class="item-content">
|
||||
<text class="item-project">{{ item.itemName }}</text>
|
||||
</view>
|
||||
<view class="item-btns">
|
||||
<button class="btn-cancel" v-if="item.status == 1" @click="handleCancel(item)">取消预约</button>
|
||||
<button class="btn-cancel" v-if="item.status == 4">{{getStatus(item.status)}}</button>
|
||||
<button class="btn-detail" @click="handleDetail(item)">查看详情</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-tip" v-if="successList.length === 0"> 暂无预约记录 </view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getUserInfo,
|
||||
myReserve,
|
||||
cancel
|
||||
} from '@/api/reserve.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 预约成功列表（和设计图完全一致）
|
||||
successList: [],
|
||||
userinfo: {},
|
||||
statusList: [],
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getUserInfo()
|
||||
this.statusList = uni.getStorageSync('statusList');
|
||||
},
|
||||
methods: {
|
||||
getStatus(code){
|
||||
return this.statusList.find(item=>item.dictKey == code)?.dictValue
|
||||
},
|
||||
getUserInfo() {
|
||||
getUserInfo().then(res => {
|
||||
this.userinfo = res.data
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
getList() {
|
||||
let params = {
|
||||
size: 10,
|
||||
current: 1,
|
||||
idCard: this.userinfo.idCard,
|
||||
descs: 'update_time'
|
||||
}
|
||||
myReserve(params).then(res => {
|
||||
this.successList = res.data.records
|
||||
})
|
||||
},
|
||||
// 返回上一页
|
||||
handleGoBack() {
|
||||
uni.navigateBack()
|
||||
},
|
||||
// 取消预约
|
||||
handleCancel(item) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要取消该预约吗？',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
cancel({
|
||||
id: item.id
|
||||
}).then(res => {
|
||||
if (res.code == 200) {
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 查看详情
|
||||
handleDetail(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/myReserve/detail?id=${item.id}`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 全局容器 */
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 列表容器 */
|
||||
.list-container {
|
||||
flex: 1;
|
||||
padding: 20rpx 30rpx;
|
||||
}
|
||||
|
||||
/* 预约项卡片 */
|
||||
.reserve-item {
|
||||
background-color: #ffffff;
|
||||
border-radius: 24rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.item-time {
|
||||
font-size: 34rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.status.success {
|
||||
background-color: #e6f9e6;
|
||||
color: #00b578;
|
||||
}
|
||||
|
||||
.status.canceled {
|
||||
background-color: #f0f0f0;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.item-project {
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.item-btns {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
margin: 0;
|
||||
width: 200rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
background-color: rgba(255, 239, 239, 1);
|
||||
color: rgba(244, 54, 54, 1);
|
||||
border-radius: 35rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
border: 2rpx solid rgba(255, 195, 195, 1);
|
||||
}
|
||||
|
||||
.btn-detail {
|
||||
margin: 0;
|
||||
width: 200rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
background-color: rgba(242, 247, 255, 1);
|
||||
color: rgba(49, 134, 255, 1);
|
||||
border-radius: 35rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
border: 2rpx solid rgba(208, 227, 255, 1);
|
||||
}
|
||||
|
||||
/* 空状态提示 */
|
||||
.empty-tip {
|
||||
text-align: center;
|
||||
padding: 100rpx 0;
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,199 +0,0 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<!-- 预约信息卡片 -->
|
||||
<view class="info-card">
|
||||
<view class="info-row">
|
||||
<text class="info-label">预约项目</text>
|
||||
<text class="info-value">{{ itemData.name }}</text>
|
||||
</view>
|
||||
<view class="info-row split-row">
|
||||
<text class="info-label">预约时间</text>
|
||||
<text class="info-value">{{ reserveTime }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">预约大厅</text>
|
||||
<text class="info-value">广西区直住房保障中心</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">预约部门</text>
|
||||
<text class="info-value">{{ itemData.deptName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 个人信息卡片 -->
|
||||
<view class="info-card">
|
||||
<view class="info-row">
|
||||
<text class="info-label">姓名</text>
|
||||
<text class="info-value">{{ userinfo.name }}</text>
|
||||
</view>
|
||||
<view class="info-row split-row">
|
||||
<text class="info-label">手机号</text>
|
||||
<text class="info-value">{{ userinfo.phone }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">证件类型</text>
|
||||
<text class="info-value">身份证</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">证件号码</text>
|
||||
<text class="info-value">{{ userinfo.idCard }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部按钮栏 -->
|
||||
<view class="btn-bar">
|
||||
<button class="btn-back" @click="handleGoBack">返回</button>
|
||||
<button class="btn-confirm" @click="handleConfirm">确认预约</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getUserInfo,
|
||||
submit
|
||||
} from '@/api/reserve.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userinfo: {},
|
||||
itemData: {},
|
||||
reserveTime: ''
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.itemData = JSON.parse(decodeURIComponent(options.data))
|
||||
this.reserveTime = options.time
|
||||
// this.userinfo = this.$store.state.userInfo
|
||||
this.getUserInfo()
|
||||
},
|
||||
methods: {
|
||||
// 返回上一页
|
||||
handleGoBack() {
|
||||
uni.navigateBack()
|
||||
},
|
||||
getUserInfo(){
|
||||
getUserInfo().then(res=>{
|
||||
this.userinfo = res.data
|
||||
})
|
||||
},
|
||||
// 确认预约
|
||||
handleConfirm() {
|
||||
const params = {
|
||||
userId: this.userinfo.id,
|
||||
applicant: this.userinfo.name,
|
||||
phone: this.userinfo.phone,
|
||||
idCard: this.userinfo.idCard,
|
||||
itemId: this.itemData.id,
|
||||
itemName: this.itemData.name,
|
||||
deptId: this.itemData.deptId,
|
||||
bookingDate: this.reserveTime.slice(0, 10),
|
||||
timeSlot: this.reserveTime.slice(11),
|
||||
}
|
||||
|
||||
submit(params).then(res => {
|
||||
if (res.code == 200) {
|
||||
uni.showToast({
|
||||
title: '预约成功！',
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
uni.reLaunch({
|
||||
url: '/pages/home/home'
|
||||
})
|
||||
}, 2000)
|
||||
}
|
||||
}).catch(err => {})
|
||||
|
||||
|
||||
// 可在此处添加跳转至预约成功页/首页逻辑
|
||||
// uni.reLaunch({ url: '/pages/index/index' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 全局容器 */
|
||||
.container {
|
||||
min-height: 92vh;
|
||||
background-color: #f5f5f5;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 信息卡片 */
|
||||
.info-card {
|
||||
background-color: #ffffff;
|
||||
border-radius: 24rpx;
|
||||
margin: 20rpx 30rpx;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.split-row {
|
||||
border-bottom: 1rpx solid #eeeeee;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
width: 220rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
flex: 1;
|
||||
font-size: 34rpx;
|
||||
color: #333333;
|
||||
text-align: right;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 底部按钮栏 */
|
||||
.btn-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
background-color: #fff;
|
||||
gap: 30rpx;
|
||||
margin-top: auto;
|
||||
box-shadow: 0 -8rpx 20rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.btn-back {
|
||||
flex: 1;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background-color: rgba(242, 247, 255, 1);
|
||||
color: rgba(49, 134, 255, 1);
|
||||
border-radius: 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
border: 2rpx solid rgba(208, 227, 255, 1);
|
||||
}
|
||||
|
||||
.btn-confirm {
|
||||
flex: 2;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background-color: rgba(49, 134, 255, 1);
|
||||
color: #ffffff;
|
||||
border-radius: 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
border: 2rpx solid rgba(208, 227, 255, 1);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,300 +0,0 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<!-- 顶部Tab切换 -->
|
||||
<view class="tab-bar">
|
||||
<view class="tab-item" :class="{ active: activeTab === 'department' }" @click="switchTab('department')">
|
||||
单位预约 </view>
|
||||
<view class="tab-item" :class="{ active: activeTab === 'person' }" @click="switchTab('person')"> 个人预约
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 搜索栏 -->
|
||||
<view class="search-bar">
|
||||
<view class="search-input-wrap">
|
||||
<view class="search-icon"></view>
|
||||
<input class="search-input" v-model="searchKeyword" clearable placeholder="请输入关键字搜索"
|
||||
placeholder-class="placeholder-class" @confirm="handleSearch" />
|
||||
</view>
|
||||
<button class="search-btn" @click="handleSearch">搜索</button>
|
||||
</view>
|
||||
|
||||
<!-- 部门列表 -->
|
||||
<!-- <view class="list-container">
|
||||
<view v-if="departmentList.length > 0">
|
||||
<view class="list-item" v-for="(item, index) in departmentList" :key="index"
|
||||
@click="handleDeptClick(item)">
|
||||
<view class="item-left">
|
||||
<view class="dot"></view>
|
||||
<text class="item-text">{{ item.deptName }}</text>
|
||||
</view>
|
||||
<view class="arrow"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="empty-tip">暂无事项数据</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 事项列表 -->
|
||||
<view class="list-container">
|
||||
<view v-if="itemList.length > 0">
|
||||
<view class="list-item" v-for="(item, index) in itemList" :key="index" @click="handleItemClick(item)">
|
||||
<view class="item-left">
|
||||
<view class="dot"></view>
|
||||
<text class="item-text">{{ item.name }}</text>
|
||||
</view>
|
||||
<view class="arrow"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
deptList,
|
||||
itemList
|
||||
} from '@/api/reserve.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeTab: 'department', // 当前激活的Tab：department-部门预约，person-事项预约
|
||||
searchKeyword: '', // 搜索关键词
|
||||
deptId: '',
|
||||
// 部门列表（和设计图完全一致）
|
||||
departmentList: [],
|
||||
itemList: [],
|
||||
type: 2 // 1个人, 2单位
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
if (option.id) {
|
||||
this.deptId = option.id
|
||||
// this.switchTab('person')
|
||||
} else {
|
||||
// this.getDeptList()
|
||||
}
|
||||
this.getItemList()
|
||||
},
|
||||
methods: {
|
||||
// Tab切换
|
||||
switchTab(tab) {
|
||||
if (this.activeTab === tab) return
|
||||
|
||||
if (tab == 'department') {
|
||||
// this.getDeptList()
|
||||
this.type = 2
|
||||
} else {
|
||||
this.type = 1
|
||||
}
|
||||
this.activeTab = tab
|
||||
this.searchKeyword = '' // 切换Tab清空搜索
|
||||
this.getItemList()
|
||||
// this.deptId = ''
|
||||
},
|
||||
// 搜索事件
|
||||
handleSearch() {
|
||||
// if (this.activeTab == 'department') {
|
||||
// // this.getDeptList()
|
||||
// } else {}
|
||||
this.getItemList()
|
||||
},
|
||||
// 部门列表项点击事件
|
||||
handleDeptClick(item) {
|
||||
this.deptId = item.id
|
||||
this.switchTab('person')
|
||||
},
|
||||
// 事项列表项点击事件
|
||||
handleItemClick(item) {
|
||||
const data = JSON.stringify(item)
|
||||
uni.navigateTo({
|
||||
url: `/pages/reserve/notice?data=${encodeURIComponent(data)}`
|
||||
})
|
||||
},
|
||||
// 获取部门列表
|
||||
getDeptList() {
|
||||
let params = {
|
||||
size: 10,
|
||||
current: 1,
|
||||
status: 1,
|
||||
deptName: this.searchKeyword
|
||||
}
|
||||
deptList(params).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.departmentList = res.data.records.filter(item => item.parentId != 0)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取事项列表
|
||||
getItemList() {
|
||||
// type:1个人, 2单位
|
||||
let params = {
|
||||
size: 10,
|
||||
current: 1,
|
||||
status: 1,
|
||||
// deptId: this.deptId || '',
|
||||
itemType: this.type,
|
||||
name: this.searchKeyword
|
||||
}
|
||||
itemList(params).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.itemList = res.data.records
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 全局容器 */
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* Tab栏 */
|
||||
.tab-bar {
|
||||
display: flex;
|
||||
background-color: #ffffff;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab-item.active {
|
||||
color: #409eff;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.tab-item.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 120rpx;
|
||||
height: 6rpx;
|
||||
background-color: #409eff;
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
|
||||
/* 搜索栏 */
|
||||
.search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx 30rpx;
|
||||
background-color: #f5f5f5;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.search-input-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #ffffff;
|
||||
border-radius: 50rpx;
|
||||
height: 70rpx;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999999"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.placeholder-class {
|
||||
color: #999999;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
width: 140rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
background: linear-gradient(to left, rgba(49, 134, 255, 1), rgba(21, 167, 255, 1));
|
||||
color: #ffffff;
|
||||
border-radius: 50rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 列表容器 */
|
||||
.list-container {
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #ffffff;
|
||||
border-radius: 24rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.item-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(to bottom, rgba(49, 134, 255, 1), rgba(21, 167, 255, 1));
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.item-text {
|
||||
font-size: 34rpx;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-right: 4rpx solid #165dff;
|
||||
border-top: 4rpx solid #165dff;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
/* 空状态提示 */
|
||||
.empty-tip {
|
||||
text-align: center;
|
||||
padding: 100rpx 0;
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,140 +0,0 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<!-- 协议内容区域 -->
|
||||
<view class="agreement-content">
|
||||
<view class="article" v-html="article"> </view>
|
||||
</view>
|
||||
|
||||
<!-- 底部按钮栏 -->
|
||||
<view class="btn-bar">
|
||||
<button class="btn-back" @click="handleGoBack">返回</button>
|
||||
<button class="btn-confirm" @click="handleConfirm">确定预约</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { noticeData } from '@/api/reserve.js'
|
||||
|
||||
export default {
|
||||
name: 'ConfirmPage',
|
||||
data() {
|
||||
return {
|
||||
article: '',
|
||||
itemData: {}
|
||||
}
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
this.itemData = JSON.parse(decodeURIComponent(options.data))
|
||||
this.getNotice()
|
||||
},
|
||||
methods: {
|
||||
// 返回上一页
|
||||
handleGoBack() {
|
||||
uni.navigateBack()
|
||||
},
|
||||
// 确定预约
|
||||
handleConfirm() {
|
||||
const data = JSON.stringify(this.itemData)
|
||||
uni.navigateTo({
|
||||
url: `/pages/reserve/timeSelect?data=${encodeURIComponent(data)}`
|
||||
})
|
||||
},
|
||||
getNotice() {
|
||||
let params = {
|
||||
descs: 'update_time',
|
||||
size: 10,
|
||||
current: 1,
|
||||
deptId: this.itemData.id
|
||||
}
|
||||
noticeData(params).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.article = res.data.records[0].content
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 🔥 uni-app 必须加这个，页面高度才会生效 */
|
||||
// page {
|
||||
// height: 100%;
|
||||
// }
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 最外层 flex 容器 */
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 兼容更好 */
|
||||
background-color: #f5f5f5;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
/* 内容区域：自动占满剩余高度 + 滚动 */
|
||||
.agreement-content {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: 40rpx 30rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.article {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
margin-left: 20rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
/* 底部按钮：固定在最下方，不使用 absolute */
|
||||
.btn-bar {
|
||||
display: flex;
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
background-color: #ffffff;
|
||||
gap: 30rpx;
|
||||
border-top: 1rpx solid #eee;
|
||||
box-shadow: 0 -8rpx 20rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.btn-back {
|
||||
flex: 1;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background-color: rgba(242, 247, 255, 1);
|
||||
color: rgba(49, 134, 255, 1);
|
||||
border-radius: 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
border: 2rpx solid rgba(208, 227, 255, 1);
|
||||
}
|
||||
|
||||
.btn-confirm {
|
||||
flex: 2;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background-color: rgba(49, 134, 255, 1);
|
||||
color: #ffffff;
|
||||
border-radius: 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
border: 2rpx solid rgba(208, 227, 255, 1);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,327 +0,0 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
|
||||
<!-- 信息栏 -->
|
||||
<view class="info-bar">
|
||||
<view class="info-title">住房档案变更（房屋坐落变更）</view>
|
||||
<view class="info-dept">公积金管理中心</view>
|
||||
</view>
|
||||
|
||||
<!-- 日历 -->
|
||||
<view class="calendar-wrap">
|
||||
<view class="calendar-header">
|
||||
<text class="week-item" v-for="week in weekList" :key="week">{{ week }}</text>
|
||||
</view>
|
||||
|
||||
<view class="date-row" v-for="(row, index) in calendarList" :key="index">
|
||||
<view class="date-item" :class="{
|
||||
active: item && item.active,
|
||||
has: item && item.isAvailable,
|
||||
disabled: !item || !item.isAvailable
|
||||
}" v-for="(item, idx) in row" :key="idx" @click="selectDate(item)">
|
||||
|
||||
<text class="date-num">{{ item ? getDay(item.date) : '无' }}</text>
|
||||
<text class="date-status" v-if="item">{{ item.isAvailable ? '有' : '无' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 时段 -->
|
||||
<view class="time-list">
|
||||
<view class="time-item" :class="{ selected: item.selected, disabled: item.remainingCount <= 0 }"
|
||||
v-for="item in currentTimeSlots" :key="item.time" @click="selectTime(item)">
|
||||
<view>{{ item.time }}</view>
|
||||
<view>可预约 {{ item.remainingCount }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部 -->
|
||||
<view class="footer-bar">
|
||||
<view class="selected-info">已选：{{ selectedDate }} {{ selectedTime }}</view>
|
||||
<view class="btn-box">
|
||||
<button class="btn-gray" @click="handleGoBack">返回</button>
|
||||
<button class="btn-blue" @click="handleNext">下一步</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
availableDate
|
||||
} from '@/api/reserve.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
weekList: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
|
||||
dateList: [],
|
||||
calendarList: [],
|
||||
currentTimeSlots: [],
|
||||
selectedDate: "",
|
||||
selectedTime: "",
|
||||
itemData: {}
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.itemData = JSON.parse(decodeURIComponent(options.data))
|
||||
this.fetchData()
|
||||
},
|
||||
methods: {
|
||||
fetchData() {
|
||||
availableDate({
|
||||
itemId: this.itemData.id
|
||||
}).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.dateList = res.data
|
||||
this.initCalendar()
|
||||
// 兼容无数据/首条不可选情况
|
||||
const firstAva = this.dateList.find(item => item.isAvailable)
|
||||
firstAva && this.selectDate(firstAva)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 核心重写：100%贴合需求 - 按weekDayName对列+跨周换行+今日为起点前后空
|
||||
initCalendar() {
|
||||
// 初始化两行（最多跨周展示两行，满足业务场景）
|
||||
const row1 = Array(7).fill(null) // 第一行（今日所在周）
|
||||
const row2 = Array(7).fill(null) // 第二行（跨周后的下一周）
|
||||
// 星期转列索引映射（固定匹配表头）
|
||||
const weekToCol = {
|
||||
"星期一": 0,
|
||||
"星期二": 1,
|
||||
"星期三": 2,
|
||||
"星期四": 3,
|
||||
"星期五": 4,
|
||||
"星期六": 5,
|
||||
"星期日": 6
|
||||
}
|
||||
// 今日是列表第一条，获取今日所在星期列，作为展示起点
|
||||
const today = this.dateList[0]
|
||||
if (!today) {
|
||||
this.calendarList = [row1, row2]
|
||||
return
|
||||
}
|
||||
const todayCol = weekToCol[today.weekDayName]
|
||||
// 遍历所有日期，按规则分配到对应行/列
|
||||
this.dateList.forEach(item => {
|
||||
const col = weekToCol[item.weekDayName]
|
||||
if (col === undefined) return
|
||||
// 规则：今日所在列及右侧 → 第一行；今日所在列左侧（跨周）→ 第二行
|
||||
if (col >= todayCol) {
|
||||
row1[col] = item
|
||||
} else {
|
||||
row2[col] = item
|
||||
}
|
||||
})
|
||||
// 最终日历列表（仅保留有数据的行，无数据则不展示）
|
||||
this.calendarList = [row1]
|
||||
if (row2.some(item => item)) {
|
||||
this.calendarList.push(row2)
|
||||
}
|
||||
},
|
||||
|
||||
getDay(date) {
|
||||
if (!date) return "";
|
||||
return date.split("-")[2];
|
||||
},
|
||||
|
||||
formatDate(date) {
|
||||
const arr = date.split("-");
|
||||
return arr[0] + "-" + arr[1] + "-" + arr[2];
|
||||
},
|
||||
|
||||
selectDate(item) {
|
||||
if (!item || !item.isAvailable) return;
|
||||
this.selectedTime = ''
|
||||
this.dateList.forEach(i => (i.active = false));
|
||||
item.active = true;
|
||||
this.selectedDate = this.formatDate(item.date);
|
||||
this.currentTimeSlots = (item.timeSlots || []).map(t => {
|
||||
return {
|
||||
...t,
|
||||
selected: false
|
||||
};
|
||||
});
|
||||
if (this.currentTimeSlots.length > 0) {
|
||||
this.selectTime(this.currentTimeSlots[0]);
|
||||
}
|
||||
},
|
||||
|
||||
selectTime(item) {
|
||||
if (item.remainingCount <= 0) return;
|
||||
this.currentTimeSlots.forEach(t => (t.selected = false));
|
||||
item.selected = true;
|
||||
this.selectedTime = item.time;
|
||||
},
|
||||
|
||||
handleGoBack() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
|
||||
handleNext() {
|
||||
if (!this.selectedDate || !this.selectedTime) {
|
||||
uni.showToast({
|
||||
title: "请选择完整",
|
||||
icon: "none"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const data = JSON.stringify(this.itemData)
|
||||
const time = this.selectedDate + " " + this.selectedTime
|
||||
uni.navigateTo({
|
||||
url: `/pages/reserve/confirm?data=${encodeURIComponent(data)}&time=${time}`
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
background: #f5f7fa;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.info-bar {
|
||||
background: linear-gradient(90deg, rgba(49, 134, 255, 1), #53a8ff);
|
||||
padding: 30rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.info-title {
|
||||
font-size: 34rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.info-dept {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.calendar-wrap {
|
||||
background: #fff;
|
||||
margin: 20rpx;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx;
|
||||
border: 2rpx solid rgba(49, 134, 255, 1);
|
||||
}
|
||||
|
||||
.calendar-header {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.week-item {
|
||||
flex: 1;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.date-row {
|
||||
display: flex;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.date-item {
|
||||
flex: 1;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.date-item.has {
|
||||
color: rgba(49, 134, 255, 1);
|
||||
}
|
||||
|
||||
.date-item.active {
|
||||
background: rgba(49, 134, 255, 1);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.date-item.disabled {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.date-num {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.date-status {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.time-list {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.time-item {
|
||||
background: #fff;
|
||||
border-radius: 12rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 16rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.time-item.selected {
|
||||
background: #e8f3ff;
|
||||
border: 2rpx solid rgba(49, 134, 255, 1);
|
||||
}
|
||||
|
||||
.time-item.disabled {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.footer-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.selected-info {
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
display: flex;
|
||||
gap: 30rpx;
|
||||
}
|
||||
|
||||
.btn-gray {
|
||||
flex: 1;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background-color: rgba(242, 247, 255, 1);
|
||||
color: rgba(49, 134, 255, 1);
|
||||
border-radius: 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
border: 2rpx solid rgba(208, 227, 255, 1);
|
||||
}
|
||||
|
||||
.btn-blue {
|
||||
flex: 2;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background-color: rgba(49, 134, 255, 1);
|
||||
color: #ffffff;
|
||||
border-radius: 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
border: 2rpx solid rgba(208, 227, 255, 1);
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue