jobPostingSecond.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670
  1. <template>
  2. <view class="switch-roles">
  3. <nav-bar title="选择职位要求" color="#000"></nav-bar>
  4. <view class="roles-content">
  5. <view class="content">
  6. <view class="title">继续填写</view>
  7. <view class="desc">“{{companyName}}”的职位要求</view>
  8. <view class="step">
  9. <u-steps :list="numList" mode="number" :current="2"></u-steps>
  10. </view>
  11. <!-- 经验要求 -->
  12. <view class="check-title-big">经验要求</view>
  13. <view class="check-select" @click="showExper = true">
  14. <view class="select-txt">{{ selectedExper || "请选择经验要求" }}</view>
  15. <u-icon name="arrow-down" color="#D3D3D6" size="22"></u-icon>
  16. </view>
  17. <!-- 最低学历 -->
  18. <view class="check-title-big">最低学历</view>
  19. <view class="check-select" @click="showLevel = true">
  20. <view class="select-txt">{{ selectedLevel || "请选择学历" }}</view>
  21. <u-icon name="arrow-down" color="#D3D3D6" size="22"></u-icon>
  22. </view>
  23. <!-- 薪资范围 -->
  24. <view class="check-title-big">薪资范围</view>
  25. <view class="check-select" @click="showMoney = true">
  26. <view class="select-txt">{{ selectedSalary+'——'+salaryTimes || "请选择合理的薪资范围" }}</view>
  27. <u-icon name="arrow-down" color="#D3D3D6" size="22"></u-icon>
  28. </view>
  29. <!-- 福利待遇 -->
  30. <view class="check-title-big">福利待遇(选填)</view>
  31. <view class="check-select" @click="goFund">
  32. <view class="select-txt">{{ welfareTag || "请填写奖金绩效" }}</view>
  33. <u-icon name="arrow-down" color="#D3D3D6" size="22"></u-icon>
  34. </view>
  35. <!-- 职位关键词 -->
  36. <view class="check-title-big">职位关键词</view>
  37. <view class="check-select" @click="goJobSkill">
  38. <view class="select-txt">{{ positionTag || "被选中的关键词将突出展示给牛人" }}</view>
  39. <u-icon name="arrow-down" color="#D3D3D6" size="22"></u-icon>
  40. </view>
  41. <!-- 工作地址 -->
  42. <view class="check-title-big">工作地址</view>
  43. <view class="check-select" @click="goAddAddress">
  44. <view class="select-txt">{{ address || stationName.fullText || "请填写精确的工作地点" }}</view>
  45. <u-icon name="arrow-down" color="#D3D3D6" size="22"></u-icon>
  46. </view>
  47. <view class="txt-desc">
  48. 温馨提示:职位类型、职位名称和工作城市发布后不可修改,请您确保信息正确 <br /><br />
  49. 发布职位即表示同意遵守《招聘行为管理规范》,如违反规则将导致账号被锁定
  50. </view>
  51. </view>
  52. </view>
  53. <view class="submit-btn" @click="submitPost">确定</view>
  54. <!-- 经验选择器 -->
  55. <u-select v-model="showExper" :list="listExper" title="请选择经验" @confirm="onExperConfirm"
  56. @cancel="showExper = false"></u-select>
  57. <!-- 学历选择器 -->
  58. <u-select v-model="showLevel" :list="listLevel" title="请选择学历" @confirm="onLevelConfirm"
  59. @cancel="showLevel = false"></u-select>
  60. <!-- 薪资选择器 -->
  61. <u-select v-model="showMoney" mode="mutil-column" :list="listMoney" title="请选择月薪范围" @confirm="onMoneyConfirm"
  62. @cancel="showMoney = false"></u-select>
  63. </view>
  64. </template>
  65. <script>
  66. import navBar from "@/components/nav-bar/index.vue";
  67. export default {
  68. data() {
  69. return {
  70. // 选中值(用于页面渲染)
  71. selectedExper: "", // 经验
  72. selectedLevel: "", // 学历
  73. selectedSalary: "", // 薪资范围
  74. welfareTag: "", // 福利待遇
  75. positionTag: "", // 职位关键词
  76. stationName: [],
  77. companyName: "",
  78. companyId: "",
  79. status: 1,
  80. pid: "",
  81. address:"",
  82. salaryTimes:"",
  83. // 选择器显示控制
  84. showExper: false,
  85. showLevel: false,
  86. showMoney: false,
  87. // 经验选择数据源
  88. listExper: [{
  89. label: "不限",
  90. value: "不限"
  91. },
  92. {
  93. label: "1年以内",
  94. value: "1年以内"
  95. },
  96. {
  97. label: "1-3年",
  98. value: "1-3年"
  99. },
  100. {
  101. label: "3-5年",
  102. value: "3-5年"
  103. },
  104. {
  105. label: "5-8年",
  106. value: "5-8年"
  107. },
  108. {
  109. label: "8年以上",
  110. value: "8年以上"
  111. },
  112. ],
  113. // 学历选择数据源
  114. listLevel: [{
  115. label: "不限",
  116. value: "不限"
  117. },
  118. {
  119. label: "专科",
  120. value: "专科"
  121. },
  122. {
  123. label: "本科",
  124. value: "本科"
  125. },
  126. {
  127. label: "硕士",
  128. value: "硕士"
  129. },
  130. {
  131. label: "博士",
  132. value: "博士"
  133. },
  134. ],
  135. // 薪资选择数据源(修正格式)
  136. listMoney: [
  137. [{
  138. value: "3k",
  139. label: "3k"
  140. },
  141. {
  142. value: "4k",
  143. label: "4k"
  144. },
  145. {
  146. value: "5k",
  147. label: "5k"
  148. },
  149. {
  150. value: "6k",
  151. label: "6k"
  152. },
  153. {
  154. value: "8k",
  155. label: "8k"
  156. },
  157. {
  158. value: "10k",
  159. label: "10k"
  160. },
  161. {
  162. value: "12k",
  163. label: "12k"
  164. },
  165. {
  166. value: "15k",
  167. label: "15k"
  168. },
  169. {
  170. value: "18k",
  171. label: "18k"
  172. },
  173. {
  174. value: "20k",
  175. label: "20k"
  176. },
  177. {
  178. value: "30k",
  179. label: "30k"
  180. },
  181. {
  182. value: "50k",
  183. label: "50k"
  184. },
  185. ],
  186. [{
  187. value: "3k",
  188. label: "3k"
  189. },
  190. {
  191. value: "4k",
  192. label: "4k"
  193. },
  194. {
  195. value: "5k",
  196. label: "5k"
  197. },
  198. {
  199. value: "6k",
  200. label: "6k"
  201. },
  202. {
  203. value: "8k",
  204. label: "8k"
  205. },
  206. {
  207. value: "10k",
  208. label: "10k"
  209. },
  210. {
  211. value: "12k",
  212. label: "12k"
  213. },
  214. {
  215. value: "15k",
  216. label: "15k"
  217. },
  218. {
  219. value: "18k",
  220. label: "18k"
  221. },
  222. {
  223. value: "20k",
  224. label: "20k"
  225. },
  226. {
  227. value: "30k",
  228. label: "30k"
  229. },
  230. {
  231. value: "50k",
  232. label: "50k"
  233. },
  234. ],
  235. [
  236. {
  237. "value": "12薪",
  238. "label": "12薪"
  239. },
  240. {
  241. "value": "13薪",
  242. "label": "13薪"
  243. },
  244. {
  245. "value": "14薪",
  246. "label": "14薪"
  247. },
  248. {
  249. "value": "15薪",
  250. "label": "15薪"
  251. },
  252. {
  253. "value": "16薪",
  254. "label": "16薪"
  255. },
  256. {
  257. "value": "17薪",
  258. "label": "17薪"
  259. },
  260. {
  261. "value": "18薪",
  262. "label": "18薪"
  263. },
  264. {
  265. "value": "19薪",
  266. "label": "19薪"
  267. },
  268. {
  269. "value": "20薪",
  270. "label": "20薪"
  271. },
  272. {
  273. "value": "21薪",
  274. "label": "21薪"
  275. },
  276. {
  277. "value": "22薪",
  278. "label": "22薪"
  279. },
  280. {
  281. "value": "23薪",
  282. "label": "23薪"
  283. }
  284. ]
  285. ],
  286. numList: [{
  287. name: "填写基本信息"
  288. },
  289. {
  290. name: "选择职位要求"
  291. },
  292. ],
  293. };
  294. },
  295. components: {
  296. navBar,
  297. },
  298. onLoad(options) {
  299. // 接收上个页面传递的公司名称参数
  300. if (options.companyName) {
  301. this.companyName = decodeURIComponent(options.companyName);
  302. console.log('接收的公司名称:', this.companyName);
  303. }
  304. if (options.status) {
  305. this.status = decodeURIComponent(options.status);
  306. console.log('接收的公司状态:', this.status);
  307. }else{
  308. this.status = uni.getStorageSync('companyStatus')
  309. }
  310. this.fundListener = uni.$on("fundData", (data) => {
  311. console.log("接收到的福利数据:", data);
  312. this.welfareTag = data; // 赋值给当前页面变量
  313. });
  314. this.fundListener = uni.$on("skillsUpdated", (data) => {
  315. console.log("接收到的职位技能数据:", data);
  316. this.positionTag = data.selectedTags; // 赋值给当前页面变量
  317. });
  318. this.fundListener = uni.$on("addressData", (data) => {
  319. console.log("接收到的地址数据:", data);
  320. this.stationName = data; // 赋值给当前页面变量
  321. });
  322. if (options.companyId) {
  323. this.companyId = options.companyId;
  324. console.log('接收的公司ID:', this.companyId);
  325. } else {
  326. this.companyId = uni.getStorageSync('companyId') || ""
  327. }
  328. if (options.pid) {
  329. this.pid = options.pid;
  330. if(options.type && options.type=='updata'){
  331. this.getInfo()
  332. }
  333. console.log('接收PID:', this.pid);
  334. } else {
  335. uni.navigateTo({
  336. url: '/pages/my/jobPosting?companyId=' + this.companyId + '&status=' + this.status +
  337. '&companyName=' + this.companyName
  338. })
  339. }
  340. },
  341. onUnload() {
  342. // 页面关闭时移除监听,避免内存泄漏
  343. if (this.fundListener) {
  344. uni.$off("fundData", this.fundListener);
  345. }
  346. },
  347. methods: {
  348. // 处理经验选择(核心修复:直接接收选中的label)
  349. onExperConfirm(selectedItem) {
  350. // 不同版本u-select返回格式可能是对象或数组,这里兼容处理
  351. if (Array.isArray(selectedItem)) {
  352. this.selectedExper = selectedItem[0]?.label || "";
  353. } else {
  354. this.selectedExper = selectedItem?.label || "";
  355. }
  356. this.showExper = false; // 关闭选择器
  357. },
  358. // 处理学历选择(核心修复)
  359. onLevelConfirm(selectedItem) {
  360. if (Array.isArray(selectedItem)) {
  361. this.selectedLevel = selectedItem[0]?.label || "";
  362. } else {
  363. this.selectedLevel = selectedItem?.label || "";
  364. }
  365. this.showLevel = false;
  366. },
  367. /**
  368. * 获取岗位详情
  369. */
  370. getInfo(){
  371. this.$Request.getT("/app/postPush/selectPostPushDetails",{
  372. // userId:uni.getStorageSync('userId'),
  373. postPushId:this.pid
  374. }).then(res => {
  375. if(res.code==0){
  376. this.selectedExper=res.data.experience
  377. this.selectedLevel=res.data.education
  378. this.selectedSalary=res.data.salaryRange
  379. this.welfareTag=res.data.welfareTag
  380. this.positionTag=res.data.positionTag
  381. this.address=res.data.address
  382. this.stationName.fullText=res.data.address
  383. this.stationName.latitude=res.data.lat
  384. this.stationName.longitude=res.data.lng
  385. this.stationName.province=res.data.province
  386. this.stationName.city=res.data.city
  387. this.stationName.district=res.data.county
  388. this.salaryTimes=res.data.salaryTimes
  389. console.log(this.stationName)
  390. }else{
  391. uni.showToast({
  392. title: '数据有误',
  393. icon: 'none', // 注意这里需要加引号
  394. duration: 2000, // 可选:设置提示框显示时长
  395. complete() { // 正确的回调函数写法
  396. uni.navigateBack();
  397. }
  398. });
  399. }
  400. })
  401. },
  402. // 处理薪资范围选择(核心修复)
  403. onMoneyConfirm(selectedItems) {
  404. // 多列选择器返回数组,取每列选中的label拼接
  405. console.log(selectedItems)
  406. if (Array.isArray(selectedItems) && selectedItems.length >= 2) {
  407. const min = selectedItems[0]?.label || "";
  408. const max = selectedItems[1]?.label || "";
  409. const xin = selectedItems[2]?.label || "";
  410. this.selectedSalary = `${min}-${max}`;
  411. this.salaryTimes=`${xin}`
  412. }
  413. this.showMoney = false;
  414. },
  415. // 跳转页面并接收参数(福利待遇)
  416. goFund() {
  417. uni.navigateTo({
  418. url: "/package/jobIntention/fund",
  419. events: {
  420. // 监听子页面发送的福利数据
  421. fundData: (data) => {
  422. this.welfareTag = data;
  423. },
  424. },
  425. });
  426. },
  427. // 跳转页面并接收参数(职位关键词)
  428. goJobSkill() {
  429. uni.navigateTo({
  430. url: "/package/jobIntention/jobSkills",
  431. events: {
  432. skillsUpdated: (data) => {
  433. this.positionTag = data.selectedTags;
  434. },
  435. },
  436. });
  437. },
  438. // 跳转页面并接收参数(工作地址)
  439. goAddAddress() {
  440. uni.navigateTo({
  441. url: "/package/jobIntention/addAddress",
  442. events: {
  443. addressData: (data) => {
  444. this.stationName = data;
  445. },
  446. },
  447. });
  448. },
  449. // 提交表单
  450. submitPost() {
  451. // 验证必填项
  452. if (!this.selectedExper) {
  453. return uni.showToast({
  454. title: "请选择经验要求",
  455. icon: "none"
  456. });
  457. }
  458. if (!this.selectedLevel) {
  459. return uni.showToast({
  460. title: "请选择最低学历",
  461. icon: "none"
  462. });
  463. }
  464. if (!this.selectedSalary) {
  465. return uni.showToast({
  466. title: "请选择薪资范围",
  467. icon: "none"
  468. });
  469. }
  470. if (!this.stationName.fullText && !this.address) {
  471. return uni.showToast({
  472. title: "请填写工作地址",
  473. icon: "none"
  474. });
  475. }
  476. if (!this.stationName.longitude) {
  477. return uni.showToast({
  478. title: "请选择位置",
  479. icon: "none"
  480. });
  481. }
  482. if (!this.positionTag) {
  483. return uni.showToast({
  484. title: "请选择职位标签",
  485. icon: "none"
  486. });
  487. }
  488. var positionTag = this.positionTag
  489. const str = positionTag.join(',');
  490. // 构造提交数据
  491. const data = {
  492. orderid: 1,
  493. postPushId: this.pid,
  494. experience: this.selectedExper, //工作经验
  495. education: this.selectedLevel, //学历
  496. salaryRange: this.selectedSalary, //薪资范围
  497. welfareTag: this.welfareTag, //福利相关标签
  498. positionTag: str, //职位技能
  499. address: this.stationName.fullText|| this.address, //地址
  500. lat: this.stationName.latitude,
  501. lng: this.stationName.longitude,
  502. province: this.stationName.province,
  503. city: this.stationName.city,
  504. county: this.stationName.district,
  505. salaryTimes:this.salaryTimes
  506. };
  507. // 调用接口提交
  508. uni.showLoading({
  509. title: "提交中..."
  510. });
  511. this.$Request.postJson("/app/postPush/savePostPush", data)
  512. .then((res) => {
  513. uni.hideLoading();
  514. if (res.code === 0) {
  515. uni.showToast({
  516. title: "提交成功",
  517. icon: "success"
  518. });
  519. //这里要选择跳转,第一次是要跳公司页,如果是二次就到职位管理页
  520. if (this.status == 1) { //审核中
  521. uni.navigateTo({
  522. url: "/package/jobIntention/company?companyName=" + this.companyName +
  523. '&companyId=' + this.companyId
  524. });
  525. } else {
  526. uni.navigateTo({
  527. url: '/pages/jobManagement/jobManagement'
  528. })
  529. }
  530. } else {
  531. uni.showToast({
  532. title: res.msg || "提交失败",
  533. icon: "none"
  534. });
  535. }
  536. })
  537. .catch((err) => {
  538. uni.hideLoading();
  539. console.error("提交失败:", err);
  540. uni.showToast({
  541. title: "网络异常",
  542. icon: "none"
  543. });
  544. });
  545. },
  546. },
  547. };
  548. </script>
  549. <style lang="scss" scoped>
  550. /* 原有样式保持不变 */
  551. .switch-roles {
  552. background-color: #fff;
  553. position: absolute;
  554. left: 0;
  555. right: 0;
  556. top: 0;
  557. bottom: 0;
  558. display: flex;
  559. flex-direction: column;
  560. .roles-content {
  561. width: 100%;
  562. flex: 1;
  563. overflow: auto;
  564. .content {
  565. padding: 40rpx;
  566. .title {
  567. color: #333;
  568. font-size: 40rpx;
  569. font-weight: 600;
  570. margin-bottom: 10rpx;
  571. }
  572. .desc {
  573. color: #666;
  574. font-size: 24rpx;
  575. margin-bottom: 20rpx;
  576. }
  577. .check-title-big {
  578. color: #3a3943;
  579. font-size: 36rpx;
  580. font-weight: 500;
  581. padding: 20rpx 0;
  582. }
  583. .check-select {
  584. width: 100%;
  585. display: flex;
  586. justify-content: space-between;
  587. align-items: center;
  588. padding: 32rpx 47rpx;
  589. border-radius: 12rpx;
  590. box-shadow: 0 16rpx 300rpx rgba(0, 0, 0, 0.06);
  591. background: #fff;
  592. margin-bottom: 20rpx;
  593. .select-txt {
  594. color: #999;
  595. font-size: 28rpx;
  596. }
  597. }
  598. .txt-desc {
  599. color: #666;
  600. font-size: 24rpx;
  601. margin-top: 20rpx;
  602. line-height: 1.5;
  603. }
  604. }
  605. }
  606. .step {
  607. padding: 32rpx 0;
  608. }
  609. .submit-btn {
  610. margin: 60rpx 20rpx;
  611. padding: 16rpx 32rpx;
  612. border-radius: 999px;
  613. background: linear-gradient(90deg, #0d27f7, #13c1ea);
  614. color: #fff;
  615. font-size: 32rpx;
  616. text-align: center;
  617. line-height: 48rpx;
  618. }
  619. }
  620. </style>