feat

answer/src/router/index.js

@@ -27,6 +27,16 @@ const routes = [
     name: 'index',
     component: () => import('@/views/index.vue')
   },
+  {
+    path: '/score',
+    name: 'score',
+    component: () => import('@/views/score.vue')
+  },
+  {
+    path: '/rank',
+    name: 'rank',
+    component: () => import('@/views/rank.vue')
+  },
   // error
   {
     path: '*',

answer/src/views/contest.vue

@@ -142,6 +142,9 @@ export default {
         }
       }).then(r => {
         this.submitState = 2
+        // this.results = r.object
+        localStorage.setItem('score', paperScore)
+        localStorage.setItem('result', r.object)
         clearInterval(this.timer)
       }).catch(e => {
         clearInterval(this.timer)

answer/src/views/info.vue

@@ -202,7 +202,6 @@ export default {
         other,
         school
       } = this.form
-      console.log(this.form)
       this.formItemShow = this.formItemList.map(item => !this.form[item])
       if (!actualName || !birthday || !area || !grade || !school || !sex) {
         return

answer/src/views/rank.vue

@@ -0,0 +1,193 @@
+<template>
+<div>
+    <img :src="bg" class="bg" alt="">
+    <div class="nav-List">
+        <div :class="page===item&&'active'" v-for="item in 3" :key="item" @click="page=item">{{['','个人','区','学校'][item]}}排名</div>
+    </div>
+    <div class="content">
+        <div class="rank-list">
+            <div class="rank-item" v-for="(item, index) in rankList" :key="'rank'+index">
+                <img :src="img(index+1)" alt="" class="num-top" v-if="index<3">
+                <div v-else class="num">{{index+1}}</div>
+                <img :src="item.avatar" alt="" class="avatar" v-if="page===1">
+                <img class="page-icon-2" :src="page2" v-else-if="page===2">
+                <img class="page-icon-3" :src="page3" v-else>
+                <div class="main-text">
+                    <div class="name">{{item.nickname||item.areaName||item.schoolName}}</div>
+                    <div class="school-name" v-if="page===1">{{item.schoolName}}</div>
+                </div>
+                <div class="score">{{(item.score||item.avgScore||0).toFixed(1)}}分</div>
+            </div>
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      page: 1,
+      bg: require('../../public/img/rank/bg.png'),
+      page2: require('../../public/img/rank/page-2.png'),
+      page3: require('../../public/img/rank/page-3.png'),
+      rankList: []
+    }
+  },
+  computed: {
+    img () {
+      return index => require('../../public/img/rank/top-' + index + '.png')
+    }
+  },
+  created () {
+    this.getLeaderBoard()
+  },
+  methods: {
+    getLeaderBoard () {
+      this.$api.post('/mCompetition/getLeaderBoard', {
+        reqdata: {
+          type: this.page
+        }
+      }).then(r => {
+        this.rankList = r.list
+      })
+    }
+  },
+  watch: {
+    page () {
+      this.getLeaderBoard()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bg {
+    margin: 0;
+    padding: 0;
+    float: left;
+    position: absolute;
+    z-index: 0;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.content {
+    position: absolute;
+    z-index: 9;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 306px;
+    width: 905px;
+    min-height: 634px;
+    background: #FFFFFF;
+    box-shadow: 0px 2px 15px 0px rgba(228, 231, 246, 0.5);
+    border-radius: 38px;
+    padding-bottom: 27px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    margin-bottom: 30px;
+
+    .rank-list {
+        margin-top: 25px;
+
+        .rank-item {
+            display: flex;
+            align-items: center;
+            height: 80px;
+            width: 553px;
+            border-bottom: 1px solid #D8D8D8;
+
+            .num-top {
+                width: 43px;
+                height: 53px;
+                padding: 0 18px 0 3px;
+            }
+
+            .num {
+                width: 60px;
+                text-align: center;
+                padding-right: 6px;
+                font-size: 16px;
+                font-weight: 600;
+                color: #161616;
+            }
+
+            .avatar {
+                width: 47px;
+                height: 47px;
+                border-radius: 30px;
+                margin-right: 23px;
+                border: none;
+                background-color: #F4B622;
+            }
+
+            .page-icon-2 {
+                width: 13px;
+                height: 27px;
+                padding: 0 11px 0 20px;
+            }
+
+            .page-icon-3 {
+                width: 28px;
+                height: 28px;
+                padding: 0 9px 0 7px;
+            }
+
+            .main-text {
+                display: flex;
+                width: 380px;
+                font-size: 16px;
+                font-weight: 600;
+                color: #161616;
+
+                .school-name {
+                    background: #4283F3;
+                    border-radius: 12px;
+                    padding: 4px 12px;
+                    font-size: 12px;
+                    font-weight: 400;
+                    color: #FFFFFF;
+                    margin-left: 18px;
+                }
+            }
+
+            .score {
+                width: 69px;
+                font-size: 16px;
+                font-weight: 800;
+                color: #F4B622;
+                text-align: center;
+            }
+        }
+    }
+}
+
+.nav-List {
+    position: absolute;
+    z-index: 9;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 262px;
+    display: flex;
+
+    >div {
+        text-align: center;
+        width: 120px;
+        height: 35px;
+        line-height: 35px;
+        font-size: 18px;
+        font-weight: 600;
+        color: #FFFFFF;
+        border: 1px solid #FFFFFF;
+        border-radius: 20px;
+        margin: 0 5px;
+    }
+
+    .active {
+        border-color: #FA7D01;
+        background: #FA7D01;
+    }
+}
+</style>

answer/src/views/score.vue

@@ -0,0 +1,213 @@
+<template>
+<div>
+    <img :src="bg" class="bg" alt="">
+    <div class="content">
+        <template v-if="isScore!==1">
+            <div class="title">恭喜您完成答题！</div>
+            <div class="detail">
+                您的得分是： <span :style="font">{{score}}</span>分
+            </div>
+            <div class="text">排名</div>
+            <div class="ranking" :style="backgroundDiv">{{result.rank}}</div>
+            <div class="to-list">
+                <div class="rank" @click="$router.push({name:'rank'})">
+                    <img :src="iconRank" style="width:22px;height:23px;padding-left:20px" alt="">
+                    <div class="list-text">排行榜</div>
+                    <div class="arrow"></div>
+                </div>
+
+                <div @click="isScore=1" v-if="isScore!==2">
+                    <img :src="iconStars" style="width:22px;height:20px;padding-left:20px" alt="">
+                    <div class="list-text">去评分</div>
+                    <div class="arrow"></div>
+                </div>
+
+                <div>
+                    <img :src="iconShare" style="width:17px;height:17px;padding-left:23px" alt="">
+                    <div class="list-text" style="padding-left:23px">分享</div>
+                    <div class="arrow"></div>
+                </div>
+            </div>
+        </template>
+        <template v-else>
+            <div class="stars">
+                <img :src="(starsNum>=item)?active:stars" alt="" v-for="item in 5" :key="item" @click="starsNum=item">
+            </div>
+
+            <div class="message">您对此次竞赛答题还满意吗？</div>
+
+            <div class="confim-button" @click="submit">提交</div>
+        </template>
+    </div>
+</div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      isScore: 0,
+      starsNum: 5,
+      bg: require('../../public/img/score/bg.png'),
+      font: {
+        fontSize: '36px',
+        fontWeight: 500,
+        color: '#FFBD92'
+      },
+      iconStars: require('../../public/img/score/icon-stars.png'),
+      iconRank: require('../../public/img/score/icon-rank.png'),
+      iconShare: require('../../public/img/score/icon-share.png'),
+      backgroundDiv: {
+        backgroundImage: 'url(' + require('../../public/img/score/main-icon.png') + ')'
+      },
+      stars: require('../../public/img/score/stars.png'),
+      active: require('../../public/img/score/stars-active.png'),
+      score: localStorage.getItem('score'),
+      result: JSON.parse(localStorage.getItem('result')) || {}
+    }
+  },
+  methods: {
+    submit () {
+      this.$api.post('/mCompetition/submitReviews', {
+        reqdata: {
+          assessScore: this.starsNum * 2,
+          userAnswerId: this.result.id
+        }
+      }).then(r => {
+        this.$message({
+          message: '评论成功',
+          type: 'success'
+        })
+        this.isScore = 2
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bg {
+    // width: 100%;
+    margin: 0;
+    padding: 0;
+    float: left;
+    position: absolute;
+    z-index: 0;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.content {
+    position: absolute;
+    z-index: 9;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 306px;
+    width: 905px;
+    min-height: 579px;
+    background: #FFFFFF;
+    box-shadow: 0px 2px 15px 0px rgba(228, 231, 246, 0.5);
+    border-radius: 38px;
+    padding-bottom: 27px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    margin-bottom: 30px;
+
+    .title {
+        font-size: 24px;
+        font-weight: 500;
+        color: #161616;
+        padding-top: 34px;
+    }
+
+    .detail {
+        margin-top: 30px;
+        width: 420px;
+        height: 100px;
+        border-radius: 10px;
+        background-image: linear-gradient(to right, #3585FF, #5B53EF);
+        box-shadow: 0px 12px 20px 0px rgba(29, 75, 146, .3);
+        text-align: center;
+        font-size: 18px;
+        font-weight: 500;
+        color: #FFFFFF;
+        line-height: 100px;
+    }
+
+    .text {
+        font-size: 16px;
+        font-weight: 400;
+        color: #59598D;
+        margin-top: 18px;
+    }
+
+    .ranking {
+        margin-top: 9px;
+        width: 50px;
+        height: 50px;
+        font-size: 26px;
+        font-weight: 500;
+        color: #FFFFFF;
+        line-height: 43px;
+        background: no-repeat center top;
+        background-size: contain;
+        text-align: center;
+    }
+
+    .to-list {
+        >div {
+            display: flex;
+            width: 412px;
+            align-items: center;
+            border-bottom: 1px solid #EAEFF2;
+            padding: 20px 0;
+        }
+
+        .list-text {
+            font-size: 16px;
+            font-weight: 400;
+            color: #000000;
+            width: 300px;
+            padding: 0 20px;
+        }
+
+        .arrow {
+            width: 10px;
+            height: 10px;
+            border-right: 2px solid #9BA4A6;
+            border-top: 2px solid #9BA4A6;
+            transform: rotate(45deg);
+        }
+    }
+
+    .stars {
+        padding-top: 128px;
+
+        >img {
+            margin: 0 11px;
+        }
+    }
+
+    .message {
+        margin-top: 30px;
+        font-size: 24px;
+        font-weight: 400;
+        color: #333333;
+    }
+
+    .confim-button {
+        margin-top: 40px;
+        width: 270px;
+        height: 60px;
+        border-radius: 30px;
+        background-image: linear-gradient(to right, #57A8EF, #6247FF);
+        box-shadow: 0px 2px 14px 0px #A799F6;
+        font-size: 18px;
+        font-weight: 600;
+        color: #FFFFFF;
+        text-align: center;
+        line-height: 60px;
+    }
+}
+</style>