|
|
@@ -1,22 +1,232 @@ |
|
|
|
<template> |
|
|
|
<view> |
|
|
|
点名 |
|
|
|
<view style="height: 100%;"> |
|
|
|
<view class="topBox"> |
|
|
|
<view class="left"> |
|
|
|
<selectTree v-model="search.departCalss" :labels.sync="search.departCalssName" /> |
|
|
|
</view> |
|
|
|
<view class="right" @click="manageClick" :style="{color:isManage?'#EF2D2D':'#333'}"> |
|
|
|
<text>{{isManage?'取消管理':'批量管理'}}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<u-empty marginTop="100rpx" :show="false" mode="list" text="暂无数据"></u-empty> |
|
|
|
<u-list @scrolltolower="scrolltolower" style="height: calc(100% - 110rpx);"> |
|
|
|
<u-checkbox-group v-model="checkboxValue" placement="column"> |
|
|
|
<u-list-item v-for="(item, index) in list" :key="index"> |
|
|
|
<u-checkbox v-if="isManage" :name="item.name" shape="circle" label=""></u-checkbox> |
|
|
|
<view :class="{whiteCard:true,active:checkboxValue.includes(item.name)}"> |
|
|
|
<view class="row1"> |
|
|
|
教室(海康) |
|
|
|
</view> |
|
|
|
<view class="row2"> |
|
|
|
<view class=""> |
|
|
|
持续时间:20 |
|
|
|
</view> |
|
|
|
<view class=""> |
|
|
|
相似度:0.5 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="bottom" v-show="!isManage"> |
|
|
|
<view class="btn" @click="NAV_TO('./passengerFlow/detail')"> |
|
|
|
<image src="@/static/image/see.png" mode=""></image> |
|
|
|
<text>查看</text> |
|
|
|
</view> |
|
|
|
<view class="btn" @click="NAV_TO('./passengerFlow/detail')"> |
|
|
|
<image src="@/static/image/earlyWarning/delete.png" mode=""></image> |
|
|
|
<text>删除</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</u-list-item> |
|
|
|
</u-checkbox-group> |
|
|
|
<u-loadmore :status="status" /> |
|
|
|
<view class="bottomConfirm" v-if="isManage"> |
|
|
|
<u-checkbox-group><u-checkbox shape="circle" label="全选" name="" @change="radioChange"></u-checkbox></u-checkbox-group> |
|
|
|
<u-button @click="confirm" type="primary" style="border-radius: 36rpx;height: 72rpx;margin-left:16rpx" |
|
|
|
text="确定删除"></u-button> |
|
|
|
</view> |
|
|
|
</u-list> |
|
|
|
<image class="addBtn" @click="NAV_TO('./passengerFlow/add')" src="@/static/image/add.png" mode=""></image> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import SelectTree from "@/components/selectTree.vue" |
|
|
|
export default { |
|
|
|
components: { |
|
|
|
SelectTree |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
|
|
|
|
list: [{name:1}, {name:2}, {name:3}, {name:4}, {name:5}, {name:6}, {name:7}, {name:8}, {name:9}], |
|
|
|
isLoading: false, |
|
|
|
status: 'loadmore', //loading正在加载 loadmore加载更多 nomore没有更多了 |
|
|
|
search: { |
|
|
|
class: '', |
|
|
|
}, |
|
|
|
page: { |
|
|
|
size: 8, |
|
|
|
page: 8, |
|
|
|
}, |
|
|
|
checkboxValue: [], |
|
|
|
isManage:false, |
|
|
|
} |
|
|
|
}, |
|
|
|
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() |
|
|
|
}, |
|
|
|
manageClick(){ |
|
|
|
this.checkboxValue = [] |
|
|
|
this.isManage = this.isManage?false:true |
|
|
|
}, |
|
|
|
radioChange(e){ |
|
|
|
if(e){ |
|
|
|
let ids = this.list.map(e=>e.name) |
|
|
|
this.checkboxValue = ids |
|
|
|
}else{ |
|
|
|
this.checkboxValue = [] |
|
|
|
} |
|
|
|
}, |
|
|
|
confirm(){ |
|
|
|
this.CONFIRM(`是否删除点名任务?`).then(()=>{ |
|
|
|
|
|
|
|
}) |
|
|
|
}, |
|
|
|
pullDownRefresh() { |
|
|
|
this.refresh() |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad() { |
|
|
|
this.loadmore() |
|
|
|
}, |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.addBtn { |
|
|
|
width: 140rpx; |
|
|
|
height: 140rpx; |
|
|
|
position: fixed; |
|
|
|
right: 15rpx; |
|
|
|
bottom: 160rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.bottomConfirm { |
|
|
|
padding: 30rpx; |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
|
|
|
|
.topBox { |
|
|
|
margin: 12rpx 28rpx; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
</style> |
|
|
|
.left { |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.right { |
|
|
|
font-size: 28rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
color: #333; |
|
|
|
padding: 0 26rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.u-list-item { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
flex-direction: unset; |
|
|
|
margin: 12rpx 28rpx; |
|
|
|
.whiteCard { |
|
|
|
flex: 1; |
|
|
|
&.active{ |
|
|
|
border: 1rpx solid #2388FF; |
|
|
|
background-color: #F2F8FF; |
|
|
|
} |
|
|
|
} |
|
|
|
.u-checkbox{ |
|
|
|
margin-right: 12rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.whiteCard { |
|
|
|
background-color: #fff; |
|
|
|
border-radius: 18rpx; |
|
|
|
padding: 30rpx; |
|
|
|
color: #333333; |
|
|
|
|
|
|
|
.row1 { |
|
|
|
font-size: 32rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.row2 { |
|
|
|
font-size: 26rpx; |
|
|
|
margin-top: 20rpx; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
} |
|
|
|
|
|
|
|
.bottom { |
|
|
|
display: flex; |
|
|
|
border-top: 1rpx solid rgba(0, 0, 0, 0.1); |
|
|
|
margin-top: 36rpx; |
|
|
|
padding-top: 22rpx; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
::after { |
|
|
|
content: ""; |
|
|
|
display: block; |
|
|
|
position: absolute; |
|
|
|
top: 26rpx; |
|
|
|
bottom: 0; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
margin: 0 auto; |
|
|
|
width: 1rpx; |
|
|
|
height: 32rpx; |
|
|
|
background-color: rgba(0, 0, 0, 0.01); |
|
|
|
} |
|
|
|
|
|
|
|
.btn { |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
uni-image { |
|
|
|
width: 34rpx; |
|
|
|
height: 34rpx; |
|
|
|
margin-right: 6rpx; |
|
|
|
} |
|
|
|
|
|
|
|
uni-text { |
|
|
|
font-size: 30rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |