feat: 首页调整 团队详情调整

App.vue

@@ -91,6 +91,10 @@ page {
   display: inline-block;
 }
 
+.block {
+  display: block;
+}
+
 .flex {
   display: flex;
 }
@@ -398,6 +402,13 @@ page {
   overflow: hidden;
 }
 
+.line-clamp-3 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
+
 .h-full {
   height: 100%;
 }

pages/home/consult.vue

@@ -1,9 +1,10 @@
 <template>
   <view class="consult-container">
-    <view class="consult-title">咨询互动</view>
+    <view class="consult-title">团队服务</view>
 
     <view class="consult-grid">
-      <view class="consult-item" v-for="item in consultItems" :key="item.id" @click="handleItemClick(item)">
+      <view class="consult-item" v-for="item in consultItems" :class="hideMenus[item.id] ? 'consult-item--hiden' : ''"
+        :key="item.id" @click="handleItemClick(item)">
         <view class="relative item-icon">
           <image :src="item.icon" class="icon-img" mode="aspectFill" />
           <view v-if="badgeMap[item.badge]" class="item-dot"></view>
@@ -19,7 +20,7 @@
 </template>
 
 <script setup>
-import { ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import { storeToRefs } from "pinia";
 import useAccount from "@/store/account";
 import api from "@/utils/api";
@@ -80,6 +81,13 @@ const consultItems = ref([
     badge: 'rate'
   },
 ]);
+const hideMenus = computed(() => {
+  const result = {};
+  if (!props.team || !props.team.creator) {
+    result.chat = true;
+  }
+  return result;
+})
 
 function handleItemClick(item) {
   // 聊天咨询需要选择咨询人
@@ -227,6 +235,10 @@ defineExpose({
   cursor: pointer;
 }
 
+.consult-item--hiden {
+  display: none;
+}
+
 .item-icon {
   width: 80rpx;
   height: 80;

pages/home/home.vue

@@ -8,6 +8,9 @@
       <customer-archive ref="archiveRef" :corpId="corpId" :corpUserIds="corpUserIds" :team="team"
         @update:customers="handleCustomersUpdate" />
     </view>
+    <view class="home-section">
+      <team-guide :team="team" />
+    </view>
     <view class="home-section">
       <consult ref="consultRef" :corpId="corpId" :teamId="team.teamId" :team="team" :customers="customers" />
     </view>
@@ -35,7 +38,8 @@ import articleList from "./article-list.vue";
 import consult from "./consult.vue";
 import customerArchive from "./customer-archive.vue";
 import teamHead from "./team-head.vue";
-import teamMate from "./team-mate.vue";
+import teamGuide from "./team-guide.vue";
+// import teamMate from "./team-mate.vue";
 import ycHome from "./yc-home.vue";
 import pageLoading from "./loading.vue";
 

pages/home/team-guide.vue

@@ -0,0 +1,121 @@
+<template>
+  <view class="px-15">
+    <view v-if="qrcode && qrcode.guide" class="team-introduce-wrapper rounded shadow-lg">
+      <view class="team-introduce flex items-center">
+        <view class="team-introduce-border"></view>
+        <!-- <view class="triangle-wrapper">
+          <view class="team-triangle"></view>
+        </view> -->
+        <image class="laba-icon flex-shrink-0" src="/static/home/speaker-intro.png" mode="aspectFit"></image>
+        <view class="introduce-text flex-grow line-clamp-2">
+          {{ qrcode.guide }}
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  team: {
+    type: Object,
+    default: () => ({}),
+  }
+});
+
+const qrcode = computed(() => {
+  const qrcodes = props.team && Array.isArray(props.team.qrcodes) ? props.team.qrcodes : [];
+  return qrcodes[0] || ''
+})
+
+
+</script>
+<style scoped>
+.laba-icon {
+  width: 48rpx;
+  height: 48rpx;
+  margin-left: 12rpx;
+  margin-right: 12rpx;
+}
+
+.team-introduce-wrapper {
+  background: #fff;
+  z-index: 2;
+}
+
+.team-introduce {
+  width: 690rpx;
+  box-sizing: border-box;
+  background: linear-gradient(186deg,
+      rgba(255, 255, 255, 0.4) 13.34%,
+      rgba(255, 255, 255, 0.6) 99.17%);
+  border-radius: 16rpx;
+  padding: 20rpx;
+  position: relative;
+  overflow: visible;
+}
+
+.team-introduce-border {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: 1px solid #fff;
+  border-radius: 16rpx;
+  pointer-events: none;
+  /* -webkit-mask-image: linear-gradient(to right, #000 0, #000 50rpx, transparent 50rpx, transparent 70rpx, #000 70rpx),
+    linear-gradient(#000, #000);
+  mask-image: linear-gradient(to right, #000 0, #000 50rpx, transparent 50rpx, transparent 70rpx, #000 70rpx),
+    linear-gradient(#000, #000);
+  -webkit-mask-size: 100% 1px, 100% 100%;
+  mask-size: 100% 1px, 100% 100%;
+  -webkit-mask-position: 0 0, 0 1px;
+  mask-position: 0 0, 0 1px;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat; */
+}
+
+.triangle-wrapper {
+  position: absolute;
+  top: -12rpx;
+  left: 60rpx;
+  width: 32rpx;
+  height: 12rpx;
+  overflow: hidden;
+  z-index: 10;
+  transform: translateX(-50%);
+}
+
+.team-triangle {
+  position: absolute;
+  left: 50%;
+  bottom: -9rpx;
+  width: 16rpx;
+  height: 16rpx;
+  background: linear-gradient(186deg,
+      rgba(255, 255, 255, 0.4) 13.34%,
+      rgba(255, 255, 255, 0.6) 99.17%);
+  transform: translateX(-50%) rotate(45deg);
+  border-top: 1px solid #fff;
+  border-left: 1px solid #fff;
+  box-sizing: border-box;
+}
+
+.introduce-text {
+  color: #333;
+  font-size: 24rpx;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 36rpx;
+}
+
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+}
+</style>

pages/team/team-detail.vue

@@ -1,76 +1,57 @@
 <template>
-	<full-page>
-  <view v-if="team" class="p-15">
-    <view class="flex items-center">
-      <view class="flex-shrink-0 mr-10">
-        <group-avatar :size="96" :avatarList="avatarList" />
-      </view>
-      <view class="flex-grow w-0 leading-noraml">
-        <view class="mb-5 text-lg font-semibold text-dark">{{ team.name }}</view>
-        <view class="text-base text-gray">
-          {{ corpName }}
+  <full-page :pageStyle="pageStyle">
+    <view v-if="team" class="detail-wrapper">
+      <view class="linear-bg">
+        <view class="flex items-center pt-15 px-15">
+          <view class="flex-shrink-0 mr-10">
+            <group-avatar :size="128" :avatarList="avatarList" />
+          </view>
+          <view class="w-0 flex-grow">
+            <view class="name-title text-lg font-semibold text-dark truncate">{{ team.name }}</view>
+            <view class="corp-title text-sm text-gray truncate">{{ corpName }}</view>
+          </view>
         </view>
-      </view>
-    </view>
-    <view class="flex items-center justify-between mt-12" @click="showAllIntroduce = !showAllIntroduce">
-      <view class="text-dark font-semibold">团队介绍</view>
-      <uni-icons :type="showAllIntroduce ? 'up' : 'down'" size="20" color="#666"></uni-icons>
-    </view>
-    <view v-if="team.teamTroduce" class="mt-10 text-base text-dark leading-normal break-all pre-wrap"
-      :class="showAllIntroduce ? '' : 'line-clamp-2'" @click="showAllIntroduce = !showAllIntroduce">
-      {{ team.teamTroduce }}
-    </view>
-    <template v-if="teammate.leaders.length">
-      <view class="min-w-100 inline-block mt-12 px-10 py-5 text-center text-base text-white bg-primary rounded-sm">
-        团队负责人
-      </view>
-      <view v-for="i in teammate.leaders" :key="i._id" class="mt-12 flex p-10 border-primary rounded-sm"
-        @click="toHomePage(i.userid)">
-        <image class="flex-shrink-0 mr-10 avatar" :src="i.avatar || '/static/default-avatar.png'"></image>
-        <view class="w-0 flex-grow leading-normal">
-          <view class="flex items-center justify-between">
-            <view class="flex-shrink-0 mr-5 view-lg text-dark font-semibold">{{ i.anotherName }}</view>
-            <view class="w-0 flex-grow truncate text-base text-dark">
+        <view v-if="team.teamTroduce" class="px-15 leading-normal text-base text-blue">
+          {{ team.teamTroduce }}
+        </view>
+        <view class="pt-15"></view>
+        <image v-if="teammate.leaders.length" class="block mt-30 mx-auto icon-role" src="/static/teamleader.svg">
+        </image>
+        <view v-for="i in teammate.leaders" :key="i._id" class="mt-15 flex flex-col items-center">
+          <view class="ablum text-center p-10 flex flex-col items-center rounded-sm"
+            :class="friendlyMember[i.userid] ? 'ablum-pb' : ''" @click="toHomePage(i.userid)">
+            <image class="avatar mb-10" :src="i.avatar || '/static/default-avatar.png'"></image>
+            <view class="text-lg text-dark font-semibold">{{ i.anotherName }}</view>
+            <view class="mt-5 text-base text-gray">
               {{ memberJob[i.userid] }}
             </view>
-            <view v-if="friendlyMember[i.userid]"
-              class="flex-shrink-0 px-10 leading-normal text-sm border-auto text-primary rounded-full"
-              @click.stop="toFriend(i.userid)">
-              添加好友
+            <view v-if="friendlyMember[i.userid]" class="friend-bottom" @click.stop="toFriend(i.userid)">
+              可加好友
             </view>
           </view>
-          <view class="line-clamp-2 text-base text-gray">
-            {{ i.memberTroduce || '暂无简介' }}
+          <view class="mt-15 border-box w-full px-15 leading-normal text-base text-blue">
+            个人介绍: {{ i.memberTroduce || '暂无介绍' }}
           </view>
         </view>
-      </view>
-    </template>
-
-    <template v-if="teammate.members.length">
-      <view class="min-w-100 inline-block mt-12 px-10 py-5 text-center text-base text-white bg-primary rounded-sm">团队成员
-      </view>
-      <view v-for="i in teammate.members" :key="i._id" class="mt-12 flex p-10 border-primary rounded-sm"
-        @click="toHomePage(i.userid)">
-        <image class="flex-shrink-0 mr-10 avatar" :src="i.avatar || '/static/default-avatar.png'"></image>
-        <view class="w-0 flex-grow leading-normal">
-          <view class="flex items-center justify-between">
-            <view class="flex-shrink-0 mr-5 view-lg text-dark font-semibold">{{ i.anotherName }}</view>
-            <view class="w-0 flex-grow truncate text-base text-dark">
+        <image v-if="teammate.members.length" class="block mt-30 mx-auto icon-role" src="/static/teammate.svg"></image>
+        <view v-for="i in teammate.members" :key="i._id" class="mt-15 flex flex-col items-center">
+          <view class="ablum text-center p-10 flex flex-col items-center rounded-sm"
+            :class="friendlyMember[i.userid] ? 'ablum-pb' : ''" @click="toHomePage(i.userid)">
+            <image class="avatar mb-10" :src="i.avatar || '/static/default-avatar.png'"></image>
+            <view class="w-full text-lg text-dark font-semibold truncate px-10">{{ i.anotherName }}</view>
+            <view class="w-full mt-5 text-base text-gray truncate px-10">
               {{ memberJob[i.userid] }}
             </view>
-            <view v-if="friendlyMember[i.userid]"
-              class="flex-shrink-0 px-10 leading-normal text-sm border-auto text-primary rounded-full"
-              @click.stop="toFriend(i.userid)">
-              添加好友
+            <view v-if="friendlyMember[i.userid]" class="friend-bottom" @click.stop="toFriend(i.userid)">
+              可加好友
             </view>
           </view>
-          <view class="line-clamp-2 text-base text-gray">
-            {{ i.memberTroduce || '暂无简介' }}
+          <view class="mt-15 border-box w-full px-15 leading-normal text-base text-blue">
+            个人介绍: {{ i.memberTroduce || '暂无介绍' }}
           </view>
         </view>
       </view>
-    </template>
-  </view>
+    </view>
   </full-page>
 </template>
 <script setup>
@@ -82,6 +63,8 @@ import api from '@/utils/api';
 import groupAvatar from '@/components/group-avatar.vue';
 import FullPage from '@/components/full-page.vue';
 
+const pageStyle = "background: linear-gradient(180deg, #065BD6 15.05%, #F6FAFA 95.37%) 0 0/100% 562rpx no-repeat, #F6FAFA;";
+
 const corpId = ref('');
 const teamId = ref('');
 const team = ref(null);
@@ -133,6 +116,9 @@ async function getTeam() {
 onLoad(options => {
   corpId.value = options.corpId;
   teamId.value = options.teamId;
+  console.clear()
+  console.log(options.corpName)
+  console.log(decodeURIComponent(options.corpName || ''))
   corpName.value = decodeURIComponent(options.corpName || '');
 })
 onShow(() => {
@@ -157,11 +143,78 @@ page {
 }
 
 .avatar {
-  width: 120rpx;
-  height: 128rpx;
+  width: 216rpx;
+  height: 240rpx;
 }
 
 .pre-wrap {
   white-space: pre-wrap;
 }
+
+.detail-wrapper {
+  transform: translateY(200rpx);
+  background: #F5FAFF;
+  border-top-left-radius: 24rpx;
+  border-top-right-radius: 24rpx;
+  min-height: calc(100vh - 200rpx);
+  padding-bottom: 80rpx;
+  overflow: hidden;
+}
+
+.name-title {
+  height: 64rpx;
+  line-height: 64rpx;
+}
+
+.corp-title {
+  height: 44rpx;
+  line-height: 44rpx;
+}
+
+.text-blue {
+  color: #516276;
+}
+
+.linear-bg {
+  background: linear-gradient(180deg, #ffffff 0%, #f5faff 100%);
+}
+
+.icon-role {
+  margin-bottom: 30rpx;
+  width: 280rpx;
+  height: 60rpx;
+}
+
+.ablum {
+  width: 336rpx;
+  box-sizing: border-box;
+  border: 1rpx solid #9BB7D8;
+}
+
+.ablum-pb {
+  position: relative;
+  padding-bottom: 64rpx;
+}
+
+.mt-5 {
+  margin-top: 10rpx;
+}
+
+.friend-bottom {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 48rpx;
+  text-align: center;
+  line-height: 48rpx;
+  font-size: 24rpx;
+  color: #fff;
+  font-weight: bold;
+  background: #065BD6;
+}
+
+.mt-30 {
+  margin-top: 60rpx;
+}
 </style>