@uxda/appkit 4.0.3 → 4.0.12

package/src/register/components/index.ts

@@ -1,3 +1,3 @@
-import SelfRegistration from './SelfRegistration.vue'
-
+import SelfRegistration from './SelfRegistration.vue'
+
 export { SelfRegistration }

package/src/shared/components/AppDrawer.vue

@@ -1,59 +1,59 @@
-<template>
-  <nut-popup
-    :pop-class="`app-drawer ${modelValue ? 'open' : ''}`"
-    position="right"
-    :visible="modelValue"
-    @update:visible="onVisibleChange">
-    <page-header
-      :title="title"
-      @close="onPageHeaderClose" />
-      <div class="drawer-body">
-        <slot></slot>
-      </div>
-  </nut-popup>
-</template>
-
-<script lang="ts" setup>
-// 右侧页面
-// 模仿页面打开
-// 假的标题栏和返回按钮
-import PageHeader from './PageHeader.vue'
-
-export interface AppDrawerProps {
-  modelValue: boolean,
-  title?: string,
-}
-
-const emit = defineEmits<{
-  (event: 'update:modelValue', value: boolean): void
-}>()
-
-const onVisibleChange = (value: boolean) => {
-  emit('update:modelValue', value)
-}
-
-defineProps<AppDrawerProps>()
-
-const onPageHeaderClose = () => {
-  emit('update:modelValue', false)
-}
-</script>
-
-<style lang="scss">
-.app-drawer {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  &.open {
-    height: 100vh;
-  }
-  .page-header {
-    flex-grow: 0;
-    background-color: #fff;
-  }
-  .drawer-body {
-    flex-grow: 1;
-    overflow: scroll;
-  }
-}
+<template>
+  <nut-popup
+    :pop-class="`app-drawer ${modelValue ? 'open' : ''}`"
+    position="right"
+    :visible="modelValue"
+    @update:visible="onVisibleChange">
+    <page-header
+      :title="title"
+      @close="onPageHeaderClose" />
+      <div class="drawer-body">
+        <slot></slot>
+      </div>
+  </nut-popup>
+</template>
+
+<script lang="ts" setup>
+// 右侧页面
+// 模仿页面打开
+// 假的标题栏和返回按钮
+import PageHeader from './PageHeader.vue'
+
+export interface AppDrawerProps {
+  modelValue: boolean,
+  title?: string,
+}
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: boolean): void
+}>()
+
+const onVisibleChange = (value: boolean) => {
+  emit('update:modelValue', value)
+}
+
+defineProps<AppDrawerProps>()
+
+const onPageHeaderClose = () => {
+  emit('update:modelValue', false)
+}
+</script>
+
+<style lang="scss">
+.app-drawer {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  &.open {
+    height: 100vh;
+  }
+  .page-header {
+    flex-grow: 0;
+    background-color: #fff;
+  }
+  .drawer-body {
+    flex-grow: 1;
+    overflow: scroll;
+  }
+}
 </style>

package/src/shared/components/AppVerify.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="app-verify column">
+    <h2>{{ title || '手机号验证' }}</h2>
+    <p class="caption">{{ message || '短信将发送至账号绑定手机号' }}</p>
+    <p class="number">{{ phone }}</p>
+    <ns-form v-model="formData">
+      <ns-input name="code" placeholder="请输入验证码" variant="solid" :rules="['required', {
+        name: 'function',
+        message: '输入错误, 请重新输入',
+        method: (value: string) => value.length === 4,
+      }]">
+        <template #append>
+          <ns-button v-if="!sent" size="xs" variant="plain" color="primary" @click="send" label="获取验证码" />
+          <div class="caption" v-if="sent">{{ countdown }} 秒收重新发送</div>
+        </template>
+      </ns-input>
+    </ns-form>
+    <div class="row buttons">
+      <ns-button round>取消</ns-button>
+      <ns-button round gradient="#FFEBC1,#FFD7A7,#FFB875/90">确认</ns-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { NsForm, NsInput, NsButton } from '@uxda/nutshell/taro'
+import { reactive, ref } from 'vue'
+
+export interface AppVerifyProps {
+  phone: string,
+  title?: string,
+  message?: string,
+}
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: boolean): void
+}>()
+
+const sent = ref(false),
+  countdown = ref(60)
+
+let formData = reactive({
+  code: ''
+})
+
+const send = () => {
+  sent.value = true
+  countdown.value = 60
+  let timer = setInterval(() => {
+    countdown.value --
+    if (countdown.value <= 0) {
+      clearInterval(timer)
+      sent.value = false
+    }
+  }, 1000)
+}
+
+const onVisibleChange = (value: boolean) => {
+  emit('update:modelValue', value)
+}
+
+defineProps<AppVerifyProps>()
+
+</script>
+
+<style lang="scss">
+.app-verify {
+  padding: var(--ns-spacing);
+  h2 {
+    font-size: 16px;
+    font-weight: bold;
+    margin: 10px;
+  }
+  .caption {
+    font-size: 14px;
+    color: #666;
+  }
+  .buttons {
+    .ns-button {
+      width: 104px;
+    }
+  }
+}
+</style>

package/src/shared/components/DeviceVersion.vue

@@ -1,68 +1,68 @@
-<template>
-  <DdNoticeBar
-    v-if="showAlert"
-    showClose
-    :style="topStype"
-    @close="showAlert = !showAlert"
-    text="您当前使用的微信客户端版本较低，可能不支持全部功能或体验效果可能不佳，建议至应用商店或App Store升级至最新版本。"
-  />
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
-import DdNoticeBar from '../../components/dd-notice-bar/index.vue'
-import { useSafeArea } from '../composables'
-import Taro from '@tarojs/taro'
-import { useHttp } from '../../balance/api'
-import debounce from 'lodash/debounce'
-
-const showAlert = ref(false)
-const safeArea = useSafeArea()
-
-const topStype = computed(() => {
-  return `top: ${safeArea.nav + safeArea.status}px;`
-})
-
-const recommendVersions = ref()
-// 获取系统配置 - 小程序推荐版本
-const getPropertieByCode = debounce(async () => {
-  if (recommendVersions.value) return
-
-  const $http = useHttp()
-  $http
-    .get('/cas/properties/getPropertie', {
-      code: 'pcRecommendVersion',
-    })
-    .then((res: any) => {
-      recommendVersions.value = JSON.parse(res.value || '{}')
-    })
-}, 100)
-
-onMounted(async () => {
-  await getPropertieByCode()
-
-  const systemInfo = Taro.getSystemInfoSync()
-  const version = systemInfo.SDKVersion
-
-  // 版本号比较函数
-  function compareVersion(v1, v2) {
-    const v1Arr = v1.split('.').map(Number)
-    const v2Arr = v2.split('.').map(Number)
-
-    for (let i = 0; i < v1Arr.length || i < v2Arr.length; i++) {
-      if ((v1Arr[i] || 0) > (v2Arr[i] || 0)) {
-        return true
-      } else if ((v1Arr[i] || 0) < (v2Arr[i] || 0)) {
-        return false
-      }
-    }
-    return false
-  }
-
-  if (!compareVersion(version, (recommendVersions.value || {}).Mini || '2.24.0')) {
-    showAlert.value = true
-  }
-})
-</script>
-
-<style lang="less"></style>
+<template>
+  <DdNoticeBar
+    v-if="showAlert"
+    showClose
+    :style="topStype"
+    @close="showAlert = !showAlert"
+    text="您当前使用的微信客户端版本较低，可能不支持全部功能或体验效果可能不佳，建议至应用商店或App Store升级至最新版本。"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import DdNoticeBar from '../../components/dd-notice-bar/index.vue'
+import { useSafeArea } from '../composables'
+import Taro from '@tarojs/taro'
+import { useHttp } from '../../balance/api'
+import debounce from 'lodash/debounce'
+
+const showAlert = ref(false)
+const safeArea = useSafeArea()
+
+const topStype = computed(() => {
+  return `top: ${safeArea.nav + safeArea.status}px;`
+})
+
+const recommendVersions = ref()
+// 获取系统配置 - 小程序推荐版本
+const getPropertieByCode = debounce(async () => {
+  if (recommendVersions.value) return
+
+  const $http = useHttp()
+  $http
+    .get('/cas/properties/getPropertie', {
+      code: 'pcRecommendVersion',
+    })
+    .then((res: any) => {
+      recommendVersions.value = JSON.parse(res.value || '{}')
+    })
+}, 100)
+
+onMounted(async () => {
+  await getPropertieByCode()
+
+  const systemInfo = Taro.getSystemInfoSync()
+  const version = systemInfo.SDKVersion
+
+  // 版本号比较函数
+  function compareVersion(v1, v2) {
+    const v1Arr = v1.split('.').map(Number)
+    const v2Arr = v2.split('.').map(Number)
+
+    for (let i = 0; i < v1Arr.length || i < v2Arr.length; i++) {
+      if ((v1Arr[i] || 0) > (v2Arr[i] || 0)) {
+        return true
+      } else if ((v1Arr[i] || 0) < (v2Arr[i] || 0)) {
+        return false
+      }
+    }
+    return false
+  }
+
+  if (!compareVersion(version, (recommendVersions.value || {}).Mini || '2.24.0')) {
+    showAlert.value = true
+  }
+})
+</script>
+
+<style lang="less"></style>

package/src/shared/components/EmptyView.vue

@@ -1,34 +1,34 @@
-<template>
-  <div class="empty-view">
-    <img
-      class="empty-view-image"
-      src="https://cdn.ddjf.com/static/images/nutshell/empty-data.png" />
-    <div class="empty-view-text">暂无数据</div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-</script>
-
-<style lang="scss">
-.empty-view {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  margin-top: 80px;
-  &-image {
-    display: block;
-    font-size: 0;
-    width: 144px;
-    height: 80px;
-    filter: grayscale(1);
-  }
-  &-text {
-    opacity: 0.4;
-    color: #353535;
-    font-size: 12px;
-    line-height: 28px;
-  }
-}
+<template>
+  <div class="empty-view">
+    <img
+      class="empty-view-image"
+      src="https://cdn.ddjf.com/static/images/nutshell/empty-data.png" />
+    <div class="empty-view-text">暂无数据</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style lang="scss">
+.empty-view {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-top: 80px;
+  &-image {
+    display: block;
+    font-size: 0;
+    width: 144px;
+    height: 80px;
+    filter: grayscale(1);
+  }
+  &-text {
+    opacity: 0.4;
+    color: #353535;
+    font-size: 12px;
+    line-height: 28px;
+  }
+}
 </style>

package/src/shared/components/OcrIcon.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="ocr-icon" @click="onIconClick">
+    <ns-icon name="https://simple.shensi.tech/icons/ocr.svg"  />
+</div>
+</template>
+
+<script lang="ts" setup>
+import Taro from '@tarojs/taro'
+import { NsIcon } from '@uxda/nutshell/taro'
+import { useAppKitOptions } from '../../Appkit'
+
+const appKitOptions = useAppKitOptions()
+
+const emits = defineEmits(['complete'])
+
+export type OcrResult = {
+  name: string
+  number: string
+  address: string
+}
+
+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 onIconClick() {
+  console.log('===onIconClick')
+  let result: OcrResult | null = 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') {
+      const faceInfo = res.result.faceInfo || {},
+        file = res.result.fileUploadVO
+      result = {
+        name: allTrim(faceInfo.name || ''),
+        number: allTrim(faceInfo.num || ''),
+        address: allTrim(faceInfo.address || ''),
+        // file: {
+        //   key: file.fileKey,
+        //   url: file.fileUrl,
+        //   object: file.objectNo,
+        //   thumb: file.thumbnailUrl
+        // }
+      }
+      console.log('===识别', result)
+      if (!result.name && !result.number) {
+        Taro.showToast({ title: '识别失败，请重试', icon: 'none' })
+      }
+    } else {
+      Taro.showToast({
+        title: res.msg,
+        icon: 'error',
+      })
+    }
+  } catch (err) {
+    Taro.hideLoading()
+    console.log(err)
+  }
+  emits('complete', result)
+}
+</script>
+
+<style lang="scss">
+.ocr-icon {
+  width: 24px;
+  height: 24px;
+  .ns-icon {
+    width: 24px;
+    height: 24px;
+  }
+}
+</style>