321 lines
8.1 KiB
Vue
321 lines
8.1 KiB
Vue
<template>
|
|
<div class="fullPage">
|
|
<div class="bg">
|
|
<!-- 顶部导航 -->
|
|
<GeneralHeader
|
|
:showLanguageList="true"
|
|
:title="t('my_linked_recharge_agent')"
|
|
color="black"
|
|
style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
|
|
/>
|
|
|
|
<!-- 主要内容 -->
|
|
<div
|
|
style="
|
|
padding: 12px;
|
|
|
|
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: 12px;
|
|
border: 1px solid #e5e7eb;
|
|
"
|
|
>
|
|
<div style="font: 0.8em; font-weight: 500; color: rgba(0, 0, 0, 0.4)">
|
|
{{ t('my_total_income') }}
|
|
</div>
|
|
<div style="font: 0.9em; font-weight: 600; color: rgba(0, 0, 0, 0.8)">
|
|
${{ totalRechargeDetail?.totalIncome || 0 }}
|
|
</div>
|
|
<div style="font: 0.8em; font-weight: 500; color: rgba(0, 0, 0, 0.4)">
|
|
{{ t('this_period_recharge') }}
|
|
</div>
|
|
<div style="font: 0.9em; font-weight: 600; color: rgba(0, 0, 0, 0.8)">
|
|
${{ totalRechargeDetail?.currentMonthRecharge || 0 }}
|
|
</div>
|
|
</div>
|
|
|
|
<div style="font-weight: 700">{{ t('recharge_agency_list') }}</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: 12px;
|
|
border: 1px solid #e5e7eb;
|
|
|
|
margin-bottom: 10px;
|
|
transition: all 0.3s ease-out;
|
|
"
|
|
@click="showAgencyInfo(aIndex)"
|
|
>
|
|
<div style="width: 100%; display: flex; justify-content: space-between">
|
|
<!-- 基本信息 -->
|
|
<div
|
|
style="
|
|
flex: 1;
|
|
min-width: 0;
|
|
align-self: stretch;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
gap: 4px;
|
|
"
|
|
>
|
|
<img
|
|
:src="agency.userAvatar"
|
|
alt=""
|
|
style="display: block; object-fit: cover; width: 3em; border-radius: 50%"
|
|
/>
|
|
<div
|
|
style="
|
|
flex: 1;
|
|
min-width: 0;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
gap: 4px;
|
|
"
|
|
>
|
|
<div
|
|
style="
|
|
font-weight: 700;
|
|
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
"
|
|
>
|
|
{{ agency.userNickname }}
|
|
</div>
|
|
<div style="font-weight: 700; color: rgba(0, 0, 0, 0.4)">
|
|
{{ t('user_id_prefix') }}{{ agency.account }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 展开按钮 -->
|
|
<div
|
|
style="
|
|
width: auto;
|
|
min-width: 0;
|
|
align-self: stretch;
|
|
|
|
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)">
|
|
{{ t('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)">
|
|
{{ t('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 { useI18n } from 'vue-i18n'
|
|
import { useThrottle } from '@/utils/useDebounce'
|
|
|
|
import { getAgencyList, getAgencyTotalRecharge } from '@/api/userInfo'
|
|
|
|
import GeneralHeader from '@/components/GeneralHeader.vue'
|
|
|
|
const router = useRouter()
|
|
const { t, locale } = useI18n()
|
|
|
|
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;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
@media screen and (max-width: 360px) {
|
|
* {
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 360px) {
|
|
* {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
* {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1024px) {
|
|
* {
|
|
font-size: 32px;
|
|
}
|
|
}
|
|
</style>
|