招聘筛选及简历更新

components/vertical-menu/vertical-menu.vue

@@ -16,27 +16,51 @@
                             <text>{{ item.name }}</text>
                         </view>
                         <view class="item-container">
-                            <view @click="clickFunc" class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1">
+                            <view @click="clickFunc({ 'type': 'address' })" v-if="item.name === `省市区县`"
+                                class="thumb-box thumb-box1">
+                                <u-cell-group>
+                                    <u-cell icon="map" :title="areaModal.address" :isLink="true"
+                                        arrow-direction="down"></u-cell>
+                                </u-cell-group>
+                            </view>
+                            <view @click="clickFunc({ 'type': 'industry' })" v-else-if="item.name === `行业`"
+                                class="thumb-box thumb-box1">
+                                <u-cell-group>
+                                    <u-cell icon="map" :title="areaModal.industry" :isLink="true"
+                                        arrow-direction="down"></u-cell>
+                                </u-cell-group>
+                            </view>
+                            <view @click="clickFunc({
+                                'type': 'normal', 'bigObj': item, 'smallObj': item1
+                            })" v-else
+                                :class="submitData[item.name] === item1.id ? `selected-box thumb-box` : `thumb-box`"
+                                v-for="(item1, index1) in item.data" :key="index1">
                                 <view class="item-menu-name">{{ item1.name }}</view>
                             </view>
                         </view>
                     </view>
                 </view>
+
             </scroll-view>
+
         </view>
-        <!-- <view class="text-area">
-			<text class="title" @click="areaModal.addressShow=true">{{areaModal.address}}</text>
-		</view> -->
+        <view class="buttonWrapper">
+            <view class="cancelButton">取消</view>
+            <view class="sureButton">确定</view>
+        </view>
+        <!-- 省市 -->
         <data-picker :show="areaModal.addressShow" @confirm='confirmAddress' @cancel='areaModal.addressShow = false'
             @close='areaModal.addressShow = false' :defaultNames="areaModal.defaultNames" :indexs="areaModal.indexs"
             :defaultIds="areaModal.defaultIds" :showToolbar="false" :showBottombar="true"
             :labelName="areaModal.labelName"></data-picker>
+        <!-- 行业 -->
+        <u-picker :show="industryModal.industryShow" :columns="industryModal.industry"></u-picker>
     </view>
 </template>
 
 <script>
 import classifyData from './classifyData.js';
-import { mapGetters } from 'vuex'
+import { getTrade } from '@/api/resume.js'
 export default {
     components: {
         // vTabs,
@@ -63,24 +87,43 @@ export default {
                 title: 'Hello',
                 // indexs: [0, 0, 8],
                 // defaultIds: [1, 110000, 110106],
-                defaultNames: ['北京市', '北京市', '房山区'],
+                defaultNames: ['北京市', '北京市', '东城区'],
                 labelName: "areaName"
 
-            }
+            },
+            industryModal: {
+                industry: [['中国', '美国', '日本']],
+                industryShow: false,
+
+
+            },
+
+            submitData: {},
 
         }
     },
-    computed: {
-        ...mapGetters(['area'])
-    },
-    onLoad: function () {
-        console.log("0000000000000000000");
+    created: function () {
+        this.getData()
         this.getMenuItemTop()
-        console.log(this.area, '--------------------');
     },
 
 
     methods: {
+        getData: function () {
+            getTrade().then(res => {
+                console.log(res.data.data);
+                const newData = this.tabbar;
+
+                newData.map(item => {
+                    if (item.name === "行业") {
+                        item.data = res.data.data
+                    }
+                })
+                this.tabbar = newData;
+
+            })
+        },
+
         // 点击左边的栏目切换
         async swichMenu(index) {
             if (this.arr.length == 0) {
@@ -148,7 +191,7 @@ export default {
                 await this.getElRect('menu-scroll-view', 'menuHeight');
                 await this.getElRect('u-tab-item', 'menuItemHeight');
             }
-            console.log(index, this.arr[index]);
+            // console.log(index, this.arr[index]);
             // 将菜单活动item垂直居中
             this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
         },
@@ -202,10 +245,21 @@ export default {
                 }).exec()
             })
         },
-        clickFunc(e) {
-            console.log(e);
-            this.show = true;
-            this.areaModal.addressShow = true
+        clickFunc({ type, bigObj, smallObj }) {
+            switch (type) {
+                case "industry":
+                    this.industryModal.industryShow = true;
+                    break;
+                case "address":
+                    this.areaModal.addressShow = true
+                    break;
+
+                default:
+                    this.$set(this.submitData, bigObj.name, smallObj.id);
+                    console.log(this.submitData);
+                    break;
+            }
+
         },
         changeHandler(e) {
             const {
@@ -226,7 +280,8 @@ export default {
         confirmAddress(val) {
             console.log(val);
             var valArr = val.value;
-            this.areaModal.address = [...new Set(val.value)].join('')
+            this.areaModal.address = [...new Set(val.value)].join(' / ')
+            console.log(this.areaModal.address);
             this.areaModal.addressShow = false
         }
 
@@ -329,14 +384,14 @@ export default {
 }
 
 .item-title {
-    font-size: 26rpx;
+    font-size: 28rpx;
     font-weight: bold;
 }
 
 .item-menu-name {
     font-weight: normal;
-    font-size: 24rpx;
-    color: #666666;
+    font-size: 26rpx;
+
 }
 
 .item-container {
@@ -346,19 +401,55 @@ export default {
 
 .thumb-box {
     width: 43%;
-    line-height: 70rpx;
+    line-height: 80rpx;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     flex-direction: column;
-    margin-top: 20rpx;
+    margin-top: 25rpx;
     margin-left: 20rpx;
     background-color: #f3f4f8;
+    border: 1px solid #f3f4f8;
+    color: #666666;
+}
+
+.thumb-box1 {
+    width: 90%;
+
+}
+
+.selected-box {
+    background-color: #e3eafe;
+    border: 1px solid #92adfb;
+    color: #92adfb !important;
 }
 
 .item-menu-image {
     width: 120rpx;
     height: 120rpx;
 }
+
+.buttonWrapper {
+    // position: absolute;
+    // bottom: 10px;
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: -10px;
+    margin-top: 10px;
+}
+
+.cancelButton {
+    padding: 15rpx 30rpx;
+    background-color: #f3f4f8;
+    border-radius: 5px;
+    color: #9b9b9b;
+}
+
+.sureButton {
+    padding: 15rpx 150rpx;
+    background-color: #4171f9;
+    color: #fff;
+    border-radius: 5px;
+}
 </style>