@@ -1,5 +1,5 @@ | |||||
<template> | <template> | ||||
<u-cell :title="title" isLink :border="false" @click="click" :titleStyle="{fontSize:'28rpx'}"> | |||||
<u-cell :title="title" isLink :border="false" @click="click" :titleStyle="{fontSize:'28rpx',color:hasValue?'#333':'#666'}"> | |||||
<view v-if="multiple&&cellValue.length" slot="title" class="u-slot-title selectedBox"> | <view v-if="multiple&&cellValue.length" slot="title" class="u-slot-title selectedBox"> | ||||
<view v-for="(item,index) in cellValue" :key="index"> | <view v-for="(item,index) in cellValue" :key="index"> | ||||
{{item}} | {{item}} | ||||
@@ -18,9 +18,12 @@ | |||||
multiple: { | multiple: { | ||||
default: false, | default: false, | ||||
}, | }, | ||||
hasValue: { | |||||
default: false, | |||||
}, | |||||
cellValue: { | cellValue: { | ||||
default: () => [], | default: () => [], | ||||
} | |||||
}, | |||||
}, | }, | ||||
methods: { | methods: { | ||||
click() { | click() { | ||||
@@ -1,6 +1,7 @@ | |||||
<template> | <template> | ||||
<view @touchmove.stop @touch.stop> | <view @touchmove.stop @touch.stop> | ||||
<myCell v-show="cellVisible" :title="title_" isLink :border="false" @click="show = true"></myCell> | |||||
<myCell v-show="cellVisible" :title="title_" isLink :border="false" :hasValue="value?true:false" | |||||
@click="cellClick"></myCell> | |||||
<u-popup :show="show" mode="center" :round="10" @close="close" @open="open"> | <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-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 v-for="(item,index) in options" :key="index" :label="item.label" :name="item.value"></u-radio> | ||||
@@ -13,7 +14,7 @@ | |||||
import myCell from "@/components/cell.vue" | import myCell from "@/components/cell.vue" | ||||
export default { | export default { | ||||
name: "selectRadio", | name: "selectRadio", | ||||
components:{ | |||||
components: { | |||||
myCell | myCell | ||||
}, | }, | ||||
props: { | props: { | ||||
@@ -24,9 +25,12 @@ | |||||
default: [], | default: [], | ||||
type: Array | type: Array | ||||
}, | }, | ||||
title:{ | |||||
title: { | |||||
default: "", | default: "", | ||||
}, | }, | ||||
placeholder: { | |||||
default: "请选择", | |||||
}, | |||||
cellVisible: { | cellVisible: { | ||||
default: true, | default: true, | ||||
}, | }, | ||||
@@ -34,32 +38,38 @@ | |||||
data() { | data() { | ||||
return { | return { | ||||
show: false, | show: false, | ||||
title_:this.title, | |||||
value_:this.value, | |||||
title_: this.title || this.placeholder, | |||||
value_: this.value, | |||||
}; | }; | ||||
}, | }, | ||||
mounted() { | mounted() { | ||||
if(this.value){ | |||||
let obj = this.options.find(e1=>e1.value == this.value) | |||||
if(obj) this.title_ = obj.label | |||||
if (this.value) { | |||||
let obj = this.options.find(e1 => e1.value == this.value) | |||||
if (obj) this.title_ = obj.label | |||||
} | } | ||||
}, | }, | ||||
methods: { | methods: { | ||||
cellClick() { | |||||
if (!this.options.length) { | |||||
this.TOAST('暂无数据') | |||||
return | |||||
} | |||||
this.show = true | |||||
}, | |||||
close() { | close() { | ||||
this.show = false | this.show = false | ||||
}, | }, | ||||
open(){ | |||||
open() { | |||||
let obj = this.options.find(e1 => e1.value == this.value) | let obj = this.options.find(e1 => e1.value == this.value) | ||||
if (obj) this.title_ = obj.label | |||||
this.title_ = obj ? obj.label : this.title | |||||
this.title_ = obj ? obj.label : this.placeholder | |||||
this.value_ = this.value | this.value_ = this.value | ||||
this.show = true | this.show = true | ||||
}, | }, | ||||
change(e) { | 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") | |||||
this.$emit("input", e) | |||||
this.$emit("change", e) | |||||
let obj = this.options.find(e1 => e1.value == e) | |||||
this.title_ = obj ? obj.label : this.placeholder | |||||
this.close() | this.close() | ||||
}, | }, | ||||
} | } | ||||
@@ -72,6 +82,7 @@ | |||||
height: 680rpx; | height: 680rpx; | ||||
overflow-y: auto; | overflow-y: auto; | ||||
padding: 12rpx 32rpx 24rpx 32rpx; | padding: 12rpx 32rpx 24rpx 32rpx; | ||||
.u-cell { | .u-cell { | ||||
background-color: #fff; | background-color: #fff; | ||||
border-radius: 20rpx; | border-radius: 20rpx; | ||||
@@ -85,10 +96,11 @@ | |||||
.u-radio { | .u-radio { | ||||
margin-top: 26rpx; | margin-top: 26rpx; | ||||
padding-bottom:28rpx!important; | |||||
padding-bottom: 28rpx !important; | |||||
} | } | ||||
.u-radio:last-child{ | |||||
.u-radio:last-child { | |||||
border-bottom: none; | border-bottom: none; | ||||
padding-bottom:14rpx!important; | |||||
padding-bottom: 14rpx !important; | |||||
} | } | ||||
</style> | </style> |
@@ -1,6 +1,6 @@ | |||||
<template> | <template> | ||||
<view @touchmove.stop @touch.stop> | <view @touchmove.stop @touch.stop> | ||||
<myCell v-show="cellVisible" :multiple="multiple" :cellValue="cellValue" :title="title_" isLink :border="false" @click="show = true"> | |||||
<myCell v-show="cellVisible" :multiple="multiple" :hasValue="value&&value.length?true:false" :cellValue="cellValue" :title="title_" isLink :border="false" @click="show = true"> | |||||
</myCell> | </myCell> | ||||
<u-popup :show="show" mode="bottom" :closeable="true" :round="10" @close="close" @open="open"> | <u-popup :show="show" mode="bottom" :closeable="true" :round="10" @close="close" @open="open"> | ||||
<view> | <view> | ||||
@@ -118,7 +118,7 @@ | |||||
this.gruopValue = e | this.gruopValue = e | ||||
}, | }, | ||||
cofirm() { | cofirm() { | ||||
this.$emit("update:value", this.gruopValue) | |||||
this.$emit("input", this.gruopValue) | |||||
this.$emit("change", this.gruopValue) | this.$emit("change", this.gruopValue) | ||||
if (!this.multiple) { | if (!this.multiple) { | ||||
let obj = this.options.find(e1 => e1.value == this.gruopValue) | let obj = this.options.find(e1 => e1.value == this.gruopValue) | ||||
@@ -1,6 +1,6 @@ | |||||
<template> | <template> | ||||
<view @touchmove.stop @touch.stop> | <view @touchmove.stop @touch.stop> | ||||
<myCell v-show="cellVisible" :title="title" isLink :border="false" @click="show = true"></myCell> | |||||
<myCell v-show="cellVisible" :title="title" isLink :hasValue="value&&value.length?true:false" :border="false" @click="show = true"></myCell> | |||||
<u-popup :show="show" mode="bottom" :closeable="true" :round="10" @close="close" @open="open"> | <u-popup :show="show" mode="bottom" :closeable="true" :round="10" @close="close" @open="open"> | ||||
<view class="title"> | <view class="title"> | ||||
{{popupTitle}} | {{popupTitle}} | ||||
@@ -1,7 +1,7 @@ | |||||
<template> | <template> | ||||
<view style="height: 100%;"> | <view style="height: 100%;"> | ||||
<view class="searchBox"> | <view class="searchBox"> | ||||
<selectRadio :value.sync="search.loudong" :options="[{value:1,label:'男生宿舍1号楼'},{value:2,label:'男生宿舍2号楼'},{value:3,label:'女生宿舍1号楼'},{value:4,label:'女生宿舍2号楼'}]" | |||||
<selectRadio v-model="search.loudong" :options="[{value:1,label:'男生宿舍1号楼'},{value:2,label:'男生宿舍2号楼'},{value:3,label:'女生宿舍1号楼'},{value:4,label:'女生宿舍2号楼'}]" | |||||
title="楼栋" /> | title="楼栋" /> | ||||
<selectSearch :value.sync="search.qinshi" :options="[{value:1,label:'寝室302'},{value:2,label:'寝室305'},{value:3,label:'寝室303'}]" | <selectSearch :value.sync="search.qinshi" :options="[{value:1,label:'寝室302'},{value:2,label:'寝室305'},{value:3,label:'寝室303'}]" | ||||
placeholder="请选择寝室" popupTitle="请选择寝室" search-placeholder="请输入寝室号"/> | placeholder="请选择寝室" popupTitle="请选择寝室" search-placeholder="请输入寝室号"/> | ||||
@@ -97,7 +97,7 @@ | |||||
} | } | ||||
.cate { | .cate { | ||||
font-size: 30rpx; | |||||
font-size: 28rpx; | |||||
overflow-x: auto; | overflow-x: auto; | ||||
.cateList { | .cateList { | ||||
@@ -108,7 +108,7 @@ | |||||
background-color: #fff; | background-color: #fff; | ||||
border-radius: 35rpx; | border-radius: 35rpx; | ||||
padding: 0 56rpx; | padding: 0 56rpx; | ||||
line-height: 70rpx; | |||||
line-height: 74rpx; | |||||
margin-right: 30rpx; | margin-right: 30rpx; | ||||
white-space: nowrap; | white-space: nowrap; | ||||
color: #333; | color: #333; | ||||
@@ -146,7 +146,6 @@ | |||||
color: #333; | color: #333; | ||||
.top { | .top { | ||||
color: #333; | |||||
font-size: 32rpx; | font-size: 32rpx; | ||||
display: flex; | display: flex; | ||||
@@ -159,6 +158,10 @@ | |||||
border-radius: 8rpx; | border-radius: 8rpx; | ||||
margin-right: 12rpx; | margin-right: 12rpx; | ||||
} | } | ||||
.name{ | |||||
font-size: 32rpx; | |||||
font-weight: 700; | |||||
} | |||||
} | } | ||||
.depart { | .depart { | ||||
@@ -1,19 +1,14 @@ | |||||
<template> | <template> | ||||
<view style="height: 100%;"> | <view style="height: 100%;"> | ||||
<view class="topBox"> | <view class="topBox"> | ||||
<view class="left"> | |||||
<selectTree v-model="search.departCalss" placeholder="全部班级" :labels.sync="search.departCalssName" /> | |||||
</view> | |||||
<view class="right" @click="manageClick" :style="{color:isManage?'#EF2D2D':'#333'}"> | |||||
<text>{{isManage?'取消管理':'批量管理'}}</text> | |||||
</view> | |||||
<SelectRadio v-model="search.departCalss" placeholder="请选择摄像头" :options="[{value:1,label:'走廊尽头(海康)'},{value:2,label:'厨房(海康)'},{value:3,label:'走廊尽头(海康)'},{value:4,label:'厨房(海康)'}]" /> | |||||
</view> | </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% - 110rpx);" :class="{isManage:isManage}"> | |||||
<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)}"> | |||||
<u-list @scrolltolower="scrolltolower" style="height: calc(100% - 150rpx);"> | |||||
<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="left"> | |||||
<view class="row1"> | <view class="row1"> | ||||
教室(海康) | 教室(海康) | ||||
</view> | </view> | ||||
@@ -25,39 +20,49 @@ | |||||
相似度:0.5 | 相似度:0.5 | ||||
</view> | </view> | ||||
</view> | </view> | ||||
<view class="bottom" v-show="!isManage"> | |||||
<view class="btn" @click="NAV_TO('./rollCall/detail')"> | |||||
<image src="@/static/image/see.png" mode="aspectFill"></image> | |||||
<text>查看</text> | |||||
</view> | |||||
<view class="btn" @click="del(item)"> | |||||
<image src="@/static/image/earlyWarning/delete.png" mode="aspectFill"></image> | |||||
<text>删除</text> | |||||
</view> | |||||
<view class="right" v-show="!isManage"> | |||||
<view class="btn" @click="NAV_TO('./detail')"> | |||||
<view> | |||||
<image src="@/static/image/seeBlue.png" mode="aspectFill"></image> | |||||
</view> | </view> | ||||
<text>查看</text> | |||||
</view> | </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> | |||||
</view> | |||||
</u-list-item> | |||||
<u-loadmore :status="status" /> | |||||
</u-list> | </u-list> | ||||
<image v-if="!isManage" class="addBtn" @click="NAV_TO('./passengerFlow/add')" src="@/static/image/add.png" mode="aspectFill"></image> | |||||
</view> | </view> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import SelectTree from "@/components/selectTree.vue" | |||||
import SelectRadio from "@/components/selectRadio.vue" | |||||
export default { | export default { | ||||
components: { | components: { | ||||
SelectTree | |||||
SelectRadio | |||||
}, | }, | ||||
data() { | data() { | ||||
return { | return { | ||||
list: [{name:1}, {name:2}, {name:3}, {name:4}, {name:5}, {name:6}, {name:7}, {name:8}, {name:9}], | |||||
list: [{ | |||||
name: 1 | |||||
}, { | |||||
name: 2 | |||||
}, { | |||||
name: 3 | |||||
}, { | |||||
name: 4 | |||||
}, { | |||||
name: 5 | |||||
}, { | |||||
name: 6 | |||||
}, { | |||||
name: 7 | |||||
}, { | |||||
name: 8 | |||||
}, { | |||||
name: 9 | |||||
}], | |||||
isLoading: false, | isLoading: false, | ||||
status: 'loadmore', //loading正在加载 loadmore加载更多 nomore没有更多了 | status: 'loadmore', //loading正在加载 loadmore加载更多 nomore没有更多了 | ||||
search: { | search: { | ||||
@@ -68,7 +73,7 @@ | |||||
page: 8, | page: 8, | ||||
}, | }, | ||||
checkboxValue: [], | checkboxValue: [], | ||||
isManage:false, | |||||
isManage: false, | |||||
} | } | ||||
}, | }, | ||||
methods: { | methods: { | ||||
@@ -96,28 +101,18 @@ | |||||
this.page.page = 1 | this.page.page = 1 | ||||
this.loadmore() | this.loadmore() | ||||
}, | }, | ||||
manageClick(){ | |||||
manageClick() { | |||||
this.checkboxValue = [] | this.checkboxValue = [] | ||||
this.isManage = this.isManage?false:true | |||||
this.isManage = this.isManage ? false : true | |||||
}, | }, | ||||
radioChange(e){ | |||||
if(e){ | |||||
let ids = this.list.map(e=>e.name) | |||||
radioChange(e) { | |||||
if (e) { | |||||
let ids = this.list.map(e => e.name) | |||||
this.checkboxValue = ids | this.checkboxValue = ids | ||||
}else{ | |||||
} else { | |||||
this.checkboxValue = [] | this.checkboxValue = [] | ||||
} | } | ||||
}, | }, | ||||
del(item){ | |||||
this.CONFIRM(`是否删除[${item.name}]点名任务?`).then(()=>{ | |||||
}) | |||||
}, | |||||
confirm(){ | |||||
this.CONFIRM(`是否删除点名任务?`).then(()=>{ | |||||
}) | |||||
}, | |||||
pullDownRefresh() { | pullDownRefresh() { | ||||
this.refresh() | this.refresh() | ||||
} | } | ||||
@@ -129,61 +124,31 @@ | |||||
</script> | </script> | ||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
.addBtn { | |||||
width: 140rpx; | |||||
height: 140rpx; | |||||
position: fixed; | |||||
right: 15rpx; | |||||
bottom: 160rpx; | |||||
} | |||||
.bottomConfirm { | |||||
padding: 30rpx; | |||||
display: flex; | |||||
position: fixed; | |||||
bottom: 100rpx; | |||||
background-color: #fff; | |||||
width: 100%; | |||||
box-sizing: border-box; | |||||
} | |||||
.topBox { | .topBox { | ||||
margin: 12rpx 28rpx; | |||||
display: flex; | |||||
justify-content: space-between; | |||||
.left { | |||||
flex: 1; | |||||
} | |||||
.right { | |||||
font-size: 28rpx; | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: center; | |||||
color: #333; | |||||
padding: 0 26rpx; | |||||
} | |||||
} | |||||
.u-list.isManage{ | |||||
padding-bottom: 120rpx; | |||||
box-sizing: border-box; | |||||
padding: 26rpx 30rpx; | |||||
} | } | ||||
.u-list-item { | .u-list-item { | ||||
display: flex; | display: flex; | ||||
align-items: center; | align-items: center; | ||||
flex-direction: unset; | flex-direction: unset; | ||||
margin: 12rpx 28rpx; | |||||
margin: 12rpx 30rpx; | |||||
&:first-child { | |||||
margin-top: 0rpx; | |||||
} | |||||
.whiteCard { | .whiteCard { | ||||
flex: 1; | flex: 1; | ||||
&.active{ | |||||
&.active { | |||||
border: 1rpx solid #2388FF; | border: 1rpx solid #2388FF; | ||||
background-color: #F2F8FF; | background-color: #F2F8FF; | ||||
} | } | ||||
} | } | ||||
.u-checkbox{ | |||||
.u-checkbox { | |||||
margin-right: 12rpx; | margin-right: 12rpx; | ||||
} | } | ||||
} | } | ||||
@@ -193,53 +158,40 @@ | |||||
border-radius: 18rpx; | border-radius: 18rpx; | ||||
padding: 30rpx; | padding: 30rpx; | ||||
color: #333333; | color: #333333; | ||||
display: flex; | |||||
.left{ | |||||
width: 76%; | |||||
} | |||||
.row1 { | .row1 { | ||||
font-size: 32rpx; | font-size: 32rpx; | ||||
font-weight: 700; | |||||
} | } | ||||
.row2 { | .row2 { | ||||
font-size: 26rpx; | font-size: 26rpx; | ||||
margin-top: 20rpx; | |||||
margin-top: 24rpx; | |||||
display: flex; | display: flex; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
} | } | ||||
.bottom { | |||||
.right { | |||||
display: flex; | 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); | |||||
} | |||||
justify-content: right; | |||||
flex: 1; | |||||
padding-top: 12rpx; | |||||
.btn { | .btn { | ||||
width: 100%; | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: center; | |||||
text-align: center; | |||||
uni-image { | uni-image { | ||||
width: 34rpx; | |||||
height: 34rpx; | |||||
margin-right: 6rpx; | |||||
width: 40rpx; | |||||
height: 40rpx; | |||||
} | } | ||||
uni-text { | uni-text { | ||||
font-size: 30rpx; | |||||
font-size: 26rpx; | |||||
color: #2388FF; | |||||
position: relative; | |||||
bottom: 12rpx; | |||||
} | } | ||||
} | } | ||||
} | } | ||||