iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 28
2
自我挑戰組

【I Love Vue】 30天愛上 Vue系列 第 28

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

  • 分享至 

  • xImage
  •  

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


結算畫面

先來看看昨天完成的測試畫面:
https://ithelp.ithome.com.tw/upload/images/20201012/20115941VGlOPyrXwm.jpg

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

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

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

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

  1. 修改 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來記錄是否已經完成測驗。

  1. test.vuemounted 設定預設值:
mounted: function () {
    
    this.times = store.state.gameTimes;
    if(this.times > 0 ){
      this.isover = false;
    }
    else{
      this.isover = true;
    }
  },
  1. test.vue中設定變數:
data: function () {
    return {
      times: 0,
      isover: false,
    };
  },

到這邊完成之後,當受測人員完成測驗之後,可以按下 結算 進入結算畫面

  1. 在設計結算畫面之前我們先到router.js 新增我們的路由
{
        path : '/settlement',
        component : settlement
      },
  1. 剛剛用到的全域變數加入到vuex.jsstatus裡面:
history:[],
point:2000,

設定初始分數point 2000分,及一個用來記錄所有操作的陣列history

  1. 開始來設計結算畫面 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 設定資料

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


結語

setting.vue部分 的 姓名 及 年齡 的事件應該改用 @change
這邊我當時寫錯沒有發現,可以到git上面看看我有做那些修改。

到這篇就差不多完結了,下一篇會稍微Demo一下成品以及有哪些可以修改的部分

git : https://github.com/kyminjob72/iowa_gambling_task/tree/version05


上一篇
【I Love Vue 】 Day 27 愛荷華博弈任務(八) - 測驗畫面2
下一篇
【I Love Vue 】 Day 29 愛荷華博弈任務(十) - Demo
系列文
【I Love Vue】 30天愛上 Vue30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言