keysass_app/pages/personal/setup/transaction.vue

<template>
	<view>
		<u-tabs-swiper ref="tabs" :list="scationlist" :is-scroll="false"  @change="tabsChange"  :current="current" bg-color='#FFFFFF'
			active-color="#1578ED" inactive-color='#666666' bar-width='180'>
		</u-tabs-swiper>
		<view style='padding: 2vh 13px'>
			<view v-if="currenttranslist&&currenttranslist.length>0">
				<view v-if="current==0">
					<view v-for="(item,key) of currenttranslist" class="sign_list">
						<view style="display:flex;margin:0 12px 8px 0;justify-content: space-between;align-items: flex-end;">
							<view class="rightb" style="background: linear-gradient(90deg, #FFDC00, #ED9706);"> 充值 </view>
							<!-- <p style="color:#FD461A;">赏金金额：{{item.price}}	</p> -->
						</view>
						<view class="fline"></view>
						<view  style="margin:12px 15px 0 15px;color:#333333;font-size:13px;line-height:27px;">
							<p>交易名称：{{item.recordName}}</p>
							<p>交易金额：{{item.recordAmount}}元</p>
							<p>交易状态：
								<span v-if="item.recordStatus==0">处理中</span>
								<span v-if="item.recordStatus==1">已完成</span>
								<span v-if="item.recordStatus==2">已取消</span>
								<span v-if="item.recordStatus==3">已失败</span>
							</p>
							<p>交易时间：{{item.recordTime.slice(0,10)}}</p>
						</view>
					</view>
				</view>
				<view v-if="current==1">
					<view v-for="(item,key) of currenttranslist" class="sign_list">
						<view style="display:flex;margin:0 12px 8px 0;justify-content: space-between;align-items: flex-end;">
							<view class="rightb" style="background: linear-gradient(90deg, #5EA6FD, #1A81F9)"> 提现 </view>
							<!-- <p style="color:#FD461A;">赏金金额：{{item.price}}	</p> -->
						</view>
						<view class="fline"></view>
						<view  style="margin:12px 15px 0 15px;color:#333333;font-size:13px;line-height:27px;">
							<p>交易名称：{{item.recordName}}</p>
							<p>交易金额：{{item.recordAmount}}元</p>
							<p>交易状态：
								<span v-if="item.recordStatus==0">处理中</span>
								<span v-if="item.recordStatus==1">已完成</span>
								<span v-if="item.recordStatus==2">已取消</span>
								<span v-if="item.recordStatus==3">已失败</span>
							</p>
							<p>交易时间：{{item.recordTime.slice(0,10)}}</p>
						</view>
					</view>
				</view>
				<view v-if="current==2">
					<view v-for="(item,key) of currenttranslist" class="sign_list">
						<view style="display:flex;margin:0 12px 8px 0;justify-content: space-between;align-items: flex-end;">
							<view class="rightb" style="background: linear-gradient(90deg, #FCA141, #FD6940);"> 支出 </view>
							<!-- <p style="color:#FD461A;">赏金金额：{{item.price}}	</p> -->
						</view>
						<view class="fline"></view>
						<view  style="margin:12px 15px 0 15px;color:#333333;font-size:13px;line-height:27px;">
							<p>交易名称：{{item.recordName}}</p>
							<p>交易金额：{{item.recordAmount}}元</p>
							<p>交易状态：
								<span v-if="item.recordStatus==0">处理中</span>
								<span v-if="item.recordStatus==1">已完成</span>
								<span v-if="item.recordStatus==2">已取消</span>
								<span v-if="item.recordStatus==3">已失败</span>
							</p>
							<p>交易时间：{{item.recordTime.slice(0,10)}}</p>
						</view>
					</view>
				</view>
				<view v-if="current==3">
					<view v-for="(item,key) of currenttranslist" class="sign_list">
						<view style="display:flex;margin:0 12px 8px 0;justify-content: space-between;align-items: flex-end;">
							<view class="rightb" style="background: linear-gradient(90deg, #1BF5B3, #08C78F)"> 收入 </view>
							<!-- <p style="color:#FD461A;">赏金金额：{{item.price}}	</p> -->
						</view>
						<view class="fline"></view>
						<view  style="margin:12px 15px 0 15px;color:#333333;font-size:13px;line-height:27px;">
							<p>交易名称：{{item.recordName}}</p>
							<p>交易金额：{{item.recordAmount}}元</p>
							<p>交易状态：
								<span v-if="item.recordStatus==0">处理中</span>
								<span v-if="item.recordStatus==1">已完成</span>
								<span v-if="item.recordStatus==2">已取消</span>
								<span v-if="item.recordStatus==3">已失败</span>
							</p>
							<p>交易时间：{{item.recordTime.slice(0,10)}}</p>
						</view>
					</view>
				</view>
			</view>
			<view v-if="currenttranslist.length==0" style="font-size:46rpx;
				font-weight: bold;
				color: #9D9D9D; text-align:center;margin-top:100px">暂无记录</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scationlist:[{name:'充值记录'},{name:'提现记录'},{name:'支出记录'},{name:'收入记录'}],
				alltranslist:[],//全部交易记录
				currenttranslist:[],//当前类型交易记录
				current:0
			}
		},
		onLoad() {
			let wxUserInfo=uni.getStorageSync('wxUserInfo');
			if(wxUserInfo){
				this.http.quickGet(`/mpay/my/record/${wxUserInfo.userId}`,true).then(res=>{
					console.log('我的交易记录--',res)
					// recordType=0充值记录,1提现记录,2支出记录,3收入记录
					// res.data.rows=[{recordName:'1',recordType:'0',recordAmount:'500.363654',recordStatus:'0',recordTime:'2023.01.60 10:50'},
					// {recordName:'1000',recordType:'1',recordAmount:'99900.36',recordStatus:'1',recordTime:'2023.01.60 10:50'},
					// {recordName:'1000',recordType:'2',recordAmount:'99900.36',recordStatus:'2',recordTime:'2023.01.60 10:50'},
					// {recordName:'1000',recordType:'3',recordAmount:'99900.36',recordStatus:'3',recordTime:'2023.01.60 10:50'},
					// ]
					this.alltranslist=res.data.rows
					this.currenttranslist=this.alltranslist
					this.currenttranslist=this.alltranslist.filter(item=>item.recordType==0);
				})
			}
		},
		methods: {
			tabsChange(e){
				this.current=e
				if(this.alltranslist.length>0){
					this.currenttranslist=this.alltranslist.filter(item=>item.recordType==e);
				}
			},
			// signupdetails(id){				
			// 	uni.navigateTo({
			// 		url:`/pages/index/testcrowdsourc/crowdsourcingdetails?id=${id}&type=1`
					
			// 	})
			// },
		}
	}
</script>

<style>
	.navTab{
		padding:2vh 13px;
	}
	.sign_list{
		width: 100%;
		background: #FFFFFF;
		border-radius: 10px;
		margin-bottom:20px;
		padding-bottom:15px;
	}
	.rightb{
		width: 183rpx;
		height: 54rpx;
		background: linear-gradient(90deg, #5EA6FD, #1A81F9);
		border-radius: 9px 0px 46px 0px;
		color: #FFFFFF;
		font-size:.8rem;
		line-height:  54rpx;
		text-align: center;
		
	}
	.fline{
		width: 100%;
		height: 1rpx;
		border: 1px solid #999999;
		opacity: 0.15;
	}
</style>