resource-input.vue 46 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498
  1. <template>
  2. <view class="resource-input-page">
  3. <!-- 顶部导航栏 -->
  4. <view class="header">
  5. <view class="header-left" @click="goBack">
  6. <text class="back-icon">←</text>
  7. </view>
  8. <text class="header-title">{{ isEditMode ? '编辑信息' : '信息录入' }}</text>
  9. <view class="header-right">
  10. <text class="more-icon">⋯</text>
  11. </view>
  12. </view>
  13. <scroll-view scroll-y class="content">
  14. <view class="form-container">
  15. <!-- 基本信息 -->
  16. <view class="form-section" :class="{ 'active': activeSection === 'basic' }">
  17. <view class="section-title">基本信息</view>
  18. <view class="form-item">
  19. <text class="form-label">姓名<text class="required">*</text></text>
  20. <input type="text" class="form-input" placeholder="请输入姓名" v-model="formData.name" />
  21. </view>
  22. <view class="form-item">
  23. <text class="form-label">年龄<text class="required">*</text></text>
  24. <input type="number" class="form-input" placeholder="请输入年龄" v-model="formData.age" />
  25. </view>
  26. <view class="form-item">
  27. <text class="form-label">性别<text class="required">*</text></text>
  28. <picker mode="selector" :range="genderOptions" :value="genderIndex" @change="onGenderChange">
  29. <view class="form-input picker-input">
  30. <text v-if="formData.gender">{{ genderOptions[genderIndex] }}</text>
  31. <text v-else class="placeholder">请选择性别</text>
  32. <text class="picker-arrow">▼</text>
  33. </view>
  34. </picker>
  35. </view>
  36. <view class="form-item">
  37. <text class="form-label">星座</text>
  38. <picker mode="selector" :range="constellationOptions" :value="constellationIndex" @change="onConstellationChange">
  39. <view class="form-input picker-input">
  40. <text v-if="formData.constellation">{{ constellationOptions[constellationIndex] }}</text>
  41. <text v-else class="placeholder">请选择星座</text>
  42. <text class="picker-arrow">▼</text>
  43. </view>
  44. </picker>
  45. </view>
  46. </view>
  47. <!-- 身体状况 -->
  48. <view class="form-section" :class="{ 'active': activeSection === 'physical' }">
  49. <view class="section-title">身体状况</view>
  50. <view class="form-item">
  51. <text class="form-label">身高 (cm)<text class="required">*</text></text>
  52. <input type="number" class="form-input" placeholder="请输入身高" v-model="formData.height" />
  53. </view>
  54. <view class="form-item">
  55. <text class="form-label">体重 (kg)<text class="required">*</text></text>
  56. <input type="number" class="form-input" placeholder="请输入体重" v-model="formData.weight" />
  57. </view>
  58. </view>
  59. <!-- 社会属性 -->
  60. <view class="form-section" :class="{ 'active': activeSection === 'social' }">
  61. <view class="section-title">社会属性</view>
  62. <view class="form-item">
  63. <text class="form-label">婚况<text class="required">*</text></text>
  64. <picker mode="selector" :range="maritalStatusOptions" :value="maritalStatusIndex >= 0 ? maritalStatusIndex : 0" @change="onMaritalStatusChange">
  65. <view class="form-input picker-input">
  66. <text v-if="maritalStatusIndex >= 0 && maritalStatusIndex < maritalStatusOptions.length">{{ maritalStatusOptions[maritalStatusIndex] }}</text>
  67. <text v-else class="placeholder">请选择婚况</text>
  68. <text class="picker-arrow">▼</text>
  69. </view>
  70. </picker>
  71. </view>
  72. <view class="form-item">
  73. <text class="form-label">学历</text>
  74. <picker mode="selector" :range="diplomaOptions" :value="diplomaIndex" @change="onDiplomaChange">
  75. <view class="form-input picker-input">
  76. <text v-if="formData.diploma">{{ diplomaOptions[diplomaIndex] }}</text>
  77. <text v-else class="placeholder">请选择学历</text>
  78. <text class="picker-arrow">▼</text>
  79. </view>
  80. </picker>
  81. </view>
  82. <view class="form-item">
  83. <text class="form-label">年收入 (万元)</text>
  84. <input type="text" class="form-input" placeholder="请输入年收入" v-model="formData.income" />
  85. </view>
  86. <view class="form-item">
  87. <text class="form-label">住址<text class="required">*</text></text>
  88. <!-- 省市区三级联动选择器 -->
  89. <picker mode="multiSelector" :range="addressMultiArray" :value="addressMultiIndex" @columnchange="onAddressColumnChange" @change="onAddressChange">
  90. <view class="form-input picker-input">
  91. <text v-if="addressDisplayText" class="picker-text">{{ addressDisplayText }}</text>
  92. <text v-else class="placeholder">请选择省市区</text>
  93. <text class="picker-arrow">▼</text>
  94. </view>
  95. </picker>
  96. <!-- 详细地址输入框 -->
  97. <input type="text" class="form-input address-detail-input" placeholder="请输入详细地址(街道、门牌号等)" v-model="formData.addressDetail" style="margin-top: 15rpx;" />
  98. </view>
  99. <view class="form-item">
  100. <text class="form-label">户籍地</text>
  101. <!-- 省市区三级联动选择器 -->
  102. <picker mode="multiSelector" :range="domicileMultiArray" :value="domicileMultiIndex" @columnchange="onDomicileColumnChange" @change="onDomicileChange">
  103. <view class="form-input picker-input">
  104. <text v-if="domicileDisplayText" class="picker-text">{{ domicileDisplayText }}</text>
  105. <text v-else class="placeholder">请选择省市区</text>
  106. <text class="picker-arrow">▼</text>
  107. </view>
  108. </picker>
  109. <!-- 详细地址输入框 -->
  110. <input type="text" class="form-input address-detail-input" placeholder="请输入详细地址(街道、门牌号等)" v-model="formData.domicileDetail" style="margin-top: 15rpx;" />
  111. </view>
  112. <view class="form-item">
  113. <text class="form-label">职业</text>
  114. <input type="text" class="form-input" placeholder="请输入职业" v-model="formData.occupation" />
  115. </view>
  116. <view class="form-item">
  117. <text class="form-label">购房</text>
  118. <picker mode="selector" :range="houseOptions" :value="houseIndex" @change="onHouseChange">
  119. <view class="form-input picker-input">
  120. <text v-if="formData.house !== null && formData.house !== undefined">{{ houseOptions[houseIndex] }}</text>
  121. <text v-else class="placeholder">请选择</text>
  122. <text class="picker-arrow">▼</text>
  123. </view>
  124. </picker>
  125. </view>
  126. <view class="form-item">
  127. <text class="form-label">购车</text>
  128. <picker mode="selector" :range="carOptions" :value="carIndex" @change="onCarChange">
  129. <view class="form-input picker-input">
  130. <text v-if="formData.car !== null && formData.car !== undefined">{{ carOptions[carIndex] }}</text>
  131. <text v-else class="placeholder">请选择</text>
  132. <text class="picker-arrow">▼</text>
  133. </view>
  134. </picker>
  135. </view>
  136. </view>
  137. <!-- 择偶标准 -->
  138. <view class="form-section">
  139. <view class="section-title">择偶标准</view>
  140. <view class="form-item">
  141. <text class="form-label">择偶要求</text>
  142. <input type="text" class="form-input" placeholder="请输入择偶要求,如:176+本科" v-model="formData.mateSelectionCriteria" />
  143. </view>
  144. </view>
  145. <!-- 客户标签 -->
  146. <view class="form-section">
  147. <view class="section-title">客户标签</view>
  148. <view class="form-item">
  149. <text class="form-label">选择标签</text>
  150. <!-- 分类按钮 -->
  151. <view class="category-buttons">
  152. <view
  153. class="category-btn"
  154. :class="{ 'active': selectedCategoryId === category.id }"
  155. v-for="category in categoryList"
  156. :key="category.id"
  157. @click="selectCategory(category.id)"
  158. >
  159. <text class="category-btn-text">{{ category.name }}</text>
  160. </view>
  161. </view>
  162. <!-- 标签列表 -->
  163. <view class="tags-container">
  164. <view
  165. class="tag-item"
  166. :class="{ 'selected': selectedTagIds.includes(tag.id) }"
  167. v-for="tag in filteredTagList"
  168. :key="tag.id || tag.tag_id"
  169. @click="toggleTag(tag.id || tag.tag_id)"
  170. >
  171. <text class="tag-text">{{ tag.name || tag.tag_name }}</text>
  172. </view>
  173. <view v-if="filteredTagList.length === 0 && !isLoadingTags" class="tag-empty">
  174. <text>暂无标签</text>
  175. </view>
  176. <view v-if="isLoadingTags" class="tag-loading">
  177. <text>加载中...</text>
  178. </view>
  179. </view>
  180. </view>
  181. </view>
  182. <!-- 联系方式 -->
  183. <view class="form-section">
  184. <view class="section-title">联系方式</view>
  185. <view class="form-item">
  186. <text class="form-label">手机号<text class="required">*</text></text>
  187. <input type="text" class="form-input" placeholder="请输入手机号" v-model="formData.phone" />
  188. </view>
  189. <view class="form-item">
  190. <text class="form-label">备用手机号</text>
  191. <input type="text" class="form-input" placeholder="请输入备用手机号" v-model="formData.backupPhone" />
  192. </view>
  193. </view>
  194. </view>
  195. </scroll-view>
  196. <!-- 底部提交按钮 -->
  197. <view class="submit-bar">
  198. <button class="submit-btn" @click="handleSubmit">{{ isEditMode ? '确认修改' : '提交' }}</button>
  199. </view>
  200. </view>
  201. </template>
  202. <script>
  203. import api from '@/utils/api.js'
  204. export default {
  205. data() {
  206. return {
  207. activeSection: 'basic',
  208. currentUserId: null, // 当前登录用户的用户ID
  209. resourceId: null, // 编辑模式下的资源ID
  210. isEditMode: false, // 是否为编辑模式
  211. formData: {
  212. name: '',
  213. age: null,
  214. gender: null,
  215. constellation: '',
  216. height: null,
  217. weight: null,
  218. marrStatus: null,
  219. diploma: '',
  220. income: '',
  221. address: '', // 住址(省市区+详细地址组合)
  222. addressDetail: '', // 住址详细地址
  223. domicile: '', // 户籍地(省市区+详细地址组合)
  224. domicileDetail: '', // 户籍地详细地址
  225. occupation: '',
  226. house: null,
  227. car: null,
  228. mateSelectionCriteria: '',
  229. phone: '',
  230. backupPhone: ''
  231. },
  232. // 住址省市区数据
  233. addressProvinces: [],
  234. addressCities: [],
  235. addressAreas: [],
  236. addressMultiArray: [[], [], []], // 三级联动数据
  237. addressMultiIndex: [0, 0, 0], // 三级联动索引
  238. addressDisplayText: '', // 住址显示文本
  239. // 户籍地省市区数据
  240. domicileProvinces: [],
  241. domicileCities: [],
  242. domicileAreas: [],
  243. domicileMultiArray: [[], [], []], // 三级联动数据
  244. domicileMultiIndex: [0, 0, 0], // 三级联动索引
  245. domicileDisplayText: '', // 户籍地显示文本
  246. genderOptions: ['男', '女'],
  247. genderIndex: 0,
  248. constellationOptions: ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座'],
  249. constellationIndex: 0,
  250. maritalStatusOptions: ['未婚', '离异', '丧偶'],
  251. maritalStatusIndex: -1, // -1表示未选择,0-未婚,1-离异,2-丧偶
  252. diplomaOptions: ['高中', '专科', '本科', '硕士', '博士', '无'],
  253. diplomaIndex: 0,
  254. houseOptions: ['无', '有'],
  255. houseIndex: 0,
  256. carOptions: ['无', '有'],
  257. carIndex: 0,
  258. tagList: [], // 所有标签列表
  259. categoryList: [], // 标签分类列表
  260. selectedCategoryId: 1, // 当前选中的分类ID,默认显示职业分类(category_id = 1)
  261. selectedTagIds: [], // 选中的标签ID列表
  262. isLoadingTags: false // 是否正在加载标签
  263. }
  264. },
  265. computed: {
  266. // 根据选中的分类筛选标签(只显示当前分类的标签,不显示全部)
  267. filteredTagList() {
  268. // 如果没有选中分类,返回空数组(不显示任何标签)
  269. if (this.selectedCategoryId === null || this.selectedCategoryId === undefined) {
  270. return []
  271. }
  272. // 确保selectedCategoryId是数字类型
  273. const selectedId = parseInt(this.selectedCategoryId)
  274. if (isNaN(selectedId)) {
  275. return []
  276. }
  277. // 筛选标签,只显示当前分类的标签
  278. const filtered = this.tagList.filter(tag => {
  279. // 获取标签的分类ID,优先使用 category_id(后端返回的字段名)
  280. const tagCategoryId = tag.category_id !== null && tag.category_id !== undefined
  281. ? parseInt(tag.category_id)
  282. : (tag.categoryId !== null && tag.categoryId !== undefined
  283. ? parseInt(tag.categoryId)
  284. : null)
  285. // 如果tagCategoryId是NaN或null,说明数据有问题或未分类,不显示
  286. if (isNaN(tagCategoryId) || tagCategoryId === null) {
  287. return false
  288. }
  289. // 只返回匹配当前分类的标签
  290. return tagCategoryId === selectedId
  291. })
  292. return filtered
  293. }
  294. },
  295. onLoad(options) {
  296. // 获取当前登录用户信息
  297. const userInfo = uni.getStorageSync('userInfo') || {}
  298. const userId = uni.getStorageSync('userId')
  299. // 从userInfo中获取用户ID,将作为红娘ID
  300. let rawUserId = userInfo.userId || userId || null
  301. // 验证并转换currentUserId为有效的整数
  302. if (rawUserId !== null && rawUserId !== undefined) {
  303. rawUserId = parseInt(rawUserId)
  304. if (isNaN(rawUserId) || rawUserId <= 0) {
  305. rawUserId = null
  306. }
  307. }
  308. this.currentUserId = rawUserId
  309. // 检查是否为编辑模式
  310. if (options && options.resourceId) {
  311. this.resourceId = parseInt(options.resourceId)
  312. this.isEditMode = true
  313. // 加载资源详情
  314. this.loadResourceDetail()
  315. }
  316. // 加载标签分类和标签列表
  317. this.loadCategories()
  318. this.loadTags()
  319. // 加载省市区数据
  320. this.loadAddressProvinces()
  321. this.loadDomicileProvinces()
  322. },
  323. methods: {
  324. goBack() {
  325. uni.navigateBack()
  326. },
  327. // 加载资源详情(编辑模式)
  328. async loadResourceDetail() {
  329. if (!this.resourceId) return
  330. try {
  331. uni.showLoading({ title: '加载中...' })
  332. const baseUrl = process.env.NODE_ENV === 'development'
  333. ? 'https://api.zhongruanke.cn/api' // 开发环境 - 通过网关
  334. : 'https://your-domain.com/api' // 生产环境
  335. const [error, res] = await uni.request({
  336. url: `${baseUrl}/my-resource/detail/${this.resourceId}`,
  337. method: 'GET'
  338. })
  339. uni.hideLoading()
  340. if (error) {
  341. uni.showToast({
  342. title: '加载资源详情失败',
  343. icon: 'none'
  344. })
  345. return
  346. }
  347. if (res.statusCode === 200 && res.data) {
  348. // 检查返回的code
  349. if (res.data.code === 200 && res.data.data) {
  350. const resource = res.data.data
  351. // 填充表单数据
  352. this.formData.name = resource.name || ''
  353. this.formData.age = resource.age || null
  354. this.formData.gender = resource.gender || null
  355. if (this.formData.gender) {
  356. this.genderIndex = this.formData.gender - 1 // 1-男,2-女 -> 0,1
  357. }
  358. this.formData.constellation = resource.constellation || ''
  359. if (this.formData.constellation) {
  360. const index = this.constellationOptions.indexOf(this.formData.constellation)
  361. if (index >= 0) {
  362. this.constellationIndex = index
  363. }
  364. }
  365. this.formData.height = resource.height || null
  366. this.formData.weight = resource.weight || null
  367. this.formData.marrStatus = resource.marrStatus !== null && resource.marrStatus !== undefined ? resource.marrStatus : null
  368. if (this.formData.marrStatus !== null && this.formData.marrStatus >= 0) {
  369. this.maritalStatusIndex = this.formData.marrStatus
  370. }
  371. this.formData.diploma = resource.diploma || ''
  372. if (this.formData.diploma) {
  373. const index = this.diplomaOptions.indexOf(this.formData.diploma)
  374. if (index >= 0) {
  375. this.diplomaIndex = index
  376. }
  377. }
  378. this.formData.income = resource.income || ''
  379. // 解析地址和户籍地
  380. this.parseAddress(resource.address || '')
  381. this.parseDomicile(resource.domicile || '')
  382. this.formData.occupation = resource.occupation || ''
  383. this.formData.house = resource.house !== null && resource.house !== undefined ? resource.house : null
  384. if (this.formData.house !== null && this.formData.house !== undefined) {
  385. this.houseIndex = this.formData.house
  386. }
  387. this.formData.car = resource.car !== null && resource.car !== undefined ? resource.car : null
  388. if (this.formData.car !== null && this.formData.car !== undefined) {
  389. this.carIndex = this.formData.car
  390. }
  391. this.formData.mateSelectionCriteria = resource.mateSelectionCriteria || ''
  392. this.formData.phone = resource.phone || ''
  393. this.formData.backupPhone = resource.backupPhone || ''
  394. // 加载标签(需要先加载标签列表)
  395. // 这里假设标签会在 loadTags 之后加载,所以需要延迟处理
  396. this.$nextTick(() => {
  397. // 加载资源关联的标签
  398. this.loadResourceTags()
  399. })
  400. } else {
  401. // 资源不存在或其他错误
  402. const errorMessage = res.data.message || res.data.msg || '请求的资源不存在'
  403. uni.showToast({
  404. title: errorMessage,
  405. icon: 'none',
  406. duration: 2000
  407. })
  408. // 延迟返回上一页
  409. setTimeout(() => {
  410. uni.navigateBack()
  411. }, 2000)
  412. }
  413. } else {
  414. uni.showToast({
  415. title: '加载资源详情失败',
  416. icon: 'none'
  417. })
  418. setTimeout(() => {
  419. uni.navigateBack()
  420. }, 2000)
  421. }
  422. } catch (e) {
  423. uni.hideLoading()
  424. uni.showToast({
  425. title: '加载资源详情失败',
  426. icon: 'none'
  427. })
  428. }
  429. },
  430. // 解析地址(分离省市区和详细地址)
  431. parseAddress(fullAddress) {
  432. if (!fullAddress) return
  433. // 简单的地址解析:假设格式为 "省 市 区 详细地址"
  434. // 这里可以根据实际情况调整解析逻辑
  435. const parts = fullAddress.split(' ')
  436. if (parts.length >= 3) {
  437. // 前三个部分可能是省市区
  438. const regionParts = parts.slice(0, 3)
  439. this.addressDisplayText = regionParts.join(' ')
  440. this.formData.addressDetail = parts.slice(3).join(' ') || ''
  441. // 尝试匹配省市区并设置选择器
  442. this.matchAddressRegion(regionParts)
  443. } else {
  444. // 如果格式不符合,将整个地址作为详细地址
  445. this.formData.addressDetail = fullAddress
  446. }
  447. },
  448. // 解析户籍地(分离省市区和详细地址)
  449. parseDomicile(fullDomicile) {
  450. if (!fullDomicile) return
  451. const parts = fullDomicile.split(' ')
  452. if (parts.length >= 3) {
  453. const regionParts = parts.slice(0, 3)
  454. this.domicileDisplayText = regionParts.join(' ')
  455. this.formData.domicileDetail = parts.slice(3).join(' ') || ''
  456. // 尝试匹配省市区并设置选择器
  457. this.matchDomicileRegion(regionParts)
  458. } else {
  459. this.formData.domicileDetail = fullDomicile
  460. }
  461. },
  462. // 匹配地址省市区(简化版,实际可能需要更复杂的匹配逻辑)
  463. async matchAddressRegion(regionParts) {
  464. // 这里简化处理,实际应该根据省市区名称匹配
  465. // 暂时只设置显示文本,不自动选择
  466. },
  467. // 匹配户籍地省市区(简化版)
  468. async matchDomicileRegion(regionParts) {
  469. // 这里简化处理,实际应该根据省市区名称匹配
  470. // 暂时只设置显示文本,不自动选择
  471. },
  472. // 加载资源关联的标签
  473. async loadResourceTags() {
  474. if (!this.resourceId) return
  475. try {
  476. const baseUrl = process.env.NODE_ENV === 'development'
  477. ? 'https://api.zhongruanke.cn/api'
  478. : 'https://your-domain.com/api'
  479. // 调用获取资源标签ID列表的接口
  480. const [error, res] = await uni.request({
  481. url: `${baseUrl}/my-resource/tag-ids/${this.resourceId}`,
  482. method: 'GET'
  483. })
  484. if (error) {
  485. return
  486. }
  487. if (res.statusCode === 200 && res.data && res.data.code === 200) {
  488. // 后端直接返回标签ID列表
  489. const tagIds = res.data.data || []
  490. this.selectedTagIds = tagIds.filter(id => id !== null && id !== undefined)
  491. }
  492. } catch (e) {
  493. }
  494. },
  495. // 加载标签分类列表
  496. async loadCategories() {
  497. try {
  498. const baseUrl = process.env.NODE_ENV === 'development'
  499. ? 'https://api.zhongruanke.cn/api' // 开发环境 - 通过网关
  500. : 'https://your-domain.com/api' // 生产环境
  501. const [error, res] = await uni.request({
  502. url: `${baseUrl}/tag/categories`,
  503. method: 'GET',
  504. timeout: 10000
  505. })
  506. if (error) {
  507. return
  508. }
  509. if (res.statusCode === 200 && res.data && res.data.code === 200) {
  510. // 将后端返回的下划线字段转换为驼峰命名
  511. this.categoryList = (res.data.data || []).map(category => ({
  512. id: category.id || category.category_id,
  513. name: category.name || category.category_name,
  514. code: category.code || category.category_code,
  515. sortOrder: category.sortOrder || category.sort_order,
  516. status: category.status
  517. }))
  518. // 如果还没有选中分类,默认选中职业分类(category_id = 1)
  519. if (this.selectedCategoryId === null || this.selectedCategoryId === undefined) {
  520. // 查找职业分类(code为'occupation'或id为1)
  521. const occupationCategory = this.categoryList.find(cat =>
  522. (cat.code === 'occupation' || cat.id === 1)
  523. )
  524. if (occupationCategory) {
  525. this.selectedCategoryId = occupationCategory.id
  526. } else if (this.categoryList.length > 0) {
  527. // 如果找不到职业分类,选中第一个分类
  528. this.selectedCategoryId = this.categoryList[0].id
  529. }
  530. }
  531. } else {
  532. }
  533. } catch (e) {
  534. }
  535. },
  536. // 加载标签列表
  537. async loadTags() {
  538. try {
  539. this.isLoadingTags = true
  540. const baseUrl = process.env.NODE_ENV === 'development'
  541. ? 'https://api.zhongruanke.cn/api' // 开发环境 - 通过网关
  542. : 'https://your-domain.com/api' // 生产环境
  543. const [error, res] = await uni.request({
  544. url: `${baseUrl}/tag/list`,
  545. method: 'GET',
  546. timeout: 10000
  547. })
  548. if (error) {
  549. return
  550. }
  551. if (res.statusCode === 200 && res.data && res.data.code === 200) {
  552. // 直接使用后端返回的数据,不进行映射(因为Vue的响应式系统会保留原始属性)
  553. // 只保存有分类的标签(category_id不为null)
  554. this.tagList = (res.data.data || []).filter(tag => {
  555. const categoryId = tag.category_id !== null && tag.category_id !== undefined
  556. ? tag.category_id
  557. : (tag.categoryId !== null && tag.categoryId !== undefined ? tag.categoryId : null)
  558. return categoryId !== null && categoryId !== undefined
  559. })
  560. }
  561. } catch (e) {
  562. } finally {
  563. this.isLoadingTags = false
  564. }
  565. },
  566. // 选择分类
  567. selectCategory(categoryId) {
  568. this.selectedCategoryId = categoryId
  569. // 使用$nextTick确保DOM更新后再输出
  570. this.$nextTick(() => {
  571. if (this.filteredTagList.length > 0) {
  572. } else {
  573. // 调试:查看前几条标签的category_id
  574. if (this.tagList.length > 0) {
  575. }
  576. }
  577. })
  578. },
  579. // 切换标签选择状态
  580. toggleTag(tagId) {
  581. const index = this.selectedTagIds.indexOf(tagId)
  582. if (index > -1) {
  583. // 已选中,取消选择
  584. this.selectedTagIds.splice(index, 1)
  585. } else {
  586. // 未选中,添加到选中列表
  587. this.selectedTagIds.push(tagId)
  588. }
  589. },
  590. onGenderChange(e) {
  591. this.genderIndex = parseInt(e.detail.value) || 0
  592. this.formData.gender = this.genderIndex + 1 // 1-男,2-女
  593. },
  594. onConstellationChange(e) {
  595. this.constellationIndex = e.detail.value
  596. this.formData.constellation = this.constellationOptions[this.constellationIndex]
  597. },
  598. onMaritalStatusChange(e) {
  599. this.maritalStatusIndex = parseInt(e.detail.value)
  600. // 0-未婚,1-离异,2-丧偶
  601. // 直接使用索引值作为marrStatus的值
  602. this.formData.marrStatus = this.maritalStatusIndex
  603. },
  604. onDiplomaChange(e) {
  605. this.diplomaIndex = e.detail.value
  606. this.formData.diploma = this.diplomaOptions[this.diplomaIndex]
  607. },
  608. onHouseChange(e) {
  609. this.houseIndex = e.detail.value
  610. this.formData.house = this.houseIndex // 0-无,1-有
  611. },
  612. onCarChange(e) {
  613. this.carIndex = e.detail.value
  614. this.formData.car = this.carIndex // 0-无,1-有
  615. },
  616. async handleSubmit() {
  617. // 验证必填项
  618. if (!this.formData.name || !this.formData.name.trim()) {
  619. uni.showToast({
  620. title: '请输入姓名',
  621. icon: 'none'
  622. })
  623. return
  624. }
  625. // 验证年龄
  626. if (this.formData.age === null || this.formData.age === undefined || this.formData.age === '') {
  627. uni.showToast({
  628. title: '请输入年龄',
  629. icon: 'none'
  630. })
  631. return
  632. }
  633. // 验证性别
  634. if (this.formData.gender === null || this.formData.gender === undefined) {
  635. uni.showToast({
  636. title: '请选择性别',
  637. icon: 'none'
  638. })
  639. return
  640. }
  641. // 验证身高
  642. if (this.formData.height === null || this.formData.height === undefined || this.formData.height === '') {
  643. uni.showToast({
  644. title: '请输入身高',
  645. icon: 'none'
  646. })
  647. return
  648. }
  649. // 验证体重
  650. if (this.formData.weight === null || this.formData.weight === undefined || this.formData.weight === '') {
  651. uni.showToast({
  652. title: '请输入体重',
  653. icon: 'none'
  654. })
  655. return
  656. }
  657. // 验证婚况
  658. if ((this.maritalStatusIndex < 0 || this.maritalStatusIndex === null || this.maritalStatusIndex === undefined)
  659. && (this.formData.marrStatus === null || this.formData.marrStatus === undefined)) {
  660. uni.showToast({
  661. title: '请选择婚况',
  662. icon: 'none'
  663. })
  664. return
  665. }
  666. // 验证住址(省市区或详细地址至少有一个)
  667. if (!this.addressDisplayText && (!this.formData.addressDetail || !this.formData.addressDetail.trim())) {
  668. uni.showToast({
  669. title: '请选择省市区或输入详细地址',
  670. icon: 'none'
  671. })
  672. return
  673. }
  674. if (!this.formData.phone || !this.formData.phone.trim()) {
  675. uni.showToast({
  676. title: '请输入手机号',
  677. icon: 'none'
  678. })
  679. return
  680. }
  681. // 验证手机号格式
  682. const phoneReg = /^1[3-9]\d{9}$/
  683. if (!phoneReg.test(this.formData.phone)) {
  684. uni.showToast({
  685. title: '请输入正确的手机号',
  686. icon: 'none'
  687. })
  688. return
  689. }
  690. uni.showLoading({
  691. title: '提交中...'
  692. })
  693. try {
  694. // 确保婚姻状态已选择
  695. if ((this.maritalStatusIndex < 0 || this.maritalStatusIndex === null || this.maritalStatusIndex === undefined)
  696. && (this.formData.marrStatus === null || this.formData.marrStatus === undefined)) {
  697. uni.showToast({
  698. title: '请选择婚况',
  699. icon: 'none'
  700. })
  701. return
  702. }
  703. // 调试:打印原始值
  704. // 确定婚姻状态的值:优先使用formData.marrStatus,如果没有则使用maritalStatusIndex
  705. let marrStatusValue = null
  706. if (this.formData.marrStatus !== null && this.formData.marrStatus !== undefined && this.formData.marrStatus !== 'undefined' && this.formData.marrStatus !== 'null' && this.formData.marrStatus !== '') {
  707. const parsed = parseInt(this.formData.marrStatus)
  708. marrStatusValue = isNaN(parsed) ? null : parsed
  709. } else if (this.maritalStatusIndex !== null && this.maritalStatusIndex !== undefined && this.maritalStatusIndex >= 0) {
  710. const parsed = parseInt(this.maritalStatusIndex)
  711. marrStatusValue = isNaN(parsed) ? null : parsed
  712. }
  713. // 处理备用手机号:保留有效值,空字符串转为null
  714. let backupPhoneValue = null
  715. const backupPhoneRaw = this.formData.backupPhone
  716. if (backupPhoneRaw !== null && backupPhoneRaw !== undefined && backupPhoneRaw !== 'undefined' && backupPhoneRaw !== 'null') {
  717. const trimmed = String(backupPhoneRaw).trim()
  718. if (trimmed !== '' && trimmed !== 'undefined' && trimmed !== 'null') {
  719. backupPhoneValue = trimmed
  720. }
  721. }
  722. // 处理择偶标准:保留有效值,空字符串转为null
  723. let mateSelectionCriteriaValue = null
  724. const mateSelectionCriteriaRaw = this.formData.mateSelectionCriteria
  725. if (mateSelectionCriteriaRaw !== null && mateSelectionCriteriaRaw !== undefined && mateSelectionCriteriaRaw !== 'undefined' && mateSelectionCriteriaRaw !== 'null') {
  726. const trimmed = String(mateSelectionCriteriaRaw).trim()
  727. if (trimmed !== '' && trimmed !== 'undefined' && trimmed !== 'null') {
  728. mateSelectionCriteriaValue = trimmed
  729. }
  730. }
  731. // 辅助函数:安全地将值转换为整数,无效值返回null
  732. const safeParseInt = (value) => {
  733. if (value === null || value === undefined || value === '' || value === 'undefined' || value === 'null') {
  734. return null
  735. }
  736. const parsed = parseInt(value)
  737. return isNaN(parsed) ? null : parsed
  738. }
  739. // 辅助函数:安全地获取字符串值,无效值返回null
  740. const safeString = (value) => {
  741. if (value === null || value === undefined || value === '' || value === 'undefined' || value === 'null') {
  742. return null
  743. }
  744. const str = String(value).trim()
  745. return str === '' ? null : str
  746. }
  747. // 转换数据类型,明确构建提交数据对象
  748. const submitData = {
  749. name: safeString(this.formData.name),
  750. age: safeParseInt(this.formData.age),
  751. gender: safeParseInt(this.formData.gender),
  752. constellation: safeString(this.formData.constellation),
  753. height: safeParseInt(this.formData.height),
  754. weight: safeParseInt(this.formData.weight),
  755. // 确保婚姻状态被正确设置(0-未婚,1-离异,2-丧偶)
  756. marrStatus: marrStatusValue, // 直接使用处理后的值,不需要再次转换
  757. diploma: safeString(this.formData.diploma),
  758. income: safeString(this.formData.income),
  759. // 组合住址:省市区 + 详细地址
  760. address: this.buildFullAddress(this.addressDisplayText, this.formData.addressDetail),
  761. // 组合户籍地:省市区 + 详细地址
  762. domicile: this.buildFullAddress(this.domicileDisplayText, this.formData.domicileDetail),
  763. occupation: safeString(this.formData.occupation),
  764. house: safeParseInt(this.formData.house),
  765. car: safeParseInt(this.formData.car),
  766. phone: safeString(this.formData.phone),
  767. // 确保备用手机号被正确传递(保留有效值,null表示空)
  768. backupPhone: backupPhoneValue,
  769. // 确保择偶标准被正确传递(保留有效值,null表示空)
  770. mateSelectionCriteria: mateSelectionCriteriaValue,
  771. // 选中的标签ID列表
  772. tagIds: this.selectedTagIds.length > 0 ? this.selectedTagIds : null
  773. }
  774. // 调用后端接口(通过网关)
  775. const baseUrl = process.env.NODE_ENV === 'development'
  776. ? 'https://api.zhongruanke.cn/api' // 开发环境 - 通过网关
  777. : 'https://your-domain.com/api' // 生产环境
  778. // 检查手机号是否已存在(检查整个my_resource表,不限制红娘)
  779. const phone = submitData.phone
  780. const backupPhone = submitData.backupPhone
  781. // 检查是否已登录
  782. if (!this.currentUserId) {
  783. uni.hideLoading()
  784. uni.showToast({
  785. title: '请先登录',
  786. icon: 'none'
  787. })
  788. return
  789. }
  790. // 编辑模式下跳过手机号检查(因为可能是自己的手机号)
  791. // 新增模式下检查手机号是否已存在
  792. if (!this.isEditMode) {
  793. // 调用检查接口
  794. const checkUrl = `${baseUrl}/my-resource/check-phone?phone=${encodeURIComponent(phone || '')}${backupPhone ? '&backupPhone=' + encodeURIComponent(backupPhone) : ''}`
  795. const [checkError, checkRes] = await uni.request({
  796. url: checkUrl,
  797. method: 'GET'
  798. })
  799. if (checkError) {
  800. uni.hideLoading()
  801. uni.showToast({
  802. title: '检查手机号失败,请重试',
  803. icon: 'none'
  804. })
  805. return
  806. }
  807. if (checkRes.statusCode === 200 && checkRes.data && checkRes.data.code === 200) {
  808. const checkResult = checkRes.data.data
  809. const existingResource = checkResult.existingResource
  810. // 如果发现重复的手机号,提示用户
  811. if (checkResult.phoneExists || checkResult.backupPhoneExists || checkResult.phoneAsBackupExists || checkResult.backupPhoneAsMainExists) {
  812. let message = '该手机号已经绑定资源啦'
  813. // 根据不同的检查结果,显示具体的手机号类型
  814. if (checkResult.phoneExists) {
  815. message = '该主手机号已经绑定资源啦'
  816. } else if (checkResult.phoneAsBackupExists) {
  817. message = '该主手机号已经作为备用手机号绑定资源啦'
  818. } else if (checkResult.backupPhoneAsMainExists) {
  819. message = '该备用手机号已经作为主手机号绑定资源啦'
  820. } else if (checkResult.backupPhoneExists) {
  821. message = '该备用手机号已经绑定资源啦'
  822. }
  823. uni.hideLoading()
  824. uni.showToast({
  825. title: message,
  826. icon: 'none',
  827. duration: 3000
  828. })
  829. return
  830. }
  831. }
  832. }
  833. // 根据是否为编辑模式选择不同的接口
  834. let url, method, successMessage
  835. if (this.isEditMode && this.resourceId) {
  836. // 编辑模式:调用更新接口
  837. url = `${baseUrl}/my-resource/update/${this.resourceId}`
  838. method = 'PUT'
  839. successMessage = '修改成功'
  840. } else {
  841. // 新增模式:调用添加接口
  842. url = `${baseUrl}/my-resource/add`
  843. method = 'POST'
  844. // 确保currentUserId是有效的整数才添加到URL中
  845. if (this.currentUserId !== null && this.currentUserId !== undefined) {
  846. const userId = parseInt(this.currentUserId)
  847. if (!isNaN(userId) && userId > 0) {
  848. url += `?currentUserId=${userId}`
  849. }
  850. }
  851. }
  852. const res = await uni.request({
  853. url: url,
  854. method: method,
  855. data: submitData,
  856. header: {
  857. 'Content-Type': 'application/json'
  858. }
  859. })
  860. uni.hideLoading()
  861. if (res[1].statusCode === 200 && res[1].data.code === 200) {
  862. if (this.isEditMode) {
  863. // 编辑模式:显示修改成功
  864. uni.showToast({
  865. title: successMessage,
  866. icon: 'success'
  867. })
  868. } else {
  869. // 新增模式:获取返回的资源类型信息
  870. const responseData = res[1].data.data
  871. const resourceType = responseData && responseData.resourceType ? responseData.resourceType : '资源'
  872. const isUser = responseData && responseData.isUser !== undefined ? responseData.isUser : null
  873. // 根据资源类型显示不同的成功提示
  874. if (isUser === 0 || resourceType === '线索') {
  875. successMessage = '提交线索成功'
  876. } else if (isUser === 1 || resourceType === '资源') {
  877. successMessage = '添加资源成功'
  878. }
  879. uni.showToast({
  880. title: successMessage,
  881. icon: 'success'
  882. })
  883. }
  884. // 延迟跳转到我的资源列表页面并刷新
  885. setTimeout(() => {
  886. if (this.isEditMode) {
  887. // 编辑模式:直接返回上一页并刷新
  888. uni.navigateBack({
  889. success: () => {
  890. // 触发刷新事件
  891. uni.$emit('refreshResourceList')
  892. }
  893. })
  894. } else {
  895. // 新增模式:获取页面栈,检查是否已经有我的资源列表页面
  896. const pages = getCurrentPages()
  897. const myResourcesPageIndex = pages.findIndex(page => {
  898. return page.route && page.route.includes('matchmaker-workbench/my-resources')
  899. })
  900. if (myResourcesPageIndex >= 0 && myResourcesPageIndex < pages.length - 1) {
  901. // 如果我的资源列表页面已经在页面栈中(且不是当前页),返回到该页面
  902. const delta = pages.length - myResourcesPageIndex - 1
  903. uni.navigateBack({
  904. delta: delta,
  905. success: () => {
  906. // 触发刷新事件
  907. uni.$emit('refreshResourceList')
  908. }
  909. })
  910. } else {
  911. // 如果我的资源列表页面不在页面栈中,跳转到该页面
  912. uni.redirectTo({
  913. url: '/pages/matchmaker-workbench/my-resources',
  914. success: () => {
  915. // 触发刷新事件
  916. uni.$emit('refreshResourceList')
  917. }
  918. })
  919. }
  920. }
  921. }, 1500)
  922. } else {
  923. uni.showToast({
  924. title: res[1].data.message || '提交失败',
  925. icon: 'none',
  926. duration: 2000
  927. })
  928. }
  929. } catch (error) {
  930. uni.hideLoading()
  931. uni.showToast({
  932. title: '提交失败,请稍后重试',
  933. icon: 'none'
  934. })
  935. }
  936. },
  937. // 组合完整地址(省市区 + 详细地址)
  938. buildFullAddress(regionText, detailText) {
  939. let fullAddress = ''
  940. if (regionText && regionText.trim()) {
  941. fullAddress = regionText.trim()
  942. }
  943. if (detailText && detailText.trim()) {
  944. if (fullAddress) {
  945. fullAddress += ' ' + detailText.trim()
  946. } else {
  947. fullAddress = detailText.trim()
  948. }
  949. }
  950. return fullAddress || null
  951. },
  952. // ========== 住址省市区相关方法 ==========
  953. // 加载住址省份列表
  954. async loadAddressProvinces() {
  955. try {
  956. const provinces = await api.area.getProvinces()
  957. this.addressProvinces = provinces || []
  958. this.addressMultiArray[0] = this.addressProvinces.map(p => p.name)
  959. // 默认加载第一个省份的城市
  960. if (this.addressProvinces.length > 0) {
  961. await this.loadAddressCities(0)
  962. }
  963. } catch (e) {
  964. }
  965. },
  966. // 加载住址城市列表
  967. async loadAddressCities(provinceIndex) {
  968. const province = this.addressProvinces[provinceIndex]
  969. if (!province || !province.id) return
  970. try {
  971. const cities = await api.area.getCities(province.id)
  972. this.addressCities = cities || []
  973. this.addressMultiArray[1] = this.addressCities.map(c => c.name)
  974. // 默认加载第一个城市的区域
  975. if (this.addressCities.length > 0) {
  976. await this.loadAddressAreas(0)
  977. } else {
  978. this.addressMultiArray[2] = []
  979. }
  980. } catch (e) {
  981. this.addressCities = []
  982. this.addressMultiArray[1] = []
  983. this.addressMultiArray[2] = []
  984. }
  985. },
  986. // 加载住址区域列表
  987. async loadAddressAreas(cityIndex) {
  988. const city = this.addressCities[cityIndex]
  989. if (!city || !city.id) return
  990. try {
  991. const areas = await api.area.getAreas(city.id)
  992. this.addressAreas = areas || []
  993. this.addressMultiArray[2] = this.addressAreas.map(a => a.name)
  994. } catch (e) {
  995. this.addressAreas = []
  996. this.addressMultiArray[2] = []
  997. }
  998. },
  999. // 住址列变化事件
  1000. async onAddressColumnChange(e) {
  1001. const column = e.detail.column
  1002. const row = e.detail.value
  1003. if (column === 0) {
  1004. // 选择了省份
  1005. this.addressMultiIndex[0] = row
  1006. this.addressMultiIndex[1] = 0
  1007. this.addressMultiIndex[2] = 0
  1008. await this.loadAddressCities(row)
  1009. } else if (column === 1) {
  1010. // 选择了城市
  1011. this.addressMultiIndex[1] = row
  1012. this.addressMultiIndex[2] = 0
  1013. await this.loadAddressAreas(row)
  1014. } else if (column === 2) {
  1015. // 选择了区域
  1016. this.addressMultiIndex[2] = row
  1017. }
  1018. },
  1019. // 住址确认选择事件
  1020. onAddressChange(e) {
  1021. const values = e.detail.value
  1022. this.addressMultiIndex = values
  1023. // 更新显示文本
  1024. const provinceName = this.addressMultiArray[0][values[0]] || ''
  1025. const cityName = this.addressMultiArray[1][values[1]] || ''
  1026. const areaName = this.addressMultiArray[2][values[2]] || ''
  1027. let displayText = ''
  1028. if (provinceName) displayText += provinceName
  1029. if (cityName) displayText += (displayText ? ' ' : '') + cityName
  1030. if (areaName) displayText += (displayText ? ' ' : '') + areaName
  1031. this.addressDisplayText = displayText
  1032. },
  1033. // ========== 户籍地省市区相关方法 ==========
  1034. // 加载户籍地省份列表
  1035. async loadDomicileProvinces() {
  1036. try {
  1037. const provinces = await api.area.getProvinces()
  1038. this.domicileProvinces = provinces || []
  1039. this.domicileMultiArray[0] = this.domicileProvinces.map(p => p.name)
  1040. // 默认加载第一个省份的城市
  1041. if (this.domicileProvinces.length > 0) {
  1042. await this.loadDomicileCities(0)
  1043. }
  1044. } catch (e) {
  1045. }
  1046. },
  1047. // 加载户籍地城市列表
  1048. async loadDomicileCities(provinceIndex) {
  1049. const province = this.domicileProvinces[provinceIndex]
  1050. if (!province || !province.id) return
  1051. try {
  1052. const cities = await api.area.getCities(province.id)
  1053. this.domicileCities = cities || []
  1054. this.domicileMultiArray[1] = this.domicileCities.map(c => c.name)
  1055. // 默认加载第一个城市的区域
  1056. if (this.domicileCities.length > 0) {
  1057. await this.loadDomicileAreas(0)
  1058. } else {
  1059. this.domicileMultiArray[2] = []
  1060. }
  1061. } catch (e) {
  1062. this.domicileCities = []
  1063. this.domicileMultiArray[1] = []
  1064. this.domicileMultiArray[2] = []
  1065. }
  1066. },
  1067. // 加载户籍地区域列表
  1068. async loadDomicileAreas(cityIndex) {
  1069. const city = this.domicileCities[cityIndex]
  1070. if (!city || !city.id) return
  1071. try {
  1072. const areas = await api.area.getAreas(city.id)
  1073. this.domicileAreas = areas || []
  1074. this.domicileMultiArray[2] = this.domicileAreas.map(a => a.name)
  1075. } catch (e) {
  1076. this.domicileAreas = []
  1077. this.domicileMultiArray[2] = []
  1078. }
  1079. },
  1080. // 户籍地列变化事件
  1081. async onDomicileColumnChange(e) {
  1082. const column = e.detail.column
  1083. const row = e.detail.value
  1084. if (column === 0) {
  1085. // 选择了省份
  1086. this.domicileMultiIndex[0] = row
  1087. this.domicileMultiIndex[1] = 0
  1088. this.domicileMultiIndex[2] = 0
  1089. await this.loadDomicileCities(row)
  1090. } else if (column === 1) {
  1091. // 选择了城市
  1092. this.domicileMultiIndex[1] = row
  1093. this.domicileMultiIndex[2] = 0
  1094. await this.loadDomicileAreas(row)
  1095. } else if (column === 2) {
  1096. // 选择了区域
  1097. this.domicileMultiIndex[2] = row
  1098. }
  1099. },
  1100. // 户籍地确认选择事件
  1101. onDomicileChange(e) {
  1102. const values = e.detail.value
  1103. this.domicileMultiIndex = values
  1104. // 更新显示文本
  1105. const provinceName = this.domicileMultiArray[0][values[0]] || ''
  1106. const cityName = this.domicileMultiArray[1][values[1]] || ''
  1107. const areaName = this.domicileMultiArray[2][values[2]] || ''
  1108. let displayText = ''
  1109. if (provinceName) displayText += provinceName
  1110. if (cityName) displayText += (displayText ? ' ' : '') + cityName
  1111. if (areaName) displayText += (displayText ? ' ' : '') + areaName
  1112. this.domicileDisplayText = displayText
  1113. }
  1114. }
  1115. }
  1116. </script>
  1117. <style lang="scss" scoped>
  1118. .resource-input-page {
  1119. min-height: 100vh;
  1120. background: #FFF9F9;
  1121. display: flex;
  1122. flex-direction: column;
  1123. }
  1124. .header {
  1125. display: flex;
  1126. align-items: center;
  1127. justify-content: space-between;
  1128. padding: 25rpx 30rpx;
  1129. padding-top: calc(25rpx + env(safe-area-inset-top));
  1130. background: #FFF9F9;
  1131. border-bottom: 1rpx solid #F0F0F0;
  1132. .header-left {
  1133. width: 60rpx;
  1134. }
  1135. .back-icon {
  1136. font-size: 40rpx;
  1137. color: #333;
  1138. }
  1139. .header-title {
  1140. flex: 1;
  1141. text-align: center;
  1142. font-size: 38rpx;
  1143. font-weight: bold;
  1144. color: #9C27B0;
  1145. }
  1146. .header-right {
  1147. width: 60rpx;
  1148. text-align: right;
  1149. }
  1150. .more-icon {
  1151. font-size: 40rpx;
  1152. color: #333;
  1153. }
  1154. }
  1155. .content {
  1156. flex: 1;
  1157. padding-bottom: 120rpx;
  1158. }
  1159. .form-container {
  1160. padding: 20rpx;
  1161. }
  1162. .form-section {
  1163. background: #FFFFFF;
  1164. border-radius: 20rpx;
  1165. padding: 30rpx;
  1166. margin-bottom: 20rpx;
  1167. border: 2rpx solid transparent;
  1168. &.active {
  1169. border-color: #FF4081;
  1170. }
  1171. .section-title {
  1172. font-size: 32rpx;
  1173. font-weight: bold;
  1174. color: #333;
  1175. margin-bottom: 30rpx;
  1176. padding-bottom: 15rpx;
  1177. border-bottom: 2rpx solid #F0F0F0;
  1178. }
  1179. }
  1180. .form-item {
  1181. margin-bottom: 30rpx;
  1182. &:last-child {
  1183. margin-bottom: 0;
  1184. }
  1185. .form-label {
  1186. display: block;
  1187. font-size: 28rpx;
  1188. color: #666;
  1189. margin-bottom: 15rpx;
  1190. .required {
  1191. color: #FF4444;
  1192. margin-left: 5rpx;
  1193. }
  1194. }
  1195. .category-buttons {
  1196. display: flex;
  1197. flex-wrap: wrap;
  1198. gap: 12rpx;
  1199. margin-bottom: 20rpx;
  1200. .category-btn {
  1201. padding: 10rpx 20rpx;
  1202. background: #F8F8F8;
  1203. border: 2rpx solid #E0E0E0;
  1204. border-radius: 20rpx;
  1205. transition: all 0.3s;
  1206. &.active {
  1207. background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%);
  1208. border-color: #9C27B0;
  1209. .category-btn-text {
  1210. color: #FFFFFF;
  1211. font-weight: 600;
  1212. }
  1213. }
  1214. .category-btn-text {
  1215. font-size: 24rpx;
  1216. color: #666;
  1217. }
  1218. }
  1219. }
  1220. .tags-container {
  1221. display: flex;
  1222. flex-wrap: wrap;
  1223. gap: 15rpx;
  1224. margin-top: 10rpx;
  1225. min-height: 400rpx; /* 设置最小高度,确保空间不变 */
  1226. align-content: flex-start; /* 标签从顶部开始排列 */
  1227. .tag-item {
  1228. padding: 12rpx 24rpx;
  1229. background: #F8F8F8;
  1230. border: 2rpx solid #E0E0E0;
  1231. border-radius: 24rpx;
  1232. font-size: 26rpx;
  1233. color: #666;
  1234. transition: all 0.3s;
  1235. flex-shrink: 0; /* 防止标签被压缩 */
  1236. &.selected {
  1237. background: linear-gradient(135deg, #F3E5F5 0%, #E1BEE7 100%);
  1238. border-color: #9C27B0;
  1239. color: #7B1FA2;
  1240. font-weight: 600;
  1241. box-shadow: 0 2rpx 8rpx rgba(156, 39, 176, 0.2);
  1242. }
  1243. .tag-text {
  1244. font-size: 26rpx;
  1245. }
  1246. }
  1247. .tag-loading {
  1248. padding: 20rpx;
  1249. color: #999;
  1250. font-size: 26rpx;
  1251. text-align: center;
  1252. width: 100%;
  1253. min-height: 400rpx; /* 加载时也保持固定高度 */
  1254. display: flex;
  1255. align-items: center;
  1256. justify-content: center;
  1257. }
  1258. .tag-empty {
  1259. padding: 20rpx;
  1260. color: #999;
  1261. font-size: 26rpx;
  1262. text-align: center;
  1263. width: 100%;
  1264. min-height: 400rpx; /* 空状态时也保持固定高度 */
  1265. display: flex;
  1266. align-items: center;
  1267. justify-content: center;
  1268. }
  1269. }
  1270. .form-input {
  1271. width: 100%;
  1272. height: 80rpx;
  1273. background: #F8F8F8;
  1274. border: 2rpx solid #E0E0E0;
  1275. border-radius: 10rpx;
  1276. padding: 0 20rpx;
  1277. font-size: 28rpx;
  1278. color: #333;
  1279. box-sizing: border-box;
  1280. &:focus {
  1281. border-color: #9C27B0;
  1282. background: #FFFFFF;
  1283. }
  1284. }
  1285. .picker-input {
  1286. display: flex;
  1287. align-items: center;
  1288. justify-content: space-between;
  1289. .placeholder {
  1290. color: #999;
  1291. }
  1292. .picker-text {
  1293. color: #333;
  1294. flex: 1;
  1295. }
  1296. .picker-arrow {
  1297. font-size: 24rpx;
  1298. color: #999;
  1299. }
  1300. }
  1301. .address-detail-input {
  1302. margin-top: 15rpx;
  1303. }
  1304. }
  1305. .submit-bar {
  1306. position: fixed;
  1307. bottom: 0;
  1308. left: 0;
  1309. right: 0;
  1310. padding: 20rpx 30rpx;
  1311. padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  1312. background: #FFFFFF;
  1313. border-top: 1rpx solid #F0F0F0;
  1314. box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  1315. .submit-btn {
  1316. width: 100%;
  1317. height: 88rpx;
  1318. background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%);
  1319. color: #FFFFFF;
  1320. font-size: 32rpx;
  1321. font-weight: bold;
  1322. border-radius: 44rpx;
  1323. border: none;
  1324. display: flex;
  1325. align-items: center;
  1326. justify-content: center;
  1327. }
  1328. }
  1329. </style>