From 8e7a79cf94fe3a2c58c3e7ec674c7434fb9c5b47 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Sun, 6 Mar 2022 12:33:41 +0800
Subject: [PATCH] feat: add result page

---
 .../ReIcon/src/iconifyIconOffline.ts          |  2 +
 src/plugins/element-plus/index.ts             |  8 +-
 src/views/result/fail.vue                     | 74 +++++++++++++++++-
 src/views/result/success.vue                  | 78 ++++++++++++++++++-
 4 files changed, 156 insertions(+), 6 deletions(-)

diff --git a/src/components/ReIcon/src/iconifyIconOffline.ts b/src/components/ReIcon/src/iconifyIconOffline.ts
index 091bea658..7ba8a2354 100644
--- a/src/components/ReIcon/src/iconifyIconOffline.ts
+++ b/src/components/ReIcon/src/iconifyIconOffline.ts
@@ -62,6 +62,7 @@ import ubuntuFill from "@iconify-icons/ri/ubuntu-fill";
 import questionLine from "@iconify-icons/ri/question-line";
 import checkboxCircleLine from "@iconify-icons/ri/checkbox-circle-line";
 import informationLine from "@iconify-icons/ri/information-line";
+import closeCircleLine from "@iconify-icons/ri/close-circle-line";
 addIcon("arrow-right-s-line", arrowRightSLine);
 addIcon("arrow-left-s-line", arrowLeftSLine);
 addIcon("logout-circle-r-line", logoutCircleRLine);
@@ -70,6 +71,7 @@ addIcon("ubuntu-fill", ubuntuFill);
 addIcon("question-line", questionLine);
 addIcon("checkbox-circle-line", checkboxCircleLine);
 addIcon("information-line", informationLine);
+addIcon("close-circle-line", closeCircleLine);
 
 // Font Awesome 4
 import faUser from "@iconify-icons/fa/user";
diff --git a/src/plugins/element-plus/index.ts b/src/plugins/element-plus/index.ts
index aadea1724..c638634e4 100644
--- a/src/plugins/element-plus/index.ts
+++ b/src/plugins/element-plus/index.ts
@@ -52,6 +52,9 @@ import {
   ElOption,
   ElTimeline,
   ElTimelineItem,
+  ElResult,
+  ElSteps,
+  ElStep,
   // 指令
   ElLoading,
   ElInfiniteScroll
@@ -112,7 +115,10 @@ const components = [
   ElSelect,
   ElOption,
   ElTimeline,
-  ElTimelineItem
+  ElTimelineItem,
+  ElResult,
+  ElSteps,
+  ElStep
 ];
 
 export function useElementPlus(app: App) {
diff --git a/src/views/result/fail.vue b/src/views/result/fail.vue
index 1017376d1..31e9e5f64 100644
--- a/src/views/result/fail.vue
+++ b/src/views/result/fail.vue
@@ -1,7 +1,77 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div></div>
+  <el-card>
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">失败页</span>
+      </div>
+    </template>
+    <el-result
+      icon="error"
+      title="提交失败"
+      sub-title="请核对并修改以下信息后，再重新提交。"
+    >
+      <template #extra>
+        <el-button type="primary">返回修改</el-button>
+      </template>
+    </el-result>
+    <el-descriptions
+      :column="1"
+      title="您提交的内容有如下错误："
+      style="background: rgb(250, 250, 250)"
+      class="p-6 ml-10 mr-10"
+    >
+      <el-descriptions-item>
+        <span class="flex items-center -mt-6">
+          <IconifyIconOffline
+            icon="close-circle-line"
+            color="#F56C6C"
+            width="18px"
+            height="18px"
+          />
+          <span class="ml-1 mr-4">您的账户已被冻结</span>
+          <a
+            href="javascript:void(0);"
+            class="flex items-center"
+            style="color: var(--el-color-primary)"
+            >立即解冻
+            <IconifyIconOffline
+              icon="arrow-right-s-line"
+              color="var(--el-color-primary)"
+              width="18px"
+              height="18px"
+          /></a>
+        </span>
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <span class="flex items-center -mt-8">
+          <IconifyIconOffline
+            icon="close-circle-line"
+            color="#F56C6C"
+            width="18px"
+            height="18px"
+          />
+          <span class="ml-1 mr-4">您的账户还不具备申请资格</span>
+          <a
+            href="javascript:void(0);"
+            class="flex items-center"
+            style="color: var(--el-color-primary)"
+            >立即升级
+            <IconifyIconOffline
+              icon="arrow-right-s-line"
+              color="var(--el-color-primary)"
+              width="18px"
+              height="18px"
+          /></a>
+        </span>
+      </el-descriptions-item>
+    </el-descriptions>
+  </el-card>
 </template>
 
-<style scoped></style>
+<style scoped>
+:deep(.el-descriptions__body) {
+  background: transparent;
+}
+</style>
diff --git a/src/views/result/success.vue b/src/views/result/success.vue
index 1017376d1..b9ad21497 100644
--- a/src/views/result/success.vue
+++ b/src/views/result/success.vue
@@ -1,7 +1,79 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+// eslint-disable-next-line no-undef
+const { lastBuildTime } = __APP_INFO__;
+</script>
 
 <template>
-  <div></div>
+  <el-card>
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">成功页</span>
+      </div>
+    </template>
+    <el-result
+      icon="success"
+      title="提交成功"
+      sub-title="提交结果页用于反馈一系列操作任务的处理结果， 如果仅是简单操作，使用 Message 全局提示反馈即可。 本文字区域可以展示简单的补充说明，如果有类似展示 “单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。"
+    >
+      <template #extra>
+        <div class="flex">
+          <el-button type="primary">返回列表</el-button>
+          <el-button>查看项目</el-button>
+          <el-button>打印</el-button>
+        </div>
+      </template>
+    </el-result>
+    <div style="background: rgb(250, 250, 250)" class="p-6 ml-10 mr-10">
+      <el-descriptions title="项目名称" class="mb-5">
+        <el-descriptions-item label="项目 ID：">12345</el-descriptions-item>
+        <el-descriptions-item label="负责人：">明明</el-descriptions-item>
+        <el-descriptions-item label="生效时间：">{{
+          lastBuildTime
+        }}</el-descriptions-item>
+      </el-descriptions>
+      <el-steps :active="2">
+        <el-step title="创建项目">
+          <template #description>
+            <p>明明</p>
+            <p>{{ lastBuildTime }}</p>
+          </template>
+        </el-step>
+        <el-step title="部门初审">
+          <template #description>
+            <p class="flex items-center">
+              亮亮
+              <span
+                role="img"
+                aria-label="dingding"
+                class="anticon anticon-dingding cursor-pointer flex items-center cursor-pointer"
+                style="color: rgb(0, 160, 233); margin-left: 8px"
+                ><svg
+                  viewBox="64 64 896 896"
+                  focusable="false"
+                  data-icon="dingding"
+                  width="1em"
+                  height="1em"
+                  fill="currentColor"
+                  aria-hidden="true"
+                >
+                  <path
+                    d="M573.7 252.5C422.5 197.4 201.3 96.7 201.3 96.7c-15.7-4.1-17.9 11.1-17.9 11.1-5 61.1 33.6 160.5 53.6 182.8 19.9 22.3 319.1 113.7 319.1 113.7S326 357.9 270.5 341.9c-55.6-16-37.9 17.8-37.9 17.8 11.4 61.7 64.9 131.8 107.2 138.4 42.2 6.6 220.1 4 220.1 4s-35.5 4.1-93.2 11.9c-42.7 5.8-97 12.5-111.1 17.8-33.1 12.5 24 62.6 24 62.6 84.7 76.8 129.7 50.5 129.7 50.5 33.3-10.7 61.4-18.5 85.2-24.2L565 743.1h84.6L603 928l205.3-271.9H700.8l22.3-38.7c.3.5.4.8.4.8S799.8 496.1 829 433.8l.6-1h-.1c5-10.8 8.6-19.7 10-25.8 17-71.3-114.5-99.4-265.8-154.5z"
+                  ></path>
+                </svg>
+                催一下
+              </span>
+            </p>
+          </template>
+        </el-step>
+        <el-step title="财务复核"></el-step>
+        <el-step title="完成"></el-step>
+      </el-steps>
+    </div>
+  </el-card>
 </template>
 
-<style scoped></style>
+<style scoped>
+:deep(.el-descriptions__body) {
+  background: transparent;
+}
+</style>