【I Love Vue 】 Day 28 愛荷華博弈任務(九) - 結算畫面

12th鐵人賽

kyminjob

2020-10-12 18:00:58

900 瀏覽

離完成就只差最後一個結算畫面了...
咱們廢話不多說，直接繼續開發下去。

結算畫面

先來看看昨天完成的測試畫面:

這邊有兩種設計方式進入到結算的畫面:

當遊戲到達執行次數，直接進入結算畫面
當達到執行次數上限，按下結算後進入結算畫面

我們選擇第二個方式進行設計。
所以在這部分我們要完成的是，當達到上限時點擊結算跳到結算畫面。
並在結算畫面上顯示測驗的訊息。

先來設計讓畫面可以跳轉到結算畫面

修改 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 設定資料

到這邊我們就大功告成拉。