1

components/zzjc-num-keyboard/zzjc-num-keyboard.vue

@@ -0,0 +1,212 @@
+<template>
+  <view class="y-f" style="height: 55vh">
+    <view class="weight">
+      <view class="weight-data"> {{ nums }}</view>
+    </view>
+
+    <view class="keyboard-container">
+      <view class="keypad">
+        <view
+          class="oner"
+          :class="item.class"
+          :style="getListItemStyle(index)"
+          v-for="(item, index) in numbers"
+          :key="'num_' + index"
+          @click="changeNums(item, index)"
+        >
+          {{ item.text }}
+        </view>
+      </view>
+      <view class="func-pad">
+        <view @click="jianshao()" class="oner flex1">
+          <u-icon name="arrow-leftward" bold></u-icon>
+        </view>
+        <view @click="setNull()" class="oner flex1 mt10 mb10"> 清空 </view>
+        <view class="oner confirm" @click="ok()"> 确认 </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'zzjc-num-keyboard',
+  props: {
+    numKeyboardParam: {
+      type: Object,
+      default: null
+    } //小数位数，-1为不限制
+  },
+  data() {
+    return {
+      nums: '',
+      numbers: [
+        {
+          text: '1'
+        },
+        {
+          text: '2'
+        },
+        {
+          text: '3'
+        },
+        {
+          text: '4'
+        },
+        {
+          text: '5'
+        },
+        {
+          text: '6'
+        },
+        {
+          text: '7'
+        },
+        {
+          text: '8'
+        },
+        {
+          text: '9'
+        },
+        {
+          text: '0',
+          class: 'zero'
+        },
+        {
+          text: '.'
+        }
+      ]
+    }
+  },
+  created() {},
+  methods: {
+    //确认
+    ok() {
+      const val = {
+        val: this.nums
+      }
+      this.nums = ''
+      uni.$emit('keyboardOK', val)
+    },
+    /*
+     * 清空
+     * 数字类型改为0，其他类型改为空
+     * */
+    setNull() {
+      this.nums = ''
+      uni.$emit('keyboardOK', null)
+    },
+    clearNum() {
+      this.nums = ''
+    },
+    jianshao() {
+      if (this.nums) {
+        this.nums = this.nums.substring(0, this.nums.length - 1)
+      }
+    },
+    changeNums(item, index) {
+      this.sumindex = index
+      if (item.text == '.') {
+        if (this.nums.indexOf('.') != -1 || this.nums.length == 0) {
+          return false
+        }
+      }
+      //检查小数位数
+      let decimal = this.numKeyboardParam.decimal
+      if (decimal == null) decimal = -1
+      if (this.nums.split('.') && this.nums.split('.')[1] && decimal != -1) {
+        if (this.nums.split('.')[1].length >= decimal) {
+          return false
+        }
+      }
+      this.nums = this.nums + item.text
+    },
+
+    getListItemStyle(index) {
+      return {
+        background: this.numbers[index].background
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.keyboard-container {
+  flex: 5;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(232, 232, 232, 0.98);
+}
+.keypad {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr); /* 默认 3 列 */
+  gap: 10px;
+  padding: 10px;
+  flex: 4;
+}
+
+.oner {
+  width: 95%;
+  height: 55px;
+  font-size: 20px;
+  border: none;
+  border-radius: 5px;
+  background-color: #ffffff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+/* 0 占两列 */
+.zero {
+  width: 98%;
+  grid-column: span 2;
+}
+
+.func-pad {
+  height: 100%;
+  display: flex;
+  padding: 10px 10px 10px 0;
+  flex-direction: column;
+  flex: 1;
+  box-sizing: border-box;
+}
+.confirm {
+  flex: 2;
+  color: #ffffff;
+  background-color: #19be6b;
+}
+.weight {
+  width: 100%;
+  background-color: #2c405a;
+  flex: 1;
+  padding: 8px;
+  box-sizing: border-box;
+}
+
+.weight-data {
+  color: #4cd964;
+  text-align: right;
+  letter-spacing: 5px;
+  font-size: 50px;
+  font-family: zzjc-lcd;
+  height: 40px;
+}
+
+@media (max-width: 700px) {
+  .weight-data {
+    font-size: 25px;
+  }
+  .oner {
+    height: 33px;
+    font-size: 16px;
+  }
+  .weight-data {
+    height: 20px;
+  }
+}
+</style>