star-uni/pages/revenue/revenue.vue

<template>
	<view>
		<scroll-view scroll-y="true" class="scroll-content" :enhanced="true" :bounces="false" :show-scrollbar="false" @scroll="pageScroll">
			<cu-custom bgColor="bg-bluev-head">
				<block slot="content">收益</block>
			</cu-custom>
			<view class="revenue-body">
				<view class="header">
					<view class="header-mid">
						<view class="mid-body">
							<view class="mid-item"><text>待结算</text>231.09</view>
							<view class="mid-item"><text>结算中</text>231.09</view>
						</view>
						<view class="header-foot">
							<view class="foot-money">
								<view class="m-left">
									<view class="m-name">可提现（元）</view>
									<view class="m-money">
										<view class="num">9083.09</view>
										<view class="num-log">提现记录<text class="cuIcon-right"></text></view>
									</view>
								</view>
								<view class="m-right">立即提现</view>
							</view>
							<view class="foot-money-total">
								<view class="money-item">
									<view class="name">总收益</view>
									<view class="num">9083.09</view>
								</view>
								<view class="money-item">
									<view class="name">今日收益</view>
									<view class="num">9083.09</view>
								</view>
								<view class="money-item">
									<view class="name">本月收益</view>
									<view class="num">9083.09</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="panel">
					<view class="title">
						<view class="name">
							<text>收益趋势</text>
							<image src="https://blue-data.oss-cn-guangzhou.aliyuncs.com/star/tab-active-badge.png"></image>
						</view>
						<view class="more-day">
							<view class="day-item active">近7天</view>
							<view class="day-item">近30天</view>
						</view>
					</view>
					<view style="width: 100%; height: 320rpx;">
						<qiun-data-charts type="area" :opts="opts" :chartData="option" />
					</view>
				</view>
				<view class="panel">
					<view class="title">
						<view class="name">
							<text>收益记录</text>
							<image src="https://blue-data.oss-cn-guangzhou.aliyuncs.com/star/tab-active-badge.png"></image>
						</view>
					</view>
					<view class="panel-log">
						<view class="log-item">
							<view class="icon"><image src="/static/image/douyin.svg"></image></view>
							<view class="name">
								<view class="name-title">【官方正品】金纺柔顺剂宝宝衣物适用0漂白剂抗静电蓬松不僵硬CW-星川任务-202</view>
								<view class="time">2026/04/14 12:33:42</view>
							</view>
							<view class="money">+66.00</view>
						</view>
						<view class="log-item">
							<view class="icon"><image src="/static/image/douyin.svg"></image></view>
							<view class="name">
								<view class="name-title">申请提现</view>
								<view class="time">2026/04/14 12:33:42</view>
							</view>
							<view class="money red">-66.00</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
var app;
export default {
	data() {
		return {
			scrollHeight:0,
			chartInstance: null,
			opts:{
				color:['#87E0FF'],
				padding: [15,0,0,0],
				legend:{
					show:false
				},
				enableScroll: false,
				xAxis: {
				  gridType: "solid",
				  dashLength: 1,
				  disableGrid: false
				},
				yAxis: {
				  gridType: "dash",
				  dashLength: 1,
				},
				extra: {
					area: {
						type: "curve",
						opacity: 0.2,
						addLine: true,
						width: 2,
						gradient: false,
						activeType: "solid"
					}
				}
			},
			option: {
				categories: ["2016","2017","2018","2019","2020","2021"],
				series: [
					{
						name: "收益",
						data: [50,45,22,453,34,45],
						legendShape:"none"
					}
				]
			}
		}
	},
	onLoad() {
		app = this;
	},
	methods: {
		// 初始化图表
		async initChart() {
			console.log('asdas')
			if (!this.$refs.chartRef) return
			try {
				this.chartInstance = await this.$refs.chartRef.init(echarts)
				this.chartInstance.setOption(this.option)
			} catch (error) {
				console.error('图表初始化失败:', error)
			}
		},
		pageScroll(event) {
			var scrollHeight = event.detail.scrollTop;
			app.scrollHeight = scrollHeight;
		},
	}
}
</script>

<style>
page{background-color: #f8f8f8;}
.revenue-body{margin: 20rpx;}

.panel {background-color: #fff;border-radius: 20rpx;margin-top: 20rpx;padding: 20rpx;}
.panel .title{display: flex;align-items: center;justify-content: space-between;padding: 20rpx 0;}
.panel .title .more-day{display: flex;align-items: center;gap: 20rpx;}
.panel .title .more-day .day-item {background-color: rgba(244, 246, 248, 1);color: rgba(33, 34, 38, 1);font-size: 24rpx;padding: 10rpx 20rpx;border-radius: 20rpx;border: 4rpx solid rgba(244, 246, 248, 1);}
.panel .title .more-day .day-item.active{background-color: #fff;color: #212226;font-weight: 800;}

.panel .title .name{font-size: 32rpx;color: #000;font-weight: 800;position: relative;}
.panel .title .name text{position: relative;z-index: 999;font-family: "bluevBold";}
.panel .title .name image{width: 82rpx;height: 52rpx;position: absolute;right: -20rpx;bottom: 0;z-index: 99;}
.panel .panel-log{}
.panel .panel-log .log-item{display: flex;align-items: center;gap: 20rpx;overflow: hidden;padding-top: 20rpx;}
.panel .panel-log .log-item .name{flex: 1;overflow: hidden;}
.panel .panel-log .log-item .money{margin-left: auto;margin-right: 0;color: rgba(33, 34, 38, 1);}
.panel .panel-log .log-item .money.red{color: rgba(255, 39, 65, 1);}

.panel .panel-log .log-item .time{color: rgba(140, 140, 140, 1);font-size: 24rpx;line-height: 40rpx;}
.panel .panel-log .log-item .name-title{
	display: block;
	font-size: 28rpx;
	font-weight: 700;
	color: #212226;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.panel .panel-log .log-item image{width: 60rpx;height: 60rpx;border-radius: 100%;}

.header-foot .foot-money-total{display: flex;align-items: center;background-color: rgba(244, 246, 248, 1);border-radius: 20rpx;margin-top: 20rpx;padding: 20rpx;}
.header-foot .foot-money-total .money-item{flex: 1;}
.header-foot .foot-money-total .name{font-size: 24rpx;color: rgba(140, 140, 140, 1);margin-bottom: 10rpx;}
.header-foot .foot-money-total .num{font-weight: bold;font-size: 32rpx;color: rgba(33, 34, 38, 1);}

.header-foot .foot-money{display: flex;align-items: center;justify-content: space-between;padding-top: 20rpx;}
.header-foot .foot-money .m-left{}
.header-foot .foot-money .m-left .m-name{color: rgba(89, 91, 98, 1);font-size: 28rpx;line-height: 2;}
.header-foot .foot-money .m-left .m-money{display: flex;align-items: center;gap: 20rpx;}
.header-foot .foot-money .m-left .num{font-weight: bold;font-size: 44rpx;color: rgba(33, 34, 38, 1);}
.header-foot .foot-money .m-left .num-log{font-size: 24rpx;color: rgba(89, 91, 98, 1);margin-left: 40rpx;}

.header-foot .foot-money .m-right{background-color: rgba(135, 224, 255, 1);color: rgba(33, 34, 38, 1);font-size: 28rpx;font-weight: 800;padding: 10rpx 30rpx;border-radius: 40rpx;}
.revenue-body .header{background-color: #fff;padding: 4rpx;border-radius: 20rpx;}
.revenue-body .header .header-mid{background: linear-gradient(180deg, rgba(137, 225, 255, 0.5) 0%, rgba(173, 235, 255, 0.5) 31.47%);border-radius: 20rpx;}
.revenue-body .header .header-mid .mid-body{display: flex;align-items: center;gap: 20rpx;padding: 20rpx;}
.revenue-body .header .header-mid .mid-body .mid-item{color: rgba(33, 34, 38, 1);font-size: 28rpx;}
.revenue-body .header .header-mid .mid-body .mid-item text{color: rgba(140, 140, 140, 1);margin-right: 10rpx;}
.revenue-body .header .header-foot{background: linear-gradient(180deg, #E7F5FD 0%, #FFFFFF 71.85%);border-radius: 40rpx 40rpx 20rpx 20rpx;padding: 20rpx 20rpx 10rpx 20rpx;}
</style>