feat(新页面): 我们金币代理页面
This commit is contained in:
hzj
parent
571368152c
commit
c5c5c83a05
@ -335,6 +335,12 @@ const router = createRouter({
|
|||||||
component: () => import('../views/AdminCenter/MyAgencyTeams.vue'),
|
component: () => import('../views/AdminCenter/MyAgencyTeams.vue'),
|
||||||
meta: { requiresAuth: true },
|
meta: { requiresAuth: true },
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/my-recharge-agency',
|
||||||
|
name: 'my-recharge-agency',
|
||||||
|
component: () => import('../views/AdminCenter/MyRechargeAgency.vue'),
|
||||||
|
meta: { requiresAuth: true },
|
||||||
|
},
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@ -149,6 +149,7 @@ export const ROLE_PERMISSIONS = {
|
|||||||
'/my-BDLeader-teams', //我的BDLeader团队页面（临时开放）
|
'/my-BDLeader-teams', //我的BDLeader团队页面（临时开放）
|
||||||
'/my-BD-teams', //我的BD团队页面（临时开放）
|
'/my-BD-teams', //我的BD团队页面（临时开放）
|
||||||
'/my-agency-teams', //我的代理团队页面（临时开放）
|
'/my-agency-teams', //我的代理团队页面（临时开放）
|
||||||
|
'/my-recharge-agency', //我的金币代理团队页面（临时开放）
|
||||||
],
|
],
|
||||||
|
|
||||||
// 加载页面
|
// 加载页面
|
||||||
|
|||||||
@ -429,6 +429,7 @@ class RouteGuard {
|
|||||||
'/my-BDLeader-teams', //我的BDLeader团队页面（临时开放）
|
'/my-BDLeader-teams', //我的BDLeader团队页面（临时开放）
|
||||||
'/my-BD-teams', //我的BD团队页面（临时开放）
|
'/my-BD-teams', //我的BD团队页面（临时开放）
|
||||||
'/my-agency-teams', //我的代理团队页面（临时开放）
|
'/my-agency-teams', //我的代理团队页面（临时开放）
|
||||||
|
'/my-recharge-agency', //我的金币代理团队页面（临时开放）
|
||||||
]
|
]
|
||||||
return publicPages.includes(path)
|
return publicPages.includes(path)
|
||||||
}
|
}
|
||||||
|
|||||||
243
src/views/AdminCenter/MyRechargeAgency.vue
Normal file
243
src/views/AdminCenter/MyRechargeAgency.vue
Normal file
@ -0,0 +1,243 @@
|
|||||||
|
<template>
|
||||||
|
<div class="fullPage">
|
||||||
|
<div class="bg">
|
||||||
|
<!-- 顶部导航 -->
|
||||||
|
<GeneralHeader
|
||||||
|
title="Recharae Agency"
|
||||||
|
:backImg="imgUrl"
|
||||||
|
color="black"
|
||||||
|
style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 主要内容 -->
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<!-- 这个月总充值 -->
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
padding: 16px;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<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)">
|
||||||
|
${{ 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: 600; color: rgba(0, 0, 0, 0.8)">
|
||||||
|
${{ totalRechargeDetail[1]?.totalAmount || 0 }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-for="(agency, aIndex) in agencyList"
|
||||||
|
:key="aIndex"
|
||||||
|
style="
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
padding: 16px;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
|
||||||
|
margin-bottom: 10px;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
"
|
||||||
|
@click="showAgencyInfo(aIndex)"
|
||||||
|
>
|
||||||
|
<!-- 基本信息 -->
|
||||||
|
<div style="display: flex; justify-content: space-between">
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<img :src="agency.userAvatar" alt="" style="width: 36px; border-radius: 50%" />
|
||||||
|
<div style="margin-left: 8px">
|
||||||
|
<div style="font-weight: 700">{{ agency.name }}</div>
|
||||||
|
<div style="font-weight: 700; color: rgba(0, 0, 0, 0.4)">
|
||||||
|
ID:{{ agency.account }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<img
|
||||||
|
src="../../assets/icon/arrow.png"
|
||||||
|
alt=""
|
||||||
|
style="
|
||||||
|
width: 24px;
|
||||||
|
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
|
||||||
|
"
|
||||||
|
:class="{ rotated: aIndex == selectedAgencyIndex }"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 展示信息 -->
|
||||||
|
<transition name="info-fade">
|
||||||
|
<div style="display: flex" v-show="aIndex == selectedAgencyIndex">
|
||||||
|
<div style="flex: 1">
|
||||||
|
<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)">
|
||||||
|
${{ formatPrice(agency.thisMonth) || 0 }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="flex: 1">
|
||||||
|
<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)">
|
||||||
|
${{ formatPrice(agency.lastMonth) || 0 }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</div>
|
||||||
|
<!-- 触发加载功能 -->
|
||||||
|
<div ref="Agloadmore" v-if="showAgLoading"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { onMounted, ref } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { useThrottle } from '@/utils/useDebounce'
|
||||||
|
|
||||||
|
import { getAgencyList, getAgencyTotalRecharge } from '@/api/userInfo'
|
||||||
|
|
||||||
|
import GeneralHeader from '@/components/GeneralHeader.vue'
|
||||||
|
|
||||||
|
const imgUrl = new URL('/src/assets/icon/arrowBackBlack.png', import.meta.url).href
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
const selectedAgencyIndex = ref(-1) //选中的agency用户下标
|
||||||
|
const showAgencyInfo = (index) => {
|
||||||
|
selectedAgencyIndex.value = selectedAgencyIndex.value != index ? index : -1
|
||||||
|
} //选中的agency用户
|
||||||
|
|
||||||
|
const send = async () => {
|
||||||
|
router.push({ path: '/item-distribution' })
|
||||||
|
}
|
||||||
|
|
||||||
|
const totalRechargeDetail = ref([]) //代理消费金额
|
||||||
|
const agencyList = ref([]) // 代理列表
|
||||||
|
const agencyCurrent = ref(1) //代理列表第几页
|
||||||
|
const showAgLoading = ref(true) //触底加载功能
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
getAgencise() // 获取代理列表
|
||||||
|
getAgencyMonthsRecharge() //获取代理总支付
|
||||||
|
|
||||||
|
// 开始监听底部元素
|
||||||
|
if (Agloadmore.value) {
|
||||||
|
observer.observe(Agloadmore.value)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 获取代理列表
|
||||||
|
const getAgencyMonthsRecharge = async () => {
|
||||||
|
const resTotalRecharge = await getAgencyTotalRecharge()
|
||||||
|
console.log('resTotalRecharge:', resTotalRecharge)
|
||||||
|
if (resTotalRecharge.status && resTotalRecharge.body) {
|
||||||
|
totalRechargeDetail.value = resTotalRecharge.body
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取代理列表
|
||||||
|
const getAgencise = async () => {
|
||||||
|
let data = {
|
||||||
|
cursor: agencyCurrent.value,
|
||||||
|
limit: 20,
|
||||||
|
}
|
||||||
|
const resagencyList = await getAgencyList(data)
|
||||||
|
console.log('resagencyList:', resagencyList)
|
||||||
|
if (resagencyList.status && resagencyList.body) {
|
||||||
|
agencyList.value.push(...resagencyList.body.records)
|
||||||
|
if (resagencyList.body.total <= resagencyList.body.current * resagencyList.body.size) {
|
||||||
|
showAgLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const Agloadmore = ref(null)
|
||||||
|
|
||||||
|
const debouceGetAgList = useThrottle(getAgencise, 1000)
|
||||||
|
|
||||||
|
// IntersectionObserver配置
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach((entry) => {
|
||||||
|
if (entry.intersectionRatio > 0) {
|
||||||
|
console.log('监控')
|
||||||
|
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>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
* {
|
||||||
|
color: black;
|
||||||
|
font-family: 'SF Pro';
|
||||||
|
}
|
||||||
|
|
||||||
|
.fullPage {
|
||||||
|
background-color: #ffffff;
|
||||||
|
min-height: 100vh;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg {
|
||||||
|
width: 100vw;
|
||||||
|
min-height: 100vh;
|
||||||
|
background-image: url(../../assets/images/secondBg.png);
|
||||||
|
background-size: 100% auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabName {
|
||||||
|
color: #00000066;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabName-active {
|
||||||
|
color: black;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-fade-enter-from,
|
||||||
|
.info-fade-leave-to {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-fade-enter-active {
|
||||||
|
transition: all 0.5s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-fade-leave-active {
|
||||||
|
transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.rotated {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user