From 98702d291ae9e0978b50c0a19c678698fb5d7e0f Mon Sep 17 00:00:00 2001
From: wangxia <779219182@qq.com>
Date: Mon, 14 Feb 2022 15:17:13 +0800
Subject: [PATCH] 2.5

---
 src/api/userinfo.js                                |  54 ++++++
 .../accountsetting/components/boundbankcard.vue    | 104 +++++++++++
 .../accountsetting/components/boundtel.vue         | 191 +++++++++++++++++++++
 .../userinfo/accountsetting/components/boundwx.vue |  70 ++++++++
 .../accountsetting/components/loginpsw.vue         | 129 ++++++++++++++
 .../accountsetting/components/realname.vue         | 149 ++++++++++++++++
 src/components/userinfo/accountsetting/inedex.vue  | 163 +++++++++++++++---
 .../userinfo/usercenter/components/mybalance.vue   |  21 +--
 .../userinfo/usercenter/components/mybill.vue      |  15 +-
 .../userinfo/usercenter/components/myintegral.vue  | 112 ++++++------
 .../userinfo/usercenter/components/townsman.vue    |   1 +
 src/components/userinfo/usercenter/index.vue       |  66 ++++---
 src/main.js                                        |   1 +
 src/permission.js                                  |   3 +-
 src/router/index.js                                |  45 ++++-
 src/style/index.less                               |   6 +
 src/style/userinfo.less                            |  29 ++++
 src/utils/request.js                               |   2 +-
 src/views/main.vue                                 |   4 +-
 src/views/userinfo.vue                             |  12 +-
 接口路径.txt                                   |  18 +-
 21 files changed, 1055 insertions(+), 140 deletions(-)
 create mode 100644 src/components/userinfo/accountsetting/components/boundbankcard.vue
 create mode 100644 src/components/userinfo/accountsetting/components/boundtel.vue
 create mode 100644 src/components/userinfo/accountsetting/components/boundwx.vue
 create mode 100644 src/components/userinfo/accountsetting/components/loginpsw.vue
 create mode 100644 src/components/userinfo/accountsetting/components/realname.vue
 create mode 100644 src/style/userinfo.less

diff --git a/src/api/userinfo.js b/src/api/userinfo.js
index aa90d8e..9b5d6f0 100644
--- a/src/api/userinfo.js
+++ b/src/api/userinfo.js
@@ -48,3 +48,57 @@ export function userBaseInfoApi(data) {
     params: data,
   });
 }
+// 获取用户积分信息
+
+export function getPointApi(data) {
+  return request({
+    url: "/yishoudan/wallet/getPoint",
+    // method: "post",
+    params: data,
+  });
+}
+// 获取用户积分使用信息
+
+export function getPointDetailApi(data) {
+  return request({
+    url: "/yishoudan/pointUseRecord/list",
+    // method: "post",
+    params: data,
+  });
+}
+// 登录状态账号设置修改密码
+
+export function setUserPswApi(data) {
+  return request({
+    url: "/yishoudan/changePassword",
+    // method: "post",
+    params: data,
+  });
+}
+// 登录状态账号修改绑定手机号
+
+export function setUserTelApi(data) {
+  return request({
+    url: "/yishoudan/user/changeTel",
+    // method: "post",
+    params: data,
+  });
+}
+// 账号修改绑定银行卡
+
+export function getUserBankListApi(data) {
+  return request({
+    url: "/yishoudan/user/bank/getUserBankList",
+    // method: "post",
+    params: data,
+  });
+}
+// 实名认证
+
+export function setUserRealNameApi(data) {
+  return request({
+    url: "/yishoudan/user/realNameAuth",
+    // method: "post",
+    params: data,
+  });
+}
diff --git a/src/components/userinfo/accountsetting/components/boundbankcard.vue b/src/components/userinfo/accountsetting/components/boundbankcard.vue
new file mode 100644
index 0000000..e3f38ff
--- /dev/null
+++ b/src/components/userinfo/accountsetting/components/boundbankcard.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="boundbankcard-container">
+    <div class="contenttitle">
+      <span>绑定银行卡</span>
+    </div>
+    <div class="contentbody">
+      <ul v-if="userbanklist.length > 0">
+        <li v-for="(item, index) in userbanklist" :key="index">
+          <div class="logo">
+            <img
+              src="http://matripe.oss-cn-beijing.aliyuncs.com/bankCard.png"
+              alt=""
+            />
+          </div>
+          <div class="bankname">{{ item.bankName }} 借记卡</div>
+          <div class="bankcode">
+            •••• •••• •••• •••• <span>{{ item.newbankNo }}</span>
+          </div>
+        </li>
+      </ul>
+      <div style="text-align: center">扫一扫</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  // 组件名称
+  name: "",
+  // 局部注册的组件
+  components: {},
+  // 组件参数 接收来自父组件的数据
+  props: {
+    userbanklist: {
+      require: true,
+      type: Array,
+    },
+  },
+  // 组件状态值
+  data() {
+    return {};
+  },
+  // 计算属性
+  computed: {},
+  // 侦听器
+  watch: {},
+  // 生命周期钩子   注：没用到的钩子请自行删除
+  /**
+   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
+   */
+  created() {},
+  /**
+   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
+   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
+   */
+  mounted() {},
+  // 组件方法
+  methods: {},
+};
+</script>
+
+<style scoped lang="less">
+.boundbankcard-container {
+  .contentbody {
+    ul {
+      padding-bottom: 16px;
+      border-bottom: 1px solid #f9f9f9;
+      li {
+        width: 790px;
+        height: 76px;
+        display: flex;
+        justify-content: left;
+        align-items: center;
+        background: #fff1e7;
+        border: 1px solid #ff6a00;
+        border-radius: 8px;
+        .logo {
+          width: 32px;
+          height: 32px;
+          margin-left: 60px;
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+        .bankname {
+          font-size: 18px;
+          margin-left: 16px;
+          min-width: 250px;
+          color: #4d575e;
+        }
+        .bankcode {
+          font-size: 30px;
+          line-height: 36px;
+          color: #a2a2a2;
+          span {
+            color: #4d575e;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/userinfo/accountsetting/components/boundtel.vue b/src/components/userinfo/accountsetting/components/boundtel.vue
new file mode 100644
index 0000000..8eeff3a
--- /dev/null
+++ b/src/components/userinfo/accountsetting/components/boundtel.vue
@@ -0,0 +1,191 @@
+<template>
+  <div class="boundtel-container">
+    <div class="contenttitle">
+      <span v-if="!istelshow">绑定手机</span>
+      <span v-else>已绑定手机</span>
+    </div>
+    <div class="contentbody" v-if="!istelshow">
+      <div class="warninginfo">
+        您的账号可能存在安全风险，为了确保为您本人操作，请先进行安全验证
+      </div>
+      <div class="tel">
+        <div>手机号</div>
+        <input
+          type="text"
+          v-model.trim="usertelinfo.tel"
+          maxlength="11"
+        /><br />
+        <input type="text" v-model.trim="usertelinfo.code" maxlength="4" />
+        <span class="getrulecode"
+          ><span
+            @click="getPhoneCode"
+            data-mark="getcode"
+            v-if="timedata.isfinish"
+            >获取验证码</span
+          ><timmer :timedata="timedata" v-if="!timedata.isfinish"
+        /></span>
+      </div>
+      <button @click="submit">确定</button>
+    </div>
+    <div class="contentbody" v-else>
+      <div>{{ userinfo.hidetel }}</div>
+      <button style="width: 106px; margin-top: 16px" @click="istelshow = false">
+        更换手机号
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getPhoneCodeApi } from "@/api/login.js";
+import { setUserTelApi } from "../../../../api/userinfo";
+
+import timmer from "../../../Login/components/countback.vue";
+
+export default {
+  // 组件名称
+  name: "",
+  // 局部注册的组件
+  components: {
+    timmer,
+  },
+  // 组件参数 接收来自父组件的数据
+  props: {
+    userinfo: {
+      require: true,
+    },
+  },
+  // 组件状态值
+  data() {
+    return {
+      usertelinfo: {
+        tel: "",
+        code: "",
+      },
+      timedata: {
+        isfinish: true,
+        deadline: 60,
+        timmer: null,
+      },
+      istelshow: false,
+    };
+  },
+  // 计算属性
+  computed: {},
+  // 侦听器
+  watch: {},
+  // 生命周期钩子   注：没用到的钩子请自行删除
+  /**
+   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
+   */
+  created() {
+    if (this.userinfo.tel) {
+      this.istelshow = true;
+      console.log(this.istelshow);
+    }
+  },
+  /**
+   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
+   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
+   */
+  mounted() {},
+  // 组件方法
+  methods: {
+    async submit() {
+      try {
+        var reg_tel =
+          /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
+        if (this.usertelinfo.tel.length === 0) {
+          this.$message.warning("请输入手机号");
+        } else if (!reg_tel.test(this.usertelinfo.tel)) {
+          this.$message.warning("请输入正确的手机号");
+        } else if (this.usertelinfo.code.length === 0) {
+          this.$message.warning("请输入验证码");
+        } else {
+          this.timedata.isfinish = false;
+          const { data } = await setUserTelApi(this.usertelinfo);
+          console.log(data);
+          if (data.status === 200) {
+            this.$message.success("绑定手机成功");
+          }
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    async getPhoneCode() {
+      // 获取手机验证码
+      var reg_tel =
+        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
+      if (this.usertelinfo.tel.length === 0) {
+        this.$message.warning("请输入手机号");
+      } else if (!reg_tel.test(this.usertelinfo.tel)) {
+        this.$message.warning("请输入正确的手机号");
+      } else {
+        this.timedata.isfinish = false;
+        const { data } = await getPhoneCodeApi({ tel: this.usertelinfo.tel });
+        console.log(data);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.boundtel-container {
+  .warninginfo {
+    font-size: 14px;
+    color: #4d575e;
+  }
+  .tel {
+    position: relative;
+    margin-top: 24px;
+    > div {
+      font-size: 16px;
+      margin-bottom: 8px;
+      line-height: 16px;
+    }
+    input {
+      outline: none;
+      width: 430px;
+      height: 40px;
+      text-indent: 10px;
+      margin-bottom: 16px;
+      font-size: 16px;
+      background: #fff;
+      border: 1px solid #dddddd;
+      border-radius: 4px;
+    }
+    .getrulecode {
+      padding: 0 0 0 10px;
+      position: absolute;
+      width: 89px;
+      font-size: 14px;
+      text-align: center;
+      border-left: 1px #cccccc solid;
+      line-height: 14px;
+      color: #4d575e;
+      right: 390px;
+      bottom: 30px;
+      div {
+        margin-bottom: 0;
+      }
+      span[data-mark="getcode"] {
+        cursor: pointer;
+      }
+    }
+  }
+  button {
+    width: 64px;
+    height: 32px;
+    background: #ff6a00;
+    border-radius: 4px;
+    border: none;
+    font-size: 14px;
+    color: #fff;
+    &:hover {
+      background-color: #fe8034;
+    }
+  }
+}
+</style>
diff --git a/src/components/userinfo/accountsetting/components/boundwx.vue b/src/components/userinfo/accountsetting/components/boundwx.vue
new file mode 100644
index 0000000..011f9f4
--- /dev/null
+++ b/src/components/userinfo/accountsetting/components/boundwx.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="boundwx-container">
+    <div class="contenttitle">
+      <span v-if="!userinfo.tel">绑定微信</span>
+      <span v-else>已绑定微信</span>
+    </div>
+    <div class="contentbody" v-if="!userinfo.tel"></div>
+    <div class="contentbody" v-else>
+      <div class="username">{{ userinfo.userName }}</div>
+      <button @click="submit">更换微信号</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  // 组件名称
+  name: "",
+  // 局部注册的组件
+  components: {},
+  // 组件参数 接收来自父组件的数据
+  props: {
+    userinfo: {
+      require: true,
+    },
+  },
+  // 组件状态值
+  data() {
+    return {};
+  },
+  // 计算属性
+  computed: {},
+  // 侦听器
+  watch: {},
+  // 生命周期钩子   注：没用到的钩子请自行删除
+  /**
+   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
+   */
+  created() {},
+  /**
+   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
+   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
+   */
+  mounted() {},
+  // 组件方法
+  methods: {
+    submit() {},
+  },
+};
+</script>
+
+<style scoped lang="less">
+.boundwx-container {
+  .contentbody {
+    button {
+      // width: 64px;
+      // height: 32px;
+      padding: 5px 18px;
+      background: #ff6a00;
+      border-radius: 4px;
+      border: none;
+      font-size: 14px;
+      color: #fff;
+      &:hover {
+        background-color: #fe8034;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/userinfo/accountsetting/components/loginpsw.vue b/src/components/userinfo/accountsetting/components/loginpsw.vue
new file mode 100644
index 0000000..0d3e3ce
--- /dev/null
+++ b/src/components/userinfo/accountsetting/components/loginpsw.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="loginpsw-container">
+    <div class="contenttitle">
+      <span>设置新的密码</span>
+    </div>
+    <div class="contentbody">
+      <div class="username">
+        <div>用户名</div>
+        <input type="text" :value="username" disabled="disabled" />
+      </div>
+      <div class="password">
+        <div>密码</div>
+        <input type="password" v-model.trim="password" />
+      </div>
+      <button @click="submit">确定</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { setUserPswApi } from "../../../../api/userinfo";
+export default {
+  // 组件名称
+  name: "",
+  // 局部注册的组件
+  components: {},
+  // 组件参数 接收来自父组件的数据
+  props: {
+    userinfo: {
+      require: true,
+    },
+  },
+  // 组件状态值
+  data() {
+    return {
+      username: "",
+      password: null,
+    };
+  },
+  // 计算属性
+  computed: {},
+  // 侦听器
+  watch: {
+    userinfo() {
+      this.$nextTick(() => {
+        console.log(this.userinfo.tel);
+
+        this.username = this.userinfo.tel;
+        console.log(this.username);
+      });
+    },
+  },
+  // 生命周期钩子   注：没用到的钩子请自行删除
+  /**
+   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
+   */
+  created() {
+    this.username = this.userinfo.tel;
+  },
+  /**
+   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
+   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
+   */
+  mounted() {},
+  // 组件方法
+  methods: {
+    async submit() {
+      if (this.password === null || this.password.length === 0) {
+        this.$message.warning("请输入密码");
+      } else {
+        try {
+          const { data } = await setUserPswApi({ password: this.password });
+          console.log(data);
+          if (data.status === 200) {
+            this.$message.success("密码修改成功");
+          }
+        } catch (error) {
+          console.log(error);
+        }
+      }
+      console.log(this.password);
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.loginpsw-container {
+  .contentbody {
+    .username,
+    .password {
+      margin-top: 16px;
+      div {
+        font-size: 16px;
+        line-height: 16px;
+        margin-bottom: 8px;
+      }
+      input {
+        outline: none;
+        width: 430px;
+        height: 40px;
+        text-indent: 10px;
+        font-size: 16px;
+        background: #eeeeee;
+        border: 1px solid #dddddd;
+        border-radius: 4px;
+      }
+    }
+    .password {
+      input {
+        background-color: #fff;
+      }
+    }
+    button {
+      width: 64px;
+      height: 32px;
+      margin-top: 21px;
+      background: #ff6a00;
+      border-radius: 4px;
+      border: none;
+      font-size: 14px;
+      color: #fff;
+      &:hover {
+        background-color: #fe8034;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/userinfo/accountsetting/components/realname.vue b/src/components/userinfo/accountsetting/components/realname.vue
new file mode 100644
index 0000000..bdd4837
--- /dev/null
+++ b/src/components/userinfo/accountsetting/components/realname.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="realname-container">
+    <div class="contenttitle">
+      <span>实名认证</span>
+    </div>
+    <div class="contentbody" v-if="userinfo.IDAuth === 0">
+      <div class="warningmsg">智能加密，保障您的信息安全</div>
+      <div class="idcardbox">
+        <div class="realname">
+          <div>真实姓名</div>
+          <input
+            type="text"
+            placeholder="请输入真实姓名"
+            v-model.trim="userinfoobj.realName"
+          />
+        </div>
+        <div class="idcard">
+          <div>身份证号</div>
+          <input
+            type="text"
+            placeholder="请输入本人真实身份证号"
+            v-model.trim="userinfoobj.idCard"
+          />
+        </div>
+        <button @click="submit">确定</button>
+      </div>
+    </div>
+    <div class="contentbody" v-else>
+      <div class="warningmsg">智能加密，保障您的信息安全</div>
+      <div>真实姓名：{{ userinfo.realName }}</div>
+      <div>身份证号：{{ userinfo.IDCard }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { setUserRealNameApi } from "@/api/userinfo.js";
+export default {
+  inject: ["reload"],
+  // 组件名称
+  name: "",
+  // 局部注册的组件
+  components: {},
+  // 组件参数 接收来自父组件的数据
+  props: {
+    userinfo: {
+      require: true,
+    },
+  },
+  // 组件状态值
+  data() {
+    return {
+      userinfoobj: {
+        realName: "",
+        idCard: "",
+      },
+    };
+  },
+  // 计算属性
+  computed: {},
+  // 侦听器
+  watch: {},
+  // 生命周期钩子   注：没用到的钩子请自行删除
+  /**
+   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
+   */
+  created() {},
+  /**
+   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
+   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
+   */
+  mounted() {},
+  // 组件方法
+  methods: {
+    async submit() {
+      try {
+        if (
+          this.userinfoobj.realName.length !== 0 &&
+          this.userinfoobj.idCard.length !== 0
+        ) {
+          const { data } = await setUserRealNameApi(this.userinfoobj);
+          console.log(data);
+          if (data.status === 200) {
+            this.$message.success("实名认证成功");
+            this.reload();
+          }
+        } else {
+          this.$message.warning("信息不完整");
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.realname-container {
+  .contentbody {
+    > div {
+      font-size: 16px;
+      margin-bottom: 16px;
+    }
+  }
+  .warningmsg {
+    font-size: 14px;
+    color: #4d575e;
+    margin: 24px 0;
+  }
+  .idcardbox {
+    > div {
+      > div {
+        font-size: 16px;
+        margin-bottom: 8px;
+        line-height: 16px;
+      }
+      input {
+        outline: none;
+        width: 430px;
+        height: 40px;
+        text-indent: 10px;
+        margin-bottom: 16px;
+        font-size: 16px;
+        background: #fff;
+        border: 1px solid #dddddd;
+        border-radius: 4px;
+        &::placeholder {
+          color: #c2c5c8;
+          font-size: 16px;
+        }
+      }
+    }
+
+    button {
+      width: 64px;
+      height: 32px;
+      background: #ff6a00;
+      border-radius: 4px;
+      border: none;
+      font-size: 14px;
+      color: #fff;
+      &:hover {
+        background-color: #fe8034;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/userinfo/accountsetting/inedex.vue b/src/components/userinfo/accountsetting/inedex.vue
index ef7b292..18d62fb 100644
--- a/src/components/userinfo/accountsetting/inedex.vue
+++ b/src/components/userinfo/accountsetting/inedex.vue
@@ -6,37 +6,82 @@
           <div class="avatarbox">
             <i class="iconfont icon-morentouxiang"></i>
           </div>
-          <div class="username">Hi,{{ 1 }}</div>
+          <div class="username" v-if="userinfo.userName">
+            Hi,{{ userinfo.userName }}
+          </div>
+          <div class="username" v-else>Hi,{{ userinfo.hidetel }}</div>
         </div>
         <ul>
-          <li>
+          <li
+            @click="pushto('/userinfo/accountsetting/loginpsw')"
+            :class="{ tagactive: activelist === 0 }"
+          >
             <span><i class="iconfont icon-gerenzhongxin-mima"></i>登录密码</span
-            ><i class="iconfont icon-youjiantou"></i>
+            ><span
+              ><span>已设置</span>
+              <i class="iconfont icon-youjiantou"></i>
+            </span>
           </li>
-          <li>
+          <li
+            @click="pushto('/userinfo/accountsetting/boundtel')"
+            :class="{ tagactive: activelist === 1 }"
+          >
             <span
               ><i class="iconfont icon-gerenzhongxin-bangdingshouji"></i
               >绑定手机</span
-            ><i class="iconfont icon-youjiantou"></i>
+            ><span
+              ><span>{{ userinfo.hidetel }}</span>
+              <i class="iconfont icon-youjiantou"></i>
+            </span>
           </li>
-          <li>
+          <li
+            @click="pushto('/userinfo/accountsetting/boundwx')"
+            :class="{ tagactive: activelist === 2 }"
+          >
             <span><i class="iconfont icon-weixin1"></i>绑定微信</span
-            ><i class="iconfont icon-youjiantou"></i>
+            ><span
+              ><span>已绑定</span>
+              <i class="iconfont icon-youjiantou"></i>
+            </span>
           </li>
-          <li>
+          <li
+            @click="pushto('/userinfo/accountsetting/boundbankcard')"
+            :class="{ tagactive: activelist === 3 }"
+          >
             <span
               ><i class="iconfont icon-bangdingyinhangka"></i>绑定银行卡</span
-            ><i class="iconfont icon-youjiantou"></i>
+            ><span
+              ><span>{{ userbanklist.length }}张</span>
+              <i class="iconfont icon-youjiantou"></i>
+            </span>
+          </li>
+        </ul>
+        <ul>
+          <li
+            @click="pushto('/userinfo/accountsetting/realname')"
+            :class="{ tagactive: activelist === 4 }"
+          >
+            <span><i class="iconfont icon-shimingrenzheng"></i>实名认证</span
+            ><span
+              ><span v-if="userinfo.realName">已认证</span
+              ><span v-else>未认证</span>
+              <i class="iconfont icon-youjiantou"></i>
+            </span>
           </li>
         </ul>
       </div>
-      <div class="rightcontent"></div>
+      <div class="rightcontent">
+        <router-view
+          :userinfo="userinfo"
+          :userbanklist="userbanklist"
+        ></router-view>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import { userBaseInfoApi } from "../../../api/userinfo";
+import { userBaseInfoApi, getUserBankListApi } from "../../../api/userinfo";
 
 export default {
   // 组件名称
@@ -47,18 +92,32 @@ export default {
   props: {},
   // 组件状态值
   data() {
-    return {};
+    return {
+      userinfo: {}, // 用户基础信息
+      activelist: "",
+      userbanklist: [],
+    };
   },
   // 计算属性
-  computed: {},
+  computed: {
+    path() {
+      return this.$route.fullPath;
+    },
+  },
   // 侦听器
-  watch: {},
+  watch: {
+    path() {
+      this.changeactive();
+    },
+  },
   // 生命周期钩子   注：没用到的钩子请自行删除
   /**
    * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
    */
   created() {
     this.getUserInfo();
+    this.changeactive();
+    this.getuserbnak();
   },
   /**
    * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
@@ -70,7 +129,46 @@ export default {
     async getUserInfo() {
       try {
         const { data } = await userBaseInfoApi();
+        if (data.status === 200) {
+          this.userinfo = data.data;
+          console.log(this.userinfo);
+          const beforetel = this.userinfo.tel.substr(0, 3);
+          const aftertel = this.userinfo.tel.substr(7, 4);
+          this.userinfo.hidetel = beforetel + "****" + aftertel;
+          console.log(aftertel);
+          console.log(beforetel);
+        }
+        console.log(data);
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    pushto(url) {
+      this.$router.push(url);
+    },
+    changeactive() {
+      if (this.path.indexOf("/loginpsw") > -1) {
+        this.activelist = 0;
+      } else if (this.path.indexOf("/boundtel") > -1) {
+        this.activelist = 1;
+      } else if (this.path.indexOf("/boundwx") > -1) {
+        this.activelist = 2;
+      } else if (this.path.indexOf("/boundbankcard") > -1) {
+        this.activelist = 3;
+      } else if (this.path.indexOf("/realname") > -1) {
+        this.activelist = 4;
+      }
+    },
+    async getuserbnak() {
+      try {
+        const { data } = await getUserBankListApi();
         console.log(data);
+        this.userbanklist = data.data;
+        this.userbanklist.forEach((ele) => {
+          ele.newbankNo = ele.bankNo.substr(14, 4);
+        });
+        // const newdata = this.userbanklist.bankNo.substr(14, 4);
+        // console.log(newdata);
       } catch (error) {
         console.log(error);
       }
@@ -83,12 +181,13 @@ export default {
 .accountcontent {
   height: 1000px;
   margin-top: 16px;
-  background-color: pink;
+  // background-color: pink;
   display: flex;
+
   .accountSetList {
     width: 346px;
     height: 500px;
-    background-color: skyblue;
+    // background-color: skyblue;
     margin-right: 16px;
     .userinfobox {
       width: 346px;
@@ -96,14 +195,18 @@ export default {
       background: #ffffff;
       border-radius: 4px;
       padding: 24px 0;
+      text-align: center;
+
       .avatarbox {
-        text-align: center;
         i {
-          font-size: 60px;
-          line-height: 60px;
+          font-size: 54px;
+          line-height: 54px;
           color: #ff6a00;
         }
       }
+      .username {
+        margin-top: 18px;
+      }
     }
     > ul {
       background-color: #fff;
@@ -111,6 +214,7 @@ export default {
       // padding: 0 16px;
       border-radius: 4px;
       overflow: hidden;
+
       li {
         position: relative;
         display: flex;
@@ -129,16 +233,26 @@ export default {
           left: 16px;
           background-color: #f3f4f4;
         }
-        span {
+        > span:first-child {
           font-size: 16px;
           i {
             margin-right: 12px;
             font-size: 20px;
           }
         }
-        > i {
-          color: #888;
-          font-size: 22px;
+        > span:last-child {
+          line-height: 22px;
+          span {
+            color: #999;
+            font-size: 14px;
+          }
+          > i {
+            color: #888;
+            margin-left: 12px;
+            vertical-align: middle;
+
+            font-size: 22px;
+          }
         }
       }
     }
@@ -146,7 +260,8 @@ export default {
   .rightcontent {
     width: 838px;
     height: 600px;
-    background-color: gray;
+    padding: 0 16px;
+    background-color: #fff;
   }
 }
 </style>
diff --git a/src/components/userinfo/usercenter/components/mybalance.vue b/src/components/userinfo/usercenter/components/mybalance.vue
index 6ecfb81..10dfcec 100644
--- a/src/components/userinfo/usercenter/components/mybalance.vue
+++ b/src/components/userinfo/usercenter/components/mybalance.vue
@@ -24,6 +24,7 @@
           :data-source="data"
           :pagination="false"
           @change="onChange"
+          :rowKey="(record) => record.index"
         >
           <a slot="name" slot-scope="text">{{ text }}</a>
         </a-table>
@@ -50,7 +51,7 @@
 </template>
 
 <script>
-import { userBalanceApi, userDetailApi } from "../../../../api/userinfo";
+import { userDetailApi } from "../../../../api/userinfo";
 import { formatDateYMD } from "../../../../utils/commonUtil";
 export default {
   // 组件名称
@@ -58,7 +59,11 @@ export default {
   // 局部注册的组件
   components: {},
   // 组件参数 接收来自父组件的数据
-  props: {},
+  props: {
+    userbalance: {
+      require: true,
+    },
+  },
   // 组件状态值
   data() {
     return {
@@ -104,7 +109,6 @@ export default {
         },
       ],
       data: [],
-      userbalance: "",
     };
   },
   // 计算属性
@@ -116,7 +120,6 @@ export default {
    * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
    */
   created() {
-    this.getUserBalanceInfo();
     this.getUserDetailInfo();
   },
   /**
@@ -136,15 +139,7 @@ export default {
       // this.getJobList();
       console.log(e);
     },
-    async getUserBalanceInfo() {
-      try {
-        const { data } = await userBalanceApi();
-        this.userbalance = data.data.balance;
-        console.log(data);
-      } catch (error) {
-        console.log(error);
-      }
-    },
+
     async getUserDetailInfo() {
       try {
         const { data } = await userDetailApi(this.pagination);
diff --git a/src/components/userinfo/usercenter/components/mybill.vue b/src/components/userinfo/usercenter/components/mybill.vue
index d07640d..8bb7bd3 100644
--- a/src/components/userinfo/usercenter/components/mybill.vue
+++ b/src/components/userinfo/usercenter/components/mybill.vue
@@ -2,7 +2,7 @@
   <div class="mybill-container">
     <div class="contenttitle">
       <span>我的工单</span>
-      <div @click="getBill">
+      <div @click="resetpag">
         <button
           @click="pagination.searchTag = 0"
           :class="{ townsmanactive: pagination.searchTag === 0 }"
@@ -34,6 +34,7 @@
           tip: '加载中',
           wrapperClassName: 'spinstyle',
         }"
+        :rowKey="(record) => record.index"
       >
         <a slot="name" slot-scope="text">{{ text }}</a>
       </a-table>
@@ -75,7 +76,7 @@ export default {
       pagination: {
         pageNum: 1,
         pageSize: 2,
-        total: 8, //分页配置
+        total: null, //分页配置
         searchTag: 0,
       },
       columns: [
@@ -153,6 +154,7 @@ export default {
     },
     async getBill() {
       console.log("click");
+      console.log(this.pagination.searchTag);
       try {
         this.isspinning = true;
         const { data } = await userBillApi(this.pagination);
@@ -174,6 +176,15 @@ export default {
         console.log(error);
       }
     },
+    resetpag() {
+      this.pagination = {
+        pageNum: 1,
+        pageSize: 2,
+        total: 8, //分页配置
+        searchTag: this.pagination.searchTag,
+      };
+      this.getBill();
+    },
   },
 };
 </script>
diff --git a/src/components/userinfo/usercenter/components/myintegral.vue b/src/components/userinfo/usercenter/components/myintegral.vue
index b00c6f9..d9c7962 100644
--- a/src/components/userinfo/usercenter/components/myintegral.vue
+++ b/src/components/userinfo/usercenter/components/myintegral.vue
@@ -10,7 +10,7 @@
             ><i class="iconfont icon-zhengyan" v-if="showbalance"></i
             ><i class="iconfont icon-biyan" v-else></i></i
         ></span>
-        <p v-if="showbalance">999</p>
+        <p v-if="showbalance">{{ userpoint }}</p>
         <p v-else>***</p>
       </div>
     </div>
@@ -24,6 +24,7 @@
           :data-source="data"
           :pagination="false"
           @change="onChange"
+          :rowKey="(record) => record.index"
         >
           <!-- <a slot="name" slot-scope="text">{{ text }}</a> -->
         </a-table>
@@ -50,13 +51,19 @@
 </template>
 
 <script>
+import { getPointDetailApi } from "../../../../api/userinfo";
+import { formatDateYMD } from "../../../../utils/commonUtil";
 export default {
   // 组件名称
   name: "",
   // 局部注册的组件
   components: {},
   // 组件参数 接收来自父组件的数据
-  props: {},
+  props: {
+    userpoint: {
+      require: true,
+    },
+  },
   // 组件状态值
   data() {
     return {
@@ -70,84 +77,43 @@ export default {
         },
         {
           title: "兑换物品",
-          dataIndex: "money",
-          key: "money",
+          dataIndex: "goodsName",
+          key: "goodsName",
           width: 120,
         },
         {
           title: "物品数量",
-          dataIndex: "num",
-          key: "num",
+          dataIndex: "goodsNum",
+          key: "goodsNum",
           width: 90,
           // ellipsis: true,
         },
         {
           title: "扣除积分",
-          dataIndex: "deduct",
-          key: "deduct",
+          dataIndex: "point",
+          key: "point",
           // ellipsis: true,
           width: 140,
         },
         {
           title: "状态",
-          dataIndex: "state",
-          key: "state",
+          dataIndex: "state1",
+          key: "state1",
           // ellipsis: true,
           // width: 90,
         },
         {
           title: "更新时间",
-          dataIndex: "time",
-          key: "time",
+          dataIndex: "updateTime",
+          key: "updateTime",
           width: 160,
         },
       ],
-      data: [
-        {
-          index: "1",
-          money: "现金20元",
-          state: "交易成功",
-          num: "12",
-          deduct: "1000",
-          time: "2021-09-13 15:41",
-        },
-        {
-          index: "2",
-          money: "水杯",
-          state: "审核中",
-          num: "123",
-          deduct: "1430",
-          time: "2021-09-13 15:41",
-        },
-        {
-          index: "3",
-          money: "枕头",
-          state: "交易关闭",
-          num: "12",
-          deduct: "1100",
-          time: "2021-09-13 15:41",
-        },
-        {
-          index: "4",
-          money: "现金10元",
-          state: "交易关闭",
-          num: "32",
-          deduct: "1200",
-          time: "2021-09-13 15:41",
-        },
-        {
-          index: "5",
-          money: "指甲剪",
-          state: "交易关闭",
-          num: "21",
-          deduct: "3000",
-          time: "2021-09-13 15:41",
-        },
-      ],
+      data: [],
       pagination: {
         pageNum: 1,
-        pageSize: 2,
-        total: 8, //分页配置
+        pageSize: 1,
+        total: null, //分页配置
       },
       showbalance: true,
     };
@@ -160,7 +126,9 @@ export default {
   /**
    * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
    */
-  created() {},
+  created() {
+    this.getPointDetail();
+  },
   /**
    * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
    * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
@@ -178,6 +146,36 @@ export default {
       // this.getJobList();
       console.log(e);
     },
+    async getPointDetail() {
+      try {
+        const { data } = await getPointDetailApi(this.pagination);
+        console.log(data);
+        if (data.status === 200) {
+          // console.log();
+          this.data = data.data.recordList;
+          this.data.forEach((item, index) => {
+            console.log(item);
+            item.updateTime = formatDateYMD(item.updateTime);
+            if (item.state === 0) {
+              item.state1 = "初始";
+            } else if (item.state === 10) {
+              item.state1 = "审核中";
+            } else if (item.state === 20) {
+              item.state1 = "已完成";
+            } else if (item.state === 90) {
+              item.state1 = "提现失败";
+            }
+            item.index = index + 1;
+          });
+
+          console.log(true);
+          this.pagination.total = data.data.recordCount;
+          this.isspinning = false;
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    },
   },
 };
 </script>
diff --git a/src/components/userinfo/usercenter/components/townsman.vue b/src/components/userinfo/usercenter/components/townsman.vue
index 94ba2d6..b4c3aaf 100644
--- a/src/components/userinfo/usercenter/components/townsman.vue
+++ b/src/components/userinfo/usercenter/components/townsman.vue
@@ -28,6 +28,7 @@
           tip: '加载中',
           wrapperClassName: 'spinstyle',
         }"
+        :rowKey="(record) => record.index"
       >
         <a slot="name" slot-scope="text">{{ text }}</a>
       </a-table>
diff --git a/src/components/userinfo/usercenter/index.vue b/src/components/userinfo/usercenter/index.vue
index 083f195..728a2bc 100644
--- a/src/components/userinfo/usercenter/index.vue
+++ b/src/components/userinfo/usercenter/index.vue
@@ -28,7 +28,8 @@
             >
               <span><i class="iconfont icon-jifen"></i>我的积分</span
               ><span
-                ><span>5000分</span><i class="iconfont icon-youjiantou"></i
+                ><span>{{ userpoint ? userpoint : "--" }}分</span
+                ><i class="iconfont icon-youjiantou"></i
               ></span>
             </li>
             <li
@@ -37,7 +38,11 @@
             >
               <span><i class="iconfont icon-kaquan"></i>我的卡券</span
               ><span
-                ><span>3张</span><i class="iconfont icon-youjiantou"></i
+                ><span
+                  >{{
+                    cardinfo.recordCount ? cardinfo.recordCount : "--"
+                  }}张</span
+                ><i class="iconfont icon-youjiantou"></i
               ></span>
             </li>
             <li
@@ -46,27 +51,32 @@
             >
               <span><i class="iconfont icon-yue"></i>我的余额</span
               ><span
-                ><span v-if="userbalance.length !== 0"
-                  >{{ userbalance }}元</span
-                >
-                <span v-else>--元</span><i class="iconfont icon-youjiantou"></i
+                ><span>{{ userbalance >= 0 ? userbalance : "--" }}元</span>
+                <i class="iconfont icon-youjiantou"></i
               ></span>
             </li>
           </ul>
         </div>
       </div>
       <div class="rightcontent">
-        <router-view></router-view>
+        <router-view
+          :userpoint="userpoint"
+          :userbalance="userbalance"
+        ></router-view>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import { userBalanceApi } from "../../../api/userinfo";
+import {
+  userBalanceApi,
+  getPointApi,
+  userCardApi,
+} from "../../../api/userinfo";
 export default {
   // 组件名称
-  name: "",
+  name: "usercenter-container",
   // 局部注册的组件
   components: {},
   // 组件参数 接收来自父组件的数据
@@ -76,6 +86,8 @@ export default {
     return {
       activelist: "",
       userbalance: "",
+      userpoint: "",
+      cardinfo: {},
       // path:,
     };
   },
@@ -98,6 +110,8 @@ export default {
   created() {
     this.listactive();
     this.getUserBalanceInfo();
+    this.getPoint();
+    this.getcardcount();
   },
   /**
    * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
@@ -129,6 +143,25 @@ export default {
         const { data } = await userBalanceApi();
         this.userbalance = data.data.balance;
         console.log(data);
+        console.log(this.userbalance);
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    async getPoint() {
+      try {
+        const { data } = await getPointApi();
+        console.log(data);
+        this.userpoint = data.data.pointTotal;
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    async getcardcount() {
+      try {
+        const { data } = await userCardApi();
+        console.log(data);
+        this.cardinfo = data.data;
       } catch (error) {
         console.log(error);
       }
@@ -138,21 +171,6 @@ export default {
 </script>
 
 <style scoped lang="less">
-.tagactive {
-  background-color: #ff6a00 !important;
-  color: #fff !important;
-  span {
-    span {
-      color: #fff !important;
-    }
-    i {
-      color: #fff !important;
-    }
-  }
-  i {
-    color: #fff !important;
-  }
-}
 .usercontent {
   // height: 1000px;
   margin-top: 16px;
diff --git a/src/main.js b/src/main.js
index 83c9c5f..aba64b7 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,6 +5,7 @@ import store from "./store";
 import antd from "ant-design-vue";
 import "ant-design-vue/dist/antd.css";
 import "../src/style/index.less";
+import "../src/style/userinfo.less"; //用户账号设置和个人中心的样式
 import "@/permission"; // permission control
 Vue.config.productionTip = false;
 Vue.use(antd);
diff --git a/src/permission.js b/src/permission.js
index 956dfdc..d76c24d 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -6,13 +6,14 @@ router.beforeEach(async (to, from, next) => {
   console.log(from);
   // 路由守卫
   const whiteList = [
+    // 设置白名单
     "/login",
     "/404",
     "/serviceoutlets",
     "/aboutus",
     "/main",
     "/updatepsw",
-  ]; // 设置白名单
+  ];
   const isLogin = localStorage.getItem("LOGIN_DATA") !== null ? true : false;
   // if (to.fullPath === from.fullPath) {
   //   next(to.path);
diff --git a/src/router/index.js b/src/router/index.js
index 5616a62..5e6bcb3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -114,10 +114,53 @@ const routes = [
         ],
       },
       {
-        path: "/accountsetting",
+        path: "accountsetting",
         name: "accountsetting",
         component: () =>
           import("../components/userinfo/accountsetting/inedex.vue"),
+        redirect: "loginpsw",
+        children: [
+          {
+            path: "loginpsw",
+            name: "loginpsw",
+            component: () =>
+              import(
+                "../components/userinfo/accountsetting/components/loginpsw.vue"
+              ),
+          },
+          {
+            path: "boundtel",
+            name: "boundtel",
+            component: () =>
+              import(
+                "../components/userinfo/accountsetting/components/boundtel.vue"
+              ),
+          },
+          {
+            path: "boundwx",
+            name: "boundwx",
+            component: () =>
+              import(
+                "../components/userinfo/accountsetting/components/boundwx.vue"
+              ),
+          },
+          {
+            path: "boundbankcard",
+            name: "boundbankcard",
+            component: () =>
+              import(
+                "../components/userinfo/accountsetting/components/boundbankcard.vue"
+              ),
+          },
+          {
+            path: "realname",
+            name: "realname",
+            component: () =>
+              import(
+                "../components/userinfo/accountsetting/components/realname.vue"
+              ),
+          },
+        ],
       },
     ],
   },
diff --git a/src/style/index.less b/src/style/index.less
index 23eb357..25f699e 100644
--- a/src/style/index.less
+++ b/src/style/index.less
@@ -91,6 +91,12 @@ select,
 textarea {
 	font-size: 100%;
 }
+button{
+  cursor: pointer;
+  &:focus-visible {
+    outline: none;
+  }
+}
 table {
 	border-collapse: collapse;
 	border-spacing: 0;
diff --git a/src/style/userinfo.less b/src/style/userinfo.less
new file mode 100644
index 0000000..675010d
--- /dev/null
+++ b/src/style/userinfo.less
@@ -0,0 +1,29 @@
+// 左侧列表的active样式
+.tagactive {
+	background-color: #ff6a00 !important;
+	color: #fff !important;
+	span {
+		span {
+			color: #fff !important;
+		}
+		i {
+			color: #fff !important;
+		}
+	}
+	i {
+		color: #fff !important;
+	}
+}
+// 右侧title的样式
+.contenttitle {
+	display: flex;
+	padding-bottom: 16px;
+	justify-content: space-between;
+	border-bottom: 1px solid rgba(77, 87, 94, 0.1);
+	margin-top: 16px;
+	margin-bottom: 24px;
+  span {
+    font-size: 20px;
+    color: #ff6a00;
+  }
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 4f7cb91..849e18d 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -6,7 +6,7 @@ import axios from "axios";
 // const baseURL = "http://localhost:8001";
 
 axios.defaults.withCredentials = true; //添加这行代码
-
+console.log(axios);
 const service = axios.create({
   baseURL: "/api_prod", // url = base url + request url
   // baseURL: baseURL, // baseURL: "/api", // url = base url + request url // url = base url + request url
diff --git a/src/views/main.vue b/src/views/main.vue
index 743d002..6b980be 100644
--- a/src/views/main.vue
+++ b/src/views/main.vue
@@ -61,7 +61,7 @@
                       ><i class="iconfont icon-gerenzhongxin"></i>个人中心</span
                     ><i class="iconfont icon-youjiantou"></i></div
                 ></router-link>
-                <router-link to="/accountsetting"
+                <router-link to="/userinfo/accountsetting/loginpsw"
                   ><div>
                     <span
                       ><i class="iconfont icon-zhanghaoshezhi"></i
@@ -435,7 +435,7 @@ export default {
   height: 100%;
   /deep/ .pagetitle {
     background-color: #fff;
-    padding: 14px;
+    padding: 14px 0;
 
     font-size: 16px;
     .titleactive {
diff --git a/src/views/userinfo.vue b/src/views/userinfo.vue
index e6350ac..7cebad5 100644
--- a/src/views/userinfo.vue
+++ b/src/views/userinfo.vue
@@ -28,7 +28,7 @@
             </li>
             <li>
               <router-link
-                to="/accountsetting"
+                to="/userinfo/accountsetting/loginpsw"
                 :class="routertitleindex === 2 ? 'titleactive' : ''"
                 >账号设置
               </router-link>
@@ -48,7 +48,7 @@
                     ><i class="iconfont icon-youjiantou"></i>
                   </div>
                 </router-link>
-                <router-link to="/accountsetting">
+                <router-link to="/userinfo/accountsetting/loginpsw">
                   <div>
                     <span
                       ><i class="iconfont icon-zhanghaoshezhi"></i
@@ -164,11 +164,7 @@ import { logoutApi } from "../api/login";
 
 export default {
   inject: ["reload"],
-  provide() {
-    return {
-      getJobList: this.getJobList,
-    };
-  },
+
   // 组件名称
   name: "",
   // 局部注册的组件
@@ -338,7 +334,7 @@ export default {
   height: 100%;
   /deep/ .pagetitle {
     background-color: #fff;
-    padding: 14px;
+    padding: 14px 0;
 
     font-size: 16px;
     .titleactive {
diff --git a/接口路径.txt b/接口路径.txt
index e5c4703..5f53cf4 100644
--- a/接口路径.txt
+++ b/接口路径.txt
@@ -1,4 +1,4 @@
-接口地址：
+接口地址：
 正式：https://d.matripe.com.cn
 测试：http://bl7.matripe.com.cn:8001
 
@@ -72,6 +72,14 @@
 /yishoudan/logout
 
 
+
+
+
+
+
+
+
+
 13.修改密码
 /yishoudan/changePassword
 密码：password
@@ -102,8 +110,8 @@
 18.实名认证
 /yishoudan/user/realNameAuth
 参数：
-	手机号：realName
-	验证码：idCard
+	人名：realName
+	身份证号：idCard
 
 
 19.我的余额（账户信息）
@@ -135,10 +143,6 @@
 
 23.查询积分
 /yishoudan/wallet/getPoint
-参数：
-	状态：searchTag   0为在职、1在职
-	当前页：pageNum
-	每页条数：pageSize
 
 
 23.查询积分使用列表