<template>
<el-steps direction="vertical" class="
ruleos-element-ui" finish-status="success">
<el-step v-for="item in stepList.reverse()"
:key="item.index">
<template #title>
<span class="title"
:class="{ active
: item.index > 0 }">{{ $t(item.title) }}</span>
</template>
<template #icon>
<img src="../../../assets/images/Vector.png" v-if="item.icon" alt="" />
<span class="index" v-else>{{ item.index }}</span>
</template>
<template #description>
<div
class="node"
v-for="stage in item.stageList"
v-show="!(stage?.taskList.length === 0 && quest.length === 0)"
>
<div class="label">{{ $t(stage.label) }}</div>
<div v-for="task in stage.taskList" class="row" @click="handleJump(task.type, task?.questType)">
<div class="content">
<img
:src="task.icon" alt="" />
<div>
<div class="name">{{ $t(task.item) }}</div>
<p v-if="task?.desc1">{{ `${$t("new.startCondition")}
: ${$t(task.desc1)}` }}</p>
<p v-if="task?.desc2">{{ `${$t("new.countdownCondition")}
: ${$t(task.desc2)}` }}</p>
</div>
</div>
<img src="../../../assets/images/chevron-down.png" alt="" />
</div>
<div v-if="quest.length > 0 && stage?.taskList.length === 0" class="node proposal">
<div v-for="quest in quest" class="row" @click="handleJump2(quest)">
<div class="content">
<img src="../../../assets/images/file.png" alt="" />
<div>
<div class="name">{{ getLocalizedDescription(quest.title) }}</div>
<p v-if="quest.dataType === DataType.Proposal">
<span>{{ $t("new.proposalTime") }}</span>
{{ ` (${updateDynamicTime(quest.voteStartTime)}~${updateDynamicTime(quest.voteEndTime) || "～"})` }}
</p>
<div v-else>
<p>
<span>{{ $t("new.questTime") }}</span>
{{ ` (${updateDynamicTime(quest.startTime)}~${updateDynamicTime(quest.endTime) || "～"})` }}
</p>
<p>
<span>{{ $t("new.voteTime") }}</span>
{{
` (${updateDynamicTime(quest.voteStartTime)}~${updateDynamicTime(quest.voteEndTime) || "～"})`
}}
</p>
</div>
</div>
</div>
<img src="../../../assets/images/chevron-down.png" alt="" />
</div>
</div>
</div>
</template>
</el-step>
</el-steps>
</template>
<script lang="ts" setup>
import { defineProps, PropType, watch, ref, defineEmits } from "vue";
import { ElSteps, ElStep } from "element-plus";
import { OrgApi } from "@cverse/core-lib-beta";
import {
OrgToken,
OrgTokenInfo,
DataType,
TokenInfoTypeEnum,
ShareService,
ChatShareType,
OrgProposalTypeEnum,
QuestType,
} from "@cverse/core-lib-beta";
import { updateDynamicTime, getLocalizedDescription, Share } from "../../../utils/index";
import { orgService } from "../../../struct/OrgService";
const props = defineProps({
orgToken
: {
type
: Object as PropType<OrgToken>,
},
});
const emits = defineEmits(["changeUrl"]);
const orgApi = new OrgApi();
const quest = ref<OrgTokenInfo[]>([]);
const getOrgQuestsAndProposals = async (id
: number) => {
let res = await orgApi.getOrgQuestsAndProposals({ id
: id });
if (res.code === 200) {
quest.value = res.data
.filter(
(item
: OrgTokenInfo) =>
(item.dataType === DataType.Quest && item.type === TokenInfoTypeEnum.Common) ||
(item.dataType === DataType.Proposal && item.type !== TokenInfoTypeEnum.CommitteeElection)
)
.reverse();
}
};
const handleJump = async (type
: ChatShareType, questType
: QuestType | OrgProposalTypeEnum) => {
try {
let linkParams = {};
if (type === ChatShareType.quest) {
let questId =
questType === QuestType.DescCreation
? orgService.value.curOrg?.descCreationQuestId
: questType === QuestType.LogoCreation
? orgService.value.curOrg?.logoCreationQuestId
: questType === QuestType.Promotion
? orgService.value.curOrg?.promotionQuestId
: null;
linkParams = {
questId
: questId,
type
: questType,
};
} else if (type === ChatShareType.governance) {
linkParams = {
id
: orgService.value.curOrg?.committeeElectionProposalId,
type
: OrgProposalTypeEnum.CommitteeElection,
};
}
let text = ShareService.getExternalShareUrl(type, linkParams);
emits("changeUrl", text);
} catch (error) {}
};
const handleJump2 = async (data
: OrgTokenInfo) => {
try {
let linkParams = {};
let type;
if (data.dataType === DataType.Proposal) {
type = ChatShareType.governance;
linkParams = {
id
: data.id,
type
: data.type,
};
} else {
type = ChatShareType.quest;
linkParams = {
questId
: data.id,
type
: data.type,
};
}
let text = ShareService.getExternalShareUrl(type, linkParams);
emits("changeUrl", text);
} catch (error) {}
};
watch(
() => props.orgToken,
(newOrgToken) => {
getOrgQuestsAndProposals(newOrgToken.organizationId);
},
{
immediate
: true,
deep
: true,
}
);
const stepList = [
{ title
: "new.nodeTitle0", index
: 0, icon
: require("../../../assets/images/Vector.png") },
{
title
: "new.nodeTitle1",
index
: 1,
stageList
: [
{
label
: "new.firstLabel1",
taskList
: [
{
item
: "new.firstItem1",
icon
: require("../../../assets/images/file.png"),
type
: ChatShareType.quest,
questType
: QuestType.DescCreation,
},
{
item
: "new.firstItem2",
icon
: require("../../../assets/images/coins.png"),
type
: ChatShareType.launchPad,
},
{ item
: "new.firstItem
3", icon
: require("../../../assets/images/user.png"), type
: ChatShareType.launchPad },
],
},
{
label
: "new.firstLabel2",
taskList
: [
{
item
: "new.firstItem4",
icon
: require("../../../assets/images/target.png"),
type
: ChatShareType.governance,
},
{
item
: "new.firstItem5",
icon
: require("../../../assets/images/stars.png"),
type
: ChatShareType.quest,
questType
: QuestType.LogoCreation,
},
{
item
: "new.firstItem6",
icon
: require("../../../assets/images/lightning.png"),
type
: ChatShareType.quest,
questType
: QuestType.Promotion,
},
],
},
],
},
{
title
: "new.nodeTitle2",
index
: 2,
stageList
: [
{
label
: "new.secondLabel1",
taskList
: [],
},
{
label
: "new.secondLabel2",
taskList
: [
{
item
: "new.secondItem
3",
icon
: require("../../../assets/images/file.png"),
desc1
: "new.secondItem
3Desc1",
desc2
: "new.secondItem
3Desc2",
type
: ChatShareType.quest,
questType
: QuestType.DescCreation,
},
{
item
: "new.secondItem4",
icon
: require("../../../assets/images/file.png"),
desc1
: "new.secondItem4Desc1",
desc2
: "new.secondItem4Desc2",
type
: ChatShareType.quest,
questType
: QuestType.LogoCreation,
},
],
},
{
label
: "new.secondLabel
3",
taskList
: [
{
item
: "new.secondItem5",
icon
: require("../../../assets/images/target.png"),
desc1
: "new.secondItem5Desc1",
desc2
: "new.secondItem5Desc2",
type
: ChatShareType.governance,
},
],
},
],
},
];
</script>
<style lang="scss" scoped>
.title {
color
: #fff;
font-size
: 14px;
font-weight
: 600;
line-height
: 26px;
margin-bottom
: 16px;
}
.active {
color
: var(--Text-text-brand, #b9fd59);
font-size
: 14px;
font-weight
: 600;
line-height
: 26px;
}
.index {
color
: #000;
font-size
: 16px;
font-style
: italic;
font-weight
: 900;
margin-right
: 2px;
}
.node {
width
: 100%;
display
: flex;
flex-direction
: column;
gap
: 12px;
margin-bottom
: 24px;
.label {
width
: 100%;
color
: #fff;
font-size
: 14px;
font-weight
: 600;
line-height
: 26px;
}
.row {
width
: 100%;
padding
: 16px;
display
: flex;
align-items
: center;
justify-content
: space-between;
border-radius
: 12px;
background
: #1a240d;
cursor
: pointer;
.content {
display
: flex;
align-items
: center;
gap
: 8px;
}
img {
width
: 24px;
height
: 24px;
}
.name {
color
: #fff;
font-size
: 14px;
font-weight
: 600;
line-height
: 26px;
margin-bottom
: 4px;
}
p,
.task {
color
: #999;
font-size
: 12px;
font-weight
: 400;
line-height
: 18px;
}
&
:hover {
background
: #25
3312;
}
}
}
.proposal {
margin-bottom
: 0;
}
</style>
优化代码
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
