日期控件更换

components/itmister-date-picker/itmister-date-picker.nvue

@@ -1,46 +1,58 @@
 <template>
-	<view v-if="isShow">
-		<view class="date-picker-mask" bubble='true' @click="hide" :class="[isOpen?'show-date-picker-mask':'hide-date-picekr-mask']"
-		 :style="{backgroundColor:maskColor}"></view>
-		<view class="date-picker-container" @click.stop="handleClick" :class="[isOpen?'show-date-picker':'hide-date-picekr']">
+	<view>
+		<view v-if="isShow">
+			<view class="date-picker-mask" bubble='true' @click="hide" :class="[isOpen?'show-date-picker-mask':'hide-date-picekr-mask']"
+			 :style="{backgroundColor:maskColor}"></view>
+			<view class="date-picker-container" @click.stop="handleClick" :class="[isOpen?'show-date-picker':'hide-date-picekr']">
 
-			<!-- 操作 -->
-			<view class="date-picker-title row between-center">
-				<text class="date-picker-cancel" @click="hide">取消</text>
-				<text class="date-picker-confirm" @click="dateConfirm">确定</text>
+				<!-- 操作 -->
+				<view class="date-picker-title row between-center">
+					<text class="date-picker-cancel" @click="hide">取消</text>
+					<text class="date-picker-confirm" @click="dateConfirm">确定</text>
+				</view>
+				<!-- 内容 -->
+				<picker-view class="date-picker-box" v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange">
+					<picker-view-column class="center">
+						<view class="date-picker-item center" v-for="(item,index) in years" :key="index">
+							<text >{{item}}</text>
+						</view>
+					</picker-view-column>
+					<picker-view-column>
+						<view class="date-picker-item center" v-for="(item,index) in months" :key="index">
+							<text>{{item}}</text>
+						</view>
+					</picker-view-column>
+					<picker-view-column>
+						<view class="date-picker-item center" v-for="(item,index) in days" :key="index">
+							<text>{{item}}</text>
+						</view>
+					</picker-view-column>
+				</picker-view>
 			</view>
-			<!-- 内容 -->
-			<picker-view class="date-picker-box" v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange">
-				<picker-view-column class="center">
-					<view class="date-picker-item center" v-for="(item,index) in years" :key="index">
-						<text v-if='item!="长期"'>{{item}}年</text>
-						<text v-else>{{item}}</text>
-					</view>
-				</picker-view-column>
-				<picker-view-column>
-					<view class="date-picker-item center" v-for="(item,index) in months" :key="index">
-						<text v-if="item!=''">{{item}}月</text>
-						<text v-else>{{item}}</text>
-					</view>
-				</picker-view-column>
-				<picker-view-column>
-					<view class="date-picker-item center" v-for="(item,index) in days" :key="index">
-
-						<text v-if="item!=''">{{item}}日</text>
-						<text v-else>{{item}}</text>
-					</view>
-				</picker-view-column>
-			</picker-view>
-
 		</view>
 	</view>
 </template>
 
 <script>
+	var that
+	/**
+	 * 日期控件
+	 * @property {String} maskColor 模态框背景色
+	 * @property {String,Number} checkYear 控件打开默认选中的年份(未传值或传空字符串默认选中的年份为当年)
+	 * @property {String,Number} checkMonth 控件打开默认选中的月份(未传值或传空字符串默认选中的年份为当月)
+	 * @property {String,Number} checkDay 控件打开默认选中的日期(未传值或传空字符串默认选中的年份为当日)
+	 * @property {String,Number} startYear 开始年份，默认为1940
+	 * @property {String,Number} futureYear 终止年份，今年向后多少年，可选的最晚年份(截止日期未传时生效)
+	 * @property {Boolean} periodOfValidity = [true | false] 是否是有效期(开启之后选择今天及之前的日期提示日期已过期)
+	 * @property {Boolean} isShow = [true | false] 开启|关闭
+	 * @property {String} overdueContent 开启periodOfValidity之后，选择今天及之前的日期提示日期已过期的内容文字
+	 * @property {Object} endDate 截止日期，可选的最晚日期
+	 * @property {String,Number} dateStatus 日期类型，默认0没有长期和随时，1长期，2随时
+	 */
 	export default {
 		name: "datePicker",
 		props: {
-			maskColor: { // 模态框背景色
+			maskColor: { 
 				type: String,
 				default: 'rgba(0,0,0,0.3)'
 			},
@@ -55,27 +67,91 @@
 			checkDay:{
 				type: [String,Number],
 				default: new Date().getDate()
+			},
+			startYear:{
+				type: [String,Number],
+				default: 1940
+			},
+			futureYear:{
+				type: [String,Number],
+				default: 10
+			},
+			periodOfValidity:{
+				type: Boolean,
+				default: false
+			},
+			overdueContent:{
+				type: String,
+				default: ''
+			},
+			endDate: {
+			  type: Object,
+			  default: () => ({})
+			},
+			dateStatus:{
+				type: [String,Number],
+				default: 0
 			}
 		},
 		data() {
 			const date = new Date();
-			const years = ['长期'];
-			const months = [''];
+			let years = [],months = [];
+			if(this.dateStatus==1){
+				years = ['长期'];
+				months = [''];
+			}
+			if(this.dateStatus==2){
+				years = ['随时'];
+				months = [''];
+			}
+			const currectyear = date.getFullYear()
+			const currectmonth = date.getMonth() + 1
+			const currectday = date.getDate()
 			// console.log(this.checkYear)
 			// const month = date.getMonth() + 1
 			// const day = date.getDate();
-			const year = this.checkYear
-			const month = this.checkMonth
-			const day = this.checkDay
-			console.log(year,month,day)
-			// 可在此设置起始年份和终止年份
-			for (let i = 1940; i <= date.getFullYear() + 10; i++) {
-				years.push(i);
+			
+			// 传截止日期设置起始年份和终止年份
+			if(JSON.stringify(this.endDate)!='{}'){
+				if(this.endDate.year&&this.endDate.year<currectyear){
+					this.showtoast('截止日期年份必须大于等于当前年份')
+					return
+				}
+				if(this.endDate.year&&this.endDate.year==currectyear&&this.endDate.month&&this.endDate.month<currectmonth){
+					this.showtoast('截止日期月份必须大于等于当前月份')
+					return
+				}
+				if(this.endDate.year&&this.endDate.year==currectyear&&this.endDate.month&&this.endDate.month==currectmonth&&this.endDate.day&&this.endDate.day<currectday){
+					this.showtoast('截止日期必须大于等于今天')
+					return
+				}
+				var obj=this.createExpirationDate()
+				// console.log(obj)
+				years=obj.years
+				months=obj.months
 			}
-			for (let i = 1; i <= 12; i++) {
-				months.push(i);
+			
+			const year = this.checkYear?this.checkYear:currectyear
+			const month = this.checkMonth?Number(this.checkMonth):currectmonth
+			const day = this.checkDay?Number(this.checkDay):currectday
+			
+			console.log(year,month,day)
+			// 未传截止日期设置起始年份和终止年份
+			if(JSON.stringify(this.endDate)=='{}'){
+				for (let i = this.startYear; i <= currectyear + this.futureYear; i++) {
+					years.push(i);
+				}
+				if(this.dateStatus==0&&year=='长期'||this.dateStatus==0&&year=='随时'){
+					this.showtoast('当前日期选择器未带长期和随时选项，请修改当前类型')
+					return
+				}
+				if(year!='长期'&&year!='随时'){
+					for (let i = 1; i <= 12; i++) {
+						months.push(i);
+					}
+				}
 			}
-			console.log(months)
+			
 			return {
 				isShow: false, // 是否弹出
 				isOpen: false,
@@ -86,39 +162,119 @@
 				year,
 				month,
 				day,
-				value: [year - 1940, month - 1, day - 1], // 默认选中当天
+				value: year=='长期'||year=='随时'?[0,0,0]:[Number(year - this.startYear+1), month , day], // 默认选中当天
 				visible: true,
 				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`
 			}
 		},
 		methods: {
-
+			createExpirationDate(){
+				let years = [],months = [];
+				if(this.dateStatus==1){
+					years = ['长期'];
+					months = [''];
+				}
+				if(this.dateStatus==2){
+					years = ['随时'];
+					months = [''];
+				}
+				var year=this.checkYear?this.checkYear:this.year?this.year:new Date().getFullYear()
+				if(this.dateStatus==0&&year=='长期'||this.dateStatus==0&&year=='随时'){
+					this.showtoast('当前日期选择器未带长期和随时选项，请修改当前类型')
+					return
+				}
+				for (let i = this.startYear; i <= this.endDate.year; i++) {
+					years.push(i);
+				}
+				
+				if(year==this.endDate.year&&this.endDate.month){
+					if(year!='长期'||year!='随时'){
+						for (let i = 1; i <= this.endDate.month; i++) {
+							months.push(i);
+						}
+					}
+				}
+				if(year!=this.endDate.year){
+					for (let i = 1; i <= 12; i++) {
+						months.push(i);
+					}
+				}
+				return {years,months}
+			},
+			showtoast(content){
+				// #ifdef APP-PLUS
+				plus.nativeUI.toast(`<font style=\"font-size:15px;margin:20px;\" color="#f56c6c">&nbsp&nbsp&nbsp&nbsp${content?content:this.overdueContent}!&nbsp&nbsp&nbsp&nbsp</font>`, {
+					icon : "icon URL",// eg. "/img/add.png"
+					duration : "long",// 持续3.5s，short---2s
+					align : "center",// 水平居中
+					verticalAlign : "center",// 垂直底部
+					background:'#FEF0F0',
+					type: "richtext",
+				})
+				// #endif
+				// #ifdef H5
+				uni.showToast({
+					title: (content?content:this.overdueContent)+'!',
+					icon:'none',
+					duration: 2000
+				});
+				// #endif
+			},
+			setValue(){
+				var val=[]
+				for (let i = 0; i < this.years.length; i++) {
+					if(this.year==this.years[i]){
+						val[0]=i
+					}
+				}
+				for (let i = 0; i < this.months.length; i++) {
+					if(Number(this.month)==this.months[i]){
+						val[1]=i
+					}
+				}
+				for (let i = 0; i < this.days.length; i++) {
+					if(Number(this.day)==this.days[i]){
+						val[2]=i
+					}
+				}
+				return val
+			},
 			// 选中日期
 			dateConfirm() {
+				if(this.month==''&&this.year!='长期'&&this.month==''&&this.year!='随时'){
+					this.showtoast('未选择月份')
+					return
+				}
+				if(this.day==''&&this.year!='长期'&&this.day==''&&this.year!='随时'){
+					this.showtoast('未选择日期')
+					return
+				}
+				if(this.periodOfValidity&&this.year!='长期'&&this.periodOfValidity&&this.year!='随时'){
+					const date=new Date()
+					const currectyear = date.getFullYear()
+					const currectmonth = date.getMonth() + 1
+					const currectday = date.getDate()
+					if(this.year<currectyear){
+						this.showtoast()
+						return
+					}
+					if(this.year==currectyear&&this.month<currectmonth){
+						this.showtoast()
+						return
+					}
+					if(this.year==currectyear&&this.month==currectmonth&&this.day<=currectday){
+						this.showtoast()
+						return
+					}
+				}
 				let dateobj={
 					year:this.year,
 					month:this.month?this.month > 9 ? this.month : '0' + this.month:'',
 					day:this.day?this.day > 9 ? this.day :'0' + this.day:'',
 					date:''
 				}
-				if(this.year!='长期'){
-					var val=[]
-					for (let i = 0; i < this.years.length; i++) {
-						if(this.year==this.years[i]){
-							val[0]=i
-						}
-					}
-					for (let i = 0; i < this.months.length; i++) {
-						if(this.month==this.months[i]){
-							val[1]=i
-						}
-					}
-					for (let i = 0; i < this.days.length; i++) {
-						if(this.day==this.days[i]){
-							val[2]=i
-						}
-					}
-					this.value=val
+				if(this.year!='长期'&&this.year!='随时'){
+					this.value=this.setValue()
 					 dateobj.date= this.year + '-' + (this.month > 9 ? this.month : '0' + this.month) + '-' + (this.day > 9 ? this.day :
 					'0' + this.day);
 				}else{
@@ -134,7 +290,12 @@
 			},
 
 			bindChange(e) {
+				const date = new Date();
+				const year = date.getFullYear()
+				const month = date.getMonth() + 1
+				const day = date.getDate()
 				// console.log(this.value,e)
+				
 				const val = e.detail.value;
 				this.year = this.years[val[0]];
 				this.month = this.months[val[1]];
@@ -167,44 +328,144 @@
 			}
 		},
 		watch: {
+			"checkYear":{
+				handler(val){
+					// console.log(val)
+					this.checkYear=val
+					this.year=val
+					this.$nextTick(() => {
+						setTimeout(() => {
+							if(val=='长期'||val=='随时'){
+								this.value=[0,0,0]
+							}
+						}, 500);
+					})
+				}
+			},
+			"endDate":{
+				handler(val){
+					this.endDate=val
+				},
+				deep: true,
+				immediate: true
+			},
+			"checkMonth":{
+				handler(val){
+					this.checkMonth=val
+					this.month=val
+					this.$nextTick(() => {
+						setTimeout(() => {
+							// console.log(this.month,this.day,this.days)
+							if(val!='长期'&&val!='随时'){
+								this.value=this.setValue()
+								// console.log(this.value)
+							}
+						}, 500);
+					})
+					// this.$nextTick(() => {
+					// 	setTimeout(() => {
+					// 		if(val!='长期'&&val!='随时'){
+					// 			this.value=this.setValue()
+					// 			// console.log(this.value)
+					// 		}else{
+					// 			this.value=[0,0,0]
+					// 		}
+					// 	}, 350);
+					// })
+				}
+			},
+			"checkDay":{
+				handler(val){
+					console.log(val,333333)
+					this.checkDay=val
+					this.day=val
+					// this.$nextTick(() => {
+					// 	setTimeout(() => {
+					// 		if(val!='长期'&&val!='随时'){
+					// 			this.value=this.setValue()
+					// 			// console.log(this.value)
+					// 		}else{
+					// 			this.value=[0,0,0]
+					// 		}
+					// 	}, 350);
+					// })
+				}
+			},
 			"month": { // 监听月份变化，改变当前月份天数值 
 				handler(val) {
-					if (val < 8&&this.year!='长期') {
+					console.log(this.endDate)
+					if (val < 8&&this.year!='长期'&&val < 8&&this.year!='随时') {
 						if (val % 2 !== 0) {
 							this.days = [''];
-							for (let i = 1; i <= 31; i++) {
-								this.days.push(i);
+							if(this.endDate.day&&val===this.endDate.month&&this.year===this.endDate.year){
+								for (let i = 1; i <= this.endDate.day; i++) {
+									this.days.push(i);
+								}
+							}else{
+								for (let i = 1; i <= 31; i++) {
+									this.days.push(i);
+								}
 							}
 						} else {
 							this.days = [''];
-							for (let i = 1; i <= 30; i++) {
-								this.days.push(i);
+							if(this.endDate.day&&val===this.endDate.month&&this.year===this.endDate.year){
+								for (let i = 1; i <= this.endDate.day; i++) {
+									this.days.push(i);
+								}
+							}else{
+								for (let i = 1; i <= 30; i++) {
+									this.days.push(i);
+								}
 							}
 						}
 					}
-					if (val > 7&&this.year!='长期') {
+					if (val > 7&&this.year!='长期'&&val > 7&&this.year!='随时') {
 						if (val % 2 === 0) {
 							this.days = [''];
-							for (let i = 1; i <= 31; i++) {
-								this.days.push(i);
+							if(this.endDate.day&&val===this.endDate.month&&this.year===this.endDate.year){
+								for (let i = 1; i <= this.endDate.day; i++) {
+									this.days.push(i);
+								}
+							}else{
+								for (let i = 1; i <= 31; i++) {
+									this.days.push(i);
+								}
 							}
 						} else {
 							this.days = [''];
-							for (let i = 1; i <= 30; i++) {
-								this.days.push(i);
+							if(this.endDate.day&&val===this.endDate.month&&this.year===this.endDate.year){
+								for (let i = 1; i <= this.endDate.day; i++) {
+									this.days.push(i);
+								}
+							}else{
+								for (let i = 1; i <= 30; i++) {
+									this.days.push(i);
+								}
 							}
 						}
 					}
-					if (val === 2&&this.year!='长期') {
+					if (val === 2&&this.year!='长期'&&val === 2&&this.year!='随时') {
 						if (this.year % 4 === 0) {
 							this.days = [''];
-							for (let i = 1; i <= 29; i++) {
-								this.days.push(i);
+							if(this.endDate.day&&val===this.endDate.month&&this.year===this.endDate.year){
+								for (let i = 1; i <= this.endDate.day; i++) {
+									this.days.push(i);
+								}
+							}else{
+								for (let i = 1; i <= 29; i++) {
+									this.days.push(i);
+								}
 							}
 						} else {
 							this.days = [''];
-							for (let i = 1; i <= 28; i++) {
-								this.days.push(i);
+							if(this.endDate.day&&val===this.endDate.month&&this.year===this.endDate.year){
+								for (let i = 1; i <= this.endDate.day; i++) {
+									this.days.push(i);
+								}
+							}else{
+								for (let i = 1; i <= 28; i++) {
+									this.days.push(i);
+								}
 							}
 						}
 					}
@@ -214,27 +475,47 @@
 			},
 			"year": { // 监听年份变化，处理2月份天数变化
 				handler(val) {
-					if(val=='长期'){
+					if(val=='长期'||val=='随时'){
 						this.months=[''];
 						this.days = [''];
 					}else{
 						const months = [''];
-						for (let i = 1; i <= 12; i++) {
-							months.push(i);
+						console.log(this.endDate)
+						if(this.endDate.year&&val===this.endDate.year&&this.endDate.month){
+							for (let i = 1; i <= this.endDate.month; i++) {
+								months.push(i);
+							}
+						}else{
+							for (let i = 1; i <= 12; i++) {
+								months.push(i);
+							}
 						}
+						
 						this.months=months
 						if (val % 4 === 0) {
 							if (this.month === 2) {
 								this.days = [''];
-								for (let i = 1; i <= 29; i++) {
-									this.days.push(i);
+								if(this.endDate.year&&val===this.endDate.year&&this.endDate.month&&this.endDate.month===this.month&&this.endDate.day){
+									for (let i = 1; i <= this.endDate.day; i++) {
+										this.days.push(i);
+									}
+								}else{
+									for (let i = 1; i <= 29; i++) {
+										this.days.push(i);
+									}
 								}
 							}
 						} else {
 							if (this.month === 2) {
 								this.days = [''];
-								for (let i = 1; i <= 28; i++) {
-									this.days.push(i);
+								if(this.endDate.year&&val===this.endDate.year&&this.endDate.month&&this.endDate.month===this.month&&this.endDate.day){
+									for (let i = 1; i <= this.endDate.day; i++) {
+										this.days.push(i);
+									}
+								}else{
+									for (let i = 1; i <= 28; i++) {
+										this.days.push(i);
+									}
 								}
 							}
 						}
@@ -335,7 +616,7 @@
 	.date-picker-title {
 		height: 100rpx;
 		padding: 0 20rpx;
-		box-shadow: 0 1rpx 1rpx #e4e4e4;
+		// box-shadow: 0 1rpx 1rpx #e4e4e4;
 	}
 
 	.date-picker-confirm {
@@ -347,7 +628,7 @@
 	.date-picker-cancel {
 		padding: 10rpx 30rpx;
 		font-size: 32rpx;
-		color: red;
+		// color: red;
 	}
 
 	// 内容

pages/goodSource/index.vue

@@ -849,8 +849,9 @@
 						})
 						console.log(_data)
 						this.$request.baseRequest('get', '/publishTaskInfo/selectGoodsSource', _data).then(res => {
+								uni.hideLoading()
 								if (res.code == 200) {
-									uni.hideLoading()
+									
 									if (page.num == 1) {
 										this.goods = [];
 										// this.otherGoods = []
@@ -894,6 +895,7 @@
 								}
 							})
 							.catch(res => {
+								uni.hideLoading()
 								uni.$u.toast(res.message);
 								this.mescroll.endErr();
 							});

pages/mine/driverCertification.vue

@@ -59,6 +59,7 @@
 				<u-picker :show="isShowcardValidity" ref="uPicker" :columns="validityPeriod"
 					@cancel='isShowcardValidity=false' @confirm="confirmValidityPeriod" @change="changeHandler">
 				</u-picker>
+				<itmister-date-picker :overdueContent="'身份证已过期'" :dateStatus="status" :periodOfValidity="true" ref="dateEl" :startYear="1999"  :futureYear="30" @dateConfirm="confirmValidityPeriod"></itmister-date-picker>
 			</view>
 			<view class="content1 content-other">
 				<view class="flex row">
@@ -302,6 +303,7 @@
 					height: 273
 				},
 				tips: '',
+				status:1,
 				// refCode: null,
 				seconds: 30,
 				carModelColumns: [

pages/mine/manageVehicles/addVehicle.vue

@@ -1428,8 +1428,9 @@
 					title: '加载中'
 				})
 				this.$request.baseRequest('post', '/driverCarInfo/api/addInfo', this.dataDetails).then(res => {
+						uni.hideLoading()
 						if (res.code == '200') {
-							uni.hideLoading()
+							
 							this.$refs.uToast.show({
 								type: 'success',
 								message: "提交成功！",
@@ -1453,6 +1454,7 @@
 
 					})
 					.catch(res => {
+						uni.hideLoading()
 						console.log(res)
 						uni.$u.toast(res.message);
 					});

pages/news/index.vue

@@ -174,6 +174,7 @@
 
 					})
 					.catch(res => {
+						uni.hideLoading()
 						uni.$u.toast(res.message);
 					});
 			},
@@ -192,7 +193,7 @@
 						this.newsNumber() //查询消息气泡
 					})
 					.catch(res => {
-						
+						uni.hideLoading()
 						uni.$u.toast(res.message);
 					});
 			},

pages/order/signContract.vue

@@ -584,6 +584,7 @@
 											}
 										})
 									.catch(res => {
+										uni.hideLoading()
 										uni.$u.toast(res.message);
 									});
 							}

pages/public/code.vue

@@ -193,6 +193,7 @@
 							}
 						})
 						.catch(res => {
+							uni.hideLoading()
 							uni.showToast({
 								title: res.message,
 								icon: 'none',

pages/public/login.vue

@@ -102,7 +102,7 @@
 			...mapState(['clientId'])
 		},
 		onShow() {
-			console.log(uni.$u.test.date('2020-02-29'))
+			// console.log(uni.$u.test.date('2020-02-29'))
 			// this.loginType = "wechat"
 			this.$api.logout()
 		},

pages/public/register.vue

@@ -326,11 +326,13 @@
 									uni.hideLoading()
 								})
 								.catch(res => {
+									uni.hideLoading()
 									console.log(res);
 								});
 						}
 					})
 					.catch(res => {
+						uni.hideLoading()
 						console.log(res);
 					});
 			},