@@ -92,7 +92,7 @@ | |||
cancelText: "取消", | |||
confirmText: "确认", | |||
confirmColor: '#165DFF', | |||
cancelColor: '#9E9E9E', | |||
cancelColor: '#165DFF', | |||
success: function (res) { | |||
if (res.confirm) { | |||
resolve(true) | |||
@@ -3,9 +3,11 @@ | |||
<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> | |||
</u-radio-group> | |||
<view style="max-height: 800rpx;overflow-y: auto;"> | |||
<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> | |||
</view> | |||
</u-popup> | |||
</view> | |||
</template> | |||
@@ -79,7 +81,6 @@ | |||
<style scoped lang="scss"> | |||
.u-radio-group { | |||
width: 560rpx; | |||
height: 680rpx; | |||
overflow-y: auto; | |||
padding: 12rpx 32rpx 24rpx 32rpx; | |||
@@ -1,29 +1,28 @@ | |||
<template> | |||
<view @touchmove.stop @touch.stop> | |||
<myCell v-show="cellVisible" :multiple="multiple" :hasValue="value&&value.length?true:false" :cellValue="cellValue" :title="title_" isLink :border="false" @click="show = true"> | |||
<myCell v-show="cellVisible" :multiple="multiple" :hasValue="value?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> | |||
<view class="title"> | |||
{{popupTitle}} | |||
</view> | |||
<view v-if="filterable" style="padding: 0 30rpx 30rpx 30rpx"> | |||
<u-search v-model="searchText" :placeholder="searchPlaceholder" shape="round" | |||
<view v-if="filterable" style="padding: 0rpx 30rpx 30rpx 30rpx;"> | |||
<u-search height="90rpx" :inputStyle="{fontSize:'30rpx'}" v-model="searchText" :placeholder="searchPlaceholder" shape="square" | |||
:showAction="false"></u-search> | |||
</view> | |||
<u-radio-group v-if="!multiple" :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" | |||
<u-radio-group v-if="!multiple" v-model="value_" iconPlacement="right" placement="column" borderBottom> | |||
<u-radio labelSize="30rpx" 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> | |||
<u-checkbox-group v-else v-model="value_" iconPlacement="right" placement="column" @change="change" | |||
borderBottom> | |||
<u-checkbox v-show="item.label.includes(searchText)" v-for="(item, index) in options" :key="index" | |||
<u-checkbox-group v-else v-model="value_" iconPlacement="right" placement="column" borderBottom> | |||
<u-checkbox labelSize="30rpx" v-show="item.label.includes(searchText)" v-for="(item, index) in options" :key="index" | |||
:label="item.label" :name="item.value"> | |||
</u-checkbox> | |||
</u-checkbox-group> | |||
<view style="padding: 36rpx 50rpx"> | |||
<u-button @click="cofirm" type="primary" style="border-radius: 36rpx;height: 72rpx;" | |||
<u-button @click="cofirm" type="primary" style="border-radius: 45rpx;height: 90rpx;font-weight: 700;font-size: 32rpx;" | |||
text="确定"></u-button> | |||
</view> | |||
</view> | |||
@@ -51,8 +50,8 @@ | |||
default: true, | |||
}, | |||
// cell回显默认文字 | |||
placeholder:{ | |||
default:'请选择' | |||
placeholder: { | |||
default: '请选择' | |||
}, | |||
// 弹框标题 | |||
popupTitle: { | |||
@@ -80,15 +79,14 @@ | |||
data() { | |||
return { | |||
show: false, | |||
title_: this.title||this.placeholder, | |||
title_: this.title || this.placeholder, | |||
value_: this.value, | |||
gruopValue: '', | |||
searchText: '', | |||
cellValue:[], | |||
cellValue: [], | |||
}; | |||
}, | |||
mounted() { | |||
if (this.multiple) this.gruopValue = [] | |||
if (this.multiple) this.value_ = [] | |||
if (!this.multiple) { | |||
let obj = this.options.find(e1 => e1.value == this.value) | |||
if (obj) this.title_ = obj.label | |||
@@ -102,7 +100,7 @@ | |||
this.show = false | |||
}, | |||
open() { | |||
if (this.multiple) this.gruopValue = [] | |||
if (this.multiple) this.value_ = [] | |||
if (!this.multiple) { | |||
let obj = this.options.find(e1 => e1.value == this.value) | |||
if (obj) this.title_ = obj.label | |||
@@ -114,17 +112,14 @@ | |||
this.searchText = '' | |||
this.show = true | |||
}, | |||
change(e) { | |||
this.gruopValue = e | |||
}, | |||
cofirm() { | |||
this.$emit("input", this.gruopValue) | |||
this.$emit("change", this.gruopValue) | |||
this.$emit("input", this.value_) | |||
this.$emit("change", this.value_) | |||
if (!this.multiple) { | |||
let obj = this.options.find(e1 => e1.value == this.gruopValue) | |||
let obj = this.options.find(e1 => e1.value == this.value_) | |||
if (obj) this.title_ = obj.label | |||
} else { | |||
let arr = this.options.filter(e1 => this.gruopValue.includes(e1.value)) | |||
let arr = this.options.filter(e1 => this.value_.includes(e1.value)) | |||
this.cellValue = arr.map(e => e.label) | |||
} | |||
this.close() | |||
@@ -135,36 +130,24 @@ | |||
<style scoped lang="scss"> | |||
.title { | |||
color: #000000; | |||
font-size: 32rpx; | |||
color: #333; | |||
font-size: 34rpx; | |||
text-align: center; | |||
line-height: 100rpx; | |||
} | |||
.u-radio-group { | |||
width: 92%; | |||
height: 680rpx; | |||
overflow-y: auto; | |||
padding: 0 30rpx; | |||
.u-cell { | |||
background-color: #fff; | |||
border-radius: 20rpx 20rpx 0 0; | |||
padding: 24rpx 0; | |||
} | |||
} | |||
.u-checkbox-group { | |||
.u-checkbox-group,.u-radio-group { | |||
width: 92%; | |||
max-height: 680rpx; | |||
min-height: 360rpx; | |||
height: 780rpx; | |||
overflow-y: auto; | |||
padding: 0 30rpx; | |||
box-shadow: inset 0 0 20rpx rgba(0, 0, 0, 0.08); | |||
.u-cell { | |||
background-color: #fff; | |||
border-radius: 20rpx 20rpx 0 0; | |||
padding: 24rpx 0; | |||
.u-radio,.u-checkbox { | |||
height: 98rpx; | |||
box-sizing: border-box; | |||
padding-bottom: 0rpx!important; | |||
margin-top: 0rpx!important; | |||
} | |||
} | |||
@@ -205,7 +205,7 @@ | |||
<style scoped lang="scss"> | |||
.title { | |||
color: #000000; | |||
color: #333; | |||
font-size: 32rpx; | |||
text-align: center; | |||
line-height: 100rpx; | |||
@@ -213,20 +213,7 @@ | |||
.u-radio-group { | |||
width: 92%; | |||
height: 680rpx; | |||
overflow-y: auto; | |||
padding: 0 30rpx; | |||
.u-cell { | |||
background-color: #fff; | |||
border-radius: 20rpx 20rpx 0 0; | |||
padding: 24rpx 0; | |||
} | |||
} | |||
.u-checkbox-group { | |||
width: 92%; | |||
height: 680rpx; | |||
height: 780rpx; | |||
overflow-y: auto; | |||
padding: 0 30rpx; | |||
@@ -57,25 +57,17 @@ | |||
"path" : "pages/work/returnBed/detail", | |||
"style" : | |||
{ | |||
"navigationBarTitleText": "查看详情", | |||
"enablePullDownRefresh": false | |||
} | |||
}, | |||
{ | |||
"path" : "pages/work/returnBed/comfirm", | |||
"style" : | |||
{ | |||
"navigationBarTitleText": "归寝确认", | |||
"navigationBarTitleText": "归寝", | |||
"enablePullDownRefresh": false | |||
} | |||
}, | |||
// 客流 | |||
{ | |||
"path": "pages/work/passengerFlow/index", | |||
"style": { | |||
"navigationBarTitleText": "客流" | |||
} | |||
}, | |||
// 客流 | |||
{ | |||
"path" : "pages/work/passengerFlow/detail", | |||
"style" : | |||
@@ -84,14 +76,6 @@ | |||
"enablePullDownRefresh": false | |||
} | |||
}, | |||
{ | |||
"path" : "pages/work/passengerFlow/add", | |||
"style" : | |||
{ | |||
"navigationBarTitleText": "新增查询", | |||
"enablePullDownRefresh": false | |||
} | |||
}, | |||
// 点名 | |||
{ | |||
"path": "pages/work/rollCall/index", | |||
@@ -103,7 +87,7 @@ | |||
"path" : "pages/work/rollCall/detail", | |||
"style" : | |||
{ | |||
"navigationBarTitleText": "查看详情", | |||
"navigationBarTitleText": "查看", | |||
"enablePullDownRefresh": false | |||
} | |||
}, | |||
@@ -137,7 +121,8 @@ | |||
{ | |||
"path": "pages/my/index", | |||
"style": { | |||
"navigationBarTitleText": "我的" | |||
"navigationBarTitleText": "我的", | |||
"navigationStyle": "custom" | |||
} | |||
} | |||
], | |||
@@ -1,6 +1,74 @@ | |||
<template> | |||
<view> | |||
我的 | |||
<view style="padding: 0 30rpx;"> | |||
<view class="header"> | |||
<view style="padding-top: 44rpx;" class="headerContent"> | |||
<u-avatar src="/static/image/test/test.png" size="180rpx"></u-avatar> | |||
<view class="right"> | |||
<view class="name"> | |||
张云 | |||
</view> | |||
<view class="des"> | |||
<image src="/static/image/school.png" mode=""></image> | |||
山西科技大学 | 校长 | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
<view class="whiteCard"> | |||
<view class="title"> | |||
个人信息 | |||
</view> | |||
<u-cell title="账号" :titleStyle="{fontSize:'28rpx',color:'#333'}" :border="false"> | |||
<view slot="value" class="valueBox disabled"> | |||
543asd25a1 | |||
</view> | |||
</u-cell> | |||
<u-cell title="姓名" :titleStyle="{fontSize:'28rpx',color:'#333'}" :border="false" isLink | |||
@click="cellClick('修改姓名')"> | |||
<view slot="value" class="valueBox"> | |||
杨云 | |||
</view> | |||
</u-cell> | |||
<u-cell title="手机" :titleStyle="{fontSize:'28rpx',color:'#333'}" :border="false" isLink | |||
@click="cellClick('修改手机号')"> | |||
<view slot="value" class="valueBox"> | |||
18633460001 | |||
</view> | |||
</u-cell> | |||
<u-cell title="昵称" :titleStyle="{fontSize:'28rpx',color:'#333'}" :border="false" isLink | |||
@click="cellClick('设置昵称')"> | |||
<view slot="value" class="valueBox"> | |||
未设置 | |||
</view> | |||
</u-cell> | |||
<picker mode="date" :value="date" @change="dateChange"> | |||
<u-cell title="出生日期" :titleStyle="{fontSize:'28rpx',color:'#333'}" :border="false" isLink> | |||
<view slot="value" class="valueBox"> | |||
{{date}} | |||
</view> | |||
</u-cell> | |||
</picker> | |||
</view> | |||
<view class="btn" @click="loginOut"> | |||
退出登录 | |||
</view> | |||
<u-popup :show="show" mode="center" :round="10"> | |||
<view class="popupInfo"> | |||
<view class="title"> | |||
{{this.action}} | |||
</view> | |||
<u--input v-model="inputValue" placeholder="请输入" border="surround" clearable></u--input> | |||
<view class="bottom"> | |||
<view class="cancel" @click="cancel"> | |||
取消 | |||
</view> | |||
<view class="confirm" @click="confirm"> | |||
确定 | |||
</view> | |||
</view> | |||
</view> | |||
</u-popup> | |||
</view> | |||
</template> | |||
@@ -8,15 +76,190 @@ | |||
export default { | |||
data() { | |||
return { | |||
show: false, | |||
action: '', | |||
inputValue: '', | |||
date: '1990-06-15', | |||
} | |||
}, | |||
mounted() {}, | |||
methods: { | |||
cellClick(action) { | |||
this.action = action | |||
this.inputValue = '' | |||
this.show = true | |||
}, | |||
confirm() { | |||
switch (this.action) { | |||
case '修改姓名': | |||
if (!this.inputValue) { | |||
this.TOAST('请输入姓名') | |||
return | |||
} | |||
break | |||
case '修改手机号': | |||
if (!this.inputValue) { | |||
this.TOAST('请输入手机号') | |||
return | |||
} | |||
if (! | |||
/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/ | |||
.test(this.inputValue)) { | |||
this.TOAST('请输入正确的手机号') | |||
return | |||
} | |||
break | |||
case '设置昵称': | |||
if (!this.inputValue) { | |||
this.TOAST('请输入昵称') | |||
return | |||
} | |||
break | |||
} | |||
}, | |||
cancel() { | |||
this.show = false | |||
}, | |||
dateChange(e) { | |||
this.date = e.detail.value | |||
}, | |||
loginOut() { | |||
this.CONFIRM('您是否确认退出登录?') | |||
} | |||
} | |||
} | |||
</script> | |||
<style> | |||
<style scoped lang="scss"> | |||
uni-page-body { | |||
background-image: url('/static/image/mybg.png'); | |||
background-position: top; | |||
background-size: 100% auto; | |||
background-repeat: no-repeat; | |||
} | |||
.header { | |||
padding-top: 88rpx; | |||
color: #333; | |||
.headerContent { | |||
display: flex; | |||
} | |||
.right { | |||
flex: 1; | |||
padding-top: 24rpx; | |||
padding-left: 36rpx; | |||
.name { | |||
font-size: 46rpx; | |||
font-weight: 700; | |||
} | |||
.des { | |||
display: flex; | |||
font-size: 28rpx; | |||
margin-top: 30rpx; | |||
uni-image { | |||
width: 34rpx; | |||
height: 34rpx; | |||
margin-right: 12rpx; | |||
} | |||
} | |||
} | |||
} | |||
.whiteCard { | |||
background-color: #fff; | |||
border-radius: 20rpx; | |||
margin-top: 50rpx; | |||
// padding: 0 30rpx; | |||
.title { | |||
font-weight: 700; | |||
color: #2388FF; | |||
font-size: 42rpx; | |||
padding: 50rpx 30rpx 30rpx; | |||
} | |||
} | |||
.u-cell { | |||
height: 90rpx; | |||
position: relative; | |||
</style> | |||
&:not(&:last-child)::after { | |||
content: ''; | |||
display: block; | |||
position: absolute; | |||
height: 1rpx; | |||
background-color: rgba(0, 0, 0, 0.1); | |||
width: calc(100% - 60rpx); | |||
left: 30rpx; | |||
bottom: 0rpx; | |||
} | |||
.valueBox { | |||
color: #333; | |||
font-size: 30rpx; | |||
font-weight: 700; | |||
&.disabled { | |||
font-weight: unset; | |||
} | |||
} | |||
} | |||
.btn { | |||
height: 98rpx; | |||
background-color: #fff; | |||
line-height: 98rpx; | |||
border-radius: 20rpx; | |||
text-align: center; | |||
color: #333; | |||
margin-top: 30rpx; | |||
font-size: 32rpx; | |||
} | |||
.popupInfo { | |||
padding: 30rpx 30rpx 0rpx; | |||
width: 540rpx; | |||
box-sizing: border-box; | |||
.title { | |||
font-size: 34rpx; | |||
font-weight: 700; | |||
text-align: center; | |||
margin-bottom: 30rpx; | |||
margin-top: 16rpx; | |||
} | |||
.bottom { | |||
margin-top: 30rpx; | |||
display: flex; | |||
line-height: 88rpx; | |||
border-top: 1rpx solid rgba(0, 0, 0, 0.1); | |||
margin-left: -30rpx; | |||
margin-right: -30rpx; | |||
position: relative; | |||
&::after { | |||
content: ''; | |||
background-color: rgba(0, 0, 0, 0.1); | |||
display: block; | |||
position: absolute; | |||
width: 1rpx; | |||
height: 100%; | |||
left: 50%; | |||
top: 0; | |||
} | |||
&>* { | |||
width: 50%; | |||
text-align: center; | |||
color: #165DFF; | |||
font-weight: 32rpx; | |||
} | |||
} | |||
} | |||
</style> |
@@ -1,98 +0,0 @@ | |||
<template> | |||
<view style="padding-top: 30rpx;"> | |||
<view class="whiteCard"> | |||
<u--form labelPosition="top" :labelStyle="{fontSize:'32rpx',color:'#666'}" labelWidth="200" :model="form" :rules="rules" ref="uForm"> | |||
<u-form-item label="摄像头(多选)" prop="name" borderBottom> | |||
<view | |||
style="width: 160%;margin-left: -30rpx;margin-right: -30rpx;margin-bottom: -20rpx;margin-top: -10rpx;"> | |||
<selectSearch :value.sync="form.shexiangtou" | |||
:options="[{value:1,label:'走廊尽头(海康)'},{value:2,label:'厨房(海康)'},{value:3,label:'走廊尽头(海康)'},{value:4,label:'厨房(海康)'}]" | |||
placeholder="请选择摄像头" :filterable="false" multiple /> | |||
</view> | |||
</u-form-item> | |||
<u-form-item label="查询时间段" prop="timeslot" borderBottom> | |||
<uni-datetime-picker v-model="form.tick" type="datetimerange"> | |||
<view class="demo-layout"> | |||
<view> | |||
{{form.tick.length?form.tick.join('-'):'请选择'}} | |||
</view> | |||
<image style="width: 30rpx;height:30rpx;" | |||
src="@/static/image/earlyWarning/calendar.png" mode="aspectFill"></image> | |||
</view> | |||
</uni-datetime-picker> | |||
</u-form-item> | |||
<u-form-item label="系部/专业/班级" prop="timeslot" borderBottom> | |||
<view | |||
style="width: 160%;margin-left: -30rpx;margin-right: -30rpx;margin-bottom: -20rpx;margin-top: -10rpx;"> | |||
<selectTree v-model="form.departCalss" :labels.sync="form.departCalssName"/> | |||
</view> | |||
</u-form-item> | |||
<u-form-item labelPosition="left" label="分片类型(天/小时)" prop="timeslot" borderBottom> | |||
<u-radio-group v-model="form.type"> | |||
<u-radio v-for="(item,index) in [{value:'1',label:'天'},{value:'2',label:'小时'}]" :key="index" :label="item.label" | |||
:name="item.value"></u-radio> | |||
</u-radio-group> | |||
</u-form-item> | |||
</u--form> | |||
</view> | |||
<view style="padding: 36rpx 30rpx;position: fixed;bottom: 0;width: 100%;box-sizing: border-box;"> | |||
<u-button @click="confirm" type="primary" style="border-radius: 36rpx;height: 72rpx;" | |||
text="确定"></u-button> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
import selectSearch from "@/components/selectSearch.vue" | |||
import selectTree from "@/components/selectTree.vue" | |||
export default { | |||
components: { | |||
selectSearch, | |||
selectTree | |||
}, | |||
data() { | |||
return { | |||
form: { | |||
shexiangtou: [], | |||
tick: [], | |||
}, | |||
rules: [] | |||
} | |||
}, | |||
methods: { | |||
confirm(){ | |||
this.CONFIRM(`是否确认新增查询?`).then(()=>{ | |||
}) | |||
} | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.whiteCard { | |||
padding: 30rpx 30rpx; | |||
margin: 15rpx 30rpx; | |||
border-radius: 18rpx; | |||
background-color: #ffffff; | |||
font-size: 32rpx; | |||
} | |||
.demo-layout{ | |||
display: flex; | |||
padding: 15rpx 0; | |||
justify-content: space-between; | |||
align-items: center; | |||
&:first-child{ | |||
flex: 1; | |||
padding-right:30rpx; | |||
} | |||
} | |||
.u-radio-group{ | |||
&>*:first-child{ | |||
margin-right: 36rpx; | |||
} | |||
} | |||
</style> |
@@ -21,7 +21,7 @@ | |||
export default { | |||
data() { | |||
return { | |||
list: [{},{},{}], | |||
list: [{},{},{},{},{},{},{},{},{}], | |||
} | |||
}, | |||
methods: {} | |||
@@ -31,5 +31,19 @@ | |||
<style scoped lang="scss"> | |||
.table{ | |||
padding: 30rpx; | |||
tr:nth-child(2n+1){ | |||
background-color: #F2F8FF!important; | |||
} | |||
tr:first-child{ | |||
background-color: #F5F5F5!important; | |||
} | |||
th{ | |||
color: #777777; | |||
font-size: 28rpx; | |||
} | |||
td{ | |||
color: #333333; | |||
font-size: 28rpx; | |||
} | |||
} | |||
</style> |
@@ -1,7 +1,7 @@ | |||
<template> | |||
<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 @scrolltolower="scrolltolower" style="height: calc(100% - 29rpx);padding-top:29rpx"> | |||
<u-list-item v-for="(item, index) in list" :key="index"> | |||
<view class="whiteCard"> | |||
<view class="row1"> | |||
@@ -26,7 +26,7 @@ | |||
</view> | |||
</view> | |||
<view class="bottom"> | |||
<view class="btn" @click="NAV_TO('./passengerFlow/detail')"> | |||
<view class="btn" @click="NAV_TO('./detail')"> | |||
<image src="@/static/image/see.png" mode="aspectFill"></image> | |||
<text>分片详情</text> | |||
</view> | |||
@@ -35,7 +35,6 @@ | |||
</u-list-item> | |||
<u-loadmore :status="status" /> | |||
</u-list> | |||
<image class="addBtn" @click="NAV_TO('./passengerFlow/add')" src="@/static/image/add.png" mode="aspectFill"></image> | |||
</view> | |||
</template> | |||
@@ -98,12 +97,14 @@ | |||
.whiteCard { | |||
background-color: #fff; | |||
border-radius: 18rpx; | |||
margin: 12rpx 28rpx; | |||
margin: 14rpx 28rpx; | |||
padding: 30rpx; | |||
padding-bottom: 24rpx; | |||
color: #333333; | |||
.row1 { | |||
font-size: 32rpx; | |||
font-weight: 700; | |||
} | |||
.row2 { | |||
@@ -145,7 +146,7 @@ | |||
display: flex; | |||
border-top: 1rpx solid rgba(0, 0, 0, 0.1); | |||
margin-top: 24rpx; | |||
padding-top: 22rpx; | |||
padding-top: 24rpx; | |||
position: relative; | |||
.btn { | |||
@@ -1,154 +0,0 @@ | |||
<template> | |||
<view style="height: 100%;"> | |||
<view class="title"> | |||
<image src="@/static/image/home1.png" mode="aspectFill" style="width: 40rpx;height: 40rpx;margin-right: 8rpx;"> | |||
</image> | |||
寝室104 | |||
</view> | |||
<view class="time"> | |||
2024年8月24日 18:00:00 ~ 18:59:00 | |||
</view> | |||
<view style="height: calc(100% - 300rpx);overflow: auto;"> | |||
<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="aspectFill" 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> | |||
<view class="returnConfirm"> | |||
<u-checkbox-group><u-checkbox shape="circle" label="全选" name="" | |||
@change="radioChange"></u-checkbox></u-checkbox-group> | |||
<view class="right"> | |||
<u-button @click="returnConfirm" type="primary" | |||
style="border-radius: 36rpx;height: 72rpx;margin-left:16rpx" :text="`确定归寝(${checkboxValue.length})`"></u-button> | |||
</view> | |||
</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) | |||
this.CONFIRM('是否确认归寝?').then(()=>{ | |||
}) | |||
} | |||
} | |||
} | |||
</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; | |||
position: fixed; | |||
bottom: 0rpx; | |||
width: 100%; | |||
box-sizing: border-box; | |||
.right { | |||
flex: 1; | |||
} | |||
} | |||
</style> |
@@ -1,7 +1,8 @@ | |||
<template> | |||
<view> | |||
<view class="title"> | |||
<image src="@/static/image/home1.png" mode="aspectFill" style="width: 38rpx;height: 38rpx;margin-right: 8rpx;"> | |||
<image src="@/static/image/home.png" mode="aspectFill" | |||
style="width: 38rpx;height: 38rpx;margin-right: 8rpx;"> | |||
</image> | |||
寝室104 | |||
</view> | |||
@@ -10,8 +11,9 @@ | |||
</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="aspectFill" style="width: 160rpx;height: 160rpx;"></image> | |||
<view class="topBox"> | |||
<image src="@/static/image/test/test.png" mode="aspectFill" style="width: 160rpx;height: 160rpx;border-radius:10rpx"> | |||
</image> | |||
<view class="des"> | |||
<view class="top"> | |||
<view class="status"> | |||
@@ -30,6 +32,9 @@ | |||
</view> | |||
</view> | |||
</view> | |||
<view class="returnTime"> | |||
归寝时间:2024-08-15 11:59:12 | |||
</view> | |||
</view> | |||
</view> | |||
<view class="listTitlte"> | |||
@@ -37,8 +42,9 @@ | |||
</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="aspectFill" style="width: 160rpx;height: 160rpx;"></image> | |||
<view class="topBox"> | |||
<image src="@/static/image/test/test.png" mode="aspectFill" style="width: 160rpx;height: 160rpx;border-radius:10rpx"> | |||
</image> | |||
<view class="des"> | |||
<view class="top"> | |||
<view class="status error"> | |||
@@ -57,6 +63,9 @@ | |||
</view> | |||
</view> | |||
</view> | |||
<view class="returnTime"> | |||
归寝时间:2024-08-15 11:59:12 | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
@@ -74,11 +83,10 @@ | |||
}, { | |||
name: 3 | |||
}], | |||
checkboxValue:[], | |||
checkboxValue: [], | |||
} | |||
}, | |||
methods: { | |||
} | |||
methods: {} | |||
} | |||
</script> | |||
@@ -91,29 +99,33 @@ | |||
border-top: 1rpx solid rgba(0, 0, 0, 0.03); | |||
font-size: 30rpx; | |||
} | |||
.listTitlte{ | |||
.listTitlte { | |||
color: #777777; | |||
font-size:28rpx; | |||
padding:18rpx 30rpx; | |||
font-size: 28rpx; | |||
padding: 18rpx 30rpx; | |||
font-weight: 700; | |||
} | |||
.list { | |||
padding: 0 26rpx; | |||
margin-bottom: 16rpx; | |||
&:last-child{ | |||
&:last-child { | |||
padding-bottom: 60rpx; | |||
} | |||
.item { | |||
display: flex; | |||
margin-bottom: 28rpx; | |||
background-color: #fff; | |||
padding: 30rpx; | |||
&:last-child { | |||
margin-bottom: 0; | |||
} | |||
.right { | |||
padding: 30rpx; | |||
.topBox { | |||
flex: 1; | |||
background-color: #fff; | |||
border-radius: 18rpx; | |||
display: flex; | |||
@@ -126,8 +138,9 @@ | |||
.top { | |||
color: #333; | |||
font-size: 32rpx; | |||
display:flex; | |||
.status{ | |||
display: flex; | |||
.status { | |||
display: inline-block; | |||
font-size: 24rpx; | |||
line-height: 1.8; | |||
@@ -137,9 +150,13 @@ | |||
border-radius: 8rpx; | |||
margin-right: 12rpx; | |||
} | |||
.status.error{ | |||
.status.error { | |||
background-color: #EF2D2D; | |||
} | |||
.name{ | |||
font-weight: 700; | |||
} | |||
} | |||
.depart { | |||
@@ -160,5 +177,12 @@ | |||
} | |||
} | |||
} | |||
.returnTime { | |||
margin-top: 30rpx; | |||
border-top: 1rpx solid rgba(0, 0, 0, 0.1); | |||
font-size: 26rpx; | |||
padding-top: 26rpx; | |||
} | |||
} | |||
</style> |
@@ -3,8 +3,8 @@ | |||
<view class="searchBox"> | |||
<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="请输入寝室号"/> | |||
<selectSearch v-model="search.qinshi" :options="[{value:1,label:'寝室302'},{value:2,label:'寝室305'},{value:3,label:'寝室303'}]" | |||
placeholder="请选择寝室" popupTitle="选择寝室" search-placeholder="请输入宿舍号"/> | |||
</view> | |||
<u-empty marginTop="100rpx" :show="false" mode="list" text="暂无数据"></u-empty> | |||
<u-list @scrolltolower="scrolltolower" style="height: calc(100% - 220rpx);"> | |||
@@ -12,23 +12,18 @@ | |||
<view class="whiteCard"> | |||
<view class="row1"> | |||
<text class="room">寝室302</text> | |||
<view class="peopleNum"> | |||
<image src="@/static/image/peopleNum.png" mode="aspectFill"></image> | |||
<text>寝室人数:6</text> | |||
</view> | |||
</view> | |||
<view class="row2"> | |||
<text class="returnNum">归寝人数:4</text> | |||
<text class="noReturnNum">未归寝人数:2</text> | |||
</view> | |||
<view class="bottom"> | |||
<view class="btn" @click="NAV_TO('./returnBed/detail')"> | |||
<image src="@/static/image/see.png" mode="aspectFill"></image> | |||
<text>查看</text> | |||
<view class="peopleNum"> | |||
<image src="@/static/image/peopleNum1.png" mode="aspectFill"></image> | |||
<text>寝室人数:6</text> | |||
</view> | |||
<view class="btn" @click="NAV_TO('./returnBed/comfirm')"> | |||
<image src="@/static/image/confirm.png" mode="aspectFill"></image> | |||
<text>归寝确认</text> | |||
<view class="btn" @click="NAV_TO('./detail')"> | |||
<text>查看</text> | |||
</view> | |||
</view> | |||
</view> | |||
@@ -124,21 +119,6 @@ | |||
font-size: 32rpx; | |||
font-weight: 700; | |||
} | |||
.peopleNum { | |||
uni-image { | |||
width: 30rpx; | |||
height: 30rpx; | |||
position: relative; | |||
top: 8rpx; | |||
margin-right: 6rpx; | |||
} | |||
uni-text { | |||
color: #2388FF; | |||
font-size: 26rpx; | |||
} | |||
} | |||
} | |||
.row2 { | |||
@@ -154,26 +134,33 @@ | |||
.bottom { | |||
display: flex; | |||
justify-content: space-between; | |||
border-top: 1rpx solid rgba(0, 0, 0, 0.1); | |||
margin-top: 24rpx; | |||
padding-top: 22rpx; | |||
padding-top: 30rpx; | |||
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); | |||
.peopleNum { | |||
padding-top: 4rpx; | |||
uni-image { | |||
width: 34rpx; | |||
height: 34rpx; | |||
position: relative; | |||
top: 8rpx; | |||
margin-right: 6rpx; | |||
} | |||
uni-text { | |||
font-size: 26rpx; | |||
} | |||
} | |||
.btn { | |||
width: 50%; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
text-align: center; | |||
line-height: 60rpx; | |||
background-color: #2388FF; | |||
padding: 0 34rpx; | |||
color: #fff; | |||
border-radius: 30rpx; | |||
font-size: 26rpx; | |||
uni-image { | |||
width: 34rpx; | |||
height: 34rpx; | |||
@@ -6,7 +6,8 @@ | |||
<view style="padding: 26rpx;overflow: hidden;"> | |||
<view class="cate"> | |||
<view class="cateList"> | |||
<view v-for="item in cateList" :class="{active:item.value == cate}" :key="item.value" class="item" @click="cateItemClick(item)"> | |||
<view v-for="item in cateList" :class="{active:item.value == cate}" :key="item.value" class="item" | |||
@click="cateItemClick(item)"> | |||
{{item.label}}({{item.value}}) | |||
</view> | |||
</view> | |||
@@ -14,12 +15,14 @@ | |||
</view> | |||
<view style="height:calc(100% - 200rpx);overflow: auto;"> | |||
<view class="list"> | |||
<view v-for="(item, index) in list" :key="index" class="item"> | |||
<view v-for="(item, index) in list" :key="index" class="item" @click="popupShow(item)"> | |||
<view class="right"> | |||
<image src="@/static/image/test/image2.png" mode="aspectFill" style="width: 160rpx;height: 160rpx;"></image> | |||
<image src="@/static/image/test/image2.png" mode="aspectFill" | |||
style="width: 160rpx;height: 160rpx;border-radius:10rpx"></image> | |||
<view class="des"> | |||
<view class="top"> | |||
<view class="status" :style="{backgroundColor:cate == 1?'#0FAF76':cate == 2?'#EF2D2D':'#F49D19' }"> | |||
<view class="status" | |||
:style="{backgroundColor:cate == 1?'#0FAF76':cate == 2?'#EF2D2D':'#F49D19' }"> | |||
{{cateList.find(e=>e.value == cate).label}} | |||
</view> | |||
<view class="name"> | |||
@@ -38,7 +41,29 @@ | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
<u-popup :show="show" mode="center" :round="10"> | |||
<view class="popupInfo"> | |||
<image src="/static/image/test/image.png" mode="widthFix" style="width: 480rpx;border-radius:10rpx"></image> | |||
<view class="top"> | |||
<view class="status" :style="{backgroundColor:cate == 1?'#0FAF76':cate == 2?'#EF2D2D':'#F49D19' }"> | |||
{{cateList.find(e=>e.value == cate).label}} | |||
</view> | |||
<view class="name"> | |||
杨云 | |||
</view> | |||
</view> | |||
<view class="depart"> | |||
系部:安环部 | |||
</view> | |||
<view class="bottom"> | |||
<view class="major">专业:环艺</view> | |||
<view class="class">班级:第二班</view> | |||
</view> | |||
<view class="closeBox"> | |||
<image @click="show = false" src="/static/image/close.png" class="close"></image> | |||
</view> | |||
</view> | |||
</u-popup> | |||
</view> | |||
</template> | |||
@@ -76,17 +101,81 @@ | |||
], | |||
cate: 1, | |||
checkboxValue: [], | |||
show: false, | |||
popupInfo: {}, | |||
} | |||
}, | |||
methods: { | |||
cateItemClick(item){ | |||
cateItemClick(item) { | |||
this.cate = item.value | |||
}, | |||
popupShow(item) { | |||
this.popupInfo = item | |||
this.show = true | |||
} | |||
} | |||
} | |||
</script> | |||
<style scoped lang="scss"> | |||
.popupInfo { | |||
padding: 30rpx; | |||
box-sizing: border-box; | |||
position: relative; | |||
.top { | |||
margin-top: 20rpx; | |||
font-size: 32rpx; | |||
display: flex; | |||
.status { | |||
display: inline-block; | |||
font-size: 24rpx; | |||
line-height: 1.8; | |||
color: #fff; | |||
padding: 0 12rpx; | |||
border-radius: 8rpx; | |||
margin-right: 12rpx; | |||
} | |||
.name { | |||
font-size: 32rpx; | |||
font-weight: 700; | |||
} | |||
} | |||
.depart { | |||
margin-top: 22rpx; | |||
font-size: 26rpx; | |||
} | |||
.bottom { | |||
font-size: 26rpx; | |||
margin-top: 18rpx; | |||
display: flex; | |||
justify-content: space-between; | |||
margin-bottom: 12rpx; | |||
.major {} | |||
.class {} | |||
} | |||
.closeBox { | |||
width: 100%; | |||
position: absolute; | |||
left: 0; | |||
bottom:-98rpx; | |||
text-align: center; | |||
.close { | |||
width: 60rpx; | |||
height: 60rpx; | |||
} | |||
} | |||
} | |||
.title { | |||
display: flex; | |||
color: #333333; | |||
@@ -112,7 +201,8 @@ | |||
margin-right: 30rpx; | |||
white-space: nowrap; | |||
color: #333; | |||
&.active{ | |||
&.active { | |||
background-color: #2388FF; | |||
color: #fff; | |||
} | |||
@@ -158,7 +248,8 @@ | |||
border-radius: 8rpx; | |||
margin-right: 12rpx; | |||
} | |||
.name{ | |||
.name { | |||
font-size: 32rpx; | |||
font-weight: 700; | |||
} | |||