upload project
This commit is contained in:
commit
06961cae04
422 changed files with 110626 additions and 0 deletions
438
subpackages/social/search/search.js
Normal file
438
subpackages/social/search/search.js
Normal file
|
|
@ -0,0 +1,438 @@
|
|||
// 搜索用户页面
|
||||
const app = getApp();
|
||||
const friendAPI = require('../../../utils/friend-api.js');
|
||||
|
||||
Page({
|
||||
data: {
|
||||
// 搜索相关
|
||||
searchKeyword: '',
|
||||
searchResults: [],
|
||||
loading: false,
|
||||
hasSearched: false,
|
||||
|
||||
// 搜索类型
|
||||
searchType: 'all', // all, nickname, custom_id, phone
|
||||
searchTypes: [
|
||||
{ value: 'all', label: '全部' },
|
||||
{ value: 'nickname', label: '昵称' },
|
||||
{ value: 'custom_id', label: 'ID' },
|
||||
{ value: 'phone', label: '手机号' }
|
||||
],
|
||||
|
||||
// 分页
|
||||
currentPage: 1,
|
||||
pageSize: 20,
|
||||
hasMore: true,
|
||||
|
||||
// 系统信息
|
||||
statusBarHeight: 0,
|
||||
navBarHeight: 0,
|
||||
scanningUser: false,
|
||||
scanCache: {} // { customId: { timestamp, relationStatus } }
|
||||
},
|
||||
// 扫一扫二维码（识别 FINDME 格式并跳转）
|
||||
scanQRCode() {
|
||||
wx.scanCode({
|
||||
onlyFromCamera: false,
|
||||
success: async (res) => {
|
||||
const scanResult = res.result || '';
|
||||
|
||||
// 解析 FINDME 格式：FINDME:customId
|
||||
if (scanResult.startsWith('FINDME:')) {
|
||||
const customId = scanResult.replace('FINDME:', '').trim();
|
||||
|
||||
// 检查是否是好友关系
|
||||
this.checkFriendRelationFromScan(customId);
|
||||
} else {
|
||||
wx.showToast({
|
||||
title: '无法识别二维码内容',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
// 用户取消不提示错误
|
||||
if (err.errMsg && !err.errMsg.includes('cancel')) {
|
||||
wx.showToast({
|
||||
title: '扫码失败，请重试',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 检查好友关系（从扫码调用）
|
||||
async checkFriendRelationFromScan(customId) {
|
||||
if (this.data.scanningUser) return;
|
||||
this.setData({ scanningUser: true });
|
||||
wx.showLoading({ title: '加载中...', mask: true });
|
||||
|
||||
const friendDetailResponse = await friendAPI.getFriendDetail(customId).catch(() => null);
|
||||
wx.hideLoading();
|
||||
|
||||
const isFriend = friendDetailResponse?.code === 0 && friendDetailResponse?.data;
|
||||
this.setData({ scanningUser: false });
|
||||
this.navigateToUserDetail(customId, isFriend);
|
||||
},
|
||||
|
||||
// 跳转到用户详情页面
|
||||
navigateToUserDetail(customId, isFriend = false) {
|
||||
const url = isFriend
|
||||
? `/subpackages/social/friend-detail/friend-detail?customId=${customId}`
|
||||
: `/subpackages/social/user-preview/user-preview?customId=${customId}`;
|
||||
|
||||
wx.navigateTo({
|
||||
url: url,
|
||||
fail: (err) => {
|
||||
console.error('跳转失败:', err);
|
||||
wx.showToast({ title: '跳转失败，请重试', icon: 'none' });
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
async fetchScannedUserBasicInfo(customId) {
|
||||
try {
|
||||
// 使用精确ID搜索
|
||||
const resp = await friendAPI.searchUsers(customId, 'custom_id', 1, 1);
|
||||
const users = resp?.data?.users || [];
|
||||
const user = users[0];
|
||||
wx.hideLoading();
|
||||
if (!user) {
|
||||
wx.showToast({ title: '用户不存在', icon: 'none' });
|
||||
this.setData({ scanningUser: false });
|
||||
return;
|
||||
}
|
||||
|
||||
// 非好友：跳转预览页面
|
||||
this.setData({ scanningUser: false });
|
||||
wx.navigateTo({
|
||||
url: `/subpackages/social/user-preview/user-preview?customId=${customId}`,
|
||||
fail: (err) => {
|
||||
console.warn('navigateTo user-preview 失败，尝试 redirectTo:', err);
|
||||
wx.redirectTo({ url: `/subpackages/social/user-preview/user-preview?customId=${customId}` });
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
wx.hideLoading();
|
||||
console.error('查询用户失败:', error);
|
||||
wx.showToast({ title: '查询失败', icon: 'none' });
|
||||
this.setData({ scanningUser: false });
|
||||
}
|
||||
},
|
||||
|
||||
handleGenericScan(raw) {
|
||||
wx.showModal({
|
||||
title: '二维码内容',
|
||||
content: raw.length > 200 ? raw.slice(0,200) + '...' : raw,
|
||||
showCancel: false
|
||||
});
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
|
||||
this.initSystemInfo();
|
||||
|
||||
// 如果有传入的搜索关键词，直接搜索
|
||||
if (options.keyword) {
|
||||
this.setData({
|
||||
searchKeyword: decodeURIComponent(options.keyword)
|
||||
});
|
||||
this.performSearch();
|
||||
}
|
||||
},
|
||||
|
||||
// 初始化系统信息
|
||||
initSystemInfo() {
|
||||
try {
|
||||
// 使用新的API替代已弃用的wx.getSystemInfoSync
|
||||
const windowInfo = wx.getWindowInfo();
|
||||
const menuButton = wx.getMenuButtonBoundingClientRect();
|
||||
|
||||
const statusBarHeight = windowInfo.statusBarHeight || 0;
|
||||
// 使用更紧凑的高度：状态栏
|
||||
const navBarHeight = statusBarHeight;
|
||||
|
||||
this.setData({
|
||||
statusBarHeight,
|
||||
navBarHeight
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('获取系统信息失败，使用兜底方案:', error);
|
||||
// 兜底方案
|
||||
try {
|
||||
const systemInfo = wx.getSystemInfoSync();
|
||||
const statusBarHeight = systemInfo.statusBarHeight || 0;
|
||||
const navBarHeight = statusBarHeight + 36;
|
||||
this.setData({
|
||||
statusBarHeight,
|
||||
navBarHeight
|
||||
});
|
||||
} catch (fallbackError) {
|
||||
console.error('兜底方案也失败了:', fallbackError);
|
||||
// 设置默认值
|
||||
this.setData({
|
||||
statusBarHeight: 20,
|
||||
navBarHeight: 56
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 返回上一页
|
||||
// 已移除自定义返回按钮，使用小程序自带返回
|
||||
|
||||
// 搜索输入
|
||||
onSearchInput(e) {
|
||||
this.setData({
|
||||
searchKeyword: e.detail.value
|
||||
});
|
||||
if(!(e.detail.value)){
|
||||
this.clearSearch()
|
||||
}
|
||||
},
|
||||
|
||||
// 搜索确认
|
||||
onSearchConfirm() {
|
||||
this.performSearch();
|
||||
},
|
||||
|
||||
// 清空搜索
|
||||
clearSearch() {
|
||||
this.setData({
|
||||
searchKeyword: '',
|
||||
searchResults: [],
|
||||
hasSearched: false,
|
||||
currentPage: 1,
|
||||
hasMore: true
|
||||
});
|
||||
},
|
||||
|
||||
// 切换搜索类型
|
||||
onSearchTypeChange(e) {
|
||||
const searchType = e.currentTarget.dataset.type;
|
||||
this.setData({
|
||||
searchType
|
||||
});
|
||||
|
||||
if (this.data.searchKeyword) {
|
||||
this.performSearch();
|
||||
}
|
||||
},
|
||||
|
||||
// 执行搜索
|
||||
async performSearch() {
|
||||
const keyword = this.data.searchKeyword.trim();
|
||||
if (!keyword) {
|
||||
wx.showToast({
|
||||
title: '请输入搜索关键词',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 基于搜索类型的输入校验
|
||||
const { searchType } = this.data;
|
||||
if (searchType === 'custom_id') {
|
||||
// ID: 1-20位纯数字
|
||||
if (!/^\d{1,20}$/.test(keyword)) {
|
||||
wx.showToast({
|
||||
title: 'ID需为1-20位纯数字',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
} else if (searchType === 'phone') {
|
||||
// 手机号：11位数字
|
||||
if (!/^\d{11}$/.test(keyword)) {
|
||||
wx.showToast({
|
||||
title: '手机号需为11位数字',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
this.setData({
|
||||
loading: true,
|
||||
currentPage: 1,
|
||||
searchResults: [],
|
||||
hasMore: true
|
||||
});
|
||||
|
||||
try {
|
||||
const response = await friendAPI.searchUsers(
|
||||
keyword,
|
||||
this.data.searchType,
|
||||
1,
|
||||
this.data.pageSize
|
||||
);
|
||||
|
||||
// 根据正确的接口文档处理API响应结构
|
||||
const searchData = response.data || {};
|
||||
const users = searchData.users || [];
|
||||
const total = searchData.total || 0;
|
||||
|
||||
this.setData({
|
||||
searchResults: users,
|
||||
hasSearched: true,
|
||||
hasMore: users.length >= this.data.pageSize && this.data.currentPage * this.data.pageSize < total,
|
||||
loading: false
|
||||
});
|
||||
|
||||
if (users.length === 0) {
|
||||
wx.showToast({
|
||||
title: '未找到相关用户',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('搜索失败:', error);
|
||||
this.setData({
|
||||
loading: false,
|
||||
hasSearched: true
|
||||
});
|
||||
|
||||
wx.showToast({
|
||||
title: error.message || '搜索失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 加载更多
|
||||
async loadMore() {
|
||||
if (!this.data.hasMore || this.data.loading) return;
|
||||
|
||||
this.setData({ loading: true });
|
||||
|
||||
try {
|
||||
const response = await friendAPI.searchUsers(
|
||||
this.data.searchKeyword,
|
||||
this.data.searchType,
|
||||
this.data.currentPage + 1,
|
||||
this.data.pageSize
|
||||
);
|
||||
|
||||
const searchData = response.data || {};
|
||||
const newUsers = searchData.users || [];
|
||||
const total = searchData.total || 0;
|
||||
const newResults = [...this.data.searchResults, ...newUsers];
|
||||
|
||||
this.setData({
|
||||
searchResults: newResults,
|
||||
currentPage: this.data.currentPage + 1,
|
||||
hasMore: newResults.length < total,
|
||||
loading: false
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('加载更多失败:', error);
|
||||
this.setData({ loading: false });
|
||||
}
|
||||
},
|
||||
|
||||
// 添加好友
|
||||
async addFriend(e) {
|
||||
const { customId, nickname } = e.currentTarget.dataset;
|
||||
|
||||
try {
|
||||
// 显示输入框让用户输入验证消息
|
||||
const result = await this.showAddFriendDialog(nickname);
|
||||
if (!result.confirm) return;
|
||||
|
||||
wx.showLoading({ title: '发送中...' });
|
||||
|
||||
// 输入阶段已限制50字，这里仅做去空白
|
||||
const safeMessage = (result.message || '').trim();
|
||||
await friendAPI.addFriend(customId, safeMessage);
|
||||
|
||||
wx.hideLoading();
|
||||
wx.showToast({
|
||||
title: '好友请求已发送',
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
// 更新按钮状态
|
||||
const updatedResults = this.data.searchResults.map(user => {
|
||||
if (user.customId === customId) {
|
||||
return {
|
||||
...user,
|
||||
relationStatus: 'pending',
|
||||
actionText: '等待验证',
|
||||
canAddFriend: false
|
||||
};
|
||||
}
|
||||
return user;
|
||||
});
|
||||
|
||||
this.setData({
|
||||
searchResults: updatedResults
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
wx.hideLoading();
|
||||
console.error('添加好友失败:', error);
|
||||
wx.showToast({
|
||||
title: error.message || '添加好友失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 显示添加好友对话框
|
||||
showAddFriendDialog(nickname) {
|
||||
return new Promise((resolve) => {
|
||||
try {
|
||||
// 默认文案
|
||||
const selfNick = app.globalData?.userInfo?.user?.nickname || '';
|
||||
const base = `我是 ${selfNick}`;
|
||||
this._addDialogResolve = resolve; // 存到实例属性，避免放到 data
|
||||
this.setData({
|
||||
addDialogVisible: true,
|
||||
addDialogNickname: nickname || '',
|
||||
addDialogMessage: base
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('打开添加好友对话框失败', e);
|
||||
resolve({ confirm: false });
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 对话框输入变更（已在组件层 maxlength=50 限制）
|
||||
onAddDialogInput(e) {
|
||||
const value = (e.detail.value || '').slice(0, 50);
|
||||
this.setData({ addDialogMessage: value });
|
||||
},
|
||||
|
||||
// 取消添加
|
||||
onAddDialogCancel() {
|
||||
try { this.setData({ addDialogVisible: false }); } catch (_) {}
|
||||
if (this._addDialogResolve) {
|
||||
this._addDialogResolve({ confirm: false });
|
||||
this._addDialogResolve = null;
|
||||
}
|
||||
},
|
||||
|
||||
// 确认添加
|
||||
onAddDialogConfirm() {
|
||||
const msg = (this.data.addDialogMessage || '').trim();
|
||||
try { this.setData({ addDialogVisible: false }); } catch (_) {}
|
||||
if (this._addDialogResolve) {
|
||||
this._addDialogResolve({ confirm: true, message: msg });
|
||||
this._addDialogResolve = null;
|
||||
}
|
||||
},
|
||||
|
||||
// 发送消息
|
||||
sendMessage(e) {
|
||||
const { customId, nickname } = e.currentTarget.dataset;
|
||||
wx.navigateTo({
|
||||
url: `/pages/message/chat/chat?targetId=${customId}&name=${encodeURIComponent(nickname)}&chatType=0`
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
6
subpackages/social/search/search.json
Normal file
6
subpackages/social/search/search.json
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"navigationStyle": "default",
|
||||
"navigationBarTitleText": "添加好友",
|
||||
"navigationBarBackgroundColor": "#000000",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
149
subpackages/social/search/search.wxml
Normal file
149
subpackages/social/search/search.wxml
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
<!-- 搜索用户页面 -->
|
||||
<view class="search-container">
|
||||
|
||||
<!-- 搜索区域 -->
|
||||
<view class="search-section">
|
||||
<!-- 搜索框 -->
|
||||
<view class="search-box {{searchResults && searchResults.length > 0 ? '' :'search-box-top'}}">
|
||||
<view class="search-input-wrapper" >
|
||||
<input class="search-input"
|
||||
placeholder-class="placeholder-style"
|
||||
placeholder="请输入ID/手机号搜索"
|
||||
value="{{searchKeyword}}"
|
||||
bindinput="onSearchInput"
|
||||
bindconfirm="onSearchConfirm"
|
||||
confirm-type="search"
|
||||
focus="true" />
|
||||
<view class="search-btn" bindtap="onSearchConfirm">
|
||||
<image class="search-btn-text" src="../../../images/map/Search.svg" mode=""/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 搜索结果 -->
|
||||
<scroll-view class="results-container"
|
||||
scroll-y="true"
|
||||
bindscrolltolower="loadMore">
|
||||
|
||||
<!-- 加载中 -->
|
||||
<view class="loading-container" wx:if="{{loading && !hasSearched}}">
|
||||
<view class="loading-spinner"></view>
|
||||
<text class="loading-text">搜索中...</text>
|
||||
</view>
|
||||
|
||||
<!-- 无结果 -->
|
||||
<view class="no-results" wx:if="{{hasSearched && searchResults.length === 0 && !loading}}">
|
||||
<view class="no-results-icon">😔</view>
|
||||
<text class="no-results-title">未找到相关用户</text>
|
||||
<text class="no-results-desc">试试其他关键词或搜索方式</text>
|
||||
</view>
|
||||
|
||||
<!-- 搜索结果列表 -->
|
||||
<view class="results-list" wx:if="{{searchResults.length > 0}}">
|
||||
<view class="result-item"
|
||||
wx:for="{{searchResults}}"
|
||||
wx:key="customId">
|
||||
|
||||
<!-- 用户信息 -->
|
||||
<view class="user-info" bindtap="viewUserDetail" data-custom-id="{{item.customId}}">
|
||||
<!-- 头像 -->
|
||||
<view class="user-avatar">
|
||||
<image wx:if="{{item.avatar}}"
|
||||
src="{{item.avatar}}"
|
||||
class="avatar-image"
|
||||
mode="aspectFill" />
|
||||
<view wx:else class="avatar-placeholder">
|
||||
<text class="avatar-text">{{item.nickname ? item.nickname.charAt(0) : '?'}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 会员标识 -->
|
||||
<view class="member-badge" wx:if="{{item.isMember}}">
|
||||
<text class="member-text">VIP</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 用户详情 -->
|
||||
<view class="user-details">
|
||||
<view class="user-name-row">
|
||||
<text class="user-nickname">{{item.nickname}}</text>
|
||||
<view class="gender-icon" wx:if="{{item.gender !== null && item.gender !== undefined && item.gender !== ''}}">
|
||||
<image wx:if="{{item.gender === 1 || item.gender === '1' || item.gender === 2 || item.gender === '2'}}" class="gender-icon-img" src="{{item.gender === 1 || item.gender === '1' ? '/images/self/male.svg' : '/images/self/fmale.svg'}}" mode="aspectFit" />
|
||||
<text wx:else>？</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="user-meta">
|
||||
<text class="user-id">ID: {{item.customId}}</text>
|
||||
<text class="match-type" wx:if="{{item.matchType}}">{{item.matchType === 'nickname' ? '昵称匹配' : item.matchType === 'custom_id' ? 'ID匹配' : '手机号匹配'}}</text>
|
||||
</view>
|
||||
|
||||
<text class="user-bio" wx:if="{{item.bio}}">{{item.bio}}</text>
|
||||
<text class="status-message" wx:if="{{item.statusMessage}}">{{item.statusMessage}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="action-buttons">
|
||||
<!-- 添加好友按钮 -->
|
||||
<view class="action-btn add-btn {{item.canAddFriend ? 'enabled' : 'disabled'}}"
|
||||
wx:if="{{item.relationStatus === 'can_add'}}"
|
||||
bindtap="addFriend"
|
||||
data-custom-id="{{item.customId}}"
|
||||
data-nickname="{{item.nickname}}">
|
||||
<text class="btn-text">{{item.actionText}}</text>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 等待验证 -->
|
||||
<view class="action-btn pending-btn" wx:if="{{item.relationStatus === 'pending'}}">
|
||||
<text class="btn-text">等待验证</text>
|
||||
</view>
|
||||
|
||||
<!-- 已是好友 -->
|
||||
<view class="action-btn friend-btn" wx:if="{{item.relationStatus === 'friend'}}">
|
||||
<text class="btn-text">已是好友</text>
|
||||
</view>
|
||||
|
||||
<!-- 发送消息按钮 -->
|
||||
<view class="action-btn message-btn"
|
||||
wx:if="{{item.relationStatus === 'friend'}}"
|
||||
bindtap="sendMessage"
|
||||
data-custom-id="{{item.customId}}"
|
||||
data-nickname="{{item.nickname}}">
|
||||
<text class="btn-text">发消息</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多 -->
|
||||
<view class="load-more" wx:if="{{hasMore && searchResults.length > 0}}">
|
||||
<view class="loading-spinner" wx:if="{{loading}}"></view>
|
||||
<text class="load-more-text">{{loading ? '加载中...' : '上拉加载更多'}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 没有更多 -->
|
||||
<view class="no-more" wx:if="{{!hasMore && searchResults.length > 0}}">
|
||||
<text class="no-more-text">没有更多用户了</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 添加好友验证消息对话框 -->
|
||||
<view wx:if="{{addDialogVisible}}" class="add-dialog-mask" catchtouchmove="true">
|
||||
<view class="add-dialog">
|
||||
<view class="add-dialog-title">添加 {{addDialogNickname}} 为好友</view>
|
||||
<textarea class="add-dialog-input"
|
||||
value="{{addDialogMessage}}"
|
||||
placeholder="请输入验证消息（最多50字）"
|
||||
maxlength="50"
|
||||
auto-height="true"
|
||||
bindinput="onAddDialogInput"/>
|
||||
<view class="add-dialog-actions">
|
||||
<button class="add-dialog-btn cancel" bindtap="onAddDialogCancel">取消</button>
|
||||
<button class="add-dialog-btn confirm" bindtap="onAddDialogConfirm">发送</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="add-dialog-safe" style="height: env(safe-area-inset-bottom);"></view>
|
||||
</view>
|
||||
620
subpackages/social/search/search.wxss
Normal file
620
subpackages/social/search/search.wxss
Normal file
|
|
@ -0,0 +1,620 @@
|
|||
/* 搜索用户页面样式 */
|
||||
|
||||
.search-container {
|
||||
height: 100vh;
|
||||
background-color: #000000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 搜索区域 */
|
||||
.search-section {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.search-box-top{
|
||||
margin-top: 350rpx;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
height: 80rpx;
|
||||
padding: 0 28rpx;
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: transform .15s, opacity .2s;
|
||||
max-width: 168rpx;
|
||||
}
|
||||
|
||||
.search-btn-text {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.btn-hover, .search-btn:active {
|
||||
opacity: .85;
|
||||
transform: scale(.96);
|
||||
}
|
||||
|
||||
.search-input-wrapper {
|
||||
/* flex: 1; */
|
||||
width: 654rpx;
|
||||
height: 74rpx;
|
||||
line-height: 74rpx;
|
||||
/* position: relative; */
|
||||
/* background: #f8f9fa; */
|
||||
border-radius: 35rpx;
|
||||
padding: 0 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
border: 1px solid #D9D9D9;
|
||||
/* position: relative; */
|
||||
|
||||
}
|
||||
|
||||
.search-icon-buttom{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.search-icon-buttom:active{
|
||||
background-color: #353535;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.search-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: #999;
|
||||
margin-right: 6rpx;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
font-size: 27rpx;
|
||||
}
|
||||
|
||||
.placeholder-style {
|
||||
color: #B3B3B3;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 结果容器 */
|
||||
.results-container {
|
||||
flex: 1;
|
||||
padding: 0 32rpx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 加载中 */
|
||||
.loading-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120rpx 0;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border: 4rpx solid #f3f3f3;
|
||||
border-top: 4rpx solid #667eea;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 搜索提示 */
|
||||
.search-tips {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 120rpx 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tips-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.tips-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.tips-desc {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
|
||||
.tips-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.tip-item {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* 无结果 */
|
||||
.no-results {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 120rpx 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no-results-icon {
|
||||
font-size: 120rpx;
|
||||
margin-bottom: 32rpx;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.no-results-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.no-results-desc {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 结果列表 */
|
||||
.results-list {
|
||||
padding: 32rpx 0;
|
||||
}
|
||||
|
||||
.result-item {
|
||||
background: white;
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
/* 避免内容撑宽导致容器超出屏幕 */
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 用户信息 */
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* background-color: red; */
|
||||
flex: 1;
|
||||
margin-right: 24rpx;
|
||||
/* 允许在弹性布局中缩小，避免长昵称/签名把容器撑宽 */
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
position: relative;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.avatar-image {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 48rpx;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 48rpx;
|
||||
background: #e0e0e0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
.avatar-text {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
white-space: nowrap;
|
||||
border: 1px red solid;
|
||||
}
|
||||
|
||||
.member-badge {
|
||||
position: absolute;
|
||||
bottom: -4rpx;
|
||||
right: -4rpx;
|
||||
background: linear-gradient(135deg, #ffd700, #ffb300);
|
||||
border-radius: 20rpx;
|
||||
padding: 4rpx 8rpx;
|
||||
}
|
||||
|
||||
.member-text {
|
||||
font-size: 20rpx;
|
||||
/* color: white; */
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.user-details {
|
||||
flex: 1;
|
||||
/* 防止内部文本造成横向溢出 */
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.user-name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8rpx;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.user-nickname {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-right: 16rpx;
|
||||
/* 长名称省略避免溢出 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
}
|
||||
|
||||
.gender-icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gender-icon-img {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
.user-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* gap: 4rpx; */
|
||||
gap: 16rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.user-id {
|
||||
font-size: 24rpx;
|
||||
/* color: #999; */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.match-type {
|
||||
font-size: 24rpx;
|
||||
color: #2196f3;
|
||||
background: #e3f2fd;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 12rpx;
|
||||
/* border: 1px solid red; */
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.user-bio {
|
||||
font-size: 26rpx;
|
||||
/* color: #666; */
|
||||
margin-bottom: 8rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.status-message {
|
||||
font-size: 24rpx;
|
||||
/* color: #999; */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* 操作按钮 */
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
/* padding: 16rpx 32rpx; */
|
||||
line-height: 40px;
|
||||
border-radius: 12rpx;
|
||||
text-align: center;
|
||||
min-width: 120rpx;
|
||||
}
|
||||
|
||||
.add-btn.enabled {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.add-btn.disabled {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
.pending-btn {
|
||||
background: #fff3e0;
|
||||
border: 2rpx solid #ff9800;
|
||||
}
|
||||
|
||||
.friend-btn {
|
||||
background: #e8f5e8;
|
||||
border: 2rpx solid #4caf50;
|
||||
}
|
||||
|
||||
.message-btn {
|
||||
background: #e3f2fd;
|
||||
border: 2rpx solid #2196f3;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.add-btn.enabled .btn-text {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.add-btn.disabled .btn-text {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.pending-btn .btn-text {
|
||||
color: #ff9800;
|
||||
}
|
||||
|
||||
.friend-btn .btn-text {
|
||||
color: #4caf50;
|
||||
}
|
||||
|
||||
.message-btn .btn-text {
|
||||
color: #2196f3;
|
||||
}
|
||||
|
||||
/* 加载更多 */
|
||||
.load-more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 32rpx 0;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.load-more-text {
|
||||
font-size: 28rpx;
|
||||
/* color: #999; */
|
||||
}
|
||||
|
||||
.no-more {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 32rpx 0;
|
||||
}
|
||||
|
||||
.no-more-text {
|
||||
font-size: 28rpx;
|
||||
/* color: #ccc; */
|
||||
}
|
||||
|
||||
/* ================== 暗色主题覆盖（社交-用户搜索） ================== */
|
||||
.search-container .search-input-wrapper {
|
||||
background: black;
|
||||
border: 1px solid white;
|
||||
}
|
||||
|
||||
.search-container .search-input {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.search-container .search-icon {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.search-container .results-list .result-item {
|
||||
background: #1e1e1e;
|
||||
border: 1rpx solid #2a2a2a;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
.search-container .user-nickname {
|
||||
color: #f5f5f5;
|
||||
}
|
||||
|
||||
.search-container .user-id,
|
||||
.search-container .user-bio,
|
||||
.search-container .status-message {
|
||||
color: #b0b0b0;
|
||||
}
|
||||
|
||||
.search-container .avatar-placeholder {
|
||||
background: #303030;
|
||||
}
|
||||
|
||||
.search-container .add-btn.disabled {
|
||||
background: #2a2a2a;
|
||||
}
|
||||
|
||||
.search-container .pending-btn {
|
||||
background: #4a3720;
|
||||
border-color: #ffb347;
|
||||
}
|
||||
|
||||
.search-container .friend-btn {
|
||||
background: #1f3321;
|
||||
border-color: #57c765;
|
||||
}
|
||||
|
||||
.search-container .message-btn {
|
||||
background: #1d3050;
|
||||
border-color: #246bff;
|
||||
}
|
||||
|
||||
.search-container .add-btn.enabled {
|
||||
background: linear-gradient(135deg, #4d7dff, #246bff);
|
||||
box-shadow: 0 4rpx 12rpx rgba(36, 107, 255, 0.35);
|
||||
}
|
||||
|
||||
.search-container .loading-text,
|
||||
.search-container .tips-desc,
|
||||
.search-container .tip-item,
|
||||
.search-container .no-results-desc {
|
||||
color: #9e9e9e;
|
||||
}
|
||||
|
||||
.search-container .tips-title,
|
||||
.search-container .no-results-title {
|
||||
color: #f5f5f5;
|
||||
}
|
||||
|
||||
.search-container .tips-icon,
|
||||
.search-container .no-results-icon {
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.search-container .load-more-text {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.search-container .no-more-text {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
/* ===== 添加好友对话框 ===== */
|
||||
.add-dialog-mask {
|
||||
position: fixed;
|
||||
left: 0; right: 0; top: 0; bottom: 0;
|
||||
background: rgba(0,0,0,0.55);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
padding: 0 32rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.add-dialog {
|
||||
width: 100%;
|
||||
max-width: 640rpx;
|
||||
background: #1e1e1e;
|
||||
border: 1rpx solid #2a2a2a;
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx;
|
||||
box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.45);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.add-dialog-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
/* color: #f5f5f5; */
|
||||
margin-bottom: 16rpx;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.add-dialog-input {
|
||||
width: 100%;
|
||||
min-height: 140rpx;
|
||||
max-height: 360rpx;
|
||||
padding: 20rpx;
|
||||
background: #262626;
|
||||
/* color: #e0e0e0; */
|
||||
border-radius: 16rpx;
|
||||
border: 1rpx solid #2f2f2f;
|
||||
box-sizing: border-box;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.add-dialog-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 16rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.add-dialog-btn {
|
||||
min-width: 160rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 40rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
.add-dialog-btn.cancel {
|
||||
background: #2a2a2a;
|
||||
/* color: #ccc; */
|
||||
}
|
||||
.add-dialog-btn.confirm {
|
||||
background: linear-gradient(135deg, #4d7dff, #246bff);
|
||||
/* color: #fff; */
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue