Listbox+time picker

本文主要讲述listbox与 time picker的混合使用

	<template>
		<view>
			<view class="body"> 
				 <view class="select-view">
						<xfl-select 
						:list="list" :showItemNum="5" 
						:clearable="false" :style_Container="listBoxStyle" 
						:initValue="'全部'" :selectHideType="'independent'"
						@change="xfl_select_change">
						</xfl-select> 
				</view>
				<div  v-show="cus_timepicker_show"  style="width: 100px; margin: 10rpx 10rpx;">
					<view class="uni-list-select">
						<view class="uni-list-cell-select">
							<view class="uni-list-cell-db">
								<picker style="width: 100px;" mode="date" :value="date_start" :start="startDate" :end="endDate" @change="bindDateChange">
									<view class="uni-input">{{date_start}}</view>
								</picker>
							</view>
						</view>
					</view>
				</div>	
				<div  v-show="cus_timepicker_show"  style="width: 100px; margin: 10rpx 10rpx;">
					<view class="uni-list-select">
						<view class="uni-list-cell-select">
							<view class="uni-list-cell-db">
								<picker style="width: 100px;" mode="date" :value="date_end" :start="startDate" :end="endDate" @change="endDateChange">
									<view class="uni-input">{{date_end}}</view>
								</picker>
							</view>
						</view>
					</view>
				</div>	
			</view> 

					
				
		</view>
	</template>
	<script>
		import uniPopup from '@/components/uni-popup/uni-popup.vue'
		import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
		import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
		import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
		import uniCombox from "@/components/uni-combox/uni-combox"
		import xflSelect from '@/components/xfl-select/xfl-select.vue'
	  
	    function getDate(type) {
	    	const date = new Date();
	    
	    	let year = date.getFullYear();
	    	let month = date.getMonth() + 1;
	    	let day = date.getDate();
	    
	    	if (type === 'start') {
	    		year = year - 60;
	    	} else if (type === 'end') {
	    		year = year + 2;
	    	}
	    	month = month > 9 ? month : '0' + month;;
	    	day = day > 9 ? day : '0' + day;
	    
	    	return `${year}-${month}-${day}`;
	    }
	
		export default {
			components: {
				uniPopup,
				uniPopupMessage,
				uniPopupDialog,
				uniSearchBar,
				uniCombox,
				xflSelect
			},
	
			data() {
				return {
					date_start: '开始时间',
					date_end: '结束时间',
					startDate:getDate('start'),
					endDate:getDate('end'),
					
					listBoxStyle: `height: 40px; font-size: 16px;`,
					
					list: ['全部', '近一周', '近一月', '近一年', '自定义'],
					
					// list: ['全部',  '自定义'],
					tabIndex : '0', //选中标签栏的序列
					cus_timepicker_show:false,
	
				}
			},
	
			
			methods: {
		
			tabTap(index) {
				console.log(index)
				this.tabIndex = index;
			
			},
			tabChange(e) {
				console.log(e.detail)
				const index = e.detail.current
				this.tabIndex = index;
			},
			bindDateChange(e) {
				this.date_start = e.detail.value
			},
			endDateChange(e) {
				this.date_end = e.detail.value
			},
			confirmDialog() {
				this.$refs.dialogInput.open()
			},
			dialogInputConfirm(done, val) {
				done()
			},
			xfl_select_change(val){
					if(val.newVal=="自定义"){
						// console.log("弹出时间框");
						this.cus_timepicker_show = true;
					}else{
						if(this.cus_timepicker_show){
							this.cus_timepicker_show=false;
						}
					}
				}
			},
			}
	</script>
	
	
	<style>
	
		
			
	</style>
	

结果展示：