...
This commit is contained in:
@@ -6,205 +6,183 @@
|
||||
* @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="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="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>
|
||||
<!-- 评测状态 -->
|
||||
<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";
|
||||
import { evaluations } from '@/apis/interfaces/evaluation.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
evalList: [],
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
// 测试列表
|
||||
getList() {
|
||||
evaluations().then((res) => {
|
||||
this.evalList = res;
|
||||
});
|
||||
},
|
||||
// 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}`,
|
||||
});
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
evalList: []
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
// 测试列表
|
||||
getList() {
|
||||
evaluations().then(res => {
|
||||
this.evalList = res;
|
||||
});
|
||||
},
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
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;
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user