.net MVC +EF+VUE做回合制游戏（二）

<form id="vue" action="/ltgdGame.Web/Main/Index" method="post">
<input id="back" type="submit" value="返回" />
<div id="VIT">
<div class="booklist">当前耐力:{{talent.VIT}}</div>
<div class="booklist" v-for="(level,index) in levels" >
<input type="checkbox" class="bookcheckbox" v-bind:id="'VIT'+level.id" name="VIT" v-bind:value="level.name+'-'+booknums[index].num1" />
<label v-bind:for="'VIT'+level.id" v-bind:style="{color:level.color}">{{level.name}}耐力之书&nbsp;数量:<input style="width:7%;" v-model="booknums[index].num1" type="number" min="" step="">&nbsp;价格:{{level.cost*booknums[index].num1}}&nbsp;+{{level.add*booknums[index].num1}}耐力</label>
</div>
</div>
<div id="money">金币：{{role.GoldCoin}}</div>
<div id="STR">
<div class="booklist">当前力量:{{talent.STR}}</div>
<div class="booklist" v-for="(level,index) in levels">
<input type="checkbox" class="bookcheckbox" v-bind:id="'STR'+level.id" name="STR" v-bind:value="level.name+'-'+booknums[index].num2" />
<label v-bind:for="'STR'+level.id" v-bind:style="{color:level.color}">{{level.name}}力量之书&nbsp;数量:<input style="width:7%;" v-model="booknums[index].num2" type="number" min="" step="">&nbsp;价格:{{level.cost*booknums[index].num2}}&nbsp;+{{level.add*booknums[index].num2}}力量</label>
</div>
</div>
<div id="imgatr"></div>
<div id="LUK">
<div class="booklist">当前幸运:{{talent.LUK}}</div>
<div class="booklist" v-for="(level,index) in levels">
<input type="checkbox" class="bookcheckbox" v-bind:id="'LUK'+level.id" name="LUK" v-bind:value="level.name+'-'+booknums[index].num3" />
<label v-bind:for="'LUK'+level.id" v-bind:style="{color:level.color}">{{level.name}}幸运之书&nbsp;数量:<input style="width:5%;" v-model="booknums[index].num3" type="number" min="" step="">&nbsp;价格:{{level.cost*booknums[index].num3}}&nbsp;+{{level.add*booknums[index].num3}}幸运</label>
</div>
</div>
<div id="WIS">
<div class="booklist">当前魔力:{{talent.WIS}}</div>
<div class="booklist" v-for="(level,index) in levels">
<input type="checkbox" class="bookcheckbox" v-bind:id="'WIS'+level.id" name="WIS" v-bind:value="level.name+'-'+booknums[index].num4" />
<label v-bind:for="'WIS'+level.id" v-bind:style="{color:level.color}">{{level.name}}魔力之书&nbsp;数量:<input style="width:7%;" v-model="booknums[index].num4" type="number" min="" step="">&nbsp;价格:{{level.cost*booknums[index].num4}}&nbsp;+{{level.add*booknums[index].num4}}魔力</label>
</div>
</div>
<div id="confirm" v-on:click="buy">确认购买</div>
<div id="DEX">
<div class="booklist">当前敏捷:{{talent.DEX}}</div>
<div class="booklist" v-for="(level,index) in levels">
<input type="checkbox" class="bookcheckbox" v-bind:id="'DEX'+level.id" name="DEX" v-bind:value="level.name+'-'+booknums[index].num5" />
<label v-bind:for="'DEX'+level.id" v-bind:style="{color:level.color}">{{level.name}}敏捷之书&nbsp;数量:<input style="width:7%;" v-model="booknums[index].num5" type="number" min="" step="">&nbsp;价格:{{level.cost*booknums[index].num5}}&nbsp;+{{level.add*booknums[index].num5}}敏捷</label>
</div>
</div>
<input type="text" name="roleId" v-bind:value="role.RoleId" v-show="false" />
<input type="text" name="talentId" v-bind:value="talent.TalentValueId" v-show="false" />
<input type="text" name="roleName" v-bind:value="role.RoleName" v-show="false" /> <div id="cancel" v-if="tip" v-on:click="cancel"> </div>
<div id="tip" v-if="tip">
<div id="tiptext">{{tiptext}}</div>
<div id="tipbtn" v-on:click="cancel">{{tipbtn}}</div>
</div>
</form>

var vue =new Vue({
el: '#vue',
data: {
role: @Html.Raw(Json.Encode(ViewBag.Role)),
talent: @Html.Raw(Json.Encode(ViewBag.Talent)),
levels: [
{
id:,
name:'普通',
color:'black',
cost: ,
add:,
},
{
id:,
name: '优良',
color:'green',
cost: ,
add: ,
},
{
id:,
name: '精良',
color:'blue',
cost: ,
add: ,
},
{
id:,
name: '史诗',
color:'purple',
cost: ,
add: ,
},
{
id:,
name: '传说',
color:'orange',
cost: ,
add: ,
},
],
booknums: [
{
num1: ,
num2: ,
num3: ,
num4: ,
num5: ,
},
{
num1: ,
num2: ,
num3: ,
num4: ,
num5: ,
}, {
num1: ,
num2: ,
num3: ,
num4: ,
num5: ,
}, {
num1: ,
num2: ,
num3: ,
num4: ,
num5: ,
}, {
num1: ,
num2: ,
num3: ,
num4: ,
num5: ,
},
],
tiptext: '提示',
tipbtn: '关闭',
tip: false,
},
methods: {
buy: function () {
let _self = this;
$.ajax({
url: "/ltgdGame.Web/Talent/BuyTalent",
type: "POST",
dataType: 'json',
data: $("#vue").serialize() ,//这里直接把表单序列化模拟submit提交
success: function (data) {
if (data.result == "true")
{
_self.tip = true;
_self.tiptext = '购买成功';
_self.role.GoldCoin = data.GoldCoin;
if (typeof (data.VIT) != "undefined")
_self.talent.VIT = data.VIT;
if (typeof (data.STR) != "undefined")
_self.talent.STR = data.STR;
if (typeof (data.WIS) != "undefined")
_self.talent.WIS = data.WIS;
if (typeof (data.DEX) != "undefined")
_self.talent.DEX = data.DEX;
if (typeof (data.LUK) != "undefined")
_self.talent.LUK = data.LUK;
resetChart();
}
else if(data.result=="false")
{
_self.tip = true;
_self.tiptext = '金币不足';
}
else
{
_self.tip = true;
_self.tiptext = '请选择购买';
}
}
})
},
cancel: function () {
this.tip = false;
},
}
}) mychart = echarts.init(document.getElementById('imgatr'));
var option = {
title: { },
tooltip: {},
radar: {
// shape: 'circle',
name: {
textStyle: {
color: '#fff',
backgroundColor: '#999',
borderRadius: ,
padding: [, ],
fontSize:
}
},
splitArea: {
areaStyle: {
color:['white'],
}
},
indicator: [
{ name: '体力VIT', max: },
{ name: '力量STR', max: },
{ name: '魔力WIS', max: },
{ name: '敏捷DEX', max: },
{ name: '幸运LUK', max: }, ]
},
series: [{
name: '属性',
type: 'radar',
// areaStyle: {normal: {}},
data: [
{
value: [vue.talent.VIT, vue.talent.STR, vue.talent.WIS, vue.talent.DEX, vue.talent.LUK],
name: '属性值'
}, ]
}]
}
mychart.setOption(option);
function resetChart() {
mychart.setOption({
series: [{
data: [{
value: [vue.talent.VIT, vue.talent.STR, vue.talent.WIS, vue.talent.DEX, vue.talent.LUK],
name: '属性值'
},]
}]
})
}