PC-Light-Forum/component/item-vote/item-vote.js

// my-component.js
// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
const { defineComponent, ref, defineAsyncComponent } = Vue;

const itemBottom = defineAsyncComponent(() => import(withVer("../item-bottom/item-bottom.js")).then((m) => m.itemBottom));
const itemHead = defineAsyncComponent(() => import(withVer("../item-head/item-head.js")).then((m) => m.itemHead));

// 定义组件（直接使用模板）
export const itemVote = defineComponent({
    name: "item-vote",
    props: {
        itemdata: {
            type: Object,
            default: () => {},
        },
        page: {
            type: String,
            default: "",
        },
    },

    setup(props) {
        // 处理 截止时间
        const handleDeadline = (dateTimeStamp = "") => {
            if (typeof dateTimeStamp == "number") dateTimeStamp = dateTimeStamp ? dateTimeStamp * 1000 : null;
            if (typeof dateTimeStamp == "string" && dateTimeStamp.match(/^\d{4}-\d{2}-\d{2}$/)) dateTimeStamp += " 23:59:59";
            const timestamp = new Date(dateTimeStamp.replace(/-/g, "/")).getTime();
            const now = Date.now();
            const diffValue = timestamp - now;

            if (diffValue < 0) return null;

            const units = [
                {
                    value: 24 * 60 * 60 * 1000,
                    unit: "天",
                },
                {
                    value: 60 * 60 * 1000,
                    unit: "小时",
                },
                {
                    value: 60 * 1000,
                    unit: "分钟",
                },
                {
                    value: 1000,
                    unit: "秒",
                },
            ];

            for (const { value, unit } of units) {
                if (diffValue >= value) {
                    return {
                        num: Math.round(diffValue / value),
                        unit,
                    };
                }
            }
            return {
                num: 0,
                unit: "秒",
            };
        };

        let item = ref({ ...props.itemdata });
        item.value["time"] = handleDeadline(item.value.data.deadline);
        item.value["url"] = "/details/" + item.value.uniqid;
        const option = item.value.data.option || [];
        item.value["isvote"] = option.some((item) => item.selected == 1);

        return { item };
    },

    components: {
        itemBottom,
        itemHead,
    },

    template: `<div class="item-box item-vote">    <item-head :itemdata="item" :page="page"></item-head>    <a class="title" :href="item.url" target="_blank">{{ item.title }}</a>    <a class="message one-line-display" v-if="item.content">{{ item.content }}</a>    <a class="info flexacenter" target="_blank" :href="item.url">        <template v-if="item?.data.status == 1">            <div class="status">进行中</div>            <div class="line"></div>            <div class="num">{{ item?.time.num }}</div>{{ item.time.unit }}后结束        </template>        <div v-else class="status end">已结束</div>        <div class="line"></div>        <div class="num">{{ item?.data?.votes }}</div>人参与    </a>    <a class="list" :class="{ 'voted': !item.time || item.isvote }"  target="_blank" :href="item.url">        <div class="list-item flexcenter " v-for="(item, index) in item?.data?.option" :key="index">            <div class="list-top flexacenter">                <img v-if="item.selected" class="list-tick" src="/img/vote-tick.svg">                <div v-else class="list-serial flexcenter">{{ index + 1 }}</div>                <div class="list-text one-line-display flex1">{{ item.value }}</div>            </div>            <div class="list-bottom flexacenter">                <div class="list-length" :style="{ width: item.percentage + '%' }"></div>{{ item.count }}            </div>        </div>    </a>    <item-bottom :itemdata="item" :page="page"></item-bottom></div>`,
});