@10yun/cv-mobile-ui 0.5.27 → 0.5.30

package/uview-plus/components/u-car-keyboard/u-car-keyboard.vue

@@ -1 +1,205 @@
-<template>
  <view class="u-keyboard" @touchmove.stop.prevent="noop">
    <view
      v-for="(group, i) in abc ? engKeyBoardList : areaList"
      :key="i"
      class="u-keyboard__button"
      :index="i"
      :class="[i + 1 === 4 && 'u-keyboard__button--center']"
    >
      <view v-if="i === 3" class="u-keyboard__button__inner-wrapper">
        <view
          class="u-keyboard__button__inner-wrapper__left"
          hover-class="u-hover-class"
          :hover-stay-time="200"
          @tap="changeCarInputMode"
        >
          <text
            class="u-keyboard__button__inner-wrapper__left__lang"
            :class="[!abc && 'u-keyboard__button__inner-wrapper__left__lang--active']"
          >
            中
          </text>
          <text class="u-keyboard__button__inner-wrapper__left__line">/</text>
          <text
            class="u-keyboard__button__inner-wrapper__left__lang"
            :class="[abc && 'u-keyboard__button__inner-wrapper__left__lang--active']"
          >
            英
          </text>
        </view>
      </view>
      <view class="u-keyboard__button__inner-wrapper" v-for="(item, j) in group" :key="j">
        <view
          class="u-keyboard__button__inner-wrapper__inner"
          :hover-stay-time="200"
          @tap="carInputClick(i, j)"
          hover-class="u-hover-class"
        >
          <text class="u-keyboard__button__inner-wrapper__inner__text">{{ item }}</text>
        </view>
      </view>
      <view v-if="i === 3" @touchstart="backspaceClick" @touchend="clearTimer" class="u-keyboard__button__inner-wrapper">
        <view class="u-keyboard__button__inner-wrapper__right" hover-class="u-hover-class" :hover-stay-time="200">
          <u-icon size="28" name="backspace" color="#303133"></u-icon>
        </view>
      </view>
    </view>
  </view>
 * keyboard 键盘组件
 * @description 此为uView自定义的键盘面板，内含了数字键盘，车牌号键，身份证号键盘3种模式，都有可以打乱按键顺序的选项。
 * @tutorial https://uviewui.com/components/keyboard.html
 * @property {Boolean} random 是否打乱键盘的顺序
 * @event {Function} change 点击键盘触发
 * @event {Function} backspace 点击退格键触发
 * @example <u-keyboard ref="uKeyboard" mode="car" v-model="show"></u-keyboard>
 */
  name: 'u-keyboard',
  mixins: [mpMixin, mixin, props],
  data() {
    return {
      // 车牌输入时，abc=true为输入车牌号码，bac=false为输入省份中文简称
      abc: false
    };
  },
  computed: {
    areaList() {
      let data = [
        '京',
        '沪',
        '粤',
        '津',
        '冀',
        '豫',
        '云',
        '辽',
        '黑',
        '湘',
        '皖',
        '鲁',
        '苏',
        '浙',
        '赣',
        '鄂',
        '桂',
        '甘',
        '晋',
        '陕',
        '蒙',
        '吉',
        '闽',
        '贵',
        '渝',
        '川',
        '青',
        '琼',
        '宁',
        '挂',
        '藏',
        '港',
        '澳',
        '新',
        '使',
        '学'
      ];
      let tmp = [];
      // 打乱顺序
      if (this.random) data = uni.$u.randomArray(data);
      // 切割成二维数组
      tmp[0] = data.slice(0, 10);
      tmp[1] = data.slice(10, 20);
      tmp[2] = data.slice(20, 30);
      tmp[3] = data.slice(30, 36);
      return tmp;
    },
    engKeyBoardList() {
      let data = [
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        0,
        'Q',
        'W',
        'E',
        'R',
        'T',
        'Y',
        'U',
        'I',
        'O',
        'P',
        'A',
        'S',
        'D',
        'F',
        'G',
        'H',
        'J',
        'K',
        'L',
        'Z',
        'X',
        'C',
        'V',
        'B',
        'N',
        'M'
      ];
      let tmp = [];
      if (this.random) data = uni.$u.randomArray(data);
      tmp[0] = data.slice(0, 10);
      tmp[1] = data.slice(10, 20);
      tmp[2] = data.slice(20, 30);
      tmp[3] = data.slice(30, 36);
      return tmp;
    }
  },
  methods: {
    // 点击键盘按钮
    carInputClick(i, j) {
      let value = '';
      // 不同模式，获取不同数组的值
      if (this.abc) value = this.engKeyBoardList[i][j];
      else value = this.areaList[i][j];
      // 如果允许自动切换，则将中文状态切换为英文
      if (!this.abc && this.autoChange) uni.$u.sleep(200).then(() => (this.abc = true));
      this.$emit('change', value);
    },
    // 修改汽车牌键盘的输入模式，中文|英文
    changeCarInputMode() {
      this.abc = !this.abc;
    },
    // 点击退格键
    backspaceClick() {
      this.$emit('backspace');
      clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
      this.timer = null;
      this.timer = setInterval(() => {
        this.$emit('backspace');
      }, 250);
    },
    clearTimer() {
      clearInterval(this.timer);
      this.timer = null;
    }
  }
+<template>
+  <view class="u-keyboard" @touchmove.stop.prevent="noop">
+    <view
+      v-for="(group, i) in abc ? engKeyBoardList : areaList"
+      :key="i"
+      class="u-keyboard__button"
+      :index="i"
+      :class="[i + 1 === 4 && 'u-keyboard__button--center']"
+    >
+      <view v-if="i === 3" class="u-keyboard__button__inner-wrapper">
+        <view
+          class="u-keyboard__button__inner-wrapper__left"
+          hover-class="u-hover-class"
+          :hover-stay-time="200"
+          @tap="changeCarInputMode"
+        >
+          <text
+            class="u-keyboard__button__inner-wrapper__left__lang"
+            :class="[!abc && 'u-keyboard__button__inner-wrapper__left__lang--active']"
+          >
+            中
+          </text>
+          <text class="u-keyboard__button__inner-wrapper__left__line">/</text>
+          <text
+            class="u-keyboard__button__inner-wrapper__left__lang"
+            :class="[abc && 'u-keyboard__button__inner-wrapper__left__lang--active']"
+          >
+            英
+          </text>
+        </view>
+      </view>
+      <view class="u-keyboard__button__inner-wrapper" v-for="(item, j) in group" :key="j">
+        <view
+          class="u-keyboard__button__inner-wrapper__inner"
+          :hover-stay-time="200"
+          @tap="carInputClick(i, j)"
+          hover-class="u-hover-class"
+        >
+          <text class="u-keyboard__button__inner-wrapper__inner__text">{{ item }}</text>
+        </view>
+      </view>
+      <view v-if="i === 3" @touchstart="backspaceClick" @touchend="clearTimer" class="u-keyboard__button__inner-wrapper">
+        <view class="u-keyboard__button__inner-wrapper__right" hover-class="u-hover-class" :hover-stay-time="200">
+          <u-icon size="28" name="backspace" color="#303133"></u-icon>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import { props } from './props';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { randomArray, sleep } from '../../libs/function/index';
+/**
+ * keyboard 键盘组件
+ * @description 此为uview-plus自定义的键盘面板，内含了数字键盘，车牌号键，身份证号键盘3种模式，都有可以打乱按键顺序的选项。
+ * @tutorial https://uview-plus.jiangruyi.com/components/keyboard.html
+ * @property {Boolean} random 是否打乱键盘的顺序
+ * @event {Function} change 点击键盘触发
+ * @event {Function} backspace 点击退格键触发
+ * @example <u-keyboard ref="uKeyboard" mode="car" v-model="show"></u-keyboard>
+ */
+export default {
+  name: 'u-car-keyboard',
+  mixins: [mpMixin, mixin, props],
+  data() {
+    return {
+      // 车牌输入时，abc=true为输入车牌号码，bac=false为输入省份中文简称
+      abc: false
+    };
+  },
+  computed: {
+    areaList() {
+      let data = [
+        '京',
+        '沪',
+        '粤',
+        '津',
+        '冀',
+        '豫',
+        '云',
+        '辽',
+        '黑',
+        '湘',
+        '皖',
+        '鲁',
+        '苏',
+        '浙',
+        '赣',
+        '鄂',
+        '桂',
+        '甘',
+        '晋',
+        '陕',
+        '蒙',
+        '吉',
+        '闽',
+        '贵',
+        '渝',
+        '川',
+        '青',
+        '琼',
+        '宁',
+        '挂',
+        '藏',
+        '港',
+        '澳',
+        '新',
+        '使',
+        '学'
+      ];
+      let tmp = [];
+      // 打乱顺序
+      if (this.random) data = randomArray(data);
+      // 切割成二维数组
+      tmp[0] = data.slice(0, 10);
+      tmp[1] = data.slice(10, 20);
+      tmp[2] = data.slice(20, 30);
+      tmp[3] = data.slice(30, 36);
+      return tmp;
+    },
+    engKeyBoardList() {
+      let data = [
+        1,
+        2,
+        3,
+        4,
+        5,
+        6,
+        7,
+        8,
+        9,
+        0,
+        'Q',
+        'W',
+        'E',
+        'R',
+        'T',
+        'Y',
+        'U',
+        'I',
+        'O',
+        'P',
+        'A',
+        'S',
+        'D',
+        'F',
+        'G',
+        'H',
+        'J',
+        'K',
+        'L',
+        'Z',
+        'X',
+        'C',
+        'V',
+        'B',
+        'N',
+        'M'
+      ];
+      let tmp = [];
+      if (this.random) data = randomArray(data);
+      tmp[0] = data.slice(0, 10);
+      tmp[1] = data.slice(10, 20);
+      tmp[2] = data.slice(20, 30);
+      tmp[3] = data.slice(30, 36);
+      return tmp;
+    }
+  },
+  emits: ['change', 'backspace'],
+  methods: {
+    // 点击键盘按钮
+    carInputClick(i, j) {
+      let value = '';
+      // 不同模式，获取不同数组的值
+      if (this.abc) value = this.engKeyBoardList[i][j];
+      else value = this.areaList[i][j];
+      // 如果允许自动切换，则将中文状态切换为英文
+      if (!this.abc && this.autoChange) sleep(200).then(() => (this.abc = true));
+      this.$emit('change', value);
+    },
+    // 修改汽车牌键盘的输入模式，中文|英文
+    changeCarInputMode() {
+      this.abc = !this.abc;
+    },
+    // 点击退格键
+    backspaceClick() {
+      this.$emit('backspace');
+      clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
+      this.timer = null;
+      this.timer = setInterval(() => {
+        this.$emit('backspace');
+      }, 250);
+    },
+    clearTimer() {
+      clearInterval(this.timer);
+      this.timer = null;
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

package/uview-plus/components/u-card/card.js

@@ -0,0 +1,40 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 3.0
+ * @Date         : 2025-04-26 16:37:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2025-04-26 16:37:21
+ * @FilePath     : /uview-plus/libs/config/props/card.js
+ */
+export default {
+	// card组件的props
+	card: {
+		full: false,
+		title: '',
+		titleColor: '#303133',
+		titleSize: '15px',
+		subTitle: '',
+		subTitleColor: '#909399',
+		subTitleSize: '13px',
+		border: true,
+		index: '',
+		margin: '15px',
+		borderRadius: '8px',
+		headStyle: {},
+		bodyStyle: {},
+		footStyle: {},
+		headBorderBottom: true,
+		footBorderTop: true,
+		thumb: '',
+		thumbWidth: '30px',
+		thumbCircle: false,
+		padding: '15px',
+		paddingHead: '',
+        paddingBody: '',
+        paddingFoot: '',
+        showHead: true,
+        showFoot: true,
+        boxShadow: 'none'
+	}
+}

package/uview-plus/components/u-card/props.js

@@ -0,0 +1,134 @@
+import { defineMixin } from '../../libs/vue';
+import defProps from '../../libs/config/props.js';
+
+export const propsCard = defineMixin({
+  props: {
+    // 与屏幕两侧是否留空隙
+    full: {
+      type: Boolean,
+      default: () => defProps.card.full
+    },
+    // 标题
+    title: {
+      type: String,
+      default: () => defProps.card.title
+    },
+    // 标题颜色
+    titleColor: {
+      type: String,
+      default: () => defProps.card.titleColor
+    },
+    // 标题字体大小
+    titleSize: {
+      type: [Number, String],
+      default: () => defProps.card.titleSize
+    },
+    // 副标题
+    subTitle: {
+      type: String,
+      default: () => defProps.card.subTitle
+    },
+    // 副标题颜色
+    subTitleColor: {
+      type: String,
+      default: () => defProps.card.subTitleColor
+    },
+    // 副标题字体大小
+    subTitleSize: {
+      type: [Number, String],
+      default: () => defProps.card.subTitleSize
+    },
+    // 是否显示外部边框，只对full=false时有效(卡片与边框有空隙时)
+    border: {
+      type: Boolean,
+      default: () => defProps.card.border
+    },
+    // 用于标识点击了第几个
+    index: {
+      type: [Number, String, Object],
+      default: () => defProps.card.index
+    },
+    // 用于隔开上下左右的边距，带单位的写法，如："30px 30px"，"20px 20px 30px 30px"
+    margin: {
+      type: String,
+      default: () => defProps.card.margin
+    },
+    // card卡片的圆角
+    borderRadius: {
+      type: [Number, String],
+      default: () => defProps.card.borderRadius
+    },
+    // 头部自定义样式，对象形式
+    headStyle: {
+      type: Object,
+      default: () => defProps.card.headStyle
+    },
+    // 主体自定义样式，对象形式
+    bodyStyle: {
+      type: Object,
+      default: () => defProps.card.bodyStyle
+    },
+    // 底部自定义样式，对象形式
+    footStyle: {
+      type: Object,
+      default: () => defProps.card.footStyle
+    },
+    // 头部是否下边框
+    headBorderBottom: {
+      type: Boolean,
+      default: () => defProps.card.headBorderBottom
+    },
+    // 底部是否有上边框
+    footBorderTop: {
+      type: Boolean,
+      default: () => defProps.card.footBorderTop
+    },
+    // 标题左边的缩略图
+    thumb: {
+      type: String,
+      default: () => defProps.card.thumb
+    },
+    // 缩略图宽高
+    thumbWidth: {
+      type: [String, Number],
+      default: () => defProps.card.thumbWidth
+    },
+    // 缩略图是否为圆形
+    thumbCircle: {
+      type: Boolean,
+      default: () => defProps.card.thumbCircle
+    },
+    // 给head，body，foot的内边距
+    padding: {
+      type: [String, Number],
+      default: () => defProps.card.padding
+    },
+    paddingHead: {
+      type: [String, Number],
+      default: () => defProps.card.paddingHead
+    },
+    paddingBody: {
+      type: [String, Number],
+      default: () => defProps.card.paddingBody
+    },
+    paddingFoot: {
+      type: [String, Number],
+      default: () => defProps.card.paddingFoot
+    },
+    // 是否显示头部
+    showHead: {
+      type: Boolean,
+      default: () => defProps.card.showHead
+    },
+    // 是否显示尾部
+    showFoot: {
+      type: Boolean,
+      default: () => defProps.card.showFoot
+    },
+    // 卡片外围阴影，字符串形式
+    boxShadow: {
+      type: String,
+      default: () => defProps.card.boxShadow
+    }
+  }
+});

package/uview-plus/components/u-card/style.css

@@ -0,0 +1,60 @@
+/* #ifndef APP-NVUE */
+.u-empty,
+.u-empty__wrap,
+.u-tabs,
+.u-tabs__wrapper,
+.u-tabs__wrapper__scroll-view-wrapper,
+.u-tabs__wrapper__scroll-view,
+.u-tabs__wrapper__nav,
+.u-tabs__wrapper__nav__line,
+.up-empty,
+.up-empty__wrap,
+.up-tabs,
+.up-tabs__wrapper,
+.up-tabs__wrapper__scroll-view-wrapper,
+.up-tabs__wrapper__scroll-view,
+.up-tabs__wrapper__nav,
+.up-tabs__wrapper__nav__line {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  flex-grow: 0;
+  flex-basis: auto;
+  align-items: stretch;
+  align-content: flex-start;
+}
+/* #endif */
+.u-card {
+  position: relative;
+  overflow: hidden;
+  font-size: 28rpx;
+  background-color: #ffffff;
+  box-sizing: border-box;
+}
+.u-card-full {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+  width: 100%;
+}
+.u-card--border:after {
+  border-radius: 16rpx;
+}
+.u-card__head--left {
+  color: var(--u-main-color);
+}
+.u-card__head--left__thumb {
+  margin-right: 16rpx;
+}
+.u-card__head--left__title {
+  max-width: 400rpx;
+}
+.u-card__head--right {
+  color: var(--u-tips-color);
+  margin-left: 6rpx;
+}
+.u-card__body {
+  color: var(--u-content-color);
+}
+.u-card__foot {
+  color: var(--u-tips-color);
+}

package/uview-plus/components/u-card/style.scss

@@ -0,0 +1,47 @@
+@import '../../libs/css/components.scss';
+
+.u-card {
+  position: relative;
+  overflow: hidden;
+  font-size: 28rpx;
+  background-color: #ffffff;
+  box-sizing: border-box;
+
+  &-full {
+    // 如果是与屏幕之间不留空隙，应该设置左右边距为0
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    width: 100%;
+  }
+
+  &--border:after {
+    border-radius: 16rpx;
+  }
+
+  &__head {
+    &--left {
+      color: $u-main-color;
+
+      &__thumb {
+        margin-right: 16rpx;
+      }
+
+      &__title {
+        max-width: 400rpx;
+      }
+    }
+
+    &--right {
+      color: $u-tips-color;
+      margin-left: 6rpx;
+    }
+  }
+
+  &__body {
+    color: $u-content-color;
+  }
+
+  &__foot {
+    color: $u-tips-color;
+  }
+}