nml_mobile/src/pages/_user/index.vue

<template>
  <header class="header">
    <img src="@/assets/images/user-bg.png" alt="" />
    <span
      v-if="userInfo.user_role_id == '77'"
      class="changeStu"
      @click="childData.length != '0' ? (toChange = true) : (toChange = false)"
      ><img
        class="w-12px h-13px inline-block mr-8px"
        src="@/assets/images/change.png"
      />切换学生
      <span v-if="childId == '76'">（当前已绑定小孩{{ childName }}）</span
      ><span v-else>（当前未绑定小孩,请先绑定）</span>
    </span>

    <div class="logout" @click="loginOut">
      <span></span>
      退出登录
    </div>
    <div class="user-info">
      <div class="user-shot">
        <img :src="userInfo.user_avatar.big" alt="" />
      </div>
      <div class="info">
        <h3 class="user-name">
          {{ userInfo.user_realname
          }}<span class="role-type">{{ userInfo.user_role_name }}</span>
        </h3>
        <h4 class="user-school">{{ userInfo.sm_info.sm_name }}</h4>
      </div>
    </div>
  </header>
  <ul class="nav">
    <li @click="toOther(1)">
      <span class="nav-icon n-1"></span>
      <span class="nav-title">个人信息</span>
    </li>
    <li @click="toOther(2)">
      <span class="nav-icon n-2"></span>
      <span class="nav-title">信息中心</span>
    </li>
    <li @click="toOther(3)">
      <span class="nav-icon n-3"></span>
      <span class="nav-title">成长积分</span>
    </li>
  </ul>
  <ul class="menu-list">
    <li @click="toOther(4)">
      <div>
        <span class="order-icon o-1"></span>
        <h4 class="order-title">修改密码</h4>
      </div>
      <van-icon name="arrow" size="16" color="#E0E0E0" />
    </li>
    <!-- 家长 -->
    <li @click="toOther(5)" v-if="userInfo.user_role_id == '77'">
      <div>
        <span class="order-icon o-2"></span>
        <h4 class="order-title">关于我们</h4>
      </div>
      <van-icon name="arrow" size="16" color="#E0E0E0" />
    </li>
    <li @click="toOther(6)" v-if="userInfo.user_role_id == '77'">
      <div>
        <span class="order-icon o-3"></span>
        <h4 class="order-title">我的孩子</h4>
      </div>
      <van-icon name="arrow" size="16" color="#E0E0E0" />
    </li>

    <li @click="toOther(11)" v-if="userInfo.user_role_id == '77'">
      <div>
        <span class="order-icon o-5"></span>
        <h4 class="order-title">社团课程</h4>
      </div>
      <van-icon name="arrow" size="16" color="#E0E0E0" />
    </li>
    <li @click="toOther(11)" v-if="userInfo.user_role_id == '77'">
      <div>
        <span class="order-icon o-6"></span>
        <h4 class="order-title">学习圈子</h4>
      </div>
      <van-icon name="arrow" size="16" color="#E0E0E0" />
    </li>
    <li @click="toOther(11)" v-if="userInfo.user_role_id == '77'">
      <div>
        <span class="order-icon o-7"></span>
        <h4 class="order-title">课程收藏</h4>
      </div>
      <van-icon name="arrow" size="16" color="#E0E0E0" />
    </li>
    <!-- 班主任 -->
    <li v-if="isManage" @click="toOther(11)">
      <div>
        <span class="order-icon o-10"></span>
        <h4 class="order-title">专业成长</h4>
      </div>
      <van-icon name="arrow" size="16" color="#E0E0E0" />
    </li>
    <li v-if="isManage" @click="toOther(11)">
      <div>
        <span class="order-icon o-9"></span>
        <h4 class="order-title">团队带领</h4>
      </div>
      <van-icon name="arrow" size="16" color="#E0E0E0" />
    </li>
    <li v-if="isManage" @click="toOther(11)">
      <div>
        <span class="order-icon o-8"></span>
        <h4 class="order-title">我的荣誉</h4>
      </div>
      <van-icon name="arrow" size="16" color="#E0E0E0" />
    </li>

    <li @click="toOther(8)" v-if="isManage">
      <div>
        <span class="order-icon o-4"></span>
        <h4 class="order-title">班主任工作</h4>
      </div>
      <van-icon name="arrow" size="16" color="#E0E0E0" />
    </li>

    <!-- 社团教师 -->
    <li @click="toOther(10)" v-if="userInfo.user_role_id == '75' && !isManage">
      <div>
        <span class="order-icon o-5"></span>
        <h4 class="order-title">社团课程</h4>
      </div>
      <van-icon name="arrow" size="16" color="#E0E0E0" />
    </li>
    <!-- 管理员 -->
    <li @click="toOther(9)" v-if="userInfo.user_role_id == '72' && !isManage">
      <div>
        <span class="order-icon o-5"></span>
        <h4 class="order-title">社团开展情况</h4>
      </div>
      <van-icon name="arrow" size="16" color="#E0E0E0" />
    </li>
  </ul>
  <van-tabbar route>
    <van-tabbar-item replace icon="home-o" to="/home">首页</van-tabbar-item>
    <van-tabbar-item replace icon="chat-o" to="/chat">消息</van-tabbar-item>
    <van-tabbar-item replace icon="user-o" to="/user">我的</van-tabbar-item>
  </van-tabbar>
  <div v-show="toChange" class="cover"></div>
  <div class="change-stu" v-if="toChange">
    <van-icon @click="toChange = false" name="cross" size="24" />
    <h3>切换孩子</h3>
    <div class="mt-17px">
      <div
        @click="initChild(item)"
        v-for="(item, index) in childData"
        :key="item"
      >
        <div
          v-if="childData.length"
          class="stu-list flex w-full h-40px mb-7px rounded px-6px"
          :class="activeChild == item.user_id ? 'blueList' : ''"
        >
          <span class="flex w-1/6"
            ><img
              class="w-28px h-28px"
              style="borderradius: 50%"
              :src="item.user_avatar.big"
              alt=""
          /></span>
          <span class="w-3/5">{{ item.user_realname }}</span>
          <span class="stu-index">孩子{{ index + 1 }}</span>
        </div>
      </div>
    </div>
    <div class="submit">
      <button @click="submitDM()">提交</button>
    </div>
  </div>
</template>
<script>
import { showToast } from "vant";
import { setChild } from "~/store/child";

export default {
  data() {
    return {
      userInfo: user,
      isManage: false,
      toChange: false,
      absentStu: [],
      activeChild: "",
      childData: [],
      childId: "",
      childName: "",
    };
  },
  methods: {
    IsManage() {
      this.userInfo.cm_info.forEach((item) => {
        if (item.is_manage === 1) {
          this.isManage = true;
        } else {
          this.isManage = false;
        }
      });
    },
    loginOut() {
      localStorage.clear();
      window.location.href = "https://nmlm.bozedu.net/login.html";
    },
    toOther(type) {
      switch (type) {
        case 1:
          window.location.href =
            "https://nmlm.bozedu.net/page/my/profileModify.html";
          break;
        case 2:
          window.location.href =
            "https://nmlm.bozedu.net/page/my/msg.html?id=31";
          break;
        case 4:
          window.location.href =
            "https://nmlm.bozedu.net/page/my/pwdModify.html";
          break;
        case 5:
          window.location.href = "https://nmlm.bozedu.net/page/my/about.html";
          break;
        case 6:
          this.$router.push("/my_children");
          // window.location.href =
          //   "https://nmlm.bozedu.net/page/parent/my-children.html";
          break;
        case 7:
          window.location.href =
            "https://nmlm.bozedu.net/page/my/my-class.html";
          break;
        case 8:
          this.$router.push({ name: "bzrgz" });
          break;
        case 9:
          this.$router.push({ name: "stkzqk" });
          break;
        case 10:
          this.$router.push({ name: "stxk_teacher" });
          break;
        case 11:
          showToast("该模块正在开发中~");
          break;
      }
    },
    changeStu() {
      request({
        baseURL: window.GLOBAL_CONFIG.uc,
        timeout: 10 * 1000,
        url: "/index.php?mod=user&action=main&do=my_child",
        data: {},
      }).then((res) => {
        if (res.code == "1") {
          this.childData = res.data.info;
          if (
            this.childData.length == "0" &&
            this.userInfo.user_role_id == "77"
          ) {
            showToast("请先绑定孩子~");
          }
          if (this.userInfo.user_role_id == "77") {
            if (localStorage.getItem("childInfo_" + this.userInfo.user_id)) {
              let userXx = JSON.parse(
                localStorage.getItem("childInfo_" + this.userInfo.user_id)
              );
              this.activeChild = userXx.user_id;
              this.childId = userXx.user_role_id;
              this.childName = userXx.user_realname;
            } else if (this.childData[0].user_id) {
              let userXx = this.childData[0];
              // localStorage.setItem(
              //   "childInfo_" + this.userInfo.user_id,
              //   JSON.stringify(this.childData[0])
              // );
              this.activeChild = userXx.user_id;
              this.childId = userXx.user_role_id;
              this.childName = userXx.user_realname;
              //  console.log(this.childData[0].user_id, 2222);
              setChild(this.childData[0])
            }
          }
        }
      });
    },
    initChild(item) {
      this.childId = item.user_role_id;
      this.childName = item.user_realname;
      this.activeChild = item.user_id;
      // localStorage.setItem(
      //   "childInfo_" + this.userInfo.user_id,
      //   JSON.stringify(item)
      // );
      setChild(item);
    },
    submitDM() {
      showToast("切换成功~");
      this.toChange = false;
      location.reload();
    },
  },
  mounted() {
    this.IsManage();
  },
  created() {
    this.changeStu();
  },
};
</script>
<style lang="scss" scoped>
.header {
  position: relative;
  width: 100%;

  img {
    // width: 100%;
  }
  .changeStu {
    position: absolute;
    left: 33px;
    top: 25px;
    font-size: 14px;
    color: #fff;
  }
  .logout {
    position: absolute;
    right: 18px;
    top: 10px;
    font-size: 12px;
    color: #fff;

    span {
      display: block;
      margin: 0 auto;
      width: 30px;
      height: 30px;
      background: url("@/assets/images/logout.png") center no-repeat;
      background-size: 30px 30px;
    }
  }

  .user-info {
    position: absolute;
    left: 0;
    top: 55px;
    padding-left: 30px;
    display: flex;

    .user-shot {
      width: 54px;
      height: 54px;
      border-radius: 50%;
      overflow: hidden;

      img {
        width: 100%;
        border-radius: 50%;
      }
    }

    .info {
      flex: 1;
      padding-left: 10px;
      padding-top: 5px;

      .user-name {
        font-size: 14px;
        color: #fff;

        .role-type {
          padding: 2px 8px;
          font-size: 12px;
          border: 1px solid #ffffff;
          border-radius: 6px;
          margin-left: 15px;
        }
      }

      .user-school {
        margin-top: 5px;
        font-size: 13px;
        color: #fff;
      }
    }
  }
}

.nav {
  position: relative;
  margin: -30px 15px 0 15px;
  display: flex;
  height: 90px;
  background: #fff;
  border-radius: 8px 8px 0 0;
  align-items: center;

  li {
    width: 33.33%;
  }

  .nav-icon {
    display: block;
    margin: 0 auto;
    width: 24px;
    height: 24px;

    &.n-1 {
      background: url("@/assets/images/n-1.png") center no-repeat;
      background-size: 24px 24px;
    }

    &.n-2 {
      background: url("@/assets/images/n-2.png") center no-repeat;
      background-size: 23px 23px;
    }

    &.n-3 {
      background: url("@/assets/images/n-3.png") center no-repeat;
      background-size: 21px 20px;
    }
  }

  .nav-title {
    margin-top: 10px;
    display: block;
    font-size: 14px;
    color: #5a5858;
    text-align: center;
  }
}

.menu-list {
  margin: 50px 15px 0 15px;
  background: #fff;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 12px;

  li {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;

    & + li {
      border-top: 1px solid #e0e0e0;
    }
  }

  .order-icon {
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 18px;

    &.o-1 {
      background: url("@/assets/images/n-4.png") center no-repeat;
      background-size: 16px 18px;
    }

    &.o-2 {
      background: url("@/assets/images/n-5.png") center no-repeat;
      background-size: 18px 18px;
    }

    &.o-3 {
      background: url("@/assets/images/n-6.png") center no-repeat;
      background-size: 18px 16px;
    }
    &.o-4 {
      background: url("@/assets/images/n-7.png") center no-repeat;
      background-size: 18px 18px;
    }
    &.o-5 {
      background: url("@/assets/images/n-8.png") center no-repeat;
      background-size: 14px 17.5px;
    }
    &.o-6 {
      background: url("@/assets/images/n-9.png") center no-repeat;
      background-size: 18px 17.5px;
    }
    &.o-7 {
      background: url("@/assets/images/n-10.png") center no-repeat;
      background-size: 18px 18px;
    }
    &.o-8 {
      background: url("@/assets/images/n-11.png") center no-repeat;
      background-size: 17px 17px;
    }
    &.o-9 {
      background: url("@/assets/images/n-12.png") center no-repeat;
      background-size: 19.5px 17px;
    }
    &.o-10 {
      background: url("@/assets/images/n-13.png") center no-repeat;
      background-size: 18px 15px;
    }
    &.o-11 {
      background: url("@/assets/images/n-14.png") center no-repeat;
      background-size: 17.5px 17px;
    }
  }

  .order-title {
    margin-left: 10px;
    display: inline-block;
    vertical-align: middle;
    font-size: 15px;
    color: #363334;
  }
}
.cover {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000000;
  opacity: 0.3;
}

.change-stu {
  width: 6.8 * 13.3vw;
  // height: 8.24 * 13.3vw;
  color: #333333;
  background-color: #fff;
  position: fixed;
  top: 1.5 * 13.3vw;
  left: 0.32 * 13.3vw;
  border-radius: 0.1 * 13.3vw;
  z-index: 5;
  padding: 0.24 * 13.3vw 0.37 * 13.3vw;
  box-sizing: border-box;
  i {
    position: absolute;
    right: 0.2 * 13.3vw;
    top: 0.3 * 13.3vw;
  }
  h3 {
    // width: 1.2 * 13.3vw;
    height: 0.4 * 13.3vw;
    font-size: 0.3 * 13.3vw;
    position: relative;
  }
  h3::before {
    position: absolute;
    content: "";
    width: 20%;
    height: 0.2 * 13.3vw;
    bottom: 0 * 13.3vw;
    border-radius: 0.1 * 13.3vw;
    background-color: #c5c5ff;
    opacity: 0.5;
  }
}
.submit {
  text-align: center;
  margin-top: 0.4 * 13.3vw;
  button {
    width: 2 * 13.3vw;
    height: 0.68 * 13.3vw;
    background: #003eee;
    border-radius: 0.34 * 13.3vw;
    color: #fff;
    font-size: 0.34 * 13.3vw;
    margin: 0 0.2 * 13.3vw;
    &:disabled {
      pointer-events: none;
      background: #ccc;
    }
  }
}
.stu-list {
  border: 1px solid #ddd;
  line-height: 0.8 * 13.3vw;
  align-items: center;
  .stu-index {
    width: 1 * 13.3vw;
    height: 0.35 * 13.3vw;
    line-height: 0.32 * 13.3vw;
    background: #003eee;
    border: 0.01 * 13.3vw solid #003eee;
    border-radius: 0.1 * 13.3vw;
    font-size: 0.14 * 13.3vw;
    text-align: center;
    color: #ffffff;
  }
}
.blueList {
  border: 1px solid #003eee;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
}
</style>