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.
420 lines
9.9 KiB
420 lines
9.9 KiB
<template>
|
|
<view class="container">
|
|
<image class="cbg" :src="base.imgHost('common_bg.png')"></image>
|
|
<view class="qrcode" @click="showBigCode = true" v-if="myQrcode.qrcode">
|
|
<view class="qrcode-code">
|
|
<!-- myQrcode.qrcode -->
|
|
<uqrcode ref="uqrcode" canvas-id="qrcode" :value="myQrcode.qrcode" :sizeUnit="'rpx'" :size="110" :options="{
|
|
margin: 5,
|
|
foregroundImageSrc: '/static/index_icon1.png',
|
|
}"></uqrcode>
|
|
</view>
|
|
<view class="qrcode-text">
|
|
最近预约
|
|
</view>
|
|
</view>
|
|
<view class="book-top">
|
|
<!-- <text class="book-top-line"></text> -->
|
|
<image :src="base.imgHost('book-top.png')"></image>
|
|
</view>
|
|
<view class="book">
|
|
<view class="book-pic">
|
|
<block v-for="(item,index) in siteList">
|
|
<view class="book-pic-item">
|
|
<block v-if="item.image.length>0">
|
|
<swiper circular :indicator-dots="item.image.length>1?true:false"
|
|
indicator-active-color="#b79373" indicator-color="#fff" style="height:350rpx"
|
|
:autoplay="false">
|
|
<swiper-item v-for="file in item.image">
|
|
<image :src="file.url" />
|
|
</swiper-item>
|
|
</swiper>
|
|
<view class="book-pic-item-book">
|
|
<view>{{item.name}}</view>
|
|
<view @click="toUrl(item.id)" v-if="item.is_book" class="book-pic-item-book-submit">
|
|
预约
|
|
</view>
|
|
</view>
|
|
<view class="book-pic-item-introduce" v-if="item.introduce">{{item.introduce}}</view>
|
|
<view v-if="item.content" class="book-pic-item-info">
|
|
<view v-html="item.content"></view>
|
|
</view>
|
|
</block>
|
|
<block v-else>
|
|
<swiper circular :indicator-dots="false" indicator-active-color="#b79373"
|
|
indicator-color="#fff" style="height:350rpx" :autoplay="false">
|
|
<swiper-item>
|
|
<image :src="base.imgHost('index_swiper1.png')" />
|
|
</swiper-item>
|
|
</swiper>
|
|
<view class="book-pic-item-book">
|
|
<view>{{item.name}}</view>
|
|
<view @click="toUrl(item.id)" v-if="item.is_book" class="book-pic-item-book-submit">
|
|
预约
|
|
</view>
|
|
</view>
|
|
<view v-if="item.introduce">{{item.introduce}}</view>
|
|
<view v-if="item.content" class="book-pic-item-info">
|
|
<view v-html="item.content"></view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
|
|
</block>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
<view v-if="showBigCode" class="big">
|
|
<view class="big-wrap">
|
|
<view class="big-close" @click='showBigCode=false'>X</view>
|
|
<view class="big-code">
|
|
<uqrcode v-if="myQrcode" ref="uqrcode" canvas-id="qrcode" :value="myQrcode.qrcode" :sizeUnit="'rpx'"
|
|
:size="500" :options="{
|
|
margin: 5,
|
|
foregroundImageSrc: '/static/index_icon1.png',
|
|
}"></uqrcode>
|
|
</view>
|
|
<view class="big-info">
|
|
<view @click="getUser">入校请刷码：点击刷新二维码</view>
|
|
<view>预约时间：{{formatTime(myQrcode.start_time,myQrcode.end_time)}}</view>
|
|
<view>预约场地：
|
|
<block v-if="myQrcode.site_detail && myQrcode.site_detail.length>0">
|
|
<block v-for="(site,index) in myQrcode.site_detail">
|
|
{{site.real_name}}<block v-if="index+1<myQrcode.site_detail.length">,</block>
|
|
</block>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<tabbar :currentPage="2"></tabbar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import tabbar from '@/components/tabbar/tabbar.vue';
|
|
export default {
|
|
components: {
|
|
tabbar
|
|
},
|
|
data() {
|
|
return {
|
|
user: {},
|
|
can_appointment: false,
|
|
door_appointments: false, // 当前是否有预约
|
|
siteList: [],
|
|
book_list: [],
|
|
myQrcode: null,
|
|
showBigCode: false,
|
|
timer: null
|
|
}
|
|
},
|
|
onShareAppMessage() {
|
|
return {
|
|
title: "苏州科技商学院",
|
|
imageUrl: "/static/share.jpg"
|
|
}
|
|
},
|
|
onShareTimeline() {
|
|
return {
|
|
title: "苏州科技商学院",
|
|
imageUrl: "/static/share.jpg"
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getUser()
|
|
},
|
|
onLoad() {
|
|
// console.log("123",this.isCurrentDateGreaterOrEqual('2024-09-06'))
|
|
let that = this
|
|
|
|
this.getSites()
|
|
if (!this.timer) {
|
|
this.timer = setInterval(function() {
|
|
that.getUser()
|
|
}, 3 * 60 * 1000)
|
|
}
|
|
},
|
|
onUnload() {
|
|
if (this.timer) {
|
|
clearInterval(this.timer)
|
|
this.timer = null
|
|
}
|
|
},
|
|
onHide() {
|
|
if (this.timer) {
|
|
clearInterval(this.timer)
|
|
this.timer = null
|
|
}
|
|
},
|
|
methods: {
|
|
// 场地
|
|
getSites() {
|
|
this.$u.api.otherConfig().then(res => {
|
|
this.siteList = this.base.deepCopy(res.appointment_type)
|
|
this.siteList = this.siteList.sort((a, b) => a['sort'] - b['sort'])
|
|
this.siteList = this.siteList.filter(item=>{return item.is_show===1})
|
|
})
|
|
},
|
|
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
|
|
}
|
|
},
|
|
// 判断已预约的日期是否大于或等于当前日期
|
|
isCurrentDateGreaterOrEqual(targetDate) {
|
|
// 将目标日期转换为Moment对象
|
|
|
|
const target = this.$moment(targetDate, 'YYYY-MM-DD HH:mm');
|
|
// 获取当前日期
|
|
const now = this.$moment().format('YYYY-MM-DD HH:mm');
|
|
// 比较当前日期是否小于或等于目标日期
|
|
return this.$moment(now).isSameOrBefore(target);
|
|
},
|
|
async getUser() {
|
|
await 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
|
|
}
|
|
if(res.door_appointments){
|
|
if (this.isCurrentDateGreaterOrEqual(res.door_appointments.start_time)) {
|
|
this.myQrcode = res.door_appointments
|
|
}
|
|
}
|
|
this.$u.vuex('vuex_user', res.user)
|
|
})
|
|
},
|
|
async toUrl(type) {
|
|
await this.getUser()
|
|
if (!this.can_appointment) {
|
|
this.base.toast("您当前没有可预约次数")
|
|
return
|
|
}
|
|
uni.navigateTo({
|
|
url: '/packages/booksubmit/index?type=' + type
|
|
})
|
|
|
|
|
|
|
|
}
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.container {
|
|
width: 100%;
|
|
height: 100vh;
|
|
padding-bottom: 200rpx;
|
|
|
|
.cbg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
|
|
.qrcode {
|
|
position: absolute;
|
|
top: 0rpx;
|
|
right: 0rpx;
|
|
font-size: 26rpx;
|
|
// display: flex;
|
|
width: calc(100% - 580rpx);
|
|
border-radius: 30rpx 0 0 30rpx;
|
|
padding: 20rpx 0rpx 15rpx 10rpx;
|
|
text-align: center;
|
|
background: linear-gradient(to right, #0d0398, #5e5fbc);
|
|
z-index: 9;
|
|
color: #fff;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
/* align-items: center; */
|
|
justify-content: center;
|
|
|
|
&-text {
|
|
margin-top: 10rpx;
|
|
|
|
&>text {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
&-code {
|
|
width: 110rpx;
|
|
height: 110rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
}
|
|
|
|
.book-top {
|
|
position: relative;
|
|
padding: 80rpx 0rpx 60rpx 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
image {
|
|
width: 455rpx;
|
|
height: 87rpx;
|
|
display: block;
|
|
}
|
|
|
|
// text {
|
|
// width: 1rpx;
|
|
// height: 220rpx;
|
|
// background-color: #271f8e;
|
|
// display: block;
|
|
// position: absolute;
|
|
// top: 50rpx;
|
|
// left: 60rpx;
|
|
// z-index: 99;
|
|
// }
|
|
}
|
|
|
|
.book {
|
|
position: relative;
|
|
padding: 0 30rpx;
|
|
height: calc(100vh - 400rpx);
|
|
overflow: scroll;
|
|
|
|
&-block {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
image {
|
|
width: 330rpx;
|
|
height: 126rpx;
|
|
}
|
|
}
|
|
|
|
&-pic {
|
|
&-item {
|
|
font-size: 0;
|
|
border-radius: 10rpx;
|
|
margin-bottom: 30rpx;
|
|
background-color: #fff;
|
|
padding-bottom: 30rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 350rpx;
|
|
border-radius: 10rpx 10rpx 0 0;
|
|
}
|
|
|
|
&-book {
|
|
font-size: 32rpx;
|
|
color: #000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 30rpx;
|
|
|
|
&-submit {
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
background: linear-gradient(to right, #e4cdb4, #c69c6d);
|
|
border-radius: 30rpx;
|
|
padding: 10rpx 30rpx;
|
|
}
|
|
}
|
|
|
|
&-introduce {
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
padding: 30rpx;
|
|
padding-top: 0
|
|
}
|
|
|
|
&-info {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 10rpx;
|
|
padding: 0 30rpx;
|
|
font-size: 28rpx;
|
|
color: #000;
|
|
line-height: 1.8;
|
|
&>view {
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
&-between {
|
|
width: 135rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
// text{
|
|
// margin-right:10rpx;
|
|
// }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.big {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
overflow: scroll;
|
|
z-index: 10;
|
|
|
|
&-wrap {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 500rpx;
|
|
text-align: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
&-code {
|
|
width: 500rpx;
|
|
height: 500rpx
|
|
}
|
|
|
|
&-close {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
text-align: center;
|
|
line-height: 80rpx;
|
|
color: #fff;
|
|
background: #6e6e77;
|
|
border-radius: 80rpx;
|
|
position: absolute;
|
|
top: -80rpx;
|
|
right: 0;
|
|
}
|
|
|
|
&-info {
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
text-align: center;
|
|
width:100%;
|
|
&>view {
|
|
margin-top: 20rpx;
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |