Election/src/pages/electionList/index.vue

<script setup lang="ts">
import { getVoteList } from '@/api/common'
const navto = (url: string, params = {}) => uni.$util.goToPage({ url, params })
const doSearch = (formData: { page: number; limit: number }, onSuccess: Function) => {
    getVoteList(formData).then((res) => {
        const { data } = res as { data: { data: any; total: number } }
        onSuccess({ data })
    })
}
</script>

<template>
    <view class="electionList">
        <ex-list ref="reListRef" custom-list-type="scroll" :on-form-search="doSearch">
            <template v-slot="{ row, index }">
                <view class="items" :uid="'items' + index">
                    <view class="flex">
                        <view class="flex1">
                            <view class="flex-center-start">
                                <text class="text-ellipsis title">{{ row.title }}</text>
                                <text class="status b" v-if="row.status === 2">进行中</text>
                                <text class="status f" v-else-if="row.status === 1">未开始</text>
                                <text class="status e" v-else>已结束</text>
                            </view>
                            <view class="time">{{ `投票时间：${row.start_time} 至 ${row.end_time}` }}</view>
                        </view>
                        <view :class="{ arrow: true, active: row.showInfo }" @click="row.showInfo = !row.showInfo">
                            <u-icon name="arrow-down" color="#9CA3AF" />
                        </view>
                    </view>
                    <view class="info" v-if="row.showInfo">
                        <view class="flex info-items" v-for="(v, k) of row.candidate" :key="k">
                            <view class="head">
                                <image :src="v.photo" mode="aspectFill" />
                            </view>
                            <view class="content flex1">
                                <view class="name flex-center-start">
                                    <text>{{ v.name }}</text>
                                    <text class="status" v-if="v.vote_result == 1">当选</text>
                                    <text class="status un" v-else>未当选</text>
                                </view>
                                <view class="votes">得票数：{{ v.agree_num }}</view>
                            </view>

                            <view class="progress">
                                <u-line-progress :percentage="v.ageree_percent" height="8rpx" active-color="#2563EB" :show-text="false" />
                                <view class="progress-text">{{ v.ageree_percent }}%</view>
                            </view>
                        </view>

                        <view class="info-bts" @click.stop="navto('pages/electionList/info', { id: row.id })">查看投票详情</view>
                    </view>
                </view>
            </template>
        </ex-list>
    </view>
</template>

<style scoped lang="scss">
.electionList {
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 32rpx;
    background-color: #f9fafb;

    .items {
        padding: 32rpx;
        border-radius: 12px;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)), #ffffff;
        box-sizing: border-box;
        border: 1px solid #f3f4f6;
        box-shadow:
            0px 1px 2px -1px rgba(0, 0, 0, 0.1),
            0px 1px 3px 0px rgba(0, 0, 0, 0.1);
        margin-bottom: 32rpx;

        .text-ellipsis {
            overflow: hidden;
            white-space: noraml;
            text-overflow: ellipsis;
        }

        .title {
            color: #000;
            font-size: 32rpx;
            font-weight: 500;
            line-height: 48rpx;
        }

        .status {
            font-size: 24rpx;
            border-radius: 20rpx;
            padding: 0 16rpx;
            margin-left: 16rpx;
            white-space: nowrap;

            &.b {
                color: #fff;
                background-color: #2563eb;
            }

            &.f {
                color: #6b7280;
                background-color: #e5e7eb;
            }

            &.e {
                color: #fff;
                background-color: #ef4444;
            }
        }

        .time {
            padding-top: 8rpx;
            color: #6b7280;
            line-height: 40rpx;
            font-size: 28rpx;
        }

        .arrow {
            transition: 0.3s all ease-in;

            &.active {
                transform: rotateZ(180deg);
            }
        }

        .info {
            &-items {
                margin-top: 32rpx;

                .head {
                    width: 96rpx;
                    height: 96rpx;
                    border-radius: 50%;
                    overflow: hidden;
                    background-color: #6b7280;
                    margin-right: 24rpx;
                }

                .content {
                    height: min-content;

                    .name {
                        font-size: 28rpx;
                        font-weight: 500;
                        line-height: 40rpx;
                        color: #000000;

                        .status {
                            font-size: 20rpx;
                            font-weight: normal;
                            border-radius: 999rpx;
                            padding: 8rpx 24rpx;
                            line-height: 20rpx;
                            color: #2563eb;
                            background: rgba(37, 99, 235, 0.1);

                            &.un {
                                color: #f44336;
                                background: rgba(244, 67, 54, 0.1);
                            }
                        }
                    }

                    .votes {
                        font-size: 28rpx;
                        line-height: 40rpx;
                        color: #6b7280;
                    }
                }

                .progress {
                    width: 192rpx;
                    height: min-content;

                    &-text {
                        padding-top: 8rpx;
                        color: #6b7280;
                        font-size: 24rpx;
                        line-height: 32rpx;
                    }
                }
            }

            &-bts {
                padding: 16rpx;
                margin: 48rpx 0 24rpx;
                font-size: 28rpx;
                font-weight: normal;
                line-height: 42rpx;
                text-align: center;
                color: #ffffff;
                background-color: #2563eb;
                border-radius: 8rpx;
            }
        }
    }
}
</style>