仿猫眼电影购票页面

柠檬精不吃柠檬

已于 2024-10-15 17:21:50 修改

阅读量1.3k

点赞数 32

文章标签：前端 javascript jquery

于 2024-05-25 22:34:28 首次发布

本文链接：https://blog.csdn.net/m0_74937643/article/details/139204078

版权

实现效果

首先是最上面流程线的布局，用到了bootstrap，使用前先引入bootstrap

<!-- 流程线 -->
<div class="container" id="app">
	<div class="order-progress-bar">
		<div class="step first done">
			<span class="step-num">1</span>
			<div class="bar"></div>
			<span class="step-text">选择影片场次</span>
		</div>
		<div class="step done">
			<span class="step-num">2</span>
			<div class="bar"></div>
			<span class="step-text">选择座位</span>
		</div>
		<div class="step">
			<span class="step-num">3</span>
			<div class="bar"></div>
			<span class="step-text">14分钟内付款</span>
		</div>
		<div class="step last">
			<span class="step-num">4</span>
			<div class="bar"></div>
			<span class="step-text">影院取票观影</span>
		</div>
/div>

然后是座位选择示例的排布，座位图标是设置了不同的座位状态背景，共四个状态，本篇文章中的座位表未用到情侣座位

首先是最左侧的行号，可以根据自己的需要增加或是删除"span"标签就可以改变总行数

<!-- 行号 -->
<div class="row-id-container">
	<span class="row-id">1</span>
	<span class="row-id">2</span>
	<span class="row-id">3</span>
	<span class="row-id">4</span>
	<span class="row-id">5</span>
	<span class="row-id">6</span>
	<span class="row-id">7</span>
	<span class="row-id">8</span>
	<span class="row-id">9</span>
	<span class="row-id">10</span>
	<span class="row-id">11</span>
	<span class="row-id">12</span>
</div>

然后是中间的座位，这里通过给每个座位设置不同自定义data属性，同样座位的地方也是贴的背景，不同状态的座位对应不同的背景，这块儿通过增删类来实现变化，下面以第一排为例

".seat":代表座位
".sold":代表座位已出售，在座位表中为红色
".empty":代表该地方无座位，在座位表中无背景
".selected":代表已选中座位，在座位表中为绿色
"selectable":代表该座位可选，在座位表中为白色
"data-column":代表列
"data-row"：对应行
"data-st='E'":表示该座位为空，与类".empty"搭配使用
"data-st='LK'":表示该座位已出售，与类".sold"搭配使用

<div class="seats-wrapper">
	<div class="row">
		<span class="seat selectable" data-column="14" data-row="1"></span>
		<!-- 表示最左边的座位已选中 -->
		<span class="seat selected" data-column="13" data-row="1"></span>
		<!-- 表示从左向右数，倒数第三个座位为空 -->
		<span class="seat empty" data-column="" data-row="1" data-st="E"></span>
		<span class="seat selectable" data-column="11" data-row="1"></span>
		<span class="seat selectable" data-column="10" data-row="1"></span>
		<span class="seat selectable" data-column="9" data-row="1"></span>
		<span class="seat selectable" data-column="8" data-row="1"></span>
		<span class="seat selectable" data-column="7" data-row="1"></span>
		<span class="seat selectable" data-column="6" data-row="1"></span>
		<span class="seat selectable" data-column="5" data-row="1"></span>
		<span class="seat selectable" data-column="4" data-row="1"></span>
		<span class="seat selectable" data-column="3" data-row="1"></span>
		<span class="seat selectable" data-column="2" data-row="1"></span>
		<!-- 表示座位表最右边一个位置已出售 -->
		<span class="seat sold" data-column="1" data-row="1" data-st="LK"></span>
	</div>
</div>

座位表的排布可根据需要自行布局

接下来是右侧影片详情，会显示用户信息和选座信息

<div class="side">
			<div class="movie-info clearfix">
				<div class="poster">
					<img src="../images/now-1.jpg">
				</div>
				<div class="content">
					<p class="name text-ellipsis">末路狂花钱</p>
					<div class="info-item">
						<span>类型 :</span>
						<span class="value">喜剧</span>
					</div>
					<div class="info-item">
						<span>时长 :</span>
						<span class="value">106分钟</span>
					</div>
				</div>
			</div>

			<div class="show-info">
				<div class="info-item">
					<span>影院 :</span>
					<span class="value text-ellipsis">影城</span>
				</div>
				<div class="info-item">
					<span>影厅 :</span>
					<span class="value text-ellipsis">影厅</span>
				</div>
				<div class="info-item">
					<span>版本 :</span>
					<span class="value text-ellipsis">国语2D</span>
				</div>
				<div class="info-item">
					<span>场次 :</span>
					<span class="value text-ellipsis screen">今天 5月24 18:05</span>
				</div>
				<div class="info-item">
					<span>票价 :</span>
					<span class="value text-ellipsis">￥47/张</span>

				</div>
			</div>
			<!-- 电影票信息 -->
			<div class="ticket-info">
				<!-- 未选座时显示的div -->
				<div class="no-ticket">
					<p class="buy-limit">座位：一次最多选6个座位,三张以上享九折优惠！</p>
					<p class="no-selected">请<span>点击左侧</span>座位图选择座位</p>
				</div>
				<!-- 选座后显示的div -->
				<div class="has-ticket" style="display:none">
					<span class="text">座位：</span>
					<!-- 右侧显示已选座位 -->
					<div class="ticket-container" data-limit="5"></div>
				</div>
				<!-- 电影票总价 -->
				<div class="total-price">
					<span>总价 :</span>
					<span class="price">0</span>
					<span class="discount">0</span>
				</div>

			</div>
			<!-- 订票人信息 -->
			<div class="confirm-order">
				<div class="cellphone">
					<span>手机号 :</span>
					<span class="phone-num">152****1506</span>
				</div>
				<div class="confirm-btn disable" data-act="confirm-click">确认选座</div>

			</div>
		</div>

未选座时效果——————————选座后效果————————————

接下来是JS部分

首先是当用户点击已选中的座位时，该座位状态由选中变为可选，这部分主要是通过jquery的toggleClass添加或删除类来实现

// 当座位处于选中状态时
	if ($(this).hasClass("selected")) {
        // 通过toggleClass添加或删除类
	    $(this).toggleClass("selected");
		$(this).toggleClass("selectable");
					
	}

如果座位被选中，则在右侧显示座位标签

// 在右侧座位出添加座位标签，展示座位序号
	var $span_tag = $("<span></span>");
// 给座位标签添加类ticket
	$span_tag.addClass("ticket");
// 为座位标签增添属性和属性值，用于查找（通过data查找数据）座位并显示座位序号
	$span_tag.attr("data-row", $(this).attr('data-row'));
	$span_tag.attr("data-column", $(this).attr('data-column'));
    $span_tag.attr("data-index", $(this).attr('data-row') + "-" + $(this).attr('data-column'));
// 标签呈现的样式
	$span_tag.html($(this).attr('data-row') + '排' + $(this).attr('data-column') + '座');
// 在右侧插入座位标签
    $(".ticket-container").append($span_tag);

当座位被取消时，右侧座位标签被删除

// 获取所有类ticket，该部分是右侧已选座位标签
	var tickets = document.querySelectorAll(".ticket");
// 通过查询属性'data-row'和'data-column'来确认选中的位置序号
	var selectd = $(this).attr('data-row') + "-" + $(this).attr('data-column');
// 当座位属性'data-index'处于选中状态时，清除右侧座位标签
	for (var i = 0; i < tickets.length; i++) {
		if (tickets[i].getAttribute('data-index') == selectd) {
				document.querySelector(".ticket-container").removeChild(tickets[i]);
				break;
			}
		}

如果用户点击了为空或是已出售的座位，则点击无效

// 若座位已售或该位置无座，用户点击无效
if ($(this).attr('data-st') == 'E' || $(this).attr('data-st') == 'LK') {
	return;
}

同样，用户可以通过删除右侧座位标签来取消选座，当用户点击座位标签时，该类为".ticket".的标签span会被删除，同时将座位回复为可选状态

// 给座位标签添加类ticket
	$span_tag.addClass("ticket").click(function() {
/ 获取座位标签的data-index属性
	if($(".ticket").length<4){
		$(".discount").css("display","none");
	}
	var ticketIndex = $(this).attr('data-index');
	var seat = $('.seats-wrapper span[data-row="' + $(this).attr('data-row') +'"][data-column="' + $(this).attr('data-column') + '"]');
	if (seat.hasClass("selected")) {
		eat.toggleClass("selected").toggleClass("selectable"); // 更新座位状态为可选
		$(this).remove(); // 删除侧边栏中的座位标签
		priceTotal(); // 重新计算价格
		seatDisplay(); // 更新座位显示状态
		}
});

电影票的总价，使用单价*类为".ticket".的标签span的长度，长度代表电影票张数，用户每次点击左侧座位表或是右侧座位标签则调用相应函数，我在这加了个折扣，表示当电影票>=3时，会打九折，不需要的可以直接删除

function priceTotal() {
	//计算总价
	if($(".ticket").length>=3){
		total_discount = Math.ceil($(".ticket").length * pricePerTicked*0.9);
		total_bill =$(".ticket").length * pricePerTicked;
		$('.discount').css({"display":"block","margin-left":"100px","margin-top":"-25px"});
		$('.price').html(total_discount);
		$('.discount').html("(￥"+total_bill+")");
	}else{
		total_bill =$(".ticket").length * pricePerTicked;
		$('.price').html(total_bill);
	}
	
}

最后就是右侧座位那块的标签显示，根据座位状态来更改"display",具体表示哪一个标签可以看看右侧影片详情的布局，一看就懂！

function seatDisplay() {
	if ($(".ticket").length > 0) {
		$('.confirm-btn').removeClass('disable');
		$('.no-ticket').css("display", "none");
		$('.has-ticket').css("display", "block");
	} else {
		$('.confirm-btn').addClass('disable');
		$('.no-ticket').css("display", "block");
		$('.has-ticket').css("display", "none");
	}
}

JS完整代码，JQuery用的是1.11.3，只要大于1.9应该都没问题,要是有错误的地方，欢迎批评指正，另外还有其他的办法，那个不是用JQuery写的，可以去主页翻一下，有需要源码的可以私信或者评论，免费分享

$(function() {

	$(".location").hover(function() {
		$(".hid").show();
	}, function() {
		$(".hid").hide();
	});
	$(".loging").hover(function() {

		$(".hid1").show();
	}, function() {
		$(".hid1").hide();
	});
	$(".seats-wrapper span").bind("click", function() {
		// 若座位已售或该位置无座，用户点击无效
		if ($(this).attr('data-st') == 'E' || $(this).attr('data-st') == 'LK') {
			return;
		} else {
			// 当座位处于选中状态时
			if ($(this).hasClass("selected")) {
				if($(".ticket").length<4){
					$(".discount").css("display","none");
				}
				// 通过toggleClass添加或删除类
				$(this).toggleClass("selected");
				$(this).toggleClass("selectable");
				// 获取所有类ticket，该部分是右侧已选座位标签
				var tickets = document.querySelectorAll(".ticket");
				// console.log(tickets);
				// 通过查询属性'data-row'和'data-column'来确认选中的位置序号
				var selectd = $(this).attr('data-row') + "-" + $(this).attr('data-column');
				// 当座位属性'data-index'处于选中状态时，清除右侧座位标签
				for (var i = 0; i < tickets.length; i++) {
					if (tickets[i].getAttribute('data-index') == selectd) {
						document.querySelector(".ticket-container").removeChild(tickets[i]);
						// console.log(tickets[i]);
						break;
					}
				}
				// 计算总价
				priceTotal();
				// 当座位处于可选状态时
			} else if ($(this).hasClass("selectable")) {
				// 当用户选座超过六张弹出提示
				if ($(".ticket").length > 6) {
					alert('一次最多买6张');
					return;
				}
				$(this).toggleClass("selectable");
				$(this).toggleClass("selected");
				// 在右侧座位出添加座位标签，展示座位序号
				var $span_tag = $("<span></span>");
				// 给座位标签添加类ticket
				$span_tag.addClass("ticket").click(function() {
					// 获取座位标签的data-index属性
					if($(".ticket").length<4){
						$(".discount").css("display","none");
					}
					var ticketIndex = $(this).attr('data-index');
					var seat = $('.seats-wrapper span[data-row="' + $(this).attr('data-row') +
						'"][data-column="' + $(this).attr('data-column') + '"]');
					if (seat.hasClass("selected")) {
						seat.toggleClass("selected").toggleClass("selectable"); // 更新座位状态为可选
						$(this).remove(); // 删除侧边栏中的座位标签
						priceTotal(); // 重新计算价格
						seatDisplay(); // 更新座位显示状态
					}
				});


				// 为座位标签增添属性和属性值，用于查找（通过data查找数据）座位并显示座位序号
				$span_tag.attr("data-row", $(this).attr('data-row'));
				$span_tag.attr("data-column", $(this).attr('data-column'));
				$span_tag.attr("data-index", $(this).attr('data-row') + "-" + $(this).attr(
					'data-column'));
				// 标签呈现的样式
				$span_tag.html($(this).attr('data-row') + '排' + $(this).attr('data-column') + '座');
				// 在右侧插入座位标签
				$(".ticket-container").append($span_tag);

				priceTotal();
			}
		}
		seatDisplay();

	});


	var total_bill = 0; //总价
	var pricePerTicked = 47; //单价

	function seatDisplay() {
		if ($(".ticket").length > 0) {
			$('.confirm-btn').removeClass('disable');
			$('.no-ticket').css("display", "none");
			$('.has-ticket').css("display", "block");
		} else {
			$('.confirm-btn').addClass('disable');
			$('.no-ticket').css("display", "block");
			$('.has-ticket').css("display", "none");
		}
	}

	function priceTotal() {
		//计算总价
		if ($(".ticket").length >= 3) {
			total_discount = Math.ceil($(".ticket").length * pricePerTicked * 0.9);
			total_bill = $(".ticket").length * pricePerTicked;
			$('.discount').css({
				"display": "block",
				"margin-left": "100px",
				"margin-top": "-25px"
			});
			$('.price').html(total_discount);
			$('.discount').html("(￥" + total_bill + ")");
		} else {
			total_bill = $(".ticket").length * pricePerTicked;
			$('.price').html(total_bill);
		}

	}
})

源码下载仿猫眼电影购票网站全静态页面