172 lines
4.3 KiB
Vue
172 lines
4.3 KiB
Vue
<!--
|
||
* @Description:用于展示评测列表，带分页加载更多~
|
||
* @Author: Aimee·Zhang
|
||
* @Date: 2022-01-05 09:13:53
|
||
* @LastEditors: Aimee·Zhang
|
||
* @LastEditTime: 2022-01-14 08:40:36
|
||
-->
|
||
<template>
|
||
<view class="evaluation-list ">
|
||
<view class="evaluation-item" v-for="(item, index) in evalList" :key="index">
|
||
<!-- 评测列表主要内容 标题 图片 描述 -->
|
||
<view class="--content">
|
||
<u-image class="content-img" width="170rpx" height="170rpx" radius="20rpx" :src="item.cover ? item.cover : require('../../static/imgs/test.png')" :lazy-load="true" />
|
||
<view class="title-des"> <view class="title">{{ item.title }}</view> <view class="des">{{ item.description || '--' }}</view> </view>
|
||
</view>
|
||
|
||
<!-- 分数 -->
|
||
<view class="score" v-if="item.is_answer"> <span>{{ item.answer.total }}</span> 分 </view>
|
||
|
||
<!-- 评测状态 -->
|
||
<view class="--status">
|
||
<!-- 已测试展示 状态-->
|
||
<view class="status" v-if="item.is_answer"> <span class="dian">·</span> {{ item.remark }} </view>
|
||
<view v-if="item.is_answer" class="history" @click="toResult(item)">查看历史结果</view>
|
||
<!-- 未测试展示 状态-->
|
||
<view class="status" v-if="!item.is_answer"> <span class="dian">·</span> <span class="person">{{ item.remark }}</span> 人已测 | 约4~8分钟 </view>
|
||
<u-icon name="arrow-right" :color="item.is_answer ? '#26a377' : '#faa81a'" size="14" :bold="true" :label="item.is_answer ? '重新评测' : '开始测评'" labelPos="left" labelSize="14" space="1" :labelColor="item.is_answer ? '#26a377' : '#faa81a'" @click="nowEva(item)" />
|
||
</view>
|
||
</view>
|
||
<!-- 没有更多 -->
|
||
<view class="no-more">没有更多~</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { evaluations } from '@/apis/interfaces/evaluation.js';
|
||
export default {
|
||
data() {
|
||
return {
|
||
evalList: []
|
||
};
|
||
},
|
||
onShow() {
|
||
this.getList();
|
||
},
|
||
methods: {
|
||
// 测试列表
|
||
getList() {
|
||
evaluations().then(res => {
|
||
this.evalList = res;
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none",
|
||
duration: 2000,
|
||
mask: true
|
||
})
|
||
});
|
||
},
|
||
// nowEva
|
||
nowEva(item) {
|
||
uni.navigateTo({
|
||
url: `/pages/evaluation/introduce?id=${item.evaluation_id}`
|
||
});
|
||
},
|
||
//测评结果
|
||
toResult(item) {
|
||
uni.navigateTo({
|
||
url: `/pages/evaluation/result?id=${item.evaluation_id}`
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// 列表
|
||
.evaluation-item {
|
||
background-color: #fff;
|
||
padding: $padding;
|
||
margin: $margin;
|
||
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||
border-radius: $radius;
|
||
position: relative;
|
||
// 评测列表主要内容
|
||
.--content {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
box-sizing: border-box;
|
||
.content-img {
|
||
box-shadow: 0 0 10rpx 4rpx rgba($color: $main-color, $alpha: 0.1);
|
||
border-radius: 30rpx;
|
||
}
|
||
.title-des {
|
||
padding-left: $padding - 10;
|
||
width: 440rpx;
|
||
.title {
|
||
font-size: $title-size + 4;
|
||
font-weight: bold;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
width: 340rpx;
|
||
}
|
||
.des {
|
||
font-size: $title-size-lg;
|
||
color: $text-gray;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
padding-top: $padding - 8;
|
||
}
|
||
}
|
||
}
|
||
// .测试状态
|
||
.--status {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
color: $text-gray-m;
|
||
font-size: $title-size-m;
|
||
padding-top: $padding;
|
||
.status {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
.dian {
|
||
font-size: $title-size-lg;
|
||
margin-right: $padding * 0.2;
|
||
font-weight: bold;
|
||
}
|
||
.person {
|
||
color: #faa81a;
|
||
}
|
||
}
|
||
.history {
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
// 分数
|
||
.score {
|
||
font-size: $title-size-m - 2;
|
||
color: $text-gray-m;
|
||
position: absolute;
|
||
right: $padding;
|
||
top: $padding - 10;
|
||
span {
|
||
font-size: 50rpx;
|
||
color: $main-color;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
// 没有更多
|
||
.no-more {
|
||
color: $uni-text-color-disable;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
padding: $padding;
|
||
font-size: $title-size-m;
|
||
}
|
||
</style>
|