gdy_qywx_m/src/components/user/safe.vue

<template>


  <div style="background-color: #f5f5f5;">
    <van-nav-bar title="安全中心" left-text="返回" @click-left="$route_back" left-arrow>
    </van-nav-bar>
    <div class="user_index_scroller_com">

      <scroller>

        <van-cell-group class="user-group">
          <van-cell title="修改密码" is-link to="/change_pwd">
            <template slot="icon"><icon name="kttx" class="key-icon"></icon></template>
          </van-cell>
        </van-cell-group>

        <van-cell-group class="user-group">
          <van-cell icon="phone-o" title="修改手机号" is-link to="/change_phone">{{userinfo.mobile | mobile}}</van-cell>
        </van-cell-group>

      </scroller>

    </div>



  </div>

</template>

<script>
  export default {
    filters:{
      mobile(tel){
        if(tel){
          return tel==''?tel:tel.replace(tel.substring(3, 7), '****')
        }
        return ''
      }
    },
    methods:{
      logout(){
        let self = this
        this.$dialog.confirm({
          title: '退出登录',
          message: '您确定要退出吗？'
        }).then(() => {
          if (window.plus) {
            plus.storage.removeItem('user_info')
          } else {
            localStorage.removeItem('user_info')
          }

          self.$router.push({name: 'login'})
        }).catch(() => {
          // on cancel
        });

      }
    },
    data(){
      return {
        userinfo: this.$store.getters.user_info
      }
    }
  }
</script>

<style scoped>
  .user-group{margin-top:0.16rem;}
  .user_index_scroller_com{height: 100%; position: relative;}
  .user_index_header_com{height: 3.5rem; position: relative; z-index:2; padding-top:0.6rem;}
  .header_avatar_com{padding:0.32rem;}
  .user_nickname_com{text-align: center; line-height: 2;}
  .user_index_header_com .header_avatar{width:1.5rem; display: block; margin:0 auto;
    height: 1.5rem;
    -webkit-border-radius: 2.5rem;
    -moz-border-radius: 2.5rem;
    border-radius: 2.5rem;}
  .user_index_header_bg{position: absolute; width:20rem;
    height: 20rem;
    -webkit-border-radius: 5rem;
    top:-16rem;
    left:50%;
    margin-left:-10rem;
    background-color: #b8cc70;
    -moz-border-radius: 10rem;
    border-radius: 10rem; z-index:1;}
  .key-icon{width:0.32rem;
    height: 0.32rem; margin-top:0.08rem; margin-right:0.2rem;}
</style>