删除多余页面
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