shangfutong-ui/jeepay-ui-uapp-agent/pageWork/appManage/appList.vue

108 lines
2.5 KiB
Vue

<template>
<view class="page-wrapper">
<view class="search-header">
<JSearchInput place="搜索应用名称、应用AppId、用户号、用户名称" @search="searchApp" @resetSearch="resetSearch" />
</view>
<template v-for="v in appList" :key="v.appId">
<appCard v-bind="v" @tap="toDetails(v.appId)" />
</template>
<jeepayListNull :isShow="!hasNext" :list="[]" />
<view class="select-footer">
<JButton pd="30rpx 30rpx 50rpx 30rpx" @HandleTouch="toCreated">创建应用</JButton>
</view>
</view>
</template>
<script setup>
import { onLoad, onUnload, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
import JSearchInput from '@/components/newComponents/JSearchInput/JSearchInput.vue' //自定义搜索框
import { $getAppList } from '@/http/apiManager.js'
import appCard from './components/appCard.vue'
import JButton from '@/components/newComponents/JButton/JButton'
import { reactive } from 'vue'
const appList = reactive([])
const params = {
pageNumber: 1,
pageSize: 10,
}
// 是否有下一页
let hasNext = undefined
const getList = () => {
$getAppList(params).then(({ bizData }) => {
hasNext = bizData.hasNext
appList.push(...bizData.records)
uni.stopPullDownRefresh()
})
}
const toDetails = (appId) => {
uni.navigateTo({
url: '/pageWork/appManage/appDetails?appId=' + appId,
success: () => {},
})
}
// 搜索
const searchApp = (val) => {
params.unionSearchId = val
params.pageNumber = 1
appList.length = 0
getList()
}
// 重置搜索
const resetSearch = () => {
params.unionSearchId = ''
params.pageNumber = 1
appList.length = 0
getList()
}
onPullDownRefresh(() => {
params.pageNumber = 1
appList.length = 0
getList()
})
onLoad(() => {
getList()
uni.$on('upDateList', () => {
params.pageNumber = 1
appList.length = 0
console.log('appList', appList)
getList()
})
})
// 去创建应用页面
const toCreated = () => {
uni.navigateTo({
url: '/pageWork/appManage/createdAppId',
})
}
// 页面卸载移除事件侦听
onUnload(() => {
uni.$off(['upDateList'])
})
onReachBottom(() => {
if (!hasNext) return
params.pageNumber++
getList()
})
</script>
<style lang="scss" scoped>
.page-wrapper {
background-color: #f7f7f7;
min-height: calc(100vh - 88rpx);
}
.search-header {
position: sticky;
top: 0;
right: 0;
left: 0;
z-index: 10;
background-color: #f7f7f7;
}
.select-footer {
position: fixed;
right: 0;
left: 0;
bottom: 0;
}
</style>