@uxda/appkit 1.2.75 → 1.2.76

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxda/appkit",
-  "version": "1.2.75",
+  "version": "1.2.76",
   "description": "小程序应用开发包",
   "main": "dist/index.js",
   "module": "dist/index.ts",

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

@@ -0,0 +1,19 @@
+# ddSkeleton 骨架屏
+
+#
+## 使用
+
+``` javascript
+import ddSkeleton from '~/components/ddSkeleton/index.vue'
+```
+``` html
+<dd-skeleton @onSuccess="onSuccess" />
+```
+
+## Prop
+
+| 字段       | 说明        | 类型    | 默认值   |
+|-----------|-------------|---------|----------|
+| row       | 大骨架个数     | number  | 3    |
+| shortRow   | 短骨架的行数    | string  | 2     |
+| longRow    | 长骨架的行数    | string  | 3     |

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

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface PropType {
+  row?: number
+  shortRow?: string
+  longRow?: string
+}
+
+withDefaults(defineProps<PropType>(), {
+  row: 3,
+  shortRow: '2',
+  longRow: '4',
+})
+</script>
+
+<template>
+  <div class="dd-skeleton">
+    <div class="dd-skeleton__item" v-for="(item, key) in row" :key="key">
+      <nut-skeleton
+        width="40%"
+        height="15px"
+        animated
+        v-if="Number(shortRow) > 0"
+        :row="shortRow"
+      ></nut-skeleton>
+      <nut-skeleton width="100%" height="15px" title animated :row="longRow"></nut-skeleton>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.dd-skeleton {
+  &__item {
+    margin-top: 10px;
+  }
+}
+</style>

package/src/shared/composables/useDragBox.ts

@@ -16,6 +16,8 @@ export function useDragBox() {
     screenHeight: 0, // 屏幕高度
     isDrag: false, // 是否开始拖拽
     oldLeft: 0,
+    limitHorizontal: [0, 0], // 横向拖动限制范围
+    limitVertical: [0, 0], // 纵向拖动限制范围
   })
 
   // 初始化元素拖拽模型
@@ -32,6 +34,13 @@ export function useDragBox() {
     dragData.left = data.left * scale || 0
     dragData.top = data.top * scale || 0
     dragData.oldLeft = data.left * scale || 0
+
+    if (data?.limitHorizontal?.length) {
+      dragData.limitHorizontal = data?.limitHorizontal
+    }
+    if (data?.limitVertical?.length) {
+      dragData.limitVertical = data?.limitVertical
+    }
   }
 
   // 触屏开始
@@ -50,16 +59,16 @@ export function useDragBox() {
     let top = dragData.top + moveY
 
     // 防止浮动按钮移出屏幕
-    if (left < 0) {
-      left = 0
-    } else if (left > dragData.screenWidth - dragData.width) {
-      left = dragData.screenWidth - dragData.width
+    if (left < dragData.limitHorizontal[0]) {
+      left = dragData.limitHorizontal[0]
+    } else if (left > dragData.screenWidth - dragData.width - dragData.limitHorizontal[1]) {
+      left = dragData.screenWidth - dragData.width - dragData.limitHorizontal[1]
     }
 
-    if (top < 0) {
-      top = 0
-    } else if (top > dragData.screenHeight - dragData.height) {
-      top = dragData.screenHeight - dragData.height
+    if (top < dragData.limitVertical[0]) {
+      top = dragData.limitVertical[0]
+    } else if (top > dragData.screenHeight - dragData.height - dragData.limitVertical[1]) {
+      top = dragData.screenHeight - dragData.height - dragData.limitVertical[1]
     }
 
     dragData.left = left

package/src/user/api/index.ts

@@ -32,12 +32,13 @@ const vendor = {
 
 function useHttp() {
   const appkitOptions = useAppKitOptions()
-  const headers = {
+  const headers: any = {
     Token: appkitOptions.tempToken() || appkitOptions.token(),
     Appcode: appkitOptions.app(),
     cookie: `tid=${appkitOptions.tenant()}`,
     gray: appkitOptions.gray ? appkitOptions.gray() : '0',
   }
+
   /**
    * 传入配置获取 Http instanse
    */

package/src/user/components/LoginSetting.vue

@@ -92,13 +92,13 @@ const emits = defineEmits(['show'])
   top: 10px;
   bottom: 10px;
   align-items: center;
-  justify-content: center;
   width: calc(100% - 24px);
   background: #ffffff;
   border-radius: 5px;
   display: flex;
   flex-direction: column;
   &-img {
+    margin-top: 50%;
     height: 111px;
     width: 198px;
   }
@@ -108,6 +108,7 @@ const emits = defineEmits(['show'])
     opacity: 0.4;
     font-size: 12px;
     padding: 0 30px;
+    text-align: center;
   }
 }
 </style>

package/src/user/components/UserEntry.vue

@@ -12,11 +12,11 @@
       <img
         class="user-entry-head-img"
         mode="aspectFit"
+        @click="toUser1"
         v-else
         src="https://cdn.ddjf.com/static/images/wx-yunservice/account-head.png"
         alt=""
       />
-      <div @click="toUser" class="user-entry-head-icon" v-if="mobile"></div>
     </div>
     <div class="user-entry-bd">
       <div v-if="!mobile" class="user-entry-bd-bigtxt" @click="toLogin">
@@ -29,7 +29,14 @@
         />
       </div>
       <template v-else>
-        <div @click="toUser" class="user-entry-bd-txt">{{ name }}</div>
+        <div @click="toUser" class="user-entry-bd-txt">
+          {{ name }}
+          <img
+            style="width: 14px; height: 14px; margin-left: 2px"
+            src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTExLjA4MzUgN0wxOC4wODM1IDE0TDExLjA4MzUgMjEiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo="
+            alt=""
+          />
+        </div>
         <div @click="toUser" class="user-entry-bd-smalltxt">{{ encodePhone(mobile) }}</div>
       </template>
     </div>
@@ -59,6 +66,10 @@ function toUser() {
   emits('jump')
 }
 
+function toUser1() {
+  props?.mobile && toUser()
+}
+
 // 未登录时，点击前往登录
 function toLogin() {
   emits('login')
@@ -118,6 +129,8 @@ const emits = defineEmits(['jump', 'login'])
       font-weight: 500;
       line-height: 25px;
       margin-bottom: 5px;
+      display: flex;
+      align-items: center;
     }
     &-smalltxt {
       margin-top: 0;

package/src/user/components/UserFeedback.vue

@@ -26,19 +26,27 @@
             v-for="(item, key) in formState.attachment"
             :key="key"
           >
+            <template v-if="item.status === 'done'">
+              <img
+                v-if="item.type === 'image'"
+                class="user-feedback-handle-item-img"
+                mode="aspectFit"
+                :src="item.url"
+              />
+              <video class="user-feedback-handle-item-img" :src="item.url" v-else />
+              <div class="user-feedback-handle-item-close" @click="onDelete(key)">
+                <img
+                  class="user-feedback-handle-item-close-img"
+                  src="https://cdn.ddjf.com/static/images/customer-center/close-filled.png"
+                />
+              </div>
+            </template>
             <img
-              v-if="item.type === 'image'"
-              class="user-feedback-handle-item-img"
+              class="user-feedback-handle-item-loading"
               mode="aspectFit"
-              :src="item.url"
+              src="https://cdn.ddjf.com/static/images/customer-center/loading.png"
+              alt=""
             />
-            <video class="user-feedback-handle-item-img" :src="item.url" v-else />
-            <div class="user-feedback-handle-item-close" @click="onDelete(key)">
-              <img
-                class="user-feedback-handle-item-close-img"
-                src="https://cdn.ddjf.com/static/images/customer-center/close-filled.png"
-              />
-            </div>
           </div>
           <div class="user-feedback-handle-item" @click="toUpload">+</div>
         </div>
@@ -148,7 +156,12 @@ function toUpload() {
           }
         }
 
-        await uploadFile(item)
+        formState.attachment.push({
+          url: item.tempFilePath,
+          type: item.fileType,
+          status: 'uploading',
+        })
+        await uploadFile(formState.attachment[formState.attachment.length - 1])
       }
     },
   })
@@ -161,7 +174,7 @@ async function uploadFile(item: any) {
 
   let Res: any = await Taro.uploadFile({
     url: `${appkitOptions.baseUrl()}/saas-base/file/upload`,
-    filePath: item.tempFilePath,
+    filePath: item.url,
     name: 'file',
     formData: {
       objectNo: `${token}${Date.now()}`,
@@ -172,10 +185,8 @@ async function uploadFile(item: any) {
 
   const res = JSON.parse(Res.data)
   if (res.success) {
-    formState.attachment.push({
-      url: res.result,
-      type: item.fileType,
-    })
+    item.url = res.result
+    item.status = 'done'
   }
 }
 
@@ -227,7 +238,13 @@ function requestFeedback() {
     title: '反馈中...',
   })
 
-  const attachment = JSON.parse(JSON.stringify(formState.attachment))
+  const attachment = JSON.parse(
+    JSON.stringify(
+      formState.attachment
+        .filter((item) => item.status === 'done')
+        .map((item) => ({ url: item.url, type: item.type }))
+    )
+  )
   if (props.captureScreen && Object.keys(props.captureScreen).length) {
     attachment.push({
       captureScreen: props.captureScreen,
@@ -244,7 +261,6 @@ function requestFeedback() {
     device: 'MINI',
     attachment: JSON.stringify(attachment),
   }
-  console.log(sendData, 'sendData')
   $http
     .post('/saas-base/problemFeedback/add', sendData)
     .then(() => {
@@ -365,6 +381,11 @@ const emits = defineEmits(['minimize', 'success'])
           height: 10px;
         }
       }
+      &-loading {
+        width: 17px;
+        height: 17px;
+        animation: rotate 2s linear infinite;
+      }
     }
   }
   .ql-editor.ql-blank:before {
@@ -406,5 +427,14 @@ const emits = defineEmits(['minimize', 'success'])
       font-weight: 500;
     }
   }
+
+  @keyframes rotate {
+    from {
+      transform: rotate(0);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
 }
 </style>

package/src/user/components/UserFeedbackEntry.vue

@@ -15,7 +15,14 @@
     />
     <div>反馈</div>
   </div>
-  <div class="user-feedback-entry hasStorage" v-else>
+  <div
+    :style="dragStyle1"
+    @touchstart="onDragStart1"
+    @touchmove="onDragMove1"
+    @touchend="onDragEnd1"
+    class="user-feedback-entry hasStorage"
+    v-else
+  >
     <img
       class="user-feedback-entry-icon"
       @click="onJump"
@@ -39,17 +46,18 @@ import { useSafeArea } from '../../shared/composables'
 const props = withDefaults(
   defineProps<{
     hasStorage?: boolean
+    withTabbar?: boolean
     withNavbar?: boolean
   }>(),
   {
     hasStorage: false,
+    withTabbar: false,
     withNavbar: false,
   }
 )
 
 // 点击关闭
 function onClose() {
-  console.log('close')
   emits('close')
 }
 
@@ -65,13 +73,39 @@ const dragStyle = computed(() => {
   return `left:${dragData.left}px; top:${dragData.top}px; width:${dragData.width}px; height:${dragData.height}px;`
 })
 
+const {
+  dragData: dragData1,
+  initDragData: initDragData1,
+  onDragStart: onDragStart1,
+  onDragMove: onDragMove1,
+  onDragEnd: onDragEnd1,
+} = useDragBox()
+const dragStyle1 = computed(() => {
+  return `left:${dragData1.left}px; top:${dragData1.top}px; width:${dragData1.width}px; height:${dragData1.height}px;`
+})
+
 onMounted(async () => {
+  const navbarHeight = safeArea.nav + safeArea.status
   // 初始化拖拽元素
   initDragData({
     width: 40,
     height: 40,
     left: 324,
-    top: props.withNavbar ? 620 - safeArea.nav - safeArea.status : 620,
+    top: props.withNavbar ? 620 - navbarHeight : 620,
+    limitVertical: [
+      !props.withNavbar ? navbarHeight : 0,
+      props.withTabbar ? safeArea.menuRect.bottom : 0,
+    ],
+  })
+  initDragData1({
+    width: 92,
+    height: 43,
+    left: 272,
+    top: props.withNavbar ? 620 - navbarHeight : 620,
+    limitVertical: [
+      !props.withNavbar ? navbarHeight : 0,
+      props.withTabbar ? safeArea.menuRect.bottom : 0,
+    ],
   })
 })
 

package/src/user/components/UserInfo.vue

@@ -1,6 +1,7 @@
 <template>
   <scroll-view :scroll-y="!userState.visible && !avatarVisible" class="user-info">
-    <div class="user-info-wrap">
+    <DdSkeleton v-if="firstLoading" :row="3"></DdSkeleton>
+    <div v-else class="user-info-wrap">
       <div class="user-info-tit">账号信息</div>
       <div class="user-info-head">
         <div class="user-info-head-avatar" @click="avatarVisible = true">
@@ -40,11 +41,19 @@
         <div v-for="(item, key) in userInfo.tenantInfoList" :key="key" class="user-info-team-item">
           <div class="user-info-team-item-avatar">
             <img
+              v-if="item.tenantLogo"
               class="user-info-team-item-avatar-img"
               mode="aspectFit"
               :src="item.tenantLogo"
               alt=""
             />
+            <img
+              v-else
+              class="user-info-team-item-avatar-img empty"
+              mode="aspectFit"
+              src="https://cdn.ddjf.com/static/images/customer-center/tenant-logo.png"
+              alt=""
+            />
           </div>
           <div class="user-info-team-item-bd">
             <div class="user-info-team-item-title">{{ item.tenantName }}</div>
@@ -159,6 +168,7 @@ import Taro, { useDidShow } from '@tarojs/taro'
 import { ref, onMounted, reactive, onUnmounted } from 'vue'
 import { useAppKitOptions } from '../../Appkit'
 import { useEncode } from '../../shared/composables/useEncode'
+import DdSkeleton from '../../components/dd-skeleton/index.vue'
 import { useHttp } from '../api'
 
 const props = withDefaults(
@@ -186,14 +196,21 @@ onUnmounted(() => {
   Taro.eventCenter.off('USER-HEAD-CROP-OK')
 })
 
+const firstLoading = ref(true)
 const userInfo = ref<any>({})
 // 根据用户id，查询用户所在租户列表
 function getUserInfoByUserId() {
   const $http = useHttp()
 
-  $http.get(`/cas/sysAccount/getAccountInfo/${props.userId}`).then((result: any) => {
-    userInfo.value = result
-  })
+  $http
+    .get(`/cas/sysAccount/getAccountInfo/${props.userId}`)
+    .then((result: any) => {
+      userInfo.value = result
+      firstLoading.value = false
+    })
+    .catch(() => {
+      firstLoading.value = false
+    })
 }
 
 // 修改头像弹框
@@ -420,6 +437,10 @@ defineExpose({
           width: 100%;
           height: 100%;
         }
+        .empty {
+          width: 20px;
+          height: 40px;
+        }
       }
       &-title {
         font-size: 16px;
@@ -427,7 +448,6 @@ defineExpose({
         margin-bottom: 5px;
       }
       &-app {
-        margin-bottom: 8px;
         display: flex;
         align-items: center;
         flex-wrap: wrap;

package/src/user/components/UserResourceEmpty.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="login-setting" :style="style" v-if="show">
+  <div class="user-resource-empty" :style="style" v-if="show">
     <img
-      class="login-setting-img"
+      class="user-resource-empty-img"
       src="https://cdn.ddjf.com/static/images/nutshell/empty-permission.png"
     />
-    <div class="login-setting-text">
+    <div class="user-resource-empty-text">
       应用已于{{ dayjs(appInfo.endTime).format('YYYY年MM月DD日') }}到期，如需继续使用，
       请联系大道客户总监进行续费
     </div>
@@ -46,20 +46,20 @@ const style = computed(() => {
 </script>
 
 <style lang="scss">
-.login-setting {
+.user-resource-empty {
   position: fixed;
   z-index: 4;
   left: 12px;
   top: 10px;
   bottom: 10px;
   align-items: center;
-  justify-content: center;
   width: calc(100% - 24px);
   background: #ffffff;
   border-radius: 5px;
   display: flex;
   flex-direction: column;
   &-img {
+    margin-top: 50%;
     height: 111px;
     width: 198px;
   }
@@ -69,6 +69,7 @@ const style = computed(() => {
     opacity: 0.4;
     font-size: 12px;
     padding: 0 30px;
+    text-align: center;
   }
 }
 </style>