确权APP

src/router/index.js

@@ -5585,6 +5585,15 @@ export const constantRoutes = [
     },
     component: (resolve) => require(['@/views/contracted/village/map/map'], resolve)
   },
+  {
+    path: '/contracted/user/passWord',
+    name: 'contractedUserPassWord',
+    meta: {
+      title: '修改密码',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/contracted/user/passWord'], resolve)
+  },
 ];
 
 

src/views/contracted/index.vue

@@ -7,7 +7,17 @@
         <p>欢迎，张三</p>
         <p>13306311234</p>
       </div>
-      <img class="header_setting" src="../../../static/images/contracted/contracted_index_icon_1.png" alt="">
+      <van-popover
+        v-model="showPopover"
+        trigger="click"
+        :actions="actions"
+        @select="onSelect"
+        placement="bottom-end"
+      >
+        <template #reference>
+          <img class="header_setting" src="../../../static/images/contracted/contracted_index_icon_1.png" alt="">
+        </template>
+      </van-popover>
     </div>
 
     <div class="tab">
@@ -84,7 +94,10 @@
     data() {
       return {
         loading:false,
-        finished:true
+        finished:true,
+        showPopover: false,
+        // 通过 actions 属性来定义菜单选项
+        actions: [{ text: '修改密码',value:1 }],
       };
     },
     created() {
@@ -97,6 +110,14 @@
       goDetail(id){
         this.$router.push({path:'/contracted/village/contractor'})
       },
+      onSelect(action) {
+        console.log(action)
+        switch (action.value) {
+          case 1:
+            this.$router.push({path:'/contracted/user/passWord'})
+            break;
+        }
+      },
     },
   };
 </script>
@@ -109,6 +130,10 @@
     padding: 0 4vw;
   }
 
+  /deep/ .van-popover__wrapper{
+    margin-left: auto;
+  }
+
   .header{
     display: flex;
     align-items: center;

src/views/contracted/user/passWord.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="app-container">
+
+    <van-nav-bar title="修改密码" left-arrow fixed placeholder @click-left="$router.push({path:'/contracted/index'})" />
+
+    <div class="list_main">
+      <van-field v-model="value" label="旧密码：" placeholder="请输入旧密码" required :border="false" input-align="right" label-width="auto" />
+      <van-field v-model="value" label="新密码：" placeholder="请输入新密码" required :border="false" input-align="right" label-width="auto" />
+      <van-field v-model="value" label="确认密码：" placeholder="请输入确认密码" required :border="false" input-align="right" />
+
+      <p class="btn">保存</p>
+    </div>
+
+
+  </div>
+</template>
+<script>
+  import Cookies from "js-cookie";
+  export default {
+    name: "contractedVillageContractor",
+    data() {
+      return {
+        value:'',
+      };
+    },
+    created() {
+
+    },
+    methods: {
+
+    },
+  };
+</script>
+<style scoped lang="scss">
+
+  .app-container{
+    background: #fff url("../../../../static/images/contracted/contracted_index_bg.png") no-repeat center;
+    background-size: 100% 100%;
+    height: 100vh;
+    padding: 0 4vw;
+    overflow: hidden;
+  }
+
+  /deep/ .van-nav-bar{
+    background: transparent;
+  }
+
+  /deep/ .van-nav-bar .van-icon{
+    color: #000000;
+  }
+
+  /deep/ .van-hairline--bottom::after{
+    border: none;
+  }
+
+  .list_main{
+    margin-top: 2vh;
+    overflow-y: scroll;
+    text-align: center;
+    background: #ffffff;
+    border-top-left-radius: 10PX;
+    border-top-right-radius: 10PX;
+    height: 92vh;
+    .btn{
+      background-image: linear-gradient(to right,#c6fe8b,#48e5a2);
+      box-shadow: 0 0 10PX #cccccc;
+      padding: 10PX 0PX;
+      border-radius: 50PX;
+      display: inline-block;
+      width: 40%;
+      margin-top: 2vh;
+    }
+  }
+
+</style>