oxy-uni-ui 1.2.0 → 2.0.0

package/components/oxy-verification-code/oxy-verification-code.vue

@@ -0,0 +1,187 @@
+<template>
+  <view :class="`oxy-verification-code ${customClass}`" :style="customStyle">
+    <!-- #ifdef MP-WEIXIN -->
+    <canvas :style="canvasStyle" :id="canvasId" :canvas-id="canvasId" type="2d" @tap="drawTap"></canvas>
+    <!-- #endif -->
+    <!-- #ifndef MP-WEIXIN -->
+    <canvas :width="canvasWidth" :height="canvasHeight" :style="canvasStyle" :id="canvasId" :canvas-id="canvasId" @tap="drawTap"></canvas>
+    <!-- #endif -->
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-verification-code',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import { computed, getCurrentInstance, ref, watch, onMounted } from 'vue'
+import { objToStyle, unitConvert, unitConvertWithDefault, uuid } from '../common/util'
+import { verificationCodeProps } from './types'
+// #ifdef MP-WEIXIN
+import { canvas2dAdapter } from '../common/canvasHelper'
+// #endif
+
+const props = defineProps(verificationCodeProps)
+const { proxy } = getCurrentInstance() as any
+
+const emit = defineEmits(['refresh'])
+
+const pixelRatio = ref<number>(1) // 像素比
+const canvasId = ref<string>(`oxy-verification-code${uuid()}`)
+let ctx: UniApp.CanvasContext | null = null
+const identifyCode = ref('')
+const numberList = ref([1, 2, 3, 4, 5, 6, 7, 8, 9])
+const letterList = ref(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'])
+const canvasWidth = computed(() => unitConvertWithDefault(props.width, { defaultUnit: 'rpx' }))
+const canvasHeight = computed(() => unitConvertWithDefault(props.height, { defaultUnit: 'rpx' }))
+
+const canvasStyle = computed(() => {
+  const style = {
+    width: unitConvert(canvasWidth.value, 0, { output: 'px' }),
+    height: unitConvert(canvasHeight.value, 0, { output: 'px' })
+  }
+  return `${objToStyle(style)}`
+})
+
+watch(
+  () => props.securityCode,
+  (val) => {
+    if (val) drawPic()
+  },
+  { immediate: true }
+)
+
+function verification(code: string) {
+  if (props.isCaseCheck) {
+    return identifyCode.value == code
+  } else {
+    return identifyCode.value.toLowerCase() == code.toLowerCase()
+  }
+}
+
+function getCode() {
+  return identifyCode.value
+}
+
+function randomNum(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min) + min)
+}
+
+function getcheckCode() {
+  let code = ''
+  const codeLength = props.codeLength
+  const random =
+    props.codeType === 'number' ? numberList.value : props.codeType === 'letter' ? letterList.value : [...numberList.value, ...letterList.value]
+  for (let i = 0; i < codeLength; i++) {
+    let index = Math.floor(Math.random() * random.length)
+    code += random[index]
+  }
+  identifyCode.value = code
+}
+
+function drawTap() {
+  if (props.securityCode) {
+    emit('refresh')
+  } else {
+    drawPic()
+  }
+}
+
+function getContext() {
+  return new Promise<UniApp.CanvasContext>((resolve) => {
+    if (ctx) {
+      return resolve(ctx)
+    }
+    // #ifndef MP-WEIXIN
+    ctx = uni.createCanvasContext(canvasId.value, proxy)
+    resolve(ctx)
+    // #endif
+    // #ifdef MP-WEIXIN
+    uni
+      .createSelectorQuery()
+      .in(proxy)
+      .select(`#${canvasId.value}`)
+      .node((res) => {
+        if (res && res.node) {
+          const canvas = res.node
+          ctx = canvas2dAdapter(canvas.getContext('2d') as CanvasRenderingContext2D)
+          canvas.width = canvasWidth.value * pixelRatio.value
+          canvas.height = canvasHeight.value * pixelRatio.value
+          ctx.scale(pixelRatio.value, pixelRatio.value)
+          resolve(ctx)
+        }
+      })
+      .exec()
+    // #endif
+  })
+}
+
+function drawPic() {
+  if (props.securityCode) {
+    identifyCode.value = props.securityCode
+  } else {
+    getcheckCode()
+  }
+  getContext().then((context) => {
+    context.setTextBaseline('bottom')
+    context.setFillStyle(props.backgroundColor)
+    context.fillRect(0, 0, canvasWidth.value, canvasHeight.value)
+    for (let i = 0; i < identifyCode.value.length; i++) {
+      drawText(context, identifyCode.value[i], i)
+    }
+    drawLine(context)
+    context.draw()
+  })
+}
+
+function drawText(context: any, txt: string, i: number) {
+  let a = Math.floor(Math.random() * props.colors.length)
+  context.setFillStyle(props.colors[a])
+
+  let fontSize = Math.trunc(canvasWidth.value / identifyCode.value.length)
+  context.setFontSize(randomNum(fontSize, fontSize))
+  let x = i * (canvasWidth.value / (identifyCode.value.length + 1)) + Math.trunc(fontSize / 2)
+  let y = randomNum(fontSize, canvasHeight.value - 5)
+  var deg = randomNum(-10, 10)
+
+  context.translate(x, y)
+  context.rotate((deg * Math.PI) / 180)
+  context.fillText(txt, 0, 0)
+
+  context.rotate((-deg * Math.PI) / 180)
+  context.translate(-x, -y)
+}
+
+function drawLine(context: any) {
+  for (let i = 0; i < props.lineLength; i++) {
+    let a = Math.floor(Math.random() * props.lineColors.length)
+    context.setStrokeStyle(props.lineColors[a])
+    context.beginPath()
+    let startX = randomNum(0, canvasWidth.value)
+    let startY = randomNum(0, canvasHeight.value)
+    let endX = randomNum(0, canvasWidth.value)
+    let endY = randomNum(0, canvasHeight.value)
+    context.moveTo(startX, startY)
+    context.lineTo(endX, endY)
+    context.stroke()
+  }
+}
+
+onMounted(() => {
+  drawPic()
+})
+
+defineExpose({
+  getCode,
+  verification
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-verification-code/types.ts

@@ -0,0 +1,82 @@
+import type { PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
+
+export type VerificationCodeType = '' | 'number' | 'letter'
+
+export const verificationCodeProps = {
+  ...baseProps,
+
+  /**
+   * 验证码值，如果是通过接口调用的验证码需要在这里传入，不传入则自动生成验证
+   * 类型: string
+   * 默认值: ''
+   */
+  securityCode: makeStringProp(''),
+
+  /**
+   * 是否校验字母大小写
+   * 类型: boolean
+   * 默认值: true
+   */
+  isCaseCheck: makeBooleanProp(true),
+
+  /**
+   * 验证码类型
+   * 类型: string
+   * 默认值: ''
+   */
+  codeType: makeStringProp<VerificationCodeType>(''),
+
+  /**
+   * 自动生成验证码数量
+   * 类型: number
+   * 默认值: 4
+   */
+  codeLength: makeNumberProp(4),
+
+  /**
+   * 画板宽度，支持 number / string（如 `240rpx`、`120px`），number 与纯数字字符串按 rpx 处理
+   * 类型: number | string
+   * 默认值: 240
+   */
+  width: makeNumericProp(240),
+
+  /**
+   * 画板高度，支持 number / string（如 `120rpx`、`60px`），number 与纯数字字符串按 rpx 处理
+   * 类型: number | string
+   * 默认值: 120
+   */
+  height: makeNumericProp(120),
+
+  /**
+   * 干扰线数量
+   * 类型: number
+   * 默认值: 8
+   */
+  lineLength: makeNumberProp(8),
+
+  /**
+   * 画板背景色
+   * 类型: string
+   * 默认值: 'rgba(238, 226, 224, 1)'
+   */
+  backgroundColor: makeStringProp('rgba(238, 226, 224, 1)'),
+
+  /**
+   * 干扰线可选颜色组（颜色会随机选择这些颜色，需要固定颜色传一种颜色即可）
+   * 类型: array
+   */
+  lineColors: {
+    type: Array as PropType<string[]>,
+    default: () => ['rgba(238, 0, 0, 0.5)', 'rgba(0, 170, 255, 0.5)', 'rgba(0, 170, 0, 0.5)', 'rgba(0, 0, 0, 0.5)', 'rgba(153, 146, 255, 0.5)']
+  },
+
+  /**
+   * 文字可选颜色组（颜色会随机选择这些颜色，需要固定颜色传一种颜色即可）
+   * 类型: array
+   */
+  colors: {
+    type: Array as PropType<string[]>,
+    default: () => ['rgba(238, 0, 0, 1)', 'rgba(0, 170, 255, 1)', 'rgba(0, 170, 0, 1)', 'rgba(0, 0, 0, 1)', 'rgba(153, 146, 255, 1)']
+  }
+}

package/components/oxy-video-preview/index.scss

@@ -16,16 +16,16 @@
 
   @include e(video) {
     width: 100%;
-    height: 242px;
+    height: 484rpx;
     transition: all 0.3s ease;
   }
 
   @include edeep(close) {
     position: absolute;
     box-sizing: border-box;
-    top: 0px;
-    right: 0px;
-    padding: 12px;
+    top: 0;
+    right: 0;
+    padding: 24rpx;
     text-align: center;
     cursor: pointer;
     font-size: $-video-preview-close-font-size;

package/components/oxy-virtual-scroll/index.scss

@@ -20,10 +20,10 @@
 
   @include e(back-top) {
     position: absolute;
-    right: 20px;
-    bottom: 20px;
-    width: 40px;
-    height: 40px;
+    right: 40rpx;
+    bottom: 40rpx;
+    width: 80rpx;
+    height: 80rpx;
     background: rgba(0, 0, 0, 0.6);
     border-radius: 50%;
     display: flex;

package/components/oxy-virtual-scroll/oxy-virtual-scroll.vue

@@ -7,10 +7,10 @@
       class="oxy-virtual-scroll__view"
       :scroll-y="scrollY"
       :scroll-x="scrollX"
-      :upper-threshold="upperThreshold"
-      :lower-threshold="lowerThreshold"
+      :upper-threshold="upperThresholdInPx"
+      :lower-threshold="lowerThresholdInPx"
       :scroll-top="scrollTop"
-      :scroll-left="scrollLeft"
+      :scroll-left="scrollLeftInPx"
       :scroll-with-animation="scrollWithAnimation"
       :enable-back-to-top="enableBackToTop"
       :show-scrollbar="showScrollbar"
@@ -25,8 +25,8 @@
       @scrolltoupper="onScrollUpper"
       @scrolltolower="onScrollLower"
     >
-      <view class="oxy-virtual-scroll__container" :style="{ height: totalHeight + 'px' }">
-        <view class="oxy-virtual-scroll__items" :style="{ transform: `translateY(${virtualOffsetY}px)` }">
+      <view class="oxy-virtual-scroll__container" :style="{ height: unitConvert(totalHeight, 0, { output: 'px' }) }">
+        <view class="oxy-virtual-scroll__items" :style="{ transform: `translateY(${unitConvert(virtualOffsetY, 0, { output: 'px' })})` }">
           <view v-for="(item, index) in virtualData" :key="index">
             <slot name="item" :item="item" :index="startIndex + index"></slot>
           </view>
@@ -41,7 +41,7 @@
 
     <!-- 回到顶部按钮 -->
     <view v-if="showBackToTop && showBackTopBtn" class="oxy-virtual-scroll__back-top" @click="scrollToTop">
-      <oxy-icon name="backtop" color="#fff" size="20px"></oxy-icon>
+      <oxy-icon name="backtop" color="#fff" size="40rpx"></oxy-icon>
     </view>
   </view>
 </template>
@@ -58,13 +58,17 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { toRefs } from 'vue'
+import { computed, toRefs } from 'vue'
 import type { ScrollViewOnScrollEvent, ScrollViewOnScrolltolowerEvent, ScrollViewOnScrolltoupperEvent } from '@uni-helper/uni-app-types'
 import { virtualScrollProps, type VirtualScrollExpose } from './types'
 import { useVirtualScroll } from '../composables/useVirtualScroll'
+import { unitConvert, unitConvertWithDefault } from '../common/util'
 
 const props = defineProps(virtualScrollProps)
 const emit = defineEmits(['scroll', 'scroll-to-upper', 'scroll-to-lower'])
+const upperThresholdInPx = computed(() => unitConvertWithDefault(props.upperThreshold, { defaultUnit: 'rpx' }))
+const lowerThresholdInPx = computed(() => unitConvertWithDefault(props.lowerThreshold, { defaultUnit: 'rpx' }))
+const scrollLeftInPx = computed(() => unitConvertWithDefault(props.scrollLeft, { defaultUnit: 'rpx' }))
 
 // 解构props用于组合式函数
 const { data, virtual, height, itemHeight, idKey, showBackToTop, backToTopThreshold } = toRefs(props)

package/components/oxy-virtual-scroll/types.ts

@@ -30,16 +30,16 @@ export const virtualScrollProps = {
   showBackToTop: makeBooleanProp(false),
   /**
    * 滚动多远显示backToTop
-   * 类型：number
-   * 默认值：'300px'
+   * 类型：string（支持 `px/rpx`，纯数字字符串按 rpx 处理）
+   * 默认值：'600rpx'
    */
-  backToTopThreshold: makeStringProp('300px'),
+  backToTopThreshold: makeStringProp('600rpx'),
   /**
-   * 单个项目高度
-   * 类型：number
-   * 默认值：'44px'
+   * 列表项的预估高度，需带单位
+   * @description 虚拟列表会根据此值计算占位高度，越准确滚动越平滑。支持如 '44px' 或 '88rpx'，纯数字字符串按 rpx 处理。
+   * 默认值：'88rpx'
    */
-  itemHeight: makeStringProp('44px'),
+  itemHeight: makeStringProp('88rpx'),
   /**
    * 是否开启水平滚动
    * 类型：boolean
@@ -53,19 +53,19 @@ export const virtualScrollProps = {
    */
   scrollY: makeBooleanProp(true),
   /**
-   * 距顶部/左边多远时（单位px），触发 scrolltoupper 事件
+   * 距顶部/左边多远时触发 scrolltoupper 事件，支持 `px/rpx`，number 与纯数字字符串按 rpx 处理
    * 类型：number | string
-   * 默认值：50
+   * 默认值：100
    */
-  upperThreshold: makeNumericProp(50),
+  upperThreshold: makeNumericProp(100),
   /**
-   * 距底部/右边多远时（单位px），触发 scrolltolower 事件
+   * 距底部/右边多远时触发 scrolltolower 事件，支持 `px/rpx`，number 与纯数字字符串按 rpx 处理
    * 类型：number | string
-   * 默认值：50
+   * 默认值：100
    */
-  lowerThreshold: makeNumericProp(50),
+  lowerThreshold: makeNumericProp(100),
   /**
-   * 设置横向滚动条位置
+   * 设置横向滚动条位置，支持 `px/rpx`，number 与纯数字字符串按 rpx 处理
    * 类型：number | string
    * 默认值：0
    */