@@ -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", | "path": "pages/attendanceCall/index", | ||||
"style": { | "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", | // "path": "pages/attendanceCall/rollCall/index", | ||||
// "style": { | // "style": { | ||||
@@ -82,7 +100,7 @@ | |||||
"navigationBarTitleText": "我的" | "navigationBarTitleText": "我的" | ||||
} | } | ||||
} | } | ||||
], | |||||
], | |||||
"globalStyle": { | "globalStyle": { | ||||
"navigationBarTextStyle": "black", | "navigationBarTextStyle": "black", | ||||
"navigationBarTitleText": "校园监控预警平台", | "navigationBarTitleText": "校园监控预警平台", | ||||
@@ -4,7 +4,7 @@ | |||||
color: '#000000', | 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> | }" 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);"> | <view style="height: calc(100% - 84rpx);"> | ||||
<component :is="componentName"/> | |||||
<component :is="componentName" ref="pageComponent"/> | |||||
</view> | </view> | ||||
</view> | </view> | ||||
</template> | </template> | ||||
@@ -39,6 +39,11 @@ | |||||
tabsClick(item) { | tabsClick(item) { | ||||
this.componentName = item.value | this.componentName = item.value | ||||
} | } | ||||
}, | |||||
onPullDownRefresh(){ | |||||
this.$refs['pageComponent'].pullDownRefresh() | |||||
uni.stopPullDownRefresh() | |||||
} | } | ||||
} | } | ||||
</script> | </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> | <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> | </view> | ||||
</template> | </template> | ||||
@@ -8,15 +38,106 @@ | |||||
export default { | export default { | ||||
data() { | data() { | ||||
return { | return { | ||||
list: [{}, {}, {}, {}, {}, {}, {}, {}, {}, ], | |||||
isLoading: false, | |||||
status: 'loadmore', //loading正在加载 loadmore加载更多 nomore没有更多了 | |||||
search: { | |||||
loudong: 1, | |||||
qinshi: '' | |||||
}, | |||||
page: { | |||||
size: 8, | |||||
page: 8, | |||||
} | |||||
} | } | ||||
}, | }, | ||||
methods: { | 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> | </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> | <template> | ||||
<view style="height: 100%;"> | <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-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"> | <u-list-item v-for="(item, index) in list" :key="index"> | ||||
<view class="whiteCard"> | <view class="whiteCard"> | ||||
<view class="row1"> | <view class="row1"> | ||||
@@ -16,7 +22,11 @@ | |||||
<text class="noReturnNum">未归寝人数:2</text> | <text class="noReturnNum">未归寝人数:2</text> | ||||
</view> | </view> | ||||
<view class="bottom"> | <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> | <image src="@/static/image/confirm.png" mode=""></image> | ||||
<text>归寝确认</text> | <text>归寝确认</text> | ||||
</view> | </view> | ||||
@@ -29,12 +39,26 @@ | |||||
</template> | </template> | ||||
<script> | <script> | ||||
import selectRadio from "@/components/selectRadio.vue" | |||||
import selectSearch from "@/components/selectSearch.vue" | |||||
export default { | export default { | ||||
components: { | |||||
selectRadio, | |||||
selectSearch | |||||
}, | |||||
data() { | data() { | ||||
return { | 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: { | methods: { | ||||
@@ -42,19 +66,28 @@ | |||||
this.loadmore() | this.loadmore() | ||||
}, | }, | ||||
loadmore() { | loadmore() { | ||||
if(this.status != 'loadmore')return | |||||
if (this.status != 'loadmore') return | |||||
this.status = 'loading' | this.status = 'loading' | ||||
setTimeout(()=>{ | |||||
setTimeout(() => { | |||||
for (let i = 0; i < 1; i++) { | 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' | this.status = 'nomore' | ||||
}else{ | |||||
} else { | |||||
this.status = 'loadmore' | this.status = 'loadmore' | ||||
} | } | ||||
},2000) | |||||
}, 2000) | |||||
}, | |||||
refresh(){ | |||||
this.status = 'loadmore' | |||||
this.list = [] | |||||
this.page.page = 1 | |||||
this.loadmore() | |||||
}, | |||||
pullDownRefresh(){ | |||||
this.refresh() | |||||
} | } | ||||
}, | }, | ||||
onLoad() { | onLoad() { | ||||
@@ -64,58 +97,91 @@ | |||||
</script> | </script> | ||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
.whiteCard{ | |||||
.searchBox { | |||||
margin: 24rpx 28rpx 12rpx; | |||||
>view { | |||||
margin-bottom: 18rpx; | |||||
&:last-child { | |||||
margin-bottom: 0rpx; | |||||
} | |||||
} | |||||
} | |||||
.whiteCard { | |||||
background-color: #fff; | background-color: #fff; | ||||
border-radius: 18rpx; | border-radius: 18rpx; | ||||
margin: 12rpx 28rpx; | margin: 12rpx 28rpx; | ||||
padding: 30rpx; | padding: 30rpx; | ||||
color: #333333; | color: #333333; | ||||
.row1{ | |||||
.row1 { | |||||
display: flex; | display: flex; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
.room{ | |||||
.room { | |||||
font-size: 34rpx; | font-size: 34rpx; | ||||
} | } | ||||
.peopleNum{ | |||||
uni-image{ | |||||
.peopleNum { | |||||
uni-image { | |||||
width: 34rpx; | width: 34rpx; | ||||
height: 34rpx; | height: 34rpx; | ||||
position: relative; | position: relative; | ||||
top: 6rpx; | top: 6rpx; | ||||
margin-right: 6rpx; | margin-right: 6rpx; | ||||
} | } | ||||
uni-text{ | |||||
uni-text { | |||||
color: #2388FF; | color: #2388FF; | ||||
font-size: 30rpx; | font-size: 30rpx; | ||||
} | } | ||||
} | } | ||||
} | } | ||||
.row2{ | |||||
.row2 { | |||||
margin-top: 18rpx; | margin-top: 18rpx; | ||||
display: flex; | display: flex; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
font-size: 30rpx; | font-size: 30rpx; | ||||
.returnNum{ | |||||
} | |||||
.noReturnNum{ | |||||
} | |||||
.returnNum {} | |||||
.noReturnNum {} | |||||
} | } | ||||
.bottom{ | |||||
.bottom { | |||||
display: flex; | display: flex; | ||||
justify-content: center; | |||||
align-items: center; | |||||
border-top: 1rpx solid rgba(0, 0, 0, 0.1); | border-top: 1rpx solid rgba(0, 0, 0, 0.1); | ||||
margin-top: 24rpx; | margin-top: 24rpx; | ||||
padding-top: 22rpx; | 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; | width: 34rpx; | ||||
height: 34rpx; | height: 34rpx; | ||||
position: relative; | position: relative; | ||||
top: 6rpx; | top: 6rpx; | ||||
margin-right: 6rpx; | margin-right: 6rpx; | ||||
} | } | ||||
uni-text{ | |||||
uni-text { | |||||
font-size: 30rpx; | font-size: 30rpx; | ||||
} | } | ||||
} | } | ||||