zhishifufei_uniapp/pages/topic/problem_index.vue

<template>
  
  <BaseContainer class="problem-index-page">
    <NavBar title="练习详情" />
    <template v-if="problem.id">
      <view class="wrapper">
        <view class="title">{{ problem.title }}</view>
        <view class="group">
          {{ problem.answer }}人已答题
          <view>
            试题数量：<text>{{ problem.item_number }}题</text>
          </view>
        </view>
        <view class="list">
          <view class="item">
            <view>
              <text>{{ problem.single_number }}</text
              >题
            </view>
            单选题
          </view>
          <view class="item">
            <view>
              <text>{{ problem.many_number }}</text
              >题
            </view>
            多选题
          </view>
          <view class="item">
            <view>
              <text>{{ problem.judge_number }}</text
              >题
            </view>
            判断题
          </view>
        </view>
        <view>
          <navigator :url="`/pages/topic/problem_detail?type=1&test_id=${id}`">
                <view v-if="!status">开始练习</view>
                <view v-if="status === 1">再次练习</view>
                <view v-if="status === 2">继续练习</view>
          </navigator>
        </view>
      </view>
      <view class="content">
        <view>题型介绍：</view>
        <view class="list">
          <view>单选题（选项中只有1个正确答案)；</view>
          <view>多选题（选项中至少有2个正确答案)；</view>
          <view>判断题（选项中只有1个正确答案)。</view>
        </view>
      </view>
    </template>
  </BaseContainer>
</template>

<script>
import { getTestPaperDetails,situationRecord } from "@/api/topic";
export default {
  filters: {
    m(n, d) {
      (x = ("" + n).length), (p = Math.pow), (d = p(10, d));
      x -= x % 3;
      return Math.round((n * d) / p(10, x)) / d + " kMGTPE"[x / 3];
    },
  },
  data() {
    return {
      problem: {},
      id: 0,
      status:-1
    };
  },
  onShow(){
    this.getsituationRecord();
  },
  onLoad({ id }) {
    this.id = id;
    this.init();
  },
  methods: {
    getsituationRecord(){
      situationRecord({id:this.id}).then(res => {
          this.status = res.data;
      }).catch(err=>{
      })
    },
    init() {
      getTestPaperDetails(this.id).then(({ data }) => {
        this.problem = data;
      });
    },
  },
};
</script>

<style>
page {
  background-color: #f5f5f5;
}
</style>

<style scoped lang="scss">
/* 练习详情 */
.wrapper {
  padding: 35rpx 30rpx 50rpx;
  border-radius: 12rpx;
  margin: 70rpx 55rpx 50rpx;
  background-color: #ffffff;

  box-shadow: 0 3rpx 20rpx rgba(0, 0, 0, 0.05);
}

.wrapper .title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 32rpx;
  text-align: center;
  color: #282828;
}

.wrapper .group {
  padding-top: 30rpx;
  padding-bottom: 30rpx;
  font-size: 26rpx;
  text-align: center;
  color: #999999;
}

.wrapper .group view {
  display: inline;
  margin-left: 50rpx;
}

.wrapper .group text {
  color: #ff6b00;
}

.wrapper .list {
  display: flex;
  border-top: 1px solid #f5f5f5;
}

.wrapper .item {
  flex: 1;
  min-width: 0;
  padding-top: 40rpx;
  padding-bottom: 75rpx;
  font-size: 24rpx;
  text-align: center;
  color: #999999;
}

.wrapper .item view:first-child {
  font-size: 22rpx;
  color: #2c8eff;
}

.wrapper .item text {
  margin-right: 5rpx;
  font-weight: 600;
  font-size: 44rpx;
}

.wrapper .list + view {
  padding-right: 20rpx;
  padding-left: 20rpx;
}

.wrapper navigator {
  display: block;
  height: 74rpx;
  border-radius: 37rpx;
  background-color: #2c8eff;
  font-family: inherit;
  font-weight: normal;
  font-size: 30rpx;
  line-height: 74rpx;
  text-align: center;
  color: #ffffff;
}

.content {
  margin-left: 75rpx;
  font-size: 22rpx;
  line-height: 44rpx;
  color: #999999;
}

.content .list {
  margin-left: 1em;
  list-style: decimal;

  view {
    display: list-item;
  }
}
</style>