dreamland/lib/graceUI/weexComponents/graceDateTimeBetween.nvue

<template>
	<view>
		<view @tap.stop="open"><slot></slot></view>
		<view class="graceDateTimeBT" @touchmove.stop.prevent="" @tap.self="close" :style="{backgroundColor:background, width:show ? '750rpx' : '0px'}"></view>
		<view class="graceDateTimeBT-body"  @touchmove.stop.prevent="" :style="{paddingBottom:paddingBottom, bottom:show?'0px':'-1000px'}">
			<view class="graceDateTimeBT-header grace-space-between">
				<text class="graceDateTimeBT-header-btn" :style="{color:cancelTColor}" @tap="close">{{cancelText}}</text>
				<text class="graceDateTimeBT-header-btn" :style="{textAlign:'right', color:confirmColor}" @tap="confirm">{{confirmText}}</text>
			</view>
			<view>
				<text class="graceDateTimeBT-text">{{titles[0]}}</text>
			</view>
			<view>
				<graceDateTimeBetweenBase :value="startValue" :isTime="isTime" @change="chang1" 
				:isSecond="isSecond" :startYear="startYear" :endYear="endYear" :units="units"></graceDateTimeBetweenBase>
			</view>
			<view>
				<text class="graceDateTimeBT-text">{{titles[1]}}</text>
			</view>
			<view>
				<graceDateTimeBetweenBase :value="endValue" :isTime="isTime" @change="chang2" 
				:isSecond="isSecond" :startYear="startYear" :endYear="endYear" :units="units"></graceDateTimeBetweenBase>
			</view>
		</view>
	</view>
</template>
<script>
import graceDateTimeBetweenBase from "./graceDateTimeBetweenBase.nvue";
export default {
	components:{graceDateTimeBetweenBase},
	props: {
		background:{ type : String, default : 'rgba(0, 0, 0, 0.5)' },
		cancelText : { type : String, default : '取消' },
		cancelTColor : { type : String, default : '#888888' },
		confirmText : { type : String, default : '确定' },
		confirmColor : { type : String, default : '#3688FF' },
		startValue : { type : String , default:''},
		endValue : { type : String , default:''},
		isTime : {type : Boolean, default : true},
		isSecond : {type : Boolean, default : true},
		startYear : {type : Number, default : 1980},
		endYear : {type : Number, default : 2050},
		units : {type : Array , default:function(){return new Array('年','月','日','时','分','秒')}},
		titles : {type : Array , default:function(){return new Array('请选择开始时间','请选择结束时间')}},
		paddingBottom:{type : String , default:'0rpx'}
	},
	data() {
		return {
			show:false,
			indicatorStyle : 'height:35px',
			defaultVal     : [0,0,0,0,0,0],
			sDate:[[],[],[],[],[],[]],
			recDate:[[],[]]
		}
	},
	methods:{
		open : function () {
			this.show = true;
		},
		close : function () {
			this.show = false;
		},
		confirm : function(){
			this.show = false;
			this.$emit('confirm', this.recDate);
		},
		chang1 : function(res){
			this.recDate[0] = res;
		},
		chang2 : function(res){
			this.recDate[1] = res;
		}
	}
}
</script>
<style>
.graceDateTimeBT{position:fixed; width:750rpx; top:0; left:0; bottom:0; flex:1;}
.graceDateTimeBT-body{background-color:#FFFFFF; position:fixed; bottom:-1000px; left:0; width:750rpx;}
.graceDateTimeBT-header{padding:25rpx;}
.graceDateTimeBT-header-btn{width:200rpx; line-height:38rpx; height:38rpx; font-size:28rpx;}
.graceDateTimeBT-text{padding:15rpx; background-color:#FFFFFF; line-height:60rpx; height:100rpx; color:#666666; font-size:28rpx;}
</style>