微信小程序电影院订票系统的选座页面代码怎么设计

选座页面的设计需要考虑以下几个方面：

1. 座位图的展示：选择座位需要展示电影院的座位图，可以通过一个矩阵来表示座位的排列，每个座位用一个按钮或图片来表示，已选座位和不可选座位需要有不同的颜色或标识。

2. 座位的选择：用户需要能够点击座位进行选择，选择后需要有明显的标识，同时需要限制用户选择已经被选或不可选的座位。

3. 座位的价格：每个座位的价格可能不同，需要在座位图上标识出来，用户选择座位后需要显示该座位的价格和总价。

4. 确认订单：用户选择完座位后需要确认订单，包括选择的座位、电影、场次、价格等信息，用户需要确认订单后才能进行支付。

以下是一个简单的选座页面的代码设计：

HTML代码：

<div class="seat-map">
  <div class="screen">屏幕</div>
  <div class="seat-container">
    <div class="row">
      <div class="seat unavailable"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat unavailable"></div>
    </div>
    <div class="row">
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
    </div>
    <div class="row">
      <div class="seat unavailable"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat unavailable"></div>
    </div>
    <div class="row">
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
      <div class="seat"></div>
    </div>
  </div>
  <div class="seat-legend">
    <div class="seat unavailable"></div>
    <span>已选座位</span>
    <div class="seat"></div>
    <span>可选座位</span>
    <div class="seat selected"></div>
    <span>已选座位</span>
  </div>
</div>
<div class="order-summary">
  <div class="movie-info">
    <div class="movie-title">电影名称</div>
    <div class="movie-time">场次时间</div>
  </div>
  <div class="seat-info">
    <div class="selected-seats">已选座位：<span></span></div>
    <div class="total-price">总价：<span></span>元</div>
  </div>
  <button class="confirm-order">确认订单</button>
</div>

CSS代码：

.seat-map {
  margin: 20px;
  text-align: center;
}

.screen {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.seat-container {
  display: inline-block;
  text-align: left;
}

.row {
  margin-bottom: 10px;
}

.seat {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 5px;
  background-color: #ddd;
  cursor: pointer;
}

.seat.unavailable {
  background-color: #aaa;
  cursor: not-allowed;
}

.seat.selected {
  background-color: #f00;
}

.seat-legend {
  margin-top: 10px;
}

.order-summary {
  margin: 20px;
  text-align: center;
}

.movie-info {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.selected-seats {
  margin-bottom: 10px;
}

.total-price {
  margin-bottom: 10px;
}

.confirm-order {
  padding: 10px;
  border-radius: 5px;
  background-color: #f00;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

JavaScript代码：

// 获取座位容器和已选座位信息
const seatContainer = document.querySelector('.seat-container');
const selectedSeats = document.querySelector('.selected-seats span');
const totalPrice = document.querySelector('.total-price span');

// 定义座位价格
const seatPrice = 10;

// 定义已选座位数组
let selectedSeatArr = [];

// 点击座位事件
seatContainer.addEventListener('click', e => {
  const seat = e.target.closest('.seat');
  if (seat && !seat.classList.contains('unavailable')) {
    seat.classList.toggle('selected');
    updateSelectedSeats();
  }
});

// 更新已选座位和总价
function updateSelectedSeats() {
  selectedSeatArr = [];
  const selectedSeatsArr = document.querySelectorAll('.seat.selected');
  selectedSeatsArr.forEach(seat => {
    selectedSeatArr.push(seat.getAttribute('data-seat'));
  });
  selectedSeats.textContent = selectedSeatArr.join(', ');
  totalPrice.textContent = selectedSeatArr.length * seatPrice;
}

// 确认订单事件
const confirmOrderBtn = document.querySelector('.confirm-order');
confirmOrderBtn.addEventListener('click', () => {
  if (selectedSeatArr.length > 0) {
    // TODO: 提交订单
  } else {
    alert('请选择座位');
  }
});

以上代码实现了一个简单的选座页面，包括座位图的展示、座位的选择、座位价格的标识、已选座位和总价的更新以及确认订单事件的处理。开发者可以根据实际需求进行修改和扩展。