|
@@ -0,0 +1,197 @@
|
|
|
+<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-item label="投递用户" prop="customerMobile" class="form-item"><u-input v-model="form.customerMobile" :maxlength="11" placeholder="请输入用户手机号" /></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>
|