settings.vue

<template>
  <div class="settings">
    <van-cell-group class="group-1">
      <van-cell title="用户名" :value="userName" />
      <van-cell is-link center title="头像" @click="onModefy">
        <img class="avatar-img" :src="imageBaseUrl + avatar" alt="头像" />
      </van-cell>
    </van-cell-group>
    <van-cell-group>
      <van-cell
        class="van-less"
        is-link
        title="推荐人邀请码"
        :value="inviteeCode"
        @click="fillInviterCode"
      />
      <van-cell is-link title="软件更新" value="版本v1.2" />
      <van-cell is-link title="用户协议" @click="jumpToInstructions" />
    </van-cell-group>

    <a href="redirect://xts.com/login_activity?hideBack=true">
      <van-button size="large" class="logout-btn" @click="logout"
        >退出登录</van-button
      >
    </a>

    <base-dialog
      base-dialog-title="推荐人邀请码"
      base-dialog-btn="提交"
      :base-dialog-show="inviteeCodeDialog"
      :base-dialog-show-close="true"
      @onClose="onCloseDialog"
      @onClick="onFillInviteeCode"
    >
      <div slot="content">
        <p class="content-tip">请输入您的推荐人邀请码</p>
        <van-field
          v-model="fillCode"
          maxlength="6"
          class="validCodeInput"
          placeholder="请输入"
        />
      </div>
    </base-dialog>
  </div>
</template>

<script>
import { getUserInfo2 } from "@/api/user";
import { logout } from "@/api/user";
import { fillInviteCode } from "@/api/user";
import BaseDialog from "../components/BaseDialog.vue";
export default {
  components: { BaseDialog },
  name: "Settings",
  data() {
    return {
      userName: "",
      imageBaseUrl: "",
      headImage: "",
      avatar: "",
      fileList: [],
      fillCode: "",
      inviteeCode: "未填写",
      inviteeCodeDialog: false
    };
  },
  mounted() {
    this.imageBaseUrl = process.env.VUE_APP_BASE_URL;
    this.getUser();
  },
  methods: {
    getUser() {
      const params = {
        userId: JSON.parse(localStorage.getItem("user")).userId
      };
      console.log("setting-userId", params);
      getUserInfo2(params)
        .then(res => {
          if (res.userId) {
            localStorage.setItem("user", JSON.stringify(res));
            this.$nextTick(() => {
              this.userName = res.userId;
              this.inviteeCode =
                res.beInvitedCode == 1
                  ? "请填写推荐人邀请码"
                  : res.beInvitedCode;
              this.avatar = res.headImage;
              this.headImage = res.headImage;
            });
          }
        })
        .catch(err => {
          if (err.response.status === 502) {
            this.$toast("服务在升级，请稍后重试");
          }
        });
    },
    logout() {
      localStorage.clear();
      logout().then();
      this.$bridgeToAppFun.logoutToApp();
    },
    jumpToInstructions() {
      this.$router.push("/instructions");
    },
    onModefy() {
      this.$router.push({
        path: "/modefy-avatar",
        query: {
          headImage: this.headImage
        }
      });
    },
    onCloseDialog() {
      this.inviteeCodeDialog = false;
    },
    onFillInviteeCode() {
      if (!this.fillCode) {
        this.$toast.fail("请填写推荐人邀请码");
        return;
      }
      if (!/^[A-z|\d]{6}$/.test(this.fillCode)) {
        this.$toast.fail("邀请码只支持6位数字+字母的组合");
        return;
      }
      this.inviteeCodeDialog = false;
      const params = {
        inviteCode: this.fillCode,
        userId: JSON.parse(localStorage.getItem("user")).userId
      };
      fillInviteCode(params)
        .then(res => {
          if (res.code == 0) {
            // console.log('成功');
            this.inviteeCode = this.fillCode;
          } else {
            this.$toast.fail(res.message);
          }
        })
        .catch(err => {
          console.log(err);
          this.$toast.fail(err);
        });
    },
    fillInviterCode() {
      if (
        this.inviteeCode === "请填写推荐人邀请码" ||
        this.inviteeCode == "1"
      ) {
        this.inviteeCodeDialog = true;
        this.fillCode = "";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.settings {
  box-sizing: border-box;
  padding: 10px 16px;
  .van-less {
    .van-cell__right-icon {
      display: none;
    }
  }
}
.group-1 {
  margin-bottom: 10px;
  .avatar-img {
    width: 37px;
    height: 37px;
    border-radius: 50%;
  }
}
.logout-btn {
  margin: 10px 0;
}
.content-tip {
  text-align: center;
  font-size: 14px;
  color: #333333;
}
.validCodeInput {
  width: 245px;
  margin: 35px auto;
  background-color: #f9f9f9;
  border-radius: 20px;
}
</style>