调整个人中心的工种选择

src/main.js

@@ -34,7 +34,8 @@ import {
   DropdownItem,
   Progress,
   Skeleton,
-  Tag
+  Tag,
+  Popup
 } from "vant";
 
 window.$_http = axios;
@@ -65,6 +66,7 @@ Vue.component("VanProgress", Progress);
 Vue.component("VanCellGroup", CellGroup);
 Vue.component("VanSkeleton", Skeleton);
 Vue.component("VanTag", Tag);
+Vue.component("vanPopup", Popup);
 
 Object.entries(filters).forEach(([key, value]) => {
   Vue.filter(key, value);

src/views/home/person/page-person.vue

@@ -27,8 +27,10 @@
             <span class="todayScoreNum">{{ todayPoints }}</span>
           </div>
         </div>
-        <div class="dropdown-div">
-          <van-dropdown-menu active-color="#1989fa">
+        <div class="dropdown-div" @click="isShowPopup = true">
+          {{ engineeringWorkChooseValue }}
+          <van-icon name="arrow-down" />
+          <!-- <van-dropdown-menu active-color="#1989fa">
             <van-dropdown-item
               v-model="engineeringWorkChooseValue"
               :options="engineeringWorkList"
@@ -39,7 +41,7 @@
               "
               @change="handleChangeEngneeringWorkFun"
             />
-          </van-dropdown-menu>
+          </van-dropdown-menu> -->
         </div>
       </div>
     </div>
@@ -78,6 +80,17 @@
         </div>
       </div>
     </div>
+
+    <van-popup v-model="isShowPopup" position="bottom" style="height:40%">
+      <div
+        class="popup-engineeringWork-item"
+        v-for="(item, index) in engineeringWorkList"
+        :key="index"
+        @click="handleChangeEngneeringWorkFun(item.value)"
+      >
+        {{ item.text }}
+      </div>
+    </van-popup>
   </div>
 </template>
 
@@ -135,7 +148,8 @@ export default {
         // { title: "我要编辑", icon: "photo-o", to: "", src: require("@/assets/image/personal/toEdit.png")  }
       ],
       engineeringWorkChooseValue: null, // 工种选择的值
-      engineeringWorkList: [] // 工种可选列表
+      engineeringWorkList: [], // 工种可选列表
+      isShowPopup: false
     };
   },
   computed: {
@@ -194,6 +208,8 @@ export default {
         field: "chooseEngneeringWork",
         value: resultItem
       });
+      this.engineeringWorkChooseValue = value;
+      this.isShowPopup = false;
     },
     //   获取今日分数
     getDailyPoints() {
@@ -259,6 +275,15 @@ export default {
   font-size: 1rem;
   width: 100%;
   height: 100%;
+  .popup-engineeringWork-item {
+    width: 100%;
+    padding: 0.5rem 0.5rem;
+    font-size: 0.65rem;
+    border-bottom: 1px solid #ebedf0;
+  }
+  .popup-engineeringWork-item-selected {
+    background-color: #ebedf0;
+  }
   .user-box {
     padding: 0.5rem 0.5rem;
     .userCardBox {
@@ -376,10 +401,14 @@ export default {
     top: 0;
     right: 0.5rem;
     width: 7rem;
+    font-size: 0.7rem;
     height: 1.5rem;
-    overflow: hidden;
-    z-index: 1000;
-    background-color: blanchedalmond;
+    // overflow: hidden;
+    // z-index: 1000;
+    // background-color: blanchedalmond;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
   }
 }
 </style>