refactor(Sku): use datetime-picker

src/sku/components/SkuDateTimeFiled.js

@@ -0,0 +1,90 @@
+// Utils
+import { createNamespace } from '../../utils';
+import { string2Date, date2String } from '../utils/time-helper';
+
+// Components
+import Popup from '../../popup';
+import DateTimePicker from '../../datetime-picker';
+import Field from '../../field';
+
+const [createComponent, bem, t] = createNamespace('sku-datetime-filed');
+
+export default createComponent({
+  props: {
+    value: String,
+    label: String,
+    required: Boolean,
+    placeholder: String,
+    type: {
+      type: String,
+      default: 'date',
+    },
+  },
+
+  data() {
+    return {
+      showDatePicker: false,
+      currentDate: this.type === 'time' ? '' : new Date(),
+    };
+  },
+
+  watch: {
+    value(val) {
+      switch (this.type) {
+        case 'time':
+          this.currentDate = val;
+          break;
+        case 'date':
+        case 'datetime':
+          this.currentDate = string2Date(val) || new Date();
+          break;
+      }
+    },
+  },
+
+  methods: {
+    onClick() {
+      this.showDatePicker = true;
+    },
+    onConfirm(val) {
+      let data = val;
+      if (this.type !== 'time') {
+        data = date2String(val, this.type);
+      }
+      this.$emit('input', data);
+      this.showDatePicker = false;
+    },
+    onCancel() {
+      this.showDatePicker = false;
+    },
+  },
+
+  render() {
+    return (
+      <Field
+        readonly
+        is-link
+        center
+        value={this.value}
+        label={this.label}
+        required={this.required}
+        placeholder={this.placeholder}
+        onClick={this.onClick}
+      >
+        <Popup
+          vModel={this.showDatePicker}
+          slot="extra"
+          position="bottom"
+          getContainer="body"
+        >
+          <DateTimePicker
+            type={this.type}
+            value={this.currentDate}
+            onCancel={this.onCancel}
+            onConfirm={this.onConfirm}
+          />
+        </Popup>
+      </Field>
+    );
+  },
+});

src/sku/components/SkuMessages.js

@@ -7,6 +7,7 @@ import { isNumeric } from '../../utils/validate/number';
 import Cell from '../../cell';
 import Field from '../../field';
 import SkuImgUploader from './SkuImgUploader';
+import SkuDateTimeFiled from './SkuDateTimeFiled';
 
 const [createComponent, bem, t] = createNamespace('sku-messages');
 
@@ -48,7 +49,7 @@ export default createComponent({
       if (message.type === 'id_no') {
         return 'text';
       }
-      return message.datetime > 0 ? 'datetime-local' : message.type;
+      return message.datetime > 0 ? 'datetime' : message.type;
     },
 
     getMessages() {
@@ -125,7 +126,6 @@ export default createComponent({
           <Cell
             key={`${this.goodsId}-${index}`}
             title={message.name}
-            label={t('imageLabel')}
             class={bem('image-cell')}
             required={String(message.required) === '1'}
             valueClass={bem('image-cell-value')}
@@ -135,14 +135,31 @@ export default createComponent({
               maxSize={this.messageConfig.uploadMaxSize}
               uploadImg={this.messageConfig.uploadImg}
             />
+            <div class={bem('image-cell-label')}>{t('imageLabel')}</div>
           </Cell>
         );
       }
 
+      // 时间和日期使用的vant选择器
+      const isDateOrTime = ['date', 'time'].indexOf(message.type) > -1;
+      if (isDateOrTime) {
+        return (
+          <SkuDateTimeFiled
+            vModel={this.messageValues[index].value}
+            label={message.name}
+            key={`${this.goodsId}-${index}`}
+            required={String(message.required) === '1'}
+            placeholder={this.getPlaceholder(message)}
+            type={this.getType(message)}
+          />
+        );
+      }
+
       return (
         <Field
           vModel={this.messageValues[index].value}
           maxlength="200"
+          center={!message.multiple}
           label={message.name}
           key={`${this.goodsId}-${index}`}
           required={String(message.required) === '1'}