Merge pull request #837 from wsd000/feat_license_plate_keyboard

feat: 增加车牌键入组件
didi · Nov 16, 2023 · 61575e2 · 61575e2
2 parents 3921655 + 30f9926
commit 61575e2
Show file tree

Hide file tree

Showing 18 changed files with 1,470 additions and 1 deletion.
diff --git a/components/index.js b/components/index.js
@@ -64,6 +64,7 @@ import Progress from './progress'
 import Ruler from './ruler'
 import TextareaItem from './textarea-item'
 import Skeleton from './skeleton'
+import LicensePlate from './license-plate'
 /* @init<%import ${componentNameUpper} from './${componentName}'%> */
 
 // Totally importing reminder
@@ -136,6 +137,7 @@ export const components = {
   Ruler,
   TextareaItem,
   Skeleton,
+  LicensePlate,
   /* @init<%${componentNameUpper},%> */
 }
 
@@ -231,6 +233,7 @@ export {
   Skeleton,
   setLocale,
   t,
+  LicensePlate,
   /* @init<%${componentNameUpper},%> */
 }
 

diff --git a/components/license-plate-input/index.vue b/components/license-plate-input/index.vue
@@ -0,0 +1,153 @@
+<template>
+  <div class="input-widget">
+    <div
+      v-for="(item, index) in keyArray"
+      :key="index"
+      class="input-item"
+      :class="{
+        'active': selectedIndex === index,
+        'animation': selectedIndex === index && !item
+      }"
+      @click="keyMapping(index)"
+    >
+      <!-- 非新能源键位 -->
+      <div
+        v-if="index !== keyArray.length-1"
+        class="input-item_content"
+      >
+        {{ item }}
+      </div>
+      <!-- 新能源键位 -->
+      <div
+        v-else
+        class="input-item_content"
+      >
+        <div v-if="item">{{ item }}</div>
+        <div v-else class="emptyValue">
+          <div>+</div>
+          <div class="emptyValue_text">新能源</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>export default {
+  name: 'license-plate-input',
+
+  components: {},
+
+  props: {
+    keyArray: {
+      type: Array,
+      default: () => {
+        return []
+      },
+    },
+    selectedIndex: {
+      type: Number,
+      default: 0,
+    },
+  },
+
+  data() {
+    return {}
+  },
+
+  methods: {
+    keyMapping(index) {
+      this.$emit('keyMapping', index)
+    },
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+.input-widget{
+  display: flex;
+  .input-item{
+    width: 64px;
+    height: 94px;
+    background: #F4F8FF;
+    border: 1px solid rgba(222,237,255,1);
+    border-radius: 8px;
+    margin-right: 11px;
+    &_content {
+      width: 100%;
+      height: 100%;
+      font-family: PingFangSC-Medium;
+      font-size: 40px;
+      color: #111A34;
+      letter-spacing: 0;
+      text-align: center;
+      line-height: 94px;
+      font-weight: 500;
+      .emptyValue{
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        color: #12BB42;
+        font-size: 36px;
+        line-height: 36px;
+        &_text{
+          color: #61686F;
+          font-size: 16px;
+          line-height: 16px;
+          margin-top: 10px;
+        }
+      }
+    }
+  }
+  >.input-item:nth-child(2){
+    margin-right: 28px;
+    position: relative;
+    &::after{
+      top: 0.47rem;
+      right: -0.22rem;
+      content: "";
+      position: absolute;
+      width: .06rem;
+      height: .06rem;
+      background: #000;
+      border-radius: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+  >.input-item:last-child{
+    margin-right: 0px;
+    background: #E8FBE7;
+    border: 1px solid rgba(203,242,201,1);
+    border-radius: 8px;
+    font-size: 16px;
+    color: #61686F;
+  }
+  .input-item.active{
+    border-color: rgba(25,140,255,1);
+  }
+  .input-item.active.animation{
+    animation keyboard-cursor 1s step-start 2s
+  }
+
+}
+
+@keyframes keyboard-cursor{
+  0%{
+    border-color: rgba(25,140,255,1);
+  }
+  25%{
+    border-color: rgba(222,237,255,1);
+  }
+  50%{
+    border-color: rgba(25,140,255,1);
+  }
+  75%{
+    border-color: rgba(222,237,255,1);
+  }
+  100%{
+    border-color: rgba(25,140,255,1);
+  }
+}
+</style>

diff --git a/components/license-plate-keyboard/index.vue b/components/license-plate-keyboard/index.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="keyboard-container">
+    <div v-if="keyboardType === 1">
+      <shortcut-view
+        :shortcuts="shortcuts"
+        @enter="$_onEnter"
+      />
+    </div>
+    <div v-else>
+      <keyboard-view
+        :mixedKeyboard="mixedKeyboard"
+        @enter="$_onEnter"
+        @delete="$_onDelete"
+        @confirm="$_onConfirm"
+      />
+    </div>
+  </div>
+</template>
+
+<script>import keyboardView from './key-board-view.vue'
+import shortcutView from './short-cut-view.vue'
+
+export default {
+  name: 'license-plate-keyboard',
+
+  components: {
+    keyboardView,
+    shortcutView,
+  },
+
+  props: {
+    // 对象是键盘组件的数据对象，用于传递键盘每行的数据
+    keyboard: {
+      type: Object,
+      default: {},
+    },
+  },
+
+  data() {
+    return {}
+  },
+
+  computed: {
+    shortcuts() {
+      return this.keyboard.shortcuts || []
+    },
+    // 键盘类型
+    keyboardType() {
+      return this.keyboard.keyboardType || 1
+    },
+    // 混合键盘数据
+    mixedKeyboard() {
+      return this.keyboard.mixedKeyboard || []
+    },
+  },
+
+  methods: {
+    $_onEnter(value) {
+      this.$emit('enter', value)
+    },
+    $_onDelete() {
+      this.$emit('delete')
+    },
+    $_onConfirm() {
+      this.$emit('confirm')
+    },
+  },
+}
+</script>

diff --git a/components/license-plate-keyboard/key-board-view.vue b/components/license-plate-keyboard/key-board-view.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="mixed-key-container">
+    <div
+      v-for="(item, index) in mixedKeyboard"
+      :key="index"
+      class="mixed-key-item"
+      :class="{disabled: item.disabled}"
+    >
+      <template v-if="item.type">
+        <div
+          :class="item.type"
+          v-tap="{
+            methods:
+              item.type === 'delete' ? $_onDelete : $_onConfirm,
+            disabled: item.disabled
+          }"
+        >
+          <img v-if="item.imgUrl" :src="item.imgUrl"/>
+          <div v-if="item.text">{{ item.text }}</div>
+        </div>
+      </template>
+      <template v-else>
+        <div
+          v-tap="{
+            methods: $_onEnter,
+            disabled: item.disabled
+          }"
+        >{{ item.value }}</div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>export default {
+  name: 'mixed-key-board',
+
+  components: {},
+
+  props: {
+    // 混合键盘数据
+    mixedKeyboard: {
+      type: Array,
+      default: () => {
+        return []
+      },
+    },
+  },
+
+  data() {
+    return {}
+  },
+
+  methods: {
+    $_onEnter(value) {
+      this.$emit('enter', value)
+    },
+    $_onDelete() {
+      this.$emit('delete')
+    },
+    $_onConfirm() {
+      this.$emit('confirm')
+    },
+  },
+}
+</script>
+
+<style lang="stylus" scoped>
+.mixed-key-container {
+  padding: 32px 0px;
+  display: flex;
+  flex-wrap: wrap;
+  .mixed-key-item {
+    >div{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 64px;
+      height: 104px;
+      background: #FFFFFF;
+      box-shadow: 0px 2px 0px 0px rgba(159,159,159,0.5);
+      border-radius: 10px;
+      font-family: PingFangSC-Regular;
+      font-size: 40px;
+      color: #111A34;
+      font-weight: 400;
+      margin: 0px 0px 10px 10px;
+      &.delete{
+        img{
+          width: 40px;
+          height: 40px;
+        }
+      }
+      &.confirm{
+        width: 212px;
+        background: #198CFF;
+        box-shadow: none;
+        font-size: 36px;
+        color: #FFFFFF;
+      }
+    }
+    &.disabled{
+      >div{
+        background: #F5F5F5;
+        color: #C1C8CF;
+      }
+    }
+  }
+}
+</style>