choreInformation.vue 11 KB

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