choreInformation.vue 11 KB

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