Front-end Vue tab switching refreshes the interface list [switching to pass different parameters]

Directory

• • Example 1: The source code is as follows
  • Example 2: Practical combat 1: The picture is as follows
  • Example 2: Practical combat 1: The source code is as follows
  • Example 3: Practical combat 2: The picture is as follows
  • Example 3: Practical combat 2: The source code is as follows
  • at last

Applicable to all front-ends, written in uniapp

Example 1: The source code is as follows

<template>
<view class="content">
<view class="tab-container">
<view class="tab-item" :class="{ active: currentTab === 'Normal' }" @click="changeTab('Normal')">
Normal: 50/person
</view>
<view class="tab-item" :class="{ active: currentTab === 'inactive' }" @click="changeTab('inactive')">
Inactive: 1/person
</view>

<!-- <view class="tab-item" :class="{ active: currentTab === 'Normal' }" @click="changeTab('Normal')" >
<view :class="{ bottomline: currentTab === 'interchange' }">Normal: 50/person</view>
</view>
<view class="tab-item" :class="{ active: currentTab === 'inactive' }" @click="changeTab('inactive')">
<view :class="{ bottomline: currentTab === 'Transfer' }">Inactive: 1/person</view>
</view> -->
</view>
<view class="list-container">
<view v-if="currentTab === 'Normal'">
<view class="list-item" v-if="tableData.length == 0">
No points details yet
</view>
<view class="list-item" v-for="(item, index) in tableData" :key="index" v-else>
<view class="right-item">
<view class="time">{<!-- -->{ item.create_time }}</view>
<view class="amount-inner">
<view class="amount">Amount:</view>
<view class="amount-current">{<!-- -->{ item.money }}</view>
</view>
</view>
</view>
</view>
<view v-else-if="currentTab === 'inactive'">
<view class="list-item" v-if="tableData.length == 0">
No points details yet
</view>
<view class="list-item" v-for="(item, index) in tableData" :key="index" v-else>
<view class="right-item">
<view class="time">{<!-- -->{ item.create_time }}</view>
<view class="amount-inner">
<view class="amount">Amount:</view>
<view class="amount-current">{<!-- -->{ item.money }}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {<!-- -->

data() {<!-- -->
return {<!-- -->
currentTab: 'normal',
// Get all data from server
tableData: []
}
},
mounted() {<!-- -->
this.getListData();
},
methods: {<!-- -->
// Make different logical judgments after switching Tab labels
changeTab(tab) {<!-- -->
this.currentTab = tab;
this.tableData = []; // Get all data from the server
if (this.currentTab === 'normal') {<!-- -->
this.getListData(0); //Pass the type parameter in the calling interface: 0: active 10: inactive
} else if (this.currentTab === 'inactive') {<!-- -->
this.getListData(10);
}
},
// Get all data from server
getListData(_type = 0) {<!-- -->
let self = this;
uni.showLoading({<!-- -->
title: 'Loading'
});
self._post(
'user.user/treeList', {<!-- -->
type: _type
},
function(res) {<!-- -->
self.tableData = res.data.agent_list;
// console.log(res.data.agent_list,'resss');
}
);
},
}
}
</script>

<style scoped>
.content {<!-- -->
display: flex;
flex-direction: column;
}

.tab-container {<!-- -->
display: flex;
}

/*Default style tab title default style*/
.tab-item {<!-- -->
font-size: 28rpx;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #3D3D3D;
line-height: 52rpx;
}

/* Select style tab title Select style */
.tab-item.active {<!-- -->
font-size: 28rpx;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #891F50;
line-height: 52rpx;
}

.bottomline {<!-- -->
border-bottom: 1rpx solid blue;
}
</style>

Example 2: Practical combat 1: The picture is as follows

Example 2: Practical combat 1: The source code is as follows

<template>
<view class="container">
<!-- Title -->
<view class="title">Assets</view>

<!-- Rectangular box -->
<view class="box-container">
<view class="box">
<view>
<view class="box-title">Shopping Points</view>
<view class="box-moeny">
<view class="box-value">${<!-- -->{ shoppingPoints }}</view>
<view class="box-gap">≈</view>
<view class="box-change">￥{<!-- -->{ exchangeMoney }}</view>
</view>
</view>
</view>
<view class="box tops">
<view>
<view class="box-title">Cash points</view>
<view class="box-moeny">
<view class="box-value">${<!-- -->{ moneyPoints }}</view>
<view class="box-gap">≈</view>
<view class="box-change">￥{<!-- -->{ cashExchange }}</view>
</view>
</view>
<view>
<view class="box-get" @click="goToDetail">Mutual transfer/exchange/withdrawal</view>
</view>
</view>
</view>

<!--Tab label switching -->
<view class="tab-container">
<view class="tab-item" :class="{ active: currentTab === 'All' }" @click="changeTab('All')">
<view :class="{ bottomline: currentTab === 'all' }">All</view>
</view>
<view class="tab-item" :class="{ active: currentTab === 'Recommended' }" @click="changeTab('Recommended')">
<view :class="{ bottomline: currentTab === 'Recommended' }">Recommended</view>
</view>
<view class="tab-item" :class="{ active: currentTab === 'leader' }" @click="changeTab('leader')">
<view :class="{ bottomline: currentTab === 'Leader' }">Leader</view>
</view>
<view class="tab-item" :class="{ active: currentTab === 'Extension' }" @click="changeTab('Extension')">
<view :class="{ bottomline: currentTab === 'Extension' }">Extension</view>
</view>
<view class="tab-item" :class="{ active: currentTab === 'rising star' }" @click="changeTab('rising star')">
<view :class="{ bottomline: currentTab === 'rising star' }">rising star</view>
</view>
<view class="tab-item" :class="{ active: currentTab === 'Dividend' }" @click="changeTab('Dividend')">
<view :class="{ bottomline: currentTab === 'Dividend' }">Dividend</view>
</view>
</view>

<!-- List display -->
<view class="list-container">
<view v-if="currentTab === 'All'">
<view class="list-item" v-if="listDataAll.length == 0">
No points details yet
</view>
<view class="list-item" v-for="(item, index) in listDataAll" :key="index" v-else>
<view class="left-item">
<view class="income-name">Income</view>
<view class="reward-reason">{<!-- -->{ item.describe }}</view>
</view>
<view class="right-item">
<view class="time">{<!-- -->{ item.create_time }}</view>
<view class="amount-inner">
<view class="amount">Amount:</view>
<view class="amount-current">${<!-- -->{ item.money }}</view>
</view>
</view>
</view>
</view>
<view v-else-if="currentTab === 'Recommended'">
<view class="list-item" v-if="listDataAll.length == 0">
No points details yet
</view>
<view class="list-item" v-for="(item, index) in listDataAll" :key="index" v-else>
<view class="left-item">
<view class="income-name">Income</view>
<view class="reward-reason">{<!-- -->{ item.describe }}</view>
</view>
<view class="right-item">
<view class="time">{<!-- -->{ item.create_time }}</view>
<view class="amount-inner">
<view class="amount">Amount:</view>
<view class="amount-current">{<!-- -->{ item.money }}</view>
</view>
</view>
</view>
</view>
<view v-else-if="currentTab === 'leader'">
<view class="list-item" v-if="listDataAll.length == 0">
No points details yet
</view>
<view class="list-item" v-for="(item, index) in listDataAll" :key="index" v-else>
<view class="left-item">
<view class="income-name">Income</view>
<view class="reward-reason">{<!-- -->{ item.describe }}</view>
</view>
<view class="right-item">
<view class="time">{<!-- -->{ item.create_time }}</view>
<view class="amount-inner">
<view class="amount">Amount:</view>
<view class="amount-current">{<!-- -->{ item.money }}</view>
</view>
</view>
</view>
</view>
<view v-else-if="currentTab === 'Extended'">
<view class="list-item" v-if="listDataAll.length == 0">
No points details yet
</view>
<view class="list-item" v-for="(item, index) in listDataAll" :key="index" v-else>
<view class="left-item">
<view class="income-name">Income</view>
<view class="reward-reason">{<!-- -->{ item.describe }}</view>
</view>
<view class="right-item">
<view class="time">{<!-- -->{ item.create_time }}</view>
<view class="amount-inner">
<view class="amount">Amount:</view>
<view class="amount-current">{<!-- -->{ item.money }}</view>
</view>
</view>
</view>
</view>
<view v-else-if="currentTab === 'rising star'">
<view class="list-item" v-if="listDataAll.length == 0">
No points details yet
</view>
<view class="list-item" v-for="(item, index) in listDataAll" :key="index" v-else>
<view class="left-item">
<view class="income-name">Income</view>
<view class="reward-reason">{<!-- -->{ item.describe }}</view>
</view>
<view class="right-item">
<view class="time">{<!-- -->{ item.create_time }}</view>
<view class="amount-inner">
<view class="amount">Amount:</view>
<view class="amount-current">{<!-- -->{ item.money }}</view>
</view>
</view>
</view>
</view>
<view v-else-if="currentTab === 'Dividend'">
<view class="list-item" v-if="listDataAll.length == 0">
No points details yet
</view>
<view class="list-item" v-for="(item, index) in listDataAll" :key="index" v-else>
<view class="left-item">
<view class="income-name">Income</view>
<view class="reward-reason">{<!-- -->{ item.describe }}</view>
</view>
<view class="right-item">
<view class="time">{<!-- -->{ item.create_time }}</view>
<view class="amount-inner">
<view class="amount">Amount:</view>
<view class="amount-current">{<!-- -->{ item.money }}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>

<script>
export default {<!-- -->
data() {<!-- -->
return {<!-- -->
currentTab: 'All', // Currently selected Tab label
// Get all data from server
listDataAll: [],
//Shopping Points USD
shoppingPoints: 0,
// Shopping points RMB
exchangeMoney: 0,
// Cash Points USD
moneyPoints: 0,
//Exchange cash points for US dollars
cashExchange: 0,
}
},
// Get initial data
mounted() {<!-- -->
this.getCurrentMoney();
this.fetchData();
},
methods: {<!-- -->
// Make different logical judgments after switching Tab labels
changeTab(tab) {<!-- -->
this.currentTab = tab;
this.listDataAll = [];
if (this.currentTab === 'all') {<!-- -->
this.fetchData(0);
} else if (this.currentTab === 'recommended') {<!-- -->
this.fetchData(10);
} else if (this.currentTab === 'leader') {<!-- -->
this.fetchData(20);
} else if (this.currentTab === 'Extension') {<!-- -->
this.fetchData(30);
} else if (this.currentTab === 'rising star') {<!-- -->
this.fetchData(60);
} else if (this.currentTab === 'Dividend') {<!-- -->
this.fetchData(70);
}
},
// Jump to points redemption
goToDetail() {<!-- -->
uni.navigateTo({<!-- -->
url: './list/list'
});
},
// Get the real-time exchange rate and display content
getCurrentMoney() {<!-- -->
let self = this;
uni.request({<!-- -->
url: 'https://vtlte.yunjingwl.com/index.php/api/settings/getExchange',
method: 'POST',
data: {<!-- -->
app_id: this.getAppId(),
},
success: (res) => {<!-- -->
if (res.data & amp; & amp; res.statusCode === 200) {<!-- -->
let exchangeRate = res.data.data.exchange_rate;
self._get('user.index/detail', {<!-- -->
url: ''
}, function(res) {<!-- -->
if (res.code == 1) {<!-- -->
self.shoppingPoints = res.data.userInfo.balance;
self.exchangeMoney = Number(String(Number(res.data.userInfo.balance) *
Number(exchangeRate))).toFixed(2);
self.moneyPoints = res.data.userInfo.cash_money;
self.cashExchange = Number(String(Number(res.data.userInfo.cash_money) *
Number(exchangeRate))).toFixed(2);
};
});
} else {<!-- -->
//Request failure handling
console.error('Request failed', res);
}
},
});
},
// Get points list by category
fetchData(_type = 0) {<!-- -->
uni.request({<!-- -->
url: 'https://vtlte.yunjingwl.com/index.php/api/balance.log/cashBalance',
method: 'POST',
data: {<!-- -->
page: 1,
list_rows: 20,
type: _type,
token: uni.getStorageSync('token') || '',
app_id: this.getAppId(),
},
success: (res) => {<!-- -->
if (res.data & amp; & amp; res.statusCode === 200) {<!-- -->
if (res.data.code == 1 & amp; & amp; res.data.data.list.data.length > 0) {<!-- -->
this.listDataAll = res.data.data.list.data;
}
} else {<!-- -->
//Request failure handling
console.error('Request failed', res);
}
},
});
}
},
};
</script>

<style scoped>
.container {<!-- -->
padding: 20rpx;
}

.title {<!-- -->
text-align: center;
font-size: 36rpx;
margin-bottom: 20rpx;
}

.box-container {<!-- -->
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20rpx;
}

.box-detail {<!-- -->
cursor: pointer
}

.box {<!-- -->
display: flex;
justify-content: space-between;
width: 85%;
padding: 40rpx;
padding-top: 60rpx;
padding-bottom: 60rpx;
background: url('../../static/product/assetspoint.png') no-repeat center center;
background-size: cover;
border-radius: 20rpx;
opacity: 1;
}

.tops {<!-- -->
margin-top: 20rpx;
background: url('../../static/product/moneypoint.png') no-repeat center center;
background-size: cover;
}

.box-title {<!-- -->
font-size: 28rpx;
margin-bottom: 10rpx;
color: #f2f2f2
}

.box-get {<!-- -->
width: 230rpx;
height: 70rpx;
background: #C55287;
font-size: 28rpx;
color: #f2f2f2;
display: flex;
font-weight: bold;
justify-content: center;
align-items: center;
border-radius: 99rpx 99rpx 99rpx 99rpx;
opacity: 1;

}

.box-moeny {<!-- -->
display: flex;
justify-content: space-around;
align-items: center;
}

.box-value {<!-- -->
font-size: 44rpx;
color: #f2f2f2;
font-weight: bold;
}

.box-gap {<!-- -->
font-size: 36rpx;
color: #f2f2f2;
margin-left: 2px;

}

.box-change {<!-- -->
font-size: 36rpx;
color: #f2f2f2;
}

.tab-container {<!-- -->
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
margin: 0 auto;
margin-bottom: 20rpx;
\t\t
}

.tab-item {<!-- -->
text-align: center;
padding: 0rpx;
font-size: 36rpx;
cursor: pointer;
height: 20px;
}
.bottomline {<!-- -->
border-bottom: 6rpx solid #C55287;
}

.list-item {<!-- -->
display: flex;
justify-content: space-evenly;
padding: 10px;
font-size: 28rpx;
border-bottom: 1px solid #891F5050;
}

.list-container {<!-- -->
padding: 20rpx;
background-color: #f2f2f2;
border-radius: 10rpx;
font-size: 16rpx;
}

.left-item,
.right-item {<!-- -->
flex: 1;
}

.right-item {<!-- -->
text-align: right;
}

.amount-inner {<!-- -->
display: flex;
justify-content: start;
align-items: center;
float: right;
}

.income-name {<!-- -->
width:56rpx;
font-weight: bold;
border-bottom: 2px solid #891F50;
}

.reward-reason {<!-- -->
margin-top: 5px;
font-size: 32rpx
}

.time {<!-- -->
font-size: 28rpx;
font-weight: 300;
}

.amount,
.amount-current {<!-- -->
margin-top: 5px;
}

.amount-current {<!-- -->
color: #891F50;
font-size: 32rpx;
font-weight: bold;
}
</style>

Example 3: Practical combat 2: The picture is as follows

Example 3: Practical combat 2: The source code is as follows

<template>
<view class="container">
<!-- Title -->
<view class="top-stylrify">
<view class="title">
<view class="title-back" @click="backPrivious"> & amp;lt;</view>
<view>Cash Points</view>
<view></view>
</view>
</view>
<!-- Rectangular box -->
<view class="box-container">
<view class="box tops">
<view>
<view class="box-money">
<view class="box-title">
<text>Cash Points</text>
<view class="box-gap">≈</view>
<view class="box-change">￥{<!-- -->{ cashExchange }}</view>
</view>
</view>
<view class="box-value">
<view class="box-value">${<!-- -->{ moneyPoints }}</view>
</view>
</view>
<view>
<view class="inner-change" @click="exchangePoints">Exchange</view>
<view class="inner-button">
<view class="inner-button-text" @click="changeToEachOther">Interchange</view>
<view class="inner-button-text">Withdrawal</view>
</view>
</view>
</view>
</view>
<!--Tab label switching -->
<view class="tab-container">
<view class="tab-item" :class="{ active: currentTab === 'mutual transfer' }" @click="changeTab('mutual transfer')">
<view :class="{ bottomline: currentTab === 'mutual transfer' }">mutual transfer</view>
</view>
<view class="tab-item" :class="{ active: currentTab === 'Exchange' }" @click="changeTab('Exchange')">
<view :class="{ bottomline: currentTab === 'Redeem' }">Redeem</view>
</view>
<view class="tab-item" :class="{ active: currentTab === 'Withdraw' }" @click="changeTab('Withdraw')">
<view :class="{ bottomline: currentTab === 'Withdrawal' }">Withdrawal</view>
</view>
</view>
<!-- List display -->
<view class="list-container">
<view v-if="currentTab === 'interchange'">
<view class="list-item" v-if="listDataAllDetail.length == 0">
No points details yet
</view>
<view class="list-item" v-for="(item, index) in listDataAllDetail" :key="index" v-else>
<view class="left-item">

<!-- <view class="income-name">{<!-- -->{ item.scene.text }}</view>
<view class="reward-reason">{<!-- -->{ item.describe }}</view> -->

<view class="income-name" v-if="item.scene.value == 80">{<!-- -->{ item.user.account }}</view>
<view class="income-name" v-else-if="item.scene.value == 90">Cash points</view>
<view class="income-name" v-else>{<!-- -->{ item.scene.text }}</view>



<view class="reward-reason" v-if="item.scene.value == 80">{<!-- -->{ item.convertuser.account }}</view>
<view class="income-name" v-else-if="item.scene.value == 90">Shopping points</view>
<view class="reward-reason" v-else>{<!-- -->{ item.describe }}</view>

</view>
<view class="right-item">
<view class="time">{<!-- -->{ item.create_time }}</view>
<view class="amount-inner">
<view class="amount">Amount:</view>
<view class="amount-current">{<!-- -->{ item.money }}</view>
</view>
</view>
</view>
</view>
<view v-else-if="currentTab === 'Exchange'">
<view class="list-item" v-if="listDataAllDetail.length == 0">
No points details yet
</view>
<view class="list-item" v-for="(item, index) in listDataAllDetail" :key="index" v-else>
<view class="left-item">

<!-- <view class="income-name">{<!-- -->{ item.scene.text }}</view>
<view class="reward-reason">{<!-- -->{ item.describe }}</view> -->

<!-- <view class="income-name" v-if="item.scene.value == 80">{<!-- -->{ item.user.account }}</ view> -->
<view class="income-name" v-if="item.scene.value == 90">Cash points</view>
<view class="income-name" v-else>{<!-- -->{ item.scene.text }}</view>


<!-- <view class="reward-reason" v-if="item.scene.value == 80">{<!-- -->{ item.convertuser.account }}</ view> -->
<view class="income-name" v-if="item.scene.value == 90">Shopping points</view>
<view class="reward-reason" v-else>{<!-- -->{ item.describe }}</view>
</view>
<view class="right-item">
<view class="time">{<!-- -->{ item.create_time }}</view>
<view class="amount-inner">
<view class="amount">Amount:</view>
<view class="amount-current">{<!-- -->{ item.money }}</view>
</view>
</view>
</view>
</view>
<view v-else-if="currentTab === 'Withdrawal'">
<view class="list-item" v-if="listDataAllMoney.length == 0">
No points details yet
</view>
<view class="list-item" v-for="(item, index) in listDataAllMoney" :key="index" v-else>
<img class="inner-card" src="../../../static/product/card.png">
<view class="left-item">
<view class="income-name">{<!-- -->{ item.scene.text }}</view>
<view class="reward-reason">{<!-- -->{ item.describe }}</view>
</view>
<view class="right-item">
<view class="time">{<!-- -->{ item.create_time }}</view>
<view class="amount-inner">
<view class="amount">Amount:</view>
<view class="amount-current">{<!-- -->{ item.money }}</view>
</view>
</view>
</view>
</view>
</view>
<popup-detail v-if="isPopupVisible" @close="closePopup"></popup-detail>
<popup-exchange-detail v-if="isPopupExchangeVisible" @close="closeDetailPopup"></popup-exchange-detail>
</view>
</template>

<script>
//Introduce mutual pop-up components
import PopupDetail from '../components/popup/popup.vue';
//Introduce the redemption pop-up component
import PopupExchangeDetail from '../components/popup/popupexchange.vue'
export default {<!-- -->
data() {<!-- -->
return {<!-- -->
//The currently selected Tab label
currentTab: 'interchange',
// Get all data from server
listDataAllDetail: [],
// Get the withdrawal list from the server
listDataAllMoney: [],
//Set the initial state of mutual transfer to hidden
isPopupVisible: false,
//Set the initial status of redemption and not hide it
isPopupExchangeVisible: false,
//Shopping Points USD
// shoppingPoints: 0,
// Shopping points RMB
// exchangeMoney: 0,
// Cash Points USD
moneyPoints: 0,
//Exchange cash points for US dollars
cashExchange: 0,
}
},
components: {<!-- -->
'popup-detail': PopupDetail,
'popup-exchange-detail': PopupExchangeDetail
},
// Get initial data
mounted() {<!-- -->
this.fetchDetail();
this.fetchCash();
this.getCurrentMoney();
},
methods: {<!-- -->
// Get the real-time exchange rate and display content
getCurrentMoney() {<!-- -->
let self = this;
uni.request({<!-- -->
url: 'https://vtlte.yunjingwl.com/index.php/api/settings/getExchange',
method: 'POST',
data: {<!-- -->
app_id: this.getAppId(),
},
success: (res) => {<!-- -->
if (res.data & amp; & amp; res.statusCode === 200) {<!-- -->
let exchangeRate = res.data.data.exchange_rate;
self._get('user.index/detail', {<!-- -->
url: ''
}, function(res) {<!-- -->
if (res.code == 1) {<!-- -->
// self.shoppingPoints = res.data.userInfo.balance;
// self.exchangeMoney = Number(String(Number(res.data.userInfo.balance) *
// Number(exchangeRate))).toFixed(2);

self.moneyPoints = res.data.userInfo.cash_money;
self.cashExchange = Number(String(Number(res.data.userInfo
.cash_money) *
Number(exchangeRate))).toFixed(2);
};
});
} else {<!-- -->
//Request failure handling
console.error('Request failed', res);
}
},
});
},
// Return to the assets page
backPrivious() {<!-- -->
uni.navigateBack({<!-- -->
delta: 1
});
},
//The component pops up after clicking the redemption
exchangePoints() {<!-- -->
this.isPopupExchangeVisible = true;
},
//The component pops up after clicking the mutual transfer
changeToEachOther() {<!-- -->
this.isPopupVisible = true;
},
// Make different logical judgments after switching Tab labels
changeTab(tab) {<!-- -->
this.currentTab = tab;
this.listDataAllDetail = [];
if (this.currentTab === 'interchange') {<!-- -->
this.fetchDetail(80)
} else if (this.currentTab === 'redeem') {<!-- -->
this.fetchDetail(90)
} else if (this.currentTab === 'Withdrawal') {<!-- -->
this.fetchCash()
}
},
// Get transfer and exchange records
fetchDetail(_type = 80) {<!-- -->
uni.request({<!-- -->
url: 'https://vtlte.yunjingwl.com/index.php/api/balance.log/cashBalance',
method: 'POST',
data: {<!-- -->
page: 1,
list_rows: 20,
type: _type,
token: uni.getStorageSync('token') || '',
app_id: this.getAppId(),
},
success: (res) => {<!-- -->
if (res.data & amp; & amp; res.statusCode === 200) {<!-- -->
if (res.data.code == 1) {<!-- -->
this.listDataAllDetail = res.data.data.list.data;
}
} else {<!-- -->
//Request failure handling
console.error('Request failed', res);
}
},
});
},
// Get withdrawal records
fetchCash() {<!-- -->
this._get('user.cash/lists', {<!-- -->
status: -1,
page: 1,
list_rows: 20,
}, function(res) {<!-- -->
if (res.code == 1 & amp; & amp; res.data.list.data.length > 0) {<!-- -->
this.listDataAllMoney = res.data.list.data
}
});
},
// After clicking the close button, the pop-up page is closed
closePopup() {<!-- -->
this.isPopupVisible = false;
},
// After clicking the close button, the pop-up page is closed
closeDetailPopup() {<!-- -->
this.isPopupExchangeVisible = false;
}
},
};
</script>

<style scoped>
page{<!-- -->
background: #FBFBFB;
}
.container {<!-- -->
padding: 10rpx;
}

.title {<!-- -->
text-align: center;
font-size: 36rpx;
margin-bottom: 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
}



.box-container {<!-- -->
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20rpx;
}

.box-detail {<!-- -->
cursor: pointer
}


/**Style start in details points**/
.box {<!-- -->
display: flex;
justify-content: space-between;
width: 93%;
padding-left: 20rpx;
padding-right: 20rpx;
padding-top: 60rpx;
padding-bottom: 60rpx;
background-size: cover;
border-radius: 20rpx;
opacity: 1;
}

.tops {<!-- -->
margin-top: 10rpx;
background: url('../../../static/product/moenychange.png') no-repeat center center;
background-size: cover;
}

.box-money {<!-- -->
display: flex;
align-items: center;
}

.box-title {<!-- -->
margin-bottom: 10rpx;
/* color: #f2f2f2 */
display: flex;
align-items: center;
}

.box-title text {<!-- -->
font-size: 36rpx;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
line-height: 52rpx;
}

.box-gap {<!-- -->
padding: 0 5rpx;
color: #FFF;
font-size: 36rpx;
}
\t
.box-change{<!-- -->
font-size: 36rpx;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
line-height: 52rpx;
}

.inner-button {<!-- -->
display: flex;
justify-content: center;
align-items: center;
}

.inner-button-text {<!-- -->
/* color: #f2f2f2; */
/* padding: 15rpx;
padding-left: 30rpx;
padding-right: 30rpx; */
\t\t
width: 160rpx;
height: 72rpx;
background: #C55287;
border-radius: 16rpx 16rpx 16rpx 16rpx;
opacity: 1;
\t\t
\t\t
margin-left: 20rpx;
border-radius: 10rpx;
/* font-size: 36rpx; */
\t\t
font-size: 40rpx;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
line-height: 52rpx;
display: flex;
justify-content: center;
align-items: center;
}

.inner-change {<!-- -->
/* font-size: 36rpx; */
position: relative;
/* color: #f2f2f2; */
text-align: center;
top: -50rpx;
right: -35%;
\t\t
font-size: 44rpx;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
line-height: 52rpx;
}

/**End of style in details points**/
.box-get {<!-- -->
width: 200rpx;
height: 70rpx;
background: #C55287;
font-size: 24rpx;
color: #f2f2f2;
display: flex;
font-weight: bold;
justify-content: center;
align-items: center;
border-radius: 99rpx 99rpx 99rpx 99rpx;
opacity: 1;

}

.box-value {<!-- -->
font-size: 56rpx;
color: #f2f2f2;
font-weight: bold;
}

.tab-container {<!-- -->
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
margin: 20rpx auto;
height: 86rpx;
background: #FFFFFF;
border-radius: 16rpx 16rpx 16rpx 16rpx;
opacity: 1;
}

.tab-item {<!-- -->
text-align: center;
padding: 0rpx;
cursor: pointer;
height: 20px;
\t\t
/* font-size: 36rpx; */
/* color: red; */
\t\t
font-size: 36rpx;
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
font-weight: 400;
color: #3D3D3D;
line-height: 52rpx;
}

.active::before{<!-- -->
display: block;
content: "";
width: 76rpx;
height: 12rpx;
background: #891F50;
border-radius: 238rpx 238rpx 238rpx 238rpx;
position: absolute;
top: 32rpx;
opacity: 0.8;
}

.list-item {<!-- -->
display: flex;
justify-content: space-evenly;
align-items: center;
padding: 10px;
font-size: 28rpx;
border-bottom: 1px solid #FFD2E7;
}

/* .bottomline {
border-bottom: 6rpx solid #C55287;
} */

.list-container {<!-- -->
padding: 20rpx;
background-color: #f2f2f2;
border-radius: 10rpx;
font-size: 16rpx;
}

.inner-card {<!-- -->
width: 80rpx;
height: 60rpx;
padding-right: 10rpx;
}

.left-item,
.right-item {<!-- -->
flex: 1;
}

.right-item {<!-- -->
text-align: right;
}

.amount-inner {<!-- -->
display: flex;
justify-content: start;
align-items: center;
float: right;
}

.income-name {<!-- -->
font-weight: bold;
}

.reward-reason {<!-- -->
margin-top: 5px;
font-size: 28rpx
}

.time {<!-- -->
font-size: 28rpx;
font-weight: 300;
}

.amount,
.amount-current {<!-- -->
margin-top: 5px;
}

.amount-current {<!-- -->
color: #891F50;
font-size: 32rpx;
font-weight: bold;
}
</style>

Finally

If you think the article is good, remember to give it a thumbs up, follow it, and add it to your favorites. Please correct me if there are any mistakes. If you need to reprint it, please indicate the source. Thank you! ! !