CEES-H5-New/src/views/mainPage.vue

<template>
  <div class="main-container">
    <div class="hsd-title">
      <img src="@/assets/orangeUi/logo.svg" />
    </div>
    <div class="head-cg">
      <img src="@/assets/orangeUi/cg.svg" />
    </div>
    <div class="main-content">
      <div class="main-text">
        {{ userInfo.userName }}，您已成功报名！
        <p>
          感谢您参与本次
          <em style="font-style: normal; color: red; font-weight: 700">{{ getUserInfo(userInfo.majorId) }}</em> 学科评卷工作！
        </p>
      </div>
    </div>
    <div class="main-icon">
      <div class="main-item">
        <van-row wrap>
          <van-col span="6" v-if="showIcon.show0">
            <img @click="show0 = true" src="../assets/imgs/my.svg" alt="" />
            <van-dialog
              title="个人信息"
              :overlayStyle="{ background: 'rgba(0, 0, 0, 0.8)' }"
              :show-confirm-button="false"
              v-model:show="show0"
            >
              <div class="tishi">
                <van-form @submit="onSubmit">
                  <van-cell-group inset>
                    <van-field
                      style="height: 35px; line-height: 100%"
                      readonly
                      v-if="userInfo.userName"
                      v-model="userInfo.userName"
                      name="userName"
                      label="姓名"
                      type="text"
                    />
                    <van-field
                      readonly
                      style="height: 35px; line-height: 100%"
                      v-if="userInfo.identityId"
                      v-model="userInfo.identityId"
                      name="userCardId"
                      label="身份证号"
                    />
                    <!--                   <van-field-->
                    <!--                       style="height: 35px; line-height: 100%"-->
                    <!--                       v-model="user.sex"-->
                    <!--                       readonly-->
                    <!--                       name="picker"-->
                    <!--                       label="性别"-->

                    <!--                   />-->
                    <!--                   <van-field-->
                    <!--                       style="height: 35px; line-height: 100%"-->
                    <!--                       readonly-->
                    <!--                       v-model="user.age"-->
                    <!--                       name="age"-->
                    <!--                       label="年龄"-->
                    <!--                       type="text"-->

                    <!--                   />-->
                    <van-field
                      style="height: 35px; line-height: 100%"
                      readonly
                      v-if="userInfo.phone"
                      v-model="userInfo.phone"
                      name="phone"
                      label="手机号"
                      type="number"
                    />
                    <van-field
                      style="height: 35px; line-height: 100%"
                      v-if="userInfo.jobTitle"
                      v-model="userInfo.jobTitle"
                      readonly
                      name="picker"
                      label="职称"
                    />
                    <van-field
                      style="height: 35px; line-height: 100%"
                      readonly
                      v-if="userInfo.office"
                      v-model="userInfo.office"
                      name="office"
                      label="职务"
                      type="text"
                    />
                    <van-field
                      style="height: 35px; line-height: 100%"
                      readonly
                      v-if="userInfo.workName"
                      v-model="userInfo.workName"
                      name="workName"
                      label="单位名称"
                      type="text"
                    />
                    <van-field
                      style="height: 35px; line-height: 100%"
                      readonly
                      v-if="userInfo.workPhone"
                      v-model="userInfo.workPhone"
                      name="workPhoen"
                      label="单位电话"
                      type="text"
                    />
                    <van-field
                      style="height: 35px; line-height: 100%"
                      v-if="userInfo.pyCard"
                      readonly
                      v-model="userInfo.pyCard"
                      name="pyCard"
                      label="银行卡号"
                      type="number"
                    />

                    <van-field
                      style="height: 35px; line-height: 100%"
                      readonly
                      v-if="userInfo.bankAddress"
                      v-model="userInfo.bankAddress"
                      name="bankAddress"
                      label="开户所在地"
                      type="text"
                    />
                    <van-field
                      style="height: 35px; line-height: 100%"
                      readonly
                      v-if="userInfo.bankName"
                      v-model="userInfo.bankName"
                      name="bankName"
                      label="开户行"
                      type="text"
                    />
                    <van-field
                      style="height: 35px; line-height: 100%"
                      readonly
                      v-if="userInfo.carStatus === 1"
                      v-model="userInfo.carNumber"
                      name="carNumber"
                      label="车牌号"
                      type="text"
                      height="40px"
                    />
                    <van-field
                      name="dormitoryStatus"
                      v-if="userInfo.dormitoryStatus === 1"
                      :readonly="true"
                      style="height: 35px; line-height: 50%"
                      label="是否住宿"
                    >
                      <template #input>
                        <van-radio-group
                          checked-color="#8D2328"
                          style="height: 35px; line-height: 50%"
                          v-model="userInfo.dormitoryStatus"
                          direction="horizontal"
                        >
                          <!--                    <van-radio name="1">是</van-radio>-->
                          <!--                    <van-radio name="0">否</van-radio>-->
                          {{ userInfo.dormitoryStatus === 1 ? '是' : '否' }}
                        </van-radio-group>
                      </template>
                    </van-field>
                    <van-field
                      v-if="userInfo.studentId"
                      style="height: 35px; line-height: 100%"
                      readonly
                      v-model="userInfo.studentId"
                      name="studentId"
                      label="学号"
                      type="text"
                      height="40px"
                    />
                    <van-field
                      v-if="userInfo.teacherId"
                      style="height: 35px; line-height: 100%"
                      readonly
                      v-model="userInfo.teacherId"
                      name="teacherId"
                      label="工号"
                      type="text"
                      height="40px"
                    />
                    <van-field
                      v-if="userInfo.mealCard"
                      style="height: 35px; line-height: 100%"
                      readonly
                      v-model="userInfo.mealCard"
                      name="teacherId"
                      label="饭卡"
                      type="text"
                      height="40px"
                    />
                  </van-cell-group>
                </van-form>
              </div>

              <span class="dialog-close-content" @click="show0 = false">×</span>
            </van-dialog>
            <p>我的信息</p>
          </van-col>

          <van-col span="6" v-if="showIcon.show1">
            <img @click="show1 = true" src="../assets/imgs/ditu.svg" alt="" />
            <div class="ditu-img" v-if="show1">
              <span @click="show1 = false"> 关闭&ensp;✕ </span>
              <div class="card-img">
                <img src="@/assets/orangeUi/ditu.jpg" style="width: 100%; height: 100%" alt="师大地图" />
              </div>
            </div>
            <p>师大地图</p>
          </van-col>

          <van-col span="6" v-if="showIcon.show2">
            <img @click="show2 = true" src="@/assets/imgs/txz.svg" alt="" />
            <div class="txz-img" v-if="show2">
              <span @click="show2 = false"> 关闭&ensp;✕ </span>
              <!--             <div class="card-pai">黑A·35648</div>-->
              <div class="card-pai">{{ carNum() }}</div>
              <div class="card-tishi">该车辆为评卷教师车辆，已向学校报备，请放行！</div>
            </div>
            <p>通行证</p>
          </van-col>

          <van-col span="6" v-if="showIcon.show3">
            <img @click="showGroup" src="@/assets/imgs/fenzu.svg" alt="" />
            <van-dialog
              :overlayStyle="{ background: 'rgba(0, 0, 0, 0.8)' }"
              :show-confirm-button="false"
              :show-cancel-button="false"
              v-model:show="show3"
            >
              <span class="dialog-close-content" @click="show3 = false">×</span>
              <div class="grop-by">
                分组信息
                <p v-if="!group">暂时未分组</p>
                <p v-else>{{ group }}</p>
              </div>
            </van-dialog>
            <p>所属分组</p>
          </van-col>
          <van-col span="6" v-if="showIcon.show4">
            <img @click="show4 = true" src="@/assets/imgs/sushi.svg" alt="" />
            <van-dialog
              :overlayStyle="{ background: 'rgba(0, 0, 0, 0.8)' }"
              :show-confirm-button="false"
              :show-cancel-button="false"
              v-model:show="show4"
            >
              <span class="dialog-close-content" @click="show4 = false">×</span>
              <div class="grop-by">
                宿舍分配
                <p v-if="!store.LoginUser.dormitory">暂时未分配</p>
                <p v-else>{{ store.LoginUser.dormitory }}</p>
              </div>
            </van-dialog>
            <p>宿舍</p>
          </van-col>
          <van-col span="6" v-if="showIcon.show5">
            <img @click="show5 = true" src="@/assets/imgs/didian.svg" alt="" />
            <van-dialog
              :overlayStyle="{ background: 'rgba(0, 0, 0, 0.8)' }"
              :show-confirm-button="false"
              :show-cancel-button="false"
              v-model:show="show5"
            >
              <div class="grop-by">
                评卷地点信息
                <p>暂时未发布</p>
                <!--               <p v-if="!group">暂时未发布</p>-->
                <!--               <p v-else>{{ group }}</p>-->
              </div>
              <!--             <img src="@/assets/img/dt.jpg"/>-->
              <span class="dialog-close-content" @click="show5 = false">×</span>
            </van-dialog>
            <p>评卷地点</p>
          </van-col>

          <van-col span="6">
            <img @click="show6 = true" src="@/assets/imgs/xysh.svg" alt="" />
            <div class="xysh-img" :class="handoffValue" v-if="show6" @click="toggleShow">
              <span @click="show6 = false"> 关闭&ensp;✕ </span>
              <!--              <em class="em-next"></em>-->
            </div>
            <p>校园生活</p>
          </van-col>

          <van-col span="6" v-if="showIcon.show7">
            <img @click="show7 = true" src="../assets/imgs/zhixie.svg" alt="" />
            <div class="zhixie-img" v-if="show7">
              <span @click="show7 = false"> 关闭&ensp;✕ </span>
              <div class="card-img">
                <img src="@/assets/orangeUi/zhixie.jpg" style="width: 100%; height: 100%" />
              </div>
            </div>

            <p>致谢</p>
          </van-col>

          <!--        <van-col span="6" v-if="showIcon.show8">-->
          <!--          <img @click="show8 = true" src="@/assets/imgs/zz.svg" alt="">-->
          <!--          <van-dialog-->
          <!--              style="height: 80%;"-->
          <!--              :overlayStyle="{ background: 'rgba(0, 0, 0, 0.8)' }"-->
          <!--              :show-confirm-button="false"-->
          <!--              cancel-button-text="长按图片保存"-->
          <!--              cancel-button-color="#e34032"-->
          <!--              v-model:show="show8" show-cancel-button>-->
          <!--            <img src="@/assets/img/ryzs.png"/>-->
          <!--            <span class="dialog-close-content" @click="show8 = false">×</span>-->
          <!--          </van-dialog>-->
          <!--          <p>证书</p>-->
          <!--        </van-col>-->
        </van-row>

        <div class="main-bottom">
          <!--        <img src="@/assets/img/bottom.png">-->
          <!--        <img src="@/assets/img1/footer1.svg" >-->
        </div>
      </div>
    </div>
    <div class="footer">
      <!--     <img class="bot-img" src="@/assets/img1/footer3.svg" >-->
      <img class="bot-img" src="@/assets/orangeUi/footer_cg.svg" />
    </div>
  </div>
</template>
<script setup lang="ts">
  import { onMounted, reactive, ref } from 'vue';
  import { useUserStore } from '@/store';
  import { getUser, getGroupName } from '@/api';

  const store = useUserStore();
  const show0 = ref(false);
  const show1 = ref(false);
  const show2 = ref(false);
  const show3 = ref(false);
  const show4 = ref(false);
  const show5 = ref(false);
  const show6 = ref(false);
  const show7 = ref(false);
  const show8 = ref(false);
  const showDitu = ref(false);
  const handoff = ref(false);
  const handoffValue = ref('xysh-img1');

  function toggleShow() {
    if (handoff.value) {
      handoffValue.value = 'xysh-img2';
      handoff.value = false;
    } else {
      handoffValue.value = 'xysh-img1';
      handoff.value = true;
    }
  }

  const user = store.LoginUser;
  /*
   * 1. 获取用户信息
   * 2. 获取用户分组信息
   * 3. 获取用户宿舍信息
   * 4. 获取用户评卷地点信息
   * 5. 获取用户校园生活信息
   * 6. 获取用户致谢信息
   * 7. 获取用户证书信息
   * */
  const group = ref('');
  const showIcon = reactive({
    show0: false,
    show1: false,
    show2: false,
    show3: false,
    show4: false,
    show5: false,
    show6: false,
    show7: false,
    show8: false,
  });
  let userInfo = reactive({
    userName: '', // 用户名
    majorId: 0, // 专业ID
    phone: '', // 手机号
    studentId: '', // 学号
    groupId: 0, // 分组ID
    teacherId: '', // 工号
    jobTitle: '', // 职称
    identityId: '', // 身份证号
    office: '', // 职务
    workName: '', // 单位名称
    workPhone: '', // 单位电话
    pyCard: '', // 银行卡号
    bankAddress: '', // 开户所在地
    bankName: '', // 开户行
    carNumber: '', // 车牌号
    dormitoryStatus: 0, // 是否住宿（1：是，0：否）
    mealCard: '', // 饭卡
  });

  const showGroup = () => {
    show3.value = true;
    getGroupName(userInfo.groupId).then(
      (res) => {
        group.value = res.result;
      },
      (err) => {
        console.log(err);
      },
    );
  };
  const carNum = () => {
    let carNum = userInfo.carNumber;
    if (carNum) {
      var s = carNum.substring(0, 2);
      var s1 = carNum.substring(2);
      return s + '·' + s1;
    } else {
      return '暂没有车牌号';
    }
  };

  // 页面加载时获取用户信息
  onMounted(() => {
    getUser(store.getUserId).then(
      (res) => {
        console.log('获取到的用户信息', res);
        Object.assign(userInfo, res.result.user); // 使用 Object.assign 更新属性
        // console.log( store.LoginUser.majorId)
        store.setMajorId(store.LoginUser.majorId);
        Object.assign(showIcon, res.result);
      },
      (err) => {
        console.log(err);
      },
    );
  });

  function getUserInfo(majorId: number) {
    let majorName = '';
    majors.forEach((item) => {
      if (item.value === majorId) {
        majorName = item.name;
      }
    });
    return majorName;
  }

  const majors = [
    {
      id: 1,
      name: '语文',
      value: 1,
    },
    {
      id: 2,
      name: '地理',
      value: 4,
    },
    {
      id: 3,
      name: '历史',
      value: 7,
    },
    {
      id: 4,
      name: '政治',
      value: 8,
    },
  ];
</script>
<style scoped lang="scss">
  .main-container {
    height: 100vh;
    width: 100vw;
    background: url('@/assets/orangeUi/bj5.svg') no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }

  .hsd-title {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px; // 调整顶部间距

    img {
      width: 65%;
      margin-top: 8vh;
    }
  }

  .head-cg {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 90%;
      margin-top: 5vh;
    }
  }

  .main-content {
    //margin-top: 10vh;
    width: 100vw;
    height: 10vh;
    text-align: center;
    //border: 1px solid orange;
    color: black;
    font-weight: 600;
  }

  .main-icon {
    width: 97vw;
    height: 20vh;
    text-align: center;

    //margin-top: 5vh;

    .main-item {
      img {
        width: 50%;
        margin-top: 15%;
      }

      p {
        margin-top: -5px;
        font-size: 0.7rem;
        font-weight: 600;
      }
    }
  }

  .footer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 100%;
    }
  }

  /* 弹窗样式 */
  .dialog-close-content {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 24px;
    font-weight: 700;
    color: #949494;
    cursor: pointer;
  }

  /* 地图、通行证等弹窗样式 */
  .ditu-img,
  .txz-img,
  .zhixie-img,
  .xysh-img {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: white;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;

    span {
      position: absolute;
      right: 20px;
      top: 20px;
      font-size: 20px;
      font-weight: 700;
      color: #262626;
      cursor: pointer;
    }

    img {
      max-width: 90%;
      max-height: 90%;
    }
  }

  /* 校园生活弹窗样式 */
  .xysh-img1 {
    background: url('@/assets/orangeUi/xysh1.jpg') no-repeat center center;
    background-size: cover;
  }

  .xysh-img2 {
    background: url('@/assets/orangeUi/xysh2.jpg') no-repeat center center;
    background-size: cover;
  }
</style>