使用vue实现网上电影票购票选座

使用前需要引入全局样式，可以上网查一下下载引入
具体布局如下

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，实现主体<template><div class="hello"><!--这个里面是布局--><div class="header"><!--头部布局--><div class="header_left"><p><img src="../assets/t1.jpg"></p></div><div class="header_mo"><p>新华国际影城大钟寺店</p></div><div class="header_right"><p><img src="../assets/t2.jpg"></p></div></div><div class="section"><div class="sec_to"><div class="ri_to"><p class="text_bl">千与千寻</p><span class="tui" @click="tui">退出登录</span><p class="text_hu">今天06-25 23:25~01:30(日语2D)</p></div><div class="ri_bu"><ul><!--座位解释布局--><li><img src="../assets/q1.jpg"> 可选</li><li><img src="../assets/hq.jpg"> 已售</li><li><img src="../assets/q2.jpg"> 最佳观影区</li></ul></div></div><!--这个里面是布局--><div class="sec_bu"><div class="sec_le"><ul><!--这个是左侧边无功能--><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li></ul></div><div class="sec_ri"><div class="ss_t"><img src="../assets/pm.jpg"></div><div class="ss_b"><ul class="a" v-for="(item,index) in ticket" ><!--渲染每一个座位--><li @click="chose(v)" class="b" :class="seletClass(v)" v-for="(v,i) in item" ></li></ul></div><div class="good"></div></div></div><div class="add" v-if="selected.length>0"><ul><!--你选择的排数--><li v-for="(item,index) in selected" >{{item.x}}排{{item.y}}座</li></ul></div></div><div class="footer"><div class="footer_top"><div class="tj"><p>推荐作为</p></div><div class="sectii"><!--多选区--><ul class="" ><li @click="conman(1)" class="tuijian"> 1人</li><!--点击传递一个数--><li @click="conman(2)" class="tuijian"> 2人</li><li @click="conman(3)" class="tuijian"> 3人</li><li @click="conman(4)" class="tuijian"> 4人</li></ul></div></div><div class="footer_mo"><!--购买按钮--><button class="xz" @click="goto" :disabled="isdas" :id="isdas==true?'lss':'cla'">{{sum}}请先选座</button></div><div class="footer_bu"><img src="../assets/bu.jpg"></div></div></div><!--json说明//0代表可以选座，1代表自己已选，2代表已被别人买走，3代表过道--></template><script>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<this.ticket.length;i++){//遍历你请求到的json这里是排数for (let j = 0; j < this.ticket[i].length; j++) {//这里是列数if(this.ticket[i][j].state==1){//判断是否等于1，表名座位已经被你选择了var tem={x:i+1,y:j+1}//找到你选座的第几排第几列arr.push(tem)//放入空数组中console.log(arr)}}}if(arr.length==0){//判断一下数组中有没有内容你是否选票this.isdas=true//让你的按钮锁定}return arr}},created(){this.axios.get("../../static/new.json").then(res=>{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<this.ticket.length;i++){//遍历行for (let j = 0; j < this.ticket[i].length; j++) {//遍历列if(this.ticket[i][j].isgood==true&&this.ticket[i][j].state==0){//判断你json数据的isgood等于true并且state等于0座位可以选择this.ticket[i][j].state=1;//当满足时代表这个座位是你选中的，让他变成已选n++;//每选中让state变成选中一个让n加一console.log(n,num)if(n>=num){//n用来限制for循环的如果n大于或者等于num则证明已经选中了你选的个数，这个时候跳出循环return;}}}}//如果n还是小于num。说明推荐观影区票不够，if(n<num){for(let i=0;i<this.ticket.length;i++){//遍历每一行for (let j = 0; j < this.ticket[i].length; j++) {//遍历每一列if(this.ticket[i][j].state==0){//判断座位是否为可选this.ticket[i][j].state=1;//可选则选中座位n++;console.log(n)if(n>=num){return;}}}}}},chose(v){//单独点击选座if(v.state==0){//v.state是判断json文件的statethis.isdas=false//判断是否选票，没有选锁定button，不能点击v.state=1}else if(v.state==1) {//v.state为1证明还有座位v.state=0//当你选了之后让他变成0}else if(v.state==3){//等于3证明已经卖出，不能选择alert("座位bu可以选")}else{}},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>

---------------------------------------------------------这时候你发现功能已经基本完成

由于还有涉及二级路径，登陆界面和购票界面请自行模拟

使用vue实现网上电影票购票选座相关推荐

java基于Springboot+vue的影城电影院购票选座系统 elementui 前后端分离
本论文主要论述了如何使用JAVA语言开发一个影城管理系统 ,本系统将严格按照软件开发流程进行各个阶段的工作,采用B/S架构,面向对象编程思想进行项目开发.在引言中,作者将论述影城管理系统的当前背景以及 ...
java电影票选座_Android自定义view实现电影票在线选座功能
先看看电影票在线选座功能实现的效果图: 界面比较粗糙,主要看原理. 这个界面主要包括以下几部分 1.座位 2.左边的排数 3.左上方的缩略图 4.缩略图中的红色区域 5.手指移动时跟随移动 6.两个手 ...
python毕业设计作品基于django框架电影院购票选座系统毕设成品（7）中期检查报告
整个项目包含了:开题报告 + 开题报告PPT + 任务书 + 中期报告 + 论文模板 + 答辩PPT等 + 项目源码主要安介绍了系统在开发过程中所应用到的一些关键的技术主要python技术介绍:框 ...
分享：前端页面样式收集电影购票选座
电影购票选座.智能选座.可放大缩小. https://ext.dcloud.net.cn/plugin?id=1156
python毕业设计作品基于django框架电影院购票选座系统毕设成品（8）毕业设计论文模板
整个项目包含了:开题报告 + 开题报告PPT + 任务书 + 中期报告 + 论文模板 + 答辩PPT等 + 项目源码主要安介绍了系统在开发过程中所应用到的一些关键的技术主要python技术介绍:框 ...
python毕业设计作品基于django框架电影院购票选座系统毕设成品（4）开题报告
整个项目包含了:开题报告 + 开题报告PPT + 任务书 + 中期报告 + 论文模板 + 答辩PPT等 + 项目源码主要安介绍了系统在开发过程中所应用到的一些关键的技术主要python技术介绍:框 ...
python毕业设计作品基于django框架电影院购票选座系统毕设成品（6）开题答辩PPT
整个项目包含了:开题报告 + 开题报告PPT + 任务书 + 中期报告 + 论文模板 + 答辩PPT等 + 项目源码主要安介绍了系统在开发过程中所应用到的一些关键的技术主要python技术介绍:框 ...
andriod 打造炫酷的电影票在线选座控件，1比1还原淘宝电影在线选座功能
本篇文章已经授权微信公共账号 guolin_blog(郭霖)独家发布不知道大家有没有跟我一样的感觉,看了那么多的介绍自定义控件原理.事件分发机制的书籍,文章,教程,依然还是不能随心所欲的自定义控件. ...
Vue 实现移动端在线选座功能（支持miniMap，支持缩放）
Vue 实现在线选座功能(支持miniMap,支持缩放) 前言一.功能介绍二.选座页面效果三.实现原理布局设计方面交互实现方面四.在线例子总结前言前段时间写了一个在线选座功能,现在分 ...

使用vue实现网上电影票购票选座

使用vue实现网上电影票购票选座相关推荐

最新文章

热门文章