jobInformation.vue 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477
  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"
  10. @search="doSearch" @confirm="doSearc" :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 in 3"
  30. @click="gotoUrl('pages/packages/jobInformation/jobDetails')" >
  31. <view class="content-1">
  32. <!-- 职位 -->
  33. <view class="position">
  34. 摄影助理
  35. </view>
  36. <!-- 薪水 -->
  37. <view class="salary">
  38. 200元/天
  39. </view>
  40. </view>
  41. <view class="content-2">
  42. <!-- 标签 -->
  43. <view class="tag">
  44. <view class="tag-item">
  45. 个人
  46. </view>
  47. <view class="tag-item">
  48. 日结
  49. </view>
  50. </view>
  51. <!-- 日期 -->
  52. <view class="date">
  53. 2023-06-01
  54. </view>
  55. </view>
  56. <view class="content-3">
  57. <view class="issuer">
  58. 李先生
  59. </view>
  60. <view class="address">
  61. 锦佳酒店
  62. </view>
  63. </view>
  64. </view>
  65. </view>
  66. <!-- 筛选框 -->
  67. <u-popup v-model="popupShow" @close="close" 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">
  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">
  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" :key="index"
  106. @click="changeSaralyChecked(index)" >
  107. {{item.name}}
  108. </view>
  109. </view>
  110. </view>
  111. <view class="button">
  112. <button class="reset">重置</button>
  113. <button class="confirm">确认</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 nxsearch from "@/components/nx-search.vue"
  124. export default {
  125. components: {
  126. nxsearch,
  127. tabbar
  128. },
  129. data() {
  130. return {
  131. keyword: '',
  132. popupShow:false,
  133. isChecked: -1,
  134. wayChecked:-1,
  135. saralyChecked:-1,
  136. searchQuery: {
  137. keyword: '',
  138. selectIndex: 0
  139. },
  140. tabList:[{
  141. name:'最新'
  142. },
  143. {
  144. name:'日结'
  145. },
  146. {
  147. name:'周结'
  148. },
  149. {
  150. name:'月结'
  151. }
  152. ],
  153. industryList: [{
  154. name: '快递跑腿/配送/分拣1'
  155. },
  156. {
  157. name: '快递跑腿/配送/分拣2'
  158. },
  159. {
  160. name: '快递跑腿/配送/分拣3'
  161. },
  162. {
  163. name: '快递跑腿/配送/分拣4'
  164. },
  165. {
  166. name: '快递跑腿/配送/分拣5'
  167. }
  168. ],
  169. wayList:[{
  170. name:'日结'
  171. },
  172. {
  173. name:'周结'
  174. },
  175. {
  176. name:'月结'
  177. },
  178. {
  179. name:'完工结算'
  180. }],
  181. salaryList:[{
  182. name:'计件'
  183. },
  184. {
  185. name:'计时'
  186. },
  187. {
  188. name:'定额'
  189. }],
  190. selectList: [{
  191. id: 1,
  192. name: '找零工'
  193. },
  194. // {
  195. // id: 2,
  196. // name: '找公司'
  197. // },
  198. ],
  199. current: 0
  200. }
  201. },
  202. methods: {
  203. customBack(){
  204. },
  205. // 执行搜索
  206. doSearch(searchQuery) {
  207. console.log('searchQuery', searchQuery);
  208. },
  209. change(index) {
  210. this.current = index;
  211. },
  212. changeChecked(index) {
  213. this.isChecked = index;
  214. },
  215. changeWayChecked(index){
  216. this.wayChecked = index;
  217. },
  218. changeSaralyChecked(index){
  219. this.saralyChecked = index;
  220. },
  221. close(){
  222. this.isChecked = -1;
  223. this.wayChecked = -1;
  224. this.saralyChecked = -1;
  225. }
  226. }
  227. }
  228. </script>
  229. <style>
  230. page {
  231. background: #F0F0F2;
  232. padding-bottom: 50px;
  233. }
  234. </style>
  235. <style lang="scss" scoped>
  236. .search {
  237. background-color: #fff;
  238. padding: 16rpx 32rpx;
  239. .search-box {
  240. border-radius: 50px;
  241. height: 72rpx;
  242. line-height: 72rpx;
  243. }
  244. }
  245. // 搜索结果
  246. .result {
  247. background-color: #fff;
  248. .tabs {
  249. padding-right: 32rpx;
  250. display: flex;
  251. justify-content: space-between;
  252. align-items: center;
  253. border-bottom: 1px solid #f1f1f1;
  254. .left {
  255. width: 68%;
  256. /deep/.u-tabs {
  257. background-color: #fff !important;
  258. }
  259. }
  260. .screen {
  261. display: flex;
  262. align-items: center;
  263. color: rgba(39, 149, 253, 1);
  264. font-size: 16px;
  265. img {
  266. width: 16px;
  267. height: 16px;
  268. vertical-align: middle;
  269. margin-right: 4rpx;
  270. }
  271. }
  272. }
  273. .result-item {
  274. padding: 24rpx 0;
  275. margin: 0 32rpx;
  276. border-bottom: 1px solid #F0F0F2;
  277. .content-1 {
  278. display: flex;
  279. justify-content: space-between;
  280. align-items: center;
  281. // 职位
  282. .position {
  283. color: rgba(16, 16, 16, 1);
  284. font-size: 36rpx;
  285. font-family: 'PingFang Medium';
  286. }
  287. // 薪水
  288. .salary {
  289. color: rgba(255, 61, 0, 1);
  290. font-size: 32rpx;
  291. font-family: 'PingFang Medium';
  292. }
  293. }
  294. .content-2 {
  295. margin-top: 12rpx;
  296. display: flex;
  297. justify-content: space-between;
  298. // 标签
  299. .tag {
  300. display: flex;
  301. .tag-item {
  302. width: 64rpx;
  303. height: 36rpx;
  304. line-height: 36rpx;
  305. border-radius: 8rpx;
  306. background-color: rgba(241, 241, 247, 1);
  307. color: rgba(129, 127, 153, 1);
  308. font-size: 24rpx;
  309. text-align: center;
  310. margin-right: 12rpx;
  311. }
  312. }
  313. // 日期
  314. .date {
  315. color: rgba(153, 153, 153, 1);
  316. font-size: 24rpx;
  317. }
  318. }
  319. .content-3 {
  320. margin-top: 20rpx;
  321. display: flex;
  322. justify-content: space-between;
  323. align-items: center;
  324. .issuer {
  325. color: rgba(51, 51, 51, 1);
  326. font-size: 24rpx;
  327. }
  328. .address {
  329. color: rgba(51, 51, 51, 1);
  330. font-size: 24rpx;
  331. }
  332. }
  333. }
  334. }
  335. // 筛选框
  336. .popup-content {
  337. padding: 32rpx;
  338. .headline {
  339. color: #101010;
  340. font-size: 40rpx;
  341. text-align: center;
  342. }
  343. //行业
  344. .industry,.clearing-form,.salary-form{
  345. margin-top: 16rpx;
  346. .title {
  347. font-size: 32rpx;
  348. color: #111111;
  349. }
  350. // 选项
  351. .options {
  352. display: flex;
  353. justify-content: space-between;
  354. flex-wrap: wrap;
  355. margin-top: 24rpx;
  356. .item {
  357. height: 56rpx;
  358. line-height: 56rpx;
  359. padding: 0 32rpx;
  360. margin-bottom: 16rpx;
  361. color: #999999;
  362. background-color: #F3F3F4;
  363. border-radius: 4px;
  364. }
  365. .checked {
  366. background-color: #2795FD;
  367. color: #fff;
  368. }
  369. }
  370. }
  371. .button{
  372. display: flex;
  373. margin-top:8rpx;
  374. .reset{
  375. color: #999999;
  376. background-color: #F3F3F4;
  377. width: 200rpx;
  378. height: 72rpx;
  379. line-height: 72rpx;
  380. border-radius: 8px;
  381. }
  382. .confirm{
  383. width: 440rpx;
  384. background-color: #2795FD;
  385. color: #fff;
  386. height: 72rpx;
  387. line-height: 72rpx;
  388. border-radius: 8px;
  389. }
  390. }
  391. }
  392. .salary-form,.clearing-form{
  393. .options{
  394. justify-content: start !important;
  395. }
  396. .item{
  397. margin-right: 24rpx;
  398. }
  399. }
  400. /deep/.u-close--top-right {
  401. top: 44rpx;
  402. }
  403. </style>