hy/aslan-h5
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(管理员): 对接获取列表的接口

Browse Source
This commit is contained in:
hzj 2025-09-09 18:53:20 +08:00
parent 9decb72520
commit 2a7ab3e733
2 changed files with 179 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/api/userInfo.js
View File

@ -1,50 +1,64 @@
import { get, post } from '../utils/http.js'; import { get, post } from '../utils/http.js'
export const searchUser = async (userId) => { export const searchUser = async (userId) => {
try { try {
const response = await get(`/user/user-profile/open-search?account=${userId}`); const response = await get(`/user/user-profile/open-search?account=${userId}`)
return response; return response
} catch (error) { } catch (error) {
console.error('Failed to fetch search user:', error); console.error('Failed to fetch search user:', error)
console.error('error:' + error.response.errorMsg); console.error('error:' + error.response.errorMsg)
throw error; throw error
} }
}; }
// 用户支付充值用户搜索 // 用户支付充值用户搜索
export const searchPayRechargeUser = async (params) => { export const searchPayRechargeUser = async (params) => {
try { try {
const response = await get( const response = await get(
`/order/web/pay/user-profile?sysOrigin=${params.sysOrigin}&account=${params.account}&type=GOLD` `/order/web/pay/user-profile?sysOrigin=${params.sysOrigin}&account=${params.account}&type=GOLD`
); )
return response; return response
} catch (error) { } catch (error) {
console.error('Failed to fetch search pay recharge user:', error); console.error('Failed to fetch search pay recharge user:', error)
console.error('error:' + error.response.errorMsg); console.error('error:' + error.response.errorMsg)
throw error; throw error
} }
}; }
// 获取BD列表 // 获取BD列表
export const getBDList = async (userId) => { export const getBDList = async (data) => {
try { try {
const response = await get(`/team/bd/page?sysOrigin=LIKEI&userId=${userId}`); const response = await get(
return response; `/team/bd/page2?sysOrigin=LIKEI&userId=${data.userId}&cursor=${data.cursor}&limit=${data.limit}`
)
return response
} catch (error) { } catch (error) {
console.error('Failed to fetch get BD list:', error); console.error('Failed to fetch get BD list:', error)
console.error('error:' + error.response.errorMsg); console.error('error:' + error.response.errorMsg)
throw error; throw error
} }
}; }
// 获取金币代理列表 // 获取金币代理列表
export const getAgencyList = async (data) => { export const getAgencyList = async (data) => {
try { try {
const response = await post(`/wallet/freight-gold/client/pageFreight`, data); const response = await get(`/app/h5/recharge-page?cursor=${data.cursor}&limit=${data.limit}`)
return response; return response
} catch (error) { } catch (error) {
console.error('Failed to fetch get agency list:', error); console.error('Failed to fetch get agency list:', error)
console.error('error:' + error.response.errorMsg); console.error('error:' + error.response.errorMsg)
throw error; throw error
} }
}; }
// 获取货运代理充值月度汇总（当月，上月）
export const getAgencyTotalRecharge = async (data) => {
try {
const response = await get(`/app/h5/recharge-summary`)
return response
} catch (error) {
console.error('Failed to fetch get agency total recharge:', error)
console.error('error:' + error.response.errorMsg)
throw error
}
}

257
src/views/AdminCenter.vue
View File

@ -59,10 +59,16 @@
<!-- 基本信息 --> <!-- 基本信息 -->
<div style="display: flex; justify-content: space-between"> <div style="display: flex; justify-content: space-between">
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<img src="../assets/icon/coin.png" alt="" style="width: 36px; border-radius: 50%" /> <img
:src="info.userProfile.userAvatar"
alt="../assets/icon/coin.png"
style="width: 36px; height: 36px; border-radius: 50%"
/>
<div style="margin-left: 8px"> <div style="margin-left: 8px">
<div style="font-weight: 700">{{ info.name }}</div> <div style="font-weight: 700">{{ info.userProfile.userNickname }}</div>
<div style="font-weight: 700; color: rgba(0, 0, 0, 0.4)">ID:{{ info.id }}</div> <div style="font-weight: 700; color: rgba(0, 0, 0, 0.4)">
ID:{{ info.userProfile.userNickname }}
</div>
</div> </div>
</div> </div>
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
@ -79,17 +85,21 @@
<div style="display: flex" v-show="BDIndex == selectedBDIndex"> <div style="display: flex" v-show="BDIndex == selectedBDIndex">
<div style="flex: 1"> <div style="flex: 1">
<div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Host</div> <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Host</div>
<div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">{{ info.host }}</div> <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
{{ info.allAnchorCount || 0 }}
</div>
</div> </div>
<div style="flex: 1"> <div style="flex: 1">
<div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Agency</div> <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Agency</div>
<div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">{{ info.agency }}</div> <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
{{ info.agentCount || 0 }}
</div>
</div> </div>
</div> </div>
</transition> </transition>
</div> </div>
<!-- 触发加载功能 --> <!-- 触发加载功能 -->
<div ref="loadmore" v-if="showLoading"></div> <div ref="BDloadmore" v-if="showBDLoading"></div>
</div> </div>
<!-- agency列表 --> <!-- agency列表 -->
@ -104,10 +114,12 @@
" "
> >
<div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Total recharge for the month:</div> <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Total recharge for the month:</div>
<div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">${{ rechargeDetail.total }}</div> <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
${{ totalRechargeDetail[0]?.totalAmount || 0 }}
</div>
<div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Total recharge last month:</div> <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Total recharge last month:</div>
<div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)"> <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
${{ rechargeDetail.lastMonth }} ${{ totalRechargeDetail[1]?.totalAmount || 0 }}
</div> </div>
</div> </div>
<div <div
@ -125,10 +137,10 @@
<!-- 基本信息 --> <!-- 基本信息 -->
<div style="display: flex; justify-content: space-between"> <div style="display: flex; justify-content: space-between">
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<img src="../assets/icon/coin.png" alt="" style="width: 36px; border-radius: 50%" /> <img :src="agency.userAvatar" alt="" style="width: 36px; border-radius: 50%" />
<div style="margin-left: 8px"> <div style="margin-left: 8px">
<div style="font-weight: 700">{{ agency.name }}</div> <div style="font-weight: 700">{{ agency.name }}</div>
<div style="font-weight: 700; color: rgba(0, 0, 0, 0.4)">ID:{{ agency.id }}</div> <div style="font-weight: 700; color: rgba(0, 0, 0, 0.4)">ID:{{ agency.account }}</div>
</div> </div>
</div> </div>
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
@ -146,31 +158,35 @@
<div style="display: flex" v-show="aIndex == selectedAgencyIndex"> <div style="display: flex" v-show="aIndex == selectedAgencyIndex">
<div style="flex: 1"> <div style="flex: 1">
<div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">This month:</div> <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">This month:</div>
<div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">${{ agency.thisMonth }}</div> <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
${{ formatPrice(agency.thisMonth) || 0 }}
</div>
</div> </div>
<div style="flex: 1"> <div style="flex: 1">
<div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Last month:</div> <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Last month:</div>
<div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">${{ agency.lastMonth }}</div> <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
${{ formatPrice(agency.lastMonth) || 0 }}
</div>
</div> </div>
</div> </div>
</transition> </transition>
</div> </div>
<!-- 触发加载功能 -->
<div ref="Agloadmore" v-if="showAgLoading"></div>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import MobileHeader from '../components/MobileHeader.vue'; import MobileHeader from '../components/MobileHeader.vue'
import { onMounted, ref, computed, watch } from 'vue'; import { onMounted, ref, computed } from 'vue'
import { getAdminCenterList, giveProps } from '@/api/itemDistribution'; import { getBDList, getAgencyList, getAgencyTotalRecharge } from '@/api/userInfo'
import { getBDList, getAgencyList } from '@/api/userInfo'; import { useRouter } from 'vue-router'
import { showError, showWarning, showInfo, showSuccess } from '@/utils/toast.js'; import { usePageInitializationWithConfig } from '@/utils/pageConfig.js'
import { useRouter } from 'vue-router'; import { getUserId } from '@/utils/userStore.js'
import { usePageInitializationWithConfig } from '@/utils/pageConfig.js'; import { useDebounce, useThrottle } from '@/utils/useDebounce'
import { getUserId } from '@/utils/userStore.js';
import { useDebounce, useThrottle } from '@/utils/useDebounce';
const router = useRouter(); const router = useRouter()
const tabList = ref([ const tabList = ref([
{ {
@ -181,152 +197,157 @@ const tabList = ref([
id: 2, id: 2,
name: 'Recharge Agency', name: 'Recharge Agency',
}, },
]); ])
const activeIndex = ref(0); const activeIndex = ref(0)
const tabItems = ref([]); // 存储标签DOM引用 const tabItems = ref([]) // 存储标签DOM引用
// 选择标签 // 选择标签
const setActiveTab = (index) => { const setActiveTab = (index) => {
if (activeIndex.value != index) { if (activeIndex.value != index) {
console.log('切换标签'); console.log('切换标签')
activeIndex.value = index; activeIndex.value = index
selectedBDIndex.value = -1; selectedBDIndex.value = -1
selectedAgencyIndex.value = -1; selectedAgencyIndex.value = -1
} }
}; }
// 计算下划线样式 // 计算下划线样式
const underlineStyle = computed(() => { const underlineStyle = computed(() => {
console.log('计算属性'); console.log('计算属性')
if (tabItems.value.length === 0) return {}; //没有这个元素 if (tabItems.value.length === 0) return {} //没有这个元素
const activeTab = tabItems.value[activeIndex.value]; const activeTab = tabItems.value[activeIndex.value]
console.log('选中元素的左边距', activeTab.offsetLeft); console.log('选中元素的左边距', activeTab.offsetLeft)
return { return {
position: 'absolute', position: 'absolute',
left: `${activeTab.offsetLeft + activeTab.offsetWidth / 2 - 15 / 2}px`, left: `${activeTab.offsetLeft + activeTab.offsetWidth / 2 - 15 / 2}px`,
bottom: '0', bottom: '0',
transition: 'left 0.3s ease', // 平滑过渡 transition: 'left 0.3s ease', // 平滑过渡
}; }
}); })
const selectedBDIndex = ref(-1); //选中的BD用户下标 const selectedBDIndex = ref(-1) //选中的BD用户下标
const showUserInfo = (index) => { const showUserInfo = (index) => {
selectedBDIndex.value = selectedBDIndex.value != index ? index : -1; selectedBDIndex.value = selectedBDIndex.value != index ? index : -1
}; //选中的BD用户 } //选中的BD用户
const selectedAgencyIndex = ref(-1); //选中的agency用户下标 const selectedAgencyIndex = ref(-1) //选中的agency用户下标
const showAgencyInfo = (index) => { const showAgencyInfo = (index) => {
selectedAgencyIndex.value = selectedAgencyIndex.value != index ? index : -1; selectedAgencyIndex.value = selectedAgencyIndex.value != index ? index : -1
}; //选中的agency用户 } //选中的agency用户
const send = async () => { const send = async () => {
router.push({ path: '/item-distribution' }); router.push({ path: '/item-distribution' })
}; }
// const BDList = ref([]) // BD列表
const BDList = ref(
Array.from(
{ length: 20 },
(item) =>
(item = {
name: 'BD2',
id: '456',
host: '333',
agency: '444',
})
)
); // BD列表
const agencyList = ref([
{
name: 'agency1',
id: '666',
thisMonth: '112',
lastMonth: '223',
},
{
name: 'agency2',
id: '777',
thisMonth: '334',
lastMonth: '445',
},
]); // 代理列表
const rechargeDetail = ref({
total: '123456',
lastMonth: '12345',
}); //代理消费金额
// 页面加载时获取申请记录 // 页面加载时获取申请记录
usePageInitializationWithConfig('ADMIN_CENTER'); usePageInitializationWithConfig('ADMIN_CENTER')
const totalAgencyCurrent = ref(2); //代理的总数量 const BDList = ref([]) // BD列表
const agencyCurrent = ref(1); //第几页 const BDCurrent = ref(1) //BD列表第几页
const showLoading = ref(true); const showBDLoading = ref(true) //触底加载功能
const totalRechargeDetail = ref([]) //代理消费金额
const agencyList = ref([]) // 代理列表
const agencyCurrent = ref(1) //代理列表第几页
const showAgLoading = ref(true) //触底加载功能
onMounted(async () => { onMounted(async () => {
if (tabItems.value.length > 0) { if (tabItems.value.length > 0) {
underlineStyle.value; // 触发计算属性更新 underlineStyle.value // 触发计算属性更新
} }
const userId = getUserId(); getBDs() // 获取BD列表
const resBDList = await getBDList(userId); getAgencise() // 获取代理列表
console.log('resBDList:', resBDList); getAgencyMonthsRecharge() //获取代理总支付
getAgencise();
// 开始监听底部元素 // 开始监听底部元素
if (loadmore.value) { if (BDloadmore.value) {
observer.observe(loadmore.value); observer.observe(BDloadmore.value)
} }
}); // 开始监听底部元素
if (Agloadmore.value) {
observer.observe(Agloadmore.value)
}
})
// 获取BD列表
const getBDs = async () => {
let data = {
userId: getUserId(),
cursor: BDCurrent.value,
limit: 20,
}
const resBDList = await getBDList(data)
console.log('resBDList:', resBDList)
if (resBDList.status && resBDList.body) {
BDList.value.push(...resBDList.body.records)
if (resBDList.body.total <= resBDList.body.current * resBDList.body.size) {
showBDLoading.value = false
}
}
}
// 获取代理列表
const getAgencyMonthsRecharge = async () => {
const resTotalRecharge = await getAgencyTotalRecharge()
console.log('resTotalRecharge:', resTotalRecharge)
if (resTotalRecharge.status && resTotalRecharge.body) {
totalRechargeDetail.value = resTotalRecharge.body
}
}
// 获取代理列表 // 获取代理列表
const getAgencise = async () => { const getAgencise = async () => {
let agencyData = { let data = {
pageQuery: { cursor: agencyCurrent.value,
cursor: agencyCurrent.value, limit: 20,
limit: 20, }
searchCount: true, const resagencyList = await getAgencyList(data)
}, console.log('resagencyList:', resagencyList)
sysOrigin: 'LIKEI',
close: false,
};
const resagencyList = await getAgencyList(agencyData);
console.log('resagencyList:', resagencyList);
if (resagencyList.status && resagencyList.body) { if (resagencyList.status && resagencyList.body) {
totalAgencyCurrent.value = resagencyList.body.total; agencyList.value.push(...resagencyList.body.records)
agencyCurrent.value = resagencyList.body.current;
if (resagencyList.body.total <= resagencyList.body.current * resagencyList.body.size) { if (resagencyList.body.total <= resagencyList.body.current * resagencyList.body.size) {
// showLoading.value = false showAgLoading.value = false
} }
} }
}; }
// 获取底部加载div // 获取底部加载div
const loadmore = ref(null); const BDloadmore = ref(null)
const Agloadmore = ref(null)
const test = () => { const debouceGetBDList = useThrottle(getBDs, 1000)
console.log('加载数据1'); const debouceGetAgList = useThrottle(getAgencise, 1000)
};
const debouceGetBDList = useThrottle(test, 1000);
// IntersectionObserver配置 // IntersectionObserver配置
const observer = new IntersectionObserver((entries) => { const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => { entries.forEach((entry) => {
if (entry.intersectionRatio > 0) { if (entry.intersectionRatio > 0) {
debouceGetBDList(); console.log('监控')
// 被观察者进入视口
if (totalAgencyCurrent.value > agencyCurrent.value) { // 根据目标元素执行对应操作
// console.log('加载数据') if (entry.target == BDloadmore.value && BDList.value.length != 0) {
BDCurrent.value++
debouceGetBDList()
}
if (entry.target == Agloadmore.value && agencyList.value.length != 0) {
agencyCurrent.value++
debouceGetAgList()
} }
} }
}); })
}); })
const formatPrice = (value) => {
if (value && value != 0) {
return Number(value).toFixed(2)
}
return 0
}
</script> </script>
<style scoped> <style scoped>