Merge branch 'shirlyn' into 'master'

Merge branch 'shirlyn' into 'master'

See merge request !72

src/views/applications-square/applications-square.vue

@@ -36,11 +36,18 @@ const cardContentWrapRef = useTemplateRef<HTMLDivElement>('cardContentWrapRef')
 const isShowCarousel = ref(true)
 const smooth = ref(false)
 const agentApplicationBottomIsLoading = ref(false)
-const agentApplicationClassifyIsLoading = ref(false)
+const agentApplicationClassifyIsLoading = ref(true)
 const emptyTableText = ref(t('personal_space_module.agent_module.agent_list_module.empty_agent_list'))
 const emptyTableImage = ref(applicationEmptyImage)
 
 const behavior = computed(() => (smooth.value ? 'smooth' : 'auto'))
+const isShowAgentListBottomText = computed(
+  () =>
+    agentApplicationList.value.length > 8 &&
+    pagingInfo.value.pageNo === pagingInfo.value.totalPages &&
+    !agentApplicationClassifyIsLoading.value &&
+    !agentApplicationBottomIsLoading.value,
+)
 const { arrivedState } = useScroll(cardContentWrapRef, { behavior })
 
 ;(function () {
@@ -74,8 +81,11 @@ watch(
   },
 )
 
-function handleGetAgentApplicationList(update = false, search = false) {
+function handleGetAgentApplicationList(update = false, search = false, clear = false) {
   const agentTypeId = ref<number | null>(0)
+
+  if (clear && searchQuery.value.trim() === '') return
+
   if (agentApplicationBottomIsLoading.value && agentApplicationClassifyIsLoading.value) return
 
   if (search && searchQuery.value.length !== 0) {
@@ -84,6 +94,8 @@ function handleGetAgentApplicationList(update = false, search = false) {
     isShowCarousel.value = true
   }
 
+  if (search) agentApplicationClassifyIsLoading.value = true
+
   if (update) pagingInfo.value.pageNo = 1
 
   checkedClassifyValue.value === 0 ? (agentTypeId.value = null) : (agentTypeId.value = checkedClassifyValue.value)
@@ -92,20 +104,22 @@ function handleGetAgentApplicationList(update = false, search = false) {
     pagingInfo: pagingInfo.value,
     categoryId: agentTypeId.value,
   }
-  fetchGetAgentApplicationList<PersonalAppConfigState[]>(payload).then((res) => {
-    agentApplicationList.value = update ? res.data : [...agentApplicationList.value, ...res.data]
+  fetchGetAgentApplicationList<PersonalAppConfigState[]>(payload)
+    .then((res) => {
+      agentApplicationList.value = update ? res.data : [...agentApplicationList.value, ...res.data]
 
-    pagingInfo.value = res.pagingInfo as PaginationInfo
+      pagingInfo.value = res.pagingInfo as PaginationInfo
 
-    emptyTableText.value = searchQuery.value
-      ? t('common_module.search_empty_data')
-      : t('personal_space_module.agent_module.agent_list_module.empty_agent_list')
-    emptyTableImage.value =
-      searchQuery.value && agentApplicationList.value.length === 0 ? searchEmptyImage : applicationEmptyImage
-
-    agentApplicationClassifyIsLoading.value = false
-    agentApplicationBottomIsLoading.value = false
-  })
+      emptyTableText.value = searchQuery.value
+        ? t('common_module.search_empty_data')
+        : t('personal_space_module.agent_module.agent_list_module.empty_agent_list')
+      emptyTableImage.value =
+        searchQuery.value && agentApplicationList.value.length === 0 ? searchEmptyImage : applicationEmptyImage
+    })
+    .finally(() => {
+      agentApplicationClassifyIsLoading.value = false
+      agentApplicationBottomIsLoading.value = false
+    })
 }
 
 function handleCollectOrCancelAgentApplication(agentApplicationItem: PersonalAppConfigState) {
@@ -133,9 +147,26 @@ function handleGetMallCategoryList() {
 function handleToUseAgentApplication(agentId: string) {
   router.push({ name: 'ShareWebApplication', params: { agentId: agentId } })
 }
+
 function handleAddAgentApplications() {
   router.push({ name: 'PersonalAppSetting' })
 }
+
+function handleEnterKeypress(event: KeyboardEvent) {
+  if (event.code === 'Enter' && !event.shiftKey) {
+    event.preventDefault()
+    handleGetAgentApplicationList(true, true, true)
+  }
+}
+
+function handleSearchGetApplicationList(clear = false) {
+  if (clear) {
+    searchQuery.value = ''
+    handleGetAgentApplicationList(true, true)
+  } else {
+    handleGetAgentApplicationList(true, true, true)
+  }
+}
 </script>
 
 <template>
@@ -154,10 +185,11 @@ function handleAddAgentApplications() {
           :placeholder="t('common_module.search')"
           class="search-input rounded-[26px]! text-[16px]! leading-[32px]! border-[#9ea3ff]! border-[1px] py-[6px] shadow-[0_4px_10px_0px_rgba(103,103,103,.1)]"
           clearable
-          @keyup.enter="handleGetAgentApplicationList(true, true)"
+          :on-clear="() => handleSearchGetApplicationList(true)"
+          @keyup.enter="handleEnterKeypress"
         >
           <template #prefix>
-            <div @click="handleGetAgentApplicationList(true)">
+            <div @click="() => handleSearchGetApplicationList(false)">
               <img src="@/assets/images/search.png" width="14" height="14" class="mr-[5px] cursor-pointer" />
             </div>
           </template>
@@ -204,8 +236,8 @@ function handleAddAgentApplications() {
       <n-scrollbar style="max-height: 920px">
         <div>
           <div class="mt-[14px] min-h-[800px]">
-            <div class="flex justify-center">
-              <n-spin v-show="agentApplicationClassifyIsLoading" size="large" />
+            <div v-show="agentApplicationClassifyIsLoading" class="flex h-[500px] items-center justify-center">
+              <n-spin size="large" />
             </div>
             <div
               v-show="!agentApplicationClassifyIsLoading && agentApplicationList.length !== 0"
@@ -243,7 +275,7 @@ function handleAddAgentApplications() {
                     <div class="h-[84px] w-[84px]">
                       <img
                         :src="agentApplicationItem.baseInfo.agentAvatar"
-                        class="h-[84px] w-[84px] rounded-[10px] object-cover"
+                        class="h-full w-full rounded-[10px] object-cover"
                       />
                     </div>
                   </div>
@@ -278,7 +310,7 @@ function handleAddAgentApplications() {
                 </div>
               </div>
               <div v-for="item in 4" :key="item" class="mr-[15px]">
-                <div v-show="agentApplicationBottomIsLoading && pagingInfo.pageNo !== pagingInfo.totalPages">
+                <div v-show="agentApplicationBottomIsLoading">
                   <n-skeleton text :repeat="6" /> <n-skeleton text style="width: 60%" />
                 </div>
               </div>
@@ -292,7 +324,7 @@ function handleAddAgentApplications() {
               </div>
             </div>
             <div
-              v-show="agentApplicationList.length > 9 && pagingInfo.pageNo === pagingInfo.totalPages"
+              v-show="isShowAgentListBottomText"
               class="mb-[50px] mt-[30px] flex justify-center text-center text-[14px] text-[#a9b4cc]"
             >
               <div class="relative top-[10px] h-[1px] w-[14px] bg-[#a9b4cc]"></div>

src/views/personal-space/personal-app-setting/components/app-publish.vue

@@ -16,15 +16,7 @@ import {
   fetchRemoveSalePublishApplication,
 } from '@/apis/agent-application'
 import { defaultPersonalAppConfigState, usePersonalAppConfigStore } from '@/store/modules/personal-app-config'
-
-interface ApplicationMallInfo {
-  agentId: string
-  agentPublishId: number
-  categoryId: number
-  isCopy: string
-  isSale: string
-  launchTime: string
-}
+import { ApplicationMallInfo } from '../../personal-app/types'
 
 const { t } = useI18n()
 
@@ -334,8 +326,8 @@ function handleToApplicationSquare() {
 
     <SaleApplicationsConfigurationModal
       v-model="isShowSaleApplicationsConfigurationModal"
-      :data="saleApplicationsInfo"
-      :category-id="applicationMallInfo.categoryId"
+      :sale-applications-data="saleApplicationsInfo"
+      :application-mall-info="applicationMallInfo"
       @update="(newValue: string) => (applicationMallInfo.isSale = newValue)"
       @trigger-get-application-mall-info="handleGetApplicationMallInfo"
     />

src/views/personal-space/personal-app/personal-app.vue

 <script setup lang="ts">
-import { ref, useTemplateRef, watch } from 'vue'
+import { computed, ref, useTemplateRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { Search, MoreOne, Star } from '@icon-park/vue-next'
 import { PaginationInfo } from '@/components/custom-pagination/custom-pagination.vue'
@@ -56,14 +56,22 @@ const pagingInfo = ref<PaginationInfo>({
 const agentAppList = ref<PersonalAppConfigState[]>([])
 
 const agentSearchInputValue = ref('')
-const agentAppListLoading = ref(false)
+const agentAppListLoading = ref(true)
 const agentAppListBottomLoadingMore = ref(false)
 
 const emptyTableText = ref(t('personal_space_module.agent_module.agent_list_module.application_empty'))
-
 const emptyTableImage = ref(applicationEmptyImage)
-
 const isAgentAppListBottom = ref(false)
+const isCollect = ref('')
+
+const isShowAgentListBottomText = computed(
+  () =>
+    pagingInfo.value.pageNo === pagingInfo.value.totalPages &&
+    agentAppList.value.length !== 0 &&
+    pagingInfo.value.totalRows > 12 &&
+    !agentAppListLoading.value &&
+    !agentAppListBottomLoadingMore.value,
+)
 
 watch(
   () => isAgentAppListBottom.value,
@@ -78,25 +86,30 @@ watch(
   },
 )
 ;(function () {
-  agentAppListLoading.value = true
   getApplicationList()
 })()
 
-function getApplicationList(isLoadMore = false) {
+function getApplicationList(isLoadMore = false, clear = false) {
+  if (clear && agentSearchInputValue.value.trim() === '') {
+    return
+  } else {
+    if (!agentAppListBottomLoadingMore.value) agentAppListLoading.value = true
+  }
   if (!isLoadMore) {
     pagingInfo.value.pageNo = 1
     pagingInfo.value.totalPages = 0
     pagingInfo.value.totalRows = 0
   }
-  const isCollect = ref('')
-  const publishStatus = ref(selectedPublishStatusValue.value)
+  let publishStatus = selectedPublishStatusValue.value
+  isCollect.value = ''
+
   if (selectedPublishStatusValue.value === 'Y') {
     isCollect.value = 'Y'
-    publishStatus.value = ''
+    publishStatus = ''
   }
   const payload = {
     query: agentSearchInputValue.value,
-    publishStatus: publishStatus.value,
+    publishStatus: publishStatus,
     isCollect: isCollect.value,
     pagingInfo: pagingInfo.value,
   }
@@ -122,14 +135,6 @@ function handleBasePublishingStatusGetAgentList() {
   getApplicationList()
 }
 
-function handleEnterKeypress(event: KeyboardEvent) {
-  if (event.code === 'Enter' && !event.shiftKey) {
-    event.preventDefault()
-
-    getApplicationList()
-  }
-}
-
 function handleDeletePersonalApp(agentId: string) {
   window.$message
     .ctWarning(t('personal_space_module.agent_module.agent_list_module.delete_agent_dialog_title'))
@@ -184,9 +189,21 @@ function handleSelectAddType() {
   router.push({ name: 'PersonalAppSetting' })
 }
 
-// function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
-//   console.log('分析', personalApp)
-// }
+function handleSearchGetApplicationList(clear = false) {
+  if (clear) {
+    agentSearchInputValue.value = ''
+    getApplicationList()
+  } else {
+    getApplicationList(false, true)
+  }
+}
+
+function handleEnterKeypress(event: KeyboardEvent) {
+  if (event.code === 'Enter' && !event.shiftKey) {
+    event.preventDefault()
+    getApplicationList(false, true)
+  }
+}
 
 const handleCardContentScrollDebounce = debounce(
   (event: { target: { scrollTop: number; clientHeight: number; scrollHeight: number } }) => {
@@ -198,6 +215,10 @@ const handleCardContentScrollDebounce = debounce(
   },
   200,
 )
+
+// function handleAnalysisPersonalApp(personalApp: PersonalAppConfigState) {
+//   console.log('分析', personalApp)
+// }
 </script>
 
 <template>
@@ -214,6 +235,8 @@ const handleCardContentScrollDebounce = debounce(
         v-model:value="agentSearchInputValue"
         :placeholder="t('common_module.search')"
         class="w-[256px]! h-[32px]!"
+        clearable
+        :on-clear="() => handleSearchGetApplicationList(true)"
         @keypress="handleEnterKeypress"
       >
         <template #suffix>
@@ -222,16 +245,16 @@ const handleCardContentScrollDebounce = debounce(
             size="16"
             fill="#999"
             :stroke-width="3"
-            class="cursor-pointer text-base"
-            @click="getApplicationList()"
+            class="ml-[10px] cursor-pointer text-base"
+            @click="() => handleSearchGetApplicationList(false)"
           />
         </template>
       </NInput>
     </div>
     <n-scrollbar style="max-height: 700px" @scroll="handleCardContentScrollDebounce">
       <div ref="cardContentWrapRef" class="pb-[50px]">
-        <div class="flex justify-center">
-          <n-spin v-show="agentAppListLoading" size="large" />
+        <div v-show="agentAppListLoading" class="flex h-[700px] items-center justify-center">
+          <n-spin size="large" />
         </div>
         <div v-show="!agentAppListLoading" class="mt-[5px]">
           <div v-if="agentAppList.length" class="grid-content grid grid-cols-4">
@@ -269,7 +292,7 @@ const handleCardContentScrollDebounce = debounce(
                     >
                   </div>
                   <div class="h-[68px] w-[68px]">
-                    <img :src="agentAppItem.baseInfo.agentAvatar" class="h-[68px] rounded-[10px] object-cover" />
+                    <img :src="agentAppItem.baseInfo.agentAvatar" class="h-full w-full rounded-[10px] object-cover" />
                   </div>
                 </div>
                 <div>
@@ -350,7 +373,7 @@ const handleCardContentScrollDebounce = debounce(
               </div>
             </div>
             <div v-for="item in 4" :key="item" class="mr-[15px]">
-              <div v-show="agentAppListBottomLoadingMore && pagingInfo.pageNo !== pagingInfo.totalPages">
+              <div v-show="agentAppListBottomLoadingMore">
                 <n-skeleton text :repeat="6" /> <n-skeleton text style="width: 60%" />
               </div>
             </div>
@@ -377,9 +400,7 @@ const handleCardContentScrollDebounce = debounce(
             </div>
           </div>
           <div
-            v-show="
-              pagingInfo.pageNo === pagingInfo.totalPages && agentAppList.length !== 0 && pagingInfo.totalRows > 12
-            "
+            v-show="isShowAgentListBottomText"
             class="mt-[30px] flex justify-center text-center text-[14px] text-[#a9b4cc]"
           >
             <div class="relative top-[10px] h-[1px] w-[14px] bg-[#a9b4cc]"></div>
@@ -394,7 +415,7 @@ const handleCardContentScrollDebounce = debounce(
 
     <SaleApplicationsConfigurationModal
       v-model="isShowSaleApplicationsConfigurationModal"
-      :data="saleApplicationsInfo"
+      :sale-applications-data="saleApplicationsInfo"
       @update="(newValue: string) => (saleApplicationsInfo.isSale = newValue)"
     />
   </div>

src/views/personal-space/personal-app/sale-applications-configuration-modal.vue

@@ -5,6 +5,7 @@ import { PersonalAppConfigState } from '@/store/types/personal-app-config'
 import { Close, Help, Notes, CheckSmall } from '@icon-park/vue-next'
 import { ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { ApplicationMallInfo } from './types'
 
 interface MallCategory {
   id: number
@@ -14,8 +15,8 @@ interface MallCategory {
 const isShowSaleApplicationsConfigurationModal = defineModel<boolean>()
 
 const props = defineProps<{
-  data: PersonalAppConfigState
-  categoryId?: number
+  saleApplicationsData: PersonalAppConfigState
+  applicationMallInfo?: ApplicationMallInfo
 }>()
 const emit = defineEmits<{
   update: [value: string]
@@ -23,13 +24,12 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
+const checkedClassifyValue = ref<number | null>(props.applicationMallInfo?.categoryId ?? 0)
 
-const checkedClassifyValue = ref<number | null>(props.categoryId!)
-const isCopy = ref(props.data.isCopy === 'Y')
-const saleApplicationsId = ref(props.data.agentPublishId)
+const isCopy = ref(props.saleApplicationsData.isCopy === 'Y')
 const isClassifyError = ref(false)
-
 const applicationsClassify = ref<MallCategory[]>([])
+const agentPublishId = ref(props.saleApplicationsData.agentPublishId)
 
 ;(function () {
   handleGetMallCategoryList()
@@ -43,17 +43,9 @@ watch(
 )
 
 watch(
-  () => props.categoryId,
+  () => props.saleApplicationsData.agentPublishId,
   (newValue) => {
-    checkedClassifyValue.value = newValue!
-  },
-)
-
-watch(
-  () => props.data,
-  (newVal) => {
-    saleApplicationsId.value = newVal.agentPublishId
-    isCopy.value = newVal.isCopy === 'Y'
+    agentPublishId.value = newValue
   },
 )
 
@@ -69,8 +61,12 @@ function handleApplicationReleaseBtn() {
     return
   }
 
+  if (props.applicationMallInfo?.agentPublishId) {
+    agentPublishId.value = props.applicationMallInfo.agentPublishId
+  }
+
   const payload = {
-    agentPublishId: props.data.agentPublishId,
+    agentPublishId: agentPublishId.value,
     categoryId: checkedClassifyValue.value,
     isCopy: isCopy.value ? 'Y' : 'N',
     isSale: 'Y',
@@ -105,9 +101,9 @@ function handleGetMallCategoryList() {
 }
 
 function handleModalOpenAfter() {
-  if (props.data.isCopy) isCopy.value = props.data.isCopy === 'Y'
-  if (props.data.isSale === 'Y') {
-    checkedClassifyValue.value = props.categoryId!
+  if (props.saleApplicationsData.isCopy) isCopy.value = props.saleApplicationsData.isCopy === 'Y'
+  if (props.saleApplicationsData.isSale === 'Y') {
+    checkedClassifyValue.value = props.applicationMallInfo!.categoryId
   } else {
     checkedClassifyValue.value = 0
   }
@@ -141,6 +137,7 @@ function handleModalOpenAfter() {
             @click="handleApplicationsSaleSettingModalClose"
           />
         </div>
+
         <div class="items-center justify-center rounded-[4px]">
           <div class="mb-[16px] flex items-center text-[14px] text-[#151B26]">
             <div class="bg-theme-color mr-[8px] h-[20px] w-[20px] rounded-2xl text-center text-[#fff]">1</div>

src/views/personal-space/personal-app/types.d.ts

+export interface ApplicationMallInfo {
+  agentId: string
+  agentPublishId: number
+  categoryId: number
+  isCopy: string
+  isSale: string
+  launchTime: string
+}