1.体温添加小数点 2.添加行程，时间详细到时分秒 3.二维码字体放大添加返回首页按钮

5 years ago · 4408ff0849
10 changed files with 604 additions and 63 deletions
--- a/components/rattenking-dtpicker/GetDate.js
+++ b/components/rattenking-dtpicker/GetDate.js
@ -0,0 +1,167 @@
+const GetDate = {
+  withData: (num) => {
+		let param = parseInt(num);
+    return param < 10 ? '0' + param : '' + param;
+  },
+  getTimes(str){
+    return new Date(str.replace(/-/g,'/')).getTime();
+  },
+	getCurrentTimes(){
+		const date = new Date();
+		const year = date.getFullYear();
+		const month = date.getMonth() + 1;
+		const day = date.getDate();
+		const hour = date.getHours();
+		const minute = date.getMinutes();
+		const second = date.getSeconds();
+		return {
+			detail: {
+				year: year,
+				month: month,
+				day: day,
+				hour: hour,
+				minute: minute,
+				second: second
+			}
+		}
+	},
+  format(arr){
+    let curarr = [];
+    let curarr0 = [];
+    let str = '';
+    arr.forEach((cur,index) => {
+			let o = GetDate.withData(cur);
+      if(index > 2){
+        curarr.push(o);
+      }else{
+        curarr0.push(o);
+      }
+    })
+    if(arr.length < 4){
+      str = curarr0.join('-');
+    }else{
+      str = curarr0.join('-') + ' ' + curarr.join(':');
+    }
+    return str;
+  },
+	getCurrentStringValue(str){
+		let newstr = str.split(' ');
+		if(newstr && newstr[1]){
+			let arr = [...newstr[0].split('-'),...newstr[1].split(':')];
+			return arr;
+		}
+		return newstr[0].split('-');
+	},
+	getCompare(curp,startp,endp,timesp){
+		let cur = GetDate.getTimes(curp);
+		let start = GetDate.getTimes(startp);
+		let end = GetDate.getTimes(endp);
+		if(cur < start){
+			return GetDate.getTimeIndex(timesp,GetDate.getCurrentStringValue(startp));
+		}else if(cur > end){
+			return GetDate.getTimeIndex(timesp,GetDate.getCurrentStringValue(endp));
+		}else{
+			return GetDate.getTimeIndex(timesp,GetDate.getCurrentStringValue(curp));
+		}
+	},
+	getChooseArr(times,indexs){
+		let arr = [];
+		times.forEach((cur,index) => arr.push(cur[indexs[index]]));
+		return arr;
+	},
+	getNewArray(arr){
+		let newarr = [];
+		arr.forEach(cur => newarr.push(cur));
+		return newarr;
+	},
+  getLoopArray: (start, end) => {
+    var start = start || 0;
+    var end = end || 1;
+    var array = [];
+    for (var i = start; i <= end; i++) {
+      array.push(GetDate.withData(i));
+    }
+    return array;
+  },
+  getMonthDay: (year, month) => {
+    var flag = year % 400 == 0 || (year % 4 == 0 && year % 100 != 0), array = null;
+
+    switch (month) {
+      case '01':
+      case '03':
+      case '05':
+      case '07':
+      case '08':
+      case '10':
+      case '12':
+        array = GetDate.getLoopArray(1, 31)
+        break;
+      case '04':
+      case '06':
+      case '09':
+      case '11':
+        array = GetDate.getLoopArray(1, 30)
+        break;
+      case '02':
+        array = flag ? GetDate.getLoopArray(1, 29) : GetDate.getLoopArray(1, 28)
+        break;
+      default:
+        array = '月份格式不正确，请重新输入！'
+    }
+    return array;
+  },
+  getDateTimes: (opts) => {
+    var years = GetDate.getLoopArray(opts.start, opts.end);
+    var months = GetDate.getLoopArray(1, 12);
+    var days = GetDate.getMonthDay(opts.curyear, opts.curmonth);
+    var hours = GetDate.getLoopArray(0, 23);
+    var minutes = GetDate.getLoopArray(0, 59);
+    var seconds = GetDate.getLoopArray(0, 59);
+    var times = null;
+
+    switch (opts.fields) {
+      case 'year':
+        times = [years]
+        break;
+      case 'month':
+        times = [years, months]
+        break;
+      case 'day':
+        times = [years, months, days]
+        break;
+      case 'hour':
+        times = [years, months, days, hours]
+        break;
+      case 'minute':
+        times = [years, months, days, hours, minutes]
+        break;
+      case 'second':
+        times = [years, months, days, hours, minutes, seconds]
+        break;
+      default:
+        times = [years, months, days, hours, minutes, seconds]
+    }
+    return times;
+  },
+  getIndex(arr,target){
+    let len = arr.length;
+    for(let i = 0; i < len; i++){
+      if(arr[i] == target){
+        return i;
+      }
+    }
+  },
+  getTimeIndex(arrs, targets){
+    let len = arrs.length;
+    let arr = [];
+    for(let i = 0; i < len; i++){
+      arr.push(GetDate.getIndex(arrs[i], targets[i]))
+    }
+    return arr;
+  },
+  error(str){
+	  console.error(str);
+  }
+}
+
+module.exports = GetDate; 
--- a/components/rattenking-dtpicker/rattenking-dtpicker.vue
+++ b/components/rattenking-dtpicker/rattenking-dtpicker.vue
@ -0,0 +1,221 @@
+<template>
+	<picker class='rui-picker rui-class' mode="multiSelector" :range="times" :value="timesIndex" :disabled="curDisabled" @change='changeDate' @cancel="cancelDate" @columnchange="columnchangeDate">
+	  {{curValue}}
+	</picker>
+</template>
+
+<script>
+	import GetDate from './GetDate.js';
+	export default {
+		name: 'rattenking-dtpicker',
+		props: {
+			/**
+			 * picker允许选中的最小值
+			 */
+			start: {
+			  type: String,
+			  default: '1900-00-00 00:00:00'
+			},
+			/**
+			 * picker允许选中的最大值
+			 */
+			end: {
+			  type: String,
+			  default: '2500-12-30 23:59:59'
+			},
+			/**
+			 * picker默认展示的值
+			 */
+			value: {
+			  type: String,
+			  default: ''
+			},
+			/**
+			 * picker的时间粒度
+			 */
+			fields: {
+			  type: String,
+			  default: 'second'
+			},
+			/**
+			 * picker是否禁止
+			 */
+			disabled: {
+			  type: Boolean,
+			  default: false
+			}
+		},
+		data() {
+			return {
+				times:[['2019','2020'],['01','02']],
+				timesIndex: [1,1],
+				timesString: null,
+				curValue: this.value,
+				curDisabled: this.disabled,
+				cancel: null
+			}
+		},
+		watch: {
+			value(val) {
+				this.curValue = val;
+			},
+			disabled(val){
+				this.curDisabled = val;
+			},
+			curDisabled(val){
+				this.curDisabled = val;
+			},
+			curValue(val) {
+				this.curValue = val;
+				this.$emit('change', val);
+			},
+			times(val){
+				this.times = val;
+			},
+			timesIndex(val){
+				this.timesIndex = val;
+			},
+			cancel(val) {
+				this.$emit('cancel', val);
+			}
+		},
+		created() {
+			if(this.value === ''){
+				let time = GetDate.getCurrentTimes();
+				let arr = [];
+				for (let key in time.detail) {
+					arr.push(time.detail[key]);
+					if(key === this.fields){
+						break;
+					}
+				}
+				this.value = GetDate.format(arr);
+				this.curValue = GetDate.format(arr);
+			}
+			switch (this.fields){
+				case 'year':
+				  if (this.value.length !== 4) {GetDate.error('时间粒度和时间格式不一致');this.curDisabled = true;return false;}
+				  if (this.start.length !== 4) { GetDate.error('时间粒度和开始时间格式不一致'); this.curDisabled = true; return false;}
+				  if (this.end.length !== 4) { GetDate.error('时间粒度和结束时间格式不一致'); this.curDisabled = true; return false;}
+				  break;
+				case 'month':
+				  if (this.value.length !== 7) { GetDate.error('时间粒度和时间格式不一致'); this.curDisabled = true; return false;}
+				  if (this.start.length !== 7) { GetDate.error('时间粒度和开始时间格式不一致'); this.curDisabled = true; return false;}
+				  if (this.end.length !== 7) { GetDate.error('时间粒度和结束时间格式不一致'); this.curDisabled = true; return false;}
+				  break;
+				case 'day':
+				  if (this.value.length !== 10) { GetDate.error('时间粒度和时间格式不一致'); this.curDisabled = true; return false;}
+				  if (this.start.length !== 10) { GetDate.error('时间粒度和开始时间格式不一致'); this.curDisabled = true; return false;}
+				  if (this.end.length !== 10) { GetDate.error('时间粒度和结束时间格式不一致'); this.curDisabled = true; return false;}
+				  break;
+				case 'hour':
+				  if (this.value.length !== 13) { GetDate.error('时间粒度和时间格式不一致'); this.curDisabled = true; return false;}
+				  if (this.start.length !== 13) { GetDate.error('时间粒度和开始时间格式不一致'); this.curDisabled = true; return false;}
+				  if (this.end.length !== 13) { GetDate.error('时间粒度和结束时间格式不一致'); this.curDisabled = true; return false;}
+				  break;
+				case 'minute':
+				  if (this.value.length !== 16) { GetDate.error('时间粒度和时间格式不一致'); this.curDisabled = true; return false;}
+				  if (this.start.length !== 16) { GetDate.error('时间粒度和开始时间格式不一致'); this.curDisabled = true; return false;}
+				  if (this.end.length !== 16) { GetDate.error('时间粒度和结束时间格式不一致'); this.curDisabled = true; return false;}
+				  break;
+				case 'second':
+				  if (this.value.length !== 19) { GetDate.error('时间粒度和时间格式不一致'); this.curDisabled = true; return false;}
+				  if (this.start.length !== 19) { GetDate.error('时间粒度和开始时间格式不一致'); this.curDisabled = true; return false;}
+				  if (this.end.length !== 19) { GetDate.error('时间粒度和结束时间格式不一致'); this.curDisabled = true; return false;}
+				  break;
+				default: 
+				  GetDate.error('时间粒度不存在')
+				  break;
+			  }
+			  let values = this.value.split(' ');
+			  let targets = GetDate.getCurrentStringValue(this.value);
+
+			  if (GetDate.getTimes(this.value) < GetDate.getTimes(this.start)){
+				GetDate.error('默认时间不能小于开始时间')
+				this.curDisabled = true
+				return false;
+			  }
+			  if (GetDate.getTimes(this.value) > GetDate.getTimes(this.end)) {
+				GetDate.error('默认时间不能大于开始时间')
+				this.curDisabled = true
+				return false;
+			  }
+			  let times = GetDate.getDateTimes({
+					start: this.start.substring(0, 4),
+					end: this.end.substring(0, 4),
+					curyear: this.value.substring(0, 4),
+					curmonth: this.value.substring(5, 7),
+					fields: this.fields
+			  })
+			  let timesIndex = GetDate.getTimeIndex(times, targets);
+			  let timesString = [];
+			  timesIndex.forEach(o => timesString.push(o));
+
+			  this.times = times;
+			  this.timesIndex = timesIndex;
+			  this.timesString = timesString;
+		},
+		methods: {
+			changeDate(e){
+			  let values = e.detail.value;
+			  let times = this.times;
+			  let curarr = [];
+			  for (let i = 0, len = values.length; i < len; i++) {
+				curarr.push(times[i][values[i]])
+			  }
+			  let str = GetDate.format(curarr);
+			  this.curValue = str;
+			},
+			columnchangeDate(e){
+				// 如果是年和月粒度，那么只需要改变时间格式的index，否则需要判断当月天数
+			  if ((this.fields === 'year' || this.fields === 'month')){
+					let timesIndex = GetDate.getNewArray(this.timesIndex);
+					timesIndex[e.detail.column] = e.detail.value;
+// 					let arr = GetDate.getCompare(GetDate.format(GetDate.getChooseArr(this.times,timesIndex)),this.start,this.end,this.times);
+// 					console.log(arr)
+					this.timesIndex = timesIndex;
+					return false;
+			  }else{
+					// 如果改变的是年和月，重新获取天数，同时判断天数的index是否大于当前天数，大于就设置为当月最后一天，否则不变。
+					if(e.detail.column === 0 || e.detail.column === 1){
+						let times = GetDate.getNewArray(this.times);
+						let timesIndex = GetDate.getNewArray(this.timesIndex);
+						timesIndex[e.detail.column] = e.detail.value;
+						let days = GetDate.getMonthDay(times[0][timesIndex[0]], times[1][timesIndex[1]]);
+						times[2] = days;
+						if(timesIndex[2] > days.length - 1){
+							timesIndex[2] = days.length - 1;
+						}
+						this.times = times;
+						// let arr = GetDate.getCompare(GetDate.format(GetDate.getChooseArr(this.times,timesIndex)),this.start,this.end,this.times);
+						this.timesIndex = timesIndex;
+					}else{
+						let timesIndex = GetDate.getNewArray(this.timesIndex);
+						timesIndex[e.detail.column] = e.detail.value;
+// 						let arr = GetDate.getCompare(GetDate.format(GetDate.getChooseArr(this.times,timesIndex)),this.start,this.end,this.times);
+// 						console.log(arr)
+						this.timesIndex = timesIndex;
+					}
+				}
+			},
+			cancelDate(e){
+				this.cancel = e
+			}
+		}
+	}
+</script>
+
+<style>
+	.rui-picker{
+	  height: 10vw;
+	  font-size: 4vw;
+	  color: #000;
+	  display: -webkit-flex;
+	  display: flex;
+	  align-items: center;
+	  padding: 0 10px;
+	  box-sizing: border-box;
+	  border: 1px solid #aaa;
+	  border-radius: 3px;
+	}
+</style>
--- a/components/rattenking-dtpicker/readme.md
+++ b/components/rattenking-dtpicker/readme.md
@ -0,0 +1,69 @@
+### DatePicker 多粒度时间选择器
+
+可进行多粒度的时间选择器，组件名：``rattenking-dtpicker``，代码块： ruiDatePicker。
+
+**使用方式：**
+
+在 ``script`` 中引用组件 
+
+```javascript
+import ruiDatePicker from '@/components/rattenking-dtpicker/rattenking-dtpicker.vue';
+export default {
+    components: {ruiDatePicker}
+}
+```
+
+在 ``template`` 中使用组件
+
+```html
+<ruiDatePicker
+	fields="second"
+	start="2010-00-00 00:00:00"
+	end="2030-12-30 23:59:59"
+	:value="value"
+	@change="bindChange"
+	@cancel="bindCancel"
+></ruiDatePicker>
+```
+
+实际效果参考：[https://github.com/Rattenking/rui-uni-components](https://github.com/Rattenking/rui-uni-components)
+
+**DatePicker 属性说明：**
+
+|属性名		|类型	|默认值	                    |说明					|
+|---		|----	|---	                    |---					|
+|start		|String	|'1900-00-00 00:00:00'		|限制选择器选择的最小时间	|
+|end		|String	|'2500-12-30 23:59:59'		|限制选择器选择的最大时间	|
+|value		|String	|''	                        |当前时间选择器显示的时间	|
+|fields		|String	|'second'		            |时间选择器的粒度			|
+|disabled	|Boolean|false						|是否为禁用状态			|
+
+
+**fields 值说明：**
+
+|值 		|类型	|说明					|
+|---		|----	|---					|
+|year		|String	|选择器粒度为年			|
+|month		|String	|选择器粒度为月份			|
+|day		|String	|选择器粒度为天			|
+|hour		|String	|选择器粒度为小时			|
+|minute	    |String |选择器粒度为分钟			|
+|second	    |String |选择器粒度为秒			|
+
+**事件说明：**
+
+|事件名称	|说明		|
+|---|---|
+|change	|时间选择器点击【确定】按钮时时触发的事件，参数为picker的当前的 value|
+|cancel	|时间选择器点击【取消】按钮时时触发的事件|
+
+**修复BUG说明：**
+
+1. 修复每个月都是 31 天的 bug ！
+2. 修复 value 值做出改变，在外部赋值才改变的 bug ，当前版本只要 value 改变，显示值就会改变！
+3. 优化了默认显示值问题，如果用户不填写，直接默认当前设备的当前时间！
+4. 修复二月份能够选择 31 号的 bug！
+
+**感谢：**
+
+> 在这里特别感谢**AimerQAQ**、**icare**、**281245387@qq.com**、**椰子皮**等反馈的 bug 和给出的优化建议。有更多优化建议和需求，请联系作者。谢谢！
--- a/pages/add-stroke/add-stroke.vue
+++ b/pages/add-stroke/add-stroke.vue
@ -3,11 +3,11 @@
 		<form class="padding-lr cu-form-group flex-direction">
 			<view class="cu-form-group flex flex-direction padding-tb">
 				<view class="title padding-bottom-sm"><span class="text-red padding-right-xs">*</span>出发时间</view>
-				<date-selector @change="getStartData" />
+				<start-date-selector @change="getStartData" />
 			</view>
 			<view class="cu-form-group flex flex-direction padding-tb">
 				<view class="title padding-bottom-sm"><span class="text-red padding-right-xs">*</span>抵达时间</view>
-				<date-selector @change="getEndData" />
+				<end-date-selector @change="getEndData" />
 			</view>
 			<view class="cu-form-group flex flex-direction padding-tb">
 				<view class="title padding-bottom-sm"><span class="text-red padding-right-xs">*</span>行程类型</view>
@ -54,11 +54,12 @@
 <script>
 import { showToast } from 'common/script/util';
 import UniCalendar from 'components/uni-calendar/uni-calendar.vue';
-import DateSelector from './components/date-selector.vue';
+import StartDateSelector from './components/start-date-selector.vue';
+import EndDateSelector from './components/end-date-selector.vue';
 import { SUBMIT_JOURNEYS } from 'api/api';

 export default {
-	components: {UniCalendar,DateSelector},
+	components: {UniCalendar,StartDateSelector,EndDateSelector},
 	data() {
 		return {
 			startTime: this.$moment().format('YYYY-MM-DD'),
--- a/pages/add-stroke/components/date-selector.vue
+++ b/pages/add-stroke/components/date-selector.vue
@ -1,47 +0,0 @@
-<template>
-	<view>
-		<view @tap="$refs.calendar.open()" hover-class="cc-active">
-			<view class="iconfont icon-calendar timer"><text class="padding-left-xs">{{ date }}</text></view>
-		</view>
-		<uni-calendar @confirm="handleChange" :insert="false" :range="false" :show-month="true" ref="calendar" />
-	</view>
-</template>
-
-<script>
-	export default {
-		name: 'DateSelector',
-		data() {
-			const time = this.$moment().format('YYYY-MM-DD hh:mm:ss');
-			return {
-				time,
-			};
-		},
-
-		computed: {
-			date() {
-				const {
-					time
-				} = this;
-				return time;
-			},
-		},
-
-		methods: {
-			/**
-			 * 日历确认选择了时间段
-			 * @param {object} value 日历返回对象
-			 */
-			handleChange(value) {
-				this.time = value.fulldate;
-				this.$emit('change', this.time);
-			},
-		},
-	};
-</script>
-
-<style lang="scss" scoped>
-	.timer {
-		font-size: 34rpx !important;
-		color: $gray;
-	}
-</style>
--- a/pages/add-stroke/components/end-date-selector.vue
+++ b/pages/add-stroke/components/end-date-selector.vue
@ -0,0 +1,68 @@
+<template>
+	<view class="date-bg">
+		<view hover-class="cc-active">
+			<view class="iconfont icon-calendar timer"><text class="padding-left-xs">{{ endDate }}</text></view>
+		</view>
+		
+		<view class="startTime">
+			<ruiDatePicker
+				fields="second"
+				start="2010-00-00 00:00:00"
+				end="2030-12-30 23:59:59"
+				:value="valueEnd"
+				@change="bindChangeEnd"
+			></ruiDatePicker>
+		</view>
+		
+	</view>
+</template>
+
+<script>
+	import ruiDatePicker from 'components/rattenking-dtpicker/rattenking-dtpicker.vue';
+	
+	export default {
+		name: 'EndDateSelector',
+		components: {ruiDatePicker},
+		
+		data() {
+			return {
+				valueEnd: this.$moment(new Date()).format('YYYY-MM-DD hh:mm:ss')
+			};
+		},
+
+		computed: {
+			endDate() {
+				const {
+					valueEnd
+				} = this;
+				return valueEnd;
+			},
+		},
+
+		methods: {
+			bindChangeEnd(value){
+				console.log('抵达时间',value)
+				this.valueEnd = value;
+				this.$emit('change', this.valueEnd);
+			},
+		},
+	};
+</script>
+
+<style lang="scss" scoped>
+	.timer {
+		font-size: 34rpx !important;
+		color: $gray;
+	}
+	
+	.date-bg{
+		position: relative;
+	}
+	
+	.startTime{
+		opacity: 0;
+		position: absolute;
+		top: -14rpx;
+		left: 50rpx;
+	}
+</style>
--- a/pages/add-stroke/components/start-date-selector.vue
+++ b/pages/add-stroke/components/start-date-selector.vue
@ -0,0 +1,68 @@
+<template>
+	<view class="date-bg">
+		<view hover-class="cc-active">
+			<view class="iconfont icon-calendar timer"><text class="padding-left-xs">{{ startDate }}</text></view>
+		</view>
+		
+		<view class="startTime">
+			<ruiDatePicker
+				fields="second"
+				start="2010-00-00 00:00:00"
+				end="2030-12-30 23:59:59"
+				:value="valueStart"
+				@change="bindChangeStart"
+			></ruiDatePicker>
+		</view>
+		
+	</view>
+</template>
+
+<script>
+	import ruiDatePicker from 'components/rattenking-dtpicker/rattenking-dtpicker.vue';
+	
+	export default {
+		name: 'StartDateSelector',
+		components: {ruiDatePicker},
+		
+		data() {
+			return {
+				valueStart: this.$moment(new Date()).format('YYYY-MM-DD hh:mm:ss')
+			};
+		},
+
+		computed: {
+			startDate() {
+				const {
+					valueStart
+				} = this;
+				return valueStart;
+			},
+		},
+
+		methods: {
+			bindChangeStart(value){
+				console.log('抵达时间',value)
+				this.valueStart = value;
+				this.$emit('change', this.valueStart);
+			},
+		},
+	};
+</script>
+
+<style lang="scss" scoped>
+	.timer {
+		font-size: 34rpx !important;
+		color: $gray;
+	}
+	
+	.date-bg{
+		position: relative;
+	}
+	
+	.startTime{
+		opacity: 0;
+		position: absolute;
+		top: -14rpx;
+		left: 50rpx;
+	}
+</style>
--- a/pages/my-trips/my-trips.vue
+++ b/pages/my-trips/my-trips.vue
@ -5,7 +5,7 @@
 		<view v-if="tableList && tableList.length>0" class="cu-timeline" :key="index" v-for="(item,index) in tableList">
 			<view class="cu-time">{{ +item.startTime | formatDate }}</view>
 			<view class="cu-item cuIcon-timefill text-blue">
-				<view class="content shadow-blur bg-blue light">formatDate(data, 'MM-dd hh:mm:ss')
+				<view class="content shadow-blur bg-blue light">
 					{{ +item.startTime | formatDate }} 至 {{ +item.endTime | formatDate }}
 				</view>
 			</view>
--- a/pages/statistics/components/date-selector.vue
+++ b/pages/statistics/components/date-selector.vue
@ -16,7 +16,7 @@
        class="cu-btn round"
        v-for="(item, index) in menus"
      >{{ item }}</button>
-      <!-- <button class="cu-btn round lines-gray">{{item.title}}</button> -->
+      
    </view>
    <uni-calendar
      :insert="false"
--- a/pages/user-code/user-code.vue
+++ b/pages/user-code/user-code.vue
@ -1,7 +1,6 @@
 <template>
  <view class="padding-lg">
-    <!-- <template v-if="userInfo"> -->
-    <template>
+    <template v-if="userInfo">
      <view class="padding bg-purple shadow-blur radius margin-bottom-xl">
        <view>
          <view class="text-xl text-bold margin-bottom">个人申报信息</view>
@ -32,16 +31,11 @@
        </view>
      </view>
      <view class="padding-top-xl">
-        <!-- <image
+        <image
          :src="userInfo.healthCodeList[0].healthCode"
          class="img solid radius"
          mode="aspectFit"
-        /> -->
-		<image
-		  :src="healthCode"
-		  class="img solid radius"
-		  mode="aspectFit"
-		/>
+        />
      </view>
 	  
 	  <!-- 返回首页 -->
@ -83,7 +77,7 @@ export default {
  },

  computed: {
-    ...mapState('user', ['token','healthCode']),
+    ...mapState('user', ['token']),

    // 身份
    post() {