lcoco/pages/wallet/model/income.vue

<template>
	<view>
		<view class="index">
			<image class="index-bg" src="@/static/img/wallet/bg.png" mode="scaleToFill"></image>
			<view class="head-money">
				<view class="sys-color-794B06 sys-size-28">我的波点（个）</view>
				<view class="head-mongy-1">
					<view class="sys-size-52 sys-color-362100 sys-weight-600">{{currentIcoco}}</view>
				</view>
			</view>
		</view>
		<view class="t-box sys-background-FFDFC3">
			<view class="sys-background-gray-f"></view>
		</view>
		<view class="box-sizing-border box-card">
			<view class="card-echrecs box-sizing-border">
				<view class="sys-size-32 sys-color-gray-3 sys-weight-600">每日波点</view>
				<view class="card-echrecs-box">
					<ColumnEcharts ref="columnEcharts"></ColumnEcharts>
				</view>
			</view>
			<image class="crad-f" src="@/static/img/wallet/ad-1.png" mode="scaleToFill" @click="selectFun(1)"></image>
			<view class="card-b">
				<view class="sys-background-FE6915 sys-radius-16 sys-size-32 sys-color-white sys-weight-600"
					@click="selectFun(2)">兑换JM币</view>
				<view class="sys-radius-16 tx-view sys-size-32 sys-color-FE6915 sys-weight-600" @click="selectFun(3)">提现
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import ColumnEcharts from './column-echarts.vue';
	import {
		getDailyEarnings
	} from "@/api/my";
	import tools from "@/service/tools";
	export default {
		components: {
			ColumnEcharts
		},
		data() {
			return {
				date: '',
				currentIcoco:0,
			}
		},
		mounted() {
			this.date = tools.getDateYM();
			this.getDailyEarnings()
		},
		methods: {
			getDailyEarnings() {
				if (this.isAjax) {
					return
				}
				this.isAjax = true
				let that = this
				getDailyEarnings({
					'pageNo': this.page,
					'pageSize': 30,
					'month': this.date
				}).then((res) => {
					this.isAjax = false
					if (res.code === 0) {
						that.currentIcoco = res.data.currentIcoco
						
						let categories = []
						let data = []
						
						res.data.datas.data.forEach((item)=>{
							categories.push(item.date)
							data.push(item.icoco)
						})
						
						let info = {
							categories: categories,
							series: [
							  {
								name: "收益",
								data: data
							  },
							]
						  };
						
						this.$refs.columnEcharts.chartData = JSON.parse(JSON.stringify(info));				
					}
				})
			},
			selectFun(type) {
				if (type === 1) {
					uni.navigateTo({
						url: '/pages/wallet/wave-point'
					})
				} else if (type === 2) {
					// 兑换JM币
				} else if (type === 3) {
					// 提现
				}
			},
		},
	}
</script>

<style scoped lang="scss">
	.index {
		width: 100%;
		height: 436rpx;
		position: relative;

		.index-bg {
			width: 100%;
			height: 436rpx;
		}

		.head-money {
			position: absolute;
			left: 54rpx;
			bottom: 76rpx;

			.head-mongy-1 {
				display: flex;
				align-items: center;
				margin-top: 26rpx;

				image {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					margin-right: 12rpx;
				}
			}
		}
	}

	.t-box {
		height: 30rpx;

		view {
			height: 30rpx;
			border-radius: 30rpx 30rpx 0rpx 0rpx;
		}
	}

	.box-card {
		min-height: 100rpx;
		padding: 0 32rpx 10rpx 32rpx;

		.card-echrecs {
			width: 100%;
			height: 516rpx;
			border-radius: 20rpx;
			box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
			margin-bottom: 30rpx;
			padding: 32rpx 36rpx;

			.card-echrecs-box {
				width: 100%;
				height: 400rpx;
				margin-top: 20rpx;
			}
		}

		.crad-f {
			width: 100%;
			height: 160rpx;
			border-radius: 20rpx;
			box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
		}

		.card-b {
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;

			view {
				width: 332rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
			}

			.tx-view {
				box-sizing: border-box;
				border: 2rpx solid #FE6915;
			}
		}
	}
</style>