开发评分页面

pages/reading/index.js

@@ -292,17 +292,18 @@ Page({
       }
     }
     const result = res.result;
-    const integrity = result.integrity; //完成度
-    const tone = result.tone; // 语调声调
-    const accuracy = result.overall; // 准确度 发音分
-    const fluency = result.fluency.overall; //流利度
-    let myOverall = integrity * 0.3 + accuracy * 0.5 + fluency * 0.1 + tone * 0.1;
+    const integrity = Math.floor(result.integrity); //完成度
+    const tone = Math.floor(result.tone); // 语调声调
+    const accuracy = Math.floor(result.overall); // 准确度 发音分
+    const fluency = Math.floor(result.fluency.overall); //流利度
+    let myOverall = Math.floor(integrity * 0.3 + accuracy * 0.5 + fluency * 0.1 + tone * 0.1);
     let detail = JSON.stringify({
       integrity,
       tone,
       accuracy,
       fluency,
-      myOverall
+      myOverall,
+      title: this.data.videoInfo.userRead.title
     })
     wx.redirectTo({
       url: `/pages/score/index?detail=${detail}`,

pages/score/index.js

@@ -1,4 +1,9 @@
-// pages/score/index.js
+import {
+  createStoreBindings
+} from 'mobx-miniprogram-bindings'
+import {
+  store
+} from '~/store/index'
 Page({
 
   /**
@@ -12,7 +17,18 @@ Page({
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
+    this.storeBindings = createStoreBindings(this, {
+      store,
+      fields: {
+        userInfo: 'userInfo'
+      },
+    })
+    this.storeBindings.updateStoreBindings()
     let score = JSON.parse(options.detail)
+    wx.setNavigationBarTitle({
+      title: score.title
+    })
+    console.log(score);
     this.setData({
       score
     })

pages/score/index.json

@@ -1,3 +1,4 @@
 {
-  "usingComponents": {}
+  "usingComponents": {},
+  "navigationBarTitleText": "测评报告"
 }

pages/score/index.less

@@ -0,0 +1,160 @@
+.container {
+  background-color: #50AE75;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+
+  .scoreBox {
+    width: 610rpx;
+    margin: 80rpx auto 0rpx;
+
+    .lightBox {
+      position: relative;
+      height: 180rpx;
+
+      .light {
+        position: absolute;
+        width: 360rpx;
+        height: 180rpx;
+        left: 0px;
+        right: 0px;
+        margin: auto;
+      }
+
+      .stars {
+        position: absolute;
+        width: 62rpx;
+        height: 62rpx;
+      }
+
+      .stars-1 {
+        top: 64rpx;
+        left: 132rpx;
+      }
+
+      .stars-2 {
+        top: 25rpx;
+        left: 198rpx;
+      }
+
+      .stars-3 {
+        top: 6rpx;
+        left: 276rpx;
+      }
+
+      .stars-4 {
+        top: 25rpx;
+        right: 198rpx;
+      }
+
+      .stars-5 {
+        top: 62rpx;
+        right: 132rpx;
+      }
+    }
+
+    .score {
+      position: relative;
+      width: 100%;
+      box-sizing: border-box;
+      padding: 70rpx 40rpx 32rpx;
+      border-radius: 18rpx;
+      background-color: white;
+      box-shadow: rgba(255, 255, 255, 0.15) 0px 6px 12px -2px, rgba(255, 255, 255, 0.1) 0px 3px 7px -3px;
+
+      .avatarBox {
+        position: absolute;
+        top: -72rpx;
+        left: 0px;
+        right: 0px;
+        margin: 0 auto;
+        width: 100rpx;
+        height: 100rpx;
+        padding: 16rpx;
+        border-radius: 50%;
+        background-color: white;
+        font-size: 0px;
+
+        .avatar {
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+        }
+      }
+
+      .nickName {
+        font-size: 36rpx;
+        text-align: center;
+      }
+
+      .totalScore {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 26rpx;
+        font-size: 42rpx;
+
+        .num {
+          color: #58C5FF;
+          font-size: 42rpx;
+        }
+      }
+
+      .progressBox {
+        margin-top: 50rpx;
+
+        .row {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 42rpx;
+
+          .name {
+            font-size: 32rpx;
+            width: 96rpx;
+          }
+
+          .progress {
+            width: 306rpx;
+            border-radius: 20rpx;
+            overflow: hidden;
+          }
+
+          .scoreInfo {
+            font-size: 27rpx;
+            color: #666666;
+          }
+        }
+      }
+    }
+  }
+
+  .footer {
+    width: 610rpx;
+    padding: 50rpx 35rpx;
+    box-sizing: border-box;
+    margin: 40rpx auto;
+    background-color: white;
+    border-radius: 18rpx;
+    box-shadow: rgba(50, 50, 93, 0.15) 0px 6px 12px -2px, rgba(0, 0, 0, 0.1) 0px 3px 7px -3px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .btn {
+      padding: 16rpx 0rpx;
+      text-align: center;
+      border-radius: 50rpx;
+      width: 220rpx;
+      font-size: 30rpx;
+      color: white;
+      background-color: #66C5FF;
+      box-shadow: 0 6px 14px 0 rgba(50, 197, 255, 0.65);
+    }
+
+    .btn2 {
+      background-color: #F84041;
+      box-shadow: 0 6rpx 14rpx 0 rgba(251, 79, 80, 0.76);
+    }
+  }
+}

pages/score/index.wxml

@@ -1,2 +1,61 @@
-<!--pages/score/index.wxml-->
-<text>pages/score/index.wxml</text>
+<view class="container">
+  <view class="scoreBox">
+    <!-- 星星区域 -->
+    <view class="lightBox">
+      <image src="/static/{{score.myOverall>=10?'stars-1.png':'stars-2.png'}}" class="stars stars-1" mode="" />
+      <image src="/static/{{score.myOverall>=30?'stars-1.png':'stars-2.png'}}" class="stars stars-2" mode="" />
+      <image src="/static/{{score.myOverall>=50?'stars-1.png':'stars-2.png'}}" class="stars stars-3" mode="" />
+      <image src="/static/{{score.myOverall>=70?'stars-1.png':'stars-2.png'}}" class="stars stars-4" mode="" />
+      <image src="/static/{{score.myOverall>=90?'stars-1.png':'stars-2.png'}}" class="stars stars-5" mode="" />
+      <image src="/static/light.png" class="light" mode="" />
+    </view>
+    <!-- 主体得分区域 -->
+    <view class="score">
+      <view class="avatarBox">
+        <image src="{{userInfo.avatar}}" class="avatar" mode="" />
+      </view>
+      <view class="nickName">
+        {{userInfo.nickName||userInfo.eid}}
+      </view>
+      <view class="totalScore">
+        <text>综合得分：</text>
+        <text class="num">{{score.myOverall}}</text>
+      </view>
+      <view class="progressBox">
+        <view class="row">
+          <view class="name">完整度</view>
+          <progress class="progress" percent='{{score.integrity}}' stroke-width="18" activeColor="#70D9FF" />
+          <view class="scoreInfo">
+            {{score.integrity}}/100
+          </view>
+        </view>
+        <view class="row">
+          <view class="name">正确率</view>
+          <progress class="progress" percent='{{score.accuracy}}' stroke-width="18" activeColor="#918EFD" />
+          <view class="scoreInfo">
+            {{score.accuracy}}/100
+          </view>
+        </view>
+        <view class="row">
+          <view class="name">流利度</view>
+          <progress class="progress" percent='{{score.fluency}}' stroke-width="18" activeColor="#FE9500" />
+          <view class="scoreInfo">
+            {{score.fluency}}/100
+          </view>
+        </view>
+        <view class="row">
+          <view class="name">语调</view>
+          <progress class="progress" percent='{{score.tone}}' stroke-width="18" activeColor="#9BE74B " />
+          <view class="scoreInfo">
+            {{score.tone}}/100
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+  <!-- 底部 -->
+  <view class="footer">
+    <view class="btn">试听</view>
+    <view class="btn btn2">上传作品</view>
+  </view>
+</view>

pages/score/index.wxss

@@ -1 +1,137 @@
-/* pages/score/index.wxss */
+.container {
+  background-color: #50AE75;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+.container .scoreBox {
+  width: 610rpx;
+  margin: 80rpx auto 0rpx;
+}
+.container .scoreBox .lightBox {
+  position: relative;
+  height: 180rpx;
+}
+.container .scoreBox .lightBox .light {
+  position: absolute;
+  width: 360rpx;
+  height: 180rpx;
+  left: 0px;
+  right: 0px;
+  margin: auto;
+}
+.container .scoreBox .lightBox .stars {
+  position: absolute;
+  width: 62rpx;
+  height: 62rpx;
+}
+.container .scoreBox .lightBox .stars-1 {
+  top: 64rpx;
+  left: 132rpx;
+}
+.container .scoreBox .lightBox .stars-2 {
+  top: 25rpx;
+  left: 198rpx;
+}
+.container .scoreBox .lightBox .stars-3 {
+  top: 6rpx;
+  left: 276rpx;
+}
+.container .scoreBox .lightBox .stars-4 {
+  top: 25rpx;
+  right: 198rpx;
+}
+.container .scoreBox .lightBox .stars-5 {
+  top: 62rpx;
+  right: 132rpx;
+}
+.container .scoreBox .score {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 70rpx 40rpx 32rpx;
+  border-radius: 18rpx;
+  background-color: white;
+  box-shadow: rgba(255, 255, 255, 0.15) 0px 6px 12px -2px, rgba(255, 255, 255, 0.1) 0px 3px 7px -3px;
+}
+.container .scoreBox .score .avatarBox {
+  position: absolute;
+  top: -72rpx;
+  left: 0px;
+  right: 0px;
+  margin: 0 auto;
+  width: 100rpx;
+  height: 100rpx;
+  padding: 16rpx;
+  border-radius: 50%;
+  background-color: white;
+  font-size: 0px;
+}
+.container .scoreBox .score .avatarBox .avatar {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+.container .scoreBox .score .nickName {
+  font-size: 36rpx;
+  text-align: center;
+}
+.container .scoreBox .score .totalScore {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 26rpx;
+  font-size: 42rpx;
+}
+.container .scoreBox .score .totalScore .num {
+  color: #58C5FF;
+  font-size: 42rpx;
+}
+.container .scoreBox .score .progressBox {
+  margin-top: 50rpx;
+}
+.container .scoreBox .score .progressBox .row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 42rpx;
+}
+.container .scoreBox .score .progressBox .row .name {
+  font-size: 32rpx;
+  width: 96rpx;
+}
+.container .scoreBox .score .progressBox .row .progress {
+  width: 306rpx;
+  border-radius: 20rpx;
+  overflow: hidden;
+}
+.container .scoreBox .score .progressBox .row .scoreInfo {
+  font-size: 27rpx;
+  color: #666666;
+}
+.container .footer {
+  width: 610rpx;
+  padding: 50rpx 35rpx;
+  box-sizing: border-box;
+  margin: 40rpx auto;
+  background-color: white;
+  border-radius: 18rpx;
+  box-shadow: rgba(50, 50, 93, 0.15) 0px 6px 12px -2px, rgba(0, 0, 0, 0.1) 0px 3px 7px -3px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.container .footer .btn {
+  padding: 16rpx 0rpx;
+  text-align: center;
+  border-radius: 50rpx;
+  width: 220rpx;
+  font-size: 30rpx;
+  color: white;
+  background-color: #66C5FF;
+  box-shadow: 0 6px 14px 0 rgba(50, 197, 255, 0.65);
+}
+.container .footer .btn2 {
+  background-color: #F84041;
+  box-shadow: 0 6rpx 14rpx 0 rgba(251, 79, 80, 0.76);
+}

project.private.config.json

@@ -26,7 +26,7 @@
         {
           "name": "",
           "pathName": "pages/score/index",
-          "query": "detail={\"integrity\":12,\"tone\":50,\"accuracy\":8,\"fluency\":0,\"myOverall\":12.6}",
+          "query": "detail={\"integrity\":12,\"tone\":50,\"accuracy\":8,\"fluency\":0,\"myOverall\":12,\"title\":\"秋天\"}",
           "launchMode": "default",
           "scene": null
         }