uni-zhks-app/pages/w-salary/w-salary.vue

<template>
	<view>
		<view class="time_box">
			<view class="time">
				<picker mode="date" :value="date" fields="month" :start="startDate" :end="endDate" @change="bindDateChange">
					<view>{{date}}</view>
				</picker>
			</view>
			<view class="icon">
				<uni-icons type="arrowdown" color="#fff"></uni-icons>
			</view>
		</view>

		<view class="money">
			<text>9819.38</text>
		</view>

		<view class="section">
			<view class="title">
				<view class="name">工资明细</view>
			</view>
			<view class="list">
				<view class="item">
					<view class="label">姓名</view>
					<view class="info">测试用户</view>
				</view>
				<view class="item">
					<view class="label">出勤工日</view>
					<view class="info">21.00</view>
				</view>
			</view>
		</view>

		<view class="section">
			<view class="title">
				<view class="name">收入统计</view>
			</view>
			<view class="content">
				<canvas style="width: 620rpx; height: 600rpx;" canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
			</view>
		</view>



	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	var _self;
	var canvaLineA = null;
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				date: currentDate,

				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
			};
		},
		onLoad() {
			_self = this;
			this.cWidth = uni.upx2px(620);
			this.cHeight = uni.upx2px(600);
			this.getServerData();
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			bindDateChange: function(e) {
				this.date = e.target.value
				console.log(this.date)
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				return `${year}-${month}`;
			},


			// 收入统计
			getServerData() {
				let LineA={
					categories: ['1', '2', '3', '4', '5', '6','7','8','9','10','11','12'],
					series: [{
						name: '',
						data: [100, 80, 95, 150, 112, 132,100, 80, 95, 150, 112, 132]
					}]
				};
				_self.showLineA("canvasLineA", LineA);
			},
			showLineA(canvasId, chartData) {
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					legend: {
						show: false
					},
					dataLabel: false,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						type: 'grid',
						gridColor: '#fff',
						gridType: 'dash',
						dashLength: 8
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
						min: 10,
						max: 180,
						format: (val) => {
							return val.toFixed(0) + '元'
						}
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						line: {
							type: 'straight'
						}
					}
				});

			},
			touchLineA(e) {
				canvaLineA.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		box-sizing: border-box;
		padding: 30rpx 25rpx;
		background-color: #009FE8;
	}

	.time_box {
		margin: 0 auto;
		width: 302rpx;
		height: 72rpx;
		border-radius: 36rpx;
		border: 4rpx solid #FFFFFF;

		display: flex;
		justify-content: center;
		align-items: center;

		position: relative;

		.time {
			font-size: 33rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}

		.icon {
			position: absolute;
			right: 20rpx;
		}
	}

	.money {
		margin: 25rpx;
		text-align: center;

		text {
			font-size: 62rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 88rpx;
		}
	}

	.section {
		margin-top: 12rpx;
		width: 700rpx;
		background: #FFFFFF;
		box-shadow: 0px 3rpx 29rpx 0px rgba(59, 74, 116, 0.14);
		border-radius: 10rpx;

		box-sizing: border-box;
		padding: 40rpx;

		.title {
			border-left: 8rpx solid #009fe8;

			.name {
				margin-left: 20rpx;
				font-size: 29rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #2C3E50;
				line-height: 42rpx;
			}
		}

		.list {
			margin-top: 20rpx;

			.item {
				height: 80rpx;
				border-bottom: 1rpx solid #e0e1e2;

				display: flex;
				align-items: center;
				justify-content: space-between;

				.label {
					font-size: 29rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #6C6F74;

				}

				.info {
					font-size: 29rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #6C6F74;
				}
			}
		}

		.content {
			width: 620rpx;
			padding: 20rpx 0;
		}
	}
</style>