exam_mp/pages/user/settings.vue

<template>
  <Container
    title="设置"
    :scrollStyle="{
      padding: 0,
    }"
    bgColor="#f8f8f8"
  >
    <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"></view> -->
      <view class="setting_list">
        <view class="setting_item_loginout" @click="outLogin()">
          <text class="setting_title_loginout">退出登录</text>
          <view class="setting_icon">&gt;</view>
        </view>
      </view>
    </view>
  </Container>
</template>

<script>
import Container from "../../components/Container/Container.vue";
import CustomerService from "@/components/CustomerService/CustomerService.vue";

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.setStorageSync("pages/challenge/index", 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_loginout {
    height: 80rpx;
    display: block;
    font-size: 26rpx;
    line-height: 80rpx;
    margin: 10rpx 40rpx;
    padding: 0rpx 35rpx;
    background: #ffffff;
    background: #ffffff;
    border-radius: 100rpx 100rpx 100rpx 100rpx;
    text-align: center;
  }
  .setting_item {
    height: 80rpx;
    display: block;
    font-size: 26rpx;
    line-height: 80rpx;
    margin: 10rpx auto;
    padding: 0rpx 35rpx;
    background: #ffffff;
    .setting_title {
    }
    .setting_title_loginout {
      color: #999999;
    }
    .setting_icon {
      float: right;
      color: #999999;
    }
  }
}
</style>