Election/src/app/pages/electionList/index.vue

<script setup lang="ts">
import { onMounted, ref } from "vue";

const doSearch = (_formData: { page: number; limit: number }, onSuccess: Function) => {
    // const submitData = { ...formData }
    // listApi(submitData, userStore.useType).then((res) => {
    //     const { data } = res as { data: { data: any; total: number } }
    //     onSuccess({ data })
    // })
    onSuccess({
        data: {
            data: [
                {
                    id: 1,
                    name: "测试一",
                    phone: "17612341234",
                    address: "测试地址",
                    region_desc: "测试地址测试地址测试地址测试地址",
                    is_default: true,
                },
                {
                    id: 2,
                    name: "测试一",
                    phone: "17612341234",
                    address: "测试地址",
                    region_desc: "测试地址测试地址测试地址测试地址",
                },
                {
                    id: 3,
                    name: "测试一",
                    phone: "17612341234",
                    address: "测试地址",
                    region_desc: "测试地址测试地址测试地址测试地址",
                },
                {
                    id: 4,
                    name: "测试一",
                    phone: "17612341234",
                    address: "测试地址",
                    region_desc: "测试地址测试地址测试地址测试地址",
                },
            ],
            total: 0,
        },
    });
};
</script>

<template>
    <view class="electionList">
        <ex-list ref="reListRef" custom-list-type="scroll" :on-form-search="doSearch" empty-text="暂无收货地址~">
            <template v-slot="{ row, index }">
                <view class="items" :key="index">
                    <view class="flex">
                        <view class="flex1">
                            <view class="flex-center-start">
                                <text class="text-ellipsis title">{{ "2024年度学生会主席选举" }}</text>
                                <text class="status b">进行中</text>
                                <!-- <text class="status f">未开始</text> -->
                                <!-- <text class="status e">已结束</text> -->
                            </view>
                            <view class="time">{{ "投票时间：2024-03-01 至 2024-03-07" }}</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 2" :key="k">
                            <view class="head"></view>
                            <view class="content flex1">
                                <view class="name flex-center-start">
                                    <text>陈佳怡</text>
                                    <!-- <text class="status">当选</text> -->
                                    <text class="status un">未当选</text>
                                </view>
                                <view class="votes">得票数：286</view>
                            </view>

                            <view class="progress">
                                <u-line-progress :percentage="60" height="8rpx" activeColor="#ff0000" :showText="false" />
                                <view class="progress-text">60%</view>
                            </view>
                        </view>
                        <view class="info-bts">查看投票详情</view>
                    </view>
                </view>
            </template>
        </ex-list>
    </view>
</template>

<style scoped lang="scss">
.electionList {
    width: 100%;
    box-sizing: border-box;
    min-height: 100vh;
    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>