jp-housekeep-electric/pages/businessHall/recharge/rechargeRecord.vue

<template>
	<view>
		<u-navbar title="充值记录" title-color="#101010"></u-navbar>
		<!-- 折线图 -->
		<view class="chart-box">
			<view class="title">
				1月电费共支出
			</view>
			<view class="sum">
				1000.00<text class="unit">元</text>
			</view>
			<view class="chart">
				<image class="img" src="@/assets/img/jVzkNKE@1x.png" mode=""></image>
			</view>

		</view>
		<!-- 标签 -->
		<view class="tabs">
			<u-picker  v-model="tabsFrom.show1" mode="selector" :range="tabsFrom.selector1"  range-key="label" @confirm="selector1confirm" ></u-picker>
			<u-picker-select title="日期选择" v-model="tabsFrom.show2"
			 :defaultTime="tabsFrom.show2Index" :endYear="endYear"
			 mode="time" :params="params"  @confirm="selector2confirm" @reset="selector2reset" ></u-picker-select>
			
			<view class="tabsItem" @click="tabsFrom.show1=!tabsFrom.show1">{{tabsFrom.show1Text}} <u-icon name="arrow-up"
					v-if="tabsFrom.show1"></u-icon><u-icon v-else name="arrow-down"></u-icon></view>
			<view class="tabsItem" @click="tabsFrom.show2=!tabsFrom.show2">{{tabsFrom.show2Text}} <u-icon name="arrow-up"
					v-if="tabsFrom.show2"></u-icon><u-icon v-else name="arrow-down"></u-icon></view>
		</view>
		<!-- 记录 -->
		<view class="records" v-for="item in 2" :key="item">
			<view class="time">
				01月 支出 1000.00元

			</view>
			<view class="details">
				<view class="details-title">
					<view class="name">
						电费充值-联通公司-荆鹏软件园
					</view>
					<view class="record-time">
						01-07 10:00 420667788991100
					</view>
				</view>
				<view class="sum">
					1000.00

				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				endYear:'',
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				tabsFrom: {
					show1: false,
					show1Index:0,
					show2Index:'',
					show2: false,
					show1Text: "全部类型",
					show2Text: "全部时间",
					selector1:[
						{
								label: '全部类型',
								value: '',
							},
						{
								label: '线上充值',
								value: '1',
							},
							{
								label: '线下充值',
								value: '2',
							},
					]
				},
				 
				
			 
			}
		},
		onLoad() {
			this.endYear=new Date().getFullYear()
			
		},
		methods:{
			selector2confirm(e){
				this.tabsFrom.show2Text=e.year+"年"+e.month+"月"
				
				this.tabsFrom.show2Index=e.year+"-"+e.month
				if(e.day){
					this.tabsFrom.show2Text+=e.day+"日"
					this.tabsFrom.show2Index+='-'+e.day	
				}
			},
			selector2reset(e){
				console.log(e)
				this.tabsFrom.show2Text='全部时间'
				this.tabsFrom.show2Index='';
			},
			selector1confirm(e){
				console.log(e)
				var index=e[0]
				this.tabsFrom.show1Index=index
				this.tabsFrom.show1Text=this.tabsFrom.selector1[index].label
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 折线图
	.chart-box {
		padding: 24rpx 32rpx;
		background: linear-gradient(180deg, rgba(203, 234, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);

		.title {
			color: rgb(16, 16, 16);
		}

		.sum {
			color: rgb(51, 51, 51);
			font-size: 64rpx;
			margin-top: 16rpx;

			.unit {
				color: rgb(16, 16, 16);
				font-size: 28rpx;
				margin-left: 8rpx;
			}
		}

		.chart {
			width: 100%;
			height: 240rpx;
			margin-top: 8rpx;

			.img {
				width: 100%;
				height: 100%;
			}
		}

	}

	// 标签
	.tabs {

		height: 96rpx;
		line-height: 96rpx;
		background-color: #fff;
		border-top: 1px solid rgba(241, 241, 241, 1);
		display: flex;
		justify-content: space-around;

	}

	// 记录
	.records {
		.time {
			padding: 24rpx 32rpx;
			color: rgba(119, 119, 119, 1);
			font-size: 32rpx;
		}

		.details {
			background-color: #fff;
			padding: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.details-title {
				.title {
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
				}

				.record-time {
					color: rgb(153, 153, 153);
					font-size: 24rpx;

					margin-top: 8rpx;
				}
			}

			.sum {
				color: rgb(16, 16, 16);
				font-size: 40rpx;
			}
		}
	}
</style>