quality-resources.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924
  1. <template>
  2. <view class="quality-resources">
  3. <view class="status-bar-placeholder" :style="{height: statusBarHeight + 'px', backgroundColor: '#FFF9F9'}"></view>
  4. <!-- 顶部导航栏 -->
  5. <view class="header">
  6. <view class="back-icon" @click="handleBack"></view>
  7. <text class="header-title">优质资源</text>
  8. <view class="filter-icon" @click="handleFilter"></view>
  9. </view>
  10. <!-- 搜索栏 -->
  11. <view class="search-bar">
  12. <view class="search-input-wrapper">
  13. <view class="search-icon-small"></view>
  14. <input type="text" class="search-input" placeholder="请输入搜索关键词" placeholder-style="color: #999;" v-model="searchKeyword" @input="handleSearch" />
  15. </view>
  16. </view>
  17. <!-- 资源列表 -->
  18. <scroll-view scroll-y class="content" @scrolltolower="loadMore" :scroll-with-animation="true">
  19. <view v-if="loading" class="loading-wrapper">
  20. <text class="loading-text">加载中...</text>
  21. </view>
  22. <view v-else-if="resources.length === 0" class="empty-wrapper">
  23. <text class="empty-text">暂无优质资源</text>
  24. </view>
  25. <view class="resource-item" v-for="(resource, index) in resources" :key="getResourceKey(resource, index)" @click="handleResourceClick(index)">
  26. <view class="resource-header">
  27. <image
  28. :src="getAvatarUrl(resource) || '/static/default-avatar.svg'"
  29. mode="aspectFill"
  30. class="avatar"
  31. @error="handleImageError(index)"
  32. ></image>
  33. <view class="resource-info">
  34. <view class="name-gender">
  35. <text class="name">{{ resource.name }}</text>
  36. <text class="gender">{{ resource.gender === 1 ? '男' : '女' }}</text>
  37. </view>
  38. <view class="status-tag-wrapper">
  39. <text class="status-tag register-tag registered">已注册</text>
  40. <text class="status-tag match-tag" :class="{ 'matched': getIsMatch(resource) === 1, 'unmatched': getIsMatch(resource) === 0 || !getIsMatch(resource) }">
  41. {{ getIsMatch(resource) === 1 ? '已匹配' : '未匹配' }}
  42. </text>
  43. </view>
  44. </view>
  45. </view>
  46. <view class="resource-details">
  47. <view class="labels" v-if="resource.tags && resource.tags.length > 0">
  48. <text class="label" v-for="(tag, tagIndex) in resource.tags" :key="tagIndex">{{ tag }}</text>
  49. </view>
  50. <view class="requirement-box">
  51. <text class="requirement-label">择偶要求:</text>
  52. <text class="requirement-content">{{ getMateSelectionCriteria(resource) || '暂无' }}</text>
  53. </view>
  54. <view class="contact-box">
  55. <text class="contact-label">联系方式:</text>
  56. <text class="contact-number">{{ getMaskedPhone(resource.phone) || '暂无' }}</text>
  57. <text class="copy-btn" @click.stop="handleCopy(resource.phone)">复制</text>
  58. </view>
  59. <view class="action-buttons">
  60. <view class="action-btn add-resource-btn" @click.stop="handleAddToMyResources(index)">添加到我的资源</view>
  61. <view class="action-btn chat-btn" @click.stop="handleChat(resource)">牵线聊聊</view>
  62. </view>
  63. </view>
  64. </view>
  65. <view v-if="hasMore && !loading" class="load-more-wrapper">
  66. <text class="load-more-text">上拉加载更多</text>
  67. </view>
  68. <view v-if="!hasMore && resources.length > 0" class="no-more-wrapper">
  69. <text class="no-more-text">没有更多数据了</text>
  70. </view>
  71. </scroll-view>
  72. </view>
  73. </template>
  74. <script>
  75. export default {
  76. name: 'quality-resources',
  77. data() {
  78. return {
  79. statusBarHeight: 0,
  80. resources: [],
  81. searchKeyword: '',
  82. pageNum: 1,
  83. pageSize: 10,
  84. loading: false,
  85. hasMore: true,
  86. currentUserId: null // 当前登录用户的用户ID
  87. }
  88. },
  89. onLoad() {
  90. // 获取当前登录用户的ID
  91. const userId = uni.getStorageSync('userId')
  92. if (userId) {
  93. const rawUserId = parseInt(userId)
  94. if (!isNaN(rawUserId) && rawUserId > 0) {
  95. this.currentUserId = rawUserId
  96. }
  97. }
  98. // 获取状态栏高度
  99. const systemInfo = uni.getSystemInfoSync()
  100. this.statusBarHeight = systemInfo.statusBarHeight
  101. this.loadResources()
  102. },
  103. methods: {
  104. // 返回上一页
  105. handleBack() {
  106. uni.navigateBack()
  107. },
  108. // 筛选
  109. handleFilter() {
  110. // 实现筛选功能
  111. },
  112. // 搜索
  113. handleSearch() {
  114. this.pageNum = 1
  115. this.resources = []
  116. this.hasMore = true
  117. this.loadResources()
  118. },
  119. // 加载资源列表
  120. async loadResources() {
  121. if (this.loading) return
  122. try {
  123. this.loading = true
  124. const baseUrl = process.env.NODE_ENV === 'development'
  125. ? 'https://api.zhongruanke.cn/api' // 开发环境 - 通过网关
  126. : 'https://your-domain.com/api' // 生产环境
  127. // 构建请求参数
  128. const requestData = {
  129. tagName: '优质资源',
  130. keyword: this.searchKeyword || '',
  131. pageNum: this.pageNum,
  132. pageSize: this.pageSize
  133. }
  134. // 如果已登录,传递currentUserId,用于排除该红娘已拥有的资源
  135. if (this.currentUserId) {
  136. requestData.currentUserId = this.currentUserId
  137. }
  138. const [error, res] = await uni.request({
  139. url: `${baseUrl}/my-resource/list-by-tag`,
  140. method: 'GET',
  141. data: requestData,
  142. timeout: 10000
  143. })
  144. if (error) {
  145. uni.showToast({
  146. title: '加载失败',
  147. icon: 'none'
  148. })
  149. return
  150. }
  151. if (res.statusCode === 200 && res.data && res.data.code === 200) {
  152. const pageData = res.data.data
  153. if (pageData && pageData.records) {
  154. // 调试:打印第一条数据的详细信息
  155. if (pageData.records.length > 0) {
  156. const firstRecord = pageData.records[0]
  157. }
  158. if (this.pageNum === 1) {
  159. this.resources = pageData.records
  160. } else {
  161. this.resources = this.resources.concat(pageData.records)
  162. }
  163. // 判断是否还有更多数据
  164. this.hasMore = pageData.records && pageData.records.length >= this.pageSize
  165. }
  166. } else {
  167. uni.showToast({
  168. title: res.data.message || '加载失败',
  169. icon: 'none'
  170. })
  171. }
  172. } catch (e) {
  173. uni.showToast({
  174. title: '加载异常',
  175. icon: 'none'
  176. })
  177. } finally {
  178. this.loading = false
  179. }
  180. },
  181. // 加载更多
  182. loadMore() {
  183. if (this.hasMore && !this.loading) {
  184. this.pageNum++
  185. this.loadResources()
  186. }
  187. },
  188. // 图片加载错误处理
  189. handleImageError(index) {
  190. if (this.resources[index]) {
  191. // 设置头像为空,让CSS默认背景显示
  192. // 支持下划线和驼峰两种格式
  193. this.resources[index].avatarUrl = ''
  194. this.resources[index].avatar_url = ''
  195. this.resources[index].avatar = ''
  196. }
  197. },
  198. // 复制联系方式
  199. handleCopy(contact) {
  200. if (!contact) {
  201. uni.showToast({
  202. title: '联系方式为空',
  203. icon: 'none'
  204. })
  205. return
  206. }
  207. uni.setClipboardData({
  208. data: contact,
  209. success: () => {
  210. uni.showToast({
  211. title: '复制成功',
  212. icon: 'success'
  213. })
  214. }
  215. })
  216. },
  217. // 牵线聊聊
  218. handleChat(resource) {
  219. // 验证 resource 对象是否存在
  220. if (!resource) {
  221. uni.showToast({
  222. title: '资源信息为空',
  223. icon: 'none'
  224. })
  225. return
  226. }
  227. // 检查用户是否已注册(只有已注册用户才能聊天)
  228. // 支持下划线和驼峰两种格式
  229. const isUser = resource.isUser !== undefined ? resource.isUser :
  230. (resource.is_user !== undefined ? resource.is_user : 0)
  231. if (isUser !== 1 && isUser !== '1') {
  232. uni.showToast({
  233. title: '该用户尚未注册,无法聊天',
  234. icon: 'none',
  235. duration: 3000
  236. })
  237. return
  238. }
  239. // 尝试多种方式获取用户ID
  240. let targetUserId = null
  241. // 方式1: 使用 userId 字段(驼峰格式)
  242. if (resource.userId !== null && resource.userId !== undefined && resource.userId !== '') {
  243. targetUserId = String(resource.userId)
  244. }
  245. // 方式2: 使用 user_id 字段(下划线格式)
  246. else if (resource.user_id !== null && resource.user_id !== undefined && resource.user_id !== '') {
  247. targetUserId = String(resource.user_id)
  248. }
  249. // 方式3: 使用 id 字段
  250. else if (resource.id !== null && resource.id !== undefined && resource.id !== '') {
  251. targetUserId = String(resource.id)
  252. }
  253. // 如果仍然没有获取到用户ID
  254. if (!targetUserId || targetUserId === 'null' || targetUserId === 'undefined' || targetUserId === '') {
  255. uni.showToast({
  256. title: '无法获取用户ID,请刷新重试',
  257. icon: 'none',
  258. duration: 3000
  259. })
  260. return
  261. }
  262. // 获取其他必要信息(支持下划线和驼峰格式)
  263. const targetUserName = resource.name || '用户'
  264. const targetUserAvatar = resource.avatarUrl || resource.avatar_url || resource.avatar || '/static/default-avatar.svg'
  265. // 跳转到聊天页面
  266. // 注意:fromMatchmaker=1 表示来自红娘工作台,会跳过消息限制和审核
  267. uni.navigateTo({
  268. url: `/pages/message/chat?targetUserId=${targetUserId}&targetUserName=${encodeURIComponent(targetUserName)}&targetUserAvatar=${encodeURIComponent(targetUserAvatar)}&fromMatchmaker=1`,
  269. success: () => {
  270. },
  271. fail: (err) => {
  272. uni.showToast({
  273. title: '跳转失败,请重试',
  274. icon: 'none'
  275. })
  276. }
  277. })
  278. },
  279. // 获取资源项的key(用于v-for)
  280. getResourceKey(resource, index) {
  281. if (!resource) return `resource-${index}`
  282. // 支持下划线和驼峰两种格式
  283. const resourceId = resource.resourceId || resource.resource_id
  284. if (resourceId !== null && resourceId !== undefined && resourceId !== '') {
  285. return `resource-${resourceId}`
  286. }
  287. return `resource-${index}`
  288. },
  289. // 点击资源项
  290. handleResourceClick(index) {
  291. // 检查index是否有效
  292. if (index === undefined || index === null || index < 0 || index >= this.resources.length) {
  293. uni.showToast({
  294. title: '资源索引无效',
  295. icon: 'none'
  296. })
  297. return
  298. }
  299. // 从数组中获取resource对象
  300. const resource = this.resources[index]
  301. if (!resource) {
  302. uni.showToast({
  303. title: '资源信息为空',
  304. icon: 'none'
  305. })
  306. return
  307. }
  308. // 支持下划线和驼峰两种格式
  309. const resourceId = resource.resourceId || resource.resource_id
  310. const isUser = resource.isUser !== undefined ? resource.isUser :
  311. (resource.is_user !== undefined ? resource.is_user : 0)
  312. // 检查resourceId是否有效
  313. if (!resourceId || resourceId === null || resourceId === undefined || resourceId === '') {
  314. uni.showToast({
  315. title: '资源ID无效,无法查看详情',
  316. icon: 'none'
  317. })
  318. return
  319. }
  320. // 判断是否为已注册用户
  321. if (isUser === 1 || isUser === '1') {
  322. uni.navigateTo({
  323. url: `/pages/matchmaker-workbench/client-detail?resourceId=${resourceId}&fromQualityResources=1`,
  324. success: () => {
  325. },
  326. fail: (err) => {
  327. uni.showToast({
  328. title: '跳转失败,请重试',
  329. icon: 'none'
  330. })
  331. }
  332. })
  333. } else {
  334. // 未注册,提示用户(虽然后端已经过滤了,但为了容错仍然保留)
  335. uni.showToast({
  336. title: '该用户还未注册用户端',
  337. icon: 'none',
  338. duration: 2000
  339. })
  340. }
  341. },
  342. // 添加到我的资源
  343. async handleAddToMyResources(index) {
  344. // 检查index是否有效
  345. if (index === undefined || index === null || index < 0 || index >= this.resources.length) {
  346. uni.showToast({
  347. title: '资源索引无效',
  348. icon: 'none'
  349. })
  350. return
  351. }
  352. // 从数组中获取resource对象
  353. const resource = this.resources[index]
  354. if (!resource) {
  355. uni.showToast({
  356. title: '资源信息为空',
  357. icon: 'none'
  358. })
  359. return
  360. }
  361. // 检查是否已登录
  362. if (!this.currentUserId) {
  363. uni.showToast({
  364. title: '请先登录',
  365. icon: 'none'
  366. })
  367. return
  368. }
  369. try {
  370. uni.showLoading({
  371. title: '添加中...'
  372. })
  373. const baseUrl = process.env.NODE_ENV === 'development'
  374. ? 'https://api.zhongruanke.cn/api' // 开发环境 - 通过网关
  375. : 'https://api.zhongruanke.cn/api' // 生产环境
  376. // 构建要添加的资源数据(复制原资源的所有信息,但使用当前红娘的matchmaker_id)
  377. const resourceData = {
  378. name: resource.name,
  379. age: resource.age,
  380. gender: resource.gender,
  381. constellation: resource.constellation,
  382. height: resource.height,
  383. weight: resource.weight,
  384. marrStatus: resource.marrStatus || resource.marr_status,
  385. diploma: resource.diploma,
  386. income: resource.income,
  387. address: resource.address,
  388. domicile: resource.domicile,
  389. occupation: resource.occupation,
  390. house: resource.house,
  391. phone: resource.phone,
  392. backupPhone: resource.backupPhone || resource.backup_phone,
  393. car: resource.car,
  394. mateSelectionCriteria: resource.mateSelectionCriteria || resource.mate_selection_criteria,
  395. isUser: resource.isUser || resource.is_user || 1,
  396. userId: resource.userId || resource.user_id
  397. }
  398. // 获取标签ID列表
  399. let tagIds = []
  400. // 方法1: 如果resource有resourceId,直接根据resourceId获取标签ID
  401. const resourceId = resource.resourceId || resource.resource_id
  402. if (resourceId) {
  403. try {
  404. const [tagError, tagRes] = await uni.request({
  405. url: `${baseUrl}/my-resource/tag-ids/${resourceId}`,
  406. method: 'GET'
  407. })
  408. if (!tagError && tagRes.statusCode === 200 && tagRes.data && tagRes.data.code === 200) {
  409. tagIds = tagRes.data.data || []
  410. }
  411. } catch (e) {
  412. }
  413. }
  414. // 方法2: 如果方法1失败或没有resourceId,根据标签名称查询标签ID
  415. if (tagIds.length === 0 && resource.tags && resource.tags.length > 0) {
  416. try {
  417. // 获取所有标签列表
  418. const [tagListError, tagListRes] = await uni.request({
  419. url: `${baseUrl}/tag/list`,
  420. method: 'GET'
  421. })
  422. if (!tagListError && tagListRes.statusCode === 200 && tagListRes.data && tagListRes.data.code === 200) {
  423. const allTags = tagListRes.data.data || []
  424. // 根据标签名称匹配标签ID
  425. for (const tagName of resource.tags) {
  426. const matchedTag = allTags.find(tag => {
  427. const tagNameField = tag.name || tag.tag_name || tag.tagName
  428. return tagNameField === tagName
  429. })
  430. if (matchedTag) {
  431. const tagId = matchedTag.id || matchedTag.tag_id
  432. if (tagId && !tagIds.includes(tagId)) {
  433. tagIds.push(tagId)
  434. }
  435. }
  436. }
  437. }
  438. } catch (e) {
  439. }
  440. }
  441. // 确保tagIds是整数数组
  442. tagIds = tagIds.map(id => parseInt(id)).filter(id => !isNaN(id) && id > 0)
  443. // 调用后端API添加资源
  444. const url = `${baseUrl}/my-resource/add?currentUserId=${this.currentUserId}`
  445. const [error, res] = await uni.request({
  446. url: url,
  447. method: 'POST',
  448. data: {
  449. ...resourceData,
  450. tagIds: tagIds
  451. },
  452. header: {
  453. 'Content-Type': 'application/json'
  454. }
  455. })
  456. uni.hideLoading()
  457. if (error) {
  458. uni.showToast({
  459. title: '添加失败,请重试',
  460. icon: 'none'
  461. })
  462. return
  463. }
  464. if (res.statusCode === 200 && res.data && res.data.code === 200) {
  465. uni.showToast({
  466. title: '添加成功',
  467. icon: 'success'
  468. })
  469. // 发送刷新事件,通知我的资源页面刷新列表
  470. uni.$emit('refreshResourceList')
  471. } else {
  472. uni.showToast({
  473. title: res.data.message || '添加失败',
  474. icon: 'none',
  475. duration: 2000
  476. })
  477. }
  478. } catch (e) {
  479. uni.hideLoading()
  480. uni.showToast({
  481. title: '添加异常,请稍后重试',
  482. icon: 'none'
  483. })
  484. }
  485. },
  486. // 获取头像URL(支持驼峰和下划线格式)
  487. getAvatarUrl(resource) {
  488. if (!resource) return ''
  489. // 优先使用 avatarUrl(驼峰),如果没有则使用 avatar_url(下划线),最后使用 avatar
  490. return resource.avatarUrl || resource.avatar_url || resource.avatar || ''
  491. },
  492. // 获取匹配状态(支持驼峰和下划线格式)
  493. getIsMatch(resource) {
  494. if (!resource) return 0
  495. // 支持 isMatch(驼峰)和 is_match(下划线)两种格式
  496. return resource.isMatch !== undefined ? resource.isMatch :
  497. (resource.is_match !== undefined ? resource.is_match : 0)
  498. },
  499. // 获取择偶要求(支持驼峰和下划线格式)
  500. getMateSelectionCriteria(resource) {
  501. if (!resource) {
  502. return ''
  503. }
  504. // 支持 mateSelectionCriteria(驼峰)和 mate_selection_criteria(下划线)两种格式
  505. let criteria = resource.mateSelectionCriteria || resource.mate_selection_criteria || ''
  506. // 如果为空,直接返回
  507. if (!criteria || criteria.trim() === '') {
  508. return ''
  509. }
  510. // 去除首尾空格
  511. criteria = criteria.trim()
  512. // 如果获取到的是电话号码格式(11位数字或脱敏后的格式),则返回空字符串,让模板显示"暂无"
  513. // 检查是否是纯数字(11位)或包含****的脱敏格式
  514. const phonePattern = /^(\d{3}\*{4}\d{4}|\d{11})$/
  515. if (phonePattern.test(criteria)) {
  516. return ''
  517. }
  518. // 如果择偶要求等于电话号码(未脱敏),也返回空
  519. if (criteria === resource.phone || criteria === (resource.phone || '').replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')) {
  520. return ''
  521. }
  522. return criteria
  523. },
  524. // 获取脱敏手机号
  525. getMaskedPhone(phone) {
  526. if (!phone) return ''
  527. // 手机号脱敏:显示前3位和后4位,中间用****代替
  528. return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
  529. }
  530. }
  531. }
  532. </script>
  533. <style lang="scss" scoped>
  534. .quality-resources {
  535. min-height: 100vh;
  536. background: #FFF9F9;
  537. display: flex;
  538. flex-direction: column;
  539. }
  540. /* 顶部导航栏 */
  541. .header {
  542. display: flex;
  543. align-items: center;
  544. justify-content: space-between;
  545. padding: 25rpx 30rpx;
  546. background: #FFF9F9;
  547. border-bottom: 1rpx solid #F0F0F0;
  548. .back-icon {
  549. width: 44rpx;
  550. height: 44rpx;
  551. background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>');
  552. background-size: contain;
  553. background-repeat: no-repeat;
  554. background-position: center;
  555. }
  556. .header-title {
  557. font-size: 38rpx;
  558. font-weight: bold;
  559. color: #9C27B0;
  560. }
  561. .filter-icon {
  562. width: 44rpx;
  563. height: 44rpx;
  564. background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/></svg>');
  565. background-size: contain;
  566. background-repeat: no-repeat;
  567. background-position: center;
  568. }
  569. }
  570. /* 搜索栏 */
  571. .search-bar {
  572. padding: 20rpx 30rpx;
  573. background: #FFF9F9;
  574. .search-input-wrapper {
  575. display: flex;
  576. align-items: center;
  577. background: #FFFFFF;
  578. border-radius: 25rpx;
  579. padding: 15rpx 20rpx;
  580. box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  581. .search-icon-small {
  582. width: 32rpx;
  583. height: 32rpx;
  584. background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>');
  585. background-size: contain;
  586. background-repeat: no-repeat;
  587. background-position: center;
  588. margin-right: 15rpx;
  589. }
  590. .search-input {
  591. flex: 1;
  592. font-size: 28rpx;
  593. color: #333;
  594. placeholder-color: #999;
  595. }
  596. }
  597. }
  598. /* 内容区域 */
  599. .content {
  600. flex: 1;
  601. padding: 0 30rpx 20rpx;
  602. }
  603. /* 资源列表项 */
  604. .resource-item {
  605. background: #FFFFFF;
  606. border-radius: 20rpx;
  607. padding: 25rpx;
  608. margin-bottom: 20rpx;
  609. box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  610. }
  611. .resource-header {
  612. display: flex;
  613. align-items: flex-start;
  614. margin-bottom: 20rpx;
  615. .avatar {
  616. width: 100rpx;
  617. height: 100rpx;
  618. border-radius: 50%;
  619. background: #F0F0F0;
  620. margin-right: 20rpx;
  621. flex-shrink: 0;
  622. }
  623. .resource-info {
  624. flex: 1;
  625. .name-gender {
  626. display: flex;
  627. align-items: center;
  628. gap: 15rpx;
  629. margin-bottom: 10rpx;
  630. .name {
  631. font-size: 32rpx;
  632. font-weight: bold;
  633. color: #333;
  634. }
  635. .gender {
  636. font-size: 24rpx;
  637. color: #999;
  638. padding: 4rpx 12rpx;
  639. background: #F5F5F5;
  640. border-radius: 12rpx;
  641. }
  642. }
  643. .status-tag-wrapper {
  644. display: flex;
  645. align-items: center;
  646. gap: 10rpx;
  647. margin-bottom: 10rpx;
  648. .status-tag {
  649. font-size: 22rpx;
  650. padding: 6rpx 14rpx;
  651. border-radius: 12rpx;
  652. font-weight: 500;
  653. &.register-tag {
  654. &.registered {
  655. color: #4CAF50;
  656. background: #E8F5E9;
  657. border: 1rpx solid #C8E6C9;
  658. }
  659. }
  660. &.match-tag {
  661. &.matched {
  662. color: #2196F3;
  663. background: #E3F2FD;
  664. border: 1rpx solid #BBDEFB;
  665. }
  666. &.unmatched {
  667. color: #FF9800;
  668. background: #FFF3E0;
  669. border: 1rpx solid #FFE0B2;
  670. }
  671. }
  672. }
  673. }
  674. }
  675. }
  676. .resource-details {
  677. .labels {
  678. display: flex;
  679. flex-wrap: wrap;
  680. gap: 10rpx;
  681. margin-bottom: 15rpx;
  682. .label {
  683. display: inline-block;
  684. padding: 6rpx 14rpx;
  685. background: #F3E5F5;
  686. color: #9C27B0;
  687. border-radius: 15rpx;
  688. font-size: 22rpx;
  689. font-weight: 500;
  690. }
  691. }
  692. .requirement-box {
  693. background: #F3E5F5;
  694. border-radius: 12rpx;
  695. padding: 16rpx 20rpx;
  696. margin-bottom: 15rpx;
  697. display: flex;
  698. align-items: center;
  699. flex-wrap: wrap;
  700. .requirement-label {
  701. font-size: 28rpx;
  702. color: #7B1FA2;
  703. font-weight: 500;
  704. margin-right: 8rpx;
  705. white-space: nowrap;
  706. }
  707. .requirement-content {
  708. font-size: 28rpx;
  709. color: #7B1FA2;
  710. font-weight: 400;
  711. }
  712. }
  713. .contact-box {
  714. margin-bottom: 20rpx;
  715. display: flex;
  716. align-items: center;
  717. flex-wrap: wrap;
  718. .contact-label {
  719. font-size: 26rpx;
  720. color: #333;
  721. font-weight: 500;
  722. margin-right: 10rpx;
  723. white-space: nowrap;
  724. }
  725. .contact-number {
  726. flex: 1;
  727. font-size: 26rpx;
  728. color: #333;
  729. font-weight: 400;
  730. min-width: 0;
  731. }
  732. .copy-btn {
  733. font-size: 24rpx;
  734. color: #9C27B0;
  735. font-weight: 500;
  736. margin-left: 15rpx;
  737. white-space: nowrap;
  738. cursor: pointer;
  739. }
  740. }
  741. .action-buttons {
  742. display: flex;
  743. justify-content: flex-end;
  744. align-items: center;
  745. gap: 15rpx;
  746. .action-btn {
  747. padding: 14rpx 30rpx;
  748. border-radius: 25rpx;
  749. font-size: 26rpx;
  750. font-weight: 500;
  751. text-align: center;
  752. &.add-resource-btn {
  753. background: #FF9800;
  754. color: #FFFFFF;
  755. }
  756. &.chat-btn {
  757. background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%);
  758. color: #FFFFFF;
  759. }
  760. }
  761. }
  762. }
  763. .loading-wrapper,
  764. .empty-wrapper,
  765. .load-more-wrapper,
  766. .no-more-wrapper {
  767. display: flex;
  768. justify-content: center;
  769. align-items: center;
  770. padding: 40rpx 0;
  771. .loading-text,
  772. .empty-text,
  773. .load-more-text,
  774. .no-more-text {
  775. font-size: 26rpx;
  776. color: #999;
  777. }
  778. }
  779. .empty-text {
  780. color: #666;
  781. }
  782. .no-more-text {
  783. color: #999;
  784. }
  785. </style>