bocai_supplyChain_pc/src/components/userinfo/accountsetting/inedex.vue

<template>
  <div class="accountsetting-container">
    <div class="accountcontent w">
      <div class="accountSetList">
        <div class="userinfobox">
          <div class="avatarbox">
            <i class="iconfont icon-morentouxiang"></i>
          </div>
          <div class="username" v-if="userinfo.userName">
            Hi,{{ userinfo.userName }}
          </div>
          <div class="username" v-else>Hi,{{ userinfo.hidetel }}</div>
        </div>
        <ul>
          <li
            @click="pushto('/userinfo/accountsetting/loginpsw')"
            :class="{ tagactive: activelist === 0 }"
          >
            <span><i class="iconfont icon-gerenzhongxin-mima"></i>登录密码</span
            ><span
              ><span>已设置</span>
              <i class="iconfont icon-youjiantou"></i>
            </span>
          </li>
          <li
            @click="pushto('/userinfo/accountsetting/boundtel')"
            :class="{ tagactive: activelist === 1 }"
          >
            <span
              ><i class="iconfont icon-gerenzhongxin-bangdingshouji"></i
              >绑定手机</span
            ><span
              ><span>{{ userinfo.hidetel }}</span>
              <i class="iconfont icon-youjiantou"></i>
            </span>
          </li>
          <li
            @click="pushto('/userinfo/accountsetting/boundwx')"
            :class="{ tagactive: activelist === 2 }"
          >
            <span><i class="iconfont icon-weixin1"></i>绑定微信</span
            ><span
              ><span v-if="userinfo.openIdAppDTDL">已绑定</span>
              <i class="iconfont icon-youjiantou"></i>
            </span>
          </li>
          <li
            @click="pushto('/userinfo/accountsetting/boundbankcard')"
            :class="{ tagactive: activelist === 3 }"
          >
            <span
              ><i class="iconfont icon-bangdingyinhangka"></i>绑定银行卡</span
            ><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">
        <router-view
          :userinfo="userinfo"
          :userbanklist="userbanklist"
        ></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import { userBaseInfoApi, getUserBankListApi } from "../../../api/userinfo";

export default {
  // 组件名称
  name: "",
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      userinfo: {}, // 用户基础信息
      activelist: "",
      userbanklist: [],
    };
  },
  // 计算属性
  computed: {
    path() {
      return this.$route.fullPath;
    },
  },
  // 侦听器
  watch: {
    path() {
      this.changeactive();
    },
  },
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.getUserInfo();
    this.changeactive();
    this.getuserbnak();
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {},
  // 组件方法
  methods: {
    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;
          const beforeId = this.userinfo.IDCard.substr(0, 1);
          const afterId = this.userinfo.IDCard.substr(17, 1);
          this.userinfo.hideId = beforeId + "****************" + afterId;
          const hidename = this.userinfo.realName.substr(
            this.userinfo.realName.length - 1,
            1
          );
          // this.userinfo.hidename =  hidename;
          let newstr = "";
          for (let i = 0; i < this.userinfo.realName.length - 1; i++) {
            newstr += "*";
          }
          this.userinfo.hidename = newstr + hidename;
          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);
      }
    },
  },
};
</script>

<style scoped lang="less">
.accountcontent {
  // height: 1000px;
  margin-top: 16px;
  // background-color: pink;
  display: flex;

  .accountSetList {
    width: 346px;
    height: 500px;
    // background-color: skyblue;
    margin-right: 16px;
    .userinfobox {
      width: 346px;
      height: 158px;
      background: #ffffff;
      border-radius: 4px;
      padding: 24px 0;
      text-align: center;

      .avatarbox {
        i {
          font-size: 54px;
          line-height: 54px;
          color: #ff6a00;
        }
      }
      .username {
        margin-top: 18px;
      }
    }
    > ul {
      background-color: #fff;
      margin-top: 16px;
      // padding: 0 16px;
      border-radius: 4px;
      overflow: hidden;

      li {
        position: relative;
        display: flex;
        padding: 16px;
        line-height: 24px;
        justify-content: space-between;
        // border-bottom: 1px solid #f3f4f4;
        cursor: pointer;
        &:nth-child(-n + 3):after {
          position: absolute;
          content: "";
          display: inline-block;
          height: 1px;
          width: 314px;
          bottom: -1px;
          left: 16px;
          background-color: #f3f4f4;
        }
        > span:first-child {
          font-size: 16px;
          i {
            margin-right: 12px;
            font-size: 20px;
          }
        }
        > span:last-child {
          line-height: 22px;
          span {
            color: #999;
            font-size: 14px;
          }
          > i {
            color: #888;
            margin-left: 12px;
            vertical-align: middle;

            font-size: 22px;
          }
        }
      }
    }
  }
  .rightcontent {
    width: 838px;
    height: 600px;
    padding: 0 16px;
    background-color: #fff;
  }
}
</style>