kpsz-answer-h5/pages/record/index.vue

<template>
	<view class="wrap">


		<view class="container">
			<view class="user-info">
				<view class="user-info-avatar">
					<img class="avatar" :src="userInfo.headimgurl ? userInfo.headimgurl : logo" alt="">

				</view>
				<view class="user-info__text">
					<view class="name">
						{{ userInfo.name || 'xx' }}
					</view>
					<view class="club">
						{{ userInfo.mobile ? userInfo.mobile : '' }}
					</view>
				</view>
			</view>

			<view class="panel1">
				<view class="left">
					<view class="num">{{answercount}}</view>
					<view class="text">已答次数</view>
				</view>
				<view class="right">
					<view class="num">{{ userInfo.quiz_total_score || 0 }}</view>
					<view class="text">累计得分</view>
				</view>
			</view>
			<view style="padding-bottom:40rpx">
				<view class="panel1 panel2" v-for="(item,index) in askList">
					<view class="left">
						<view class="num">
							{{item.score}}<span>分</span>
						</view>
					</view>
					<view class="right">
						<view class="num">第{{numberToChinese(index+1)}}次答题</view>
						<view class="text">{{item.created_at?item.created_at.substring(0,16):''}}</view>
					</view>
				</view>
			</view>



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

<script>
	import {
		isNull,
		toast
	} from "@/common/util.js"
	export default {
		data() {
			return {
				logo:require('@/static/index_logo.png'),
				userInfo: {},
				answercount: 0,
				askList: [],
				countList: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十"],

			};
		},
		methods: {
			async getUserInfo() {
				const res = await this.$u.api.user()
				this.$u.vuex('vuex_user', res);
				this.userInfo = res;
				if (isNull(res.mobile)) {
					uni.redirectTo({
						url: '/pages/login/index'
					})
				}
			},
			async getQuestion() {
				let that = this
				const res = await this.$u.api.questions()
				that.answercount = res.ask.length
				that.askList = res.ask
			},
			numberToChinese(num) {
				const chineseDigits = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
				const chineseUnits = ['', '十', '百', '千', '万', '亿'];

				const numStr = num.toString();
				const numLength = numStr.length;

				let result = '';

				for (let i = 0; i < numLength; i++) {
					const digit = parseInt(numStr[i]);
					const unit = chineseUnits[numLength - i - 1];

					if (digit !== 0) {
						result += chineseDigits[digit] + unit;
					} else {
						if (unit === '十' || unit === '百' || unit === '千') {
							result += chineseDigits[digit];
						}
					}
				}

				return result;
			}
		},
		onLoad() {
			this.getQuestion()
		},
		onShow() {
			this.getUserInfo()
		},
	}
</script>

<style lang="scss" scoped>
	.wrap {
		height: 100vh;
		width: 100vw;
		background-image: url('../../static/bg.jpg');
		background-size: 100% 100%;
		background-repeat: no-repeat;

		overflow: scroll;
	}


	.container {

		position: relative;
		z-index: 1;

		.user-info {
			display: flex;
			align-items: center;
			padding: 82rpx 0 0 54rpx;

			.user-info-avatar {
				width: 121rpx;
				height: 121rpx;
				border-radius: 100%;
				// object-fit: contain;
				// border: 1rpx solid #fff;
				// box-sizing: border-box;
			}

			.avatar {
				width: 121rpx;
				height: 121rpx;
				border-radius: 100%;
			}

			&__text {
				color: #fff;

				margin-left: 32rpx;

				.name {
					font-size: 36rpx;
					font-weight: 500;
					word-break: keep-all;
					line-height: 42rpx;
				}

				.club {
					font-size: 24rpx;
					font-weight: 400;

					margin-top: 13rpx;
				}
			}
		}

		@mixin panel {
			width: 658rpx;
			background: #fff;
			box-sizing: border-box;
			border-radius: 40rpx;
			filter: drop-shadow(0 0 7.5px rgba(226, 54, 50, 0.1));
			margin: auto;

			.num {
				font-size: 52rpx;
				text-transform: uppercase;
				color: #ff0000;
				font-weight: bold;
			}

			.text {
				font-size: 28rpx;
				text-transform: uppercase;
				color: #666666;
			}
		}

		.panel1 {
			@include panel;

			height: 164rpx;
			display: flex;
			align-items: center;
			margin: 73rpx auto 0 auto;

			&>view {
				flex: 1;
				text-align: center;

				&:nth-child(1) {

					position: relative;

					&::after {
						content: "";
						height: 91rpx;
						width: 2rpx;
						background: #989898;
						opacity: 0.302;
						transform: translateY(-50%);

						position: absolute;
						right: 0;
						top: 50%;
					}
				}
			}
		}

		.panel2 {
			margin: 40rpx auto;

			.left {
				flex: none;
				width: 30%;

				.num {
					span {
						font-size: 28rpx;
						color: #666;
						font-weight: normal;
					}
				}
			}

			.right {
				text-align: left;
				padding: 0 60rpx;

				.num {
					font-size: 40rpx;
					color: #333;
				}
			}
		}
	}
</style>