@uxda/appkit 1.1.2 → 1.2.2

package/src/components/dd-area/index.vue

@@ -0,0 +1,220 @@
+<!--* NAME: index-->
+<!--* AUTHOR: yanglong-->
+<!--* UPDATE: 2022-02-21 17:43-->
+<!--* TIP: 微信原生实现多列选择器-->
+<script setup lang="ts">
+import {computed, ref, watch} from 'vue'
+import Taro from '@tarojs/taro'
+import DdIcon from '../dd-icon/index.vue'
+
+interface AreaItem {
+  value: string
+  shortId: string
+  label: string
+  children: AreaItem[]
+}
+
+export type AreaType = 'province' | 'city' | 'region'
+
+export interface PropsType {
+  value?: string // 地址code
+  rightIcon?: boolean
+  placeholder?: string
+  disabled?: boolean
+  type?: AreaType
+  formatter?: (values: AreaItem[]) => string
+}
+
+const props = withDefaults(defineProps<PropsType>(), {
+  value: '',
+  rightIcon: true,
+  placeholder: '请选择',
+  disabled: false,
+  type: 'region',
+  formatter: (values: AreaItem[]) => values.map((item:AreaItem) => item.label).join('')
+})
+const emit = defineEmits(['update:value', 'change', 'cancel'])
+
+const areaFormatOptions = computed<AreaItem[]>(() => {
+  const {province_list, city_list, county_list} = JSON.parse(Taro.getStorageSync('wechat_area'))
+  const map = new Map()
+  city_list.forEach((item: any) => {
+    const provinceShortId = item.id.slice(0, 2)
+    if (!map.has(provinceShortId)) {
+      map.set(provinceShortId, [])
+    }
+    map.get(provinceShortId).push({
+      ...item,
+      shortId: item.id.slice(0, 4)
+    })
+  })
+  county_list.forEach((item: any) => {
+    const cityShortId = item.id.slice(0, 4)
+    if (!map.has(cityShortId)) {
+      map.set(cityShortId, [])
+    }
+    map.get(cityShortId).push({
+      ...item,
+      shortId: item.id
+    })
+  })
+  return province_list.map((province: any) => {
+    const provinceShortId = province.id.slice(0, 2)
+    return {
+      value: province.id,
+      shortId: provinceShortId,
+      label: province.name,
+      children: map.get(provinceShortId)?.map((city: any) => ({
+        value: city.id,
+        shortId: city.shortId,
+        label: city.name,
+        children: map.get(city.shortId)?.map((region: any) => ({
+          value: region.id,
+          shortId: region.shortId,
+          label: region.name,
+          children: []
+        })) ?? [],
+      })) ?? [],
+    }
+  })
+})
+
+const tmpSelectedIndex = ref<number[]>([0, 0, 0])
+const selectedIndex = ref<number[]>([0, 0, 0])
+const selectedItem = ref<AreaItem[]>([])
+
+const options = computed<AreaItem[][]>(() => {
+  const provinceOption = areaFormatOptions.value
+  if (props.type === 'province') {
+    return [provinceOption]
+  }
+  const cityOption = provinceOption[tmpSelectedIndex.value[0]].children
+  if (props.type === 'city') {
+    return [provinceOption, cityOption]
+  }
+  const regionOption = cityOption[tmpSelectedIndex.value[1]].children
+  return [provinceOption, cityOption, regionOption]
+})
+
+function init() {
+  selectedIndex.value = findIndexByValue()
+  tmpSelectedIndex.value = [...selectedIndex.value]
+  if (props.value){
+    const items = []
+    for (let index = 0; index < options.value.length; index++) {
+      const item = options.value[index][selectedIndex.value[index]]
+      if (item){
+        items.push(item)
+      }
+    }
+    selectedItem.value = items
+  }
+}
+
+function findIndexByValue() {
+  if (props.value) {
+    const provinceId = props.value.slice(0, 2).toString().padEnd(6, '0')
+    const cityId = props.value.slice(0, 4).toString().padEnd(6, '0')
+    const regionId = props.value.toString()
+    for (let provinceIndex = 0; provinceIndex < areaFormatOptions.value.length; provinceIndex++) {
+      const province = areaFormatOptions.value[provinceIndex]
+      if (provinceId == province.value) {
+        for (let cityIndex = 0; cityIndex < province.children.length; cityIndex++) {
+          const city = province.children[cityIndex]
+          if (cityId == city.value) {
+            for (let regionIndex = 0; regionIndex < city.children.length; regionIndex++) {
+              const region = city.children[regionIndex]
+              if (regionId == region.value) {
+                return [provinceIndex, cityIndex, regionIndex]
+              }
+            }
+            return [provinceIndex, cityIndex, 0]
+          }
+        }
+        return [provinceIndex, 0, 0]
+      }
+    }
+  }
+  return [0, 0, 0]
+}
+
+function onChange() {
+  const lastSelectedIndex = options.value.length - 1
+  const result = {
+    values: [],
+    labels: []
+  }
+  for (let index = 0; index <= lastSelectedIndex; index++) {
+   const item = options.value[index][tmpSelectedIndex.value[index]]
+    result.values.push(item.value)
+    result.labels.push(item.label)
+  }
+  emit('update:value', result.values[result.values.length-1])
+  emit('change', result)
+  console.log(result)
+}
+
+function onCancel(e: any) {
+  init()
+  emit('cancel', e)
+}
+
+function onColumnChange({detail: {column, value}}) {
+  const resetIndex = Array.from({length: tmpSelectedIndex.value.length - column - 1, }).fill(0)
+  tmpSelectedIndex.value = [...tmpSelectedIndex.value.slice(0,column), value, ...resetIndex ]
+  console.log(tmpSelectedIndex.value)
+}
+
+watch(
+    () => props.value,
+    () => { init() },
+    {deep: true, immediate: true}
+)
+</script>
+
+<template>
+  <picker
+      :range="options"
+      range-key="label"
+      :value="tmpSelectedIndex"
+      mode="multiSelector"
+      @columnchange="onColumnChange"
+      @change="onChange"
+      @cancel="onCancel"
+      style="flex: 1"
+      :disabled="props.disabled">
+    <div class="dd-area">
+      <div
+          :class="props.value && !props.disabled ? 'dd-area-value' : 'dd-area-label'">
+        {{ props.value ? props.formatter(selectedItem) : props.placeholder }}
+      </div>
+      <slot name="icon">
+        <DdIcon
+            v-if="props.rightIcon"
+            name="icon-arrow"
+            size="11px"
+            :color="
+              props.value !== '' && !props.disabled ? '#353535' : '#DFDFDF'
+            "
+            class="icon-arrow"/>
+      </slot>
+    </div>
+  </picker>
+</template>
+
+<style lang="scss">
+.dd-area {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+
+  &-value {
+    text-align: right;
+    color: black;
+  }
+
+  &-label {
+    color: var(--placeholder-color);
+  }
+}
+</style>

package/src/components/dd-icon/doc.md

@@ -0,0 +1,21 @@
+# ddIcon 空内容展示
+### 使用iconfont图标
+
+#
+## 使用
+
+``` javascript
+import ddIcon from '~/components/ddIcon/index.vue'
+```
+``` html
+<dd-icon name="icon-arrow" size="11px" color="#DFDFDF" />
+```
+
+## Prop
+
+| 字段       | 说明        | 类型    | 默认值   |
+|-----------|-------------|---------|----------|
+| name      |  icon名称  | string  | ''    |
+| color    |  icon颜色  | string  |  inherit  |
+| size   |  icon字体大小  | string  |  16px  |
+| weight  |  icon字体字重  | string  |  normal  |

package/src/components/dd-icon/index.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+const props = withDefaults(
+  defineProps<{
+    name: string
+    color?: string
+    size?: string
+    weight?: string
+  }>(),
+  {
+    color: 'inherit',
+    size: '16px',
+    weight: 'normal',
+  }
+)
+const styles = computed(() => {
+  return `color: ${props.color}; font-size: ${props.size}; font-weight: ${props.weight};`
+})
+</script>
+
+<template>
+  <view class="iconfont" :class="name" :style="styles"></view>
+</template>

package/src/components/dd-selector/index.vue

@@ -0,0 +1,124 @@
+<!--* NAME: index-->
+<!--* AUTHOR: yanglong-->
+<!--* UPDATE: 2022-02-23 09:33-->
+<!--* TIP: 微信原生实现单列选择器-->
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import DdIcon from '../dd-icon/index.vue'
+
+interface Option {
+  label?: string
+  value?: string
+}
+interface PropsType {
+  value?: string
+  options?: Option[]
+  placeholder?: string
+  rightIcon?: boolean
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<PropsType>(), {
+  value: '',
+  options: () => [],
+  placeholder: '请选择',
+  rightIcon: true,
+  disabled: false,
+})
+
+const currentIndex = ref<number>()
+const currentLabel = ref<string>()
+
+const emit = defineEmits(['update:value','change', 'cancel'])
+function onChange(e) {
+  const index = e.detail.value as number
+  const item = props.options[index]
+  if (item === void 0) return
+  currentIndex.value = index
+  currentLabel.value = item.label
+  emit('update:value', item.value)
+  emit('change', item)
+}
+
+// 通过value查询item index
+function findIndexByValue(value: string) {
+  if (value == undefined) return undefined
+  const index = props.options.findIndex((item: Option)=> item.value == value)
+  return index >= 0 ? index : undefined
+}
+
+function onCancel(e) {
+  emit('cancel', e)
+}
+
+watch(
+  () => props,
+  () => {
+    init()
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+)
+
+function init() {
+  currentIndex.value = findIndexByValue(props.value)
+  currentLabel.value = currentIndex.value >= 0 ?  props.options[currentIndex.value]?.label : ''
+}
+</script>
+
+<template>
+  <picker
+    mode="selector"
+    :range="props.options"
+    range-key="label"
+    :value="currentIndex"
+    @cancel="onCancel"
+    @change="onChange"
+    style="flex: 1"
+    :disabled="props.disabled">
+    <slot name="content">
+      <div class="dd-selector">
+        <div class="dd-selector-value">
+          <div
+            :class="
+              currentIndex >= 0 && !props.disabled
+                ? 'dd-selector-value'
+                : 'dd-selector-label'
+            ">
+            {{ currentLabel ||  props.placeholder }}
+          </div>
+          <div>
+            <slot name="tips"></slot>
+          </div>
+        </div>
+        <slot name="icon">
+          <DdIcon
+            v-if="props.rightIcon"
+            name="icon-arrow"
+            size="11px"
+            :color="
+              currentIndex >= 0 && !props.disabled ? '#353535' : '#DFDFDF'
+            "
+            class="icon-arrow" />
+        </slot>
+      </div>
+    </slot>
+  </picker>
+</template>
+
+<style lang="scss">
+.dd-selector {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  &-value {
+    text-align: right;
+    color: black;
+  }
+  &-label {
+    color: var(--placeholder-color);
+  }
+}
+</style>

package/src/components/ocr-id/index.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import Taro from '@tarojs/taro'
+import { OcrResultType } from './types'
+import { useAppKitOptions } from '../../Appkit'
+
+const emits = defineEmits(['ocr'])
+
+const appKitOptions = useAppKitOptions()
+
+// 压缩图片
+async function taroImgCompress(src: string, quality = 80) {
+  return new Promise((resolve, reject) => {
+    Taro.compressImage({
+      src: src,
+      quality: quality,
+      success: (res) => {
+        resolve(res)
+      },
+      fail: (res) => {
+        reject(res)
+      },
+    })
+  })
+}
+
+// 压缩质量
+function getCompressQuality(size: number) {
+  let quality = 100
+  const curSize = size / (1024 * 1024)
+  if (curSize > 6) {
+    quality = quality - ((curSize - 6) / curSize) * 100
+  }
+  return quality
+}
+
+// 清除字符串内空格
+function allTrim(str: string) {
+  return str.replace(/\s+/g, '')
+}
+
+// 拍照识别
+async function ocrIDCard() {
+  let ocrResult: OcrResultType = null
+  try {
+    const csRes = await Taro.chooseImage({
+      count: 1,
+    })
+    let {path, size} = csRes.tempFiles[0]
+    const compressImg: any = (await taroImgCompress(path, getCompressQuality(size)))
+    const filePath = compressImg?.tempFilePath ?? path
+    Taro.showLoading({title: '身份证识别中..',})
+    const session = appKitOptions.token()
+    const baseUrl = appKitOptions.baseUrl()
+    const upRes: any = await Taro.uploadFile({
+      url: baseUrl + '/hkapprove/ocr/idcard',
+      filePath,
+      name: 'file',
+      formData: {
+        objectNo: `min${Date.now()}`,
+        side: 'face',
+      },
+      header: {
+        sessionKey: session || '',
+        token: session || '',
+      },
+    })
+    Taro.hideLoading()
+    const res = JSON.parse(upRes.data)
+    if (res.code === '200') {
+      ocrResult = {
+        faceInfo: {
+          name: allTrim(res.result?.faceInfo?.name || ''),
+          certNo: allTrim(res.result?.faceInfo?.num || ''),
+          address: allTrim(res.result?.faceInfo?.address || ''),
+        },
+        fileUploadVO: res.result?.fileUploadVO || {},
+      }
+      if (!ocrResult.faceInfo.name && !ocrResult.faceInfo.certNo) {
+        Taro.showToast({title: '识别失败，请重试', icon: 'none'})
+      }
+    } else {
+      Taro.showToast({
+        title: res.msg,
+        icon: 'error',
+      })
+    }
+  } catch (err) {
+    Taro.hideLoading()
+    console.log(err)
+  }
+  emits('ocr', ocrResult)
+}
+</script>
+
+<template>
+  <div class="ocr-id" @click="ocrIDCard">
+    <slot name="icon">
+      <img class="ocr-id__img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgZmlsbD0ibm9uZSI+PHBhdGggb3BhY2l0eT0iLjAxIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTQwIDB2NDBIMFYwaDQweiIgZmlsbD0iI0M0QzRDNCIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzMuMDQ0IDE3LjM2M2MuOTYgMCAxLjczOS0uNzkgMS43MzktMS43NjYgMC0uOTc1LS43NzktMS43NjYtMS43NC0xLjc2Ni0uOTYgMC0xLjczOC43OS0xLjczOCAxLjc2NnMuNzc4IDEuNzY2IDEuNzM5IDEuNzY2eiIgZmlsbD0iIzRCQ0I5MyIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAzMS44MTJWMTQuNzg4YzAtMi4yNTggMi4wNDktNC4wOTcgNC41NjQtNC4wOTdoMy44NDRsMS4xMzYtMy42NThDOS44ODggNS45MTMgMTEuMjM3IDUgMTIuNTQ4IDVIMjcuNDVjMS4zOSAwIDIuNjguODc2IDMuMDEgMi4wNDRsMS4xMzMgMy42NDdoMy44NDRjMi41MTUgMCA0LjU2NCAxLjgzOSA0LjU2NCA0LjA5N3YxLjczOWMwIC41MDMtLjQ1NC45MS0xLjAxNC45MXMtMS4wMTQtLjQwNy0xLjAxNC0uOTF2LTEuNzRjMC0xLjI1My0xLjEzOS0yLjI3NS0yLjUzNi0yLjI3NWgtMy44NDRjLS45MDcgMC0xLjcxMS0uNTQ5LTEuOTU1LTEuMzMybC0xLjEzNi0zLjY2YS4zNDIuMzQyIDAgMCAwLS4wMDctLjAyNWMtLjExLS4zOTYtLjYzOS0uNjc0LTEuMDQ1LS42NzRoLTE0LjljLS4zOTkgMC0uOTUuMzY2LTEuMDUzLjY5OWwtMS4xMzYgMy42NmMtLjI0Ny43ODYtMS4wNDUgMS4zMy0xLjk1NSAxLjMzMkg0LjU2NGMtMS4zOTcgMC0yLjUzNiAxLjAyMi0yLjUzNiAyLjI3NnYxNy4wMjRjMCAxLjI1NCAxLjEzOSAyLjI3NiAyLjUzNiAyLjI3NmgzMC44N2MxLjM5NyAwIDIuNTM1LTEuMDIyIDIuNTM1LTIuMjc2VjIxLjU5NmMwLS41MDMuNDU0LS45MSAxLjAxNC0uOTFzMS4wMTUuNDA3IDEuMDE1LjkxVjMxLjgxYy0uMDAzIDIuMjYtMi4wNSA0LjEtNC41NjcgNC4xSDQuNTY0QzIuMDQ5IDM1LjkxIDAgMzQuMDcgMCAzMS44MTF6IiBmaWxsPSIjNEJDQjkzIi8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMi4xNzQgMjEuNzc4YzAtNC44NyAzLjcwNS04LjgzIDguMjYtOC44MyA0LjU1NiAwIDguMjYyIDMuOTYgOC4yNjIgOC44M3MtMy43MDYgOC44MzItOC4yNjEgOC44MzJjLTQuNTU2IDAtOC4yNjEtMy45NjItOC4yNjEtOC44MzJ6bTEuNzc5LjEzYzAgMy43OTYgMi45MDcgNi44ODMgNi40ODIgNi44ODMgMy41NzQgMCA2LjQ4MS0zLjA4NyA2LjQ4MS02Ljg4M3MtMi45MDctNi44ODMtNi40ODItNi44ODNjLTMuNTc0IDAtNi40ODEgMy4wODctNi40ODEgNi44ODN6IiBmaWxsPSIjNEJDQjkzIi8+PC9zdmc+"/>
+    </slot>
+  </div>
+</template>
+
+<style lang="scss">
+.ocr-id {
+
+  &__img {
+    width: 20px;
+    height: 20px;
+  }
+}
+</style>

package/src/components/ocr-id/types.d.ts

@@ -0,0 +1,13 @@
+export type OcrResultType = {
+  faceInfo: {
+    name: string
+    certNo: string
+    address: string
+  }
+  fileUploadVO: {
+    fileKey: string
+    fileUrl: string
+    objectNo: string
+    thumbnailUrl?: string
+  }
+} | null

package/src/index.ts

@@ -9,6 +9,10 @@ import {
   Popup,
   OverLay,
   DatePicker,
+  Form,
+  FormItem,
+  Cell,
+  CellGroup
 } from '@nutui/nutui-taro'
 import { type AppKitOptions, useAppKitOptions, DollarApp } from './Appkit'
 import { PaymentParams, RechargeParams } from './payment/types'
@@ -22,6 +26,10 @@ const nutComponents = [
   Popup,
   OverLay,
   DatePicker,
+  Form,
+  FormItem,
+  Cell,
+  CellGroup
 ]
 
 const appComponents = {
@@ -75,6 +83,7 @@ export default AppKit
 export * from './payment'
 export * from './balance'
 export * from './shared'
+export * from './register'
 export {
   type AppKitOptions
 }