From 59c88b610cd7edf69b05d0c41c8bba9a6781dab0 Mon Sep 17 00:00:00 2001
From: xiaoyucoding <xiaoyucoding@126.com>
Date: Mon, 10 Dec 2018 16:04:55 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20picker=20=E6=9C=AA?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=20value=20=E5=80=BC=E6=97=B6=E6=8A=A5?=
 =?UTF-8?q?=E9=94=99=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/core/view/components/picker/index.vue     |   2 +-
 .../h5/components/app/popup/picker.vue        | 261 ++++++++++--------
 src/shared/util.js                            |  15 +
 3 files changed, 159 insertions(+), 119 deletions(-)

diff --git a/src/core/view/components/picker/index.vue b/src/core/view/components/picker/index.vue
index 638b86ec0..b4b556a63 100644
--- a/src/core/view/components/picker/index.vue
+++ b/src/core/view/components/picker/index.vue
@@ -48,7 +48,7 @@ export default {
     },
     value: {
       type: [Number, String, Array],
-      default: ''
+      default: 0
     },
     mode: {
       type: String,
diff --git a/src/platforms/h5/components/app/popup/picker.vue b/src/platforms/h5/components/app/popup/picker.vue
index 7dc62e313..a3f378771 100644
--- a/src/platforms/h5/components/app/popup/picker.vue
+++ b/src/platforms/h5/components/app/popup/picker.vue
@@ -1,34 +1,33 @@
 <template>
   <uni-picker @touchmove.prevent>
-    <transition
-      name="uni-fade">
-      <div
-        v-show="visible"
-        class="uni-mask"
+    <transition name="uni-fade">
+      <div
+        v-show="visible"
+        class="uni-mask"
         @click="_cancel" />
     </transition>
-    <div
-      :class="{'uni-picker_toggle':visible}"
+    <div
+      :class="{'uni-picker_toggle':visible}"
       class="uni-picker">
-      <div
-        class="uni-picker-header"
+      <div
+        class="uni-picker-header"
         @click.stop>
-        <div
-          class="uni-picker-action uni-picker-action-cancel"
+        <div
+          class="uni-picker-action uni-picker-action-cancel"
           @click="_cancel">取消</div>
-        <div
-          class="uni-picker-action uni-picker-action-confirm"
+        <div
+          class="uni-picker-action uni-picker-action-confirm"
           @click="_change">确定</div>
       </div>
-      <v-uni-picker-view
-        :value.sync="valueArray"
+      <v-uni-picker-view
+        :value.sync="valueArray"
         class="uni-picker-content">
-        <v-uni-picker-view-column
-          v-for="(range,index0) in rangeArray"
+        <v-uni-picker-view-column
+          v-for="(range,index0) in rangeArray"
           :key="index0">
-          <div
-            v-for="(item,index) in range"
-            :key="index"
+          <div
+            v-for="(item,index) in range"
+            :key="index"
             class="uni-picker-item">{{ typeof item==='object'?item[rangeKey]||'':item }}{{ units[index0]||'' }}</div>
         </v-uni-picker-view-column>
       </v-uni-picker-view>
@@ -40,6 +39,10 @@
   </uni-picker>
 </template>
 <script>
+import {
+  formatDateTime
+} from 'uni-shared'
+
 const mode = {
   SELECTOR: 'selector',
   MULTISELECTOR: 'multiSelector',
@@ -151,7 +154,8 @@ export default {
           return val
         case mode.TIME:
           return this.timeArray
-        case mode.DATE: {
+        case mode.DATE:
+        {
           let dateArray = this.dateArray
           switch (this.fields) {
             case fields.YEAR:
@@ -166,11 +170,13 @@ export default {
     },
     startArray () {
       var splitStr = this.mode === mode.DATE ? '-' : ':'
-      return this.start.split(splitStr).map((val, i) => (this.mode === mode.DATE ? this.dateArray : this.timeArray)[i].indexOf(val))
+      return this.start.split(splitStr).map((val, i) => (this.mode === mode.DATE ? this.dateArray : this.timeArray)[i].indexOf(
+        val))
     },
     endArray () {
       var splitStr = this.mode === mode.DATE ? '-' : ':'
-      return this.end.split(splitStr).map((val, i) => (this.mode === mode.DATE ? this.dateArray : this.timeArray)[i].indexOf(val))
+      return this.end.split(splitStr).map((val, i) => (this.mode === mode.DATE ? this.dateArray : this.timeArray)[i].indexOf(
+        val))
     },
     units () {
       switch (this.mode) {
@@ -211,7 +217,7 @@ export default {
   created () {
     this._createTime()
     this._createDate()
-    this._setValue(this.value)
+    this._setValue()
     this.$watch('value', this._setValue)
     this.$watch('mode', this._setValue)
   },
@@ -252,8 +258,8 @@ export default {
       return val[0] * 366 + (val[1] || 0 * 31) + (val[2] || 0)
     },
     /**
-     * 将右侧数组值同步到左侧（交集部分）
-     */
+			 * 将右侧数组值同步到左侧（交集部分）
+			 */
     _cloneArray (val1, val2) {
       for (let i = 0; i < val1.length && i < val2.length; i++) {
         val1[i] = val2[i]
@@ -270,9 +276,21 @@ export default {
           valueArray = [...val]
           break
         case mode.TIME:
+          // 处理默认值为当前时间
+          if (this.value === 0) {
+            val = formatDateTime({
+              mode: mode.TIME
+            })
+          }
           valueArray = val.split(':').map((val, i) => this.timeArray[i].indexOf(val))
           break
         case mode.DATE:
+          // 处理默认值为当前日期
+          if (this.value === 0) {
+            val = formatDateTime({
+              mode: mode.DATE
+            })
+          }
           valueArray = val.split('-').map((val, i) => this.dateArray[i].indexOf(val))
           break
       }
@@ -316,102 +334,109 @@ export default {
 }
 </script>
 <style>
-uni-picker {
-  display: block;
-  box-sizing: border-box;
-}
+	uni-picker {
+		display: block;
+		box-sizing: border-box;
+	}
 
-uni-picker .uni-picker {
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  transform: translate(0, 100%);
-  backface-visibility: hidden;
-  z-index: 999;
-  width: 100%;
-  background-color: #efeff4;
-  transition: transform 0.3s;
-}
+	uni-picker .uni-picker {
+		position: fixed;
+		left: 0;
+		bottom: 0;
+		transform: translate(0, 100%);
+		backface-visibility: hidden;
+		z-index: 999;
+		width: 100%;
+		background-color: #efeff4;
+		transition: transform 0.3s;
+	}
 
-uni-picker .uni-picker.uni-picker_toggle {
-  transform: translate(0, 0);
-}
+	uni-picker .uni-picker.uni-picker_toggle {
+		transform: translate(0, 0);
+	}
 
-uni-picker .uni-picker * {
-  box-sizing: border-box;
-}
+	uni-picker .uni-picker * {
+		box-sizing: border-box;
+	}
 
-uni-picker .uni-picker {
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  transform: translate(0, 100%);
-  backface-visibility: hidden;
-  z-index: 999;
-  width: 100%;
-  background-color: #efeff4;
-  transition: transform 0.3s;
-  transition: transform 0.3s;
-}
+	uni-picker .uni-picker {
+		position: fixed;
+		left: 0;
+		bottom: 0;
+		transform: translate(0, 100%);
+		backface-visibility: hidden;
+		z-index: 999;
+		width: 100%;
+		background-color: #efeff4;
+		transition: transform 0.3s;
+		transition: transform 0.3s;
+	}
 
-uni-picker .uni-picker-content {
-  position: relative;
-  display: block;
-  width: 100%;
-  height: 238px;
-  background-color: white;
-}
-uni-picker .uni-picker-item {
-  padding: 0;
-  height: 34px;
-  line-height: 34px;
-  text-align: center;
-  color: #000;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-uni-picker .uni-picker-header {
-  display: block;
-  position: relative;
-  text-align: center;
-  width: 100%;
-  height: 45px;
-  background-color: #fff;
-}
-uni-picker .uni-picker-header:after {
-  content: "";
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  height: 1px;
-  clear: both;
-  border-bottom: 1px solid #e5e5e5;
-  color: #e5e5e5;
-  transform-origin: 0 100%;
-  transform: scaleY(0.5);
-}
-uni-picker .uni-picker-action {
-  display: block;
-  max-width: 50%;
-  top: 0;
-  height: 100%;
-  box-sizing: border-box;
-  padding: 0 14px;
-  font-size: 17px;
-  line-height: 45px;
-  overflow: hidden;
-}
-uni-picker .uni-picker-action.uni-picker-action-cancel {
-  float: left;
-  color: #888;
-}
-uni-picker .uni-picker-action.uni-picker-action-confirm {
-  float: right;
-  color: #007aff;
-}
-/* .uni-picker {
+	uni-picker .uni-picker-content {
+		position: relative;
+		display: block;
+		width: 100%;
+		height: 238px;
+		background-color: white;
+	}
+
+	uni-picker .uni-picker-item {
+		padding: 0;
+		height: 34px;
+		line-height: 34px;
+		text-align: center;
+		color: #000;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
+	}
+
+	uni-picker .uni-picker-header {
+		display: block;
+		position: relative;
+		text-align: center;
+		width: 100%;
+		height: 45px;
+		background-color: #fff;
+	}
+
+	uni-picker .uni-picker-header:after {
+		content: "";
+		position: absolute;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		height: 1px;
+		clear: both;
+		border-bottom: 1px solid #e5e5e5;
+		color: #e5e5e5;
+		transform-origin: 0 100%;
+		transform: scaleY(0.5);
+	}
+
+	uni-picker .uni-picker-action {
+		display: block;
+		max-width: 50%;
+		top: 0;
+		height: 100%;
+		box-sizing: border-box;
+		padding: 0 14px;
+		font-size: 17px;
+		line-height: 45px;
+		overflow: hidden;
+	}
+
+	uni-picker .uni-picker-action.uni-picker-action-cancel {
+		float: left;
+		color: #888;
+	}
+
+	uni-picker .uni-picker-action.uni-picker-action-confirm {
+		float: right;
+		color: #007aff;
+	}
+
+	/* .uni-picker {
   position: relative;
 }
 .uni-picker-units {
@@ -432,4 +457,4 @@ uni-picker .uni-picker-action.uni-picker-action-confirm {
   text-align: center;
   transform: translateX(2em);
 } */
-</style>
+</style>
diff --git a/src/shared/util.js b/src/shared/util.js
index 887821385..302288805 100644
--- a/src/shared/util.js
+++ b/src/shared/util.js
@@ -1,6 +1,10 @@
 const _toString = Object.prototype.toString
 const hasOwnProperty = Object.prototype.hasOwnProperty
 
+const _completeValue = value => {
+  return value > 9 ? value : ('0' + value)
+}
+
 export function isFn (fn) {
   return typeof fn === 'function'
 }
@@ -34,4 +38,15 @@ export function setProperties (item, props, propsData) {
 export function getLen (str = '') {
   /* eslint-disable no-control-regex */
   return ('' + str).replace(/[^\x00-\xff]/g, '**').length
+}
+
+export function formatDateTime ({
+  date = new Date(),
+  mode = 'date'
+}) {
+  if (mode === 'time') {
+    return _completeValue(date.getHours()) + ':' + _completeValue(date.getMinutes())
+  } else {
+    return date.getFullYear() + '-' + _completeValue(date.getMonth() + 1) + '-' + _completeValue(date.getDate())
+  }
 }
-- 
GitLab