新增安全承诺日期范围查询功能

pages/mine/promise/promise.vue

@@ -6,6 +6,54 @@
         itemStyle="height:80upx;padding-bottom:10upx;background-color: #fff;"
         @click="tabsClick"
     ></u-tabs>
+		<view class="container">
+			<u-sticky offset-top="200">
+				<u-button type="primary" text="高级搜索" @click="popupOpen" style="height: 30px;"></u-button>
+			</u-sticky>
+		</view>
+		<u-popup :show="popupShow" mode="right" :overlay="true" customStyle='width: 300px;' :safeAreaInsetTop="true" @close="popupClose" @open="popupOpen">
+			<view>
+				<u-datetime-picker
+							:show="addStartPickBarShow"
+							v-model="addTimeStart"
+							mode="date"
+							@close="addPickBarOnClose('start')"
+							@cancel="addPickBarOnCancel('start')"
+							@confirm="addPickBarOnConfirm"
+					></u-datetime-picker>
+						<u-button @click="addStartPickBarShow = true">起始时间：{{ addTimeStartStr == '' ? '请选择起始时间...' : addTimeStartStr }}</u-button>
+				<u-datetime-picker
+							:show="addEndPickBarShow"
+							v-model="addTimeEnd"
+							mode="date"
+							@close="addPickBarOnClose('end')"
+							@cancel="addPickBarOnCancel('end')"
+							@confirm="addPickBarOnConfirm"
+					></u-datetime-picker>
+						<u-button @click="addEndPickBarShow = true">结束时间：{{ addTimeEndStr == '' ? '请选择结束时间...' : addTimeEndStr }}</u-button>
+					<u-toast ref="uToast"></u-toast>
+				<view class="u-page">
+				        <view class="u-demo-block">
+				            <view class="u-demo-block__content">
+				                <u-row customStyle="margin-bottom: 10px">
+				                    <u-col span="6">
+				                        <view class="demo-layout bg-purple-light">
+											<u-button @click="resetAdvancedParam">重置</u-button>
+										</view>
+				                    </u-col>
+				                    <u-col span="6">
+				                        <view class="demo-layout bg-purple">
+											<u-button @click="advancedSearch">搜索</u-button>
+										</view>
+				                    </u-col>
+				                </u-row>
+				                
+				            </view>
+				        </view>
+				    </view>
+				
+			</view>
+		</u-popup>
     <view class="message_list">
       <u-list @scrolltolower="scrolltolower" v-if="list.length > 0">
         <u-list-item v-for="(item, index) in list" :key="index">
@@ -51,6 +99,13 @@ export default {
       currentPage: 1,
       totalPage: 0,
       list: [],
+	  popupShow: false, // 高级搜索弹窗
+	  addStartPickBarShow: false, // 起始日期选择器
+	  addEndPickBarShow: false, // 结束日期选择器
+	  addTimeStart: Number(new Date()), // 承诺书添加时间-起始
+	  addTimeEnd: Number(new Date()), // 承诺书添加时间-结束
+	  addTimeStartStr: '', // 承诺书添加时间-起始-字符串
+	  addTimeEndStr: '', // 承诺书添加时间-结束-字符串
     }
   },
   computed: {
@@ -67,6 +122,8 @@ export default {
         USER_ID: this.userInfo.USER_ID,
         showCount: this.pageSize,
         currentPage: this.currentPage,
+		ADDSTART: this.addTimeStartStr,
+		ADDEND: this.addTimeEndStr
       })
       this.list = [...this.list, ...resData.varList]
       this.totalPage = resData.page.totalPage
@@ -76,6 +133,8 @@ export default {
         USER_ID: this.userInfo.USER_ID,
         showCount: this.pageSize,
         currentPage: this.currentPage,
+		ADDSTART: this.addTimeStartStr,
+		ADDEND: this.addTimeEndStr
       })
       this.list = [...this.list, ...resData.varList]
     },
@@ -95,6 +154,7 @@ export default {
     },
     tabsClick(e) {
       this.TYPE = e.id
+	  this.resetAllAddTime()
       this.resetList()
     },
     fnNavigator(item) {
@@ -106,7 +166,82 @@ export default {
           TYPE: this.TYPE
         }
       })
+    },
+	// 高级搜索弹窗弹出函数
+	popupOpen() {
+	  this.popupShow = true
+	  
+	},
+	// 高级搜索弹窗关闭函数
+	popupClose() {
+	  this.popupShow = false
+	  
+	},
+	// 高级搜索日期选择器关闭回调
+	addPickBarOnClose(type) {
+		switch (type) {
+			case 'start':
+				this.addStartPickBarShow = false;
+				break;
+			case 'end':
+				this.addEndPickBarShow = false;
+				break;
+			default:
+				this.$refs.uToast.show({message:'日期选择参数错误',duration:1000})
 		}
+	},
+	// 高级搜索日期选择器取消回调
+	addPickBarOnCancel(type) {
+		this.addPickBarOnClose(type)
+	},
+	// 高级搜索日期选择器确认回调
+	addPickBarOnConfirm(value) {
+		// alert(value.value)
+		switch (this.addStartPickBarShow) {
+			case true:
+				// start type
+				this.addTimeStartStr = uni.$u.timeFormat(value.value, 'yyyy-mm-dd')
+				this.addPickBarOnClose('start')
+				break;
+			case false:
+				// end type
+				this.addTimeEndStr = uni.$u.timeFormat(value.value, 'yyyy-mm-dd')
+				this.addPickBarOnClose('end')
+				break;
+			default:
+				this.$refs.uToast.show({message:'日期选择参数错误',duration:1000})
+		}
+	},
+		// 清除高级搜索内的起始日期、结束日期组件绑定的时间属性（时间戳类型）；清除根据时间戳格式化的文本日期
+	resetAllAddTime() {
+		this.addTimeStart = Number(new Date())
+		this.addTimeEnd = Number(new Date())
+		this.addTimeStartStr = ''
+		this.addTimeEndStr = ''
+	},
+	// 重置高级搜索条件
+	resetAdvancedParam() {
+		this.resetAllAddTime()
+		this.resetList()
+	},
+	// 高级搜索
+	advancedSearch(){
+		const toast = uni.$u.toast
+		// 日期合法判定
+		if (this.addTimeStartStr > this.addTimeEndStr){
+				// 包含两种case：case1 开始时间 > 结束时间；case2 开始时间有值，结束时间为空
+			this.$refs.uToast.show({message:'日期不合法',duration:1000})
+			return
+		}
+		if (this.addTimeEndStr != '' && this.addTimeStartStr == ''){
+			// 结束时间有值，开始时间为空
+			this.$refs.uToast.show({message:'日期不合法',duration:1000})
+			return
+		}
+		this.resetList()
+		this.popupClose()
+	}
+	
   }
 }
 </script>
@@ -116,4 +251,24 @@ export default {
   background-color: #f7f9ff;
   height: 100vh;
 }
+.wrap {
+	padding: 12px;
+}
+
+.demo-layout {
+	height: 25px;
+	border-radius: 4px;
+}
+
+.bg-purple {
+	background: #CED7E1;
+}
+
+.bg-purple-light {
+	background: #e5e9f2;
+}
+
+.bg-purple-dark {
+	background: #99a9bf;
+}
 </style>