You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
275 lines
6.4 KiB
275 lines
6.4 KiB
<template>
|
|
<view class="container">
|
|
<image class="cbg" :src="base.imgHost('common_bg.png')"></image>
|
|
<scroll-view :scroll-y="true" @scrolltolower="scrollGet" class="list">
|
|
<image @click="goBook" class="list-img" :src="base.imgHost('mybook-top.png')"></image>
|
|
<view v-if="hasData" style="padding-bottom: 60rpx;">
|
|
<view class="list-item" @click="toDetail(item.id)" v-for="item in book_list">
|
|
<view class="list-item-top">
|
|
<view style="display: flex;justify-content: space-between;align-items: center;">
|
|
<!-- <image
|
|
:src="item.appointment_config.name==='车辆到闸'?base.imgHost('mybook-icon2.png'):base.imgHost('mybook-icon1.png')">
|
|
</image>
|
|
{{item.appointment_config.name==='车辆到闸'?'车辆预约':'场地预约'}} -->
|
|
<image
|
|
:src="base.imgHost('mybook-icon1.png')">
|
|
</image>
|
|
场地预约
|
|
</view>
|
|
<view>
|
|
<text :class="{'success':item.status===1,'warn':item.status>1}">
|
|
{{statusList[item.status]}}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<view class="list-item-middle">
|
|
<view>
|
|
<image :src="base.imgHost('mybook-icon3.png')" style="width:24rpx;height: 24rpx;"></image>
|
|
{{formatTime(item.start_time,item.end_time)}}
|
|
</view>
|
|
|
|
<view>
|
|
<image :src="base.imgHost('mybook-icon4.png')" style="width:20rpx;height: 26rpx;"></image>
|
|
{{item.appointment_config?item.appointment_config.name:''}}
|
|
</view>
|
|
<view>
|
|
<image :src="base.imgHost('mybook-icon5.png')" style="width:21rpx;height: 23rpx;"></image>
|
|
{{item.content?item.content:''}}
|
|
</view>
|
|
</view>
|
|
<view class="list-item-bottom">
|
|
<text @click.stop="cancelBook(item)" v-if="item.status<2 && isCanCancel(item.start_time)">取消</text>
|
|
<text v-if="item.status<2 && isCanCancel(item.start_time)">|</text>
|
|
<text>查看</text>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="nodata" v-else>
|
|
<u-empty text="当前没有预约" mode="data"></u-empty>
|
|
</view>
|
|
|
|
</scroll-view>
|
|
|
|
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {
|
|
hasMobile: false,
|
|
hasData: true,
|
|
current_page: 1,
|
|
total_page: 0,
|
|
load_status: '',
|
|
book_list: [],
|
|
can_appointment:false,
|
|
statusList:{
|
|
0:'待审核',
|
|
1:'通过',
|
|
2:'审核不通过',
|
|
3:'已取消',
|
|
4:'失败'
|
|
}
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getBookList()
|
|
|
|
},
|
|
onReachBottom() {
|
|
console.log("this.onReachBottom", this.current_page, this.total_page)
|
|
|
|
},
|
|
methods: {
|
|
scrollGet() {
|
|
if (!this.hasData) {
|
|
return
|
|
}
|
|
this.current_page = this.current_page + 1
|
|
if (this.current_page > this.total_page) {
|
|
this.base.toast('没有更多了')
|
|
return
|
|
}
|
|
this.getBookList()
|
|
},
|
|
async getBookList() {
|
|
const res = await this.$u.api.scheduleIndex({
|
|
page: this.current_page,
|
|
page_size: 10
|
|
})
|
|
this.total_page = res.last_page
|
|
if (res.data.length === 0 && this.current_page === 1) {
|
|
this.hasData = false
|
|
}
|
|
this.book_list.push(...res.data)
|
|
|
|
},
|
|
formatTime(val1,val2) {
|
|
let val1Day = this.$moment(val1)
|
|
let val2Day = this.$moment(val2)
|
|
console.log("123",val1Day,val2Day)
|
|
if(val1Day.isSame(val2Day,'days')){
|
|
return val1Day.format("YYYY-MM-DD") + ' ' + this.$moment(val1).format("HH:mm")+'-' + this.$moment(val2).format("HH:mm")
|
|
}else{
|
|
return val1 + '至' + val2
|
|
}
|
|
},
|
|
isCanCancel(start_time){
|
|
// 当前时间早于 预约开始时间 才能取消
|
|
return this.$moment().isBefore(start_time)
|
|
},
|
|
cancelBook(item){
|
|
let that = this
|
|
uni.showModal({
|
|
title: '确认要取消该预约？',
|
|
success: function(res) {
|
|
if (res.confirm){
|
|
that.$u.api.scheduleCancel({
|
|
id:item.id
|
|
}).then(res => {
|
|
that.base.toast("取消成功")
|
|
that.current_page = 1
|
|
that.book_list = []
|
|
that.getBookList()
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
toDetail(id) {
|
|
uni.navigateTo({
|
|
url: '/packages/mybook/detail?id=' + id
|
|
})
|
|
},
|
|
getUser() {
|
|
this.$u.api.user().then(res => {
|
|
if (res.user.appointment_total - res.user.pass_appointments > 0) {
|
|
this.can_appointment = true
|
|
} else {
|
|
this.can_appointment = false
|
|
}
|
|
this.$u.vuex('vuex_user', res.user)
|
|
})
|
|
},
|
|
async goBook(){
|
|
uni.navigateTo({
|
|
url: '/packages/booksubmit/appointment'
|
|
})
|
|
// await this.$u.api.user().then(res => {
|
|
// if (res.user.appointment_total - res.user.pass_appointments > 0) {
|
|
// this.can_appointment = true
|
|
// uni.navigateTo({
|
|
// url: '/packages/booksubmit/appointment'
|
|
// })
|
|
// } else {
|
|
// this.can_appointment = false
|
|
// this.base.toast("您当前没有可预约次数")
|
|
// }
|
|
// })
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.container {
|
|
width: 100%;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
|
|
.cbg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
|
|
.nodata {
|
|
position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100vh;
|
|
}
|
|
|
|
.list {
|
|
height: 100vh;
|
|
padding: 30rpx 0;
|
|
position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
overflow: scroll;
|
|
|
|
&-img {
|
|
width: calc(100% - 60rpx);
|
|
height: 125rpx;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
&-item {
|
|
margin: 30rpx;
|
|
padding: 30rpx;
|
|
background-color: #fff;
|
|
border-radius: 10rpx;
|
|
&-top{
|
|
font-size: 32rpx;
|
|
color:#b08c6c;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom:1rpx solid #ddd;
|
|
padding-bottom: 30rpx;
|
|
image{
|
|
width:37rpx;
|
|
height:37rpx;
|
|
margin-right:10rpx;
|
|
}
|
|
text{
|
|
font-size: 24rpx;
|
|
color:#fff;
|
|
padding:5rpx 20rpx;
|
|
display: inline-block;
|
|
border-radius: 28rpx 0 28rpx 28rpx;
|
|
background-color: #bf976e;
|
|
}
|
|
.success{
|
|
background-color: #00b318;
|
|
}
|
|
.warn{
|
|
background-color: #999;
|
|
}
|
|
}
|
|
&-middle{
|
|
padding:30rpx 0;
|
|
padding-bottom:10rpx;
|
|
border-bottom:1rpx solid #ddd;
|
|
&>view{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom:20rpx;
|
|
image{
|
|
margin-right:10rpx;
|
|
}
|
|
}
|
|
}
|
|
&-bottom{
|
|
text-align: right;
|
|
padding-top:30rpx;
|
|
color:#b08c6c;
|
|
text{
|
|
margin-left:20rpx
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |