HealthStudentWeb/src/views/development/index.vue

<!--  -->
<template>
  <div class="pageContent devlopment">
    <router-link to="/planDescription">
      <div class="bannar radius">
        <div class="image">
          <img src="@/assets/development/images/banner1.png" alt="" />
        </div>
        <div class="button min-text">了解详情</div>
      </div>
    </router-link>
    <div v-if="task">
      <div class="gap">当前任务</div>
      <div class="task">
        <div class="image">
          <img src="@/assets/development/images/task.png" alt="" />
        </div>
        <div class="task-detail">
          <div class="task-title">
            <div>
              <span>{{ task.planName }}</span>
              <span>{{ task.levelLv }}</span>
            </div>
            <div class="mid-text bold">{{ task.target }}</div>
          </div>
          <div class="task-times">
            <div class="task-time" v-for="(item, index) in task.taskDatas" :key="index" @click="toTask(item)">
              <div class="task-time-info">
                <div class="task-time-text">{{ item.name }}</div>
                <div class="task-time-button min-text" v-if="item.status !== 2">
                  {{ item.submitType === 2 ? '完成问卷' : item.submitType === 0 ? '查看进度' : '上传打卡' }}
                </div>
              </div>
              <div class="task-time-icon">
                <div class="task-time-icon-active" v-if="item.status === 2">
                  <div class="image">
                    <img src="@/assets/development/images/active.png" alt="" />
                  </div>
                </div>
                <div class="task-time-icon-unactive" v-else>
                  <div class="image">
                    <img src="@/assets/development/images/unactive.png" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="levels">
      <div
        class="level radius"
        v-for="(item, index) in levels"
        :key="index"
        :class="{
          unlock: item.status === 3,
          now: item.status === 1,
          active: item.status === 2
        }"
        @click="toDetail(item)"
      >
        <div class="bg">
          <div class="image">
            <img :src="item.image" alt="" />
          </div>
        </div>
        <div class="level-info">
          <div class="level-info-level">
            <div class="level-info-text">{{ item.levelName }}</div>
            <div class="level-info-status">
              {{
                item.status === 0
                  ? '未解锁'
                  : item.status === 3
                  ? '可查看'
                  : item.status === 1
                  ? '进行中'
                  : item.status === 2
                  ? '已完成'
                  : '未知'
              }}
            </div>
          </div>
          <div class="level-info-title">
            <div class="level-info-title-text">{{ item.title }}</div>
            <div class="level-info-title-desc">{{ item.desc }}</div>
          </div>
        </div>
        <div class="tip">
          <div class="image">
            <img :src="active" alt="" v-if="item.status === 1 || item.status === 2 || item.status === 3" />
            <img :src="unactive" alt="" v-else />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import development from '@/api/development';
const active = require('@/assets/development/images/leveTip.png');
const unactive = require('@/assets/development/images/leveTipGray.png');

export default {
  data() {
    return {
      active,
      unactive,
      task: null,
      levels: []
    };
  },
  created() {
    // 写死一个用户Id
    this.$store.commit(
      'authToken',
      'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJVc2VySW5mbyI6eyJJZCI6NCwiU291cmNlVHlwZSI6MSwiVXNlcklkIjoiNWE2OThlOTQtOGM0MS00ZWM1LWJiM2MtNGFiYWIyZjM3Y2QxIiwiTG9naW5OYW1lIjoiMTg2NjQyNzI3NDMiLCJMb2dpblR5cGUiOjF9LCJFeHAiOjE3MTQ0NjAxNDY5NTkuMH0.KV1AQ1fDcbds9QvqxyMe3gRzEN83eMJKd9YF_jPnY8w'
    );
    this.$store.commit('userId', '5a698e94-8c41-4ec5-bb3c-4abab2f37cd1');
    this.$store.commit('personId', 26);
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      this.getTasks();
      this.getLevels();
    },
    async getLevels() {
      let re = await development.LevelList();

      if (re) {
        if (re.succeed) {
          if (re.data && Array.isArray(re.data) && re.data.length > 0) {
            let list = re.data.map(item => {
              return {
                id: item.id,
                level: item.level,
                levelName: item.levelLv,
                title: item.target,
                desc: `赢取${item.reward}`,
                status: item.status,
                image: require(`@/assets/development/images/leve_${item.level}.png`)
              };
            });
            this.levels = list;
          }
        } else {
          this.$message.error(re.message);
        }
      }
    },
    async getTasks() {
      let re = await development.CurrentTask();
      if (re) {
        if (re.succeed) {
          if (re.data && Array.isArray(re.data) && re.data.length > 0) {
            this.task = re.data[0];
          }

          //测试
          // this.task = {
          //   planName: '健康同学成长计划-测试',
          //   levelId: 1,
          //   name: '启蒙熊',
          //   level: 1,
          //   levelLv: 'Lv01',
          //   serialNumber: '阶段1',
          //   target: '美好开始',
          //   coverH5: '',
          //   unlockType: 0,
          //   status: 1,
          //   taskDatas: [
          //     {
          //       id: 5,
          //       rankId: 1,
          //       name: '幸运熊计划玩法攻略阅读1次',
          //       roleType: 1,
          //       submitType: 0,
          //       status: 0
          //     },
          //     {
          //       id: 6,
          //       rankId: 2,
          //       name: '完成填写育儿问卷1次',
          //       roleType: 2,
          //       submitType: 2,
          //       status: 0
          //     },
          //     {
          //       id: 7,
          //       rankId: 3,
          //       name: '陪伴孩子读赠送的书籍1次',
          //       roleType: 2,
          //       submitType: 1,
          //       status: 0
          //     }
          //   ]
          // };
        } else {
          this.$message.error(re.message);
        }
      }
    },
    toTask(item) {
      if (item.status === 2) {
        return;
      }
      if (item.submitType === 2) {
        this.$toast('问卷调查');
      } else if (item.submitType === 0) {
        this.$router.push({
          name: 'taskWearing',
          params: {
            id: item.id,
            rankId: item.rankId
          }
        });
      } else {
        this.$router.push({
          name: 'taskSubmission',
          params: {
            id: item.id,
            rankId: item.rankId
          }
        });
      }
    },
    toDetail(item) {
      this.$router.push({
        name: 'taskDetail',
        params: {
          id: item.id
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
@import './include.scss';
.min-text {
  font-size: 25px;
  font-weight: 400;
}
.mid-text {
  font-size: 28px;
  font-weight: 400;
}
.radius {
  border-radius: 60px;
}
.bold {
  font-weight: bold;
}
.gap {
  padding-left: 35px;
}
.devlopment {
  padding-top: 30px;
  font-weight: bold;

  .bannar {
    overflow: hidden;
    position: relative;
    width: 100%;
    min-height: 200px;
    .button {
      position: absolute;
      right: 5%;
      bottom: 9%;
      padding: 10px 20px;
      color: white;
      background-color: #000;
      border-radius: 40px;
    }
  }

  .task {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 750px;
    border-radius: 40px;
    background: #ff5f8b;

    .image {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
    }
    .task-detail {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 2;

      .task-title {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        padding: 20px 40px;
        .mid-text {
          font-size: 30px;
        }
      }
      .task-times {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding: 0px 60px;
        padding-top: 20px;

        .task-time {
          display: flex;
          align-items: flex-end;
          margin-bottom: 20px;

          .task-time-info {
            display: flex;
            flex-direction: column;
            align-items: center;

            .task-time-text {
              letter-spacing: 5px;
            }
            .task-time-button {
              align-self: flex-end;
              padding: 0px 30px;
              color: white;
              background-color: #000;
              border-radius: 40px;
            }
          }
          .task-time-icon {
            width: 50px;
            height: 50px;
            margin-left: 20px;

            div {
              width: 100%;
              height: 100%;
            }
            .image {
              position: relative;
            }
          }
        }
      }
    }
  }

  .levels {
    position: relative;
    padding-top: 20px;
    .level {
      overflow: hidden;
      position: relative;
      width: 100%;
      height: 270px;
      color: white;
      margin-top: 20px;
      background: #b3b3b3;

      .bg {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1;
      }
      .level-info {
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 100%;
        padding-left: 260px;
        z-index: 3;

        .level-info-level {
          .level-info-text {
            font-size: 50px;
            letter-spacing: 2px;
          }
          .level-info-status {
            font-size: 25px;
            font-weight: 400;
          }
        }
        .level-info-title {
          font-size: 34px;
          letter-spacing: 2px;
        }
      }
      .tip {
        position: absolute;
        right: 20px;
        top: 20px;
        width: 120px;
        height: 173px;
        z-index: 3;
      }
    }
    .unlock {
      background: #ff5f8b;
    }
    .now {
      background: #8dc21f;
    }
    .active {
      background: #179b3b;
    }
  }
}
</style>