nsgk_mobile/src/views/lawEnforcement/user/index.vue

<template>
  <div class="app-container">
    <div class="topBackground">
      <van-nav-bar title="我的" fixed placeholder/>
      <van-row class="userInformation" v-if="user">
        <van-col :span="6">
          <van-image src="../../../../static/images/lawEnforcement/12.jpg" class="headImg" />
        </van-col>
        <van-col :span="12">
          <p class="userName">{{ user.userName }}</p>
          <p class="userDept">{{ user.dept.deptName }} <i style="margin-right: 0.5rem;"></i> {{ postGroup }}</p>
        </van-col>
        <van-col :span="6" align="right">
          <van-icon name="arrow" size="20" color="#FFF" style="line-height: 1.7rem;" />
        </van-col>
      </van-row>
    </div>
    <van-cell-group class="listBox">
      <van-cell is-link to="/lawEnforcement/programme">
        <template #title>
          <van-icon name="../../../static/images/lawEnforcement/icon/icon_fagl.png" size="20"></van-icon>
          <span class="custom-title">方案管理</span>
        </template>
      </van-cell>
      <van-cell is-link to="/lawEnforcement/complaint">
        <template #title>
          <van-icon name="../../../static/images/lawEnforcement/icon/icon_tshf.png" size="20"></van-icon>
          <span class="custom-title">投诉回复</span>
        </template>
      </van-cell>
    </van-cell-group>
    <van-cell-group class="listBox">
      <van-cell is-link to="/lawEnforcement/changePassword">
        <template #title>
          <van-icon name="../../../static/images/lawEnforcement/icon/icon_mmxg.png" size="20"></van-icon>
          <span class="custom-title">密码修改</span>
        </template>
      </van-cell>
      <van-cell is-link to="/lawEnforcement/feedback">
        <template #title>
          <van-icon name="../../../static/images/lawEnforcement/icon/icon_bzfk.png" size="20"></van-icon>
          <span class="custom-title">帮助反馈</span>
        </template>
      </van-cell>
      <van-cell is-link to="/lawEnforcement/agreement">
        <template #title>
          <van-icon name="../../../static/images/lawEnforcement/icon/icon_cpxy.png" size="20"></van-icon>
          <span class="custom-title">产品协议</span>
        </template>
      </van-cell>
    </van-cell-group>
    <van-button type="default" class="loginOut">退出登录</van-button>
    <law></law>
  </div>
</template>
<script>
import { getUserProfile } from "@/api/lawEnforcement/index";
import { logout ,getInfo } from "@/api/login/index";
import law from "@/components/common/law_footer";
export default {
  name: "user",
  components: {
    law
  },
  data() {
    return {
      user: {
        dept:{}
      },
      roleGroup: {},
      postGroup: {},
      activeTab: "userinfo"
    };
  },
  created() {
    this.getUser();
  },
  methods: {
    loginOut(){
      logout().then(response => {
        location.reload(true);
      });
    },
    getUser() {
      getUserProfile().then(response => {
        this.user = response.data;
        this.roleGroup = response.roleGroup;
        this.postGroup = response.postGroup;
      });
    }
  },
};
</script>

<style scoped lang="scss">
@font-face {
  font-family: SourceHanSansCNBold;
  src: url("../../../assets/fonts/SourceHanSansCN-Bold.otf");
}
.app-container {
  padding: 0 ;
}
/deep/ .van-hairline--bottom::after{
  border: none;
}
/deep/ .van-nav-bar{
  background-color: transparent;
}
/deep/ .van-nav-bar__title{
  color: #FFFFFF;
}
.topBackground{
  background-image: url("../../../../static/images/lawEnforcement/user_bg.png") ;
  background-size: 100%;
  background-repeat: no-repeat;
}
  .headImg{
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 10PX;
    overflow: hidden;
  }
  .userName{
    font-size: 0.55rem;
    color: #FFFFFF;
    line-height: 0.85rem;
  }
  .userDept{
    font-size: 0.4rem;
    color: #FFFFFF;
    line-height: 0.85rem;
  }
  .userInformation{
    padding: 0.3rem 6%;
  }
.listBox{
  width: 96%;
  margin: 0 auto;
  border-radius: 8Px;
  overflow: hidden;
  box-shadow: 0PX 5PX 5PX #cccccc;
  margin-top: 10PX;
  padding: 3% 0;
  .van-icon{
    vertical-align: middle;
  }
  .van-cell{
    padding: 3% 5%;
  }
  .custom-title{
    font-size: 16PX;
    color: #333333;
    vertical-align: middle;
    line-height: 1;
    position: relative;
    margin-left: 5PX;
  }
  .tap{
    color: #1D6FE9;
  }
  .bgBlue{
    display: block;
    position: absolute;
    width: 17PX;
    height: 17PX;
    border-radius: 50%;
    background-color: rgba(29,111,233,0.26);
    top: -2PX;
    right: -8PX;
  }
}
  .loginOut{
    width: 96%;
    margin: 10PX 2%;
    border-radius: 8Px;
    box-shadow: 0PX 5PX 5PX #cccccc;
    border: none;
  }
</style>