jobInformation.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571
  1. <template>
  2. <view>
  3. <u-navbar back-text="用工信息" back-icon-size="0" :customBack="customBack" back-icon-color="#ffffff"
  4. :background="{backgroundColor: '#2795FD',}" :back-text-style="{color: '#ffffff'}"></u-navbar>
  5. <!-- 搜索框 -->
  6. <view class="search">
  7. <view class="search-box">
  8. <view class="option">
  9. <nxsearch :selectList="selectList" button="inside" @search="doSearch" @confirm="doSearc"
  10. :setIsFocus="false" @focus="gotoUrl('pages/packages/search/search')"
  11. v-model="searchQuery.keyword" placeholder="输入关键字找工作" />
  12. </view>
  13. </view>
  14. </view>
  15. <!-- 搜索结果 -->
  16. <view class="result">
  17. <view class="tabs">
  18. <view class="left">
  19. <u-tabs bg-color="#F0F0F2" :list="tabList" :is-scroll="false" :current="current"
  20. @change="change"></u-tabs>
  21. </view>
  22. <view class="screen" @click="popupShow = true">
  23. <view class="icon">
  24. <img src="@/assets/img/riLine-filter-line@1x.png" alt="">
  25. </view>
  26. <view>筛选</view>
  27. </view>
  28. </view>
  29. <view class="result-item" v-for="(item,i) in tabList[current].list" :key="i"
  30. @click="gotoUrl('pages/packages/jobInformation/jobDetails?id='+item.id)">
  31. <view class="content-1">
  32. <!-- 职位 -->
  33. <view class="position">
  34. {{item.positionName}}
  35. </view>
  36. <!-- 薪水 -->
  37. <view class="salary">
  38. {{item.salary}}元/天
  39. </view>
  40. </view>
  41. <view class="content-2">
  42. <!-- 标签 -->
  43. <view class="tag">
  44. <view class="tag-item">
  45. {{item.settlementMethodN}}
  46. </view>
  47. </view>
  48. <!-- 日期 -->
  49. <view class="date">
  50. {{item.createTime}}
  51. </view>
  52. </view>
  53. <view class="content-3">
  54. <view class="issuer">
  55. {{item.contacts}}
  56. </view>
  57. <view class="address">
  58. {{item.workArea}}
  59. </view>
  60. </view>
  61. </view>
  62. <u-divider v-if="tabList[current].recordsTotal==tabList[current].list.length"
  63. :isnone="tabList[current].recordsTotal==0" nonetext="没有找到相关内容"
  64. border-color="#CFD2D5">已经到底了</u-divider>
  65. </view>
  66. <!-- 筛选框 -->
  67. <u-popup v-model="popupShow" @open="popupShowOpen" mode="bottom" border-radius="20" :closeable="true">
  68. <view class="popup-content">
  69. <view class="headline">
  70. 筛选
  71. </view>
  72. <!-- 行业 -->
  73. <view class="industry">
  74. <view class="title">
  75. 行业
  76. </view>
  77. <!-- 选项 -->
  78. <view class="options">
  79. <view :class="{item,checked:isChecked==index}" v-for="(item,index) in industryList" :key="index"
  80. @click="changeChecked(index)">
  81. <!-- 快递跑腿/配送/分拣 -->{{item.name}}
  82. </view>
  83. </view>
  84. </view>
  85. <!-- 结算方式 -->
  86. <view class="clearing-form" v-if="false">
  87. <view class="title">
  88. 结算方式
  89. </view>
  90. <!-- 选项 -->
  91. <view class="options">
  92. <view :class="{item,checked:wayChecked==index}" v-for="(item,index) in wayList" :key="index"
  93. @click="changeWayChecked(index)">
  94. {{item.name}}
  95. </view>
  96. </view>
  97. </view>
  98. <!-- 薪资形式 -->
  99. <view class="salary-form" v-if="false">
  100. <view class="title">
  101. 薪资形式
  102. </view>
  103. <!-- 选项 -->
  104. <view class="options ">
  105. <view :class="{item,checked:saralyChecked==index}" v-for="(item,index) in salaryList"
  106. :key="index" @click="changeSaralyChecked(index)">
  107. {{item.name}}
  108. </view>
  109. </view>
  110. </view>
  111. <view class="button">
  112. <button class="reset" @click="reset()">重置</button>
  113. <button class="confirm" @click="queryBtn()" >确认</button>
  114. </view>
  115. </view>
  116. </u-popup>
  117. <tabbar :current="1"></tabbar>
  118. </view>
  119. </template>
  120. <script>
  121. import * as API from '@/apis/pagejs/tab.js'
  122. import tabbar from "@/components/Tabbar.vue"
  123. import * as API_weixin from '@/apis/weixin.js'
  124. import nxsearch from "@/components/nx-search.vue"
  125. export default {
  126. components: {
  127. nxsearch,
  128. tabbar
  129. },
  130. data() {
  131. return {
  132. keyword: '',
  133. popupShow: false,
  134. isChecked: -1,
  135. wayChecked: -1,
  136. saralyChecked: -1,
  137. searchQuery: {
  138. keyword: '',
  139. selectIndex: 0
  140. },
  141. tabList: [{
  142. name: '最新',
  143. pageIndex: 1,
  144. pageSize: 20,
  145. statusType:"",
  146. list:[],
  147. recordsTotal:0
  148. }, {
  149. name: '日结',
  150. unit:"日",
  151. statusType:"1",
  152. pageIndex: 1,
  153. pageSize: 20,
  154. list:[],
  155. recordsTotal:0
  156. }, {
  157. name: '周结',
  158. unit:"周",
  159. pageIndex: 1,
  160. pageSize: 20,
  161. statusType:"2",
  162. list:[],
  163. recordsTotal:0
  164. }, {
  165. name: '月结',
  166. unit:"月",
  167. pageIndex: 1,
  168. pageSize: 20,
  169. statusType:"3",
  170. list:[],
  171. recordsTotal:0
  172. }],
  173. industryList: [
  174. ],
  175. wayList: [{
  176. name: '日结'
  177. },
  178. {
  179. name: '周结'
  180. },
  181. {
  182. name: '月结'
  183. },
  184. {
  185. name: '完工结算'
  186. }
  187. ],
  188. salaryList: [{
  189. name: '计件'
  190. },
  191. {
  192. name: '计时'
  193. },
  194. {
  195. name: '定额'
  196. }
  197. ],
  198. selectList: [{
  199. id: 0,
  200. name: '找工作'
  201. },
  202. ],
  203. current: 0,
  204. queryForm:{
  205. status:0
  206. }
  207. }
  208. },
  209. onLoad(op) {
  210. this.findRecruitSearch();
  211. },
  212. onReachBottom() {
  213. var obj = this.tabList[this.current]
  214. if (obj.list.length < obj.recordsTotal) {
  215. this.myLoadmore();
  216. }
  217. },
  218. methods: {
  219. queryBtn(){
  220. this.popupShow=false;
  221. this.current = 0;
  222. this.tabList[this.current].list=[]
  223. this.tabList[this.current].pageIndex = 1;
  224. if(this.isChecked!=-1){
  225. this.queryForm.industry=this.industryList[this.isChecked].value
  226. }
  227. this.findRecruitSearch()
  228. },
  229. popupShowOpen(){
  230. if(this.industryList.length==0){
  231. uni.showLoading({
  232. title: "加载中",
  233. mask: true,
  234. })
  235. API_weixin.findListByCatalogName({
  236. name:'意向行业',
  237. }).then((res) => {
  238. uni.hideLoading();
  239. this.industryList=res.data.dictionaryList
  240. }).catch(error => {
  241. uni.showToast({
  242. title: error
  243. })
  244. //this.getPhone()
  245. })
  246. }
  247. },
  248. myLoadmore() {
  249. this.tabList[this.current].pageIndex += 1;
  250. this.findRecruitSearch();
  251. },
  252. findRecruitSearch(){
  253. uni.showLoading({
  254. title: "加载中",
  255. mask: true,
  256. })
  257. var list = this.tabList[this.current].list
  258. var obj = this.tabList[this.current]
  259. var listForm = {
  260. ...obj,
  261. ...this.queryForm
  262. }
  263. delete listForm.list
  264. API.findRecruitSearch(listForm).then((res) => {
  265. if (listForm.pageIndex == 1) {
  266. list = res.data.data;
  267. } else {
  268. list = [
  269. ...list,
  270. ...res.data.data
  271. ];
  272. }
  273. this.tabList[this.current].list = list
  274. this.tabList[this.current].recordsTotal = res.data.recordsTotal;
  275. uni.hideLoading();
  276. }).catch(error => {
  277. uni.showToast({
  278. title: error,
  279. icon: "none"
  280. })
  281. })
  282. },
  283. customBack() {
  284. },
  285. // 执行搜索
  286. doSearch(searchQuery) {
  287. console.log('searchQuery', searchQuery);
  288. this.searchQuery=searchQuery;
  289. },
  290. change(index) {
  291. this.current = index;
  292. var list = this.tabList[this.current].list
  293. if (list.length == 0) {
  294. this.findRecruitSearch();
  295. }
  296. },
  297. changeChecked(index) {
  298. this.isChecked = index;
  299. },
  300. changeWayChecked(index) {
  301. this.wayChecked = index;
  302. },
  303. changeSaralyChecked(index) {
  304. this.saralyChecked = index;
  305. },
  306. reset() {
  307. this.isChecked = -1;
  308. this.queryForm.industry=""
  309. this.wayChecked = -1;
  310. this.saralyChecked = -1;
  311. this.queryBtn()
  312. }
  313. }
  314. }
  315. </script>
  316. <style>
  317. page {
  318. background: #F0F0F2;
  319. padding-bottom: 50px;
  320. }
  321. </style>
  322. <style lang="scss" scoped>
  323. .search {
  324. background-color: #fff;
  325. padding: 16rpx 32rpx;
  326. .search-box {
  327. border-radius: 50px;
  328. height: 72rpx;
  329. line-height: 72rpx;
  330. }
  331. }
  332. // 搜索结果
  333. .result {
  334. background-color: #fff;
  335. .tabs {
  336. padding-right: 32rpx;
  337. display: flex;
  338. justify-content: space-between;
  339. align-items: center;
  340. border-bottom: 1px solid #f1f1f1;
  341. .left {
  342. width: 68%;
  343. /deep/.u-tabs {
  344. background-color: #fff !important;
  345. }
  346. }
  347. .screen {
  348. display: flex;
  349. align-items: center;
  350. color: rgba(39, 149, 253, 1);
  351. font-size: 16px;
  352. img {
  353. width: 16px;
  354. height: 16px;
  355. vertical-align: middle;
  356. margin-right: 4rpx;
  357. }
  358. }
  359. }
  360. .result-item {
  361. padding: 24rpx 0;
  362. margin: 0 32rpx;
  363. border-bottom: 1px solid #F0F0F2;
  364. .content-1 {
  365. display: flex;
  366. justify-content: space-between;
  367. align-items: center;
  368. // 职位
  369. .position {
  370. color: rgba(16, 16, 16, 1);
  371. font-size: 36rpx;
  372. font-family: 'PingFang Medium';
  373. }
  374. // 薪水
  375. .salary {
  376. color: rgba(255, 61, 0, 1);
  377. font-size: 32rpx;
  378. font-family: 'PingFang Medium';
  379. }
  380. }
  381. .content-2 {
  382. margin-top: 12rpx;
  383. display: flex;
  384. justify-content: space-between;
  385. // 标签
  386. .tag {
  387. display: flex;
  388. .tag-item {
  389. width: 64rpx;
  390. height: 36rpx;
  391. line-height: 36rpx;
  392. border-radius: 8rpx;
  393. background-color: rgba(241, 241, 247, 1);
  394. color: rgba(129, 127, 153, 1);
  395. font-size: 24rpx;
  396. text-align: center;
  397. margin-right: 12rpx;
  398. }
  399. }
  400. // 日期
  401. .date {
  402. color: rgba(153, 153, 153, 1);
  403. font-size: 24rpx;
  404. }
  405. }
  406. .content-3 {
  407. margin-top: 20rpx;
  408. display: flex;
  409. justify-content: space-between;
  410. align-items: center;
  411. .issuer {
  412. color: rgba(51, 51, 51, 1);
  413. font-size: 24rpx;
  414. }
  415. .address {
  416. color: rgba(51, 51, 51, 1);
  417. font-size: 24rpx;
  418. }
  419. }
  420. }
  421. }
  422. // 筛选框
  423. .popup-content {
  424. padding: 32rpx;
  425. .headline {
  426. color: #101010;
  427. font-size: 40rpx;
  428. text-align: center;
  429. }
  430. //行业
  431. .industry,
  432. .clearing-form,
  433. .salary-form {
  434. margin-top: 16rpx;
  435. margin-bottom: 176rpx;
  436. .title {
  437. font-size: 32rpx;
  438. color: #111111;
  439. }
  440. // 选项
  441. .options {
  442. display: flex;
  443. justify-content: space-between;
  444. flex-wrap: wrap;
  445. margin-top: 24rpx;
  446. .item {
  447. height: 56rpx;
  448. line-height: 56rpx;
  449. padding: 0 32rpx;
  450. margin-bottom: 16rpx;
  451. color: #999999;
  452. background-color: #F3F3F4;
  453. border-radius: 4px;
  454. }
  455. .checked {
  456. background-color: #2795FD;
  457. color: #fff;
  458. }
  459. }
  460. }
  461. .button {
  462. display: flex;
  463. margin-top: 8rpx;
  464. .reset {
  465. color: #999999;
  466. background-color: #F3F3F4;
  467. width: 200rpx;
  468. height: 72rpx;
  469. line-height: 72rpx;
  470. border-radius: 8px;
  471. }
  472. .confirm {
  473. width: 440rpx;
  474. background-color: #2795FD;
  475. color: #fff;
  476. height: 72rpx;
  477. line-height: 72rpx;
  478. border-radius: 8px;
  479. }
  480. }
  481. }
  482. .salary-form,
  483. .clearing-form {
  484. .options {
  485. justify-content: start !important;
  486. }
  487. .item {
  488. margin-right: 24rpx;
  489. }
  490. }
  491. /deep/.u-close--top-right {
  492. top: 44rpx;
  493. }
  494. </style>