TEAMModelOS/TEAMModelOS.Extension/Contest.Client/src/view/homepage/HomePage.vue

<template>
    <div class="home-page">
        <el-carousel trigger="click" :autoplay="false" style="margin-top: 30px;">
            <el-carousel-item v-for="(item, index) in carousel" :key="index">
                <div class="carousel-box" @click="openBanner(item)">
                    <img :src="item.img" alt="" />
                    <!-- <div class="title-box">
                        <p>{{ item.title }}</p>
                        <p>{{ item.subtitle }}</p>
                    </div> -->
                </div>
            </el-carousel-item>
        </el-carousel>
        <div class="act-list-box">
            <div style="margin-top: 20px; display: flex; justify-content: space-between;">
                <el-radio-group v-model="actType">
                    <el-radio-button value="all">{{ $t('home.actType.all') }}</el-radio-button>
                    <!-- <el-radio-button label="notStart">未开始</el-radio-button> -->
                    <el-radio-button value="going">{{ $t('home.actType.going') }}</el-radio-button>
                    <el-radio-button value="finish">{{ $t('home.actType.finish') }}</el-radio-button>
                </el-radio-group>
                <el-input v-model="searchWord" clearable :placeholder="$t('placeholderlist.searchActName')" style="width: 200px;">
                    <template #append>
                        <el-button :icon="Search" @click="searchWords(lessonList)" />
                    </template>
                </el-input>
            </div>
            <div class="act-list" v-if="lessonListShow.length">
                <div v-for="(item, index) in lessonListShow" :key="index" class="lesson-info" @click="openInfo(item)">
                    <div class="img-box">
                        <img :src="item.posterShow" alt="">
                    </div>
                    <div class="info-box">
                        <div class="lesson-name">
                            <p class="type-box" :style="{'background-color': item.scope === 'area' ? '#ff9900' : (item.scope === 'school' ? '#19be43' : '#a8a8a8')}">
                                {{ item.scope === 'public' ? $t('home.scope.public') : (item.scope === 'area' ? $t('home.scope.area') : $t('home.scope.school')) }}
                            </p>
                            <p>{{ item.name }}</p>
                        </div>
                        <p class="info-title">
                            <span>{{ $t('home.actInfo.time') }}</span>：
                            <span>{{ $tools.formatTime(item.stime, 'yyyy-MM-dd') }}</span> - <span>{{ $tools.formatTime(item.etime, 'yyyy-MM-dd') }}</span>
                        </p>
                        
                        <p class="info-title">
                            <span>{{ $t('home.actInfo.profile') }}</span>
                            ：{{ item.description || '-' }}
                        </p>
                        <p class="info-title">
                            <span>{{ $t('home.actInfo.place') }}</span>
                            ：{{ item.address || '-' }}
                        </p>
                        <p class="info-title">
                            <span>{{ $t('home.actInfo.host') }}</span>：
                            <span v-for="(zb, zIndex) in item.zb" :key="zIndex">{{ zb || '-' }}</span>
                        </p>
                    </div>
                    <div :class="['lesson-type', item.publish === 1 ? 'going' : 'end']">
                        {{ item.publish === 1 ? $t('home.actType.going') : item.publish === 2 ? $t('home.actType.finish') : '' }}
                    </div>
                </div>
            </div>
            <el-empty v-else :description="$t('elMessage.noAct')" :image-size="300" />
            <!-- <div class="act-list" v-else style="justify-content: center; font-size: 20px; margin: 40px 0;">
                暂无活动
            </div> -->
        </div>
    </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { getCurrentInstance, onMounted, reactive, ref, toRaw, watch } from "vue"
import { useRouter } from "vue-router"
// import { useStore } from "vuex"
import { useStore } from "@/pinia/common"
import { ElLoading } from "element-plus"

const router = useRouter()
let store = useStore()
let { proxy } = getCurrentInstance()

let actType = ref('all')
let searchWord = ref('')
let carousel = ref([])
let lessonList = ref([])
let lessonListShow = ref([])

onMounted(() => {
    let banners = store.website.banners
    banners.forEach(item => {
        if(item.source === 'upload') {
            item.img = store.website.url + item.blob + '?' + store.website.sas
        } else if(item.source === 'activity') {
            item.img = store.website.url + item.blob + '?' + store.website.sas
        }
        carousel.value.push(item)
    })
    if(!carousel.value.length) {
        carousel.value.push({
            img: require('@/assets/img/no-poster-cn.jpg'),
            title: '醍摩豆',
            subtitle: ''
        })
    }
    getActList()
})

function openInfo(info) {
    router.push({
        name: 'activityInfo',
        params: {
            info: info.id
        }
    })
}

function getActList() {
    /* const loading = ElLoading.service({
        lock: true,
        text: '加载中',
        background: 'rgba(0, 0, 0, 0.7)'
    }) */
    let areaRoute = window.location.pathname.split('/')
    let params = {
        route: areaRoute[1]
    }
    proxy.$api.getActivityList(params).then(res => {
        if(res.activities) {
            res.activities.forEach(item => {
                item.posterShow = !item.poster ? require('@/assets/img/no-poster-cn.jpg') : item.url + item.poster + '?' + item.sas
                lessonList.value.push(item)
            })
            lessonList.value = lessonList.value.sort((a, b) => b.createTime - a.createTime)
            lessonListShow.value = lessonList.value
        }
    }).finally(() => {
        // loading.close()
    })
}

function openBanner(data) {
    if(data.source === 'activity') {
        router.push({
            name: 'activityInfo',
            params: {
                info: data.url
            }
        })
    } else {
        window.open(data.url)
    }
}

function searchWords() {
    if(actType.value != 'all') {
        lessonListShow.value = lessonList.value.filter(item => actType.value === 'going' ? item.publish === 1 : item.publish === 2)
    } else {
        lessonListShow.value = lessonList.value
    }
    lessonListShow.value = lessonListShow.value.filter(item => item.name.includes(searchWord.value))
}

watch(actType, ((newValue, oldValue) => {
    searchWords()
}))
</script>
<style lang="less" scoped>
.home-page {
    padding: 0 13%;
    // padding-top: 20px;
    height: 100%;
    background: linear-gradient(0deg, #c3d9e9, transparent);
    overflow: auto;

    .carousel-box {
        width: 100%;
        height: 100%;
        position: relative;
        display: flex;
        align-items: center;

        .title-box {
            position: absolute;
            bottom: 4%;
            left: 5%;

            &>p:first-child {
                font-size: 20px;
                font-weight: bold;
                margin-bottom: 10px;
            }
        }
    }

    .act-list-box {
        margin: 20px 0;
        background: #fff;
        border-radius: 10px;
        padding: 10px 20px;

        .act-list {
            margin: 20px 0;
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            
            .lesson-info {
                width: 30%;
                margin-right: 30px;
                margin-bottom: 20px;
                position: relative;
                cursor: pointer;
                border-radius: 5px;
                background-color: #edf3f7;

                &:hover {
                    box-shadow: 0 26px 40px -24px rgba(0, 36, 100, .3);
                    -webkit-transform: translateY(-6px);
                    transform: translateY(-6px);
                    -webkit-transition: all .3s ease 0s;
                    transition: all .3s ease 0s;
                }

                .img-box {
                    max-width: 95%;
                    /* border-top-left-radius: 5px;
                    border-top-right-radius: 5px; */
                    margin: 10px;
                    height: 142px;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    img {
                        width: auto;
                        max-width: 100%;
                        max-height: 100%;
                        border-radius: 5px;
                    }
                }

                .info-box {
                    height: 150px;
                    // border: 1px solid #ccc;
                    padding: 20px 15px;
                    padding-top: 10px;
                    color: #ccc;
                    line-height: 18px;
                    border-bottom-left-radius: 5px;
                    border-bottom-right-radius: 5px;
                    // background-color: #F2F7FC;

                    .lesson-name {
                        margin-bottom: 15px;
                        color: #000;
                        font-size: 17px;
                        display: flex;
                        align-items: center;

                        &>p:nth-child(2) {
                            text-align: center;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }

                        .type-box {
                            background-color: #FF9900;
                            font-size: 12px;
                            font-weight: normal;
                            color: #fff;
                            padding: 3px 5px;
                            border-radius: 5px;
                            margin-right: 5px;
                            min-width: 25px;
                        }
                    }

                    .info-title {
                        font-size: 14px;
                        margin-bottom: 7px;
                        color: #6a6a6a;

                        /* &>span {
                            color: #1B2773;
                        } */

                    }
                }

                .lesson-type {
                    position: absolute;
                    top: 10px;
                    right: 10px;
                    height: 20px;
                    line-height: 20px;
                    font-size: 14px;
                    text-align: center;
                    padding: 2px 10px;
                    border-top-right-radius: 5px;
                    border-bottom-left-radius: 5px;
                }

                .going {
                    background-color: rgb(8, 153, 8);
                    color: #fff;
                }

                .end {
                    background-color: #ccc;
                    color: #3f3f3f;
                }
            }
        }
    }
}
</style>

<style lang="less">
.home-page {
    .el-carousel__container {
        height: 500px;
    }
    .el-carousel__item {
        img{
            max-width: 100%;
            max-height: 100%;
            display: block;
            cursor: pointer;
            border-radius: 10px;
            margin: auto;
        }
    }
}
</style>