feat:考试分数页面

src/components/circle-progress/index.vue

+<template>
+  <view
+    class="u-circle-progress"
+    :style="{
+      width: widthPx + 'px',
+      height: widthPx + 'px',
+      backgroundColor: bgColor,
+    }"
+  >
+    <!-- 支付宝小程序不支持canvas-id属性，必须用id属性 -->
+    <canvas
+      class="u-canvas-bg"
+      :canvas-id="elBgId"
+      :id="elBgId"
+      :style="{
+        width: widthPx + 'px',
+        height: widthPx + 'px',
+      }"
+    ></canvas>
+    <canvas
+      class="u-canvas"
+      :canvas-id="elId"
+      :id="elId"
+      :style="{
+        width: widthPx + 'px',
+        height: widthPx + 'px',
+      }"
+    ></canvas>
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+/**
+ * circleProgress 环形进度条
+ * @description 展示操作或任务的当前进度，比如上传文件，是一个圆形的进度条。注意：此组件的percent值只能动态增加，不能动态减少。
+ * @tutorial https://www.uviewui.com/components/circleProgress.html
+ * @property {String Number} percent 圆环进度百分比值，为数值类型，0-100
+ * @property {String} inactive-color 圆环的底色，默认为灰色(该值无法动态变更)（默认#ececec）
+ * @property {String} active-color 圆环激活部分的颜色(该值无法动态变更)（默认#19be6b）
+ * @property {String Number} width 整个圆环组件的宽度，高度默认等于宽度值，单位rpx（默认200）
+ * @property {String Number} border-width 圆环的边框宽度，单位rpx（默认14）
+ * @property {String Number} duration 整个圆环执行一圈的时间，单位ms（默认呢1500）
+ * @property {String} type 如设置，active-color值将会失效
+ * @property {String} bg-color 整个组件背景颜色，默认为白色
+ * @example <u-circle-progress active-color="#2979ff" :percent="80"></u-circle-progress>
+ */
+export default {
+  name: 'circle-progress',
+  props: {
+    // 圆环进度百分比值
+    percent: {
+      type: Number,
+      default: 0,
+      // 限制值在0到100之间
+      validator: (val) => {
+        return val >= 0 && val <= 100
+      },
+    },
+    // 底部圆环的颜色（灰色的圆环）
+    inactiveColor: {
+      type: String,
+      default: '#ececec',
+    },
+    // 圆环激活部分的颜色
+    activeColor: {
+      type: String,
+      default: '#19be6b',
+    },
+    // 圆环线条的宽度，单位rpx
+    borderWidth: {
+      type: [Number, String],
+      default: 14,
+    },
+    // 整个圆形的宽度，单位rpx
+    width: {
+      type: [Number, String],
+      default: 200,
+    },
+    // 整个圆环执行一圈的时间，单位ms
+    duration: {
+      type: [Number, String],
+      default: 1500,
+    },
+    // 主题类型
+    type: {
+      type: String,
+      default: '',
+    },
+    // 整个圆环进度区域的背景色
+    bgColor: {
+      type: String,
+      default: '#ffffff',
+    },
+  },
+  data() {
+    return {
+      // #ifdef MP-WEIXIN
+      elBgId: 'uCircleProgressBgId', // 微信小程序中不能使用this.$u.guid()形式动态生成id值，否则会报错
+      elId: 'uCircleProgressElId',
+      // #endif
+      // #ifndef MP-WEIXIN
+      elBgId: this.$u.guid(), // 非微信端的时候，需用动态的id，否则一个页面多个圆形进度条组件数据会混乱
+      elId: this.$u.guid(),
+      // #endif
+      widthPx: uni.upx2px(this.width), // 转成px后的整个组件的背景宽度
+      borderWidthPx: uni.upx2px(this.borderWidth), // 转成px后的圆环的宽度
+      startAngle: Math.PI * 0.84, // canvas画圆的起始角度，默认为3点钟方向，定位到12点钟方向
+      progressContext: null, // 活动圆的canvas上下文
+      newPercent: 0, // 当动态修改进度值的时候，保存进度值的变化前后值，用于比较用
+      oldPercent: 0, // 当动态修改进度值的时候，保存进度值的变化前后值，用于比较用
+    }
+  },
+  watch: {
+    percent(nVal, oVal = 0) {
+      if (nVal > 100) nVal = 100
+      if (nVal < 0) oVal = 0
+      // 此值其实等于this.percent，命名一个新
+      this.newPercent = nVal
+      this.oldPercent = oVal
+      setTimeout(() => {
+        // 无论是百分比值增加还是减少，需要操作还是原来的旧的百分比值
+        // 将此值减少或者新增到新的百分比值
+        this.drawCircleByProgress(oVal)
+      }, 50)
+    },
+  },
+  created() {
+    // 赋值，用于加载后第一个画圆使用
+    this.newPercent = this.percent
+    this.oldPercent = 0
+  },
+  computed: {
+    // 有type主题时，优先起作用
+    circleColor() {
+      if (
+        ['success', 'error', 'info', 'primary', 'warning'].indexOf(this.type) >=
+        0
+      )
+        return this.$u.color[this.type]
+      else return this.activeColor
+    },
+  },
+  mounted() {
+    // 在h5端，必须要做一点延时才起作用，this.$nextTick()无效(HX2.4.7)
+    setTimeout(() => {
+      this.drawProgressBg()
+      this.drawCircleByProgress(this.oldPercent)
+    }, 50)
+  },
+  methods: {
+    drawProgressBg() {
+      let ctx = uni.createCanvasContext(this.elBgId, this)
+      ctx.setLineWidth(this.borderWidthPx) // 设置圆环宽度
+      ctx.setStrokeStyle(this.inactiveColor) // 线条颜色
+      ctx.beginPath() // 开始描绘路径
+      // 设置一个原点(110,110)，半径为100的圆的路径到当前路径
+      let radius = this.widthPx / 2
+      ctx.arc(
+        radius,
+        radius,
+        radius - this.borderWidthPx,
+        this.startAngle,
+        2.16 * Math.PI,
+        false
+      )
+      ctx.stroke() // 对路径进行描绘
+      ctx.draw()
+    },
+    drawCircleByProgress(progress) {
+      // 第一次操作进度环时将上下文保存到了this.data中，直接使用即可
+      let ctx = this.progressContext
+      if (!ctx) {
+        ctx = uni.createCanvasContext(this.elId, this)
+        this.progressContext = ctx
+      }
+      // 表示进度的两端为圆形
+      ctx.setLineCap('round')
+      // 设置线条的宽度和颜色
+      ctx.setLineWidth(this.borderWidthPx)
+      ctx.setStrokeStyle(this.circleColor)
+      // 将总过渡时间除以100，得出每修改百分之一进度所需的时间
+      let time = Math.floor(this.duration / 100)
+      // 结束角的计算依据为：将2π分为100份，乘以当前的进度值，得出终止点的弧度值，加起始角，为整个圆从默认的
+      // 3点钟方向开始画图，转为更好理解的12点钟方向开始作图，这需要起始角和终止角同时加上this.startAngle值
+      let endAngle = ((1.32 * Math.PI) / 100) * progress + this.startAngle
+      ctx.beginPath()
+      // 半径为整个canvas宽度的一半
+      let radius = this.widthPx / 2
+      ctx.arc(
+        radius,
+        radius,
+        radius - this.borderWidthPx,
+        this.startAngle,
+        endAngle,
+        false
+      )
+      ctx.stroke()
+      ctx.draw()
+      // 如果变更后新值大于旧值，意味着增大了百分比
+      if (this.newPercent > this.oldPercent) {
+        // 每次递增百分之一
+        progress++
+        // 如果新增后的值，大于需要设置的值百分比值，停止继续增加
+        if (progress > this.newPercent) return
+      } else {
+        // 同理于上面
+        progress--
+        if (progress < this.newPercent) return
+      }
+      setTimeout(() => {
+        // 定时器，每次操作间隔为time值，为了让进度条有动画效果
+        this.drawCircleByProgress(progress)
+      }, time)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.u-circle-progress {
+  position: relative;
+  /* #ifndef APP-NVUE */
+  display: inline-flex;
+  /* #endif */
+  align-items: center;
+  justify-content: center;
+}
+
+.u-canvas-bg {
+  position: absolute;
+}
+
+.u-canvas {
+  position: absolute;
+}
+</style>

src/pages.json

@@ -114,6 +114,16 @@
 						"enablePullDownRefresh": false,
 						"disableScroll": true
 					}
+				},
+				{
+					"path": "score",
+					"name": "learnScore",
+					"style": {
+						"navigationBarTitleText": "考试成绩",
+						"navigationStyle": "custom",
+						"enablePullDownRefresh": false,
+						"disableScroll": true
+					}
 				}
 			]
 		},

src/pages/learn/beginAnswer.vue

@@ -58,7 +58,7 @@ export default {
       }
     },
     defaultImage() {
-      return process.uniEnv.qn_base_url + 'lianxiwancheng-f.png'
+      return process.uniEnv.qn_base_url + 'morentouxiang.png'
     },
     buttonStyle() {
       return {
@@ -75,6 +75,13 @@ export default {
     this.info = {
       name: '我就是昵称',
       image: '',
+      kemu: '考试科目fdsafsafdsadfdsafjlkafdaslffdsafsafsafdsafdsafdsajklsa',
+      tishu:
+        '考试题数fdasfasfasfffdsafsafdsadfdsafjlkafdaslffdsafsafsafdsafdsafdsajklsaasfdsafdasfadssafasfsaf',
+      biaozhun:
+        '合格标准dasfasfasfffdsafsafdsadfdsafjlkafdaslffdsafsafsafdsafdsafdsajklsaasfdsaf',
+      guize:
+        '出题规则dasfasfasfffdsafsafdsadfdsafjlkafdaslffdsafsafsafdsafdsafdsajklsaasfdsaf',
     }
   },
   methods: {
@@ -94,7 +101,7 @@ export default {
   height: 100vh;
   .content {
     height: 100%;
-    margin: 70rpx 24rpx 24rpx 44rpx;
+    margin: 70rpx 24rpx 44rpx 24rpx;
     background-color: #ffffff;
     border-radius: 12rpx 12rpx 0 0;
     padding: 0 30rpx 60rpx 30rpx;
@@ -121,7 +128,6 @@ export default {
         .image {
           width: 136rpx;
           height: 136rpx;
-          border-right: 136rpx;
           border-radius: 136rpx;
         }
       }
@@ -136,13 +142,16 @@ export default {
         margin: 30rpx 0;
         display: flex;
         justify-content: space-between;
-        align-items: center;
+        align-items: flex-start;
         color: #5a6073;
         font-size: 28rpx;
         text-align: right;
+        word-break: break-all;
         .left-view {
           text-align: left;
           color: #9ea5bb;
+          margin-right: 30rpx;
+          flex-shrink: 0;
         }
       }
     }

src/pages/learn/score.vue

+<template>
+  <view class="score-view">
+    <u-navbar
+      back-icon-color="#191C27"
+      background="transparent"
+      title="考试成绩"
+      titleColor="#191C27"
+      :border-bottom="false"
+      title-bold
+    ></u-navbar>
+    <view class="top-view" @click="$u.throttle(handleClickRecord, 500)">
+      考试错题已自动加入<text class="blue-text">"错题记录"</text> 方便练习</view
+    >
+    <view class="content">
+      <view class="content-view">
+        <image mode="widthFix" class="back-image" :src="backImage"></image>
+
+        <view class="chart-view">
+          <CircleProgress
+            class="progress-view"
+            active-color="#FFFFFF"
+            :percent="info.score"
+            inactive-color="rgba(255, 255, 255, 0.3)"
+            width="240"
+            border-width="8"
+            bg-color="transparent"
+          >
+            <view class="progress-content">
+              <view class="progress-score">{{ info.score }}</view>
+              <view class="progress-info">{{ resultText }}</view>
+              <view class="percent-text">超越了{{ info.percent }}%的学员</view>
+            </view>
+          </CircleProgress>
+        </view>
+        <view class="head-view">
+          <view class="image-view">
+            <image class="image" :src="info.image || defaultImage"> </image
+          ></view>
+          <view>{{ info.name }}</view>
+          <view class="time-view">{{
+            $u.timeFormat(
+              info.time || new Date().getTime(),
+              'yyyy.mm.dd hh:MM:ss'
+            )
+          }}</view>
+        </view>
+        <view class="detail-view">
+          <view class="name-view">{{ info.category }}</view>
+          <view class="type-view">{{ info.type }}</view>
+          <image class="qrcode-image" :src="qrcodeImage"></image>
+        </view>
+      </view>
+      <view class="bottom-view">
+        <u-button
+          :customStyle="buttonStyle"
+          @click="handleClick"
+          type="primary"
+          hover-class="hover-class"
+          open-type="share"
+        >
+          <image :src="pengyunquanImage" class="share-image"></image>
+          分享朋友圈
+        </u-button>
+        <u-button
+          :customStyle="buttonStyle"
+          @click="handleClick"
+          type="primary"
+          hover-class="none"
+        >
+          <image :src="weixinImage" class="share-image"></image>
+          分享给好友
+        </u-button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import CircleProgress from '@/components/circle-progress'
+
+export default {
+  components: {
+    CircleProgress,
+  },
+  data() {
+    return {
+      info: {},
+    }
+  },
+
+  computed: {
+    labels() {
+      return {
+        kemu: '考试科目',
+        tishu: '考试题数',
+        biaozhun: '合格标准',
+        guize: '出题规则',
+      }
+    },
+    defaultImage() {
+      return process.uniEnv.qn_base_url + 'morentouxiang-w.png'
+    },
+    buttonStyle() {
+      return {
+        height: '104rpx',
+        width: '312rpx',
+        backgroundColor: '#FFFFFF',
+        color: '#5A6073',
+        fontSize: '28rpx',
+        fontWeight: 'bold',
+        borderRadius: '24rpx',
+      }
+    },
+    isPass() {
+      return this.info.score > 60
+    },
+    resultText() {
+      return this.isPass ? '合格' : '不合格'
+    },
+    backImage() {
+      return this.isPass ? this.hegechengjiImage : this.buhegechengjiImage
+    },
+    qrcodeImage() {
+      return process.uniEnv.qn_base_url + 'buhegechengji.png'
+    },
+    buhegechengjiImage() {
+      return process.uniEnv.qn_base_url + 'buhegechengji.png'
+    },
+    pengyunquanImage() {
+      return process.uniEnv.qn_base_url + 'pengyunquan.png'
+    },
+    weixinImage() {
+      return process.uniEnv.qn_base_url + 'weixin.png'
+    },
+  },
+  onLoad() {
+    this.info = {
+      name: '我就是昵称',
+      image: '',
+      score: 50,
+      percent: 60,
+      time: 1626402760689,
+      category: '高处安装、维护、拆除作业人员',
+      type: '模拟考试',
+    }
+  },
+  methods: {
+    handleClick() {},
+    handleClickRecord() {},
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  color: transparent;
+  display: none;
+}
+.score-view {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background-color: #f7f9fc;
+
+  .top-view {
+    background-color: rgba(250, 90, 73, 0.1);
+    color: #5a6073;
+    font-weight: 28rpx;
+    height: 72rpx;
+    text-align: center;
+    line-height: 72rpx;
+    .blue-text {
+      color: #2953ff;
+    }
+  }
+  .content {
+    height: 100%;
+    overflow: auto;
+    padding: 64rpx 48rpx 56rpx 48rpx;
+    .content-view {
+      background-color: #ffffff;
+      border-radius: 24rpx;
+      position: relative;
+      overflow: hidden;
+      z-index: 1;
+      .back-image {
+        position: absolute;
+        width: 100%;
+        z-index: -1;
+      }
+      .chart-view {
+        text-align: center;
+        margin-top: 76rpx;
+
+        .progress-view {
+          .progress-content {
+            margin-top: 50rpx;
+            .progress-score {
+              font-size: 80rpx;
+              font-weight: bold;
+              color: #ffffff;
+            }
+            .progress-info {
+              font-size: 28rpx;
+              color: #ffffff;
+            }
+            .percent-text {
+              margin-top: 6px;
+              font-size: 28rpx;
+              color: #ffffff;
+            }
+          }
+        }
+      }
+
+      .head-view {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        font-size: 32rpx;
+        font-weight: bold;
+        color: #191c27;
+        flex-direction: column;
+        margin-bottom: 50rpx;
+        margin-top: 58rpx;
+        .image-view {
+          margin-bottom: 24rpx;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding: 4rpx;
+          width: 140rpx;
+          height: 140rpx;
+          background-color: #ffffff;
+          border-radius: 140rpx;
+          .image {
+            width: 136rpx;
+            height: 136rpx;
+            border-radius: 136rpx;
+          }
+        }
+        .time-view {
+          margin-top: 6rpx;
+          color: #5a6073;
+          font-size: 26rpx;
+        }
+      }
+      .detail-view {
+        padding: 20rpx 0;
+        text-align: center;
+        .name-view {
+          font-size: 36rpx;
+          font-weight: bold;
+          color: #191c27;
+          margin-bottom: 16rpx;
+        }
+        .type-view {
+          font-size: 28rpx;
+          color: #5a6073;
+          margin-bottom: 30rpx;
+        }
+        .qrcode-image {
+          width: 160rpx;
+          height: 160rpx;
+        }
+      }
+      .tip-view {
+        font-size: 26rpx;
+        color: #9ea5bb;
+        margin: 50rpx 0 210rpx 0;
+      }
+    }
+    .bottom-view {
+      margin-top: 30rpx;
+      display: flex;
+      justify-content: space-between;
+      align-content: center;
+      .share-image {
+        width: 48rpx;
+        height: 48rpx;
+        margin-right: 20rpx;
+      }
+    }
+  }
+}
+</style>