FXB/pages/index/incomeTpl.vue

<template>
	<view class="container" style="padding-top: 100rpx;">
		<topView :backg="'#1A1A17'"></topView>
		<view class="infoBox">
			<view class="navBack" @click="navTo">
				<u-icon name="arrow-left" size="25" color="#fff" style="position: absolute;left: 0;top: 0;font-weight: bold;"></u-icon>
				<view class="title">{{$t("incomeTpl.收支明细")}}</view>
			</view>
			<view class="navBox">
				<view class="navList flex_item">
					<view class="navItem" v-for="item,index in navList" :key="index" @click="clickTab(index)">
						<view class="navName" :class="{ active: currTab == index }">{{item}}</view>
						<image v-if="currTab == index" src="/static/img/img28.png" class="navTip"></image>
					</view>
				</view>
				<!-- <view class="moneyDay flex_item" @click="clcikDate">
					<view class="dayValue"><text>{{monthValue}}</text>月</view>
					<u-icon v-if="up" name="arrow-up-fill" color="#fff" size="14" style="position: relative;top: 10rpx;"></u-icon>
					<u-icon v-if="!up" name="arrow-down-fill" color="#fff" size="14" style="position: relative;top: 10rpx;"></u-icon>
				</view> -->
			</view>
			<view class="listBox">
				<view class="flex tipBox">
					<view class="tipText"><!-- 2024年05月 --></view>
					<view class="tipText">{{currTab==0?$t("incomeTpl.流水"):currTab==1?$t("incomeTpl.收入"):$t("incomeTpl.支出")}}：{{info.sum}}NICE<!-- <text style="padding-left: 15rpx;">支出：2000</text> --></view>
				</view>
				<view class="listTpl flex" v-for="item,index in list" :key="index">
					<view class="tpl">
						<view class="name">{{typeList[item.type]}}</view>
						<view class="time">{{item.createtime }}</view>
					</view>
					<view class="nomBox">
						<view class="num add" v-if="item.pm == 1">+{{item.money * 1}}</view>
						<view class="num" v-else>-{{item.money * 1}}</view>
						<view class="numText">{{$t("incomeTpl.余额")}}：{{item.after * 1}}</view>
					</view>
				</view>
			</view>
		</view>
		<u-datetime-picker :show="dateShow" v-model="dayValue" mode="year-month" @confirm="confirm"></u-datetime-picker>
	</view>
</template>
<script>
	import topView from '../components/topView.vue';
	import {	getUserInfo } from '@/api/login.js';
	import {getTokenLog} from "@/api/index.js";
	import{ getTime } from '@/utils/rocessor.js';
	export default {
		components: {
			topView
		},
		data () {
			return {
				list:[],
				navList:[this.$t("incomeTpl.全部"),this.$t("incomeTpl.收入"),this.$t("incomeTpl.支出")],
				currTab:0,
				up:false,
				dateShow:false,
				monthValue:'',
				yearValue:'',
				dayValue:Number(new Date()),
				info:''
			}
		},
		onShow () {
			const date = new Date();
			this.yearValue = date.getFullYear();
			this.monthValue = date.getMonth() + 1;
			this.loadData();
		},
		methods: {
			clcikDate(){
				this.up = !this.up
				if(this.up){
					this.dateShow = true
				}
			},
			confirm(e){
				let data = e.value
				let dateValue = new Date(data); // 将时间戳转换为Date对象
				this.yearValue = dateValue.getFullYear(); // 获取年份
				this.monthValue = dateValue.getMonth() + 1; // 获取月份，需要加1因为从0开始计数
				//return year + '-' + month.toString().padStart(2, '0'); // 返回格式化的年-月字符串
				console.log(this.yearValue,this.monthValue,'888')
				this.dateShow = false
				this.up = false
			},
			clickTab(index){
				this.currTab = index
				this.loadData()
			},
			loadData () {
				let obj = this;
				let pm = ''
				if(obj.currTab == 0){
					pm = ''
				}else if(obj.currTab == 1){
					pm = 1
				}else{
					pm = 0
				}
				getTokenLog({
					page:1,
					limit:100000,
					token:'NICE',
					pm:pm
				}).then(function(res){
					obj.info = res.data
					res.data.list.forEach(item => {
						item.createtime = getTime(item.createtime)
					})
					obj.list = res.data.list
					obj.typeList = res.data.type
				});
			},
			// change(currentPage,type) {
			// 	this.page.currentPage = currentPage;
			// 	this.loadData()
			// },
			navTo(){
				uni.navigateTo({
					url:'/pages/index/income'
				})
			},
		},
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		min-height: 100vh;
		.container {
			width: 100%;
			min-height: 100vh;
			padding-bottom: 25rpx;
		}
	}
	.infoBox{
		padding: 0rpx 25rpx;
		color: #fff;
	}
	.listBox{
		margin-top: 25rpx;
		background: #1A1A17;
		padding: 0rpx 25rpx;
		border-radius: 30rpx;
		.tipBox{
			.tipText{
				font-weight: 500;
				font-size: 22rpx;
				padding-top: 36rpx;
				padding-bottom: 20rpx;
				color: #999999;
			}
		}
		.listTpl{
			padding: 30rpx 0rpx;
			// border-bottom: 1rpx solid rgba(240, 240, 240, 0.3);
			.tpl{
				.addr{
					
				}
				.time{
					font-weight: 500;
					font-size: 22rpx;
					padding-top: 15rpx;
					color: #999999;
				}
			}
			.nomBox{
				text-align: right;
				.num{
					font-weight: 400;
					font-size: 36rpx;
					color: #fff;
				}
				.add{
					color: #4C5D97;
					background: linear-gradient(258deg, #FFF0CF 0%, #CBA16B 30.0048828125%, #FCE9CF 67.67578125%, #C29963 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
				.numText{
					font-weight: 500;
					font-size: 22rpx;
					padding-top: 15rpx;
					color: #999999;
				}
			}
		}
		.listTpl:last-child{
			border-bottom: none !important;
		}
	}
	.navList{
		padding: 15rpx 0rpx 40rpx 25rpx;
		.navItem{
			width: 150rpx;
			position: relative;
			text-align: center;
			.navName{
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
			}
			.active{
				background: linear-gradient(258deg, #FFF0CF 0%, #CBA16B 30.0048828125%, #FCE9CF 67.67578125%, #C29963 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			.navTip{
				position: absolute;
				top: 45rpx;
				left: 50rpx;
				width: 45rpx;
				height: 11rpx;
			}
		}
	}
	.dayValue{
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 31rpx;
		color: #fff;
		margin-right: 15rpx;
		text{
			font-size: 54rpx;
		}
	}
	.navBack{
		position: relative;
		color: #fff;
		text-align: center;
		margin: 30rpx 0rpx 40rpx 0rpx;
		.title{
			font-weight: bold;
			font-size: 34rpx;
		}
	}
</style>