484 lines
13 KiB
Vue
484 lines
13 KiB
Vue
<template>
|
||
|
||
<view class="page">
|
||
<uni-nav-bar @clickLeft="goto(1, 1)" left-icon="back" :border="false" :shadow="false" :fixed="true"
|
||
:title="$t('fundrecords.title')" backgroundColor="#F3F3F3"></uni-nav-bar>
|
||
<view class="content">
|
||
<view class="nav">
|
||
<!-- 选项卡水平方向滑动，scroll-with-animation是滑动到下一个选项时，有一个延时效果 -->
|
||
<scroll-view class="tab-scroll" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
|
||
<view class="tab-scroll_box">
|
||
<!-- 选项卡类别列表 -->
|
||
<view class="tab-scroll_item" v-for=" (item,index) in category" :key="index"
|
||
:class="{'active':isActive==index}" @click="chenked(index)">
|
||
{{item.name}}
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
<!-- 选项卡内容轮播滑动显示，current为当前第几个swiper子项 -->
|
||
<view style="" v-if="isActive==0">
|
||
<picker mode="selector" :range="items" @change="onPickerChange" style="float: left;">
|
||
<view class="picker" style="margin: 20rpx; font-size: 24rpx; border: 2rpx solid #ddd; width: 200rpx; padding: 16rpx 16rpx;">
|
||
<view style="float: left; color: #999; font-size: 28rpx;">{{selectedItem}} </view>
|
||
<image src="/static/images/x1.png" style="width: 24rpx; height: 24rpx; float: right; margin-top: 10rpx; "></image>
|
||
<view style="clear: both;"></view>
|
||
</view>
|
||
</picker>
|
||
<view class="example-body" style="float: left;margin: 20rpx 10rpx; ">
|
||
<uni-datetime-picker
|
||
type="daterange"
|
||
start-placeholder="start"
|
||
end-placeholder="end "
|
||
rangeSeparator="-"
|
||
start=""
|
||
end=""
|
||
@change="datachange"/>
|
||
</view>
|
||
<view style="clear: both;"></view>
|
||
</view>
|
||
<view style="width: 92%; margin: auto;">
|
||
<view class="cell_list" style="border-bottom: 2rpx solid #ddd;" v-if="list.length > 0" v-for="(n, index) in list" v-bind:key="index">
|
||
<template v-if="n.name == $t('recharge.title')">
|
||
<view class="d">
|
||
{{n.name}}<view class="d1">{{n.created_at}}</view>
|
||
</view>
|
||
<view class="u1 u">
|
||
<span v-if='n.status == 2'>+</span>
|
||
<span :style="n.status == 2 ? 'color:#1D61E7' : ''">{{parseFloat(n.amount).toFixed(2)}} USDT</span>
|
||
<view class="d" style="text-align: right; color: #1D61E7;">{{ recharge_status_list[n.status]}}</view>
|
||
</view>
|
||
</template>
|
||
<template v-else-if="n.name == $t('putforward.title')">
|
||
<view class="d">
|
||
{{n.name}}<view class="d1">{{ n.created_at}}</view>
|
||
</view>
|
||
<view class="u1 u">
|
||
<span>-{{parseFloat(n.deduction_amount).toFixed(2)}} USDT</span>
|
||
<view class="d" style="text-align: right; color: #1D61E7;">{{ withdrawl_status_list[n.status] }}</view>
|
||
</view>
|
||
</template>
|
||
<template v-else>
|
||
<view class="d">
|
||
{{n.type}}<view class="d1">{{n.created_at.slice(0, 19)}}</view>
|
||
</view>
|
||
<view class="u1 u">
|
||
<span>{{parseFloat(n.amount).toFixed(2)}} USDT</span>
|
||
<view class="d" style="text-align: right; color: #1D61E7;">After:{{parseFloat(n.after).toFixed(2)}}</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
<view style="text-align: center; padding-bottom: 160rpx;" v-if="list.length <= 0">
|
||
<image style="width: 360rpx; height: 360rpx; margin: 160rpx auto 0rpx auto;" src="/static/images/w5.png" fit="cover"></image>
|
||
<view style="color: #999; font-size: 28px; font-weight: 400;">{{$t('nodata')}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import DateTimePicker from '@/components/common/DateTimePicker.vue'; // 根据实际路径引入
|
||
import {
|
||
mapState,
|
||
mapMutations
|
||
} from 'vuex';
|
||
export default {
|
||
components: {
|
||
DateTimePicker
|
||
},
|
||
data() {
|
||
const now = new Date();
|
||
return {
|
||
list: [],
|
||
isActive: 0,
|
||
index: 0,
|
||
currentindex:0,
|
||
category:[
|
||
{id:1,name: this.$t('fundrecords.text1'),},
|
||
{id:2,name: this.$t('fundrecords.text2'),},
|
||
{id:3,name: this.$t('recharge.title'),},
|
||
{id:4,name: this.$t('putforward.title'),},
|
||
{id:5,name: this.$t('transfer.title'),}
|
||
],
|
||
contentScrollW: 0, // 导航区宽度
|
||
scrollLeft: 0, // 横向滚动条位置
|
||
fullHeight:"",
|
||
selectedItem: 'Type',
|
||
select:{
|
||
startTime: '',
|
||
endTime: '',
|
||
page: 1,
|
||
limit: 10,
|
||
currency: 'money',
|
||
type: '',
|
||
lang: this.$i18n.locale
|
||
},
|
||
withdrawl_status_list: [],
|
||
recharge_status_list: [],
|
||
init:{},
|
||
last_page: 1,
|
||
isload: false,
|
||
items:[]
|
||
};
|
||
},
|
||
|
||
computed: {
|
||
...mapState(['userInfo'])
|
||
},
|
||
watch:{
|
||
// swiper与上面选项卡联动
|
||
currentindex(newval){
|
||
this.isActive = newval;
|
||
this.scrollLeft = 0;
|
||
// 滑动swiper后，每个选项距离其父元素最左侧的距离
|
||
for (let i = 0; i < newval - 1; i++) {
|
||
this.scrollLeft += this.category[i].width
|
||
};
|
||
},
|
||
},
|
||
//第一次加载
|
||
onLoad(e) {
|
||
uni.showLoading({
|
||
title: this.$t('loading')
|
||
});
|
||
if(e.id != typeof(undefined) && e.id != undefined){
|
||
this.isActive = e.id;
|
||
this.index = e.id;
|
||
};
|
||
this.$http.get('/api/common/init?lang='+this.$i18n.locale).then(res => {
|
||
this.init = res.data;
|
||
this.withdrawl_status_list = res.data.withdrawl_status_list;
|
||
this.recharge_status_list = res.data.recharge_status_list;
|
||
this.items.push(this.$t('fundrecords.text1'));
|
||
const entries = Object.entries(res.data.balance_type_list); // 获取键值对数组 [['key1', 'value1'], ['key2', 'value2'], ['key3', 'value3']]
|
||
entries.forEach(([key, value]) => {
|
||
this.items.push(value);
|
||
});
|
||
});
|
||
this.getList();
|
||
},
|
||
//页面显示
|
||
onShow() {},
|
||
mounted() {
|
||
var that = this;
|
||
//获取手机屏幕的高度，让其等于swiper的高度，从而使屏幕充满
|
||
uni.getSystemInfo({
|
||
success: function (res) {
|
||
that.fullHeight ="height:" + res.windowHeight + "px";
|
||
}
|
||
});
|
||
// 获取标题区域宽度，和每个子元素节点的宽度
|
||
this.getScrollW()
|
||
},
|
||
//方法
|
||
methods: {
|
||
// 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
|
||
getScrollW() {
|
||
const query = uni.createSelectorQuery().in(this);
|
||
query.select('.tab-scroll').boundingClientRect(data => {
|
||
// 拿到 scroll-view 组件宽度
|
||
this.contentScrollW = data.width
|
||
}).exec();
|
||
query.selectAll('.tab-scroll_item').boundingClientRect(data => {
|
||
let dataLen = data.length;
|
||
for (let i = 0; i < dataLen; i++) {
|
||
// scroll-view 子元素组件距离左边栏的距离
|
||
this.category[i].left = data[i].left;
|
||
// scroll-view 子元素组件宽度
|
||
this.category[i].width = data[i].width
|
||
}
|
||
}).exec()
|
||
},
|
||
// 当前点击子元素靠左留一个选项展示，子元素宽度不相同也可实现
|
||
chenked(index) {
|
||
if(this.isload){
|
||
return;
|
||
}
|
||
this.isload = true;
|
||
uni.showLoading({
|
||
title: this.$t('loading')
|
||
});
|
||
this.isActive = index;
|
||
this.scrollLeft = 0;
|
||
for (let i = 0; i < index - 1; i++) {
|
||
this.scrollLeft += this.category[i].width
|
||
};
|
||
this.select.page = 1;
|
||
switch(this.isActive.toString()){
|
||
case '0':
|
||
this.select.type = '';
|
||
break;
|
||
case '1':
|
||
this.select.type = '99999';
|
||
break;
|
||
case '2':
|
||
this.select.type = '100';
|
||
break;
|
||
case '3':
|
||
this.select.type = '200';
|
||
break;
|
||
case '4':
|
||
this.select.type = '300';
|
||
break;
|
||
}
|
||
this.list = [];
|
||
this.getList();
|
||
},
|
||
// swiper滑动时，获取其索引，也就是第几个
|
||
change(e){
|
||
const {current} = e.detail;
|
||
this.currentindex = current;
|
||
this.list = [];
|
||
},
|
||
onPickerChange(e) {
|
||
uni.showLoading({
|
||
title: this.$t('loading')
|
||
});
|
||
this.list = [];
|
||
this.selectedItem = this.items[e.detail.value];
|
||
const entries = Object.entries(this.init.balance_type_list); // 获取键值对数组 [['key1', 'value1'], ['key2', 'value2'], ['key3', 'value3']]
|
||
entries.forEach(([key, value]) => {
|
||
if(value==this.selectedItem){
|
||
this.select.type = key;
|
||
}
|
||
});
|
||
if(this.selectedItem == this.$t('fundrecords.text1')){
|
||
this.select.type = '';
|
||
}
|
||
this.getList();
|
||
},
|
||
datachange(e){
|
||
uni.showLoading({
|
||
title: this.$t('loading')
|
||
});
|
||
this.list = [];
|
||
if(e.length > 1){
|
||
this.select.startTime = e[0];
|
||
this.select.endTime = e[1];
|
||
this.getList();
|
||
}
|
||
else{
|
||
this.select.startTime = '';
|
||
this.select.endTime = '';
|
||
this.getList();
|
||
}
|
||
},
|
||
goto(url, type) {
|
||
if (type == 2) {
|
||
return uni.switchTab({ url: url })
|
||
}
|
||
if (type == 1) {
|
||
return uni.navigateBack({ delta: url });
|
||
}
|
||
uni.navigateTo({
|
||
url: url
|
||
})
|
||
},
|
||
getList(){
|
||
switch(this.isActive.toString()){
|
||
case '0':
|
||
this.$http.post('/api/balanceLog/list', this.select).then(res => {
|
||
if(res.code == 0){
|
||
res.data.data.forEach(item => {
|
||
item.name = 'balancelog';
|
||
this.list.push(item);
|
||
});
|
||
this.last_page = res.data.last_page;
|
||
uni.hideLoading();
|
||
this.isload = false;
|
||
}
|
||
}).catch(err=>{
|
||
uni.hideLoading();
|
||
this.isload = false;
|
||
});
|
||
break;
|
||
case '1':
|
||
this.$http.post('/api/balanceLog/list', this.select).then(res => {
|
||
if(res.code == 0){
|
||
res.data.data.forEach(item => {
|
||
this.list.push(item);
|
||
});
|
||
this.last_page = res.data.last_page;
|
||
uni.hideLoading();
|
||
this.isload = false;
|
||
}
|
||
}).catch(err=>{
|
||
uni.hideLoading();
|
||
this.isload = false;
|
||
});
|
||
break;
|
||
case '2':
|
||
this.$http.post('/api/recharge/list', this.select).then(res => {
|
||
if(res.code == 0){
|
||
res.data.data.forEach(item => {
|
||
item.name = this.$t('recharge.title');
|
||
this.list.push(item);
|
||
});
|
||
this.last_page = res.data.last_page;
|
||
uni.hideLoading();
|
||
this.isload = false;
|
||
}
|
||
}).catch(err=>{
|
||
uni.hideLoading();
|
||
this.isload = false;
|
||
});
|
||
break;
|
||
case '3':
|
||
this.$http.post('/api/withdrawl/list', this.select).then(res => {
|
||
if(res.code == 0){
|
||
res.data.data.forEach(item => {
|
||
item.name = this.$t('putforward.title');
|
||
this.list.push(item);
|
||
});
|
||
this.last_page = res.data.last_page;
|
||
uni.hideLoading();
|
||
this.isload = false;
|
||
}
|
||
}).catch(err=>{
|
||
uni.hideLoading();
|
||
this.isload = false;
|
||
});
|
||
break;
|
||
case '4':
|
||
this.$http.post('/api/balanceLog/list', this.select).then(res => {
|
||
if(res.code == 0){
|
||
res.data.data.forEach(item => {
|
||
this.list.push(item);
|
||
});
|
||
this.last_page = res.data.last_page;
|
||
uni.hideLoading();
|
||
this.isload = false;
|
||
}
|
||
}).catch(err=>{
|
||
uni.hideLoading();
|
||
this.isload = false;
|
||
});
|
||
break;
|
||
}
|
||
|
||
}
|
||
},
|
||
//页面隐藏
|
||
onHide() {},
|
||
//页面卸载
|
||
onUnload() {},
|
||
//页面下来刷新
|
||
onPullDownRefresh() {
|
||
|
||
},
|
||
//页面上拉触底
|
||
onReachBottom() {
|
||
if(this.select.page < this.last_page){
|
||
uni.showLoading({
|
||
title:this.$t('loading')
|
||
})
|
||
this.select.page = this.select.page + 1;
|
||
this.getList();
|
||
}else{
|
||
|
||
}
|
||
},
|
||
//用户点击分享
|
||
onShareAppMessage(e) {
|
||
return this.wxShare();
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
@import '@/style/mixin.scss';
|
||
body{background-color: #fff;}
|
||
page{
|
||
height: 100%;
|
||
background-color: #FFFFFF;
|
||
}
|
||
.content{
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
flex: 1;
|
||
.nav{
|
||
border-top: 1rpx solid #f2f2f2;
|
||
background-color: #F3F3F3;
|
||
z-index: 99;
|
||
width: 100%;
|
||
align-items: center;
|
||
height: 100rpx;
|
||
.tab-scroll{
|
||
flex: 1;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
padding-left: 30rpx;
|
||
padding-right: 30rpx;
|
||
.tab-scroll_box{
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: nowrap;
|
||
box-sizing: border-box;
|
||
.tab-scroll_item{
|
||
line-height: 60rpx;
|
||
margin-right: 35rpx;
|
||
flex-shrink: 0;
|
||
padding-bottom:20rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
font-size: 32rpx;
|
||
padding-top: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.swiper-content{
|
||
padding-top: 120rpx;
|
||
flex: 1;
|
||
.swiperitem-content{
|
||
background-color: #ffffff;
|
||
.nav_item{
|
||
background-color: #FFFFFF;
|
||
padding:20rpx 40rpx 0rpx 40rpx ;
|
||
height: 2000rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.active {
|
||
position: relative;
|
||
color: #333;
|
||
font-weight: 600;
|
||
}
|
||
.active::after {
|
||
content: "";
|
||
position: absolute;
|
||
height: 4rpx;
|
||
background-color: #333;
|
||
left: 0rpx;
|
||
right: 0rpx;
|
||
bottom: 0rpx;
|
||
margin: auto;
|
||
}
|
||
/* 隐藏滚动条，但依旧具备可以滚动的功能 */
|
||
::v-deep.uni-scroll-view::-webkit-scrollbar {
|
||
display: none
|
||
}
|
||
::v-deep .uni-date__x-input {
|
||
padding: 2rpx 10rpx;
|
||
}
|
||
.cell_list .d{
|
||
color: #3d3d3d; font-size: 32rpx; font-weight: 400; line-height: 50rpx;
|
||
}
|
||
.cell_list .d1{
|
||
color: #999; font-size: 28rpx; font-weight: 400; line-height: 50rpx;
|
||
}
|
||
.cell_list .u{
|
||
color: #1D61E7; font-weight: 600;float: right; font-size: 32rpx;
|
||
}
|
||
.cell_list .u1{
|
||
color: #333; font-weight: 600;float: right;font-size: 32rpx;
|
||
}
|
||
.w{
|
||
background-color: #F8F8F8; border-radius: 20rpx; padding: 40rpx 20rpx;
|
||
}
|
||
.w .t{
|
||
text-align: center; margin-top: 20rpx; font-size: 28rpx;
|
||
}
|
||
</style> |