YingXingAI/pages/login/roleSelection.vue

<template>
  <view class="flex-col page">
    <u-navbar
      :custom-back="backFn"
      :background="background"
      :border-bottom="false"
      title=""
    ></u-navbar>
    <view>
      <view class="title">
        <h3>请选择登录角色</h3>
        <text class="tips"
          >温馨提示：因为系统中存在多个角色，请选择角色后再登录</text
        >
      </view>
      <view class="selectList">
        <view
          class="item flex-row"
          :class="{ 'item-selected': [0,2].includes(vuex_user.userType) }"
          @click="goStudent"
        >
          <view class="name">
            <text class="text">我是学生</text>
            <text class="text text-en">Student</text>
          </view>
          <view class="student"></view>
        </view>
        <view
          class="item flex-row"
          :class="{ 'item-selected': vuex_user.userType == '1' }"
          @click="goTeacher"
        >
          <view class="name">
            <text class="text">我是教师</text>
            <text class="text text-en">Teacher</text>
          </view>
          <view class="teacher"></view>
        </view>
        <!-- <view
          class="item flex-row"
          :class="{ 'item-selected': vuex_user.userType == '2' }"
          @click="goGraduate"
        >
          <view class="name">
            <text class="text">我是毕业生</text>
            <text class="text text-en">Graduate</text>
          </view>
          <view class="graduate"></view>
        </view> -->
      </view>
    </view>
  </view>
</template>

<script>
import uButton from "../../uview-ui/components/u-button/u-button.vue";

export default {
  components: { uButton },
  data() {
    return {
      background: {
        backgroundColor: "transparent",
      },
      source: "",
      userRole: uni.getStorageSync("role"),
    };
  },
  onLoad(e) {
    console.log(e, "e");
    this.source = e.source;
  },
  methods: {
    backFn() {
      console.log(this.source, "source---");
      if (this.source === "my") {
        uni.switchTab({
          url: "/pages/my/my/my",
        });
        return;
      }
      if (this.source === "login") {
        this.$u.vuex("vuex_msgList", "");
        this.$u.vuex("vuex_user", "");
        this.$u.vuex("vuex_token", "");
        this.$u.vuex("vuex_userInfo", "");
        uni.clearStorage();
        this.$u.route({
          url: "/pages/login/login/login",
        });
        return;
      }
      uni.navigateBack();
    },
    async goTeacher() {
      const res = await this.$u.apiList.SelectUserTypeApi();
      console.log(res, "res---");
      const jzgFlag = res.jzgFlag;
      // const studentFlag = res.studentFlag
      if (jzgFlag === false) {
        uni.setStorageSync("role", "teacher");
        uni.navigateTo({
          url: "/pages/login/teacherCertification",
        });
        return;
      }
      const req = {
        userType: 1,
      };
      const result = await this.$u.apiList.UpdateUserTypeApi(req);
      console.log(result, "result---");
      this.vuex_user.userType = 1;
      uni.switchTab({
        url: "/pages/my/my/my",
      });
    },
    async goStudent() {
      const res = await this.$u.apiList.SelectUserTypeApi();
      console.log(res, "res---");
      // const jzgFlag = res.jzgFlag;
      const studentFlag = res.studentFlag;
      if (studentFlag === false) {
        uni.setStorageSync("role", "student");
        uni.navigateTo({
          url: "/pages/login/perfect/perfect",
        });
        return;
      }
      const req = {
        userType: 0,
      };
      const result = await this.$u.apiList.UpdateUserTypeApi(req);
      console.log(result, "result---");
      this.vuex_user.userType = 0;
      uni.switchTab({
        url: "/pages/my/my/my",
      });
    },
    async goGraduate() {
      uni.navigateTo({
        url: "/pages/login/graduateCertification/graduateCertification",
      });
      // uni.$u.toast("功能开发中");
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  background: linear-gradient(
    0deg,
    rgba(80, 123, 244, 0) 80%,
    rgba(95, 147, 238, 0.3) 100%
  );
  height: 100%;
  .button {
    margin: 0.6rem 0.15rem 0;
  }
}

.selectList {
  width: calc(100% - 30rpx);
  margin: 0 auto;
  .item {
    height: 278rpx;
    padding: 15rpx;
    margin-bottom: 15rpx;
    box-shadow: 0rpx 20rpx 40rpx 0rpx rgba(0, 0, 0, 0.05);
    border-radius: 32rpx;
    border: 4rpx solid #e7ecf0;
    .name {
      width: 60%;
      display: flex;
      justify-content: center;
      // align-items: center;
      flex-direction: column;
      padding-top: 20rpx;
      padding-left: 100rpx;
      .text {
        margin-top: 10rpx;
        font-size: 48rpx;
        font-weight: bold;
        color: #333;
        // margin-right: 200rpx;
        letter-spacing: 2rpx;
      }
      .text-en {
        font-size: 40rpx;
        color: #666;
        letter-spacing: 2rpx;
        font-weight: normal;
      }
    }
  }
  .item-selected {
    border: 4rpx solid #8ad3fd;
  }
}
.title {
  width: calc(100% - 60rpx);
  margin: 70rpx auto 100rpx;
  h3 {
    font-weight: 800;
    font-size: 48rpx;
    color: #000;
    line-height: 60rpx;
  }
  .tips {
    font-weight: 500;
    font-size: 24rpx;
    color: #666666;
  }
}
.teacher {
  width: 256rpx;
  height: 256rpx;
  -moz-background-image: url("/static/common/img/teacher.png");
  -webkit-background-image: url("/static/common/img/teacher.png");
  background-image: url("/static/common/img/teacher.png");
  background-repeat: no-repeat;
  background-size: cover;
}
.student {
  width: 256rpx;
  height: 256rpx;
  -moz-background-image: url("/static/common/img/student.png");
  -webkit-background-image: url("/static/common/img/student.png");
  background-image: url("/static/common/img/student.png");
  background-repeat: no-repeat;
  background-size: cover;
}
.graduate {
  width: 256rpx;
  height: 256rpx;
  -moz-background-image: url("/static/common/img/graduate.png");
  -webkit-background-image: url("/static/common/img/graduate.png");
  background-image: url("/static/common/img/graduate.png");
  background-repeat: no-repeat;
  background-size: cover;
}
</style>