kailin_mp/pages/user/settings.vue

<template>
  <view>
    <view class="user_box">
      <view class="box_left">
        <image class="user_image" :src="userInfo.userpic"></image>
      </view>
      <view class="box_center">
        <view class="user_name">{{ userInfo.username }}</view>
        <view class="user_info">{{ userInfo.phone }}</view>
      </view>
      <view class="box_right"> </view>
    </view>
    <view class="setting_list">
      <navigator class="setting_item" url="/pages/addr/index">
        <text class="setting_title">收货地址</text>
        <view class="setting_icon"> &gt; </view>
      </navigator>
      <!-- <navigator class="setting_item" url="/pages/settings/settings" >
				<text class="setting_title">权限管理</text>
				<view class="setting_icon">&gt; </view>
			</navigator> -->
    </view>
    <view class="setting_list">
      <view class="setting_item" @click="outLogin()">
        <text class="setting_title">退出登录</text>
        <view class="setting_icon">&gt; </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        username: "",
        userpic: "",
        phone: "",
        status: 0,
        company_status: 0,
      },
    };
  },
  onLoad() {
    let userInfo = uni.getStorageSync("userInfo");
    this.userInfo = userInfo;
    if (!this.userInfo.userpic) this.userInfo.userpic = "https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/icon/doctor.png";
  },
  onShow() {},
  methods: {
    outLogin() {
      uni.showModal({
        title: "确认退出登录?",
        success(re) {
          if (re.confirm) {
            // 清空登录标识
            uni.setStorageSync("userLogin", null);
            // 清空用户信息
            uni.setStorageSync("userInfo", null);
            // 跳转到登录页
            uni.redirectTo({
              url: "/pages/login/index",
            });
          }
        },
      });
    },
  },
};
</script>

<style lang="less">
.user_box {
  width: 680rpx;
  height: 180rpx;
  overflow: hidden;
  background: #ffffff;
  padding: 10rpx 35rpx;
  .box_left {
    float: left;
    display: block;
    width: 140rpx;
    height: 140rpx;
    .user_image {
      display: block;
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      margin: 10rpx auto;
    }
  }
  .box_center {
    float: left;
    width: 300rpx;
    height: 140rpx;
    margin-left: 35rpx;
    .user_name {
      font-size: 30rpx;
      line-height: 80rpx;
    }
    .user_info {
      color: #999999;
      font-size: 24rpx;
      line-height: 60rpx;
    }
  }
  .box_right {
    float: right;
    width: 140rpx;
    height: 140rpx;
    font-size: 20rpx;
    .setting_page {
      width: 140rpx;
      height: 140rpx;
      display: block;
      overflow: hidden;
      .setting_icon {
        width: 60rpx;
        height: 60rpx;
        display: block;
        margin: 40rpx auto;
      }
    }
  }
}
.setting_list {
  overflow: hidden;
  margin: 10rpx auto;
  padding: 0rpx 0rpx;
  .setting_item {
    height: 80rpx;
    display: block;
    font-size: 26rpx;
    line-height: 80rpx;
    margin: 10rpx auto;
    padding: 0rpx 35rpx;
    background: #ffffff;
    .setting_title {
    }
    .setting_icon {
      float: right;
      color: #999999;
    }
  }
}
</style>