@10yun/cv-mobile-ui 0.5.29 → 0.5.31

package/ui-fireui/fui-image-group/fui-image-group.vue

@@ -0,0 +1,149 @@
+<template>
+  <view class="fui-image-container" :class="{ 'fui-image-direction': direction == 'column' }">
+    <view
+      v-for="(item, index) in imageList"
+      :key="index"
+      class="fui-image-item_box"
+      :style="{
+        width: width,
+        height: height,
+        borderRadius: radius,
+        marginLeft: direction == 'column' ? 0 : (index && distance) + 'rpx',
+        marginTop: direction == 'row' ? 0 : (index && distance) + 'rpx'
+      }"
+      @tap="bindClick(index, item.id)"
+    >
+      <image
+        class="fui-image-item"
+        :mode="mode"
+        :lazy-load="lazyLoad"
+        fade-show="fadeShow"
+        :webp="webp"
+        :show-menu-by-longpress="longpress"
+        @error="error"
+        @load="load"
+        :style="{ width: width, height: height, borderRadius: radius, borderWidth: borderWidth, borderColor: borderColor }"
+        :src="item.src"
+      ></image>
+      <slot />
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'fuiImageGroup',
+  props: {
+    //图片集合
+    /*
+		  [{id:1,src:"1.png"}]
+		*/
+    imageList: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    //图片宽度
+    width: {
+      type: String,
+      default: '120rpx'
+    },
+    //图片高度
+    height: {
+      type: String,
+      default: '120rpx'
+    },
+    //图片边框宽度 rpx
+    borderWidth: {
+      type: String,
+      default: '0'
+    },
+    //图片边框颜色 可传rgba
+    borderColor: {
+      type: String,
+      default: '#fff'
+    },
+    //图片圆角
+    radius: {
+      type: String,
+      default: '50%'
+    },
+    //图片裁剪、缩放的模式
+    mode: {
+      type: String,
+      default: 'scaleToFill'
+    },
+    //图片懒加载。只针对page与scroll-view下的image有效
+    lazyLoad: {
+      type: Boolean,
+      default: true
+    },
+    //图片显示动画效果 | 仅App-nvue 2.3.4+ Android有效
+    fadeShow: {
+      type: Boolean,
+      default: true
+    },
+    //默认不解析 webP 格式，只支持网络资源 | 微信小程序2.9.0
+    webp: {
+      type: Boolean,
+      default: false
+    },
+    //开启长按图片显示识别小程序码菜单 | 微信小程序2.7.0
+    longpress: {
+      type: Boolean,
+      default: false
+    },
+    //是否组合排列
+    isGroup: {
+      type: Boolean,
+      default: false
+    },
+    //排列方向 row ，column
+    direction: {
+      type: String,
+      default: 'row'
+    },
+    //偏移距离 rpx
+    distance: {
+      type: [Number, String],
+      default: -16
+    }
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    error(e) {
+      this.$emit('errorEvent', e);
+    },
+    load(e) {
+      this.$emit('loaded', e);
+    },
+    bindClick(index, id) {
+      this.$emit('click', {
+        index: index,
+        id: id || ''
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.fui-image-container {
+  display: inline-flex;
+  align-items: center;
+}
+.fui-image-direction {
+  flex-direction: column;
+}
+.fui-image-item_box {
+  position: relative;
+}
+.fui-image-item {
+  border-style: solid;
+  flex-shrink: 0;
+  display: block;
+}
+</style>

package/ui-fireui/fui-keyboard/fui-keyboard.vue

@@ -0,0 +1,254 @@
+<template>
+  <view>
+    <view class="fui-keyboard-mask" :class="[show ? 'fui-mask-show' : '']" v-if="mask" @tap="handleClose"></view>
+    <view
+      class="fui-keyboard"
+      :class="{ 'fui-keyboard-radius': radius, 'fui-keyboard-action': action, 'fui-keyboard-show': show }"
+    >
+      <slot></slot>
+      <view class="fui-keyboard-grids">
+        <!--{{(index==9 || index==10 || index==11)?'fui-grid-bottom':''}}-->
+        <view
+          class="fui-keyboard-grid"
+          :class="{ 'fui-bg-gray': index == 9 || index == 11 }"
+          v-for="(item, index) in itemList"
+          :key="index"
+          hover-class="fui-keyboard-hover"
+          :hover-stay-time="150"
+          @tap="handleClick"
+          :data-index="index"
+        >
+          <view v-if="index < 11" class="fui-keyboard-item" :class="{ 'fui-fontsize-32': index == 9 }">
+            {{ getKeyBoard(index, action) }}
+          </view>
+          <view v-else class="fui-keyboard-item">
+            <view class="fui-icon fui-keyboard-delete"></view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'fuiKeyboard',
+  props: {
+    //是否需要mask
+    mask: {
+      type: Boolean,
+      default: true
+    },
+    //控制键盘显示
+    show: {
+      type: Boolean,
+      default: false
+    },
+    //是否直接显示，不需要动画，一般使用在锁屏密码
+    action: {
+      type: Boolean,
+      default: true
+    },
+    //是否带圆角
+    radius: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      itemList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+    };
+  },
+  methods: {
+    getKeyBoard(index, action) {
+      var content = index + 1;
+      if (index == 9) {
+        content = action ? '取消' : '清除';
+      } else if (index == 10) {
+        content = 0;
+      }
+      return content;
+    },
+    //关闭
+    handleClose() {
+      if (!this.show) {
+        return;
+      }
+      this.$emit('close', {});
+    },
+    handleClick(e) {
+      if (!this.show) {
+        return;
+      }
+      const dataset = e.currentTarget.dataset;
+      this.$emit('click', {
+        index: Number(dataset.index)
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+@font-face {
+  font-family: 'keyboardFont';
+  src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAASgAA0AAAAABugAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAEhAAAABoAAAAch/nJvUdERUYAAARkAAAAHgAAAB4AKQAKT1MvMgAAAZwAAABDAAAAVj4mSapjbWFwAAAB8AAAAD4AAAFCAA/rY2dhc3AAAARcAAAACAAAAAj//wADZ2x5ZgAAAjwAAACsAAAA0BLVU2FoZWFkAAABMAAAAC0AAAA2FXPmsWhoZWEAAAFgAAAAHAAAACQH3gOFaG10eAAAAeAAAAAOAAAAEAwAAABsb2NhAAACMAAAAAoAAAAKAGgAAG1heHAAAAF8AAAAHwAAACABEQBLbmFtZQAAAugAAAFJAAACiCnmEVVwb3N0AAAENAAAACgAAAA6nLlLs3jaY2BkYGAAYukqK754fpuvDNwsDCBwU+tiFBKtwMLA9ABIczAwgUQB4ccH+gAAAHjaY2BkYGBu+N/AEMPCAAJAkpEBFbAAAEcKAm142mNgZGBgYGGwZ2BmAAEmIOYCQgaG/2A+AwAPIgFdAHjaY2BkYWCcwMDKwMDUyXSGgYGhH0IzvmYwYuQAijKwMjNgBQFprikMDs93PN/B3PC/gSGGuYGhASjMCJIDAPenDU0AeNpjYYAAFigGAACAAA0AAHjaY2BgYGaAYBkGRgYQsAHyGMF8FgYFIM0ChED+8x3//0NICW+oSgZGNgYYk4GRCUgwMaACRoZhDwAItAhZAAAAAAAAAAAAAABoAAB42l3MTQqCUBSG4fNpqBxECS/+YFTXRGcFKteZjW0nuoqWVtOgPbgKZ1cqaBDN3snzkklE+xUZEwUkqSOCzGx4EGGEsJYd2vURgQdbomhayC0iu8h8lEVmiR1sS4TVGVFYqeaEVjXmVT8TsWjf83yYIjFq1QM9I0/1c9HMMI06zfHgmMeRY8HDwOKnjSlYZvdQ5u4yB+gVbqrX97cAOxsHn9GF/9G3iV4WbSWBeNp9kD1OAzEQhZ/zByQSQiCoXVEA2vyUKRMp9Ailo0g23pBo1155nUg5AS0VB6DlGByAGyDRcgpelkmTImvt6PObmeexAZzjGwr/3yXuhBWO8ShcwREy4Sr1F+Ea+V24jhY+hRvUf4SbuFUD4RYu1BsdVO2Eu5vSbcsKZxgIV3CKJ+Eq9ZVwjfwqXMcVPoQb1L+EmxjjV7iFa2WpDOFhMEFgnEFjig3jAjEcLJIyBtahOfRmEsxMTzd6ETubOBso71dilwMeaDnngCntPbdmvkon/mDLgdSYbh4FS7YpjS4idCgbXyyc1d2oc7D9nu22tNi/a4E1x+xRDWzU/D3bM9JIbAyvkJI18jK3pBJTj2hrrPG7ZynW814IiU68y/SIx5o0dTr3bmniwOLn8owcfbS5kj33qBw+Y1kIeb/dTsQgil2GP5PYcRkAAAB42mNgYoAALjDJyIAOWMCiTIxM/FmZiXkFiXnxxRmJeckZpQA1nQZRAAAAAf//AAIAAQAAAAwAAAAWAAAAAgABAAMAAwABAAQAAAACAAAAAHjaY2BgYGQAgqtL1DlA9E2ti1EwGgA9dwYGAAA=)
+    format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.fui-icon {
+  font-family: 'keyboardFont' !important;
+  font-size: 22px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 1;
+  color: #333;
+}
+
+.fui-keyboard-delete:before {
+  content: '\e7b8';
+}
+
+.fui-keyboard-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  z-index: 998;
+  transition: all 0.3s ease-in-out;
+  opacity: 0;
+  visibility: hidden;
+}
+
+.fui-mask-show {
+  opacity: 1;
+  visibility: visible;
+}
+
+.fui-keyboard {
+  width: 100%;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+  padding-bottom: env(safe-area-inset-bottom);
+  background-color: #fff;
+}
+
+.fui-keyboard-radius {
+  border-top-left-radius: 16rpx;
+  border-top-right-radius: 16rpx;
+  overflow: hidden;
+}
+
+.fui-keyboard-action {
+  visibility: hidden;
+  transform: translate3d(0, 100%, 0);
+  transform-origin: center;
+  transition: all 0.3s ease-in-out;
+}
+
+.fui-keyboard-show {
+  transform: translate3d(0, 0, 0);
+  visibility: visible;
+}
+
+.fui-bg-gray {
+  background-color: #e7e6eb !important;
+}
+
+.fui-keyboard-grids {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  display: -webkit-flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.fui-keyboard-grids::after {
+  content: ' ';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 1px;
+  border-top: 1px solid #eaeef1;
+  -webkit-transform-origin: 0 0;
+  transform-origin: 0 0;
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5);
+}
+
+.fui-keyboard-grid {
+  position: relative;
+  padding: 24rpx 20rpx;
+  box-sizing: border-box;
+  background-color: #fff;
+  width: 33.33333333%;
+}
+
+.fui-keyboard-grid:nth-of-type(3n)::before {
+  width: 0;
+  border-right: 0;
+}
+
+.fui-keyboard-grid::before {
+  content: ' ';
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 1px;
+  bottom: 0;
+  border-right: 1px solid #eaeef1;
+  -webkit-transform-origin: 100% 0;
+  transform-origin: 100% 0;
+  -webkit-transform: scaleX(0.5);
+  transform: scaleX(0.5);
+}
+
+.fui-keyboard-grid::after {
+  content: ' ';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  height: 1px;
+  border-bottom: 1px solid #eaeef1;
+  -webkit-transform-origin: 0 100%;
+  transform-origin: 0 100%;
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5);
+}
+
+.fui-grid-bottom::after {
+  height: 0 !important;
+  border-bottom: 0 !important;
+}
+
+.fui-keyboard-hover {
+  background-color: #f7f7f9 !important;
+}
+
+.fui-keyboard-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 48rpx;
+  height: 60rpx;
+  color: #000;
+}
+
+.fui-fontsize-32 {
+  font-size: 32rpx;
+  color: #333 !important;
+}
+</style>

package/ui-fireui/fui-keyboard-input/fui-keyboard-input.vue

@@ -0,0 +1,78 @@
+<template>
+  <view class="fui-keyboard-input fui-pwd-box" :style="{ backgroundColor: backgroundColor }">
+    <view class="fui-inner-box">
+      <view
+        class="fui-input"
+        :class="[inputvalue.length === 4 ? 'fui-margin-right' : '']"
+        :style="{ fontSize: size + 'rpx', color: color, width: (inputvalue.length === 4 ? 90 : 70) + 'rpx' }"
+        v-for="(item, index) in inputvalue"
+        :key="index"
+      >
+        {{ item }}
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'fuiKeyboardInput',
+  props: {
+    //背景颜色
+    backgroundColor: {
+      type: String,
+      default: '#fff'
+    },
+    size: {
+      type: Number,
+      default: 32
+    },
+    color: {
+      type: String,
+      default: '#333'
+    },
+    //输入框的值：数组格式，长度即为输入框个数
+    inputvalue: {
+      type: Array,
+      default: ['', '', '', '', '', ''] //密码圆点 ●
+    }
+  },
+  data() {
+    return {};
+  }
+};
+</script>
+
+<style scoped>
+.fui-pwd-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  vertical-align: top;
+}
+
+.fui-inner-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fui-input {
+  height: 80rpx;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 20rpx;
+  border-bottom: 2px solid #666;
+}
+
+.fui-margin-right {
+  margin-right: 30rpx;
+}
+
+.fui-input:last-child {
+  margin-right: 0 !important;
+}
+</style>

package/ui-fireui/fui-list-cell/fui-list-cell.vue

@@ -0,0 +1,178 @@
+<template>
+  <view
+    class="fui-list-class fui-list-cell"
+    :class="[
+      arrow ? 'fui-cell-arrow' : '',
+      arrow && arrowRight ? '' : 'fui-arrow-right',
+      unlined ? 'fui-cell-unlined' : '',
+      lineLeft ? 'fui-line-left' : '',
+      lineRight ? 'fui-line-right' : '',
+      arrow && arrowColor ? 'fui-arrow-' + arrowColor : '',
+      radius ? 'fui-radius' : ''
+    ]"
+    :hover-class="hover ? 'fui-cell-hover' : ''"
+    :style="{ backgroundColor: backgroundColor, fontSize: size + 'rpx', color: color, padding: padding }"
+    :hover-stay-time="150"
+    @tap="handleClick"
+  >
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'fuiListCell',
+  props: {
+    //是否有箭头
+    arrow: {
+      type: Boolean,
+      default: false
+    },
+    //箭头颜色 传值： white，gray,warning,danger
+    arrowColor: {
+      type: String,
+      default: ''
+    },
+    //是否有点击效果
+    hover: {
+      type: Boolean,
+      default: true
+    },
+    //隐藏线条
+    unlined: {
+      type: Boolean,
+      default: false
+    },
+    //线条是否有左偏移距离
+    lineLeft: {
+      type: Boolean,
+      default: true
+    },
+    //线条是否有右偏移距离
+    lineRight: {
+      type: Boolean,
+      default: false
+    },
+    padding: {
+      type: String,
+      default: '26rpx 30rpx'
+    },
+    //背景颜色
+    backgroundColor: {
+      type: String,
+      default: '#fff'
+    },
+    //字体大小
+    size: {
+      type: Number,
+      default: 28
+    },
+    //字体颜色
+    color: {
+      type: String,
+      default: '#333'
+    },
+    //是否加圆角
+    radius: {
+      type: Boolean,
+      default: false
+    },
+    //箭头是否有偏移距离
+    arrowRight: {
+      type: Boolean,
+      default: true
+    },
+    index: {
+      type: Number,
+      default: 0
+    }
+  },
+  methods: {
+    handleClick() {
+      this.$emit('click', {
+        index: this.index
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.fui-list-cell {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.fui-radius {
+  border-radius: 6rpx;
+  overflow: hidden;
+}
+
+.fui-cell-hover {
+  background-color: #f1f1f1 !important;
+}
+
+.fui-list-cell::after {
+  content: '';
+  position: absolute;
+  border-bottom: 1px solid #eaeef1;
+  -webkit-transform: scaleY(0.5) translateZ(0);
+  transform: scaleY(0.5) translateZ(0);
+  transform-origin: 0 100%;
+  bottom: 0;
+  right: 0;
+  left: 0;
+}
+
+.fui-line-left::after {
+  left: 30rpx !important;
+}
+
+.fui-line-right::after {
+  right: 30rpx !important;
+}
+
+.fui-cell-unlined::after {
+  border-bottom: 0 !important;
+}
+
+.fui-cell-arrow::before {
+  content: ' ';
+  height: 10px;
+  width: 10px;
+  border-width: 2px 2px 0 0;
+  border-color: #c0c0c0;
+  border-style: solid;
+  -webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
+  transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
+  position: absolute;
+  top: 50%;
+  margin-top: -6px;
+  right: 30rpx;
+}
+
+.fui-arrow-right::before {
+  right: 0 !important;
+}
+
+.fui-arrow-gray::before {
+  border-color: #666666 !important;
+}
+
+.fui-arrow-white::before {
+  border-color: #ffffff !important;
+}
+
+.fui-arrow-warning::before {
+  border-color: #ff7900 !important;
+}
+
+.fui-arrow-success::before {
+  border-color: #19be6b !important;
+}
+
+.fui-arrow-danger::before {
+  border-color: #eb0909 !important;
+}
+</style>