@@ -0,0 +1,27 @@ | |||
<template> | |||
<u-cell :title="title" isLink :border="false" @click="click"></u-cell> | |||
</template> | |||
<script> | |||
export default { | |||
name: "radio", | |||
props: { | |||
title: { | |||
default: "", | |||
type: String | |||
}, | |||
}, | |||
methods:{ | |||
click(){ | |||
this.$emit("click") | |||
} | |||
} | |||
} | |||
</script> | |||
<style scoped> | |||
.u-cell { | |||
background: #fff; | |||
border-radius: 20rpx; | |||
} | |||
</style> |
@@ -0,0 +1,86 @@ | |||
<template> | |||
<view> | |||
<myCell :title="title_" isLink :border="false" @click="show = true"></myCell> | |||
<u-popup :show="show" mode="center" :round="10" @close="close" @open="open"> | |||
<u-radio-group v-model="value_" iconPlacement="right" placement="column" @change="change" borderBottom> | |||
<u-radio v-for="(item,index) in options" :key="index" :label="item.label" :name="item.value"></u-radio> | |||
</u-radio-group> | |||
</u-popup> | |||
</view> | |||
</template> | |||
<script> | |||
import myCell from "@/components/cell.vue" | |||
export default { | |||
name: "selectRadio", | |||
components:{ | |||
myCell | |||
}, | |||
props: { | |||
value: { | |||
default: "", | |||
type: String | Number | |||
}, | |||
options: { | |||
default: [], | |||
type: Array | |||
}, | |||
title:{ | |||
default: "", | |||
type: String | |||
}, | |||
}, | |||
data() { | |||
return { | |||
show: false, | |||
title_:this.title, | |||
value_:this.value, | |||
}; | |||
}, | |||
mounted() { | |||
if(this.value){ | |||
let obj = this.options.find(e1=>e1.value == this.value) | |||
if(obj) this.title_ = obj.label | |||
} | |||
}, | |||
methods: { | |||
close() { | |||
this.show = false | |||
}, | |||
open(){ | |||
let obj = this.options.find(e1 => e1.value == this.value) | |||
if (obj) this.title_ = obj.label | |||
this.title_ = obj ? obj.label : this.title | |||
this.value_ = this.value | |||
}, | |||
change(e) { | |||
this.$emit("update:value",e) | |||
let obj = this.options.find(e1=>e1.value == e) | |||
if(obj) this.title_ = obj.label | |||
this.$emit("change") | |||
}, | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.u-radio-group { | |||
width: 550rpx; | |||
max-height: 680rpx; | |||
overflow-y: auto; | |||
padding: 0 24rpx; | |||
.u-cell { | |||
background-color: #fff; | |||
border-radius: 20rpx; | |||
padding: 24rpx 0; | |||
} | |||
} | |||
.u-border-bottom { | |||
border-color: #F6F6F6 !important; | |||
} | |||
.u-radio { | |||
margin-top: 18rpx; | |||
} | |||
</style> |
@@ -0,0 +1,123 @@ | |||
<template> | |||
<view> | |||
<myCell :title="title_" isLink :border="false" @click="show = true"></myCell> | |||
<u-popup :show="show" mode="bottom" :closeable="true" :round="10" @close="close" @open="open"> | |||
<view> | |||
<view class="title"> | |||
{{'请选择' + popupTitle}} | |||
</view> | |||
<view style="padding: 0 30rpx 30rpx 30rpx"> | |||
<u-search v-model="searchText" :placeholder="'请输入'+(searchPlaceHolder||popupTitle)" shape="round" | |||
:showAction="false"></u-search> | |||
</view> | |||
<u-radio-group :value="value_" iconPlacement="right" placement="column" @change="change" borderBottom> | |||
<u-radio v-show="item.label.includes(searchText)" v-for="(item,index) in options" :key="index" :label="item.label" | |||
:name="item.value"></u-radio> | |||
</u-radio-group> | |||
<view style="padding: 36rpx 50rpx"> | |||
<u-button @click="cofirm" type="primary" style="border-radius: 36rpx;height: 72rpx;" | |||
text="确定"></u-button> | |||
</view> | |||
</view> | |||
</u-popup> | |||
</view> | |||
</template> | |||
<script> | |||
import myCell from "@/components/cell.vue" | |||
export default { | |||
name: "selectRadio", | |||
components: { | |||
myCell | |||
}, | |||
props: { | |||
value: { | |||
default: "", | |||
type: String | Number | |||
}, | |||
options: { | |||
default: [], | |||
type: Array | |||
}, | |||
title: { | |||
default: "", | |||
type: String | |||
}, | |||
popupTitle: { | |||
default: "", | |||
type: String | |||
}, | |||
searchPlaceHolder: { | |||
default: "", | |||
type: String | |||
}, | |||
}, | |||
data() { | |||
return { | |||
show: false, | |||
title_: this.title, | |||
value_: this.value, | |||
radioValue: '', | |||
searchText: '' | |||
}; | |||
}, | |||
mounted() { | |||
if (this.value) { | |||
let obj = this.options.find(e1 => e1.value == this.value) | |||
if (obj) this.title_ = obj.label | |||
} | |||
}, | |||
methods: { | |||
close() { | |||
this.show = false | |||
}, | |||
open() { | |||
let obj = this.options.find(e1 => e1.value == this.value) | |||
if (obj) this.title_ = obj.label | |||
this.title_ = obj ? obj.label : (this.popupTitle || this.title) | |||
this.value_ = this.value | |||
this.searchText = '' | |||
}, | |||
change(e) { | |||
this.radioValue = e | |||
}, | |||
cofirm() { | |||
this.$emit("update:value", this.radioValue) | |||
this.$emit("change", this.radioValue) | |||
let obj = this.options.find(e1 => e1.value == this.radioValue) | |||
if (obj) this.title_ = obj.label | |||
this.close() | |||
}, | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.title { | |||
color: #000000; | |||
font-size: 32rpx; | |||
text-align: center; | |||
line-height: 100rpx; | |||
} | |||
.u-radio-group { | |||
width: 92%; | |||
max-height: 680rpx; | |||
overflow-y: auto; | |||
padding: 0 30rpx; | |||
.u-cell { | |||
background-color: #fff; | |||
border-radius: 20rpx 20rpx 0 0; | |||
padding: 24rpx 0; | |||
} | |||
} | |||
.u-border-bottom { | |||
border-color: #F6F6F6 !important; | |||
} | |||
.u-radio { | |||
margin-top: 18rpx; | |||
} | |||
</style> |
@@ -47,9 +47,27 @@ | |||
{ | |||
"path": "pages/attendanceCall/index", | |||
"style": { | |||
"navigationBarTitleText": "考勤点名" | |||
"navigationBarTitleText": "考勤点名", | |||
"enablePullDownRefresh": true | |||
} | |||
}, | |||
// 归寝 | |||
{ | |||
"path" : "pages/attendanceCall/returnBed/detail", | |||
"style" : | |||
{ | |||
"navigationBarTitleText": "查看详情", | |||
"enablePullDownRefresh": false | |||
} | |||
}, | |||
{ | |||
"path" : "pages/attendanceCall/returnBed/comfirm", | |||
"style" : | |||
{ | |||
"navigationBarTitleText": "归寝确认", | |||
"enablePullDownRefresh": false | |||
} | |||
}, | |||
// { | |||
// "path": "pages/attendanceCall/rollCall/index", | |||
// "style": { | |||
@@ -82,7 +100,7 @@ | |||
"navigationBarTitleText": "我的" | |||
} | |||
} | |||
], | |||
], | |||
"globalStyle": { | |||
"navigationBarTextStyle": "black", | |||
"navigationBarTitleText": "校园监控预警平台", | |||
@@ -4,7 +4,7 @@ | |||
color: '#000000', | |||
}" itemStyle="height:84rpx;width:33.33%;box-sizing:border-box;background:#fff;border-top:1rpx solid rgba(0,0,0,0.03)"></u-tabs> | |||
<view style="height: calc(100% - 84rpx);"> | |||
<component :is="componentName"/> | |||
<component :is="componentName" ref="pageComponent"/> | |||
</view> | |||
</view> | |||
</template> | |||
@@ -39,6 +39,11 @@ | |||
tabsClick(item) { | |||
this.componentName = item.value | |||
} | |||
}, | |||
onPullDownRefresh(){ | |||
this.$refs['pageComponent'].pullDownRefresh() | |||
uni.stopPullDownRefresh() | |||
} | |||
} | |||
</script> | |||
@@ -0,0 +1,159 @@ | |||
<template> | |||
<view> | |||
<view class="title"> | |||
<image src="@/static/image/home1.png" mode="" style="width: 40rpx;height: 40rpx;margin-right: 8rpx;"> | |||
</image> | |||
寝室104 | |||
</view> | |||
<view class="listTitlte"> | |||
已归寝 | |||
</view> | |||
<view class="list"> | |||
<view v-for="(item, index) in list" :key="index" class="item"> | |||
<view class="right"> | |||
<image src="@/static/image/test/test.png" mode="" style="width: 160rpx;height: 160rpx;"></image> | |||
<view class="des"> | |||
<view class="top"> | |||
<view class="status"> | |||
已归寝 | |||
</view> | |||
<view class="name"> | |||
杨云 | |||
</view> | |||
</view> | |||
<view class="depart"> | |||
系部:安环部 | |||
</view> | |||
<view class="bottom"> | |||
<view class="major">专业:环艺</view> | |||
<view class="class">班级:第二班</view> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
<view class="listTitlte"> | |||
未归寝 | |||
</view> | |||
<view class="list"> | |||
<view v-for="(item, index) in list" :key="index" class="item"> | |||
<view class="right"> | |||
<image src="@/static/image/test/test.png" mode="" style="width: 160rpx;height: 160rpx;"></image> | |||
<view class="des"> | |||
<view class="top"> | |||
<view class="status error"> | |||
未归寝 | |||
</view> | |||
<view class="name"> | |||
杨云 | |||
</view> | |||
</view> | |||
<view class="depart"> | |||
系部:安环部 | |||
</view> | |||
<view class="bottom"> | |||
<view class="major">专业:环艺</view> | |||
<view class="class">班级:第二班</view> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
list: [{ | |||
name: 1 | |||
}, { | |||
name: 2 | |||
}, { | |||
name: 3 | |||
}], | |||
checkboxValue:[], | |||
} | |||
}, | |||
methods: { | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.title { | |||
display: flex; | |||
color: #333333; | |||
padding: 26rpx; | |||
background: #fff; | |||
border-top: 1rpx solid rgba(0, 0, 0, 0.03); | |||
font-size: 30rpx; | |||
} | |||
.listTitlte{ | |||
color: #777777; | |||
font-size:28rpx; | |||
padding:18rpx 30rpx; | |||
} | |||
.list { | |||
padding: 0 26rpx; | |||
margin-bottom: 16rpx; | |||
.item { | |||
display: flex; | |||
margin-bottom: 28rpx; | |||
&:last-child { | |||
margin-bottom: 0; | |||
} | |||
.right { | |||
padding: 30rpx; | |||
flex: 1; | |||
background-color: #fff; | |||
border-radius: 18rpx; | |||
display: flex; | |||
.des { | |||
flex: 1; | |||
padding-left: 24rpx; | |||
font-size: 26rpx; | |||
color: #333; | |||
.top { | |||
color: #333; | |||
font-size: 32rpx; | |||
display:flex; | |||
.status{ | |||
display: inline-block; | |||
font-size: 26rpx; | |||
line-height: 1.5; | |||
background-color: #0FAF76; | |||
color: #fff; | |||
padding: 0 12rpx; | |||
border-radius: 8rpx; | |||
margin-right: 12rpx; | |||
} | |||
.status.error{ | |||
background-color: #EF2D2D; | |||
} | |||
} | |||
.depart { | |||
margin-top: 28rpx; | |||
} | |||
.bottom { | |||
margin-top: 18rpx; | |||
display: flex; | |||
justify-content: space-between; | |||
.major {} | |||
.class {} | |||
} | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@@ -1,6 +1,36 @@ | |||
<template> | |||
<view> | |||
客流 | |||
<view style="height: 100%;"> | |||
<u-empty marginTop="100rpx" :show="false" mode="list" text="暂无数据"></u-empty> | |||
<u-list @scrolltolower="scrolltolower" style="height: calc(100% - 0rpx);"> | |||
<u-list-item v-for="(item, index) in list" :key="index"> | |||
<view class="whiteCard"> | |||
<view class="row1"> | |||
摄像头:教室(海康)、大厅(魔豆) | |||
</view> | |||
<view class="row2"> | |||
查询时间:2024-08-14 08:34:59 | |||
</view> | |||
<view class="row3"> | |||
<view class=""> | |||
<text>开始时间:</text>2024-08-14 08:34:59 | |||
</view> | |||
<view class=""> | |||
<text>结束时间:</text>2024-08-14 08:34:59 | |||
</view> | |||
<view class=""> | |||
<text>分片类型:</text>小时 | |||
</view> | |||
</view> | |||
<view class="bottom"> | |||
<view class="btn" @click="NAV_TO('./returnBed/detail')"> | |||
<image src="@/static/image/see.png" mode=""></image> | |||
<text>分片详情</text> | |||
</view> | |||
</view> | |||
</view> | |||
</u-list-item> | |||
<u-loadmore :status="status" /> | |||
</u-list> | |||
</view> | |||
</template> | |||
@@ -8,15 +38,106 @@ | |||
export default { | |||
data() { | |||
return { | |||
list: [{}, {}, {}, {}, {}, {}, {}, {}, {}, ], | |||
isLoading: false, | |||
status: 'loadmore', //loading正在加载 loadmore加载更多 nomore没有更多了 | |||
search: { | |||
loudong: 1, | |||
qinshi: '' | |||
}, | |||
page: { | |||
size: 8, | |||
page: 8, | |||
} | |||
} | |||
}, | |||
methods: { | |||
scrolltolower() { | |||
this.loadmore() | |||
}, | |||
loadmore() { | |||
if (this.status != 'loadmore') return | |||
this.status = 'loading' | |||
setTimeout(() => { | |||
for (let i = 0; i < 1; i++) { | |||
this.list.push({}, {}, {}, {}) | |||
} | |||
// 获取到的总条数>=接口总条数 || 接口总条数为0 | |||
if (this.list.length >= 14) { | |||
this.status = 'nomore' | |||
} else { | |||
this.status = 'loadmore' | |||
} | |||
}, 2000) | |||
}, | |||
refresh() { | |||
this.status = 'loadmore' | |||
this.list = [] | |||
this.page.page = 1 | |||
this.loadmore() | |||
}, | |||
pullDownRefresh() { | |||
this.refresh() | |||
} | |||
}, | |||
onLoad() { | |||
this.loadmore() | |||
}, | |||
} | |||
</script> | |||
<style> | |||
<style lang="scss" scoped> | |||
.whiteCard { | |||
background-color: #fff; | |||
border-radius: 18rpx; | |||
margin: 12rpx 28rpx; | |||
padding: 30rpx; | |||
color: #333333; | |||
.row1 { | |||
font-size: 30rpx; | |||
} | |||
.row2 { | |||
font-size: 26rpx; | |||
margin-top: 12rpx; | |||
} | |||
.row3{ | |||
background-color: #F2F8FF; | |||
border-radius: 16rpx; | |||
font-size: 26rpx; | |||
padding: 18rpx 24rpx; | |||
line-height: 48rpx; | |||
margin-top: 14rpx; | |||
text{ | |||
color: #777777; | |||
} | |||
} | |||
.bottom { | |||
display: flex; | |||
border-top: 1rpx solid rgba(0, 0, 0, 0.1); | |||
margin-top: 24rpx; | |||
padding-top: 22rpx; | |||
position: relative; | |||
.btn { | |||
width: 100%; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
uni-image { | |||
width: 34rpx; | |||
height: 34rpx; | |||
margin-right: 6rpx; | |||
} | |||
</style> | |||
uni-text { | |||
font-size: 30rpx; | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,137 @@ | |||
<template> | |||
<view> | |||
<view class="title"> | |||
<image src="@/static/image/home1.png" mode="" style="width: 40rpx;height: 40rpx;margin-right: 8rpx;"></image> | |||
寝室104 | |||
</view> | |||
<view class="time"> | |||
2024年8月24日 18:00:00 ~ 18:59:00 | |||
</view> | |||
<u-checkbox-group v-model="checkboxValue" class="list" placement="column"> | |||
<view v-for="(item, index) in list" :key="index" class="item"> | |||
<u-checkbox :name="item.name" shape="circle" label=""></u-checkbox> | |||
<view class="right"> | |||
<image src="@/static/image/test/test.png" mode="" style="width: 160rpx;height: 160rpx;"></image> | |||
<view class="des"> | |||
<view class="name"> | |||
杨云 | |||
</view> | |||
<view class="depart"> | |||
系部:安环部 | |||
</view> | |||
<view class="bottom"> | |||
<view class="major">专业:环艺</view> | |||
<view class="class">班级:第二班</view> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</u-checkbox-group> | |||
<view class="returnConfirm"> | |||
<u-checkbox-group><u-checkbox shape="circle" label="全选" name="" @change="radioChange"></u-checkbox></u-checkbox-group> | |||
<u-button @click="returnConfirm" type="primary" style="border-radius: 36rpx;height: 72rpx;margin-left:16rpx" | |||
text="确定归寝(0)"></u-button> | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
list: [{ | |||
name: 1 | |||
}, { | |||
name: 2 | |||
}, { | |||
name: 3 | |||
}], | |||
checkboxValue:[], | |||
} | |||
}, | |||
methods: { | |||
radioChange(e){ | |||
if(e){ | |||
let ids = this.list.map(e=>e.name) | |||
this.checkboxValue = ids | |||
}else{ | |||
this.checkboxValue = [] | |||
} | |||
}, | |||
returnConfirm() { | |||
console.log(this.checkboxValue) | |||
} | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.title { | |||
display: flex; | |||
color: #333333; | |||
padding: 26rpx; | |||
background: #fff; | |||
border-top: 1rpx solid rgba(0, 0, 0, 0.03); | |||
font-size: 30rpx; | |||
} | |||
.time { | |||
color: #333333; | |||
font-size: 28rpx; | |||
padding: 26rpx; | |||
} | |||
.list { | |||
padding: 0 26rpx; | |||
.item { | |||
display: flex; | |||
margin-bottom: 28rpx; | |||
&:last-child { | |||
margin-bottom: 0; | |||
} | |||
.right { | |||
margin-left: 12rpx; | |||
padding: 30rpx; | |||
flex: 1; | |||
background-color: #fff; | |||
border-radius: 18rpx; | |||
display: flex; | |||
.des { | |||
flex: 1; | |||
padding-left: 24rpx; | |||
font-size: 26rpx; | |||
color: #333; | |||
.name { | |||
color: #333; | |||
font-size: 32rpx | |||
} | |||
.depart { | |||
margin-top: 28rpx; | |||
} | |||
.bottom { | |||
margin-top: 18rpx; | |||
display: flex; | |||
justify-content: space-between; | |||
.major {} | |||
.class {} | |||
} | |||
} | |||
} | |||
} | |||
} | |||
.returnConfirm { | |||
padding: 30rpx; | |||
display: flex; | |||
} | |||
</style> |
@@ -0,0 +1,159 @@ | |||
<template> | |||
<view> | |||
<view class="title"> | |||
<image src="@/static/image/home1.png" mode="" style="width: 40rpx;height: 40rpx;margin-right: 8rpx;"> | |||
</image> | |||
寝室104 | |||
</view> | |||
<view class="listTitlte"> | |||
已归寝 | |||
</view> | |||
<view class="list"> | |||
<view v-for="(item, index) in list" :key="index" class="item"> | |||
<view class="right"> | |||
<image src="@/static/image/test/test.png" mode="" style="width: 160rpx;height: 160rpx;"></image> | |||
<view class="des"> | |||
<view class="top"> | |||
<view class="status"> | |||
已归寝 | |||
</view> | |||
<view class="name"> | |||
杨云 | |||
</view> | |||
</view> | |||
<view class="depart"> | |||
系部:安环部 | |||
</view> | |||
<view class="bottom"> | |||
<view class="major">专业:环艺</view> | |||
<view class="class">班级:第二班</view> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
<view class="listTitlte"> | |||
未归寝 | |||
</view> | |||
<view class="list"> | |||
<view v-for="(item, index) in list" :key="index" class="item"> | |||
<view class="right"> | |||
<image src="@/static/image/test/test.png" mode="" style="width: 160rpx;height: 160rpx;"></image> | |||
<view class="des"> | |||
<view class="top"> | |||
<view class="status error"> | |||
未归寝 | |||
</view> | |||
<view class="name"> | |||
杨云 | |||
</view> | |||
</view> | |||
<view class="depart"> | |||
系部:安环部 | |||
</view> | |||
<view class="bottom"> | |||
<view class="major">专业:环艺</view> | |||
<view class="class">班级:第二班</view> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
list: [{ | |||
name: 1 | |||
}, { | |||
name: 2 | |||
}, { | |||
name: 3 | |||
}], | |||
checkboxValue:[], | |||
} | |||
}, | |||
methods: { | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.title { | |||
display: flex; | |||
color: #333333; | |||
padding: 26rpx; | |||
background: #fff; | |||
border-top: 1rpx solid rgba(0, 0, 0, 0.03); | |||
font-size: 30rpx; | |||
} | |||
.listTitlte{ | |||
color: #777777; | |||
font-size:28rpx; | |||
padding:18rpx 30rpx; | |||
} | |||
.list { | |||
padding: 0 26rpx; | |||
margin-bottom: 16rpx; | |||
.item { | |||
display: flex; | |||
margin-bottom: 28rpx; | |||
&:last-child { | |||
margin-bottom: 0; | |||
} | |||
.right { | |||
padding: 30rpx; | |||
flex: 1; | |||
background-color: #fff; | |||
border-radius: 18rpx; | |||
display: flex; | |||
.des { | |||
flex: 1; | |||
padding-left: 24rpx; | |||
font-size: 26rpx; | |||
color: #333; | |||
.top { | |||
color: #333; | |||
font-size: 32rpx; | |||
display:flex; | |||
.status{ | |||
display: inline-block; | |||
font-size: 26rpx; | |||
line-height: 1.5; | |||
background-color: #0FAF76; | |||
color: #fff; | |||
padding: 0 12rpx; | |||
border-radius: 8rpx; | |||
margin-right: 12rpx; | |||
} | |||
.status.error{ | |||
background-color: #EF2D2D; | |||
} | |||
} | |||
.depart { | |||
margin-top: 28rpx; | |||
} | |||
.bottom { | |||
margin-top: 18rpx; | |||
display: flex; | |||
justify-content: space-between; | |||
.major {} | |||
.class {} | |||
} | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@@ -1,7 +1,13 @@ | |||
<template> | |||
<view style="height: 100%;"> | |||
<view class="searchBox"> | |||
<selectRadio :value.sync="search.loudong" :options="[{value:1,label:'loudong1'},{value:2,label:'loudong2'}]" | |||
title="楼栋" /> | |||
<selectSearch :value.sync="search.qinshi" :options="[{value:1,label:'qinshi1'},{value:2,label:'qinshi2'}]" | |||
title="寝室" search-place-holder="寝室号"/> | |||
</view> | |||
<u-empty marginTop="100rpx" :show="false" mode="list" text="暂无数据"></u-empty> | |||
<u-list @scrolltolower="scrolltolower" style="height: calc(100% - 0rpx);"> | |||
<u-list @scrolltolower="scrolltolower" style="height: calc(100% - 220rpx);"> | |||
<u-list-item v-for="(item, index) in list" :key="index"> | |||
<view class="whiteCard"> | |||
<view class="row1"> | |||
@@ -16,7 +22,11 @@ | |||
<text class="noReturnNum">未归寝人数:2</text> | |||
</view> | |||
<view class="bottom"> | |||
<view class="returnConfirm"> | |||
<view class="btn" @click="NAV_TO('./returnBed/detail')"> | |||
<image src="@/static/image/see.png" mode=""></image> | |||
<text>查看</text> | |||
</view> | |||
<view class="btn" @click="NAV_TO('./returnBed/comfirm')"> | |||
<image src="@/static/image/confirm.png" mode=""></image> | |||
<text>归寝确认</text> | |||
</view> | |||
@@ -29,12 +39,26 @@ | |||
</template> | |||
<script> | |||
import selectRadio from "@/components/selectRadio.vue" | |||
import selectSearch from "@/components/selectSearch.vue" | |||
export default { | |||
components: { | |||
selectRadio, | |||
selectSearch | |||
}, | |||
data() { | |||
return { | |||
list: [{},{},{},{},{},{},{},{},{},], | |||
isLoading:false, | |||
status:'loadmore',//loading正在加载 loadmore加载更多 nomore没有更多了 | |||
list: [{}, {}, {}, {}, {}, {}, {}, {}, {}, ], | |||
isLoading: false, | |||
status: 'loadmore', //loading正在加载 loadmore加载更多 nomore没有更多了 | |||
search: { | |||
loudong: 1, | |||
qinshi: '' | |||
}, | |||
page:{ | |||
size:8, | |||
page:8, | |||
} | |||
} | |||
}, | |||
methods: { | |||
@@ -42,19 +66,28 @@ | |||
this.loadmore() | |||
}, | |||
loadmore() { | |||
if(this.status != 'loadmore')return | |||
if (this.status != 'loadmore') return | |||
this.status = 'loading' | |||
setTimeout(()=>{ | |||
setTimeout(() => { | |||
for (let i = 0; i < 1; i++) { | |||
this.list.push({},{}) | |||
this.list.push({}, {},{},{}) | |||
} | |||
// 获取到的总条数>=接口总条数 | |||
if(this.list.length>=14){ | |||
// 获取到的总条数>=接口总条数 || 接口总条数为0 | |||
if (this.list.length >= 14) { | |||
this.status = 'nomore' | |||
}else{ | |||
} else { | |||
this.status = 'loadmore' | |||
} | |||
},2000) | |||
}, 2000) | |||
}, | |||
refresh(){ | |||
this.status = 'loadmore' | |||
this.list = [] | |||
this.page.page = 1 | |||
this.loadmore() | |||
}, | |||
pullDownRefresh(){ | |||
this.refresh() | |||
} | |||
}, | |||
onLoad() { | |||
@@ -64,58 +97,91 @@ | |||
</script> | |||
<style lang="scss" scoped> | |||
.whiteCard{ | |||
.searchBox { | |||
margin: 24rpx 28rpx 12rpx; | |||
>view { | |||
margin-bottom: 18rpx; | |||
&:last-child { | |||
margin-bottom: 0rpx; | |||
} | |||
} | |||
} | |||
.whiteCard { | |||
background-color: #fff; | |||
border-radius: 18rpx; | |||
margin: 12rpx 28rpx; | |||
padding: 30rpx; | |||
color: #333333; | |||
.row1{ | |||
.row1 { | |||
display: flex; | |||
justify-content: space-between; | |||
.room{ | |||
.room { | |||
font-size: 34rpx; | |||
} | |||
.peopleNum{ | |||
uni-image{ | |||
.peopleNum { | |||
uni-image { | |||
width: 34rpx; | |||
height: 34rpx; | |||
position: relative; | |||
top: 6rpx; | |||
margin-right: 6rpx; | |||
} | |||
uni-text{ | |||
uni-text { | |||
color: #2388FF; | |||
font-size: 30rpx; | |||
} | |||
} | |||
} | |||
.row2{ | |||
.row2 { | |||
margin-top: 18rpx; | |||
display: flex; | |||
justify-content: space-between; | |||
font-size: 30rpx; | |||
.returnNum{ | |||
} | |||
.noReturnNum{ | |||
} | |||
.returnNum {} | |||
.noReturnNum {} | |||
} | |||
.bottom{ | |||
.bottom { | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
border-top: 1rpx solid rgba(0, 0, 0, 0.1); | |||
margin-top: 24rpx; | |||
padding-top: 22rpx; | |||
.returnConfirm{ | |||
uni-image{ | |||
position: relative; | |||
::after{ | |||
content: ""; | |||
display: block; | |||
position: absolute; | |||
top: 30rpx;bottom: 0; | |||
left: 0;right: 0; | |||
margin: 0 auto; | |||
width: 1rpx; | |||
height: 32rpx; | |||
background-color: rgba(0, 0, 0, 0.01); | |||
} | |||
.btn { | |||
width: 50%; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
uni-image { | |||
width: 34rpx; | |||
height: 34rpx; | |||
position: relative; | |||
top: 6rpx; | |||
margin-right: 6rpx; | |||
} | |||
uni-text{ | |||
uni-text { | |||
font-size: 30rpx; | |||
} | |||
} | |||