|
|
@@ -0,0 +1,201 @@
|
|
|
+<template>
|
|
|
+ <el-dialog :title="titleMap[mode]" v-model="visible" :width="800" :close-on-click-modal="false" append-to-body destroy-on-close>
|
|
|
+ <div v-loading="loading">
|
|
|
+ <div class="search-dialog-top">
|
|
|
+ <el-input clearable v-model="searchKey" placeholder="搜索" @keyup.enter="searchForm()">
|
|
|
+ <template #append>
|
|
|
+ <el-button icon="el-icon-search" @click="searchForm"></el-button>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="search-dialog-tab">
|
|
|
+ <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
|
|
|
+ <el-tab-pane label="联系人" name="user"></el-tab-pane>
|
|
|
+ <el-tab-pane label="聊天记录" name="msg"></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ <div class="search-dialog-content">
|
|
|
+ <div class="empty-data" v-if="dataList.length == 0">
|
|
|
+ <img src="https://lf-govern-cdn-tos.bytedcdn.com/obj/life-governance-cdn/life-im-pc/static/image/empty.252a622e.png" />
|
|
|
+ 暂无你想要的内容，请尝试换个内容试试
|
|
|
+ </div>
|
|
|
+ <div class="search-data-body" v-else>
|
|
|
+ <template v-if="activeName == 'user'">
|
|
|
+ <div class="search-user-list">
|
|
|
+ <div class="user-item" v-for="(item,indx) in dataList" :key="indx" @click="checkUser(item)">
|
|
|
+ <div class="icon"><el-image style="width: 40px;height: 40px;" :src="item.user.avatar"></el-image></div>
|
|
|
+ <div class="name">
|
|
|
+ <span v-for="(part, idx) in splitHighlight(item.nickname)" :style="part.highlight ? { color: highlightColor, fontWeight: 'bold' } : {}">
|
|
|
+ {{ part.text }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div class="search-user-list">
|
|
|
+ <div class="user-item" v-for="(item,indx) in dataList" :key="indx" @click="checkUser(item)">
|
|
|
+ <div class="icon"><el-image style="width: 40px;height: 40px;" :src="item.user.avatar"></el-image></div>
|
|
|
+ <div class="name">
|
|
|
+ <div class="infos">{{ item.user.nickname }}</div>
|
|
|
+ <div class="text">
|
|
|
+ <span v-for="(part, idx) in splitHighlight(item.content)" :style="part.highlight ? { color: highlightColor, fontWeight: 'bold' } : {}">
|
|
|
+ {{ part.text }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div class="search-page">
|
|
|
+ <el-pagination background small layout="prev, pager, next" hide-on-single-page="false" @current-change="pageChange" :total="searchData.total" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ isSaveing: false,
|
|
|
+ mode:"add",
|
|
|
+ titleMap:{
|
|
|
+ add:"搜索会话"
|
|
|
+ },
|
|
|
+ visible:false,
|
|
|
+ activeName:"user",
|
|
|
+ searchKey:"",
|
|
|
+ searchData:{
|
|
|
+ page:1,
|
|
|
+ size:10,
|
|
|
+ total:0
|
|
|
+ },
|
|
|
+ dataList:[],
|
|
|
+ highlightColor:"#1c5cfb"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ open(mode = 'add'){
|
|
|
+ this.mode = mode;
|
|
|
+ this.visible = true;
|
|
|
+ return this
|
|
|
+ },
|
|
|
+ pageChange(event){
|
|
|
+ this.searchData.page = event;
|
|
|
+ this.searchForm();
|
|
|
+ },
|
|
|
+ handleClick(event){
|
|
|
+ this.activeName = event;
|
|
|
+ this.dataList = [];
|
|
|
+ this.searchForm();
|
|
|
+ },
|
|
|
+ async checkUser(data){
|
|
|
+ var search = {};
|
|
|
+ search.openid = data.openid;
|
|
|
+ search.service_id = data.service_id;
|
|
|
+ search.poi_id = data.poi_id;
|
|
|
+ var resp = await this.$API.serChat.check.post(search);
|
|
|
+ if (resp.code !== 1) return ;
|
|
|
+ this.dataList = [];
|
|
|
+ this.searchData = {
|
|
|
+ page:1,
|
|
|
+ size:10,
|
|
|
+ total:0
|
|
|
+ }
|
|
|
+ this.visible = false;
|
|
|
+ this.activeName = "user";
|
|
|
+ this.$emit("success",resp.data[0])
|
|
|
+ },
|
|
|
+ async searchForm(){
|
|
|
+ if (!this.searchKey) return ;
|
|
|
+ this.loading = true;
|
|
|
+ var resp = await this.$API.serChat.search.get({"key":this.searchKey,'type':this.activeName,'page':this.searchData.page,'size':this.searchData.size});
|
|
|
+ this.loading = false;
|
|
|
+ if (resp.code !== 1) return ;
|
|
|
+ const respData = resp.data.data;
|
|
|
+ this.dataList = respData;
|
|
|
+ this.searchData.total = resp.data.total;
|
|
|
+ },
|
|
|
+ splitHighlight(name) {
|
|
|
+ if (!this.searchKey.trim()) return [{ text: name, highlight: false }];
|
|
|
+ const escaped = this.searchKey.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
|
|
+ const regex = new RegExp(escaped, 'gi');
|
|
|
+ const parts = [];
|
|
|
+ let lastIndex = 0;
|
|
|
+ let match;
|
|
|
+ while ((match = regex.exec(name)) !== null) {
|
|
|
+ // 匹配前的普通文本
|
|
|
+ if (match.index > lastIndex) {
|
|
|
+ parts.push({
|
|
|
+ text: name.slice(lastIndex, match.index),
|
|
|
+ highlight: false,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // 匹配的关键词（高亮）
|
|
|
+ parts.push({
|
|
|
+ text: match[0],
|
|
|
+ highlight: true,
|
|
|
+ });
|
|
|
+ lastIndex = regex.lastIndex;
|
|
|
+ }
|
|
|
+ // 剩余普通文本
|
|
|
+ if (lastIndex < name.length) {
|
|
|
+ parts.push({
|
|
|
+ text: name.slice(lastIndex),
|
|
|
+ highlight: false,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return parts;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.search-dialog-tab{
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+.search-user-list {
|
|
|
+ .user-item{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-top: 10px;
|
|
|
+ padding: 5px;
|
|
|
+ border-radius: 5px;
|
|
|
+ &:hover{
|
|
|
+ background-color: #f5fdff;
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ font-size: 12px;
|
|
|
+ margin-top: 5px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.search-dialog-content{
|
|
|
+ .search-data-body{
|
|
|
+ height: 410px;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+ .search-page{
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.empty-data{
|
|
|
+ display: flex;width: 100%;text-align: center;justify-content: center;font-size: 14px;align-items: center;
|
|
|
+ height: 410px;
|
|
|
+ color: #95989d;
|
|
|
+ flex-direction: column;
|
|
|
+ img {
|
|
|
+ width: 240px;
|
|
|
+ height: 240px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
Zory