三力测试圆环绘制中

src/components/m-nav-bar/m-nav-bar.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="header">
+  <div
+    :class="{
+      fixed: fixed,
+    }"
+    class="header"
+  >
     <image
       @click="onClickLeft"
       class="arrow"
@@ -22,13 +27,18 @@ export default {
     return {
       whiteArrow:
         "https://ndata.zzxcx.net/ctjk/mp-wx/beforeMockExam/arrow-left.png",
-      blackArrow: "https://ndata.zzxcx.net/ctjk/mp-wx/mockExamEnd/arrow-left.png",
+      blackArrow:
+        "https://ndata.zzxcx.net/ctjk/mp-wx/mockExamEnd/arrow-left.png",
     };
   },
   components: {
     mIcon,
   },
   props: {
+    fixed: {
+      type: Boolean,
+      default: false,
+    },
     transparent: {
       type: Boolean,
       default: false,
@@ -55,16 +65,23 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.fixed {
+  position: fixed !important;
+  top: 0;
+
+}
 .header {
   position: sticky;
   top: 0;
   font-size: 15px;
   padding: 15px;
   z-index: 999;
+  width: 750rpx;
   .arrow {
     width: 10px;
     height: 17px;
   }
+  
 
   .title {
     position: absolute;

src/otherPages/careGzh/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <div style="display: flex; position: relative">
+    <!-- <van-icon @click="back" class="leftback" name="arrow-left" /> -->
+    <image
+      mode="widthFix"
+      class="bg"
+      :show-menu-by-longpress="true"
+      src="https://ndata.zzxcx.net/ctjk/mp-wx/careGzh/care1.png"
+    ></image>
+    <image
+      mode="widthFix"
+      :show-menu-by-longpress="true"
+      class="hand"
+      src="https://ndata.zzxcx.net/ctjk/mp-wx/careGzh/hand.gif"
+    ></image>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    back() {
+      uni.navigateBack();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.bg {
+  width: 750rpx;
+}
+.hand {
+  width: 154rpx;
+  top: 1325rpx;
+  left: 525rpx;
+  position: absolute;
+}
+.leftback {
+  top: 20rpx;
+  position: absolute;
+  color: #fff;
+}
+</style>

src/otherPages/teacherVideo/index.vue

@@ -3,7 +3,7 @@
     <view class="road">
       <view class="nav"
         ><view class="left">科目三真实考场</view
-        ><view class="right" @click="goPath('/otherPages/')">
+        ><view class="right" @click="goPath('/otherPages/examRoadVideo/index')">
           查找我的考场<van-icon color="#498EF5" name="arrow"
         /></view>
       </view>
@@ -20,17 +20,18 @@
         <view class="right">
           <view>熟记考场</view>
           <view>考试不用慌</view>
-          <view class="look">去看考场</view>
+          <navigator url=""></navigator>
+          <view  @click="goPath('/otherPages/examRoadVideo/index')" class="look">去看考场</view>
         </view>
       </view>
     </view>
     <view class="subject">
       <view v-for="(item, index) in kemu" :key="index" class="list">
-        <navigator url="/otherPages/videoSubjectList/index">
+        <navigator :url="'/otherPages/videoSubjectList/index?subject='+(index+1)">
           <image
             mode="widthFix"
             class="subject-bg"
-            src="https://ct.zzxcx.net/ctjk/mp-wx/teacherVideo/kemubg1.png"
+            :src="'https://ct.zzxcx.net/ctjk/mp-wx/teacherVideo/kemubg'+(index+1)+'.png'"
           ></image>
 
           <view class="text1"> 科目{{ item }} </view>
@@ -59,9 +60,9 @@ export default {
     };
   },
   methods: {
-    goPath() {
+    goPath(url) {
       uni.navigateTo({
-        url: "/otherPages/examRoadVideo/index",
+        url,
       });
     },
     onLoad(query) {

src/otherPages/threeExam/index.vue

@@ -318,6 +318,7 @@
             @click="
               () => {
                 resultExamVisible = true;
+                submitExamVisible = false;
               }
             "
             class="right"
@@ -365,7 +366,11 @@
             >
             <view class="tip2-bottom">
               <!-- <view class="tip2-bottom-1">试试答题技巧，提分更快</view> -->
-              <view @click="goPath" class="tip2-bottom-2">现在交卷</view>
+              <view
+                @click="goPath('/otherPages/threeExamScore/index')"
+                class="tip2-bottom-2"
+                >现在交卷</view
+              >
               <view
                 @click="
                   () => {
@@ -386,14 +391,12 @@
 
 <script>
 import api from "@/api";
-import utils from '@/utils'
+import utils from "@/utils";
 import countDown from "@/components/countDown/index";
 export default {
   data() {
     return {
-      query:{
-
-      },
+      query: {},
       anLength: 7,
       problemList: [
         {
@@ -478,7 +481,7 @@ export default {
     };
   },
   onLoad(query) {
-    this.query = query
+    this.query = query;
     api.exam.studentThreeForceSelectTestQuestionInfoList().then((res) => {
       if (Array.isArray(res.rows) && res.rows.length > 0) {
         res.rows.forEach((element) => {
@@ -490,10 +493,11 @@ export default {
     });
   },
   methods: {
-    goPath(url){
-      uni.navigateTo({
-        url:url+'?'+utils.mapToUrlQuery(this.query)
-      })
+    goPath(url) {
+      console.log(url)
+    uni.navigateTo({
+      url
+    })
     },
     getThreeExamTime(a, b) {
       this.restTime = a;
@@ -506,7 +510,7 @@ export default {
         success(res) {
           if (res.confirm) {
             uni.navigateTo({
-              url: "",
+              url: "/otherPages/threeExamScore/index",
             });
           }
         },

src/otherPages/threeExamScore/index.vue

@@ -0,0 +1,112 @@
+<template>
+  <view>
+    <m-nav-bar fixed title="本次考试成绩"></m-nav-bar>
+    <view class="top">
+      <view class="score">
+        <view class="circle">
+          <canvas
+            id="circle1"
+            class="circle-canvas"
+            canvas-id="circle1"
+            width="340"
+            height="300"
+            type="2d"
+          ></canvas>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      query: {
+        score: 90,
+      },
+    };
+  },
+  onLoad(query) {
+    // this.query = query
+  },
+  onReady() {
+    let that = this;
+    const query = wx.createSelectorQuery();
+
+    query
+      .select("#circle1")
+      .fields({ node: true, size: true })
+      .exec((res) => {
+        console.log(res);
+        const canvas = res[0].node;
+        const ctx = canvas.getContext("2d");
+        const dpr = wx.getSystemInfoSync().pixelRatio;
+        canvas.width = res[0].width * dpr;
+        canvas.height = res[0].height * dpr;
+        ctx.scale(dpr, dpr);
+        that.drawHalfCircleAndScore(ctx);
+        // ctx.fillRect(0, 0, 100, 100);
+      });
+  },
+  methods: {
+    /**
+     * @function 绘制半圆和分数
+     * @param ctx {WechatMiniprogram.CanvasContext}
+     */
+    drawHalfCircleAndScore(ctx) {
+      let x1 = 85;
+      let y1 = 125;
+      let r1 = 70;
+      // ctx.moveTo(x1, y1);
+      // ctx.lineCap = "round";
+      // ctx.lineWidth = 20;
+      // ctx.strokeStyle = '#d8d8d8'
+      //  ctx.beginPath();
+      // ctx.arc(x1, y1, r1, 0, Math.PI, true);
+      // ctx.stroke();
+      // ctx.draw()
+
+
+      ctx.moveTo(x1, y1);
+      var arcColor = ctx.createLinearGradient(15, 125, 155, 125);
+      arcColor.addColorStop(0, "#FF6D4E");
+      arcColor.addColorStop(1, "#FE3B2B");
+      ctx.strokeStyle = arcColor;
+      ctx.lineCap = "round";
+      ctx.lineWidth = 20;
+      ctx.beginPath();
+      ctx.arc(x1, y1, r1, Math.PI/2, 0, true);
+      ctx.stroke();
+      ctx.draw()
+
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.top {
+  width: 750rpx;
+  height: 726rpx;
+  background-image: url("https://ct.zzxcx.net/ctjk/mp-wx/threeExamScore/topBg.png");
+  background-size: 100%;
+  padding: 0 30rpx;
+  overflow-x: hidden;
+  .score {
+    background: #fff;
+    width: 100%;
+    height: 472rpx;
+    margin-top: 150rpx;
+
+    border-radius: 20rpx 20rpx 20rpx 20rpx;
+    .circle {
+      .circle-canvas {
+        width: 340rpx;
+        height: 300rpx;
+        margin: 0 auto;
+      }
+    }
+  }
+}
+</style>

src/pages.json

@@ -215,6 +215,12 @@
           "path": "videoSubjectList/index",
           "style": {}
         },
+        {
+          "path": "careGzh/index",
+          "style": {
+            "navigationBarTitleText": "关注公众号"
+          }
+        },
         {
           "path": "marked/index",
           "style": {}
@@ -254,6 +260,14 @@
             "navigationStyle": "default"
           }
         },
+        {
+          "path":"threeExamScore/index",
+          "style": {
+            "navigationBarTitleText": "三力测试结果",
+            "navigationStyle": "default"
+          }
+
+        },
         {
           "path": "courseCatalog/index",
           "styles": {
@@ -510,6 +524,10 @@
         "name": "分类练习",
         "query": "liceCar=1&liceTruck=&liceBus=&liceMoto=&name=&gs=xc&cert=C1/C2/C3&vehicle=轿车&subject=1&title=精选考题&sort=3"
       },
+      {
+        "path": "otherPages/threeExamScore/index",
+        "name": "三力测试结果页"
+      },
       {
         "path": "otherPages/beforeThreeExam/index",
         "name": "三力测试引导页"

src/pages/extraWeb/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <div>
-    <web-view :src="query.src"></web-view>
-  </div>
+  <view>
+    <web-view  :src="query.src"></web-view>
+  </view>
 </template>
 
 <script>
@@ -31,4 +31,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.fixed{
+  position: fixed;
+  top: 0;
+
+}
+.w600{
+  width: 300px !important;
+
+}
 </style>

src/pages/user/index.vue

@@ -40,6 +40,14 @@
           url="/otherPages/beforeThreeExam/index"
         >
         </van-cell>
+        <van-cell
+          title-class="uni-app-fontsize-paragraph"
+          title="关注公众号"
+          is-link
+          center
+          url="/otherPages/careGzh/index"
+        >
+        </van-cell>
 
         <!-- <van-cell title="我要提现" value="" is-link center @click="goCashOut">
         </van-cell> -->
@@ -198,7 +206,7 @@ import unLoginHead from "@/assets/img/unLoginHead.png";
 export default {
   computed: {
     unLoginHead() {
-      return unLoginHead;
+      return "https://mmbiz.qpic.cn/sz_mmbiz_jpg/U1q0AYGzob5AbSPdqDs1tbOATPL8gJfbiaaJbCf0a7ibzBAyca1eoDvFgzGQc6GeuG1icBiaqevcFW1k5no8accn0A/640?wx_fmt=jpeg";
     },
     expireTime() {
       return this.$store.state.user.userInfo.expireTime &&