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

<template>
	<view class="wrap">
		<view class="container">
			<view class="content-wrapper">
				<block v-if="askList.length > 0">
					<view style="padding-bottom:40rpx">
						<view class="record-item" v-for="(item,index) in askList" :key="index">
							<view class="record-content">
								<view class="record-title">第{{numberToChinese(index+1)}}次答题</view>
								<view class="record-time">{{item.created_at?item.created_at.substring(0,16):''}}</view>
							</view>
						</view>
					</view>
				</block>
				<block v-else>
					<view class="no-data-wrapper">
						<u-empty text="暂无答题记录" color="#000" icon-color="#000" mode="list">
							<view slot="bottom" class="empty-btn-wrapper">
								<u-button 
									type="primary" 
									shape="circle"
									:custom-style="{
										background: 'linear-gradient(to right, #57b0fe, #446efd)',
										color: '#fff',
										'font-size': '32rpx',
										padding: '30rpx 60rpx',
										width: 'auto'
									}"
									@click="goToAnswer"
								>去答题</u-button>
							</view>
						</u-empty>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		isNull,
		toast
	} from "@/common/util.js"
	export default {
		data() {
			return {
				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;
			},
			goToAnswer() {
				uni.navigateTo({
					url: '/pages/answer/index'
				});
			}
		},
		onLoad() {
			
		},
		onShow() {
			// this.getUserInfo()
			this.getQuestion()
		},
	}
</script>

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

		overflow: scroll;
	}


	.container {
		position: relative;
		z-index: 1;
		min-height: 100vh;
		
		.content-wrapper {
			min-height: calc(100vh - 200rpx);
			display: flex;
			flex-direction: column;
			
			.no-data-wrapper {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.empty-btn-wrapper {
					margin-top: 40rpx;
				}
			}
		}

		.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;
				}
			}
		}

		.record-item {
			width: 658rpx;
			background: linear-gradient(to bottom, #95d9fe 0%, #95d9fe 5%, #fff 60%, #fff 100%);
			border: 1rpx solid rgba(255, 255, 255, 0.5);
			box-sizing: border-box;
			border-radius: 40rpx;
			filter: drop-shadow(0 0 7.5px rgba(226, 54, 50, 0.1));
			margin: 40rpx auto 0 auto;
			padding: 40rpx 60rpx;
			
			&:first-child {
				margin-top: 73rpx;
			}
			
			.record-content {
				display: flex;
				flex-direction: column;
				gap: 20rpx;
				
				.record-title {
					font-size: 40rpx;
					color: #333;
					font-weight: bold;
				}
				
				.record-time {
					font-size: 28rpx;
					color: #666666;
				}
			}
		}
	}
</style>