【I Love Vue 】 Day 28 爱荷华博弈任务(九) - 结算画面

离完成就只差最後一个结算画面了...
咱们废话不多说，直接继续开发下去。

结算画面

先来看看昨天完成的测试画面:

这边有两种设计方式进入到结算的画面:

当游戏到达执行次数，直接进入结算画面
当达到执行次数上限，按下结算後进入结算画面

我们选择第二个方式进行设计。
所以在这部分我们要完成的是，当达到上限时点击结算跳到结算画面。
并在结算画面上显示测验的讯息。

先来设计让画面可以跳转到结算画面

修改 test.vue :
template:

<template>
  <userInfo></userInfo>
  <div id="starting-game">
    <table>
      <thead>
        <tr>
          <th colspan="4">剩下游戏次数:{{ times }}</th>
        </tr>
        <tr>
          <th colspan="4">目前积分:{{ getPoint() }}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <card :id="1" @getcard="increase"></card>
          </td>
          <td>
            <card :id="2" @getcard="increase"></card>
          </td>
          <td>
            <card :id="3" @getcard="increase"></card>
          </td>
          <td>
            <card :id="4" @getcard="increase"></card>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div>
    <table id="op_table" cellpadding="10" border="1">
      <thead>
        <tr>
          <th>
            <router-link to="/">回首页</router-link>
          </th>
          <th>
            <div v-show="isover">
              <router-link to="/settlement">结算</router-link>
            </div>
          </th>
        </tr>
      </thead>
    </table>
  </div>
</template>

在画面上新增一个栏位，用来让受测者知道剩余次数还剩多少
2. 接下来修改 test.vue 里面的 increase():

increase(card) {
      if (this.times > 0) {
        store.state.point = store.state.point + card.dividend;
        store.state.gameTimes--;
        this.times = store.state.gameTimes;
        var historyData = {
          point : this.getPoint(),
          id : card.id,
          dividend : card.dividend
        };
        store.state.history[store.state.history.length] = historyData
        if (this.times == 0) {
          this.isover = true;
        }
      } else {
        alert('已完成测验，请点击 "结算" 观看结果');
      }
    },

我们把受测的历史资料记录到history里面，
并且用isover来记录是否已经完成测验。

在 test.vue 的 mounted 设定预设值:

mounted: function () {
    
    this.times = store.state.gameTimes;
    if(this.times > 0 ){
      this.isover = false;
    }
    else{
      this.isover = true;
    }
  },

test.vue中设定变数:

data: function () {
    return {
      times: 0,
      isover: false,
    };
  },

到这边完成之後，当受测人员完成测验之後，可以按下结算进入结算画面

在设计结算画面之前我们先到router.js 新增我们的路由

{
        path : '/settlement',
        component : settlement
      },

刚刚用到的全域变数加入到vuex.js的status里面:

history:[],
point:2000,

设定初始分数point 2000分，及一个用来记录所有操作的阵列history

开始来设计结算画面 settlement.vue:
template:

<template>
<div>
<table>
    <tbody>
        <tr>
            <th>
                姓名:
            </th>
            <td>
                {{name}}
            </td>
        </tr>
        <tr>
            <th>
                年纪:
            </th>
            <td>
                {{age}}
            </td>
        </tr>
        <tr>
            <th>
                性别:
            </th>
            <td>
                {{sex}}
            </td>
        </tr>
    </tbody>
</table>
</div>
<div>
    <table cellpadding="10px" border="1px">
        <thead>
            <th>编号</th>
            <th>牌组</th>
            <th>积分</th>
            <th>总分</th>
        </thead>
        <tbody>
            <tr v-for="(item, index) in history" :key="index" >
                <td>{{index+1}}</td>
                <td>第{{item.id}}副牌</td>
                <td>{{item.dividend}}</td>
                <td>{{item.point}}</td>
            </tr>
        </tbody>
    </table>

</div>

</template>

在上面显示基本讯息，再用v-for把我们都操作纪录都显示在table上。

script:

<script>
import store from "../vuex"; // 引用 store
export default {
  name: "settlement",
  store:store,
  components: {
  },
  data:function(){
      return{
          name: "",
          sex:"",
          age:0,
          history:[],
      }
  },
  mounted:function(){
      this.name = store.state.userInfo.name
      this.sex = store.state.userInfo.sex
      this.age = store.state.userInfo.age
      this.history = store.state.history
  }
};
</script>

在 mounted 设定资料

到这边我们就大功告成拉。