补充阳光村务页面

src/components/sunVillage/common/header.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="header_main">
     <div class="navigation_main">
-      <div class="head_portrait"></div>
+      <div
+        class="head_portrait"
+        @click="PersonalSkip('/sunVillage/user/index')"
+      ></div>
       <div class="dynamic_main">
         <div
           @click="skip('/sunVillage/index')"
@@ -36,6 +39,7 @@
 
 <script>
 export default {
+  components: {},
   props: ["headings", "currentNav", "returnUrl"],
   data() {
     return {};
@@ -52,6 +56,13 @@ export default {
     skip(url) {
       this.$router.push(url);
     },
+    PersonalSkip(url) {
+      window.localStorage.setItem(
+        "setupEntrance",
+        window.location.pathname + window.location.search
+      );
+      this.$router.push(url);
+    },
   },
 };
 </script>

src/permission.js

@@ -94,6 +94,10 @@ const whiteList = [
   '/sunVillage/shareBonus', //股权查询-股权分红
   '/sunVillage/shareBonus_num', //股权查询-股权分红-股数详情页
   '/sunVillage/shareBonus_amount', //股权查询-股权分红-分红详情页
+  '/sunVillage/user/index',  //个人中心
+  '/sunVillage/user/mobile', //个人中心-修改手机号
+  '/sunVillage/user/information', //个人中心-修改用户信息
+  '/sunVillage/user/cooperative'  //个人中心-修改所属合作社
   //阳光村务公众号 -- 待删
 ]
 

src/router/index.js

@@ -2679,8 +2679,7 @@ export const constantRoutes = [
       hidden: true,
     },
     component: (resolve) => require(['@/views/sunVillage/equity/shareBonus_num'], resolve)
-  }
-  ,
+  },
   {
     path: '/sunVillage/shareBonus_amount',
     name: 'sunVillageShareBonusAmount',
@@ -2689,10 +2688,47 @@ export const constantRoutes = [
       hidden: true,
     },
     component: (resolve) => require(['@/views/sunVillage/equity/shareBonus_amount'], resolve)
+  },
+  {
+    path: '/sunVillage/user/index',
+    name: 'sunVillageUserIndex',
+    meta: {
+      title: '我的资料', //民生直通车-股权分红-分红详情页
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/sunVillage/user/index'], resolve)
+  },
+  {
+    path: '/sunVillage/user/mobile',
+    name: 'sunVillageUserMobile',
+    meta: {
+      title: '修改手机号', //民生直通车-股权分红-分红详情页
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/sunVillage/user/mobile'], resolve)
+  },
+  {
+    path: '/sunVillage/user/information',
+    name: 'sunVillageUserInformation',
+    meta: {
+      title: '修改用户信息', //民生直通车-股权分红-分红详情页
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/sunVillage/user/information'], resolve)
+  },
+  {
+    path: '/sunVillage/user/cooperative',
+    name: 'sunVillageUserCooperative',
+    meta: {
+      title: '修改所属合作社', //民生直通车-股权分红-分红详情页
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/sunVillage/user/cooperative'], resolve)
   }
 
 
 
+
 ];
 
 

src/views/sunVillage/user/cooperative.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="myProfile_main">
+    <div class="title_main" @click="skip('/sunVillage/user/index')">
+      <div class="return_icon"></div>
+      <div class="title">我的资料</div>
+    </div>
+    <div class="form_main">
+      <div class="flex_block">
+        <div class="wrap">
+          <input type="tel" class="ipt" placeholder="请输入所属合作社名称" />
+        </div>
+        <div class="btn">完成</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      myProfileVisibile: false,
+    };
+  },
+  mounted() {},
+  methods: {
+    skip(url) {
+      this.$router.push(url);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.myProfile_main {
+  width: 100vw;
+  height: 100vh;
+  background: #fff;
+  .title_main {
+    display: flex;
+    height: 90px;
+    margin: 0 24px;
+    align-items: center; /*  子元素相对父元素垂直居中 */
+    border-bottom: 1px solid #e5e5e5;
+    .return_icon {
+      width: 16px;
+      height: 26px;
+      background: url("../../../assets/images/sunVillage/headings_return.png")
+        no-repeat;
+      background-size: 100% 100%;
+      margin-right: 16px;
+      margin-left: 8px;
+    }
+    .title {
+      font-size: 32px;
+    }
+  }
+  .form_main {
+    margin: 20px 57px 0;
+    .flex_block {
+      height: 112px;
+      display: flex;
+      border-bottom: 1px solid #e6e6e6;
+      margin-bottom: 20px;
+      .wrap {
+        flex: 1;
+        .ipt {
+          height: 100%;
+          background: none;
+          border: 0 none;
+          width: 90%;
+          font-size: 34px;
+        }
+      }
+      .btn {
+        width: 224px;
+        border-left: 1px solid #e6e6e6;
+        font-size: 34px;
+        color: rgb(7, 193, 96);
+        display: flex;
+        justify-content: center; /* 相对父元素水平居中 */
+        align-items: center; /*  子元素相对父元素垂直居中 */
+      }
+    }
+  }
+}
+</style>

src/views/sunVillage/user/index.vue

@@ -0,0 +1,322 @@
+<template>
+  <div class="myProfile_main">
+    <div class="title_main">
+      <div class="return_icon" @click="previousStep"></div>
+      <div class="title">我的资料</div>
+    </div>
+    <div class="head_main">
+      <div class="head_img">
+        <img src="../../../assets/images/sunVillage/head_portrait.jpg" />
+      </div>
+      <div class="head_info">
+        <div class="name">王云</div>
+        <div class="tel">15854545454</div>
+      </div>
+    </div>
+    <div class="list_main">
+      <div class="flex_block" @click="headModify">
+        <div class="title">头像</div>
+        <div class="main">
+          <div class="head">
+            <img src="../../../assets/images/sunVillage/head_portrait.jpg" />
+          </div>
+          <div class="more_icon"></div>
+        </div>
+      </div>
+      <div class="flex_block" @click="skip('/sunVillage/user/information')">
+        <div class="title">姓名</div>
+        <div class="main">
+          <div class="text">王云</div>
+          <div class="more_icon"></div>
+        </div>
+      </div>
+      <div class="flex_block" @click="skip('/sunVillage/user/mobile')">
+        <div class="title">手机号</div>
+        <div class="main">
+          <div class="text">15854545454</div>
+          <div class="more_icon"></div>
+        </div>
+      </div>
+      <div class="flex_block" @click="skip('/sunVillage/user/information')">
+        <div class="title">密码</div>
+        <div class="main">
+          <div class="text">修改密码</div>
+          <div class="more_icon"></div>
+        </div>
+      </div>
+      <div class="flex_block" @click="genderModify">
+        <div class="title">性别</div>
+        <div class="main">
+          <div class="text">男</div>
+          <div class="more_icon"></div>
+        </div>
+      </div>
+      <div class="flex_block" @click="birthDateModify">
+        <div class="title">出生日期</div>
+        <div class="main">
+          <div class="text">1985-05-24</div>
+          <div class="more_icon"></div>
+        </div>
+      </div>
+      <div class="flex_block" @click="skip('/sunVillage/user/cooperative')">
+        <div class="title">所属合作社</div>
+        <div class="main">
+          <div class="text">王云经济合作社</div>
+          <div class="more_icon"></div>
+        </div>
+      </div>
+    </div>
+    <div class="exit_main">
+      <div class="exit_btn">退出登录</div>
+    </div>
+
+    <van-popup
+      v-model="myProfileVisibile"
+      position="bottom"
+      round
+      :style="{ height: '364px' }"
+    >
+      <div class="takingPictures_main">
+        <div class="title">选择操作</div>
+        <div class="main">
+          <div class="takingPictures">
+            <van-uploader>
+              <div class="icon"></div>
+            </van-uploader>
+          </div>
+          <div class="folder">
+            <van-uploader>
+              <div class="icon"></div>
+            </van-uploader>
+          </div>
+        </div>
+      </div>
+    </van-popup>
+
+    <van-popup
+      v-model="genderObj.visibile"
+      position="bottom"
+      round
+      :style="{ height: '45%' }"
+    >
+      <van-picker
+        show-toolbar
+        :columns="genderObj.list"
+        @cancel="genderObj.visibile = false"
+        @confirm="onChangeGenderObj"
+      />
+    </van-popup>
+
+    <van-popup
+      v-model="birthDateObj.visibile"
+      position="bottom"
+      round
+      :style="{ height: '45%' }"
+    >
+      <van-datetime-picker
+        v-model="birthDateObj.currentDate"
+        type="date"
+        title="选择年月日"
+        :min-date="birthDateObj.minDate"
+        :max-date="birthDateObj.maxDate"
+        @cancel="birthDateObj.visibile = false"
+        @confirm="onChangeBirthDateObj"
+      />
+    </van-popup>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      myProfileVisibile: false,
+      genderObj: {
+        visibile: false,
+        list: ["男", "女"],
+      },
+      birthDateObj: {
+        visibile: false,
+        minDate: new Date(2020, 0, 1),
+        maxDate: new Date(2025, 10, 1),
+        currentDate: new Date(2021, 0, 17),
+      },
+    };
+  },
+  mounted() {},
+  methods: {
+    headModify() {
+      this.myProfileVisibile = true;
+    },
+    genderModify() {
+      this.genderObj.visibile = true;
+    },
+    skip(url) {
+      this.$router.push(url);
+    },
+    onChangeGenderObj() {
+      this.genderObj.visibile = false;
+    },
+    birthDateModify() {
+      this.birthDateObj.visibile = true;
+    },
+    onChangeBirthDateObj() {
+      this.birthDateObj.visibile = false;
+    },
+    previousStep() {
+      let setupEntrance = window.localStorage.getItem("setupEntrance");
+      if (setupEntrance) {
+        this.$router.push(setupEntrance);
+      } else {
+        this.$router.push("/sunVillage/index");
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.myProfile_main {
+  width: 100vw;
+  height: 100vh;
+  background: #fff;
+  position: relative;
+
+  .title_main {
+    display: flex;
+    height: 90px;
+    margin: 0 24px;
+    align-items: center; /*  子元素相对父元素垂直居中 */
+    border-bottom: 1px solid #e5e5e5;
+    .return_icon {
+      width: 16px;
+      height: 26px;
+      background: url("../../../assets/images/sunVillage/headings_return.png")
+        no-repeat;
+      background-size: 100% 100%;
+      margin-right: 16px;
+      margin-left: 8px;
+    }
+    .title {
+      font-size: 32px;
+    }
+  }
+  .head_main {
+    height: 144px;
+    margin: 20px 56px 0;
+    display: flex;
+    justify-content: center; /* 相对父元素水平居中 */
+    align-items: center; /*  子元素相对父元素垂直居中 */
+    border-bottom: 1px solid #e6e6e6;
+    .head_img {
+      width: 96px;
+      height: 96px;
+      border-radius: 15px;
+      img {
+        width: 96px;
+        height: 96px;
+      }
+    }
+    .head_info {
+      flex: 1;
+      margin-left: 28px;
+      .name {
+        font-size: 34px;
+        margin-bottom: 10px;
+      }
+      .tel {
+        font-size: 28px;
+        color: #999;
+      }
+    }
+  }
+  .list_main {
+    margin: 0 56px;
+    .flex_block {
+      margin-top: 20px;
+      display: flex;
+      height: 105px;
+      border-bottom: 1px solid #e6e6e6;
+      align-items: center; /*  子元素相对父元素垂直居中 */
+      justify-content: space-between;
+      .title {
+        width: 210px;
+        font-size: 34px;
+        color: #999;
+      }
+      .main {
+        display: flex;
+        align-items: center; /*  子元素相对父元素垂直居中 */
+        .head {
+          width: 80px;
+          height: 80px;
+          margin-right: 55px;
+          img {
+            width: 80px;
+            height: 80px;
+          }
+        }
+        .more_icon {
+          width: 14px;
+          height: 26px;
+          background: url("../../../assets/images/sunVillage/more.png")
+            no-repeat;
+          background-size: 100% 100%;
+          margin-bottom: -10px;
+        }
+        .text {
+          font-size: 34px;
+          margin-right: 55px;
+        }
+      }
+    }
+  }
+  .exit_main {
+    padding: 70px 0;
+    .exit_btn {
+      height: 80px;
+      width: 340px;
+      background: #b9b9b9;
+      color: #fff;
+      font-size: 34px;
+      text-align: center;
+      line-height: 80px;
+      margin: 0 auto;
+      border-radius: 8px;
+    }
+  }
+  .takingPictures_main {
+    .title {
+      text-align: center;
+      font-size: 30px;
+      padding: 20px 0;
+    }
+    .main {
+      margin: 15px 80px 0;
+      display: flex;
+      .takingPictures {
+        width: 120px;
+        height: 112px;
+        margin-right: 40px;
+        .icon {
+          width: 120px;
+          height: 112px;
+          background: url("../../../assets/images/sunVillage/TakingPictures.png")
+            no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+      .folder {
+        width: 120px;
+        height: 112px;
+        .icon {
+          width: 120px;
+          height: 112px;
+          background: url("../../../assets/images/sunVillage/TakingPictures_2.png")
+            no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/sunVillage/user/information.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="myProfile_main">
+    <div class="title_main" @click="skip('/sunVillage/user/index')">
+      <div class="return_icon"></div>
+      <div class="title">我的资料</div>
+    </div>
+    <div class="form_main">
+      <div class="flex_block">
+        <div class="title">姓名</div>
+        <div class="wrap">
+          <input type="text" class="ipt" placeholder="请输入姓名" />
+        </div>
+      </div>
+      <div class="flex_block">
+        <div class="title">身份证</div>
+        <div class="wrap">
+          <input type="text" class="ipt" placeholder="请输入身份证号" />
+        </div>
+      </div>
+      <div class="flex_block">
+        <div class="title">密码</div>
+        <div class="wrap">
+          <input type="password" class="ipt" placeholder="请输入现有密码" />
+        </div>
+      </div>
+      <div class="flex_block">
+        <div class="title">新密码</div>
+        <div class="wrap">
+          <input type="text" class="ipt" placeholder="请输入新密码" />
+        </div>
+      </div>
+    </div>
+    <div class="form_submit">
+      <div class="complete_btn">完成</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      myProfileVisibile: false,
+    };
+  },
+  mounted() {},
+  methods: {
+    skip(url) {
+      this.$router.push(url);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.myProfile_main {
+  width: 100vw;
+  height: 100vh;
+  background: #fff;
+  .title_main {
+    display: flex;
+    height: 90px;
+    margin: 0 24px;
+    align-items: center; /*  子元素相对父元素垂直居中 */
+    border-bottom: 1px solid #e5e5e5;
+    .return_icon {
+      width: 16px;
+      height: 26px;
+      background: url("../../../assets/images/sunVillage/headings_return.png")
+        no-repeat;
+      background-size: 100% 100%;
+      margin-right: 16px;
+      margin-left: 8px;
+    }
+    .title {
+      font-size: 32px;
+    }
+  }
+  .form_main {
+    margin: 20px 57px 0;
+    .flex_block {
+      height: 112px;
+      display: flex;
+      border-bottom: 1px solid #e6e6e6;
+      margin-bottom: 20px;
+      .title {
+        width: 154px;
+        font-size: 34px;
+        border-right: 1px solid #e6e6e6;
+        display: flex;
+        align-items: center; /*  子元素相对父元素垂直居中 */
+      }
+      .wrap {
+        flex: 1;
+        .ipt {
+          height: 100%;
+          background: none;
+          border: 0 none;
+          width: 90%;
+          font-size: 34px;
+          padding-left: 30px;
+        }
+      }
+    }
+  }
+  .form_submit {
+    margin: 300px auto 0;
+    padding-bottom: 20px;
+    width: 340px;
+    .complete_btn {
+      width: 340px;
+      height: 80px;
+      background: #07c160;
+      display: flex;
+      justify-content: center; /* 相对父元素水平居中 */
+      align-items: center; /*  子元素相对父元素垂直居中 */
+      font-size: 28px;
+      color: #fff;
+      border-radius: 10px;
+    }
+  }
+}
+</style>

src/views/sunVillage/user/mobile.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="myProfile_main">
+    <div class="title_main" @click="skip('/sunVillage/user/index')">
+      <div class="return_icon"></div>
+      <div class="title">我的资料</div>
+    </div>
+    <div class="form_main">
+      <div class="flex_block">
+        <div class="wrap">
+          <input type="tel" class="ipt" placeholder="请输入手机号码" />
+        </div>
+        <div class="btn">发送验证码</div>
+      </div>
+      <div class="flex_block">
+        <div class="wrap">
+          <input type="tel" class="ipt" placeholder="请输入验证码" />
+        </div>
+        <div class="btn">完成</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      myProfileVisibile: false,
+    };
+  },
+  mounted() {},
+  methods: {
+    skip(url) {
+      this.$router.push(url);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.myProfile_main {
+  width: 100vw;
+  height: 100vh;
+  background: #fff;
+  .title_main {
+    display: flex;
+    height: 90px;
+    margin: 0 24px;
+    align-items: center; /*  子元素相对父元素垂直居中 */
+    border-bottom: 1px solid #e5e5e5;
+    .return_icon {
+      width: 16px;
+      height: 26px;
+      background: url("../../../assets/images/sunVillage/headings_return.png")
+        no-repeat;
+      background-size: 100% 100%;
+      margin-right: 16px;
+      margin-left: 8px;
+    }
+    .title {
+      font-size: 32px;
+    }
+  }
+  .form_main {
+    margin: 20px 57px 0;
+    .flex_block {
+      height: 112px;
+      display: flex;
+      border-bottom: 1px solid #e6e6e6;
+      margin-bottom: 20px;
+      .wrap {
+        flex: 1;
+        .ipt {
+          height: 100%;
+          background: none;
+          border: 0 none;
+          width: 90%;
+          font-size: 34px;
+        }
+      }
+      .btn {
+        width: 224px;
+        border-left: 1px solid #e6e6e6;
+        font-size: 34px;
+        color: rgb(7, 193, 96);
+        display: flex;
+        justify-content: center; /* 相对父元素水平居中 */
+        align-items: center; /*  子元素相对父元素垂直居中 */
+      }
+    }
+    // <div class="flex_block">
+    //       <div class="wrap">
+    //           <input type="tel" class="ipt">
+    //       </div>
+    //       <div class="btn">发送验证码</div>
+    //   </div>
+  }
+}
+</style>