merchapp/java-mall-app-shop-admin/pages/my/setting.vue

<template>
  <view class="setting-container">
    <view class="form-item" @click="skipuUserInfo">
      <view class="user-info">
        <u--image
          class="user-img"
          :src="userInfo.user_avatar || '../../static/user-img.png'"
          shape="circle"
          width="60"
          height="60"
        ></u--image>
        <view class="user-box">
          <view class="user-nickname">账号：{{ userInfo.user_nickname }}</view>
          <view class="user-num">用户编号：{{ userInfo.user_level_id }}</view>
        </view>
      </view>
      <u-icon
        style="display: inline-block; margin-left: 8rpx"
        name="arrow-right"
        size="16"
        color="#cccccc"
      ></u-icon>
    </view>
    <view class="form-item" style="margin-top: 40rpx">
      <view class="item-label"> 铃声设置 </view>
      <u-icon
        style="display: inline-block; margin-left: 8rpx"
        name="arrow-right"
        size="16"
        color="#cccccc"
      ></u-icon>
    </view>
    <view class="form-item" style="margin-top: 40rpx" @click="skipuProtocol">
      <view class="item-label"> 隐私政策 </view>
      <u-icon
        style="display: inline-block; margin-left: 8rpx"
        name="arrow-right"
        size="16"
        color="#cccccc"
      ></u-icon>
    </view>
    <view class="form-item" @click="skipuAboutUs">
      <view class="item-label"> 关于我们 </view>
      <u-icon
        style="display: inline-block; margin-left: 8rpx"
        name="arrow-right"
        size="16"
        color="#cccccc"
      ></u-icon>
    </view>
    <view class="form-item" style="margin-top: 40rpx" @click="skipuVersions">
      <view class="item-label"> 版本信息 </view>
      <u-icon
        style="display: inline-block; margin-left: 8rpx"
        name="arrow-right"
        size="16"
        color="#cccccc"
      ></u-icon>
    </view>
    <view class="form-item btn-outLogin" @click="outLogin">
      <view class="item-label"> 退出登录 </view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
import { OutLogin } from "../../api/user";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState("user", ["userInfo"]),
  },
  methods: {
    skipuContract() {
      uni.navigateTo({
        url: "/pages/my/contract",
      });
    },
    skipuUserInfo() {
      uni.navigateTo({
        url: "/pages/my/userInfo",
      });
    },
    skipuProtocol() {
      uni.navigateTo({
        url: "/pages/my/protocol/protocol",
      });
    },
    skipuAboutUs() {
      uni.navigateTo({
        url: "/pages/my/aboutUs/aboutUs",
      });
    },
    skipuVersions() {
      uni.navigateTo({
        url: "/pages/my/versions",
      });
    },
    outLogin() {
      uni.showModal({
        title: "退出登录",
        content: `您是否要退出登录？`,
        success: async (res) => {
          if (res.confirm) {
            let res = await OutLogin();
            if (res && res.status == 200) {
              uni.removeStorageSync("ukey");
              uni.removeStorageSync("uid");
              uni.removeStorageSync("accountDashboard");
              uni.removeStorageSync("approvalStatus");
              uni.removeStorageSync("approvalStatusInfo");
              uni.removeStorageSync("auditInfo");
              uni.removeStorageSync("contractDownloadUrl");
              uni.removeStorageSync("pdfjs.history");
              uni.removeStorageSync("userInfo");

              this.$store.state.user.ukey = "";
              this.$store.state.user.uid = "";
              this.$store.state.user.auditStatusInfo = {
                approval_invalid_col: [],
                approval_status: -4,
                approval_remark: "",
                id: 0,
              };
              setTimeout(() => {
                uni.redirectTo({
                  url: "/pages/index/index",
                });
              }, 100);
            }
          } else if (res.cancel) {
          }
        },
      });
    },
  },
};
</script>

<style lang="scss">
.setting-container {
  height: calc(100vh - 88rpx);
  background: #f6f6f6;

  .form-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx;
    border-bottom: 1px solid #f4f4f4;
    background: #fff;

    .user-info {
      display: flex;
      align-items: center;

      .user-img {
        margin-right: 20rpx;
      }

      .user-nickname {
        margin-bottom: 12rpx;
      }

      .user-num {
        font-size: 24rpx;
        color: #aaaaaa;
      }
    }
  }

  .btn-outLogin {
    position: fixed;
    width: 92%;
    bottom: 0;
    text-align: center;

    .item-label {
      margin: 0 auto;
    }
  }
}
</style>