Merge remote-tracking branch 'origin/main' into ls_tev

src/components/Team/c-input.vue

 <template>
     <div class="wrapper bg-white rounded-md px-4">
-        <div class="title text-text-secondary h-7 border-b border-line text-sm relative p-0">
+        <div class="title text-text-secondary h-7 text-sm relative p-0">
             <span class="leading-7">
                 <slot name="title">title</slot>
             </span>
             <span class=" absolute right-0 leading-7">{{getSize}}/<slot name="limit"></slot></span>
         </div>
-        <div class="content h-12 text-base flex content-center">
-            <input class=" text-text-primary placeholder-mygray border-0 w-full" v-model="text" type="text" :placeholder="hint">
+        <div class="content h-13 my-3">
+            <input class=" text-text-primary text-base placeholder-mygray border-0 w-full leading-5" v-model="text" type="text" :placeholder="hint" @blur="isNull">
+            <p class="text-xs mt-1 text-red-600" v-show="show">*不可为空</p>
         </div>
     </div>
 </template>
@@ -25,11 +26,19 @@ export default Vue.extend({
       },
   },
   data(){
-        return{
-            text:'',
-        }
-    },
+      return{
+          text:'',
+          show:false
+      }
+  },
   methods:{
+      isNull():void{
+          if(this.text ===''){
+              this.show = true
+          }else{
+              this.show = false
+          }
+      }
   },
   computed:{
       getSize():number{

src/components/common/Icon.vue

 <template>
   <fragment>
     <div v-if="type==='png'" :class="className" @click="handleClick">
-      <img :src="path ? path : require(`@/assets/icons/${iconName}.png`)" class="object-cover object-center  " >
+      <img :src="getImagePath" class="object-cover object-center  " >
     </div>
     <svg v-else aria-hidden="true" :height="size" :width="size" :fill="color" @click="handleClick">
       <use :xlink:href="'#'+name" ></use> 
@@ -35,6 +35,14 @@ export default Vue.extend({
     iconName: String,
     className: String,
   },
+  computed: {
+    getImagePath() {
+      if (this.path) {
+        return this.path
+      }
+      return require(`@/assets/icons/${this.iconName}.png`)
+    }
+  },
   methods: {
     handleClick() {
       this.$emit('click')

src/router/index.ts

@@ -120,6 +120,19 @@ const routes: Array<RouteConfig> = [
       title: '团队管理权限'
     }
   },
+  {
+    path: '/team-member/:id',
+    name: 'TeamMemberDetail',
+    component: () => import('@/views/member-info.vue')
+  },
+  {
+    path: '/request-management',
+    name: 'requestManagement',
+    component: () => import('@/views/request-managemant.vue'),
+    meta:{
+      title:'申请管理'
+    }
+  },
 ]
 
 const router = new VueRouter({

src/views/components/c-cell.vue

@@ -12,8 +12,9 @@
           <input
             class="w-full text-right text-sm text-text-secondary focus:text-text-primary"
             type="text"
-            :value="content"
+            :value="value"
             :placeholder="placeholder"
+            @input="handleInput"
           >
         </template>
         <template v-else>
@@ -52,6 +53,7 @@ export default Vue.extend({
       type: String,
       default: '请输入...'
     },
+    value: String,
     label: String,
     content: String
   },
@@ -62,7 +64,11 @@ export default Vue.extend({
     },
     checkIfEmpty(string: string) {
       return string && string.replace(/(^\s*)|(\s*$)/g, '') !== ''
-    }
+    },
+    handleInput(e: InputEvent) {
+      const value = (e.target as HTMLInputElement).value
+      this.$emit('input', value)
+    },
   }
 })
 </script>

src/views/components/input-cell.vue

@@ -11,16 +11,18 @@
     </div>
     <div class="py-3">
       <div class="flex-1">
-        <!-- <div class="title text-text-primary flex-shrink-0 mr-4">{{ title }}</div> -->
-        <!-- <div v-if="checkIfEmpty(content)" class="flex-1 text-text-secondary text-sm text-right">{{ content }}</div> -->
-        <input
-          :type="type"
-          :value="value"
-          class="w-full text-text-primary"
-          :placeholder="placeholder"
-          @input="handleInput"
-          @blur="handleChange"
-        >
+        <div class="flex items-center">
+          <input
+            :type="type"
+            :value="value"
+            class="w-full text-text-primary"
+            :placeholder="placeholder"
+            @input="handleInput"
+            @blur="handleChange"
+          >
+          <slot name="action" />
+        </div>
+        
         <div v-if="showError" class="error text-xs text-warn-color mt-2">{{ errorMsg }}</div>
       </div>
       <!-- <app-icon

src/views/components/request.vue

+<template>
+  <div class=" w-full flex">
+    <!-- 头像 -->
+    <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">{{detail.name}}</span>
+        <br>
+        <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 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'; 
+
+export default Vue.extend({
+  name:'request',
+  props:{
+    detail:{},
+  },
+  methods: {
+    toConfirm(){
+      console.log('confirmed');
+    },
+    toDeny(){
+      console.log('deny');  
+    }
+  }
+});
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/views/edit-member.vue

@@ -22,7 +22,9 @@
       />
       <c-cell
         title="手机号"
-        content="13112345678"
+        type="input"
+        v-model="phone"
+        placeholder="请输入手机号"
         class="mt-4"
       />
       <c-cell
@@ -71,7 +73,8 @@ export default Vue.extend({
       name: '张三',
       position: '',
       memberId: '',
-      show: true
+      show: true,
+      phone: '13112345678'
     }
   },
   methods: {

src/views/request-managemant.vue

+<template>
+  <div class=" ">
+    <main-page left-arrow @click-left="$router.go(-1)" class="">
+      <template slot="right">
+        <app-icon
+          type="png"
+          class-name="w-6.5 h-6.5"
+          :path="require('@/assets/icons/add-friend-group.png')"
+        />
+      </template>
+      <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 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:{
+    'main-page': () => import('@/layout/main-page.vue'),
+    'app-icon':()=>import('@/components/common/Icon.vue'),
+    'request':()=>import('@/views/components/request.vue')
+  },
+  methods: {
+  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>
+
+<style>
+
+</style>
\ No newline at end of file

src/views/team-QRcode.vue

@@ -7,11 +7,11 @@
     <!-- 二维码部分 -->
     <div class="pt-14">
         <div class="qrcode mt-2 mb-9 relative w-75 h-113.5 mx-auto">
-        <p class=" text-white absolute top-24 left-22.375 text-base">这里是团队名称</p>
-        <p class=" text-white absolute top-32 left-20 text-sm">团队号：ABCDE1234</p>
-        <img src="../assets/qrbackground.png" alt="" class="">
-        <img src="../assets/qrcode.png" alt="" srcset="" class=" absolute w-32 left-21.25 top-44 ">
-        <p class=" text-white absolute top-82 left-10 text-sm"> 扫描二维码加入我们Chat33的团队</p>
+        <p class=" text-white absolute top-24 text-base left-0 right-0 mx-auto text-center">这里是团队名称</p>
+        <p class=" text-white absolute top-32 text-sm left-0 right-0 mx-auto text-center">团队号：ABCDE1234</p>
+        <img src="../assets/qrbackground.png" alt="" class="" ref="wrapper" > 
+        <img src="../assets/qrcode.png" alt="" srcset="" class=" absolute w-32 top-44 left-0 right-0 mx-auto ">
+        <p class=" text-white absolute top-82 left-0 right-0 mx-auto text-center text-sm"> 扫描二维码加入我们Chat33的团队</p>
       </div>
       <div class="mx-4">
         <c-button round buttonBg="bg-color-primary" class="">点击生成图片去分享</c-button>
@@ -25,7 +25,6 @@
 
 <script lang="ts">
 import Vue from 'vue';
-// import CButton from './components/c-button.vue';
 
 export default Vue.extend({
   name:'teamQRcode',

tailwind.config.js

@@ -25,6 +25,7 @@ module.exports = {
         'button-disabled': '#C8D3DE'
       },
       spacing: {
+        
         6.5: '1.625rem',
         10.5: '2.625rem',
         13: '3.125rem',
@@ -39,7 +40,9 @@ module.exports = {
         113.5:'28.375rem',
       },
       width:{
-        75:'18.75rem'
+        113.5:'28.375rem',
+        75:'18.75rem',
+        82: '20.375rem',
       },
       zIndex: {
         '-1': '-1'