feat(新页面): 我们金币代理页面
This commit is contained in:
hzj
parent
571368152c
commit
c5c5c83a05
@ -335,6 +335,12 @@ const router = createRouter({
|
||||
component: () => import('../views/AdminCenter/MyAgencyTeams.vue'),
|
||||
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-BD-teams', //我的BD团队页面（临时开放）
|
||||
'/my-agency-teams', //我的代理团队页面（临时开放）
|
||||
'/my-recharge-agency', //我的金币代理团队页面（临时开放）
|
||||
],
|
||||
|
||||
// 加载页面
|
||||
|
||||
@ -429,6 +429,7 @@ class RouteGuard {
|
||||
'/my-BDLeader-teams', //我的BDLeader团队页面（临时开放）
|
||||
'/my-BD-teams', //我的BD团队页面（临时开放）
|
||||
'/my-agency-teams', //我的代理团队页面（临时开放）
|
||||
'/my-recharge-agency', //我的金币代理团队页面（临时开放）
|
||||
]
|
||||
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