learning-system-mobile/pages/my/myub.vue

<template>
	<view style="background: #F9F9F9;">
		<view class="ubtop" style="background-color: #fff;">
			<view class="ub-heard">
				我的u币
				<image @click="jumrules" src="../../static/images/wenhao.png" mode=""></image>
			</view>
			<view class="top-content">
				<view>{{uinfo.uCurrency}}</view>
				统计时间：2022.11.4
			</view>
		</view>
		<view class="ub-list" v-for="(day, index) in uCoinRecord" :key="index">
			<text>{{day.dayNmae}}</text>
			<view class="list-info" v-for="info in day.list">
				<view class="info-left">
					<view>{{info.content}}</view>
					{{ info.recordTime }}
				</view>
				<view class="info-right">
					{{info.uvalue > 0? '+':''}}
					{{info.uvalue}}
				</view>
			</view>



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

<script>
	import { mapGetters } from 'vuex';
	import apiStat from '@/api/phase2/stat.js';
	export default {
		computed: {
			...mapGetters(['userInfo']),
			avatarText() {
				return userAvatarText(this.userInfo.name);
			}
		},
		data() {
			return {
				uCoinRecord: [],
				uinfo: {
					uCurrency: 0, // 用户累计U币
					timestamp: '',
				},
			}
		},
		mounted() {
			this.getlist();
			this.getLevel()
		},
		methods: {
			jumrules(){
				uni.navigateTo({
					url:'/pages/my/myubrules'
				})
			},
			getlist() {
				apiStat.userCoinList(this.userInfo.aid, 7).then(res => {
					console.log(res);
					if (res.status == 200) {
						this.uCoinRecord = [];
						for (let key in res.result.uCoinRecord) {
							this.uCoinRecord.push({
								dayNmae: key,
								list: res.result.uCoinRecord[key]
							})
						}

					}
				})
			},
			getLevel() { //获取用户累计U币
				apiStat.getUserStatTotalInfo(this.userInfo.aid).then(res => {
					if (res.status == 200) {
						this.uinfo.uCurrency = res.result.uvalue;
					}
				});
			},
		}

	}
</script>

<style lang="scss" scoped>
	.ub-list {
		height: 100%;
		padding: 32upx 36upx;
		background-color: #fff;

		text {
			font-size: 44upx;
			font-weight: 500;
			color: #333333;

		}

		.list-info {
			display: flex;
			padding-top: 40upx;
			padding-bottom: 32upx;
			border-bottom: 1px solid rgba(153, 153, 153, 0.1);

			.info-left {
				flex: 1;
				font-size: 24upx;
				color: #999999;
				font-weight: 400;

				view {
					font-size: 28upx;
					color: #333333;
					font-weight: 500;
					padding-bottom: 16upx;
				}
			}

			.info-right {
				width: 90upx;
				text-align: right;
				padding-top: 20upx;
			}
		}
	}

	.ubtop {
		width: 100%;
		height: 392upx;
		padding-bottom: 20upx;
		background-image: url(../../static/images/ubbgimg.png);
		background-repeat: no-repeat;
		background-size: 100%;

		.ub-heard {
			text-align: center;
			color: #FFFFFF;
			font-weight: 500;
			padding-top: 98upx;
			font-size: 36upx;
			position: relative;

			image {
				width: 40upx;
				height: 40upx;
				right: 36upx;
				position: absolute;
				// vertical-align: middle;

			}
		}

		.top-content {
			width: 100%;
			text-align: center;
			font-size: 24upx;
			font-weight: 400;
			color: #FFFFFF;

			view {
				color: #FFFFFF;
				font-weight: 600;
				font-size: 84upx;
			}
		}
	}
</style>