@uxda/appkit 4.3.6 → 4.3.8

package/src/shared/components/AppVerify.vue

@@ -1,137 +1,128 @@
-<template>
-  <div class="app-verify column">
-    <h2>{{ title || '手机号验证' }}</h2>
-    <p class="caption">{{ message || '短信将发送至账号绑定手机号' }}</p>
-    <p class="number">{{ phone }}</p>
-    <ns-form v-model="formData" class="form">
-      <ns-input class="form-input" name="code" v-model="formData.code" placeholder="请输入验证码" maxlength="6"
-        variant="solid" :rules="['required', {
-          name: 'function',
-          message: '输入错误, 请重新输入',
-          method: (value: string) => value.length === 6,
-        }]">
-      </ns-input>
-      <div class="form-btn">
-        <ns-button v-if="!sent" size="xs" variant="plain" color="primary" v-track-click="'手机号验证-获取验证码'" @click="send" label="获取验证码" />
-        <div class="caption" v-if="sent">{{ countdown }}s后重新发送</div>
-      </div>
-    </ns-form>
-    <div class="row buttons">
-      <ns-button class="cancel-btn" v-track-click="'手机号验证-取消'" :r="20" @click="emits('cancel')">取消</ns-button>
-      <ns-button color="primary" v-track-click="'手机号验证-确认'" :r="20" @click="onOk">确认</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;
-  onSend?: Function;
-}
-
-const emits = defineEmits(['complete', 'cancel']);
-
-const sent = ref(false),
-  countdown = ref(60);
-
-let formData = reactive({
-  code: '',
-});
-
-const send = () => {
-  sent.value = true;
-
-  props.onSend && props.onSend();
-
-  countdown.value = 60;
-  let timer = setInterval(() => {
-    countdown.value--;
-    if (countdown.value <= 0) {
-      clearInterval(timer);
-      sent.value = false;
-    }
-  }, 1000);
-};
-
-const onOk = () => {
-  emits('complete', { code: formData.code });
-};
-
-const props = defineProps<AppVerifyProps>();
-</script>
-
-<style lang="scss">
-.app-verify {
-  padding: 10px 30px 20px;
-
-  h2 {
-    font-size: 16px;
-    font-weight: bold;
-  }
-
-  .caption {
-    font-size: 14px !important;
-    color: #666;
-    margin-bottom: 5px;
-  }
-
-  .number {
-    line-height: 21px;
-  }
-
-  .form .nut-cell-group__wrap {
-    display: flex;
-    align-items: center;
-    margin: 20px 0 !important;
-
-    .form-input {
-      height: 36px;
-      line-height: 36px;
-      border: none;
-      background: #f5f5f5;
-      border-radius: 5px;
-      flex: 1;
-      padding-left: 12px;
-      .input-text {
-        text-align: left !important;
-      }
-    }
-
-    .form-btn {
-      margin-left: 12px;
-      width: 90px;
-
-      .caption {
-        font-size: 10px !important;
-        color: #ccc;
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  .buttons {
-    width: 100%;
-    justify-content: space-between;
-    margin-top: 10px;
-
-    .ns-button {
-      width: 104px;
-      border-radius: 30px;
-      --radius: 30px;
-    }
-
-    .cancel-btn {
-      border: 1px solid #969696 !important;
-    }
-  }
-
-  .nut-input {
-    background: transparent !important;
-  }
-}
-</style>
+<template>
+  <div class="app-verify column">
+    <h2>{{ title || '手机号验证' }}</h2>
+    <p class="caption">{{ message || '短信将发送至账号绑定手机号' }}</p>
+    <p class="number">{{ phone }}</p>
+    <ns-form v-model="formData" class="form">
+      <ns-input class="form-input" name="code" v-model="formData.code" placeholder="请输入验证码" maxlength="6"
+        variant="solid" :rules="['required', {
+          name: 'function',
+          message: '输入错误, 请重新输入',
+          method: (value: string) => value.length === 6,
+        }]">
+      </ns-input>
+      <div class="form-btn">
+        <ns-button v-if="!sent" size="xs" variant="plain" color="primary" v-track-click="'手机号验证-获取验证码'" @click="send" label="获取验证码" />
+        <div class="caption" v-if="sent">{{ countdown }}s后重新发送</div>
+      </div>
+    </ns-form>
+    <div class="row buttons">
+      <ns-button class="cancel-btn" v-track-click="'手机号验证-取消'" @click="emits('cancel')">取消</ns-button>
+      <ns-button color="primary" v-track-click="'手机号验证-确认'" @click="onOk">确认</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;
+  onSend?: Function;
+}
+
+const emits = defineEmits(['complete', 'cancel']);
+
+const sent = ref(false),
+  countdown = ref(60);
+
+let formData = reactive({
+  code: '',
+});
+
+const send = () => {
+  sent.value = true;
+
+  props.onSend && props.onSend();
+
+  countdown.value = 60;
+  let timer = setInterval(() => {
+    countdown.value--;
+    if (countdown.value <= 0) {
+      clearInterval(timer);
+      sent.value = false;
+    }
+  }, 1000);
+};
+
+const onOk = () => {
+  emits('complete', { code: formData.code });
+};
+
+const props = defineProps<AppVerifyProps>();
+</script>
+
+<style lang="scss">
+.app-verify {
+  padding: 10px 30px 20px;
+
+  h2 {
+    font-size: 16px;
+    font-weight: bold;
+  }
+
+  .caption {
+    font-size: 13px !important;
+    color: #ccc;
+    line-height: 21px;
+  }
+
+  .number {
+    line-height: 21px;
+  }
+
+  .form .nut-cell-group__wrap {
+    display: flex;
+    align-items: center;
+    margin: 20px 0 !important;
+
+    .form-input {
+      height: 36px;
+      line-height: 36px;
+      border: none;
+      background: #f5f5f5;
+      border-radius: 5px;
+      flex: 1;
+      padding-left: 12px;
+    }
+
+    .form-btn {
+      margin-left: 12px;
+      width: 105px;
+    }
+  }
+
+  .buttons {
+    width: 100%;
+    justify-content: space-between;
+    margin-top: 10px;
+
+    .ns-button {
+      width: 104px;
+      border-radius: 30px;
+      --radius: 30px;
+    }
+
+    .cancel-btn {
+      border: 1px solid #969696 !important;
+    }
+  }
+
+  .nut-input {
+    background: transparent !important;
+  }
+}
+</style>

package/src/shared/components/DeviceVersion.vue

@@ -1,78 +1,78 @@
-<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, { getSystemInfoSync } from '@tarojs/taro'
-import { useHttp } from '../../balance/api'
-import debounce from 'lodash-es/debounce'
-
-const props = withDefaults(
-  defineProps<{
-    versions?: string
-  }>(),
-  {
-    versions: '{}',
-  }
-)
-
-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 (props?.versions !== '{}') {
-    recommendVersions.value = JSON.parse(props.versions)
-
-    return
-  }
-
-  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 = 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, { getSystemInfoSync } from '@tarojs/taro'
+import { useHttp } from '../../balance/api'
+import debounce from 'lodash-es/debounce'
+
+const props = withDefaults(
+  defineProps<{
+    versions?: string
+  }>(),
+  {
+    versions: '{}',
+  }
+)
+
+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 (props?.versions !== '{}') {
+    recommendVersions.value = JSON.parse(props.versions)
+
+    return
+  }
+
+  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 = 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>