修改搜索页面样式及数据接入

2024-12-30 13:28:29 +08:00 · 2024-12-30 13:28:29 +08:00 · e5afaf2cd8
commit e5afaf2cd8
parent 4f43f1a001
4 changed files with 389 additions and 20 deletions
--- a/src/pages/search/components/searchItem.vue
+++ b/src/pages/search/components/searchItem.vue
@ -1,7 +1,10 @@
 <template>
  <div class="search-item" v-if="resultName">
    <div class="avatar-img">
-      <img :src="avatarImg" />
+      <img v-if="avatarImg !== 'textImg'" :src="avatarImg" />
+      <span v-if="avatarImg === 'textImg'" class="text-[32rpx] font-bold">
+        {{ imgText }}
+      </span>
    </div>
    <div class="result-info">
      <div class="info-name">
@ -10,8 +13,22 @@
          :text="resultName"
          :searchText="props.searchText"
        />
-        <div class="info-tag" v-if="resultType">
-          <span class="text-[24rpx] font-medium">{{ resultType }}</span>
+        <div class="info_num" v-if="groupNum">
+          <span class="text-[32rpx] font-medium">
+            {{ '（' + groupNum + '）' }}
+          </span>
+        </div>
+        <div
+          class="info-tag"
+          v-if="resultType"
+          :style="'border-color:' + resultTypeColor"
+        >
+          <span
+            class="text-[24rpx] font-medium"
+            :style="'color:' + resultTypeColor"
+          >
+            {{ resultType }}
+          </span>
        </div>
      </div>
      <div class="info-detail" v-if="resultDetail">
@ -41,16 +58,46 @@ const props = defineProps({
 // 映射表-查找对应结构下的属性名
 const keyMapping = {
  user_infos: { avatar: 'avatar', name: 'nickname' },
-  group_infos: { avatar: 'avatar', name: 'name' },
+  group_infos: { avatar: 'avatar', name: 'name', group_num: 'group_num' },
  group_member_infos: {
    avatar: 'group_avatar',
    name: 'group_name',
    detailKey: 'user_name',
+    group_num: 'group_num',
+  },
+  combinedGroup: {
+    avatar: props.searchItem?.groupTempType
+      ? props.searchItem?.groupTempType === 'group_infos'
+        ? 'avatar'
+        : props.searchItem?.groupTempType === 'group_member_infos'
+        ? 'group_avatar'
+        : ''
+      : '',
+    name: props.searchItem?.groupTempType
+      ? props.searchItem?.groupTempType === 'group_infos'
+        ? 'name'
+        : props.searchItem?.groupTempType === 'group_member_infos'
+        ? 'group_name'
+        : ''
+      : '',
+    detailKey: props.searchItem?.groupTempType
+      ? props.searchItem?.groupTempType === 'group_member_infos'
+        ? 'user_name'
+        : ''
+      : '',
+    group_num: props.searchItem?.groupTempType
+      ? props.searchItem?.groupTempType === 'group_infos'
+        ? 'group_num'
+        : props.searchItem?.groupTempType === 'group_member_infos'
+        ? 'group_num'
+        : ''
+      : '',
  },
  general_infos: {
    avatar: 'receiver_avatar',
    name: 'receiver_name',
    detailKey: 'count',
+    group_num: 'group_num',
  },
 }
 //获取key对应值
@ -73,28 +120,48 @@ const avatarImg = computed(() => {
 const resultName = computed(() => {
  return getKeyValue(keyMapping[props.searchResultKey]?.name)
 })
+//文字头像
+const imgText = computed(() => {
+  return resultName.value.length >= 2
+    ? resultName.value.slice(-2)
+    : resultName.value
+})
 // 映射表-根据groupType设置对应值
 const groupTypeMapping = {
-  0: {},
+  0: {
+    defaultImg: 'textImg',
+  },
  1: {
    defaultImg: zu4992,
  },
  2: {
    result_type: t('index.mine.department'),
+    result_type_color: '#377EC6',
    defaultImg: zu4989,
  },
  3: {
    result_type: t('index.mine.project'),
+    result_type_color: '#C1681C',
    defaultImg: zu4991,
  },
  4: {
+    result_type: t('index.type.company'),
+    result_type_color: '#7A58DE',
    defaultImg: zu5296,
  },
 }
+//群人数
+const groupNum = computed(() => {
+  return getKeyValue(keyMapping[props.searchResultKey]?.group_num)
+})
 //群类型tag
 const resultType = computed(() => {
  return groupTypeMapping[props.searchItem?.group_type]?.result_type
 })
+//群类型tag颜色
+const resultTypeColor = computed(() => {
+  return groupTypeMapping[props.searchItem?.group_type]?.result_type_color
+})
 //详细内容
 const resultDetail = computed(() => {
  let result_detail =
@ -130,10 +197,19 @@ const resultDetail = computed(() => {
    margin: 0 20rpx 0 0;
    border-radius: 50%;
    overflow: hidden;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(to right, #674bbc, #46299d);
    img {
      width: 100%;
      height: 100%;
    }
+    span {
+      color: #fff;
+      line-height: 44rpx;
+    }
  }
  .result-info {
    .info-name {
--- a/src/pages/search/components/searchList.vue
+++ b/src/pages/search/components/searchList.vue
@ -0,0 +1,177 @@
+<template>
+  <div class="search-list">
+    <div class="search-result-list" v-if="props.searchText">
+      <div
+        class="search-result-each-part"
+        v-for="(searchResultValue,
+        searchResultKey,
+        searchResultIndex) in props.searchResult"
+        :key="searchResultKey"
+      >
+        <div
+          class="search-result-part"
+          v-if="
+            Array.isArray(props?.searchResult[searchResultKey]) &&
+            props?.searchResult[searchResultKey].length > 0 &&
+            searchResultKey !== 'group_infos' &&
+            searchResultKey !== 'group_member_infos'
+          "
+        >
+          <div class="result-title">
+            <span class="text-[28rpx] font-regular">
+              {{ getResultKeysValue(searchResultKey) }}
+            </span>
+          </div>
+          <div class="result-list">
+            <div
+              class="result-list-each"
+              v-for="(item, index) in props?.searchResult[searchResultKey]"
+              :key="index"
+            >
+              <searchItem
+                v-if="index < 3"
+                :searchResultKey="searchResultKey"
+                :searchItem="item"
+                :searchText="props.searchText"
+              ></searchItem>
+            </div>
+          </div>
+          <div class="result-has-more" v-if="getHasMoreResult(searchResultKey)">
+            <span class="text-[28rpx] font-regular">
+              {{ getHasMoreResult(searchResultKey) }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="search-no-result" v-if="!props.searchText">
+      <img src="/src/static//image/search/search-no-data.png" mode="widthFix" />
+      <span class="text-[28rpx] font-regular">{{ $t('search.hint') }}</span>
+    </div>
+  </div>
+</template>
+<script setup>
+import searchItem from './searchItem.vue'
+import { useI18n } from 'vue-i18n'
+const props = defineProps({
+  searchResult: Object,
+  searchText: String,
+})
+const { t } = useI18n()
+
+//获取key对应值
+const getResultKeysValue = (keys) => {
+  let resultKey = ''
+  switch (keys) {
+    case 'user_infos':
+      resultKey = t('index.mine.addressBook')
+      break
+    case 'group_infos':
+      resultKey = t('chat.type.group')
+      break
+    case 'group_member_infos':
+      resultKey = t('chat.type.group')
+      break
+    case 'combinedGroup':
+      resultKey = t('chat.type.group')
+      break
+    case 'general_infos':
+      resultKey = t('chat.type.record')
+      break
+    default:
+      resultKey = ''
+  }
+  return resultKey
+}
+
+//是否还有更多数据
+const getHasMoreResult = (searchResultKey) => {
+  let has_more_result = ''
+  switch (searchResultKey) {
+    case 'user_infos':
+      if (
+        props.searchResult['user_count'] &&
+        props.searchResult['user_count'] > 3
+      ) {
+        has_more_result = t('has_more') + t('index.mine.addressBook')
+      }
+      break
+    case 'group_infos':
+      if (
+        props.searchResult['group_count'] &&
+        props.searchResult['group_count'] > 3
+      ) {
+        has_more_result = t('has_more') + t('chat.type.group')
+      }
+      break
+    case 'group_member_infos':
+      if (
+        props.searchResult['group_count'] &&
+        props.searchResult['group_count'] > 3
+      ) {
+        has_more_result = t('has_more') + t('chat.type.group')
+      }
+      break
+    case 'combinedGroup':
+      if (
+        props.searchResult['group_count'] &&
+        props.searchResult['group_count'] > 3
+      ) {
+        has_more_result = t('has_more') + t('chat.type.group')
+      }
+      break
+    case 'general_infos':
+      break
+    default:
+  }
+  return has_more_result
+}
+</script>
+<style lang="scss" scoped>
+.search-list {
+  .search-result-list {
+    width: 100%;
+    padding: 10rpx 18rpx;
+
+    .search-result-each-part {
+      margin: 46rpx 0 0;
+
+      .result-title {
+        padding: 0 0 10rpx;
+        span {
+          line-height: 40rpx;
+          color: $theme-hint-text;
+        }
+      }
+      .result-has-more {
+        padding: 10px 0;
+        border-bottom: 1px solid $theme-border-color;
+        span {
+          color: #191919;
+          line-height: 40rpx;
+        }
+      }
+    }
+  }
+
+  .search-no-result {
+    width: 476rpx;
+    height: 261rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+
+    span {
+      color: $theme-hint-text;
+      margin: -20rpx 0 0;
+      line-height: 40rpx;
+    }
+  }
+}
+</style>
--- a/src/pages/search/index.vue
+++ b/src/pages/search/index.vue
@ -33,19 +33,42 @@
            searchResultIndex) in state.searchResult"
            :key="searchResultKey"
          >
-            <div class="result-title text-[28rpx] font-regular">
-              {{ getResultKeysValue(searchResultKey) }}
+            <div
+              class="search-result-part"
+              v-if="
+                Array.isArray(state?.searchResult[searchResultKey]) &&
+                searchResultKey !== 'group_infos' &&
+                searchResultKey !== 'group_member_infos'
+              "
+            >
+              <div class="result-title">
+                <span class="text-[28rpx] font-regular">
+                  {{ getResultKeysValue(searchResultKey) }}
+                </span>
+              </div>
+              <div class="result-list">
+                <div
+                  class="result-list-each"
+                  v-for="(item, index) in state?.searchResult[searchResultKey]"
+                  :key="index"
+                >
+                  <searchItem
+                    v-if="index < 3"
+                    :searchResultKey="searchResultKey"
+                    :searchItem="item"
+                    :searchText="state.searchText"
+                  ></searchItem>
+                </div>
+              </div>
+              <div
+                class="result-has-more"
+                v-if="getHasMoreResult(searchResultKey)"
+              >
+                <span class="text-[28rpx] font-regular">
+                  {{ getHasMoreResult(searchResultKey) }}
+                </span>
+              </div>
            </div>
-            <div class="result-list">
-              <searchItem
-                v-for="(item, index) in state?.searchResult[searchResultKey]"
-                :key="index"
-                :searchResultKey="searchResultKey"
-                :searchItem="item"
-                :searchText="state.searchText"
-              ></searchItem>
-            </div>
-            <div class="result-has-more"></div>
          </div>
        </div>
        <div class="search-no-result" v-if="!state.searchText">
@ -65,6 +88,7 @@ import { ServeSeachQueryAll } from '@/api/search/index'
 import { ref, watch, computed, onMounted, onUnmounted, reactive } from 'vue'
 import { useAuth } from '@/store/auth'
 import { useI18n } from 'vue-i18n'
+import { nextTick } from 'process'
 const { t } = useI18n()
 const state = reactive({
  searchText: '', //搜索内容
@ -92,6 +116,9 @@ const getResultKeysValue = (keys) => {
    case 'group_member_infos':
      resultKey = t('chat.type.group')
      break
+    case 'combinedGroup':
+      resultKey = t('chat.type.group')
+      break
    case 'general_infos':
      resultKey = t('chat.type.record')
      break
@ -101,6 +128,49 @@ const getResultKeysValue = (keys) => {
  return resultKey
 }

+//是否还有更多数据
+const getHasMoreResult = (searchResultKey) => {
+  let has_more_result = ''
+  switch (searchResultKey) {
+    case 'user_infos':
+      if (
+        state.searchResult['user_count'] &&
+        state.searchResult['user_count'] > 3
+      ) {
+        has_more_result = t('has_more') + t('index.mine.addressBook')
+      }
+      break
+    case 'group_infos':
+      if (
+        state.searchResult['group_count'] &&
+        state.searchResult['group_count'] > 3
+      ) {
+        has_more_result = t('has_more') + t('chat.type.group')
+      }
+      break
+    case 'group_member_infos':
+      if (
+        state.searchResult['group_count'] &&
+        state.searchResult['group_count'] > 3
+      ) {
+        has_more_result = t('has_more') + t('chat.type.group')
+      }
+      break
+    case 'combinedGroup':
+      if (
+        state.searchResult['group_count'] &&
+        state.searchResult['group_count'] > 3
+      ) {
+        has_more_result = t('has_more') + t('chat.type.group')
+      }
+      break
+    case 'general_infos':
+      break
+    default:
+  }
+  return has_more_result
+}
+
 // ES搜索聊天记录-主页搜索什么都有
 const queryAllSearch = (searchText) => {
  let params = {
@ -111,6 +181,40 @@ const queryAllSearch = (searchText) => {
  resp.then(({ code, data }) => {
    console.log(data)
    if (code == 200) {
+      // data.group_infos = [
+      //   {
+      //     id: 888898,
+      //     type: 4,
+      //     name: '泰丰国际',
+      //     avatar: '', //群头像
+      //     created_at: '2024-10-31 14:31:11',
+      //     group_num: 730,
+      //   },
+      // ]
+      if ((data.user_infos || []).length > 0) {
+        ;(data.user_infos || []).forEach((item) => {
+          item.group_type = 0
+        })
+      }
+      if ((data.group_infos || []).length > 0) {
+        ;(data.group_infos || []).forEach((item) => {
+          item.group_type = item.type
+          item.groupTempType = 'group_infos'
+        })
+      }
+      if ((data.group_member_infos || []).length > 0) {
+        ;(data.group_member_infos || []).forEach((item) => {
+          item.groupTempType = 'group_member_infos'
+        })
+      }
+      let tempGeneral_infos = Array.isArray(data.general_infos)
+        ? [...data.general_infos]
+        : data.general_infos
+      delete data.general_infos
+      data.combinedGroup = (data.group_infos || []).concat(
+        data.group_member_infos || [],
+      )
+      data.general_infos = tempGeneral_infos
      state.searchResult = data
    } else {
    }
@ -186,9 +290,19 @@ page {
        margin: 46rpx 0 0;

        .result-title {
-          line-height: 40rpx;
          padding: 0 0 10rpx;
-          color: $theme-hint-text;
+          span {
+            line-height: 40rpx;
+            color: $theme-hint-text;
+          }
+        }
+        .result-has-more {
+          padding: 10px 0;
+          border-bottom: 1px solid $theme-border-color;
+          span {
+            color: #191919;
+            line-height: 40rpx;
+          }
        }
      }
    }
--- a/src/uni_modules/tmui/locale/zh-Hans.json
+++ b/src/uni_modules/tmui/locale/zh-Hans.json
@ -79,5 +79,7 @@
  "index.mine.project": "项目",
  "chat.type.group": "群聊",
  "chat.type.record": "聊天记录",
-  "search.result.include": "包含："
+  "search.result.include": "包含：",
+  "has_more": "更多",
+  "index.type.company": "公司"
 }