@kaiyinchem/ky-uniui 1.0.3

package/components/ky-countnum.vue

@@ -0,0 +1,232 @@
+<template>
+  <view class="count-num" :class="size" @click="$emit('click')">
+    <text
+      :class="{ disabled: disabled || Number(count) <= Number(min) }"
+      class="iconfont cn-min"
+      @click.stop="countNum(0)"
+    >
+      &#xe643;
+    </text>
+    <input
+      type="digit"
+      :disabled="disabled"
+      :focus="focus"
+      :class="{disabled}"
+      :cursor-spacing="20"
+      class="cn-count"
+      v-model="count"
+      @blur="onInput"
+      @focus="onFocus"
+    />
+    <text
+      :class="{ disabled: disabled || Number(count) >= Number(max) }"
+      class="iconfont cn-add"
+      @click.stop="countNum(1)"
+    >
+      &#xe611;
+    </text>
+  </view>
+</template>
+
+<script>
+  export default {
+		emits: ['update:value'],
+    props: {
+      value: {
+        type: [Number, String],
+        default: 0
+      },
+      max: {
+        type: [Number, String],
+        default: 9999999
+      },
+      min: {
+        type: [Number, String],
+        default: 0
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 是否倍数递增
+      multiple: {
+        type: Boolean,
+        default: false
+      },
+      focus: {
+        type: Boolean,
+        default: false,
+      },
+      size: {
+        type: String,
+        default: 'small', // small, large
+      },
+      step: {
+        type: Number,
+        default: 1
+      }
+    },
+    data() {
+      return {
+        count: 1,
+        isErrorNumber: false,
+      }
+    },
+    watch: {
+      value(v) {
+        this.count = v
+      }
+    },
+    mounted() {
+      this.count = this.value || this.min
+
+      // 如果是按倍数，最大数值自动乘以1000
+      // if (this.multiple) {
+      //   this.max = this.min * 1000
+      // }
+    },
+    methods: {
+      onFocus() {
+        this.isFocus = true
+      },
+      onInput() {
+        const max = Number(this.max)
+        const count = Number(this.count)
+        const min = Number(this.min)
+
+        if (!this.isFocus) {
+          return
+        }
+        this.isFocus = false
+
+        // 如果输入的不是倍数，自动调整成最小的数值
+        if (this.multiple) {
+          if (count % min !== 0) {
+            this.count = min
+            this.$toast('请输入规格的倍数')
+          }
+          this.emit()
+        } else {
+          if (count < min) {
+            this.$toast('超出最小数值')
+          }
+
+          if (count > max) {
+            this.$toast('超出最大数值')
+          }
+          this.emit()
+        }
+      },
+      countNum(isAdd) {
+        const max = +this.max
+        const min = +this.min
+        this.count = +this.count
+        if (this.multiple && Number.isNaN(min)) {
+          this.$toast('数量异常')
+          return
+        }
+
+        if (this.multiple && this.count % min !== 0) {
+          this.count = min
+          this.$toast('只能是规格的倍数')
+          this.emit()
+          return
+        }
+
+        if (this.disabled) {
+          this.emit()
+          return
+        }
+        if (isAdd) {
+          if (this.count >= max) {
+            return
+          }
+          this.count = this.multiple ? this.count += min : this.count + Number(this.step)
+          this.emit()
+        } else {
+          if (this.count <= min) {
+            return
+          }
+          this.count = this.multiple ? this.count -= min : this.count - Number(this.step)
+          this.emit()
+        }
+      },
+      emit() {
+        const count = this.multiple ? Number(this.count).toFixed(3) : this.count
+        this.$emit('update:value', Number(count))
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .count-num {
+    display: flex;
+    border: 1px solid var(--border-1);;
+    border-radius: 6rpx;
+    align-items: center;
+    overflow: hidden;
+    &.large {
+      .cn-count {
+        height: 65rpx;
+      }
+      .iconfont {
+        width: 65rpx;
+        height: 65rpx;
+        line-height: 65rpx;
+      }
+    }
+
+    .iconfont {
+      text-align: center;
+      font-size: 26rpx;
+      color: var(--color-gray);
+      display: block;
+      width: 52rpx;
+      height: 52rpx;
+      line-height: 52rpx;
+      background: var(--border-1);
+
+      &:active {
+        background: var(--bg-gray);
+      }
+
+      &.disabled {
+        color: var(--color-light-gray);
+        background: rgba(var(--rgb-light-gray), 0.2);
+
+        &:active {
+          background: rgba(var(--rgb-light-gray), 0.2);
+        }
+      }
+    }
+
+    .cn-min {
+      border-top-left-radius: 6rpx;
+      border-bottom-left-radius: 6rpx;
+    }
+
+    .cn-add {
+      border-top-right-radius: 6rpx;
+      border-bottom-right-radius: 6rpx;
+    }
+
+    .cn-count {
+      text-align: center;
+      min-width: 100rpx;
+      font-size: 28rpx;
+      height: 52rpx;
+			flex: 1;
+			background: var(--bg-wite);
+      &.disabled {
+        color: var(--color-light-gray);
+        background: rgba(var(--rgb-light-gray), 0.2);
+      }
+    }
+  }
+	@media (prefers-color-scheme: dark) {
+		.count-num .cn-count {
+			background: #222222;
+		}
+	}
+</style>

package/components/ky-countto.vue

@@ -0,0 +1,130 @@
+<!--简易的数字递增组件，没有动画效果，纯粹递增, 2021-12-20 zzc-->
+<template>
+  <view class="ky-countto-number">
+    <template v-if="value">
+      <text
+				v-for="(item, index) in splitNumber"
+				:key="index" 
+				:style="itemStyle"
+				:class="{ notNum: typeof item !== 'number' }"
+				class="ky-countto-number-item"
+			>
+				{{ item }}
+			</text>
+    </template>
+    <text v-else class="ky-countto-number-item">0</text>
+		<text v-if="suffix && !$slots.suffix" class="ky-countto-number-item ky-countto-suffix ft-24">{{ suffix }}</text>
+		<slot name="suffix"></slot>
+  </view>
+</template>
+
+<script>
+  export default {
+		emits: ['update:value'],
+    props: {
+      value: {
+        type: [String, Number],
+        default: ''
+      },
+      multiple: {
+        type: Boolean,
+        default: false
+      },
+			itemStyle: {
+				type: Object,
+				defatlt: () => {
+					return {
+						width: '22rpx'
+					}
+				}
+			},
+			suffix: {
+				type: String,
+				default: ''
+			},
+    },
+    data() {
+      return {
+        splitNumber: [],
+        timer: ''
+      }
+    },
+    watch: {
+      value(v) {
+        this.startCount(v)
+      }
+    },
+    mounted() {
+      this.startCount(this.value)
+    },
+    destroyed() {
+      clearTimeout(this.timer)
+      this.timer = ''
+    },
+    methods: {
+      startCount(value) {
+        if (!value) {
+          return
+        }
+        clearTimeout(this.timer)
+        this.timer = ''
+        const target = String(value).split('').map(e => {
+          if (e !== '.') {
+            e = +e
+          }
+          return e
+        })
+        this.splitNumber = target.map(e => {
+          if (e !== '.') {
+            e = 0
+          }
+          return e
+        })
+        const len = this.splitNumber.length - 1
+        const last = []
+        // 递归循环
+        const loop = (index) => {
+          this.timer = setTimeout(() => {
+
+            if (this.splitNumber[index] >= target[index]) {
+              if (index <= 0) {
+                clearTimeout(this.timer)
+                this.timer = ''
+                return
+              }
+              index --
+            }
+
+            if (target[index] === 0 || target[index] === '.') {
+              index --
+            }
+
+            if (target[index] !== 0 && target[index] !== '.') {
+              this.splitNumber[index] ++
+            }
+
+            loop(index)
+          }, 50)
+        }
+        loop(len)
+      },
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+	.ky-countto-number {
+		.ky-countto-number-item {
+			display: inline-block;
+		  color: inherit;
+			width: 22rpx;
+			&.notNum {
+				width: auto!important;
+			}
+		}
+		.ky-countto-suffix {
+			font-weight: normal;
+		}
+	}
+  
+</style>

package/components/ky-empty.vue

@@ -0,0 +1,53 @@
+<template>
+  <view class="ky-empty-wrap">
+    <view class="ky-empty-box">
+      <image v-if="icon" class="ky-empty-icon" src="/static/img/nodata.png"></image>
+      <text v-if="msg" class="ky-empty-msg">{{ msg }}</text>
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    props: {
+      icon: {
+        type: Boolean,
+        default: true
+      },
+      msg: {
+        type: String,
+        default: '暂无数据'
+      },
+    },
+    data() {
+      return {
+
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .ky-empty-wrap {
+    display: flex;
+    justify-content: center;
+    padding: 48rpx;
+    .ky-empty-box {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+    .ky-empty-icon {
+      width: 146rpx;
+      height: 146rpx;
+    }
+    .ky-empty-msg {
+      display: inline-block;
+      margin-bottom: 24rpx;
+      font-size: 28rpx;
+      color: #999999;
+    }
+  }
+</style>