使用vue实现网上电影票购票选座
2020-12-02 本文已影响0人
小李不小
使用前需要引入全局样式，可以上网查一下下载引入
具体布局如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<style>
</style>
<body>
<div id="vue_det">
<div class="">
<ul class="flex" v-for="(item,index) in ticket" ><!--渲染每一个座位-->
<li class=""
:class="seletClass(v)"
v-for="(v,i) in item"
@click="chose(v)"
>
<span v-if='v.state==3'>过道</span>
<span v-else>{{v.state}}</span>
</li>
</ul>
<button class="xz" @click="goto" :disabled="isdas">购买按钮</button>
</div>
</div>
</div>
<script type="text/javascript">
<!--json说明//0代表可以选座，1代表自己已选，2代表已被别人买走，3代表过道-->
var vm = new Vue({
el: '#vue_det',
data: {
isdas:true,//判断按钮是否锁定
ticket:[ //布局数据
[
{"state":2,"isgood":false}, {"state":0,"isgood":false},
{"state":3,"isgood":false}, {"state":0,"isgood":false},
{"state":0,"isgood":true}, {"state":2,"isgood":false},
{"state":2,"isgood":false}, {"state":0,"isgood":true},
{"state":0,"isgood":false}, {"state":0,"isgood":false}
],
[
{"state":0,"isgood":false}, {"state":0,"isgood":false},
{"state":3,"isgood":false}, {"state":2,"isgood":false},
{"state":0,"isgood":false}, {"state":0,"isgood":false},
{"state":0,"isgood":false}, {"state":0,"isgood":false},
{"state":0,"isgood":false}, {"state":0,"isgood":false}
],
[
{"state":0,"isgood":false}, {"state":0,"isgood":false},
{"state":3,"isgood":false}, {"state":0,"isgood":false},
{"state":0,"isgood":false}, {"state":0,"isgood":false},
{"state":0,"isgood":false}, {"state":0,"isgood":false},
{"state":0,"isgood":false}, {"state":0,"isgood":false}
],
],
},
methods: {
goto(){ //点击购买，拿到所有的数据，重新循环一次，拿到选中等于1的状态数据
console.log('购买按钮')
console.log(this.ticket)
let list=this.ticket;
let arrlist=[]
list.forEach((item,index)=>{
item.forEach((itamtwo,idnex)=>{
if(itamtwo.state==1){
console.log('等于1的选中的位置',itamtwo)
arrlist.push(itamtwo)
}
})
})
console.log('最终选座的座位',arrlist)
},
details: function() {
return this.site + " - 学的不仅是技术，更是梦想！";
},
//点击单独选座
chose(v){
console.log(v)
//v.state是判断json文件的state
if(v.state==0){
this.isdas=false
v.state=1;
//判断是否选票，没有选锁定button，不能点击
}else if(v.state==1) {
//v.state为1证明还有座位
v.state=0//当你选了之后让他变成0
}else if(v.state==2){//等于2证明已经卖出，不能选择
alert("座位已经被购买")
}else if(v.state==3){//等于3证明已经卖出，不能选择
alert("我是过道")
}
},
seletClass(v) {//样式
if(v.state==2){//判断json文件的state返回的数配对不同的class或id样式实现点击座位的变化样式
return "red"
}else if(v.state==1){
return "blue"
}else if(v.state==3){
return "hidden"
}
}
}
})
</script>
<style type="text/css">
.flex{display:flex;}
ul li{width:10%;height:20px;list-style:none;border:1px solid #eee;margin:10px}
</style>
<body>
自己写的，随便样式丑了点，但是已经完成了基本多选座功能，比较简单，适合入门来看和扩展。
毕竟网上实现这个功能代码写的比较多，让人一看感觉要放弃的感觉，我就来写一个简单的。
image.png
