新增搜索页面，并接入部分接口
This commit is contained in:
parent
f9d97f642b
commit
ad658710f7
@ -18,6 +18,7 @@ init()
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import "@/static/css/color.scss";
|
||||
@import "@/static/css/font.scss";
|
||||
/* #ifdef APP-NVUE */
|
||||
@import '@/uni_modules/tmui/scss/nvue.css';
|
||||
/* #endif */
|
||||
|
||||
11
src/api/search/index.js
Normal file
11
src/api/search/index.js
Normal file
@ -0,0 +1,11 @@
|
||||
import request from '@/service/index.js'
|
||||
import qs from 'qs'
|
||||
|
||||
// ES搜索聊天记录-主页搜索什么都有
|
||||
export const ServeSeachQueryAll = (data) => {
|
||||
return request({
|
||||
url: '/api/v1/elasticsearch/query-all',
|
||||
method: 'POST',
|
||||
data,
|
||||
})
|
||||
}
|
||||
@ -58,6 +58,14 @@
|
||||
"path": "pages/login/index",
|
||||
"type": "page",
|
||||
"style": {}
|
||||
},
|
||||
{
|
||||
"path": "pages/search/index",
|
||||
"type": "page",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh":false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -57,7 +57,7 @@
|
||||
</tm-navbar>
|
||||
</div>
|
||||
<div class="root">
|
||||
<div class="searchRoot">
|
||||
<div class="searchRoot" @click="toSearchPage">
|
||||
<tm-input
|
||||
placeholder="请输入…"
|
||||
color="#F9F9FD"
|
||||
@ -111,6 +111,12 @@ const creatGroupChat = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const toSearchPage = () => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/search/index",
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => talkStore,
|
||||
(newValue, oldValue) => {
|
||||
|
||||
166
src/pages/search/components/searchItem.vue
Normal file
166
src/pages/search/components/searchItem.vue
Normal file
@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<div class="search-item" v-if="resultName">
|
||||
<div class="avatar-img">
|
||||
<img :src="avatarImg" />
|
||||
</div>
|
||||
<div class="result-info">
|
||||
<div class="info-name">
|
||||
<span class="text-[32rpx] font-medium">
|
||||
{{ resultName }}
|
||||
</span>
|
||||
<div class="info-tag" v-if="resultType">
|
||||
<span class="text-[24rpx] font-medium">{{ resultType }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-detail" v-if="resultDetail">
|
||||
<span class="text-[28rpx] font-regular">
|
||||
{{ resultDetail }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import zu4992 from '@/static/image/chatList/zu4992@2x.png'
|
||||
import zu4991 from '@/static/image/chatList/zu4991@2x.png'
|
||||
import zu4989 from '@/static/image/chatList/zu4989@2x.png'
|
||||
import {
|
||||
ref,
|
||||
watch,
|
||||
computed,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
reactive,
|
||||
getCurrentInstance,
|
||||
} from 'vue'
|
||||
const { proxy } = getCurrentInstance()
|
||||
const props = defineProps({
|
||||
searchItem: Object | Number,
|
||||
searchResultKey: String,
|
||||
})
|
||||
const avatarImg = computed(() => {
|
||||
let srcT = ''
|
||||
switch (props.searchItem?.group_type) {
|
||||
case 0:
|
||||
srcT = zu5296
|
||||
break
|
||||
case 1:
|
||||
srcT = zu4992
|
||||
break
|
||||
case 2:
|
||||
srcT = zu4991
|
||||
break
|
||||
case 3:
|
||||
srcT = zu4989
|
||||
break
|
||||
default:
|
||||
srcT = zu4992
|
||||
}
|
||||
return srcT
|
||||
})
|
||||
const resultName = computed(() => {
|
||||
let data_key = ''
|
||||
switch (props.searchResultKey) {
|
||||
case 'user_infos':
|
||||
data_key = props.searchItem?.nickname
|
||||
break
|
||||
case 'group_member_infos':
|
||||
data_key = props.searchItem?.group_name
|
||||
break
|
||||
case 'general_infos':
|
||||
data_key = props.searchItem?.receiver_name
|
||||
break
|
||||
default:
|
||||
data_key = ''
|
||||
}
|
||||
return data_key
|
||||
})
|
||||
const resultType = computed(() => {
|
||||
let result_type = ''
|
||||
switch (props.searchItem?.group_type) {
|
||||
case 0:
|
||||
result_type = ''
|
||||
break
|
||||
case 1:
|
||||
result_type = ''
|
||||
break
|
||||
case 2:
|
||||
result_type = proxy.$t('index.mine.department')
|
||||
break
|
||||
case 3:
|
||||
result_type = proxy.$t('index.mine.project')
|
||||
break
|
||||
case 4:
|
||||
result_type = ''
|
||||
break
|
||||
default:
|
||||
result_type = ''
|
||||
}
|
||||
return result_type
|
||||
})
|
||||
const resultDetail = computed(() => {
|
||||
let data_key = ''
|
||||
switch (props.searchResultKey) {
|
||||
case 'user_infos':
|
||||
data_key = ''
|
||||
break
|
||||
case 'group_member_infos':
|
||||
data_key = ''
|
||||
break
|
||||
case 'general_infos':
|
||||
data_key = props.searchItem?.count + proxy.$t('search.chat.count')
|
||||
break
|
||||
default:
|
||||
data_key = ''
|
||||
}
|
||||
return data_key
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.search-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
.avatar-img {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
margin: 0 20rpx 0 0;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.result-info {
|
||||
.info-name {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
span {
|
||||
color: $theme-text;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
.info-tag {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rpx 14rpx;
|
||||
border: 2rpx solid #000;
|
||||
border-radius: 6rpx;
|
||||
span {
|
||||
line-height: 34rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.info-detail {
|
||||
span {
|
||||
color: $theme-hint-text;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
179
src/pages/search/index.vue
Normal file
179
src/pages/search/index.vue
Normal file
@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<div class="outer-layer search-page">
|
||||
<div class="root">
|
||||
<div class="searchRoot">
|
||||
<tm-input
|
||||
class="searchRoot_input"
|
||||
placeholder="请输入…"
|
||||
color="#F9F9FD"
|
||||
:round="1"
|
||||
prefix="tmicon-search"
|
||||
prefixColor="#46299D"
|
||||
v-model.lazy="state.searchText"
|
||||
@input="inputSearchText"
|
||||
></tm-input>
|
||||
<span
|
||||
class="searchRoot_cancelBtn text-[32rpx] font-medium"
|
||||
@click="cancelSearch"
|
||||
>
|
||||
{{ $t('cancel') }}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="search-result"
|
||||
:style="
|
||||
!state.searchText ? 'align-items:center;justify-content:center;' : ''
|
||||
"
|
||||
>
|
||||
<div class="search-result-list">
|
||||
<div
|
||||
class="search-result-each-part"
|
||||
v-for="(searchResultValue,
|
||||
searchResultKey,
|
||||
searchResultIndex) in state.searchResult"
|
||||
:key="searchResultKey"
|
||||
>
|
||||
<div class="result-title"></div>
|
||||
<div class="result-list">
|
||||
<searchItem
|
||||
v-for="(item, index) in state?.searchResult[searchResultKey]"
|
||||
:key="index"
|
||||
:searchResultKey="searchResultKey"
|
||||
:searchItem="item"
|
||||
></searchItem>
|
||||
</div>
|
||||
<div class="result-has-more"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-no-result" v-if="!state.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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import searchItem from './components/searchItem.vue'
|
||||
import { ServeSeachQueryAll } from '@/api/search/index'
|
||||
import { ref, watch, computed, onMounted, onUnmounted, reactive } from 'vue'
|
||||
import { useAuth } from '@/store/auth'
|
||||
const state = reactive({
|
||||
searchText: '', //搜索内容
|
||||
searchResult: null, //搜索结果
|
||||
searchResultPageSize: 3, //搜索结果每页数据量
|
||||
})
|
||||
|
||||
//输入搜索文本
|
||||
const inputSearchText = (e) => {
|
||||
console.log(e)
|
||||
let searchText = e
|
||||
queryAllSearch(searchText)
|
||||
}
|
||||
|
||||
// ES搜索聊天记录-主页搜索什么都有
|
||||
const queryAllSearch = (searchText) => {
|
||||
let params = {
|
||||
key: searchText, //关键字
|
||||
size: state.searchResultPageSize,
|
||||
}
|
||||
const resp = ServeSeachQueryAll(params)
|
||||
resp.then(({ code, data }) => {
|
||||
console.log(data)
|
||||
if (code == 200) {
|
||||
state.searchResult = data
|
||||
} else {
|
||||
}
|
||||
})
|
||||
|
||||
resp.catch(() => {})
|
||||
}
|
||||
|
||||
//点击取消搜索
|
||||
const cancelSearch = () => {
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
uni-page-body,
|
||||
page {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.outer-layer {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.root {
|
||||
flex: 1;
|
||||
padding: 20rpx 32rpx;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.search-page {
|
||||
.searchRoot {
|
||||
padding: 0 16rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
.searchRoot_input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.searchRoot_cancelBtn {
|
||||
line-height: 44rpx;
|
||||
color: $theme-primary;
|
||||
margin: 0 0 0 20rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.search-result {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
|
||||
.search-result-list {
|
||||
padding: 10rpx 18rpx;
|
||||
}
|
||||
|
||||
.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>
|
||||
@ -1 +1,3 @@
|
||||
$theme-primary: #46299D;
|
||||
$theme-primary: #46299d;
|
||||
$theme-text: #191919;
|
||||
$theme-hint-text: #999999;
|
||||
|
||||
3
src/static/css/font.scss
Normal file
3
src/static/css/font.scss
Normal file
@ -0,0 +1,3 @@
|
||||
.font-regular {
|
||||
font-weight: 400;
|
||||
}
|
||||
BIN
src/static/image/search/search-no-data.png
Normal file
BIN
src/static/image/search/search-no-data.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
@ -1,76 +1,80 @@
|
||||
{
|
||||
"language": "简体-中国",
|
||||
"index.search.subtext": "全端兼容vue3 TypeScript pinia组件库",
|
||||
"index.search.tips": "组件中文/英文名称",
|
||||
"index.search.btntext": "搜索组件",
|
||||
"index.com.navtitle": "TMUI 全平台组件库",
|
||||
"index.com.title": "分类导航",
|
||||
"index.com.tongyong": "通用组件",
|
||||
"index.com.tongyongSub": "高频常用组件",
|
||||
"index.com.row": "布局组件",
|
||||
"index.com.rowSub": "布局排版",
|
||||
"index.com.show": "展示组件",
|
||||
"index.com.showSub": "常见数据展示",
|
||||
"index.com.form": "表单录入",
|
||||
"index.com.formSub": "数据提交类",
|
||||
"index.com.fd": "反馈类型",
|
||||
"index.com.fdSub": "提示弹层类组件",
|
||||
"index.com.nav": "导航类型",
|
||||
"index.com.navSub": "分页导航类",
|
||||
"index.com.yewu": "业务型组件",
|
||||
"index.com.yewuSub": "优惠券导购类",
|
||||
"index.com.other": "其它",
|
||||
"index.com.otherSub": "功能型组件",
|
||||
"index.com.tubiao": "图表组件",
|
||||
"index.com.tubiaoSub": "Echarts 5.3.2",
|
||||
"index.com.render": "tmCv",
|
||||
"index.com.renderSub": "canvas动画渲染",
|
||||
"index.com.pag": "PAG",
|
||||
"index.com.pagSub": "腾讯pag动画",
|
||||
"index.com.bottom": "TMUI3.0",
|
||||
"index.com.setLocal": "设置语言",
|
||||
"index.com.autoDark": "暗黑跟随系统",
|
||||
"index.com.love": "TMUI用户中心",
|
||||
"index.com.loveSub": "看广告赚积分",
|
||||
"index.com.themetext": "动态切换主题,默认主题见文档",
|
||||
"index.com.themeGreen": "小黄",
|
||||
"index.com.themeBlue": "蓝色",
|
||||
"index.com.themeRed": "红色",
|
||||
"index.com.themeDefault": "默认",
|
||||
"index.com.themeCustText": "自定",
|
||||
"message.load.text": "加载中",
|
||||
"message.error.text": "操作错误",
|
||||
"message.info.text": "提示信息",
|
||||
"message.warn.text": "警告信息",
|
||||
"message.quest.text": "似乎有问题",
|
||||
"message.success.text": "操作成功",
|
||||
"message.disabled.text": "禁止操作",
|
||||
"message.wait.text": "请稍候..",
|
||||
"index.mine.logOut":"退出登录",
|
||||
"index.mine.help":"帮助中心",
|
||||
"index.mine.settings":"设置与隐私",
|
||||
"index.mine.addressBook":"通讯录",
|
||||
"index.mine.card":"我的名片",
|
||||
"index.mine.information":"个人信息认证",
|
||||
"index.mine.refresh":"刷新缓存",
|
||||
"index.mine.clickRefresh":"点击清理缓存",
|
||||
"index.mine.basic":"基本信息",
|
||||
"index.mine.company":"公司别",
|
||||
"index.mine.department":"部门",
|
||||
"index.mine.post":"岗位",
|
||||
"index.mine.manager":"主管",
|
||||
"index.mine.phone":"手机号",
|
||||
"index.mine.entry":"入职时间",
|
||||
"index.mine.unable":"无法上传照片",
|
||||
"index.mine.face":"扫脸失败",
|
||||
"index.mine.recentPhoto":"个人近照",
|
||||
"userAgreement":"用户服务协议",
|
||||
"privacyPolicy":"隐私政策",
|
||||
"index.mine.cancellation":"注销账号",
|
||||
"ok":"确定",
|
||||
"message.customerService.text":"请拨打客服电话",
|
||||
"message.action.text":"进行注销操作",
|
||||
"index.mine.upload":"点击上传",
|
||||
"index.mine.reUpload":"重新上传",
|
||||
"index.mine.loading":"载入中"
|
||||
"language": "简体-中国",
|
||||
"index.search.subtext": "全端兼容vue3 TypeScript pinia组件库",
|
||||
"index.search.tips": "组件中文/英文名称",
|
||||
"index.search.btntext": "搜索组件",
|
||||
"index.com.navtitle": "TMUI 全平台组件库",
|
||||
"index.com.title": "分类导航",
|
||||
"index.com.tongyong": "通用组件",
|
||||
"index.com.tongyongSub": "高频常用组件",
|
||||
"index.com.row": "布局组件",
|
||||
"index.com.rowSub": "布局排版",
|
||||
"index.com.show": "展示组件",
|
||||
"index.com.showSub": "常见数据展示",
|
||||
"index.com.form": "表单录入",
|
||||
"index.com.formSub": "数据提交类",
|
||||
"index.com.fd": "反馈类型",
|
||||
"index.com.fdSub": "提示弹层类组件",
|
||||
"index.com.nav": "导航类型",
|
||||
"index.com.navSub": "分页导航类",
|
||||
"index.com.yewu": "业务型组件",
|
||||
"index.com.yewuSub": "优惠券导购类",
|
||||
"index.com.other": "其它",
|
||||
"index.com.otherSub": "功能型组件",
|
||||
"index.com.tubiao": "图表组件",
|
||||
"index.com.tubiaoSub": "Echarts 5.3.2",
|
||||
"index.com.render": "tmCv",
|
||||
"index.com.renderSub": "canvas动画渲染",
|
||||
"index.com.pag": "PAG",
|
||||
"index.com.pagSub": "腾讯pag动画",
|
||||
"index.com.bottom": "TMUI3.0",
|
||||
"index.com.setLocal": "设置语言",
|
||||
"index.com.autoDark": "暗黑跟随系统",
|
||||
"index.com.love": "TMUI用户中心",
|
||||
"index.com.loveSub": "看广告赚积分",
|
||||
"index.com.themetext": "动态切换主题,默认主题见文档",
|
||||
"index.com.themeGreen": "小黄",
|
||||
"index.com.themeBlue": "蓝色",
|
||||
"index.com.themeRed": "红色",
|
||||
"index.com.themeDefault": "默认",
|
||||
"index.com.themeCustText": "自定",
|
||||
"message.load.text": "加载中",
|
||||
"message.error.text": "操作错误",
|
||||
"message.info.text": "提示信息",
|
||||
"message.warn.text": "警告信息",
|
||||
"message.quest.text": "似乎有问题",
|
||||
"message.success.text": "操作成功",
|
||||
"message.disabled.text": "禁止操作",
|
||||
"message.wait.text": "请稍候..",
|
||||
"index.mine.logOut": "退出登录",
|
||||
"index.mine.help": "帮助中心",
|
||||
"index.mine.settings": "设置与隐私",
|
||||
"index.mine.addressBook": "通讯录",
|
||||
"index.mine.card": "我的名片",
|
||||
"index.mine.information": "个人信息认证",
|
||||
"index.mine.refresh": "刷新缓存",
|
||||
"index.mine.clickRefresh": "点击清理缓存",
|
||||
"index.mine.basic": "基本信息",
|
||||
"index.mine.company": "公司别",
|
||||
"index.mine.department": "部门",
|
||||
"index.mine.post": "岗位",
|
||||
"index.mine.manager": "主管",
|
||||
"index.mine.phone": "手机号",
|
||||
"index.mine.entry": "入职时间",
|
||||
"index.mine.unable": "无法上传照片",
|
||||
"index.mine.face": "扫脸失败",
|
||||
"index.mine.recentPhoto": "个人近照",
|
||||
"userAgreement": "用户服务协议",
|
||||
"privacyPolicy": "隐私政策",
|
||||
"index.mine.cancellation": "注销账号",
|
||||
"ok": "确定",
|
||||
"message.customerService.text": "请拨打客服电话",
|
||||
"message.action.text": "进行注销操作",
|
||||
"index.mine.upload": "点击上传",
|
||||
"index.mine.reUpload": "重新上传",
|
||||
"index.mine.loading": "载入中",
|
||||
"cancel": "取消",
|
||||
"search.hint": "检索您要查找的内容吧～",
|
||||
"search.chat.count": "条相关聊天记录",
|
||||
"index.mine.project": "项目"
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user