@@ -1,5 +1,5 @@ | |||
<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-for="(item,index) in cellValue" :key="index"> | |||
{{item}} | |||
@@ -18,9 +18,12 @@ | |||
multiple: { | |||
default: false, | |||
}, | |||
hasValue: { | |||
default: false, | |||
}, | |||
cellValue: { | |||
default: () => [], | |||
} | |||
}, | |||
}, | |||
methods: { | |||
click() { | |||
@@ -1,6 +1,7 @@ | |||
<template> | |||
<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-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> | |||
@@ -13,7 +14,7 @@ | |||
import myCell from "@/components/cell.vue" | |||
export default { | |||
name: "selectRadio", | |||
components:{ | |||
components: { | |||
myCell | |||
}, | |||
props: { | |||
@@ -24,9 +25,12 @@ | |||
default: [], | |||
type: Array | |||
}, | |||
title:{ | |||
title: { | |||
default: "", | |||
}, | |||
placeholder: { | |||
default: "请选择", | |||
}, | |||
cellVisible: { | |||
default: true, | |||
}, | |||
@@ -34,32 +38,38 @@ | |||
data() { | |||
return { | |||
show: false, | |||
title_:this.title, | |||
value_:this.value, | |||
title_: this.title || this.placeholder, | |||
value_: this.value, | |||
}; | |||
}, | |||
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: { | |||
cellClick() { | |||
if (!this.options.length) { | |||
this.TOAST('暂无数据') | |||
return | |||
} | |||
this.show = true | |||
}, | |||
close() { | |||
this.show = false | |||
}, | |||
open(){ | |||
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.title_ = obj ? obj.label : this.placeholder | |||
this.value_ = this.value | |||
this.show = true | |||
}, | |||
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() | |||
}, | |||
} | |||
@@ -72,6 +82,7 @@ | |||
height: 680rpx; | |||
overflow-y: auto; | |||
padding: 12rpx 32rpx 24rpx 32rpx; | |||
.u-cell { | |||
background-color: #fff; | |||
border-radius: 20rpx; | |||
@@ -85,10 +96,11 @@ | |||
.u-radio { | |||
margin-top: 26rpx; | |||
padding-bottom:28rpx!important; | |||
padding-bottom: 28rpx !important; | |||
} | |||
.u-radio:last-child{ | |||
.u-radio:last-child { | |||
border-bottom: none; | |||
padding-bottom:14rpx!important; | |||
padding-bottom: 14rpx !important; | |||
} | |||
</style> |
@@ -1,6 +1,6 @@ | |||
<template> | |||
<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> | |||
<u-popup :show="show" mode="bottom" :closeable="true" :round="10" @close="close" @open="open"> | |||
<view> | |||
@@ -118,7 +118,7 @@ | |||
this.gruopValue = e | |||
}, | |||
cofirm() { | |||
this.$emit("update:value", this.gruopValue) | |||
this.$emit("input", this.gruopValue) | |||
this.$emit("change", this.gruopValue) | |||
if (!this.multiple) { | |||
let obj = this.options.find(e1 => e1.value == this.gruopValue) | |||
@@ -1,6 +1,6 @@ | |||
<template> | |||
<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"> | |||
<view class="title"> | |||
{{popupTitle}} | |||
@@ -1,7 +1,7 @@ | |||
<template> | |||
<view style="height: 100%;"> | |||
<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="楼栋" /> | |||
<selectSearch :value.sync="search.qinshi" :options="[{value:1,label:'寝室302'},{value:2,label:'寝室305'},{value:3,label:'寝室303'}]" | |||
placeholder="请选择寝室" popupTitle="请选择寝室" search-placeholder="请输入寝室号"/> | |||
@@ -97,7 +97,7 @@ | |||
} | |||
.cate { | |||
font-size: 30rpx; | |||
font-size: 28rpx; | |||
overflow-x: auto; | |||
.cateList { | |||
@@ -108,7 +108,7 @@ | |||
background-color: #fff; | |||
border-radius: 35rpx; | |||
padding: 0 56rpx; | |||
line-height: 70rpx; | |||
line-height: 74rpx; | |||
margin-right: 30rpx; | |||
white-space: nowrap; | |||
color: #333; | |||
@@ -146,7 +146,6 @@ | |||
color: #333; | |||
.top { | |||
color: #333; | |||
font-size: 32rpx; | |||
display: flex; | |||
@@ -159,6 +158,10 @@ | |||
border-radius: 8rpx; | |||
margin-right: 12rpx; | |||
} | |||
.name{ | |||
font-size: 32rpx; | |||
font-weight: 700; | |||
} | |||
} | |||
.depart { | |||
@@ -1,19 +1,14 @@ | |||
<template> | |||
<view style="height: 100%;"> | |||
<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> | |||
<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> | |||
@@ -25,39 +20,49 @@ | |||
相似度:0.5 | |||
</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> | |||
<text>查看</text> | |||
</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> | |||
<image v-if="!isManage" class="addBtn" @click="NAV_TO('./passengerFlow/add')" src="@/static/image/add.png" mode="aspectFill"></image> | |||
</view> | |||
</template> | |||
<script> | |||
import SelectTree from "@/components/selectTree.vue" | |||
import SelectRadio from "@/components/selectRadio.vue" | |||
export default { | |||
components: { | |||
SelectTree | |||
SelectRadio | |||
}, | |||
data() { | |||
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, | |||
status: 'loadmore', //loading正在加载 loadmore加载更多 nomore没有更多了 | |||
search: { | |||
@@ -68,7 +73,7 @@ | |||
page: 8, | |||
}, | |||
checkboxValue: [], | |||
isManage:false, | |||
isManage: false, | |||
} | |||
}, | |||
methods: { | |||
@@ -96,28 +101,18 @@ | |||
this.page.page = 1 | |||
this.loadmore() | |||
}, | |||
manageClick(){ | |||
manageClick() { | |||
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 | |||
}else{ | |||
} else { | |||
this.checkboxValue = [] | |||
} | |||
}, | |||
del(item){ | |||
this.CONFIRM(`是否删除[${item.name}]点名任务?`).then(()=>{ | |||
}) | |||
}, | |||
confirm(){ | |||
this.CONFIRM(`是否删除点名任务?`).then(()=>{ | |||
}) | |||
}, | |||
pullDownRefresh() { | |||
this.refresh() | |||
} | |||
@@ -129,61 +124,31 @@ | |||
</script> | |||
<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 { | |||
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 { | |||
display: flex; | |||
align-items: center; | |||
flex-direction: unset; | |||
margin: 12rpx 28rpx; | |||
margin: 12rpx 30rpx; | |||
&:first-child { | |||
margin-top: 0rpx; | |||
} | |||
.whiteCard { | |||
flex: 1; | |||
&.active{ | |||
&.active { | |||
border: 1rpx solid #2388FF; | |||
background-color: #F2F8FF; | |||
} | |||
} | |||
.u-checkbox{ | |||
.u-checkbox { | |||
margin-right: 12rpx; | |||
} | |||
} | |||
@@ -193,53 +158,40 @@ | |||
border-radius: 18rpx; | |||
padding: 30rpx; | |||
color: #333333; | |||
display: flex; | |||
.left{ | |||
width: 76%; | |||
} | |||
.row1 { | |||
font-size: 32rpx; | |||
font-weight: 700; | |||
} | |||
.row2 { | |||
font-size: 26rpx; | |||
margin-top: 20rpx; | |||
margin-top: 24rpx; | |||
display: flex; | |||
justify-content: space-between; | |||
} | |||
.bottom { | |||
.right { | |||
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 { | |||
width: 100%; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
text-align: center; | |||
uni-image { | |||
width: 34rpx; | |||
height: 34rpx; | |||
margin-right: 6rpx; | |||
width: 40rpx; | |||
height: 40rpx; | |||
} | |||
uni-text { | |||
font-size: 30rpx; | |||
font-size: 26rpx; | |||
color: #2388FF; | |||
position: relative; | |||
bottom: 12rpx; | |||
} | |||
} | |||
} | |||