WenWuGuanJia/answer_pages/examine/history.vue

<template>
	<view class="wrap">
		<u-navbar title="答题历史" :placeholder="true" bgColor="rgba(255,255,255,0.3)" leftText="返回" :autoBack="true" titleStyle="font-weight:bold;color:#7a5831"></u-navbar>
		<view class="main">
			<view class="questions" v-if="state.items.length > 0">
				<view class="b-item" v-for="(item, index) in state.items" :key="index" @click="onReview(item.id)">
					<view class="b-main">
						<view class="b-title">
							<view class="s-num">{{ index + 1 }}.</view>
							<text class="s-cont">【{{ item.type_text }}】{{ item.title }}</text>
						</view>
						<view class="b-info">
							<view class="s-flag f-right" v-if="item.result == 2">{{ item.result_text }}</view>
							<view class="s-flag f-wrong" v-else-if="item.result == 3">{{ item.result_text }}</view>
							<view class="s-flag f-timeout" v-else-if="item.result == 4">{{ item.result_text }}</view>
							<view class="s-flag f-timeout-end" v-else-if="item.result == 5">{{ item.result_text }}</view>
							<view class="s-time">{{ costTime(item.cost_time) }}</view>
						</view>
					</view>
					<view class="b-more">
						<view class="iconfont icon-more"></view>
					</view>
				</view>
			</view>
			<!-- 加载中 -->
			<load-more :loadingType="loadingType" :loadingText="loadingText" color="#ffffff"></load-more>
		</view>
	</view>
</template>

<script>
import { getHistory } from '@/service/api/examine.js';
import mixinsCommon from '@/mixins/common.js';
import mixinsAuth from '../../mixins/auth.js';
export default {
	mixins: [mixinsCommon, mixinsAuth],
	data() {
		return {
			state: {
				items: []
			},
			loadingType: 1,
			loadingText: ''
		};
	},
	onLoad(options) {
		this.sessionId = options.session_id;
		this.loadHistory(true);
	},
	onReachBottom() {
		if (this.loadingType !== 1 && this.loadingType !== 2) {
			this.loadHistory();
		}
	},
	methods: {
		loadHistory(refresh) {
			console.log('loadHistory', refresh);
			if (refresh) {
				this.page = 1;
				this.state.items = [];
			} else {
				this.page++;
			}
			this.loadingType = 1;
			this.loadingText = '';
			getHistory(this.sessionId, this.page, 10).then(([err, res]) => {
				console.log('getHistory', err, res);
				this.loadingType = -1;
				if (!err) {
					if (res.items.length > 0) {
						this.state.items = [...this.state.items, ...res.items];
					} else {
						this.loadingType = 2;
						if (this.page == 1) {
							this.loadingText = '暂无数据';
						}
						this.page--; // 重置分页
					}
				} else {
					this.loadingType = 3;
				}
			});
		},
		onReview(recordId) {
			uni.navigateTo({
				url: '/answer_pages/examine/review?record_id=' + recordId
			});
		}
	}
};
</script>

<style lang="scss">
// page {
// 	padding-bottom: env(safe-area-inset-bottom);
// 	background: #da5650;
// }

.wrap {
	background: #da5650;
}

.main {
	padding: 40upx;
}

.questions {
	.b-item {
		display: flex;
		margin-bottom: 40upx;
		background: #fff;
		border-radius: 20upx;
		padding: 20upx;

		.b-main {
			flex: 1;
			display: flex;
			flex-direction: column;

			.b-title {
				display: flex;

				.s-num {
					font-size: 28upx;
				}

				.s-cont {
					margin-left: 0upx;
					font-size: 28upx;
				}
			}

			.b-info {
				margin-top: 10upx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.s-flag {
					font-size: 24upx;
					padding: 0 10upx;
					height: 50upx;
					line-height: 50upx;
					color: #fff;
					border-radius: 10upx;

					&.f-right {
						background: #1eab69;
					}

					&.f-wrong {
						background: #d13b42;
					}

					&.f-timeout {
						background: #ff8d1a;
					}

					&.f-timeout-end {
						background: #338ada;
					}
				}

				.s-time {
					color: #da5650;
					font-size: 24upx;
				}
			}
		}

		.b-more {
			margin-left: 10upx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #e5e5e5;
		}
	}
}
</style>