nbjk-xcx/src/otherPages/beforeThreeExam/index.vue

<template>
  <view class="threeExam">
    <!-- <view style="position: absolute;top: 0;left: 0;z-index:99;">
      <image style="width: 100vw;" mode="widthFix" src="https://ndata.zzxcx.net/ctjk/mp-wx/threeExam/bg.png"></image>
    </view> -->
    <topbar>
      <view class="nav">
        <image @click="back" mode="widthFix" class="leftArrow"
          src="https://ndata.zzxcx.net/ctjk/mp-wx/mockExamEnd/arrow-left.png"></image>
        <text class="title">三力测试</text>
      </view>
    </topbar>

    <view class="mid1">
      <view class="mid1-line1">
        <view class="mid1-line1-title">考试类型 </view>
        <view class="mid1-line1-content">
          <view>小车（C1/C2）</view>
          <view>摩托车（D/E/F）</view>
          <view>轻型牵引挂车（C6）</view>
        </view>
      </view>
      <view class="mid1-line1">
        <view class="mid1-line1-title">考试标准 </view>
        <view class="mid1-line1-content">
          <view>20题，20分钟 </view>
        </view>
      </view>
      <view class="mid1-line1">
        <view class="mid1-line1-title">合格标准 </view>
        <view class="mid1-line1-content">
          <view>90分及格（满分100分） </view>
        </view>
      </view>
      <view class="mid1-line1">
        <view class="mid1-line1-title">出题规则 </view>
        <view class="mid1-line1-content">
          <view>根据公安部出题规则组卷</view>
        </view>
      </view>
      <view class="mid1-line2">
        <view class="mid1-line2-content">
          温馨提示：考试模式不能修改答案，每错1题扣5分，错题累计超过2题，考试不能通过，系统自动提醒交卷。
        </view>
      </view>
      <view class="mid1-submit">

        <view @click="watchAdTobegin" class="mid1-submit-begin">
          <view style="width: 300rpx;">
            <view class="mid1-submit-begin-line1">
              模拟考试
            </view>
            <view class="mid1-submit-begin-line2">
              仿真模拟考试
            </view>
          </view>
          <view class="mid1-submit-begin-button1">
            开始考试
          </view>
        </view>

        <navigator url="/otherPages/threeExam/index?showSubmit=0">
          <view class="mid1-submit-continue">
            <view style="width: 300rpx;">
              <view class="mid1-submit-continue-line1">
                全部题库
              </view>
              <view class="mid1-submit-continue-line2">
                顺序练习全部题目
              </view>
            </view>
            <view class="mid1-submit-continue-button1">
              开始练习
            </view>
          </view>
        </navigator>
      </view>
    </view>
    <view class="mid2">
      <view class="mid2-line1">
        <image class="mid2-line1-icon" src="https://ndata.zzxcx.net/ctjk/mp-wx/threeExam/%E9%97%AE%E5%8F%B7%402x.png"
          mode="widthFix"></image>
        <text style="color: #498ef5; font-size: 34rpx">什么是三力测试？</text>
      </view>
      <view class="mid2-line2">
        “三力”测试是指70周岁以上的人群申领小型汽车、小型自动档汽车、轻便摩托车的驾照时需要增加记忆力、判断力、反应力的测试,
        只有测试通过的才可报名。“三力”测试内容为驾驶理论,考生将随机抽取20道题（10道判断题、10道选择题）,20分钟完成作答,
        满分100分,90分合格,未通过的可以在三个月内补测两侧。
      </view>
    </view>
    <view style="height: 2vw;"></view>
    <view class="wxad">
      <ad ad-type="video" :ad-intervals="100" unit-id="adunit-8eb44bbd7e3147d4"></ad>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    watchAdTobegin() {
      let that = this
      let videoAd = null;
      uni.showModal({
        title: '观看激励广告',
        content: '广告结束后开始考试',
        success(res) {
          if (res.confirm) {
            if (wx.createRewardedVideoAd) {
              videoAd = wx.createRewardedVideoAd({
                adUnitId: "adunit-f0e94618f34d4baf",
              });
              videoAd.onLoad(() => {

              });
              videoAd.onError((err) => {
                console.log(err)
              });
              videoAd.offClose();
              videoAd.onClose((res) => {

                if (!res.isEnded) {
                  return
                }
                //	that.wxadWatchTip=false
                uni.navigateTo({
                  url: "/otherPages/threeExam/index?showSubmit=1"
                })
              });
              videoAd.show().catch(() => {
                // 失败重试
                videoAd
                  .load()
                  .then(() => videoAd.show())
                  .catch((err) => {
                    console.log("激励视频 广告显示失败");
                  });
              });
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }

        }

      })



    },
    back() {
      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss" scoped>
.threeExam {
  background: url("https://ndata.zzxcx.net/ctjk/mp-wx/threeExam/bg.png");
  background-size: 100%;
  background-repeat: no-repeat;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  position: relative;
  background-color: #fff;
  background-size: 100% auto;

  .nav {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;

    .leftArrow {
      width: 18rpx;
      position: absolute;
      left: 30rpx;
    }

    .title {
      position: absolute;
      left: 50%;
    }
  }

  .mid1 {

    width: 690rpx;

    margin: 0 auto;
    padding-top: 40rpx;
    background-size: 100%;

    .mid1-line1 {
      display: flex;

      flex-direction: row;

      padding: 10rpx 30rpx;


      .mid1-line1-title {
        width: 270rpx;
        padding-right: 66rpx;
        text-align: right;
        color: #8a9099;
        font-size: 30rpx;
      }

      .mid1-line1-content {
        width: 412rpx;
        padding-right: 30rpx;
        text-align: left;
        font-size: 30rpx;
        color: #5c6066;
      }
    }

    .mid1-line2 {
      padding: 0 10rpx;
      margin-top: 28rpx;

      .mid1-line2-content {
        background: rgba(255, 77, 83, 0.1);
        color: #ff4d53;
        padding: 15rpx;
        font-size: 26rpx;
      }
    }

    .mid1-submit {
      margin-top: 30rpx;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      height: 256rpx;
      flex-direction: column;
      align-items: center;
      align-content: center;


      .mid1-submit-begin {
        width: 630rpx;
        height: 108rpx;
        background: #498ef5;
        border-radius: 40px 40px 40px 40px;
        opacity: 1;
        color: #fff;
        padding: 0 50rpx;
        text-align: center;
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: space-between;

        .mid1-submit-begin-line1 {
          font-size: 30rpx;
          text-align: left;


        }

        .mid1-submit-begin-line2 {
          font-size: 24rpx;
          color: #CCE0FF;
          text-align: left;


        }

        .mid1-submit-begin-button1 {
          width: 200rpx;
          height: 68rpx;
          background: linear-gradient(90deg, #FFFFFF 0%, #BAD5FF 100%);
          border-radius: 34rpx 34rpx 34rpx 34rpx;
          line-height: 68rpx;
          color: #498EF5;
        }
      }

      .mid1-submit-continue {
        width: 630rpx;
        height: 108rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-content: center;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        opacity: 1;



        text-align: center;
        padding: 0 50rpx;
        background: linear-gradient(265deg, #31CC74 0%, #63E897 100%);

        .mid1-submit-continue-line1 {
          font-size: 30rpx;
          text-align: left;
          color: #fff;


        }

        .mid1-submit-continue-line2 {
          font-size: 24rpx;
          color: #CCE0FF;
          text-align: left;


        }

        .mid1-submit-continue-button1 {
          width: 200rpx;
          height: 68rpx;
          background: linear-gradient(90deg, #FFFFFF 0%, #BDFFD9 100%);
          border-radius: 34rpx 34rpx 34rpx 34rpx;
          line-height: 68rpx;
          color: #31CC74;
        }
      }
    }
  }

  .mid2 {
    width: 690rpx;
    background: #fff;
    margin: 0 auto;
    margin-top: 30rpx;
    box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.1);
    padding-top: 40rpx;
    padding-bottom: 40rpx;

    .mid2-line1 {
      display: flex;

      padding-bottom: 30rpx;
      padding-left: 30rpx;
      padding-right: 30rpx;
      align-content: center;
      align-items: center;

      .mid2-line1-icon {
        width: 58rpx;
        margin-right: 16rpx;
      }
    }

    .mid2-line2 {
      width: 630rpx;
      margin: 0 auto;
      background: #f2f3f5;
      color: #5c6066;
      padding: 20rpx;
    }
  }
}
</style>