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.
306 lines
7.7 KiB
306 lines
7.7 KiB
<template>
|
|
<view class="container">
|
|
<image class="cbg" :src="base.imgHost('common_bg.png')"></image>
|
|
<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.floor" class="book-pic-item-info">
|
|
<image style="width:20rpx;height:26rpx;margin-right:30rpx"
|
|
:src="base.imgHost('book-address.png')"></image>
|
|
<view class="book-pic-item-info-between">
|
|
<text>位</text>
|
|
<text>置：</text>
|
|
</view>
|
|
<view>{{item.floor}}</view>
|
|
</view>
|
|
<view v-if="item.start_time" class="book-pic-item-info">
|
|
<image style="width:24rpx;height:24rpx;margin-right:26rpx"
|
|
:src="base.imgHost('book-time.png')"></image>
|
|
<text></text>
|
|
<view class="book-pic-item-info-between">
|
|
<text>时</text>
|
|
<text>间：</text>
|
|
</view>
|
|
<view>{{item.start_time}}-{{item.end_time}}</view>
|
|
</view>
|
|
<view v-if="item.total" class="book-pic-item-info">
|
|
<image style="width:29rpx;height:21rpx;margin-right:21rpx"
|
|
:src="base.imgHost('book-people.png')"></image>
|
|
<view class="book-pic-item-info-between">
|
|
<text>容纳</text>
|
|
<text>人数：</text>
|
|
</view>
|
|
<view>{{item.total}}</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_swiper.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.floor" class="book-pic-item-info">
|
|
<image style="width:20rpx;height:26rpx;margin-right:30rpx"
|
|
:src="base.imgHost('book-address.png')"></image>
|
|
<view class="book-pic-item-info-between">
|
|
<text>位</text>
|
|
<text>置：</text>
|
|
</view>
|
|
<view>{{item.floor}}</view>
|
|
</view>
|
|
<view v-if="item.start_time" class="book-pic-item-info">
|
|
<image style="width:24rpx;height:24rpx;margin-right:26rpx"
|
|
:src="base.imgHost('book-time.png')"></image>
|
|
<view class="book-pic-item-info-between">
|
|
<text>时</text>
|
|
<text>间：</text>
|
|
</view>
|
|
<view>{{item.start_time}}-{{item.end_time}}</view>
|
|
</view>
|
|
<view v-if="item.total" class="book-pic-item-info">
|
|
<image style="width:29rpx;height:21rpx;margin-right:21rpx"
|
|
:src="base.imgHost('book-people.png')"></image>
|
|
<view class="book-pic-item-info-between">
|
|
<text>容纳人数：</text>
|
|
</view>
|
|
<view>{{item.total}}</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
|
|
</block>
|
|
|
|
</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,
|
|
is_schoolmate: 0,
|
|
door_appointments: false, // 当前是否有预约
|
|
siteList: []
|
|
}
|
|
},
|
|
onShareAppMessage() {
|
|
return {
|
|
title: "苏州科技商学院",
|
|
imageUrl: "/static/share.jpg"
|
|
}
|
|
},
|
|
onShareTimeline() {
|
|
return {
|
|
title: "苏州科技商学院",
|
|
imageUrl: "/static/share.jpg"
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getUser()
|
|
},
|
|
onLoad() {
|
|
this.getSites()
|
|
},
|
|
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
|
|
})
|
|
})
|
|
},
|
|
getUser() {
|
|
this.$u.api.user().then(res => {
|
|
this.is_schoolmate = res.user.is_schoolmate
|
|
if (res.user.appointment_total - res.user.pass_appointments > 0) {
|
|
this.can_appointment = true
|
|
} else {
|
|
this.can_appointment = false
|
|
}
|
|
this.door_appointments = res.door_appointments ? true : false
|
|
this.$u.vuex('vuex_user', res.user)
|
|
})
|
|
},
|
|
toUrl(type) {
|
|
// if (!this.is_schoolmate) {
|
|
// this.base.toast("您还不是校友，还不能享有该权益")
|
|
// return
|
|
// }
|
|
if (!this.can_appointment) {
|
|
this.base.toast("您当前没有可预约次数")
|
|
return
|
|
}
|
|
if (this.door_appointments) {
|
|
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;
|
|
}
|
|
|
|
.book-top {
|
|
position: relative;
|
|
padding: 80rpx 0 60rpx 0;
|
|
|
|
image {
|
|
width: 539rpx;
|
|
height: 88rpx;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
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;
|
|
&>view{
|
|
margin-right:10rpx;
|
|
}
|
|
&-between {
|
|
width: 135rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
// text{
|
|
// margin-right:10rpx;
|
|
// }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style> |