|
使用前需要引入全局样式，可以上网查一下下载引入 具体布局如下 
1，做前需要先写一下json文件，根据json文件来布局和实现功能
json内容如下：
{
"code":200,
"data":[
[
{"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}
],
[
{"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}
],
[
{"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}
],
[
{"state":0,"isgood":false}, {"state":0,"isgood":false},
{"state":3,"isgood":false}, {"state":0,"isgood":false},
{"state":0,"isgood":true}, {"state":0,"isgood":true},
{"state":0,"isgood":true}, {"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":0,"isgood":false},
{"state":0,"isgood":true}, {"state":0,"isgood":true},
{"state":0,"isgood":true}, {"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":0,"isgood":false},
{"state":0,"isgood":true}, {"state":0,"isgood":true},
{"state":0,"isgood":true}, {"state":0,"isgood":true},
{"state":0,"isgood":false}, {"state":0,"isgood":false}
],
[
{"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":0,"isgood":false},
{"state":2,"isgood":false}, {"state":0,"isgood":true},
{"state":0,"isgood":true}, {"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":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":0,"isgood":false},
{"state":3,"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}
]
]
}
可以根据自己的需求来添加或修改json文件
json说明//0代表可以选座，1代表自己已选，2代表已被别人买走，3代表空白过道
2，实现主体
新华国际影城大钟寺店
千与千寻 退出登录
今天06-25 23:25~01:30(日语2D)
 可选
 已售
 最佳观影区
1
2
3
4
5
6
7
8
9
10
11
12
{{item.x}}排{{item.y}}座
推荐作为
1人
2人
3人
4人
{{sum}}请先选座
export default {
name: 'HelloWorld',
data () {
return {
isdas:true,//判断按钮是否锁定
ticket:[]//json数据
}
},
computed:{
sum(){
return this.selected.length*40;//计算总价
},
selected(){//获取座位的位置
var arr=[]//定义一个空数组，用来渲染你选的那一行那一列的座位
for(let i=0;i{
if(res.data.code==1){//请求成功
console.log(res.data.data)
this.ticket=res.data.data
}else{
console.log("请求的数据不见了，去看一下你的json文件")
}
})
},
methods: {
tui(){//点击跳转退出界面
this.$router.push("tui")
},
goto(){//登陆页面
if(sessionStorage.getItem("islog")=="true"){//根据islog的值true或false判断是否登陆
let v=this.sum//价格
this.$router.push({//跳转支付页面，传递一个总的价格的参数
path:"/zf",
query:{user:v}
})
}else{//没有登陆跳转登陆页面
this.$router.push("log")
}
},
conman(num){//推荐人数
this.isdas=false//sum是conman里传递的数
let n=0;//一个临时变量
for(let i=0;i=num){//n用来限制for循环的如果n大于或者等于num则证明已经选中了你选的个数，这个时候跳出循环
return;
}
}
}
}
//如果n还是小于num。说明推荐观影区票不够，
if(n |