jobPosting.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581
  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">{{isDisabled?'编辑【'+jobInfo.ruleClassifyName+'】':'发布社招'}}岗位</view>
  7. <view class="desc">{{companyName}}</view>
  8. <view class="step">
  9. <u-steps :list="numList" mode="number" :current="0"></u-steps>
  10. </view>
  11. <view class="check-title-big">招聘模式</view>
  12. <view class="check-select radioseletvi">
  13. <radio-group @change="onRadioChange">
  14. <view class="select-txt radioseletview">
  15. <label class="radio radioselet">
  16. <radio value="0" :checked="true" class="radio-size" :disabled="isDisabled" />普通岗位招聘
  17. </label>
  18. <label class="radio radioselet">
  19. <radio value="1" class="radio-size" :disabled="isDisabled"/>急聘
  20. </label>
  21. <text
  22. style="position: absolute;right: 0;bottom: 18px;font-size: 12px;color: rgba(120, 130, 138, 1);">急聘职位剩余{{vipDueTimes}}个</text>
  23. </view>
  24. </radio-group>
  25. </view>
  26. <view class="check-title">招聘类型</view>
  27. <view class="check-box" :class="{ disabled: isDisabled }">
  28. <view class="check-item" :class="{ 'is-check': check == index }" v-for="(item, index) in peopleList"
  29. :key="index" @click="!isDisabled && checkPeople(index)">{{ item }}</view>
  30. </view>
  31. <view class="check-title-big">招聘职位</view>
  32. <view class="check-select" @click="!isDisabledid && goJob()" :class="{ disabled: isDisabledid }">
  33. <view class="select-txt">{{jobInfo.ruleClassifyName}}</view>
  34. <u-icon name="arrow-down" color="#D3D3D6" size="22"></u-icon>
  35. </view>
  36. <view class="check-title-big">岗位描述</view>
  37. <view class="check-select" @click="goJobContent">
  38. <view class="select-txt">{{this.text ? this.text : "介绍工作内容、职位要求" }}</view>
  39. <u-icon name="arrow-down" color="#D3D3D6" size="22"></u-icon>
  40. </view>
  41. <view class="txt-desc">注:职位名称、职位类型等发布后不可修改</view>
  42. </view>
  43. </view>
  44. <view class="submit-btn" @click="goJobPostingSecond">下一步</view>
  45. </view>
  46. </template>
  47. <script>
  48. import navBar from "@/components/nav-bar/index.vue";
  49. export default {
  50. data() {
  51. return {
  52. selectedValue: 0, // 默认选中值
  53. peopleList: ["社招全职", "应届生校园招聘", "实习生招聘", "兼职招聘"],
  54. check: 0,
  55. isDisabled: false,
  56. isDisabledid:false,
  57. isCompanyVip: 0,
  58. vipDueTimes: 0,
  59. postPushId:"",
  60. update:"",
  61. vipPostTimes: 0,
  62. text: "",
  63. status: "",
  64. companyName: "",
  65. companyId: "",
  66. numList: [{
  67. name: "填写基本信息",
  68. },
  69. {
  70. name: "选择职位要求",
  71. },
  72. ],
  73. jobInfo: {
  74. ruleClassifyId: '',
  75. ruleClassifyName: '请选择要招聘的职位',
  76. price: ''
  77. }
  78. };
  79. },
  80. components: {
  81. navBar,
  82. },
  83. onLoad(options) {
  84. // 接收上个页面传递的公司名称参数
  85. if(options.postPushId){
  86. this.postPushId=options.postPushId
  87. this.getInfo()
  88. }
  89. if(options.type){
  90. this.update=decodeURIComponent(options.type);
  91. this.isDisabled = true;
  92. }
  93. if (options.companyName) {
  94. this.companyName = decodeURIComponent(options.companyName);
  95. }else{
  96. this.companyName = uni.getStorageSync('companyName')
  97. }
  98. this.descListener = uni.$on("jobDescUpdated", (data) => {
  99. this.text = data.desc; // 赋值给当前页变量
  100. });
  101. this.jobListener = uni.$on('jobs', (data) => {
  102. console.log('接收从B页传来的数据:', data);
  103. // 手动更新 A 页的 data
  104. this.jobInfo = data;
  105. });
  106. if (options.companyId) {
  107. this.companyId = options.companyId;
  108. }else{
  109. this.companyId = uni.getStorageSync('companyId')
  110. }
  111. if (options.status) {
  112. this.status = options.status;
  113. }else{
  114. this.status = uni.getStorageSync('companyStatus')
  115. }
  116. this.isCompanyVip = uni.getStorageSync('isCompanyVip') || 0
  117. this.vipDueTimes = uni.getStorageSync('vipDueTimes') || 0
  118. this.vipPostTimes = uni.getStorageSync('vipPostTimes') || 0
  119. console.log('接收的公司名称:', this.companyName);
  120. console.log("收到岗位描述数据:", this.text);
  121. console.log('接收的公司ID:', this.companyId);
  122. console.log('接收的公司状态:', this.status);
  123. },
  124. onUnload() {
  125. // 页面卸载时移除监听,避免内存泄漏
  126. uni.$off('jobs', this.jobListener);
  127. },
  128. methods: {
  129. goBusinessLicense() {
  130. uni.navigateTo({
  131. url: "/pages/my/businessLicense"
  132. });
  133. },
  134. checkPeople(index) {
  135. this.check = index;
  136. },
  137. goJob() {
  138. uni.navigateTo({
  139. url: "/package/jobIntention/jobList",
  140. });
  141. },
  142. goJobContent() {
  143. uni.navigateTo({
  144. url: `/package/jobIntention/editJob?text=${this.text}`,
  145. });
  146. },
  147. /**
  148. * 获取岗位详情
  149. */
  150. getInfo(){
  151. this.$Request.getT("/app/postPush/selectPostPushDetails",{
  152. // userId:uni.getStorageSync('userId'),
  153. postPushId:this.postPushId
  154. }).then(res => {
  155. if(res.code==0){
  156. this.jobInfo = res.data
  157. this.text=res.data.positionDetails
  158. if(!this.jobInfo?.ruleClassifyId){
  159. this.isDisabledid=false
  160. }else{
  161. this.isDisabledid=true
  162. }
  163. }
  164. })
  165. },
  166. //radio 选中变化时触发
  167. onRadioChange(e) {
  168. // 获取选中的值
  169. // 根据值做不同处理
  170. if (this.selectedValue === 0) {
  171. console.log('选中了:普通岗位招聘');
  172. // 执行普通岗位招聘的逻辑
  173. } else if (this.selectedValue === 1) {
  174. console.log('选中了:急聘');
  175. if (!this.isCompanyVip) {
  176. uni.showToast({
  177. title: '对不起,您还不是会员,不能发布急聘。',
  178. icon: 'none',
  179. duration: 2000
  180. });
  181. return
  182. }
  183. if (this.vipDueTimes < 1) {
  184. uni.showToast({
  185. title: '对不起,您的次数已经用完,不能发布。',
  186. icon: 'none',
  187. duration: 2000
  188. });
  189. return
  190. }
  191. // 执行急聘的逻辑
  192. }
  193. this.selectedValue = e.detail.value;
  194. },
  195. //提交
  196. goJobPostingSecond() {
  197. // 显示加载中
  198. uni.showLoading({
  199. title: '提交中...'
  200. });
  201. //校验数据
  202. // 校验数据
  203. const validate = () => {
  204. // 2. 校验岗位描述(positionDetails)
  205. if (!this.text || this.text.trim() === '') {
  206. uni.hideLoading();
  207. uni.showToast({
  208. title: '岗位描述不能为空',
  209. icon: 'none',
  210. duration: 2000
  211. });
  212. return false;
  213. }
  214. if (this.text.length > 500) {
  215. uni.hideLoading();
  216. uni.showToast({
  217. title: '岗位描述不能超过500字',
  218. icon: 'none',
  219. duration: 2000
  220. });
  221. return false;
  222. }
  223. // 校验是否包含违规内容(简单示例,可根据实际需求扩展)
  224. const illegalChars = /QQ|微信|电话|手机号|\?/g;
  225. if (illegalChars.test(this.text)) {
  226. uni.hideLoading();
  227. uni.showToast({
  228. title: '岗位描述不能包含联系方式或特殊符号',
  229. icon: 'none',
  230. duration: 2000
  231. });
  232. return false;
  233. }
  234. // 3. 校验岗位分类信息(假设ruleClassifyId是必选)
  235. if (!this.jobInfo?.ruleClassifyId) {
  236. uni.hideLoading();
  237. uni.showToast({
  238. title: '请选择岗位分类',
  239. icon: 'none',
  240. duration: 2000
  241. });
  242. return false;
  243. }
  244. if (!this.jobInfo?.ruleClassifyName || this.jobInfo?.ruleClassifyName == '请选择要招聘的职位') {
  245. uni.hideLoading();
  246. uni.showToast({
  247. title: '岗位分类名称异常,请重新选择',
  248. icon: 'none',
  249. duration: 2000
  250. });
  251. return false;
  252. }
  253. // 4. 校验orderId(如果有实际业务含义,可根据需求调整)
  254. // if (!this.orderId || this.orderId < 1) {
  255. // uni.hideLoading();
  256. // uni.showToast({
  257. // title: '订单信息异常',
  258. // icon: 'none',
  259. // duration: 2000
  260. // });
  261. // return false;
  262. // }
  263. // 所有校验通过
  264. return true;
  265. };
  266. // 执行校验,通过后再提交
  267. if (!validate()) {
  268. return; // 校验失败,终止提交
  269. }
  270. if (this.selectedValue == 1) {//急聘刚
  271. if (!this.isCompanyVip) {
  272. uni.showToast({
  273. title: '对不起,您还不是会员,不能发布急聘。',
  274. icon: 'none',
  275. duration: 2000
  276. });
  277. return
  278. }
  279. if (this.vipDueTimes < 1) {
  280. uni.showToast({
  281. title: '对不起,您的次数已经用完,不能发布。',
  282. icon: 'none',
  283. duration: 2000
  284. });
  285. return
  286. }
  287. }
  288. const data = {
  289. postPushId:this.postPushId,
  290. type: this.check,
  291. isDue: this.selectedValue,
  292. companyId:(this.companyId === undefined || this.companyId === 'undefined') ? '' : this.companyId,
  293. positionDetails: this.text,
  294. ruleClassifyId: this.jobInfo.ruleClassifyId,
  295. ruleClassifyName: this.jobInfo.ruleClassifyName,
  296. orderId: 1
  297. }
  298. // 发送请求
  299. this.$Request.postJson("/app/postPush/savePostPush", data)
  300. .then((res) => {
  301. uni.hideLoading();
  302. if (res.code === 0) {
  303. uni.showToast({
  304. title: '提交成功',
  305. icon: 'success'
  306. });
  307. console.log("sssssss", this.companyId)
  308. var pid = res.data || ""
  309. if (!pid) {
  310. uni.showToast({
  311. title: '系统错误,请重新提交',
  312. icon: 'none'
  313. });
  314. return
  315. }
  316. // 提交成功后跳转到职位发布页面
  317. setTimeout(() => {
  318. uni.navigateTo({
  319. url: "/pages/my/jobPostingSecond?pid=" + pid + "&status=" + this
  320. .status + "&companyName=" + this.companyName + '&companyId=' +
  321. this.companyId+'&type='+this.update
  322. });
  323. }, 1500);
  324. } else {
  325. uni.showToast({
  326. title: res.msg || '提交失败,请重试',
  327. icon: 'none'
  328. });
  329. }
  330. })
  331. .catch((err) => {
  332. uni.hideLoading();
  333. console.error('请求失败:', err);
  334. uni.showToast({
  335. title: '网络异常,请稍后重试',
  336. icon: 'none'
  337. });
  338. });
  339. }
  340. },
  341. };
  342. </script>
  343. <style lang="scss" scoped>
  344. .switch-roles {
  345. background-color: #fff;
  346. position: absolute;
  347. left: 0;
  348. right: 0;
  349. top: 0;
  350. bottom: 0;
  351. display: flex;
  352. flex-direction: column;
  353. .roles-content {
  354. width: 100%;
  355. flex: 1;
  356. overflow: hidden;
  357. overflow-y: auto;
  358. .content {
  359. padding: 40rpx;
  360. box-sizing: border-box;
  361. display: flex;
  362. flex-direction: column;
  363. align-items: center;
  364. justify-content: center;
  365. .title {
  366. color: #333;
  367. width: 100%;
  368. font-family: DM Sans;
  369. font-size: 40rpx;
  370. font-weight: 600;
  371. }
  372. .desc {
  373. color: rgba(102, 102, 102, 1);
  374. width: 100%;
  375. font-family: DM Sans;
  376. font-size: 24rpx;
  377. font-weight: 400;
  378. line-height: 32rpx;
  379. letter-spacing: 0.5%;
  380. text-align: left;
  381. padding: 20rpx 0;
  382. box-sizing: border-box;
  383. }
  384. .check-title {
  385. width: 100%;
  386. color: rgba(31, 44, 55, 1);
  387. font-family: DM Sans;
  388. font-size: 28rpx;
  389. font-weight: 500;
  390. line-height: 44rpx;
  391. margin-top: 20rpx;
  392. margin-bottom: 16rpx;
  393. }
  394. .check-title-big {
  395. color: rgba(58, 57, 67, 1);
  396. font-family: DM Sans;
  397. font-size: 36rpx;
  398. font-weight: 500;
  399. line-height: 48rpx;
  400. width: 100%;
  401. padding: 20rpx 0;
  402. box-sizing: border-box;
  403. }
  404. .check-select {
  405. width: 100%;
  406. display: flex;
  407. justify-content: space-between;
  408. align-items: center;
  409. border-radius: 12rpx;
  410. box-shadow: 0px 16rpx 300rpx 0px rgba(0, 0, 0, 0.06);
  411. background: rgba(255, 255, 255, 1);
  412. padding: 32rpx 47rpx;
  413. box-sizing: border-box;
  414. .select-txt {}
  415. }
  416. /* 禁用状态样式 */
  417. .check-select.disabled {
  418. background-color: #f5f5f5;
  419. opacity: 0.6;
  420. pointer-events: none; /* 防止点击穿透 */
  421. }
  422. .check-select.disabled .select-txt {
  423. color: #999; /* 文字变灰 */
  424. }
  425. .check-select.disabled u-icon {
  426. color: #ccc; /* 图标变灰 */
  427. }
  428. /* 禁用状态样式 */
  429. .check-box.disabled {
  430. opacity: 0.6;
  431. }
  432. .check-box.disabled .check-item {
  433. pointer-events: none;
  434. background-color: #e9e9e9;
  435. color: #999;
  436. }
  437. .check-box.disabled .check-item.is-check {
  438. background-color: #b3d1ff;
  439. color: #666;
  440. }
  441. .radioseletvi {
  442. position: relative;
  443. }
  444. .radioseletview {
  445. display: flex;
  446. flex-direction: column;
  447. justify-content: space-between;
  448. font-size: 14px;
  449. }
  450. .radioselet {
  451. display: block;
  452. margin-top: 10px;
  453. }
  454. .radio-size {
  455. transform: scale(0.5);
  456. /* 放大到1.5倍,可根据需要调整数值 */
  457. /* 可选:调整位置避免偏移 */
  458. }
  459. .check-box {
  460. width: 100%;
  461. display: grid;
  462. grid-template-columns: repeat(2, 1fr);
  463. gap: 24rpx;
  464. .check-item {
  465. border-radius: 16rpx;
  466. background: rgba(245, 248, 254, 1);
  467. color: rgba(153, 153, 153, 1);
  468. font-family: DM Sans;
  469. font-size: 28rpx;
  470. font-weight: 400;
  471. line-height: 44rpx;
  472. text-align: center;
  473. padding: 12rpx 48rpx;
  474. box-sizing: border-box;
  475. }
  476. .is-check {
  477. box-sizing: border-box;
  478. border: 1rpx solid #016bf6;
  479. border-radius: 16rpx;
  480. background: rgba(252, 233, 220, 1);
  481. color: #016bf6;
  482. }
  483. }
  484. }
  485. }
  486. .step {
  487. width: 100%;
  488. padding: 32rpx 0;
  489. box-sizing: border-box;
  490. }
  491. .submit-btn {
  492. flex-shrink: 0;
  493. border-radius: 999px;
  494. box-shadow: 0px 2px 4px 0px rgba(9, 196, 116, 0.3);
  495. background: linear-gradient(90deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
  496. color: rgba(255, 255, 255, 1);
  497. font-family: DM Sans;
  498. font-size: 32rpx;
  499. font-weight: 400;
  500. line-height: 48rpx;
  501. display: flex;
  502. justify-content: center;
  503. align-items: center;
  504. padding: 16rpx 32rpx;
  505. box-sizing: border-box;
  506. margin: 60rpx 20rpx;
  507. }
  508. .txt-desc {
  509. color: rgba(102, 102, 102, 1);
  510. font-family: DM Sans;
  511. font-size: 24rpx;
  512. font-weight: 400;
  513. line-height: 32rpx;
  514. text-align: left;
  515. width: 100%;
  516. margin-top: 20rpx;
  517. }
  518. }
  519. </style>