storage-wechat/components/commons-select-time/index2.vue

<template>
	
	<view>
		<view class="" style="height:1rpx"> 
			
		</view>
		<view class="picker-warp">
			<view class="left-icon" @click="nextDate(-1)">
				<uni-icons type="back" size="30"></uni-icons>
				
			</view>
			<view class="picker-content">
				<uni-datetime-picker type="date" :clear-icon="false" v-model="dateNum" @change="maskClick" />
			</view>
			<view class="right-icon"  @click="nextDate(1)">
				<uni-icons type="forward" size="30"></uni-icons>
			</view>
		</view>
	</view>
	
</template>

<script>
	import {format} from '../../util/uitl.js'
	export default {
		props: {
			date: {
				type: String,
				default:null
				
			}
		},
		watch: {

			value: {
				handler() {
					this.$emit("input", this.value)
				},
				deep: true,
				immediate: true,
			},
		},
		data() {
			return {
				dateNum:this.date,
				typeList:[{
					name:"本日",
					type:0,
				},{
					name:"昨日",
					type:1,
				},{
					name:"本周",
					type:2,
				},{
					name:"上周",
					type:3,
				},{
					name:"本月",
					type:4,
				},{
					name:"上月",
					type:5,
				}],
				modalTimeList:[
					{
						name:"昨日",
						type:1,
					},{
						name:"前日",
						type:2,
					},{
						name:"上周",
						type:3,
					},{
						name:"上月",
						type:4,
					},{
						name:"近三个月",
						type:5,
					},{
						name:"近半年",
						type:6,
					}
				],
				modalTimeType:null,
			}
		},
		methods:{
			maskClick(e){
				this.$emit('change', e)
			},
			nextDate(num){
				
				this.dateNum = this.getNextDate(this.dateNum,num)
				this.$emit('change', this.dateNum)
			},
			getNextDate(date, day) { 
			　　var dd = new Date(date);
			　　dd.setDate(dd.getDate() + day);
			　　var y = dd.getFullYear();
			　　var m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
			　　var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
			　　return y + "-" + m + "-" + d;
			}
		},
		created() {
			console.log()
		},
	}
</script>

<style lang="less">
	.picker-content{
		
	}
	.picker-warp{
		display: flex;
		background-color: #fff;
		margin: 10rpx 30rpx;
		.left-icon,.right-icon{
			width: 10%;
			text-align: center;
			position: relative;
			top: 10rpx;
		}
		.picker-content{
			width: 80%;
		}
		
	}
</style>