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.
486 lines
12 KiB
486 lines
12 KiB
<template>
|
|
<view class="container container-with-lines full-height-with-titile">
|
|
<!-- 顶部Tabs -->
|
|
<view class="nav-bar" style="">
|
|
<!-- <text class="nav-title">{{this.$languageData.settings.transRecords}}</text> -->
|
|
<u-tabs @change="tabChg" scrollable
|
|
:list="[{name:$languageData.tmp.all},{name:$languageData.tmp.transferAccounts},
|
|
{name:$languageData.tmp.proxyPayment},{name:$languageData.tmp.payment},
|
|
{name:$languageData.tmp.receivePayment},{name:$languageData.tmp.withdrawal}]"></u-tabs>
|
|
</view>
|
|
<!-- 搜索过滤区 -->
|
|
<view class="search-section">
|
|
<view class="search-wrapper">
|
|
<uni-icons type="search" size="16" color="#666"></uni-icons>
|
|
<input class="search-input" type="text" v-model="params.key" @blur="searByName()"
|
|
:placeholder="this.$languageData.settings.tranObjPh" @input="handleSearch" />
|
|
</view>
|
|
<view class="date-picker">
|
|
<picker mode="date" fields="month" :value="params.key2" @change="handleDateChange">
|
|
<view class="picker-text">
|
|
<text>{{ params.key2 || $languageData.settings.chooseMonth}}</text>
|
|
<uni-icons type="calendar" size="16" color="#666"></uni-icons>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<view
|
|
style="display: flex; justify-content: space-around; padding: 16rpx 0; background-color: #f5f7fa; border-radius: 12rpx; margin-top: 14rpx;">
|
|
<view style="display: flex; flex-direction: column;">
|
|
<view style="color: #333;">{{$languageData.account.outcome}}</view>
|
|
<view style="display: flex; justify-content: baseline; align-items: baseline;">
|
|
<u-count-to :startVal="outcome" :endVal="outcome" :decimals="2"></u-count-to>
|
|
<view style="padding-left: 4px; color: #696266;">KIP</view>
|
|
</view>
|
|
</view>
|
|
<view style="display: flex; flex-direction: column;">
|
|
<view style="color: #333;">{{$languageData.account.income}}</view>
|
|
<view style="display: flex; justify-content: baseline; align-items: baseline;">
|
|
<u-count-to :startVal="income" :endVal="income" :decimals="2"></u-count-to>
|
|
<view style="padding-left: 4px; color: #696266;">KIP</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-show="false" style="display: flex; justify-content: space-around; margin-top: 15px;">
|
|
<view>
|
|
<button @click="onRefresh" style="background-color: #2C53CA; color: #fff; font-size: 15px;
|
|
height: 58rpx; line-height: 58rpx; border-radius: 14rpx;" type="primary">
|
|
{{$languageData.settings.query}}
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 交易记录列表 -->
|
|
<scroll-view class="record-list" scroll-y @scrolltolower="loadMore" refresher-enabled
|
|
:refresher-triggered="isRefreshing" @refresherrefresh="onRefresh">
|
|
<view v-if="recordList.length > 0">
|
|
<view v-for="(item, index) in recordList" :key="index" class="record-item" @tap="viewDetail(item)">
|
|
<view class="record-header">
|
|
<!-- <text class="record-id">{{ item.senderName }}</text> -->
|
|
<text class="record-id">{{ item.billCode }}</text>
|
|
<view class="record-amount">
|
|
<text class="amount-value" :style="{ color: getColor(item.changeBalance) }">
|
|
{{item.changeBalance>0?'+':''}}{{ item.changeBalance }} (KIP)
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<view class="record-content">
|
|
<text class="record-time">{{ item.timeFormat }}</text>
|
|
<uni-tag :inverted="true" :text="item.typeStr" />
|
|
<!-- <uni-tag :inverted="true" :text="item.typeStr" :type="getStatusText(item.type)" /> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 空状态 -->
|
|
<view v-else class="empty-state">
|
|
<uni-icons type="info" size="64" color="#999"></uni-icons>
|
|
<text class="empty-text">{{this.$languageData.settings.bizEmpty}}</text>
|
|
</view>
|
|
|
|
<!-- 加载状态 -->
|
|
<view v-if="isLoading && recordList.length > 0" class="loading-more">
|
|
<text>{{this.$languageData.settings.loading}}</text>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<!-- <loading ref="loading" :custom="false" :shadeClick="false" :type="1" /> -->
|
|
</view>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import {
|
|
getTransRecord
|
|
} from '@/api/account/transactionRecord.js'
|
|
import {
|
|
getCurrentDate
|
|
} from '@/utils/common.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
searchText: '',
|
|
selectedDate: '',
|
|
recordList: [],
|
|
showList: [],
|
|
isLoading: false,
|
|
isRefreshing: false,
|
|
page: 1,
|
|
params: {
|
|
id: this.$store.state.user.userId,
|
|
userId: this.$store.state.user.userId,
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
phonenumber: '',
|
|
key: '',
|
|
key2: getCurrentDate(), //获取当前年月,
|
|
type: ""
|
|
},
|
|
}
|
|
},
|
|
computed: {
|
|
income() {
|
|
return this.showList.filter(i => i.changeBalance > 0).reduce((tot, item) => tot + item.changeBalance, 0) ||
|
|
0
|
|
},
|
|
outcome() {
|
|
return -this.showList.filter(i => i.changeBalance < 0).reduce((tot, item) => tot + item.changeBalance,
|
|
0) || 0
|
|
}
|
|
},
|
|
created() {
|
|
this.selectRecordList();
|
|
},
|
|
onLoad(item) {
|
|
|
|
//TODO
|
|
//this.showList = this.recordList
|
|
if (item.data) {
|
|
try {
|
|
let jsonString = decodeURIComponent(item.data); // 解码 JSON 字符串
|
|
let obj = JSON.parse(jsonString); // 解析为 JSON 对象
|
|
this.params.type = obj.type
|
|
this.params.id = obj.id
|
|
console.log("this.params：", this.params);
|
|
} catch (error) {
|
|
console.error("解析 JSON 失败：", error);
|
|
}
|
|
}
|
|
// uni.setNavigationBarTitle({title:"Ledger"})
|
|
|
|
},
|
|
methods: {
|
|
//tab 切换
|
|
tabChg(e) {
|
|
if (e.index == 0) {
|
|
this.params.type = ""
|
|
} else if (e.index == 1) {
|
|
this.params.type = "BTR"; //转账
|
|
} else if (e.index == 2) {
|
|
this.params.type = "BPY"; //代缴
|
|
} else if (e.index == 3) {
|
|
this.params.type = "BPT"; //付款
|
|
} else if (e.index == 4) {
|
|
this.params.type = "BRT"; //收款
|
|
} else if (e.index == 5) {
|
|
this.params.type = "BWL"; //提现
|
|
} else if (e.index == 6) {
|
|
this.params.type = "BRE"; //充值
|
|
}
|
|
this.selectRecordList();
|
|
},
|
|
searByName(name) {
|
|
if (this.params.key.length !== 0)
|
|
this.showList = this.recordList.filter(i => i.remark.includes(this.params.key))
|
|
|
|
},
|
|
getColor(value) {
|
|
if (value > 0) {
|
|
return "green"; // 大于0时字体颜色为绿色
|
|
} else if (value < 0) {
|
|
return "red"; // 小于0时字体颜色为红色
|
|
} else {
|
|
return "black"; // 等于0时字体颜色为黑色（可选）
|
|
}
|
|
},
|
|
selectRecordList() {
|
|
getTransRecord(this.params).then(res => {
|
|
this.recordList = res.data;
|
|
this.recordList.forEach(item => {
|
|
item.billCode = item.billCode.split("@")[0];
|
|
if (item.billCode == "BTR") {
|
|
item.billCode = this.$languageData.tmp.transferAccounts; //转账
|
|
} else if (item.billCode == "BPY") {
|
|
item.billCode = this.$languageData.tmp.proxyPayment; //代缴
|
|
} else if (item.billCode == "BPT") {
|
|
item.billCode = this.$languageData.tmp.payment; //付款
|
|
} else if (item.billCode == "BRT") {
|
|
item.billCode = this.$languageData.tmp.receivePayment; //收款
|
|
} else if (item.billCode == "BWL") {
|
|
item.billCode = this.$languageData.tmp.withdrawal; //提现
|
|
} else if (item.billCode == "BRE") {
|
|
item.billCode = this.$languageData.tmp.recharge; //充值
|
|
} else {
|
|
item.billCode = this.$languageData.tmp.other; //其他
|
|
}
|
|
})
|
|
}).catch(e => {
|
|
//this.$refs.loading.close();
|
|
})
|
|
//this.$refs.loading.close();
|
|
//TODO
|
|
if (false) {
|
|
this.$nextTick(() => {
|
|
this.$refs.loading.open();
|
|
})
|
|
|
|
}
|
|
},
|
|
mockrecordList() {
|
|
const statuses = ['success', 'pending', 'failed']
|
|
return Array(10).fill(0).map(function(_, index) {
|
|
return {
|
|
sendName: 'TX' + Date.now() + index,
|
|
time: '2024-01-15 14:30:00',
|
|
amount: Math.floor(Math.random() * 10000),
|
|
status: statuses[Math.floor(Math.random() * statuses.length)]
|
|
}
|
|
})
|
|
},
|
|
handleSearch() {
|
|
// 实现搜索逻辑
|
|
this.selectRecordList()
|
|
},
|
|
handleDateChange(e) {
|
|
//TODO
|
|
if (e.detail.value !== '2025-05') {
|
|
this.showList = []
|
|
} else {
|
|
this.showList = [...this.recordList]
|
|
}
|
|
this.params.key2 = e.detail.value
|
|
// console.log("this.selectedDate---",this.selectedDate)
|
|
// 实现日期筛选逻辑
|
|
this.selectRecordList()
|
|
},
|
|
// 加载更多
|
|
loadMore() {
|
|
if (this.isLoading) return
|
|
this.isLoading = true
|
|
var self = this
|
|
setTimeout(function() {
|
|
self.params.pageSize += 10
|
|
self.selectRecordList()
|
|
self.isLoading = false
|
|
}, 1000)
|
|
},
|
|
// 下拉刷新
|
|
onRefresh() {
|
|
this.isRefreshing = true
|
|
var self = this
|
|
setTimeout(function() {
|
|
self.params.pageSize = 10
|
|
self.selectRecordList()
|
|
self.isRefreshing = false
|
|
}, 1000)
|
|
},
|
|
// 查看明细
|
|
viewDetail(item) {
|
|
// uni.showToast({
|
|
// title: '查看订单：' + item.id,
|
|
// icon: 'none'
|
|
// })
|
|
},
|
|
// 状态翻译
|
|
getStatusText(status) {
|
|
var statusMap = {
|
|
'BT+': 'primary',
|
|
'BP+': 'error',
|
|
'BC+': 'warning',
|
|
'BR+': 'success',
|
|
'BT-': 'primary',
|
|
'BP-': 'error',
|
|
'BC-': 'warning',
|
|
'BR-': 'success'
|
|
}
|
|
return statusMap[status]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
height: 100%;
|
|
}
|
|
|
|
.container {
|
|
padding-top: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
.nav-bar {
|
|
height: 88rpx;
|
|
// display: flex;
|
|
align-items: center;
|
|
padding: 0 32rpx;
|
|
// background-color: #ffffff;
|
|
|
|
width: 93%;
|
|
margin: 0 auto;
|
|
|
|
background-color: rgba(255, 255, 255, 0.7);
|
|
border-radius: 10px 10px 0 0;
|
|
flex-shrink: 0;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.02);
|
|
}
|
|
|
|
.nav-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #1a1a1a;
|
|
}
|
|
|
|
.search-section {
|
|
width: 93%;
|
|
margin: 0 auto;
|
|
padding: 24rpx 32rpx;
|
|
// background-color: #ffffff;
|
|
border-radius: 0 0 10px 10px;
|
|
background-color: rgba(255, 255, 255, 0.7);
|
|
border-bottom: 1px solid #f0f0f0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.search-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #f5f7fa;
|
|
padding: 16rpx 24rpx;
|
|
border-radius: 12rpx;
|
|
margin-bottom: 24rpx;
|
|
box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.02);
|
|
}
|
|
|
|
.search-input {
|
|
flex: 1;
|
|
margin-left: 16rpx;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.date-picker {
|
|
width: 100%;
|
|
}
|
|
|
|
.picker-text {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 16rpx 24rpx;
|
|
font-size: 14px;
|
|
color: #666666;
|
|
background-color: #f5f7fa;
|
|
border-radius: 12rpx;
|
|
box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.02);
|
|
}
|
|
|
|
.record-list {
|
|
width: 93%;
|
|
margin: 0 auto;
|
|
background-color: rgba(255, 255, 255, 0.7);
|
|
margin-top: 15px;
|
|
border-radius: 10px;
|
|
// height: 100%;
|
|
flex: 1;
|
|
overflow: auto;
|
|
padding: 24rpx 32rpx;
|
|
}
|
|
|
|
.record-item {
|
|
background-color: #ffffff;
|
|
border-radius: 16rpx;
|
|
padding: 32rpx;
|
|
margin-bottom: 14rpx;
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.record-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.record-id {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
color: #1a1a1a;
|
|
}
|
|
|
|
.record-time {
|
|
font-size: 12px;
|
|
color: #999999;
|
|
}
|
|
|
|
.record-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.record-amount {
|
|
display: flex;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.amount-label {
|
|
font-size: 14px;
|
|
color: #666666;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.amount-value {
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
color: #1a1a1a;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
.record-status {
|
|
font-size: 14px;
|
|
padding: 4rpx 16rpx;
|
|
border-radius: 4rpx;
|
|
}
|
|
|
|
.status-BT {
|
|
color: #15803d;
|
|
background-color: #dcfce7;
|
|
border-radius: 6rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status-BP {
|
|
color: #9a3412;
|
|
background-color: #ffedd5;
|
|
border-radius: 6rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status-BC {
|
|
color: #be123c;
|
|
background-color: #ffe4e6;
|
|
border-radius: 6rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status-BR {
|
|
color: #be123c;
|
|
background-color: #ffe4e6;
|
|
border-radius: 6rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 160rpx 0;
|
|
}
|
|
|
|
.empty-text {
|
|
margin-top: 32rpx;
|
|
font-size: 15px;
|
|
color: #666666;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.loading-more {
|
|
text-align: center;
|
|
padding: 24rpx 0;
|
|
color: #999999;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|