<template> <div> <div v-if="dataList.length != 0"> <div class="card" v-for="(v, i) in dataList" :key="i"> <div class="card_title" v-if="v.dateTime"> <div> {{ Moment(v.createTime).locale("zh-cn").format("dddd") }} </div> <span>{{ v.createTime }}</span> </div> <div class="card_con"> <div class="card_L"></div> <div class="card_R"> <div class="card_R_text"> <div class="text_title"> {{ v.categoryName }} - <span v-if="v.type == 1">青铜级</span> <span v-if="v.type == 2">黄金级</span> <span v-if="v.type == 3">铂金级</span> </div> <div class="text_grey">用时:{{ v.spendTime }}</div> <div class="text_grey"> 错误:{{ v.errorCount }}题 </div> </div> <!-- <div class="card_R_btn"> <div class="btn">查看</div> </div> --> </div> </div> </div> </div> <van-empty v-else description="暂无数据" /> </div> </template> <script> export default { data() { return { recordList: [], }; }, computed: { dataList() { let recordList = JSON.parse(JSON.stringify(this.recordList)); let [arr, time] = [[], ""]; if (recordList.length == 0) return []; for (let i = 0; i < recordList.length; i++) { arr.push(recordList[i]); if (time == recordList[i].createTime) { arr[i].dateTime = ""; } else { time = recordList[i].createTime; arr[i].dateTime = time; } } console.log(arr); return arr; }, }, methods: { //获取刷题记录 getRecord() { this.yxAxios .get( `${ this.kqUrl }/item/doItemList?travelerNum=${localStorage.getItem( "travelerNum" )}&pageNum=1&pageSize=999` ) .then((res) => { if (res.data.code == 200) { this.recordList = res.data.data.list; console.log(this.recordList); } else { this.$toast.fail(res.data.message); } }); }, }, mounted() { this.getRecord(); }, }; </script> <style lang="scss" scoped> .card { padding: 0vw 5vw; box-sizing: border-box; .card_title { display: flex; align-items: center; color: #333333; font-size: 35px; font-weight: 700; margin: 20px 0; span { color: #999999; font-size: 30px; margin-left: 30px; } } .card_con { display: flex; .card_L { width: 5px; margin-left: 5vw; background-color: #f5f6fa; } .card_R { width: 80%; height: 210px; margin: 50px 0 50px 10vw; background-color: #f6f9fd; padding: 30px; box-sizing: border-box; display: flex; justify-content: space-between; .card_R_text { width: 80%; display: flex; align-content: space-between; flex-wrap: wrap; margin-left: 10px; .text_title { width: 100%; font-size: 30px; color: #333333; } .text_grey { width: 100%; font-size: 28px; color: #999999; } } .card_R_btn { width: 20%; display: flex; align-items: center; .btn { width: 120px; height: 60px; background-color: #6673ff; color: #fff; font-size: 28px; border-radius: 28px; display: flex; align-items: center; justify-content: center; letter-spacing: 2px; } } } } } </style>