sishitongtang-worker/pages/setting/setting.vue

<template>
  <view>
    <cpn-navbar title="设置" :isBack="true"></cpn-navbar>

    <view>
      <!-- 个人信息 -->
      <view class="user-info">
        <view class="user-info-title">个人信息</view>

        <view class="user-info-content">
          <view class="head-img">
            <view class="text">头像</view>
            <view style="display: flex">
              <view class="avatar">
                <u-image
                  :src="vuex_user.avatar || '/static/logo.png'"
                  height="104"
                  width="104"
                  shape="circle"
                ></u-image>
              </view>
              <view class="arrow">
                <u-icon name="arrow-right" size="24"></u-icon>
              </view>
            </view>
          </view>

          <view class="line"></view>

          <view class="name">
            <view class="name-text">账户名</view>
            <view class="name-user">{{ vuex_user.name || "" }}</view>
          </view>
        </view>
      </view>

      <!-- 版本信息 -->
      <view class="sys-info">
        <view class="sys-info-title">版本信息</view>

        <view class="sys-info-content">
          <view>当前版本</view>
          <view>V{{ vuex_version }}</view>
        </view>
      </view>

      <view class="logout">
        <u-button :hair-line="false" :custom-style="btnStyle" @click="logout"
          >退出登录</u-button
        >
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      btnStyle: {
        width: "670rpx",
        height: "76rpx",
        color: "#1479FF",
        border: "2rpx solid #1479FF",
      },
    };
  },
  methods: {
    logout() {
      this.$u.api.logout().then((res) => {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
        setTimeout(()=>{
					uni.navigateTo({
          url: "/pages/login/login",
          fail: (err) => {
            console.log(err);
          },
        });
uni.clearStorageSync();
				},1500)

        
      });
    },
  },
  computed: {},
};
</script>

<style scoped lang="scss">
.user-info {
  margin-top: 28rpx;

  &-title {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #abaebe;
    line-height: 40rpx;

    padding-left: 40rpx;
  }

  &-content {
    width: 750rpx;
    background: #ffffff;
    box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(219, 218, 218, 0.5);

    margin: 26rpx auto 0 auto;

    .head-img {
      display: flex;
      justify-content: space-between;
      align-items: center;

      & > view > view {
        align-self: center;
      }

      .text {
        font-size: 32rpx;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: #333333;

        padding-left: 40rpx;
      }

      .avatar {
        padding: 18rpx 0rpx;
      }

      .arrow {
        padding: 0 50rpx 0 40rpx;
      }
    }

    .line {
      width: 670rpx;
      height: 2rpx;
      border: 2rpx solid #eeeff5;

      margin: 0 auto;
    }

    .name {
      display: flex;
      align-items: center;
      justify-content: space-between;

      padding: 20rpx 40rpx;

      &-text {
        font-size: 32rpx;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: #333333;
      }

      &-user {
        font-size: 32rpx;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: #333333;
      }
    }
  }
}

.sys-info {
  margin-top: 34rpx;

  &-title {
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #abaebe;

    padding: 0 0 26rpx 36rpx;
  }

  &-content {
    background: #ffffff;
    box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(219, 218, 218, 0.5);
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 22rpx 40rpx;

    & > view {
      font-size: 32rpx;
      font-family: PingFang-SC-Medium, PingFang-SC;
      font-weight: 500;
      color: #333333;
    }
  }
}

.logout {
  margin-top: 40rpx;
}
</style>