YXGJ/components/designList.vue

<template>
    <view>

        <navigator class="list-item" url="#" v-for="(item, index) in  list " hover-class="navigator-hover"
            :key="item.sat_coursewareid" @click="onClick(index)">
            <view style="position: relative;">
                <image class="image" :src="item.cover" mode="aspectFill" lazy-load="true" />
                <block v-if="showStatus">
                    <view v-if="item.status == '发布'" class="status" style="background: #FFF0F2;color: #E3041F;">
                        已审核
                    </view>
                    <view v-else class="status">
                        未审核
                    </view>
                </block>
                <view class="createby-box">
                    <image class="headpic"
                        :src="item.headpic || 'https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202406011717209838416B6150695f.webp'"
                        mode="aspectFill" lazy-load="true" />
                    <view class="name u-line-1">{{ item.createby }}</view>
                </view>
            </view>
            <view class="tips">
                <view class="label u-line-1">{{ item.title_c || item.title }}</view>
                <view class="iconfont-box">
                    <text class="iconfont icon-pinglun-hui">
                        <text style="padding-left: 2px;" />{{ item.commentcount }}
                    </text>
                    <text class="iconfont icon-yidianzan">
                        <text style="padding-left: 2px;" />{{ item.likecount }}
                    </text>
                    <text class="iconfont icon-yishoucang">
                        <text style="padding-left: 2px;" />{{ item.collectcount }}
                    </text>
                </view>
            </view>
        </navigator>
    </view>
</template>

<script>
import { formattedFiles } from "../utils/settleFiles"
export default {
    props: {
        list: {
            type: Array,
        },
        toDetail: {
            type: Function
        },
        showStatus: {
            type: Boolean
        }
    },
    methods: {
        handleList(list) {
            return list.map(v => {
                v.attinfos = formattedFiles(v.attinfos);
                v.cover = v.attinfos.length ? this.getSpecifiedImage(v.attinfos.find(s => s.usetype == "sat_sharematerial" && s.fileType == 'image') || v.attinfos.find(s => s.fileType == 'image')) : uni.getStorageSync("site").logo || ''
                return v
            })
        },
        onClick(index) {
            this.$emit("toDetail", index)
        }
    },
}
</script>

<style lang="scss" scoped>
.list-item {
    width: 355px;
    margin: 0 auto 20px;
    border-radius: 5px;
    overflow: hidden;

    .image {
        position: relative;
        width: 355px;
        height: 240px;
        border-radius: 5px;
        overflow: hidden;
    }

    .status {
        position: absolute;
        top: 10px;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 24px;
        background: #E3041F;
        border-radius: 12px 0px 0px 12px;
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-size: 12px;
        color: #FFFFFF;
    }

    .createby-box {
        position: absolute;
        display: flex;
        height: 24px;
        line-height: 24px;
        background: rgba($color: #333333, $alpha: 0.8);
        border-radius: 12px;
        bottom: 10px;
        left: 10px;
        padding-right: 10px;

        .headpic {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin-left: -1px;
        }

        .name {
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-size: 12px;
            color: #FFFFFF;
            margin-left: 5px;
            max-width: 200px;
        }
    }

    .tips {
        display: flex;
        height: 20px;
        line-height: 20px;
        justify-content: space-between;

        .title {
            flex: 1;
            font-family: PingFang SC, PingFang SC;
            font-size: 14px;
            color: #333333;
            margin-top: 10px;
            margin-bottom: 20px;
        }

        .iconfont-box {
            .iconfont {
                font-family: Source Han Sans SC, Source Han Sans SC;
                font-size: 12px;
                color: #999999;
                margin-right: 15px;
            }

            .iconfont:last-child {
                margin-right: 0;
            }
        }
    }
}
</style>