|
|
@@ -21,7 +21,7 @@
|
|
|
<u-tabs bg-color="#F0F0F2" :list="tabList" :is-scroll="false" :current="current"
|
|
|
@change="change"></u-tabs>
|
|
|
</view>
|
|
|
- <view class="screen">
|
|
|
+ <view class="screen" @click="popupShow = true">
|
|
|
<view class="icon">
|
|
|
<img src="../../assets/img/riLine-filter-line@1x.png" alt="">
|
|
|
</view>
|
|
|
@@ -66,8 +66,44 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
-
|
|
|
+ <!-- 筛选框 -->
|
|
|
+ <u-popup v-model="popupShow" @close="close" mode="bottom" border-radius="20" :closeable="true">
|
|
|
+ <view class="popup-content" >
|
|
|
+ <view class="headline">
|
|
|
+ 筛选
|
|
|
+ </view>
|
|
|
+ <!-- 薪资待遇 -->
|
|
|
+ <view class="salary-package">
|
|
|
+ <view class="title">
|
|
|
+ 薪资待遇
|
|
|
+ </view>
|
|
|
+ <!-- 选项 -->
|
|
|
+ <view class="options">
|
|
|
+ <view :class="{item,checked:saralyChecked==index}" v-for="(item,index) in salaryList" :key="index"
|
|
|
+ @click="changeSaralyChecked(index)" >
|
|
|
+ {{item.name}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 工作经验 -->
|
|
|
+ <view class="work-experience">
|
|
|
+ <view class="title">
|
|
|
+ 工作经验
|
|
|
+ </view>
|
|
|
+ <!-- 选项 -->
|
|
|
+ <view class="options">
|
|
|
+ <view :class="{item,checked:workChecked==index}" v-for="(item,index) in workList" :key="index"
|
|
|
+ @click="changeWorkChecked(index)" >
|
|
|
+ {{item.name}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="button">
|
|
|
+ <button class="reset">重置</button>
|
|
|
+ <button class="confirm">确认</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
<tabbar ref="mytabbar"
|
|
|
:current="3"></tabbar>
|
|
|
</view>
|
|
|
@@ -85,10 +121,57 @@ import tabbar from "../../components/Tabbar.vue"
|
|
|
data() {
|
|
|
return {
|
|
|
keyword: '',
|
|
|
+ popupShow: false,
|
|
|
+ saralyChecked:-1,
|
|
|
+ workChecked:-1,
|
|
|
searchQuery: {
|
|
|
keyword: '',
|
|
|
selectIndex: 0
|
|
|
},
|
|
|
+
|
|
|
+ salaryList:[{
|
|
|
+ name:'100元/天以下'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'100-150元/天'
|
|
|
+ },{
|
|
|
+ name:'150-180元/天'
|
|
|
+ },{
|
|
|
+ name:'200-300元/天'
|
|
|
+ },{
|
|
|
+ name:'300-400元/天'
|
|
|
+ },{
|
|
|
+ name:'400-500元/天'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'500元/天以上'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+
|
|
|
+ workList:[{
|
|
|
+ name:'应届生'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'1年以上'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'2年以上'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'3年以上'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'5年以上'
|
|
|
+ }],
|
|
|
+ tabList: [{
|
|
|
+ name: '最新'
|
|
|
+ }, {
|
|
|
+ name: '日结'
|
|
|
+ }, {
|
|
|
+ name: '周结'
|
|
|
+ }, {
|
|
|
+ name: '月结'
|
|
|
+ }],
|
|
|
selectList: [{
|
|
|
id: 1,
|
|
|
name: '找工作'
|
|
|
@@ -116,7 +199,19 @@ import tabbar from "../../components/Tabbar.vue"
|
|
|
},
|
|
|
change(index) {
|
|
|
this.current = index;
|
|
|
+ },
|
|
|
+ changeSaralyChecked(index){
|
|
|
+ this.saralyChecked = index;
|
|
|
+ },
|
|
|
+ changeWorkChecked(index){
|
|
|
+ this.workChecked = index;
|
|
|
+ },
|
|
|
+ close(){
|
|
|
+
|
|
|
+ this.saralyChecked = -1;
|
|
|
+ this.workChecked = -1;
|
|
|
}
|
|
|
+
|
|
|
|
|
|
|
|
|
}
|
|
|
@@ -242,4 +337,85 @@ import tabbar from "../../components/Tabbar.vue"
|
|
|
|
|
|
|
|
|
}
|
|
|
+
|
|
|
+ // 筛选框
|
|
|
+ .popup-content {
|
|
|
+ padding: 32rpx;
|
|
|
+
|
|
|
+ .headline {
|
|
|
+ color: #101010;
|
|
|
+ font-size: 40rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 薪资待遇
|
|
|
+ .salary-package,.work-experience{
|
|
|
+ margin-top: 16rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #111111;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 选项
|
|
|
+ .options {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content:flex-start;
|
|
|
+ margin-top: 24rpx;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ height: 56rpx;
|
|
|
+ line-height: 56rpx;
|
|
|
+ width: 210rpx;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ color: #999999;
|
|
|
+ background-color: #F3F3F4;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .checked {
|
|
|
+ background-color: #2795FD;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .button{
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ margin-top:8rpx;
|
|
|
+ .reset{
|
|
|
+ color: #999999;
|
|
|
+ background-color: #F3F3F4;
|
|
|
+ width: 200rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ line-height: 72rpx;
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+ .confirm{
|
|
|
+ width: 440rpx;
|
|
|
+ background-color: #2795FD;
|
|
|
+ color: #fff;
|
|
|
+ height: 72rpx;
|
|
|
+ line-height: 72rpx;
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .salary-form,.clearing-form{
|
|
|
+ .options{
|
|
|
+ justify-content: start !important;
|
|
|
+ }
|
|
|
+ .item{
|
|
|
+ margin-right: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.u-close--top-right {
|
|
|
+ top: 44rpx;
|
|
|
+ }
|
|
|
+
|
|
|
</style>
|
