| @@ -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; | |||
| } | |||
| } | |||