From 7d03221bfa4e76073de295c48a13d088edbbba12 Mon Sep 17 00:00:00 2001
From: Min5203 <2318556978@qq.com>
Date: Mon, 24 Jan 2022 18:30:51 +0800
Subject: [PATCH] =?UTF-8?q?=E6=88=91=E7=9A=84=E5=A5=96=E9=87=91=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/{Table.vue => FinanceManage.vue} |   2 +-
 pages/Initiate-application.vue              |  32 ++---
 pages/applicant.vue                         |  64 ++++------
 pages/application-details.vue               | 132 +++++++++++++++++++-
 pages/index.vue                             |   3 +-
 plugins/vant.js                             |   2 +
 6 files changed, 169 insertions(+), 66 deletions(-)
 rename components/{Table.vue => FinanceManage.vue} (98%)

diff --git a/components/Table.vue b/components/FinanceManage.vue
similarity index 98%
rename from components/Table.vue
rename to components/FinanceManage.vue
index 1971123..b70a603 100644
--- a/components/Table.vue
+++ b/components/FinanceManage.vue
@@ -75,7 +75,7 @@ const currentPage = ref(1);
 <style scoped lang="less">
 table {
     width: 100%;
-    margin-top: 2rem;
+    margin-top: 1rem;
     font-size: 14px;
     overflow-x: scroll;
     color:#797878 ;
diff --git a/pages/Initiate-application.vue b/pages/Initiate-application.vue
index 2d6a572..23a6672 100644
--- a/pages/Initiate-application.vue
+++ b/pages/Initiate-application.vue
@@ -52,18 +52,18 @@
         </div>
         <!-- 备注信息 -->
         <div class="remarks-name">备注</div>
-        <van-cell-group>
-            <van-field
-              v-model="message"
-              rows="2"
-              autosize
-              type="textarea"
-              maxlength="40"
-              placeholder="请输入备注"
-              show-word-limit
-              class="textarea"
-            />
-        </van-cell-group>
+          <van-cell-group>
+              <van-field
+                v-model="message"
+                rows="2"
+                autosize
+                type="textarea"
+                maxlength="40"
+                placeholder="请输入备注"
+                show-word-limit
+                class="textarea"
+              />
+          </van-cell-group>
       </div>
       <!-- 选择审核人 -->
       <div class="reviewer">
@@ -209,8 +209,8 @@
             v-model="applyDepartment"
             is-link
             readonly
-            label="申请类型"
-            placeholder="请选择申请类型"
+            label="所属部门"
+            placeholder="请选择所属部门"
             @click="showDepartment = true"
             required
             input-align="right"
@@ -231,7 +231,7 @@
             <span class="title">历史申请</span>
             <div v-if="showHistory">
               <Search />
-              <Table />
+              <FinanceManage />
             </div>
             <div v-if="!showHistory" class="no-data">
                 暂无历史记录
@@ -315,7 +315,7 @@ const applyData = ref([
   }
 ]);  //  申请的记录
 const isSuccess = ref(false)  // 上传票据是否成功
-const name = ref('黛西')  // 提交人的姓名
+const name = ref('')  // 提交人的姓名
 const applyMoney = ref(5000) // 手动输入时输入的申请的金额
 const titleHidden = ref(true) // 上传提示语隐藏
 const currentPage = ref(0) //当前显示页数
diff --git a/pages/applicant.vue b/pages/applicant.vue
index 2555ddb..284af91 100644
--- a/pages/applicant.vue
+++ b/pages/applicant.vue
@@ -13,7 +13,7 @@
           <span class="title">历史申请</span>
           <div v-if="isShow">
             <Search />
-            <Table />
+            <FinanceManage />
           </div>
           <div v-if="!isShow" class="no-data">
               暂无历史记录
@@ -27,7 +27,27 @@
           </NuxtLink>
         </div>
       </van-tab>
-    <van-tab title="我的奖金">我的奖金</van-tab>
+      <van-tab title="我的奖金">
+        <div class="mt-8 bg-white">
+            <div class="p-4 pb-0 text-gray-500 font-semibold">奖金领取记录</div>
+            <Search class="px-4 pt-0"/>
+            <FinanceManage class="px-4 mt-0"/>
+        </div>
+        <div class="my-4 bg-white">
+          <div class="text-gray-500 font-semibold m-4 py-3 border-b">待领取奖金</div>
+          <div class="text-ms text-gray-400 pl-4">可领取:</div>
+          <div class="w-full h-20 text-gray-400 font-semibold text-center leading-loose" v-if="!isBonus">
+            暂无可领取的奖金
+          </div>
+          <div class="w-full h-20 text-blue-500 font-semibold text-center leading-loose text-2xl" v-if="isBonus">
+            500元
+          </div>
+          <div class="px-8">
+              <van-button type="primary" block :disabled="!isBonus" >立即领取</van-button>
+          </div>
+
+        </div>
+      </van-tab>
   </van-tabs>
   </div>
 
@@ -39,45 +59,7 @@ import {ref} from 'vue'
 
 const active = ref(0);
 const isShow = ref(true);
-const currentPage = ref(1)
-const applyData = ref([
-  {
-    applicant:'代用名1',
-    money:100,
-    time:'2021/12/31 12:31',
-    type: 1
-  },
-  {
-    applicant:'代用名2',
-    money:100,
-    time:'2021/12/31 12:31',
-    type: 2
-  },
-  {
-    applicant:'代用名1',
-    money:100,
-    time:'2021/12/31 12:31',
-    type: 3
-  },
-  {
-    applicant:'代用名2',
-    money:100,
-    time:'2021/12/31 12:31',
-    type: 3
-  },
-  {
-    applicant:'代用名1',
-    money:100,
-    time:'2021/12/31 12:31',
-    type: 1
-  },
-  {
-    applicant:'代用名2',
-    money:100,
-    time:'2021/12/31 12:31',
-    type: 2
-  }
-]);
+const isBonus =ref(true)
 
 function onClickLeft(){
   console.log('返回上一页')
diff --git a/pages/application-details.vue b/pages/application-details.vue
index 28b5fa4..c9caab5 100644
--- a/pages/application-details.vue
+++ b/pages/application-details.vue
@@ -7,17 +7,61 @@
       @click-left="onClickLeft"
   />
   <!-- 审核结果 -->
-  <div class="bg-white">
-    <div class="text-gray-500 font-semibold p-3">审核结果</div>
-    <div>
-
+  <div class="bg-white px-3">
+    <div class="text-gray-500 font-semibold px-1 py-3">审核结果</div>
+    <div v-for="item in checkerList" class="flex p-3 text-gray-400 text-base justify-between">
+      <div>
+          <div>{{item.name}}</div>
+          <div class="text-sm pt-1">{{item.advice}}</div>
+          <div class="text-sm pt-1">{{item.checkedTime}}</div>
+      </div>
+      <div class="text-center">
+          <div :class="item.status === '1' ? 'text-green-500' : item.status === '2' ? 'text-red-500' : ''">
+            {{item.status === '1' ? '已通过' : item.status === '2' ? '已驳回' : '待审批'}}
+          </div>
+          <div v-if="item.score>0" class="mt-1">
+            <van-circle
+              v-model:current-rate="item.score"
+              :rate="item.score"
+              :speed="100"
+              :text="item.score"
+              class="w-12"
+              color="#ff6700"
+              :stroke-width="100"
+            />
+          </div>
+      </div>
+    </div>
+  </div>
+  <!-- 发票信息 -->
+  <div class="bg-white px-3">
+    <div class="text-gray-500 font-semibold px-1 py-3 mt-5">发票信息</div>
+    <div v-for="item in billList" class="flex p-2 text-gray-400 text-base justify-between">
+        <div>{{item.name}}</div>
+        <div>{{item.value}}</div>
+    </div>
+  </div>
+  <!-- 其他信息 -->
+  <div class="bg-white px-3">
+    <div class="text-gray-500 font-semibold px-1 py-3 mt-5">其他信息</div>
+    <div v-for="item in otherData" class="flex p-2 text-gray-400 text-base justify-between">
+        <div>{{item.name}}</div>
+        <div>{{item.value}}</div>
+    </div>
+  </div>
+  <!-- 提交人信息 -->
+  <div class="bg-white px-3">
+    <div class="text-gray-500 font-semibold px-1 py-3 mt-5">提交人信息</div>
+    <div v-for="item in submitter" class="flex p-2 text-gray-400 text-base justify-between">
+        <div>{{item.name}}</div>
+        <div>{{item.value}}</div>
     </div>
   </div>
 </div>
 </template>
 
 <script setup>
-// 审核的数据
+// 审核人数据
 const checkerList = ref([
   {
     name: "冯教授",
@@ -30,15 +74,91 @@ const checkerList = ref([
     advice: "很棒!",
     checkedTime: "12/18 14:55",
     status: "1",
+    score:100
   },
   {
-    name: "薇薇安",
+    name: "小明",
     advice: "很棒!",
     checkedTime: "12/18 14:55",
     status: "1",
+    score:80
   }
 ])
+// 发票信息数据
+const billList = ref([
+  {
+    name: "发票代码",
+    value: "4154153125646",
+  },
+  {
+    name: "发票号码",
+    value: "545648789",
+  },
+  {
+    name: "合计金额(元)",
+    value: "40",
+  },
+  {
+    name: "税额(元)",
+    value: "2",
+  },
+  {
+    name: "开票日期",
+    value: "2022年1月2日",
+  },
+  {
+    name: "备注",
+    value: "业务支出",
+  },
+])
+// 其他信息数据
+const otherData = ref([
+  {
+    name: "申请类型",
+    value: "项目申请"
+  },
+  {
+    name: "所属项目",
+    value: "PT项目"
+  },
+  {
+    name: "所属任务",
+    value: "财务条界面设计"
+  },
+  {
+    name: "类目",
+    value: "报销"
+  },
+  {
+    name: "名目",
+    value: "业务招待费"
+  },
+])
+// 提交人数据
+const submitter = ref([
+  {
+    name:'姓名',
+    value:'黛西'
+  },
+  {
+    name:'部门',
+    value:'软件部'
+  },
+  {
+    name:'提交时间',
+    value:'2021/12/29 13:22'
+  },
+])
+
 function onClickLeft(){
   console.log("上一页")
 }
 </script>
+
+<style lang="less" scoped>
+.van-circle{
+  width: 2.5rem !important;
+  height: 2.5rem !important;
+}
+
+</style>
diff --git a/pages/index.vue b/pages/index.vue
index fa51d86..bfdac6e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -11,7 +11,7 @@
     <div class="financial-management">
       <span class="title">财务管理</span> <span class="title-describe">对项目预算、奖金进行配置</span>
         <Search />
-        <Table />
+        <FinanceManage />
   </div>
   </van-tab>
   <van-tab title="角色管理">角色管理</van-tab>
@@ -59,7 +59,6 @@ function onClickLeft(){
     font-size: 12px;
     margin-left: 0.5rem;
   }
-
 }
 
 
diff --git a/plugins/vant.js b/plugins/vant.js
index 463abbb..5787054 100644
--- a/plugins/vant.js
+++ b/plugins/vant.js
@@ -19,6 +19,7 @@ import {
   Form,
   Popup,
   Cascader,
+  Circle,
 } from 'vant';
 
 import { defineNuxtPlugin } from '#app';
@@ -41,5 +42,6 @@ export default defineNuxtPlugin(nuxtApp => {
     .use(Form)
     .use(Cascader)
     .use(Popup)
+    .use(Circle)
     .use(Tabs);
 });