<template> <!-- 待办单查询 --> <div class="modal-content"> <u-popup v-model="isShow" class="search-popup" mode="right" @close="handleClose" length="85%"> <view class="search-title">筛选</view> <u-form class="form-content" :model="form" ref="uForm" label-width="150"> <u-form-item label="录入时间" prop="time" class="form-item"> <u-input clearable v-model="form.time" disabled placeholder="请选择投递时间区间" class="form-item-inp" @click="openPicker" /> <u-icon v-show="form.time.length != 0" name="close-circle-fill" color="#c8c0cc" size="32" class="close-circle" @click="clearTime"></u-icon> </u-form-item> </u-form> <view class="uni-list-btns"> <u-button class="handle-btn search-btn" size="medium" hover-class="none" :custom-style="customBtnStyle" @click="handleSearch">查询</u-button> <u-button class="handle-btn" size="medium" hover-class="none" @click="resetForm">重置</u-button> </view> </u-popup> <!-- 时间选择器 --> <w-picker class="date-picker" :visible.sync="showPicker" mode="range" :current="true" fields="day" @confirm="onSelected($event, 'range')" @cancel="showPicker = false" ref="date" ></w-picker> </div> </template> <script> import wPicker from '@/components/w-picker/w-picker.vue' export default { components: { wPicker }, props: { visible: { type: Boolean, default: false }, defaultParams: { // 默认筛选条件 type: Object, default: () => { return {}; } } }, watch: { visible(newValue, oldValue) { if (newValue) { this.isShow = newValue } }, isShow(newValue, oldValue) { if (newValue) { } else { this.init() this.$emit('close') } } }, data() { return { customBtnStyle: { // 自定义按钮样式 borderColor: '#2ab4e5', backgroundColor: '#2ab4e5', color: '#fff' }, isShow: this.visible, // 显示隐藏 showPicker: false, // 是否显示时间弹窗 form: { time: '', // 发起时间区间 customerMobile: '', // 门店名称 }, beginDate: null, // 开始时间 endDate: null // 结束时间 }; }, mounted() { this.init() }, methods: { // 初始化数据 init(){ if(this.defaultParams.beginDate && this.defaultParams.endDate){ this.form.time = this.defaultParams.beginDate + ' ~ ' + this.defaultParams.endDate } this.beginDate = this.defaultParams.beginDate ? this.defaultParams.beginDate : '' this.endDate = this.defaultParams.endDate ? this.defaultParams.endDate : '' this.form.customerMobile = this.defaultParams.customerMobile ? this.defaultParams.customerMobile : '' }, // 清空创建时间 clearTime(){ this.form.time = '' this.beginDate = '' this.endDate = '' }, // 关闭弹窗 handleClose() { this.isShow = false }, // 打开时间选择弹框 openPicker() { this.showPicker = true }, // 确认日期选择 onSelected(v) { this.form.time = v.value[0] + ' ~ ' + v.value[1] this.beginDate = v.value[0] this.endDate = v.value[1] this.showPicker = false }, // 查询 handleSearch() { let params = { beginDate: this.beginDate, endDate: this.endDate, customerMobile: this.form.customerMobile, }; this.$emit('refresh', params) this.isShow = false }, // 重置 resetForm() { this.$refs.uForm.resetFields() this.$emit('refresh', {}) this.isShow = false } } }; </script> <style lang="scss" scoped> .modal-content { position: relative; } .search-popup { .search-title { text-align: center; padding: 18upx 22upx; color: #333; border-bottom: 1px solid #eee; } .form-content { display: block; padding: 0 20upx; box-sizing: content-box; .status-item { width: 30%; text-align: center; line-height: 60upx; background-color: #F8F8F8; color: #333; border-radius: 6upx; font-size: 24upx; margin: 0 10upx; } .active { background-color: #ffaa00; color: #fff; } .form-item-inp{ display: inline-block; width: 88%; vertical-align: top; } } .uni-list { margin: 20upx; .uni-list-cell { display: flex; align-items: center; border-bottom: 1px dashed #eeeeee; .uni-list-cell-db { flex: 1; } .uni-input { height: 2.5em; line-height: 2.5em; } } } .uni-list-btns { display: flex; padding: 20upx; margin-top: 200rpx; .handle-btn { font-size: 28upx; margin: 0 30upx; width: 100%; flex: 1; } } } .date-picker { } </style>