離完成就只差最後一個結算畫面了...
咱們廢話不多說,直接繼續開發下去。
先來看看昨天完成的測試畫面:
這邊有兩種設計方式進入到結算的畫面:
我們選擇第二個方式進行設計。
所以在這部分我們要完成的是,當達到上限時點擊結算跳到結算畫面。
並在結算畫面上顯示測驗的訊息。
先來設計讓畫面可以跳轉到結算畫面
test.vue
:<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>
<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