112 lines
2.3 KiB
Vue
112 lines
2.3 KiB
Vue
<template>
|
|
<view class="container">
|
|
<!-- 搜索框 -->
|
|
<view class="searchView">
|
|
<uni-search-bar class="searchInput" radius="5" placeholder="搜索" clearButton="auto" cancelButton="none" @confirm="search" />
|
|
</view>
|
|
<view class="roomView">
|
|
<view v-for=" item in tlist" :key="item.id">
|
|
<uni-card :title="item.name" class="roomCard">
|
|
<view class="uni-body">容纳人数：{{item.capacity}}</view>
|
|
<view class="uni-body">位置：{{item.location}}</view>
|
|
<view slot="actions" class="card-actions">
|
|
<view class="card-actions-item" @click="actionsClick(item)">
|
|
<text class="card-actions-item-text">立即预定</text>
|
|
</view>
|
|
</view>
|
|
</uni-card>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
page: 1,
|
|
pageSize: 20,
|
|
inputValue:'',
|
|
status: 'noMore',
|
|
tlist: [],
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getmRooms();
|
|
},
|
|
onPullDownRefresh() {
|
|
this.page = 1;
|
|
this.getmRooms();
|
|
},
|
|
methods:{
|
|
getmRooms(){
|
|
let that = this;
|
|
that.status = 'loading';
|
|
that.$api.getMroom({ page: that.page, page_size: that.pageSize}).then(data=>{
|
|
if(data.results.length < that.pageSize){
|
|
that.status = 'noMore';
|
|
}else{
|
|
that.status = 'more';
|
|
}
|
|
if(that.page == 1){
|
|
that.tlist = data.results;
|
|
}
|
|
else{
|
|
that.tlist = that.tlist.concat(data.results)
|
|
}
|
|
uni.stopPullDownRefresh()
|
|
}).catch(e=>{
|
|
uni.stopPullDownRefresh()
|
|
})
|
|
},
|
|
onKeyInput: function(event) {
|
|
this.inputValue = event.detail.value
|
|
},
|
|
actionsClick(item){
|
|
uni.navigateTo({
|
|
url:'/pages/ofm/booking?mroomId='+item.id,
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@font-face {
|
|
font-family: CustomFont;
|
|
src: url('./iconfont.ttf');
|
|
}
|
|
.container{
|
|
padding: 10rpx;
|
|
background-color: #ffffff;
|
|
}
|
|
.searchView{
|
|
height: 70rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
.searchIcon{
|
|
margin: auto 10rpx;
|
|
}
|
|
.searchInput{
|
|
padding: 0!important;
|
|
height: 70rpx;
|
|
}
|
|
.roomCard{
|
|
padding: 0!important;
|
|
}
|
|
.uni-card .uni-card__content{
|
|
padding: 0!important;
|
|
}
|
|
.uni-body{
|
|
padding: 20rpx;
|
|
}
|
|
.card-actions-item{
|
|
text-align: center;
|
|
height: 70rpx;
|
|
line-height: 70rpx;
|
|
background-color: #9fd3b0;
|
|
}
|
|
.card-actions-item-text{
|
|
color: #ffffff;
|
|
}
|
|
</style> |