AnYang_UI/anyangWebAPP/pages/setting/setting.vue

<template>
	<view class="content">
		<view class="userInfo">
      <view class="userInfoLeft">
        <image src="../../static/person.png" mode=""></image>
      </view>
      <view class="userInfoRight">
        <view>{{ userName }}</view>
        <view>{{ userCode }}</view>
      </view>
    </view>
    <view class="userList">
      <view class="listCell" v-for="(item,index) in listCell" :key="index">
        <image :src="item.imgPath"></image>
        <text>{{item.itemText}}</text>
        <uni-icons class="fontIcon" type="arrowright" color="#d6d6d4" size="18"></uni-icons>
      </view>
      
      <view class="listCell">
        <image src="../../static/Wd.png"></image>
        <text>版本</text>
        <text class="versionNum">1.0.0</text>
      </view>
    </view>
    <view class="btnExit">
      <button type="primary" @click="btnExit">退出登录</button>
    </view>
	</view>
</template>

<script>
	import { mapGetters	} from 'vuex';
  import store from '@/store';

  export default{
    data(){
      return{
        listCell:[
          {
            imgPath:'../../static/Wa.png',
            itemText:'服务守则'
          },
          {
            imgPath:'../../static/Wc.png',
            itemText:'服务协议'
          }
        ]
      }
    },
    onLoad() {
      
      // #ifdef APP-PLUS
        console.log(plus.runtime)
      // #endif
    },
    methods: {
      btnExit(){
        uni.showModal({
            title: '确定退出吗？',
            content: '退出到登录页面',
            success: function (res) {
                if (res.confirm) {
                    uni.setStorageSync('Username', '');
                    uni.setStorageSync('Password', '');
										uni.setStorageSync('token', '');

                    uni.reLaunch({
                    	url: '/pages/login/login'
                    });
                } else if (res.cancel) {
                    console.log('用户点击取消');
                }
            }
        });
        
      }
    },
    computed: {
      ...mapGetters([
        "userCode", // 用户工号
        "userName", // 用户名称
      ])
    }
    
  }
</script>

<style lang="scss">
  .userInfo{
    background: url(../../static/setting_banner.png) no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 260rpx;
    display: flex;
    .userInfoLeft{
      width: 150rpx;
      height: 150rpx;
      border-radius: 75rpx;
      margin: 30rpx 30rpx 0rpx 30rpx;
      background: #FFFFFF;
      image{
        width: 100%;
        height: 100%;
        padding: 30rpx 20rpx 30rpx 35rpx;
        box-sizing: border-box ;
      }
    }
    .userInfoRight{
      margin-top: 50rpx;
      
      view{
        color: #FFFFFF;
        font-size: 30rpx;
      }
    }
  }
  
  .userList{
    width: 100%;
    border-top: 1rpx solid #d6d6d4;
    border-bottom: 1rpx solid #d6d6d4;
    background: #FFFFFF;
    margin-top: 40rpx;
    overflow: hidden;
    .listCell{
      width: 720rpx;
      margin-left: 30rpx;
      height: 84rpx;
      line-height: 84rpx;
      border-bottom: 1rpx solid #d6d6d4;
      position: relative;
      display: flex;
      image{
        width: 40rpx;
        height: 40rpx;
        margin: 22rpx 22rpx 0 22rpx;
        box-sizing: border-box;
      }
      .fontIcon{
        position: absolute;
        right: 40rpx;
      }
      .versionNum{
        position: absolute;
        right: 80rpx;
        color: #999998;
      }
    }
    .listCell:last-child{
      border: none;
    }
    
  }
  
  .btnExit{
    width: 80%;
    margin: 30rpx auto;
    button{
      background: #f1ae53;
      
    }
    
  }

</style>