7 changed files with 400 additions and 71 deletions
Unified View
Diff Options
-
+10 -0App.vue
-
+9 -6components/base/navbar.vue
-
+2 -1pages.json
-
+309 -0pages_order/components/screen/screenSearch.vue
-
+22 -0pages_order/components/screen/selectArea.vue
-
+35 -54pages_order/scenicSpot/scenicSpotDetail.vue
-
+13 -10pages_order/scenicSpot/scenicSpotList.vue
+ 10
- 0
App.vue
View File
+ 9
- 6
components/base/navbar.vue
View File
+ 2
- 1
pages.json
View File
+ 309
- 0
pages_order/components/screen/screenSearch.vue
View File
| @ -0,0 +1,309 @@ | |||||
| <template> | |||||
| <view class="screenSearch"> | |||||
| <view class="sx"> | |||||
| <uv-drop-down ref="dropDown" | |||||
| sign="dropDown_1" | |||||
| text-active-color="#fff" | |||||
| text-color="#fff" | |||||
| :extra-icon="{name:'arrow-down-fill',color:'#fff',size:'26rpx'}" | |||||
| :extra-active-icon="{name:'arrow-up-fill',color:'#fff',size:'26rpx'}" | |||||
| :defaultValue="defaultValue" | |||||
| :custom-style="{padding: '0 30rpx', color : '#fff'}" | |||||
| @click="selectMenu"> | |||||
| <uv-drop-down-item | |||||
| v-if="isArea" | |||||
| name="area" type="2" | |||||
| :label="dropItem('area').label" | |||||
| :value="dropItem('area').value"> | |||||
| </uv-drop-down-item> | |||||
| <uv-drop-down-item | |||||
| v-if="isMaxPrice" | |||||
| name="maxPrice" type="2" | |||||
| :label="dropItem('maxPrice').label" | |||||
| :value="dropItem('maxPrice').value"> | |||||
| </uv-drop-down-item> | |||||
| </uv-drop-down> | |||||
| <uv-drop-down-popup | |||||
| sign="dropDown_1" | |||||
| :click-overlay-on-close="true" | |||||
| :currentDropItem="currentDropItem" | |||||
| @clickItem="clickItem" | |||||
| @popupChange="change"></uv-drop-down-popup> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| import { | |||||
| mapState, | |||||
| } from 'vuex' | |||||
| export default { | |||||
| props : { | |||||
| isArea : { | |||||
| default : true | |||||
| }, | |||||
| isMaxPrice : {}, | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| // 表示value等于这些值，就属于默认值 | |||||
| defaultValue: [0, 'all', 'all'], | |||||
| // 筛选结果 | |||||
| result: [], | |||||
| activeName: 'area', | |||||
| area: { | |||||
| label: '区域', | |||||
| value: 0, | |||||
| activeIndex: 0, | |||||
| color: '#333', | |||||
| activeColor: '#3796F8', | |||||
| child: [ | |||||
| { | |||||
| label: '全部', | |||||
| value: 0, | |||||
| }, | |||||
| ] | |||||
| }, | |||||
| maxPrice: { | |||||
| label: '最高价', | |||||
| value: 'all', | |||||
| activeIndex: 0, | |||||
| color: '#333', | |||||
| activeColor: '#3796F8', | |||||
| child: [ | |||||
| { | |||||
| label: '全部', | |||||
| value: 'all' | |||||
| }, | |||||
| { | |||||
| label: '500以下', | |||||
| value: 500 | |||||
| }, | |||||
| { | |||||
| label: '1000以下', | |||||
| value: 1000 | |||||
| }, | |||||
| { | |||||
| label: '1500以下', | |||||
| value: 1500 | |||||
| }, | |||||
| { | |||||
| label: '2000以下', | |||||
| value: 2000 | |||||
| }, | |||||
| { | |||||
| label: '2500以下', | |||||
| value: 2500 | |||||
| }, | |||||
| { | |||||
| label: '3000以下', | |||||
| value: 3000 | |||||
| }, | |||||
| { | |||||
| label: '5000以下', | |||||
| value: 5000 | |||||
| }, | |||||
| { | |||||
| label: '8000以下', | |||||
| value: 8000 | |||||
| }, | |||||
| ] | |||||
| }, | |||||
| list : [ | |||||
| // { | |||||
| // title : '您目前所属的年龄段', | |||||
| // tag : ['18岁～35岁', '35岁～45岁', '45岁～50岁', '50岁以上'], | |||||
| // index : 0, | |||||
| // }, | |||||
| { | |||||
| title : '您希望从事的工种', | |||||
| tag : ['电工', '焊工', '叉车', '其他'], | |||||
| index : 0, | |||||
| }, | |||||
| { | |||||
| title : '您希望从事的工作性质', | |||||
| tag : ['全职', '临时工',], | |||||
| index : 0, | |||||
| }, | |||||
| ] | |||||
| } | |||||
| }, | |||||
| computed : { | |||||
| dropItem(name) { | |||||
| return (name) => { | |||||
| const result = {}; | |||||
| const find = this.result.find(item => item.name === name); | |||||
| if (find) { | |||||
| result.label = find.label; | |||||
| result.value = find.value; | |||||
| } else { | |||||
| result.label = this[name].label; | |||||
| result.value = this[name].value; | |||||
| } | |||||
| return result; | |||||
| } | |||||
| }, | |||||
| // 获取当前下拉筛选项 | |||||
| currentDropItem() { | |||||
| return this[this.activeName]; | |||||
| }, | |||||
| ...mapState(['cityList']), | |||||
| }, | |||||
| mounted() { | |||||
| //价格 | |||||
| // this.jobTypeList.forEach(n => { | |||||
| // this.maxPrice.child.push({ | |||||
| // label: n.name, | |||||
| // value: n.id, | |||||
| // }) | |||||
| // }) | |||||
| // 地区 | |||||
| this.cityList.forEach(n => { | |||||
| this.area.child.push({ | |||||
| label: n.name, | |||||
| value: n.id, | |||||
| }) | |||||
| }) | |||||
| }, | |||||
| methods: { | |||||
| clickTag(item, i){ | |||||
| console.log(i); | |||||
| item.index = i | |||||
| }, | |||||
| change(e) {}, | |||||
| /** | |||||
| * 点击每个筛选项回调 | |||||
| * @param {Object} e { name, active, type } = e | |||||
| */ | |||||
| selectMenu(e) { | |||||
| const { | |||||
| name, | |||||
| active, | |||||
| type | |||||
| } = e; | |||||
| this.activeName = name; | |||||
| if(type == 1){ | |||||
| this.$refs.popup.open() | |||||
| return | |||||
| } | |||||
| const find = this.result.find(item => item.name == this.activeName); | |||||
| if (find) { | |||||
| const findIndex = this[this.activeName] | |||||
| .child.findIndex(item => item.label == find.label && item | |||||
| .value == find.value); | |||||
| this[this.activeName].activeIndex = findIndex; | |||||
| } else { | |||||
| this[this.activeName].activeIndex = 0; | |||||
| } | |||||
| }, | |||||
| /** | |||||
| * 点击菜单回调处理 | |||||
| * @param {Object} item 选中项 { label,value } = e | |||||
| */ | |||||
| clickItem(e) { | |||||
| // 下面有重新赋值，所以用let | |||||
| let { | |||||
| label, | |||||
| value | |||||
| } = e; | |||||
| const findIndex = this.result.findIndex(item => item.name == this.activeName); | |||||
| if (this.defaultValue.indexOf(value) > -1 && this[this.activeName].label) { | |||||
| label = this[this.activeName].label; | |||||
| } | |||||
| // 已经存在筛选项 | |||||
| if (findIndex > -1) { | |||||
| this.$set(this.result, findIndex, { | |||||
| name: this.activeName, | |||||
| label, | |||||
| value | |||||
| }) | |||||
| } else { | |||||
| this.result.push({ | |||||
| name: this.activeName, | |||||
| label, | |||||
| value | |||||
| }); | |||||
| } | |||||
| this.result = this.result.filter(item => this.defaultValue.indexOf(item.value) == -1); | |||||
| this.$emit('clickItem', this.result) | |||||
| }, | |||||
| submit(){ | |||||
| }, | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style scoped lang="scss"> | |||||
| .screenSearch{ | |||||
| margin-top: 10rpx; | |||||
| .sx{ | |||||
| // width: 160rpx; | |||||
| } | |||||
| .popup{ | |||||
| width: 80vw; | |||||
| padding: 40rpx; | |||||
| .list{ | |||||
| .item{ | |||||
| margin-top: 20rpx; | |||||
| .title{ | |||||
| font-weight: 900; | |||||
| font-size: 30rpx; | |||||
| } | |||||
| .tagList{ | |||||
| display: flex; | |||||
| flex-wrap: wrap; | |||||
| padding: 10rpx 0; | |||||
| view{ | |||||
| background: rgba($uni-color, 0.1); | |||||
| padding: 10rpx 20rpx; | |||||
| margin: 10rpx; | |||||
| border-radius: 10rpx; | |||||
| font-size: 26rpx; | |||||
| } | |||||
| .act{ | |||||
| color: #fff; | |||||
| background: $uni-color; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| .btn { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| width: 100%; | |||||
| margin-top: 20rpx; | |||||
| .a { | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| width: 90%; | |||||
| color: #FFF; | |||||
| background-color: $uni-color; | |||||
| border: 1px solid rgba($uni-color, 0.2); | |||||
| border-radius: 100rpx; | |||||
| font-size: 30rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||
+ 22
- 0
pages_order/components/screen/selectArea.vue
View File
| @ -0,0 +1,22 @@ | |||||
| <template> | |||||
| <view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| export default { | |||||
| data() { | |||||
| return { | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style> | |||||
| </style> | |||||