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

src/components/common/Icon.vue

 <template>
   <fragment>
     <div v-if="type==='png'" :class="className" @click="handleClick">
-      <img :src="getImagePath" 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> 

src/router/index.ts

@@ -31,6 +31,7 @@ const routes: Array<RouteConfig> = [
    * 选择部门 /select-team
    * 搜索团队 /search-team
    * 加入团队 /join-team
+   * 完善团队信息 /team-info
    * 
   */
   {
@@ -73,7 +74,7 @@ const routes: Array<RouteConfig> = [
   {
     path: '/team-create',
     name: 'TeamCreate',
-    component: () => import('@/views/team-create.vue'),
+    component: () => import('@/views/create-team/team-create.vue'),
     meta: {
       title: '创建团队'
     }
@@ -81,7 +82,7 @@ const routes: Array<RouteConfig> = [
   {
     path: '/team-QRcode',
     name: 'TeamQRcode',
-    component: () => import('@/views/team-QRcode.vue'),
+    component: () => import('@/views/create-team/team-QRcode.vue'),
     meta: {
       title: '团队二维码'
     }
@@ -170,6 +171,38 @@ const routes: Array<RouteConfig> = [
     meta:{
       title:'加入团队'
     }
+  },
+  {
+    path: '/team-info',
+    name: 'TeamInfo',
+    component: () => import('@/views/team-info/team-info.vue'),
+    meta:{
+      title:'完善团队信息'
+    }
+  },
+  {
+    path: '/team-name',
+    name: 'TeamName',
+    component: () => import('@/views/team-info/team-name.vue'),
+    meta:{
+      title:'团队名称'
+    }
+  },
+  {
+    path: '/team-description',
+    name: 'TeamDescription',
+    component: () => import('@/views/team-info/team-description.vue'),
+    meta:{
+      title:'团队描述'
+    }
+  },
+  {
+    path: '/team-avator',
+    name: 'TeamAvator',
+    component: () => import('@/views/team-info/team-avator.vue'),
+    meta:{
+      title:'团队头像'
+    }
   }
 ]
 

src/views/components/c-cell.vue

@@ -5,7 +5,7 @@
   > 
     <div v-if="checkIfEmpty(label)" class="text-sm text-text-secondary py-2">{{ label }}</div>
     <div class="flex py-3 items-center justify-between">
-      <slot name="icon" />
+      <slot name="head" />
       <div class="flex items-center justify-between flex-1">
         <div class="title text-text-primary flex-shrink-0 mr-4">{{ title }}</div>
         <!-- 输入框 -->
@@ -22,6 +22,7 @@
           <div v-if="checkIfEmpty(content)" class="flex-1 text-text-secondary text-sm text-right">{{ content }}</div>
         </template>
       </div>
+      <slot name="right" />
       <app-icon
         v-if="dot"
         type="png"

src/views/components/input-cell.vue

@@ -13,6 +13,7 @@
       <div class="flex-1">
         <div class="flex items-center">
           <input
+            v-if="type !== 'textarea'"
             :type="type"
             :value="value"
             class="w-full text-text-primary flex-1"
@@ -20,6 +21,14 @@
             @input="handleInput"
             @blur="handleChange"
           >
+          <textarea
+            v-else
+            :value="value"
+            :placeholder="placeholder"
+            class="w-full break-all"
+            @input="handleInput"
+            @blur="handleChange"
+          />
           <div class="flex-shrink-0">
             <slot name="action" />
           </div>
@@ -82,7 +91,7 @@ export default Vue.extend({
     }
   },
   created() {
-    this.length = this.value.length || 0
+    this.length = this.value?.length || 0
   },
   methods: {
     checkIfEmpty(string: string) {

src/views/team-QRcode.vue → src/views/create-team/team-QRcode.vue

@@ -9,8 +9,8 @@
         <div class="qrcode mt-2 mb-9 relative w-75 h-113.5 mx-auto">
         <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 ">
+        <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 pb-6">
@@ -30,7 +30,7 @@ export default Vue.extend({
   name:'teamQRcode',
   components:{
     'main-page': () => import('@/layout/main-page.vue'), 
-    'c-button': () => import('./components/c-button.vue')
+    'c-button': () => import('../components/c-button.vue')
   },
   methods: {
   handleClickLeft() {

src/views/team-create.vue → src/views/create-team/team-create.vue

@@ -40,8 +40,8 @@ export default Vue.extend({
   name:'createteam',
   components:{
     'main-page': () => import('@/layout/main-page.vue'), 
-    'input-cell': () => import('./components/input-cell.vue'),
-    'c-button': () => import('./components/c-button.vue')
+    'input-cell': () => import('../components/input-cell.vue'),
+    'c-button': () => import('../components/c-button.vue')
   },
   data(){
     return{

src/views/team-info/team-avator.vue

+<template>
+  <!-- 团队头像 -->
+  <main-page header-bg="bg-transparent" title-color="text-white">
+    <template slot="left">
+      <app-icon
+        type="png"
+        class-name="w-6.5 w-6.5"
+        :path="require('@/assets/icons/left-arrow-white.png')"
+        @click="$router.go(-1)"
+      />
+    </template>
+    <!-- 顶部右侧插槽 -->
+    <template slot="right">
+      <app-icon
+        type="png"
+        class-name="h-1 w-5"
+        :path="require('@/assets/icons/dot-h.png')"
+        @click="show=true"
+      />
+    </template>
+    <div class="px-4 pt-14 border h-screen bg-black">
+      <van-uploader :after-read="afterRead">
+        <div class="wrapper rounded-full overflow-hidden mx-auto mt-12 bg-gray-100 flex items-center justify-center">
+          <img :src="getImageUrl" alt="">
+          <!-- {{ file.name }} -->
+        </div>
+      </van-uploader>
+      
+      <van-action-sheet
+        v-model="show"
+        cancel-text="取消"
+        :actions="actions"
+        @select="onSelect"
+      />
+      <!-- <van-uploader :after-read="afterRead" /> -->
+    </div>
+    <!-- <div class="fixed bottom-0 left-0 w-full px-4 py-2">
+      <c-button round @click="$router.go(-1)">确定</c-button>
+    </div> -->
+  </main-page>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { ActionSheet, Uploader } from 'vant'
+
+Vue.use(ActionSheet).use(Uploader)
+
+export default Vue.extend({
+  components:{ 
+    'app-icon':()=>import('@/components/common/Icon.vue'),
+    'main-page': () => import('@/layout/main-page.vue'),
+    // 'input-cell': () => import('../components/input-cell.vue'),
+    // 'c-button': () => import('../components/c-button.vue')
+  },
+  name: 'TeamAvator',
+  data() {
+    return {
+      show: false,
+      actions: [
+        { name: '拍照' },
+        { name: '从手机相册选择' },
+      ],
+      file: ''
+    }
+  },
+  computed: {
+    getImageUrl(): string {
+      if (this.file) {
+        return (this.file as any).content
+      } else {
+        return require('@/assets/images/33.png')
+      }
+    }
+  },
+  methods: {
+    onSelect(item: any) {
+      this.show = false
+      console.log(item, 'item')
+      // console.log(this.$refs.xxx, 'xxx')
+      console.log((document.getElementsByClassName('van-uploader__input')[0] as HTMLInputElement).click(), 'zzzz')
+    },
+    afterRead(file: any) {
+      this.file = file
+    }
+  }
+})
+</script>
+
+<style lang="less" scoped>
+  .wrapper {
+    height: 80vw;
+    width: 80vw;
+  }
+  /deep/ .van-uploader {
+    width: 100%;
+    &__wrapper {
+      justify-content: center !important;
+    }
+  }
+</style>

src/views/team-info/team-description.vue

+<template>
+  <!-- 团队描述 -->
+  <main-page
+    left-arrow
+    @click-left="$router.go(-1)"
+  >
+    <div class="px-4 pt-14">
+      <input-cell
+        type="textarea"
+        v-model="name"
+        label="企业/组织/团队描述"
+        placeholder="请输入团队描述"
+      />
+    </div>
+    <div class="fixed bottom-0 left-0 w-full px-4 py-2">
+      <c-button round @click="$router.go(-1)">确定</c-button>
+    </div>
+  </main-page>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  components:{ 
+    // 'app-icon':()=>import('@/components/common/Icon.vue'),
+    'main-page': () => import('@/layout/main-page.vue'),
+    'input-cell': () => import('../components/input-cell.vue'),
+    'c-button': () => import('../components/c-button.vue')
+  },
+  name: 'TeamDescription',
+  data() {
+    return {
+      name: '团队描述'
+    }
+  },
+  methods: {}
+})
+</script>
+
+<style lang="less">
+
+</style>

src/views/team-info/team-info.vue

+<template>
+  <!-- 完善团队信息 -->
+  <main-page
+    left-arrow
+    @click-left="$router.go(-1)"
+  >
+    <div class="px-4 pt-14">
+      <c-cell
+        dot
+        title="团队头像"
+        @click="$router.push('/team-avator')"
+      >
+        <template slot="right">
+          <div class="w-7 h-7 rounded overflow-hidden flex items-center justify-center">
+            <img class="max-w-full" src="@/assets/images/33.png" alt="">
+          </div>
+        </template>
+      </c-cell>
+      <c-cell
+        dot
+        title="团队名称"
+        content="杭州复杂美科技有限公司"
+        @click="$router.push('/team-name')"
+      />
+      <c-cell dot title="团队描述" @click="$router.push('/team-description')" />
+    </div>
+  </main-page>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  components:{ 
+    // 'app-icon':()=>import('@/components/common/Icon.vue'),
+    'main-page': () => import('@/layout/main-page.vue'),
+    'c-cell': () => import('../components/c-cell.vue')
+  },
+  name: 'TeamInfo',
+  data() {
+    return {}
+  },
+  methods: {}
+})
+</script>
+
+<style lang="less">
+
+</style>

src/views/team-info/team-name.vue

+<template>
+  <!-- 团队名称 -->
+  <main-page
+    left-arrow
+    @click-left="$router.go(-1)"
+  >
+    <div class="px-4 pt-14">
+      <input-cell
+        v-model="name"
+        label="企业/组织/团队名称"
+        :limit="20"
+      />
+    </div>
+     <div class="fixed bottom-0 left-0 w-full px-4 py-2">
+      <c-button round @click="$router.go(-1)">确定</c-button>
+    </div>
+  </main-page>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  components:{ 
+    // 'app-icon':()=>import('@/components/common/Icon.vue'),
+    'main-page': () => import('@/layout/main-page.vue'),
+    'input-cell': () => import('../components/input-cell.vue'),
+    'c-button': () => import('../components/c-button.vue')
+  },
+  name: 'TeamName',
+  data() {
+    return {
+      name: '杭州复杂美科技有限公司'
+    }
+  },
+  methods: {}
+})
+</script>
+
+<style lang="less">
+
+</style>

src/views/team-management.vue

@@ -11,13 +11,14 @@
         />
         <!-- 名称 -->
         <div class="ml-4 flex-1 text-text-primary">
-          <span>
-            这里是企业名称只有负责人可编辑修改修改
+          <span class="break-all">
+            {{ teamName }}
           </span>
           <app-icon
             type="png"
             :path="require('@/assets/icons/edit.png')"
             class-name="h-3 w-3 inline-block ml-1"
+            @click="editTeamName"
           />
           <!-- 团队号 -->
           <div class="text-text-secondary text-sm font-medium mt-1.5">
@@ -51,10 +52,16 @@ export default Vue.extend({
     'c-button': () => import('./components/c-button.vue')
   },
   name: 'TeamManagement',
+  data() {
+    return {
+      teamName: '企业名称',
+    }
+  },
   methods: {
-    // handleClickLeft() {
-    //   console.log('click')
-    // }
+    editTeamName() {
+      console.log('edit')
+      this.$router.push('/team-info')
+    },
     transferManagement() {
       this.$router.push({
         path: '/team-frame',