393 lines
9.8 KiB
Vue
393 lines
9.8 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="nav_bar">
|
||
<!-- <u-icon name="arrow_left" color="#000" size="28"></u-icon> -->
|
||
<view class="nav_bar_tit"> 灾情信息 </view>
|
||
</view>
|
||
<view class="search">
|
||
<!-- 搜索区域 -->
|
||
<view class="search_sear">
|
||
<input
|
||
class="searchInput"
|
||
confirm-type="search"
|
||
placeholder-style="color:#bbb"
|
||
v-model="saerchValue"
|
||
placeholder="请输入"
|
||
@input="myinput"
|
||
@confirm="myconfirm"
|
||
/>
|
||
<icon class="icon-small" type="search" size="14"></icon>
|
||
|
||
<icon
|
||
v-if="saerchValue.length > 0"
|
||
class="clear-icon"
|
||
type="clear"
|
||
size="16"
|
||
@click="clearnClick"
|
||
></icon>
|
||
<!-- </view> -->
|
||
</view>
|
||
<view class="more">
|
||
<image
|
||
style="width: 20px; height: 20px; margin-right: 10px"
|
||
src="../../static/images/filter.png"
|
||
@click="openpop"
|
||
></image>
|
||
</view>
|
||
</view>
|
||
<!-- table_info -->
|
||
<view class="table_info">
|
||
<p class="p">共4条信息</p>
|
||
<view>
|
||
<view class="table_Page">
|
||
<view class="info">
|
||
<h4>朝阳寺水库</h4>
|
||
<p class="info_P">
|
||
<span class="info_n">刘明</span>
|
||
<span>2024-03-06 13:50:47</span>
|
||
</p>
|
||
</view>
|
||
<view class="badge"><u-badge :isDot="true"></u-badge></view>
|
||
</view>
|
||
<view class="table_Page">
|
||
<view class="info">
|
||
<h4>朝阳寺水库</h4>
|
||
<p class="info_P">
|
||
<span class="info_n">刘明</span>
|
||
<span>2024-03-06 13:50:47</span>
|
||
</p>
|
||
</view>
|
||
<view class="badge"><u-badge :isDot="true"></u-badge></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 抽屉 -->
|
||
<view class="popup" v-if="popupOpen">
|
||
<u-popup
|
||
:show="popupOpen"
|
||
mode="bottom"
|
||
@close="() => (this.popupOpen = false)"
|
||
>
|
||
<view style="padding: 30px 20px">
|
||
<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
|
||
<u-form
|
||
labelPosition="left"
|
||
:model="model1"
|
||
ref="uForm"
|
||
labelWidth="100"
|
||
>
|
||
<u-form-item
|
||
label="工程类型"
|
||
prop="checkboxValue1"
|
||
borderBottom
|
||
ref="item3"
|
||
:customStyle="{ height: '55px' }"
|
||
>
|
||
<u-checkbox-group
|
||
v-model="model1.userInfo.checkboxValue1"
|
||
placement="row"
|
||
@change="checkboxChange"
|
||
style="flex-wrap: wrap; position: absolute"
|
||
>
|
||
<u-checkbox
|
||
:customStyle="{ marginRight: '16px', margin: '5px' }"
|
||
v-for="(item, index) in checkboxList1"
|
||
:key="index"
|
||
:label="item.name"
|
||
:name="item.name"
|
||
>
|
||
</u-checkbox>
|
||
</u-checkbox-group>
|
||
</u-form-item>
|
||
<!-- 时间 -->
|
||
<u-form-item
|
||
label="上报开始时间"
|
||
prop="userInfo.start"
|
||
borderBottom
|
||
@click="
|
||
isTime = true
|
||
hideKeyboard()
|
||
"
|
||
ref="item1"
|
||
>
|
||
<u-input
|
||
v-model="model1.userInfo.start"
|
||
border="none"
|
||
disabled
|
||
disabledColor="#ffffff"
|
||
placeholder="请选择上报开始时间"
|
||
></u-input>
|
||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
</u-form-item>
|
||
|
||
<u-form-item
|
||
label="上报结束时间"
|
||
prop="userInfo.end"
|
||
borderBottom
|
||
@click="isTime2 = true"
|
||
ref="item1"
|
||
>
|
||
<u--input
|
||
v-model="model1.userInfo.end"
|
||
border="none"
|
||
disabled
|
||
disabledColor="#ffffff"
|
||
placeholder="请选择上报结束时间"
|
||
></u--input>
|
||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
</u-form-item>
|
||
</u-form>
|
||
<view class="bottom">
|
||
<u-button
|
||
text="重置"
|
||
customStyle="margin: 10px"
|
||
@click="reset"
|
||
></u-button>
|
||
<u-button
|
||
type="primary"
|
||
text="确认"
|
||
customStyle="margin: 10px"
|
||
@click="submit"
|
||
></u-button>
|
||
</view>
|
||
<u-datetime-picker
|
||
:show="isTime"
|
||
v-model="valueTime"
|
||
mode="datetime"
|
||
@confirm="confirm"
|
||
@cancel="cancel"
|
||
></u-datetime-picker>
|
||
|
||
<u-datetime-picker
|
||
:show="isTime2"
|
||
v-model="valueTime2"
|
||
mode="datetime"
|
||
@confirm="confirm2"
|
||
@cancel="cancel2"
|
||
></u-datetime-picker>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import moment from 'moment'
|
||
export default {
|
||
data () {
|
||
return {
|
||
saerchValue: '',
|
||
popupOpen: false, //抽屉打开,
|
||
// 基本案列数据
|
||
checkboxList1: [
|
||
{
|
||
name: '一般险情',
|
||
disabled: false
|
||
},
|
||
{
|
||
name: '较大险情',
|
||
disabled: false
|
||
},
|
||
{
|
||
name: '重大险情',
|
||
disabled: false
|
||
},
|
||
{
|
||
name: '特别重大险情',
|
||
disabled: false
|
||
}
|
||
],
|
||
isTime: false,
|
||
valueTime: Number(moment()),
|
||
valueTime2: Number(moment()),
|
||
isTime2: false,
|
||
model1: {
|
||
userInfo: {
|
||
start: '',
|
||
end: '',
|
||
checkboxValue1: ['一般险情', '较大险情', '重大险情', '特别重大险情']
|
||
}
|
||
},
|
||
params: {
|
||
pageSo: { pageSize: 10, pageNumber: 0 },
|
||
isRead: 0,
|
||
projectName: this.saerchValue
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
submit () {
|
||
this.popupOpen = false
|
||
// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
|
||
// this.$refs.uForm
|
||
// .validate()
|
||
// .then(res => {
|
||
// // uni.$u.toast('校验通过')
|
||
// })
|
||
// .catch(errors => {
|
||
// // uni.$u.toast('校验失败')
|
||
// })
|
||
},
|
||
reset () {
|
||
const validateList = [
|
||
'userInfo.start',
|
||
'userInfo.end',
|
||
'userInfo.checkboxValue1'
|
||
]
|
||
this.$refs.uForm.resetFields()
|
||
this.$refs.uForm.clearValidate()
|
||
setTimeout(() => {
|
||
this.$refs.uForm.clearValidate(validateList)
|
||
// 或者使用 this.$refs.uForm.clearValidate()
|
||
}, 10)
|
||
|
||
this.model1 = {
|
||
userInfo: {
|
||
start: '',
|
||
end: '',
|
||
checkboxValue1: ['一般险情', '较大险情', '重大险情', '特别重大险情']
|
||
}
|
||
}
|
||
},
|
||
confirm (val) {
|
||
console.log(
|
||
'点击确定按钮时触发',
|
||
val.value,
|
||
moment(val.value).format('YYYY-MM-DD HH:mm')
|
||
)
|
||
this.valueTime = Number(val)
|
||
this.model1.userInfo.start = moment(val.value).format('YYYY-MM-DD HH:mm')
|
||
this.isTime = false
|
||
},
|
||
cancel () {
|
||
console.log('取消')
|
||
this.isTime = false
|
||
},
|
||
confirm2 (val) {
|
||
console.log(
|
||
'点击确定按钮时触发',
|
||
val.value,
|
||
moment(val.value).format('YYYY-MM-DD HH:mm')
|
||
)
|
||
this.valueTime2 = Number(val)
|
||
this.model1.userInfo.end = moment(val.value).format('YYYY-MM-DD HH:mm')
|
||
this.isTime2 = false
|
||
},
|
||
cancel2 () {
|
||
console.log('取消')
|
||
this.isTime2 = false
|
||
},
|
||
checkboxChange (n) {
|
||
console.log('change', n)
|
||
// this.model1.userInfo.checkboxValue1 = e.name
|
||
},
|
||
openpop () {
|
||
this.popupOpen = true
|
||
},
|
||
myinput () {},
|
||
myconfirm () {},
|
||
clearnClick () {
|
||
console.log('打印了clearnClick', this.saerchValue)
|
||
this.saerchValue = ''
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
font-size: 14px;
|
||
background-color: #f3f5f8;
|
||
}
|
||
|
||
.table_info {
|
||
background-color: #fff;
|
||
margin-bottom: 12rpx;
|
||
padding: 20px;
|
||
.p {
|
||
text-align: right;
|
||
}
|
||
.table_Page {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-bottom: 1px solid #eee;
|
||
margin-top: 12rpx;
|
||
padding-bottom: 12rpx;
|
||
|
||
.info_P {
|
||
color: #a2a2a2;
|
||
font-size: 24rpx;
|
||
.info_n {
|
||
margin-right: 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.nav_bar {
|
||
// display: flex;
|
||
// justify-content: space-between;
|
||
// align-items: center;
|
||
width: 100%;
|
||
margin-top: 30px;
|
||
padding-top: 20px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid #dfdfdf;
|
||
box-shadow: 0 5px 10px -8px #dfdfdf inset;
|
||
background-color: #fff;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
.nav_bar_tit {
|
||
text-align: center;
|
||
}
|
||
|
||
.search {
|
||
background-color: #fff;
|
||
margin-bottom: 12rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-right: 20px;
|
||
}
|
||
.fl {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: left;
|
||
}
|
||
.bottom {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.search_sear {
|
||
// background-color: #eee;
|
||
width: 100%;
|
||
padding: 30rpx 16rpx;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
z-index: 999;
|
||
|
||
.searchInput {
|
||
background-color: #eee;
|
||
height: 60rpx;
|
||
border-radius: 6rpx;
|
||
color: #bbb;
|
||
padding-left: 60rpx;
|
||
}
|
||
|
||
.icon-small {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 36rpx;
|
||
transform: translateY(-50%);
|
||
}
|
||
.clear-icon {
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 36rpx;
|
||
transform: translateY(-50%);
|
||
icon {
|
||
}
|
||
}
|
||
}
|
||
</style>
|