Commit 89db8777 authored by shirlyn.guo's avatar shirlyn.guo 👌🏻

chore: 个人应用&应用广场规范代码

parent 960fc374
...@@ -41,6 +41,13 @@ const emptyTableText = ref(t('personal_space_module.agent_module.agent_list_modu ...@@ -41,6 +41,13 @@ const emptyTableText = ref(t('personal_space_module.agent_module.agent_list_modu
const emptyTableImage = ref(applicationEmptyImage) const emptyTableImage = ref(applicationEmptyImage)
const behavior = computed(() => (smooth.value ? 'smooth' : 'auto')) 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 }) const { arrivedState } = useScroll(cardContentWrapRef, { behavior })
;(function () { ;(function () {
...@@ -83,11 +90,12 @@ function handleGetAgentApplicationList(update = false, search = false, clear = f ...@@ -83,11 +90,12 @@ function handleGetAgentApplicationList(update = false, search = false, clear = f
if (search && searchQuery.value.length !== 0) { if (search && searchQuery.value.length !== 0) {
isShowCarousel.value = false isShowCarousel.value = false
agentApplicationClassifyIsLoading.value = true
} else { } else {
isShowCarousel.value = true isShowCarousel.value = true
} }
if (search) agentApplicationClassifyIsLoading.value = true
if (update) pagingInfo.value.pageNo = 1 if (update) pagingInfo.value.pageNo = 1
checkedClassifyValue.value === 0 ? (agentTypeId.value = null) : (agentTypeId.value = checkedClassifyValue.value) checkedClassifyValue.value === 0 ? (agentTypeId.value = null) : (agentTypeId.value = checkedClassifyValue.value)
...@@ -153,7 +161,6 @@ function handleEnterKeypress(event: KeyboardEvent) { ...@@ -153,7 +161,6 @@ function handleEnterKeypress(event: KeyboardEvent) {
function handleSearchGetApplicationList(clear = false) { function handleSearchGetApplicationList(clear = false) {
if (clear) { if (clear) {
agentApplicationClassifyIsLoading.value = true
searchQuery.value = '' searchQuery.value = ''
handleGetAgentApplicationList(true, true) handleGetAgentApplicationList(true, true)
} else { } else {
...@@ -268,7 +275,7 @@ function handleSearchGetApplicationList(clear = false) { ...@@ -268,7 +275,7 @@ function handleSearchGetApplicationList(clear = false) {
<div class="h-[84px] w-[84px]"> <div class="h-[84px] w-[84px]">
<img <img
:src="agentApplicationItem.baseInfo.agentAvatar" :src="agentApplicationItem.baseInfo.agentAvatar"
class="h-[84px] w-[84px] rounded-[10px] object-cover" class="h-full w-full rounded-[10px] object-cover"
/> />
</div> </div>
</div> </div>
...@@ -303,7 +310,7 @@ function handleSearchGetApplicationList(clear = false) { ...@@ -303,7 +310,7 @@ function handleSearchGetApplicationList(clear = false) {
</div> </div>
</div> </div>
<div v-for="item in 4" :key="item" class="mr-[15px]"> <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%" /> <n-skeleton text :repeat="6" /> <n-skeleton text style="width: 60%" />
</div> </div>
</div> </div>
...@@ -317,7 +324,7 @@ function handleSearchGetApplicationList(clear = false) { ...@@ -317,7 +324,7 @@ function handleSearchGetApplicationList(clear = false) {
</div> </div>
</div> </div>
<div <div
v-show="agentApplicationList.length > 8 && pagingInfo.pageNo === pagingInfo.totalPages" v-show="isShowAgentListBottomText"
class="mb-[50px] mt-[30px] flex justify-center text-center text-[14px] text-[#a9b4cc]" 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> <div class="relative top-[10px] h-[1px] w-[14px] bg-[#a9b4cc]"></div>
......
...@@ -16,15 +16,7 @@ import { ...@@ -16,15 +16,7 @@ import {
fetchRemoveSalePublishApplication, fetchRemoveSalePublishApplication,
} from '@/apis/agent-application' } from '@/apis/agent-application'
import { defaultPersonalAppConfigState, usePersonalAppConfigStore } from '@/store/modules/personal-app-config' import { defaultPersonalAppConfigState, usePersonalAppConfigStore } from '@/store/modules/personal-app-config'
import { ApplicationMallInfo } from '../../personal-app/types'
interface ApplicationMallInfo {
agentId: string
agentPublishId: number
categoryId: number
isCopy: string
isSale: string
launchTime: string
}
const { t } = useI18n() const { t } = useI18n()
...@@ -334,7 +326,7 @@ function handleToApplicationSquare() { ...@@ -334,7 +326,7 @@ function handleToApplicationSquare() {
<SaleApplicationsConfigurationModal <SaleApplicationsConfigurationModal
v-model="isShowSaleApplicationsConfigurationModal" v-model="isShowSaleApplicationsConfigurationModal"
:data="saleApplicationsInfo" :sale-applications-data="saleApplicationsInfo"
:application-mall-info="applicationMallInfo" :application-mall-info="applicationMallInfo"
@update="(newValue: string) => (applicationMallInfo.isSale = newValue)" @update="(newValue: string) => (applicationMallInfo.isSale = newValue)"
@trigger-get-application-mall-info="handleGetApplicationMallInfo" @trigger-get-application-mall-info="handleGetApplicationMallInfo"
......
<script setup lang="ts"> <script setup lang="ts">
import { ref, useTemplateRef, watch } from 'vue' import { computed, ref, useTemplateRef, watch } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { Search, MoreOne, Star } from '@icon-park/vue-next' import { Search, MoreOne, Star } from '@icon-park/vue-next'
import { PaginationInfo } from '@/components/custom-pagination/custom-pagination.vue' import { PaginationInfo } from '@/components/custom-pagination/custom-pagination.vue'
...@@ -60,10 +60,18 @@ const agentAppListLoading = ref(true) ...@@ -60,10 +60,18 @@ const agentAppListLoading = ref(true)
const agentAppListBottomLoadingMore = ref(false) const agentAppListBottomLoadingMore = ref(false)
const emptyTableText = ref(t('personal_space_module.agent_module.agent_list_module.application_empty')) const emptyTableText = ref(t('personal_space_module.agent_module.agent_list_module.application_empty'))
const emptyTableImage = ref(applicationEmptyImage) const emptyTableImage = ref(applicationEmptyImage)
const isAgentAppListBottom = ref(false) 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( watch(
() => isAgentAppListBottom.value, () => isAgentAppListBottom.value,
...@@ -92,15 +100,16 @@ function getApplicationList(isLoadMore = false, clear = false) { ...@@ -92,15 +100,16 @@ function getApplicationList(isLoadMore = false, clear = false) {
pagingInfo.value.totalPages = 0 pagingInfo.value.totalPages = 0
pagingInfo.value.totalRows = 0 pagingInfo.value.totalRows = 0
} }
const isCollect = ref('') let publishStatus = selectedPublishStatusValue.value
const publishStatus = ref(selectedPublishStatusValue.value) isCollect.value = ''
if (selectedPublishStatusValue.value === 'Y') { if (selectedPublishStatusValue.value === 'Y') {
isCollect.value = 'Y' isCollect.value = 'Y'
publishStatus.value = '' publishStatus = ''
} }
const payload = { const payload = {
query: agentSearchInputValue.value, query: agentSearchInputValue.value,
publishStatus: publishStatus.value, publishStatus: publishStatus,
isCollect: isCollect.value, isCollect: isCollect.value,
pagingInfo: pagingInfo.value, pagingInfo: pagingInfo.value,
} }
...@@ -182,7 +191,6 @@ function handleSelectAddType() { ...@@ -182,7 +191,6 @@ function handleSelectAddType() {
function handleSearchGetApplicationList(clear = false) { function handleSearchGetApplicationList(clear = false) {
if (clear) { if (clear) {
agentAppListLoading.value = true
agentSearchInputValue.value = '' agentSearchInputValue.value = ''
getApplicationList() getApplicationList()
} else { } else {
...@@ -284,7 +292,7 @@ const handleCardContentScrollDebounce = debounce( ...@@ -284,7 +292,7 @@ const handleCardContentScrollDebounce = debounce(
> >
</div> </div>
<div class="h-[68px] w-[68px]"> <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> </div>
<div> <div>
...@@ -365,7 +373,7 @@ const handleCardContentScrollDebounce = debounce( ...@@ -365,7 +373,7 @@ const handleCardContentScrollDebounce = debounce(
</div> </div>
</div> </div>
<div v-for="item in 4" :key="item" class="mr-[15px]"> <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%" /> <n-skeleton text :repeat="6" /> <n-skeleton text style="width: 60%" />
</div> </div>
</div> </div>
...@@ -392,9 +400,7 @@ const handleCardContentScrollDebounce = debounce( ...@@ -392,9 +400,7 @@ const handleCardContentScrollDebounce = debounce(
</div> </div>
</div> </div>
<div <div
v-show=" v-show="isShowAgentListBottomText"
pagingInfo.pageNo === pagingInfo.totalPages && agentAppList.length !== 0 && pagingInfo.totalRows > 12
"
class="mt-[30px] flex justify-center text-center text-[14px] text-[#a9b4cc]" class="mt-[30px] flex justify-center text-center text-[14px] text-[#a9b4cc]"
> >
<div class="relative top-[10px] h-[1px] w-[14px] bg-[#a9b4cc]"></div> <div class="relative top-[10px] h-[1px] w-[14px] bg-[#a9b4cc]"></div>
...@@ -409,7 +415,7 @@ const handleCardContentScrollDebounce = debounce( ...@@ -409,7 +415,7 @@ const handleCardContentScrollDebounce = debounce(
<SaleApplicationsConfigurationModal <SaleApplicationsConfigurationModal
v-model="isShowSaleApplicationsConfigurationModal" v-model="isShowSaleApplicationsConfigurationModal"
:data="saleApplicationsInfo" :sale-applications-data="saleApplicationsInfo"
@update="(newValue: string) => (saleApplicationsInfo.isSale = newValue)" @update="(newValue: string) => (saleApplicationsInfo.isSale = newValue)"
/> />
</div> </div>
......
...@@ -5,25 +5,17 @@ import { PersonalAppConfigState } from '@/store/types/personal-app-config' ...@@ -5,25 +5,17 @@ import { PersonalAppConfigState } from '@/store/types/personal-app-config'
import { Close, Help, Notes, CheckSmall } from '@icon-park/vue-next' import { Close, Help, Notes, CheckSmall } from '@icon-park/vue-next'
import { ref, watch } from 'vue' import { ref, watch } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { ApplicationMallInfo } from './types'
interface MallCategory { interface MallCategory {
id: number id: number
categoryName: string categoryName: string
} }
interface ApplicationMallInfo {
agentId: string
agentPublishId: number
categoryId: number
isCopy: string
isSale: string
launchTime: string
}
const isShowSaleApplicationsConfigurationModal = defineModel<boolean>() const isShowSaleApplicationsConfigurationModal = defineModel<boolean>()
const props = defineProps<{ const props = defineProps<{
data: PersonalAppConfigState saleApplicationsData: PersonalAppConfigState
applicationMallInfo?: ApplicationMallInfo applicationMallInfo?: ApplicationMallInfo
}>() }>()
const emit = defineEmits<{ const emit = defineEmits<{
...@@ -34,9 +26,10 @@ const emit = defineEmits<{ ...@@ -34,9 +26,10 @@ const emit = defineEmits<{
const { t } = useI18n() const { t } = useI18n()
const checkedClassifyValue = ref<number | null>(props.applicationMallInfo?.categoryId ?? 0) const checkedClassifyValue = ref<number | null>(props.applicationMallInfo?.categoryId ?? 0)
const isCopy = ref(props.data.isCopy === 'Y') const isCopy = ref(props.saleApplicationsData.isCopy === 'Y')
const isClassifyError = ref(false) const isClassifyError = ref(false)
const applicationsClassify = ref<MallCategory[]>([]) const applicationsClassify = ref<MallCategory[]>([])
const agentPublishId = ref(props.saleApplicationsData.agentPublishId)
;(function () { ;(function () {
handleGetMallCategoryList() handleGetMallCategoryList()
...@@ -49,6 +42,13 @@ watch( ...@@ -49,6 +42,13 @@ watch(
}, },
) )
watch(
() => props.saleApplicationsData.agentPublishId,
(newValue) => {
agentPublishId.value = newValue
},
)
function handleApplicationsSaleSettingModalClose() { function handleApplicationsSaleSettingModalClose() {
isShowSaleApplicationsConfigurationModal.value = false isShowSaleApplicationsConfigurationModal.value = false
checkedClassifyValue.value = null checkedClassifyValue.value = null
...@@ -56,7 +56,6 @@ function handleApplicationsSaleSettingModalClose() { ...@@ -56,7 +56,6 @@ function handleApplicationsSaleSettingModalClose() {
} }
function handleApplicationReleaseBtn() { function handleApplicationReleaseBtn() {
const agentPublishId = ref(props.data.agentPublishId)
if (!checkedClassifyValue.value) { if (!checkedClassifyValue.value) {
isClassifyError.value = true isClassifyError.value = true
return return
...@@ -102,8 +101,8 @@ function handleGetMallCategoryList() { ...@@ -102,8 +101,8 @@ function handleGetMallCategoryList() {
} }
function handleModalOpenAfter() { function handleModalOpenAfter() {
if (props.data.isCopy) isCopy.value = props.data.isCopy === 'Y' if (props.saleApplicationsData.isCopy) isCopy.value = props.saleApplicationsData.isCopy === 'Y'
if (props.data.isSale === 'Y') { if (props.saleApplicationsData.isSale === 'Y') {
checkedClassifyValue.value = props.applicationMallInfo!.categoryId checkedClassifyValue.value = props.applicationMallInfo!.categoryId
} else { } else {
checkedClassifyValue.value = 0 checkedClassifyValue.value = 0
......
export interface ApplicationMallInfo {
agentId: string
agentPublishId: number
categoryId: number
isCopy: string
isSale: string
launchTime: string
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment