申请管理UI界面完成

src/views/components/request.vue

 <template>
-  <div class="flex">
+  <div class=" w-full flex">
     <!-- 头像 -->
-    <div class=" mr-1 mt-5">
-      <img src="../../assets/icons/avator.png" alt="" srcset="" class="w-9">
+    <div class=" mr-2 mt-5">
+      <img src="../../assets/icons/avator.png" alt="" srcset="" class="w-9 ">
+      <img :src="detail.path" alt="" srcset="" class="w-9 ">
     </div>
     <!-- 申请详情 -->
     <div class=" bg-white rounded-xl w-full">
+      <!-- 详情上层 -->
       <div class=" relative pt-3 px-3 pb-3">
-        <span class=" text-base text-text-primary">真实姓名</span>
+        <span class=" text-base text-text-primary">{{detail.name}}</span>
         <br>
-        <span class=" text-sm text-text-secondary">通过扫一扫申请</span>
-        <img src="../../assets/icons/confirm.png" alt="" srcset="" class=" w-9 inline-block absolute top-4 right-3">
-        <img src="../../assets/icons/deny.png" alt="" srcset="" class="w-9 inline-block absolute top-4 right-16">
+        <span class=" text-sm text-text-secondary">{{detail.request}}</span>
+        <!-- 操作或状态 -->
+        <div v-if="detail.current === 'pending'">
+          <img src="../../assets/icons/confirm.png" 
+               class=" w-9 inline-block absolute top-4 right-3"
+               @click="toConfirm">
+          <img src="../../assets/icons/deny.png" 
+               class="w-9 inline-block absolute top-4 right-16"
+               @click="toDeny">
+        </div>
+        <div v-else-if="detail.current === 'confirm'">
+          <p class="absolute top-1/2 transform -translate-y-1/2 right-3 text-color-primary text-sm">已添加</p>
+        </div>
+        <div v-else-if="detail.current === 'deny'">
+          <p class="absolute top-1/2 transform -translate-y-1/2 right-3 text-color-primary text-sm">未通过</p>
+        </div>
       </div>
       <!-- 申请理由 -->
-      <div class=" py-3 px-3 text-text-secondary text-sm">
-        这里是申请理由，有几行就显示几行，最多是五十字，差不多最多显示三行
+      <div v-if="detail.reason !=undefined" class=" py-3 px-3 text-text-secondary text-sm">
+        {{detail.reason}}
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import Vue from 'vue'; 
 
 export default Vue.extend({
   name:'request',
-  components:{
-    
+  props:{
+    detail:{},
   },
   methods: {
-
-}
+    toConfirm(){
+      console.log('confirmed');
+    },
+    toDeny(){
+      console.log('deny');  
+    }
+  }
 });
 </script>
 

src/views/request-managemant.vue

 <template>
-  <div class=" relative">
-    <main-page left-arrow @click-left="$router.go(-1)">
+  <div class=" ">
+    <main-page left-arrow @click-left="$router.go(-1)" class="">
       <template slot="right">
         <app-icon
           type="png"
@@ -8,18 +8,52 @@
           :path="require('@/assets/icons/add-friend-group.png')"
         />
       </template>
-      <div class="left-border w-0.5 bg-border-lighter h-screen left-8 absolute"/>
-      <div class="px-4 pt-14">
-          <request/>
+      <div class="left-border w-0.5 bg-border-lighter h-full left-8 absolute"/>
+      <!-- 申请信息 -->
+      <div class="request relative px-4 pt-14">
+        <!-- 时间 -->
+        <!-- 申请详情 -->
+        <div :details="list" v-for="(item,index) in list" :key="index">
+          <p class=" text-right text-xs text-text-secondary pr-4 pb-2 ">{{item.time}}</p>
+          <div v-for="(detail,index) in item.children.info" :key="index">
+            <request :detail="detail" class=" pb-4" />
+          </div>
+          
+        </div>
       </div>
     </main-page>
   </div>
 </template>
 
 <script lang="ts">
-import Request from '@/views/components/request.vue';
 import Vue from 'vue';
 
+// export interface info{
+//     path:string
+//     name:string,
+//     request:string,
+//     reason?:string,
+//     current:string,
+//     time:string
+// }
+
+export interface list{
+    id:number,
+    time:string,
+    children:{
+      info:Array<info>
+    }
+}
+
+export interface info{
+    path:string
+    name:string,
+    request:string,
+    reason?:string,
+    current:string,
+}
+
+
 export default Vue.extend({
   name:'requestmanagement',
   components:{
@@ -31,7 +65,61 @@ export default Vue.extend({
   handleClickLeft() {
     console.log('click left')
   }
-}
+  },
+  props:{
+    details:{
+    },
+    detail:[]
+  },
+  data(){
+    let list :Array<list> = [
+      {
+        id:0,
+        time:'2021/6',
+        children:{
+          info:[
+            {
+              path:'../../assets/icons/avator.png',
+              name:'真实姓名',
+              request:'对方通过扫一扫申请',
+              current: 'pending'
+            },
+            {
+              path:'../../assets/icons/avator.png',
+              name:'真实姓名',
+              request:'对方通过扫一扫申请',
+              current: 'confirm'
+            },
+            {
+              path:'../../assets/icons/avator.png',
+              name:'真实姓名',
+              request:'对方通过搜索申请',
+              reason:'这里是申请理由，有几行就显示几行，最多是五十字，差不多最多显示三行',
+              current: 'pending'
+            },                     
+          ]
+        }
+      },
+      {
+        id:1,
+        time:'2021/5',
+        children:{
+          info:[
+            {
+              path:'../../assets/icons/avator.png',
+              name:'真实姓名',
+              request:'对方申请退出团队',
+              current: 'pending'
+            }   
+          ]
+        }
+      }
+    ]
+
+    return{
+      list
+    }
+  }
 });
 </script>
 

src/views/team-management.vue

@@ -31,7 +31,7 @@
       <div class="mt-4">
         <c-cell dot title="团队管理权限" content="共3人" />
         <c-cell dot title="转让负责人" />
-        <c-cell dot title="申请管理" />
+        <c-cell dot title="申请管理" @click-cell="$router.push('/request-management')" />
       </div>
       <c-button
         round