ZhHealth/pages/evaluation/list.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;
            });
        },
        // 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>