You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
307 lines
7.1 KiB
307 lines
7.1 KiB
<template>
|
|
<view class="container">
|
|
<!-- 顶部导航栏 -->
|
|
<view class="nav-bar" :style="{height: (statusBarHeight + 88) + 'rpx', paddingTop: statusBarHeight + 'px'}">
|
|
<view class="back" @tap="goBack">
|
|
<uni-icons type="left" size="25" color="#fff"></uni-icons>
|
|
</view>
|
|
<text class="title">钱包流水</text>
|
|
</view>
|
|
<!-- banner -->
|
|
<view class="banner" :style="{marginTop: (statusBarHeight + 88) + 'rpx', height: (bannerBaseHeight + statusBarHeight + 88) + 'rpx'}">
|
|
<image class="banner-bg" src="/static/my/钱包流水.png" mode="aspectFill"></image>
|
|
<!-- <view class="banner-content">
|
|
<image class="wallet-icon" src="/static/wallet/wallet-3d.png" mode="aspectFit"></image>
|
|
</view> -->
|
|
</view>
|
|
|
|
<!-- 账户余额 -->
|
|
<view class="balance-card">
|
|
<view class="balance-info">
|
|
<text class="label">账户</text>
|
|
<view class="amount">
|
|
<text class="symbol">¥</text>
|
|
<text class="value">8848</text>
|
|
</view>
|
|
</view>
|
|
<button class="withdraw-btn" @tap="withdraw">提现</button>
|
|
</view>
|
|
|
|
<!-- 记录切换标签 -->
|
|
<view class="record-tabs">
|
|
<view
|
|
class="tab-item"
|
|
:class="{ active: currentTab === 'settlement' }"
|
|
@tap="switchTab('settlement')"
|
|
>
|
|
结算日志
|
|
</view>
|
|
<view
|
|
class="tab-item"
|
|
:class="{ active: currentTab === 'withdrawal' }"
|
|
@tap="switchTab('withdrawal')"
|
|
>
|
|
提现记录
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 记录列表 -->
|
|
<scroll-view class="record-list" scroll-y>
|
|
<template v-if="currentTab === 'settlement'">
|
|
<view class="record-item" v-for="(item, index) in settlementRecords" :key="index">
|
|
<view class="record-info">
|
|
<text class="type">{{ item.type }}</text>
|
|
<text class="amount">¥{{ item.amount }}</text>
|
|
</view>
|
|
<text class="date">{{ item.date }}</text>
|
|
</view>
|
|
</template>
|
|
<template v-else>
|
|
<view class="record-item" v-for="(item, index) in withdrawalRecords" :key="index">
|
|
<view class="record-info">
|
|
<text class="type">{{ item.type }}</text>
|
|
<text class="amount">¥{{ item.amount }}</text>
|
|
</view>
|
|
<text class="date">{{ item.date }}</text>
|
|
</view>
|
|
</template>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import pullRefreshMixin from '@/pages/mixins/pullRefreshMixin.js'
|
|
|
|
export default {
|
|
mixins: [pullRefreshMixin],
|
|
data() {
|
|
return {
|
|
statusBarHeight: 0,
|
|
bannerBaseHeight: 300,
|
|
currentTab: 'settlement',
|
|
settlementRecords: [
|
|
{ type: '回收结算', date: '04-27', amount: '100.24' },
|
|
{ type: '回收结算', date: '04-23', amount: '171.42' },
|
|
{ type: '回收结算', date: '04-17', amount: '122.02' },
|
|
{ type: '回收结算', date: '04-12', amount: '128.87' },
|
|
{ type: '回收结算', date: '04-12', amount: '106.37' },
|
|
{ type: '佣金结算', date: '04-09', amount: '119.90' },
|
|
{ type: '佣金结算', date: '04-09', amount: '160.76' },
|
|
{ type: '佣金结算', date: '04-07', amount: '132.02' },
|
|
{ type: '佣金结算', date: '03-29', amount: '172.29' }
|
|
],
|
|
withdrawalRecords: [
|
|
{ type: '提现记录', date: '04-27', amount: '10' },
|
|
{ type: '提现记录', date: '04-23', amount: '60' },
|
|
{ type: '提现记录', date: '04-17', amount: '10' },
|
|
{ type: '提现记录', date: '04-12', amount: '110' },
|
|
{ type: '提现记录', date: '04-12', amount: '180' },
|
|
{ type: '提现记录', date: '04-09', amount: '30' },
|
|
{ type: '提现记录', date: '04-09', amount: '130' },
|
|
{ type: '提现记录', date: '04-07', amount: '160' },
|
|
{ type: '提现记录', date: '03-29', amount: '170' }
|
|
]
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
|
|
},
|
|
methods: {
|
|
async onRefresh() {
|
|
// 模拟刷新数据
|
|
await new Promise(resolve => setTimeout(resolve, 1000))
|
|
uni.stopPullRefresh()
|
|
},
|
|
goBack() {
|
|
uni.navigateBack()
|
|
},
|
|
switchTab(tab) {
|
|
this.currentTab = tab
|
|
},
|
|
withdraw() {
|
|
uni.navigateTo({
|
|
url: '/pages/subcomponent/withdraw'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
min-height: 100vh;
|
|
background: #fff;
|
|
}
|
|
|
|
.nav-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
background: linear-gradient(to right, #f68240 0%, #fc8940 10%);
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 999;
|
|
}
|
|
|
|
.back {
|
|
padding: 20rpx;
|
|
margin-left: -20rpx;
|
|
}
|
|
|
|
.title {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-size: 34rpx;
|
|
font-weight: 500;
|
|
color: #fff;
|
|
}
|
|
|
|
.banner {
|
|
position: relative;
|
|
background: linear-gradient(to right, #f78b49, #fc8940);
|
|
overflow: hidden;
|
|
border-radius: 0 0 30rpx 30rpx;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.banner-bg {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
// opacity: 0.8;
|
|
}
|
|
|
|
.banner-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.wallet-icon {
|
|
width: 240rpx;
|
|
height: 240rpx;
|
|
}
|
|
}
|
|
|
|
.balance-card {
|
|
margin: -60rpx 30rpx 0;
|
|
padding: 30rpx;
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: relative;
|
|
z-index: 2;
|
|
|
|
.balance-info {
|
|
.label {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.amount {
|
|
margin-top: 8rpx;
|
|
display: flex;
|
|
align-items: baseline;
|
|
|
|
.symbol {
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.value {
|
|
font-size: 48rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-left: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.withdraw-btn {
|
|
width: 160rpx;
|
|
height: 70rpx;
|
|
background: #FFB74D;
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
border-radius: 35rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: none;
|
|
|
|
&::after {
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.record-tabs {
|
|
display: flex;
|
|
padding: 20rpx 0;
|
|
border-bottom: 1rpx solid #f5f5f5;
|
|
|
|
.tab-item {
|
|
position: relative;
|
|
padding: 16rpx 0;
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
flex: 1;
|
|
text-align: center;
|
|
|
|
&.active {
|
|
color: #333;
|
|
font-weight: 500;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: -21rpx;
|
|
width: 48rpx;
|
|
height: 2rpx;
|
|
background: #FFB74D;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.record-list {
|
|
height: calc(100vh - 88rpx - 300rpx + 60rpx - 120rpx - 71rpx);
|
|
|
|
.record-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 30rpx;
|
|
border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
|
|
|
|
.record-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 12rpx;
|
|
|
|
.type {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.amount {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
.date {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
</style>
|