kailin_mp/pages/video/record.vue

<template>
  <view class="report_content">
    <view class="header">
      <view class="header_content">
        <view class="title">本次{{ type == "exam" ? "测评" : "学习" }}概览</view>
        <view class="content">
          <view class="content_row">
            <view class="main">{{ reportInfo.exam_time }}</view>
            <view class="tip">学习时长(分钟)</view>
          </view>
          <view class="content_row">
            <view class="main">{{ reportInfo.isanswer_total + "/" + reportInfo.answer_total }}</view>
            <view class="tip">答对题目</view>
          </view>
          <view class="content_row">
            <view class="main">{{ reportInfo.get_score }}</view>
            <view class="tip">获得积分</view>
          </view>
        </view>
      </view>
    </view>
    <view class="content">
      <view class="title">答题情况</view>
      <view class="content_list">
        <view class="conent_main" v-for="(item, index) in queston_list" :key="index">
          <view class="item_num">
            <view class="item_answer"><icon :type="item.is_answer == 0 ? 'cancel' : 'success'" size="20" /> &nbsp;第{{ index + 1 }}题</view>
            <view :style="item.get_score > 0 ? 'color:green' : 'color:red'">+{{ item.get_score }}&nbsp;积分</view>
          </view>
          <view class="item_title">{{ item.question_title }}</view>
        </view>
      </view>
    </view>
    <view class="bottom_btn">
      <view class="submit_btn defult" @click="_backList">返回课程列表</view>
      <view class="submit_btn" @click="_continue">{{ type == "exam" ? "重新练习" : "继续课后评测" }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      reportInfo: {
        exam_time: 0,
        isanswer_total: 0,
        answer_total: 0,
        get_score: 0,
      },
      queston_list: [],
      record_id: null,
      type: null, // 确保 type 在 data 中定义
    };
  },
  onLoad(params) {
    console.log("params:", params); // 获取到query参数
    this.record_id = params.record_id;
    this.type = params.type;
    //分享按钮
    uni.showShareMenu({
      withShareTicket: true,
      menus: ["shareAppMessage", "shareTimeline"],
    });
  },
  onShow() {
    this._getRecord(this.type);
    this._getAnswerList(this.type);
  },
  onShareAppMessage(obj) {
    return {
      title: `999智控终端平台\n学习报告`,
      path: `/pages/video/record?type=${this.type}&record_id=${this.record_id}`,
    };
  },
  methods: {
    _backList() {
      uni.redirectTo({
        url: `/pages/video/index`,
      });
    },
    _continue() {
      uni.redirectTo({
        url: `/pages/video/exam?id=${this.record_id}`,
      });
    },
    _getRecord(type) {
      this.$http.request(`api/video_${type}_record/get_report`, { record_id: this.record_id }).then((re) => {
        if (re.code == "success") {
          console.log(re.data);
          this.reportInfo = re.data;
        }
      });
    },
    _getAnswerList(type) {
      this.$http.request(`api/video_${type}_answer/get_list`, { record_id: this.record_id }).then((re) => {
        if (re.code == "success") {
          console.log(re.data);
          this.queston_list = re.data;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.report_content {
  .header {
    width: 100vw;
    padding: 36rpx;
    box-sizing: border-box;
    .header_content {
      height: 360rpx;
      width: 100%;
      background: linear-gradient(to bottom right, #6765f1, #a556f7);
      border-radius: 20rpx;
      color: #fff;
      padding: 36rpx;
      box-sizing: border-box;
      .content {
        height: calc(100% - 55rpx);
        display: flex;
        align-items: center;
        justify-content: space-between;
        .content_row {
          display: flex;
          flex-direction: column;
          align-items: center;
          .main {
            font-size: 52rpx;
            font-weight: bold;
            margin-bottom: 20rpx;
          }
          .tip {
            color: #bba6ff;
            font-size: 28rpx;
          }
        }
      }
    }
  }
  > .content {
    width: 100vw;
    padding: 36rpx;
    box-sizing: border-box;
    > .title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 36rpx;
    }
    > .content_list {
      width: 100%;
      height: calc(100vh - 750rpx);
      overflow: auto;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: 20rpx;
      .conent_main {
        border: 1px solid #ddd;
        box-shadow: 0 2px 4px 0 rgba(204, 204, 204, 0.5); /* 添加背景阴影 */
        width: 100%;
        padding: 20rpx;
        box-sizing: border-box;
        border-radius: 6rpx;
        display: flex;
        flex-direction: column;
        gap: 20rpx;
        .item_num {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .item_answer {
          display: flex;
          align-items: center;
        }
      }
    }
  }
  .bottom_btn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150rpx;
    border-top: 4rpx solid #ddd;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40rpx;
    box-sizing: border-box;
    .answer_info {
      display: flex;
      align-items: baseline;
    }
    .submit_btn {
      background-color: #5045e6;
      color: #fff;
      font-size: 28rpx;
      width: 45%;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 8rpx;
      box-shadow: 2rpx 2rpx 8rpx rgba(0, 0, 0, 0.1);
      text-align: center;
      &.defult {
        background-color: #fff;
        color: #333;
      }
    }
  }
}
</style>