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'}

src/sku/index.less

@@ -330,6 +330,13 @@
         overflow: visible;
         text-align: left;
       }
+
+      &-label {
+        margin-top: @padding-xs;
+        color: @cell-label-color;
+        font-size: @cell-label-font-size;
+        line-height: @cell-label-line-height;
+      }
     }
   }
 

src/sku/lang.ts

@@ -45,14 +45,14 @@ export default {
         id_no: '请填写正确的身份证号码',
       },
       placeholder: {
-        id_no: '输入身份证号码',
-        text: '输入文本',
-        tel: '输入数字',
-        email: '输入邮箱',
-        date: '点击选择日期',
-        time: '点击选择时间',
-        textarea: '点击填写段落文本',
-        mobile: '输入手机号码',
+        id_no: '请填写身份证号',
+        text: '请填写留言',
+        tel: '请填写数字',
+        email: '请填写邮箱',
+        date: '请选择日期',
+        time: '请选择时间',
+        textarea: '请填写留言',
+        mobile: '请填写手机号',
       },
     },
     vanSkuRow: {

src/sku/test/index.spec.js

@@ -1,6 +1,7 @@
 import { mount } from '../../../test';
 import Sku from '..';
 import { getSkuData, initialSku } from '../demo/data';
+import { string2Date, date2String } from '../utils/time-helper';
 
 const skuData = getSkuData();
 
@@ -30,3 +31,14 @@ test('resetSelectedSku method', () => {
   wrapper.find('.van-button--danger').trigger('click');
   expect(wrapper.emitted('buy-clicked').length).toEqual(1);
 });
+
+test('string2Date', () => {
+  expect(date2String(string2Date(''))).toEqual('');
+  expect(date2String(string2Date('2020-07-01'))).toEqual('2020-07-01');
+  expect(date2String(string2Date('2020-07-01 22:44'), 'datetime')).toEqual(
+    '2020-07-01 22:44'
+  );
+  expect(date2String(string2Date('2020-12-31 23:59'), 'datetime')).toEqual(
+    '2020-12-31 23:59'
+  );
+});

src/sku/utils/time-helper.js

@@ -0,0 +1,30 @@
+function length2(int) {
+  return int > 9 ? `${int}` : `0${int}`;
+}
+
+// 字符串转 Date
+// 只处理 YYYY-MM-DD 或者 YYYY-MM-DD HH:MM 格式
+export function string2Date(timeString) {
+  if (!timeString) {
+    return null;
+  }
+  return new Date(timeString.replace(/-/g, '/'));
+}
+
+// Date 转字符串
+// type: date or datetime
+export function date2String(date, type = 'date') {
+  if (!date) {
+    return '';
+  }
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  let timeString = `${year}-${length2(month)}-${length2(day)}`;
+  if (type === 'datetime') {
+    const hours = date.getHours();
+    const minute = date.getMinutes();
+    timeString += ` ${length2(hours)}:${length2(minute)}`;
+  }
+  return timeString;
+}