question_uniapp/pages/wallet/fundrecords.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" :statusBar="true"></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: 96%; 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(4)}} 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(4)}} 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" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 400rpx" v-if="select.type==300">Into mail: {{n.target}}</view>
								<view class="d1">{{n.created_at.slice(0, 19)}}</view>
							</view>
							<view class="u1 u" style="text-align: right;">
								<span :style="select.type==300?' margin-top: 20rpx;':''">{{parseFloat(n.amount).toFixed(4)}} USDT</span>
								<view class="d" :style="select.type==300?'margin-top: 40rpx;':''" style="text-align: right; color: #1D61E7;">{{$t('wallet.text6')}}:{{parseFloat(n.after).toFixed(4)}}</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: 36rpx; 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){
				this.isActive = e.id;
				this.index = e.id;
				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.$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>