UniApp实现酒店预订与客房管理的实现技巧

<template><view class="container"><view class="header">酒店预订</view><view class="content"><!-- 酒店列表 --><view class="hotel-list"><view class="hotel" v-for="(hotel, index) in hotelList" :key="index"><text>{{ hotel.name }}</text><text>{{ hotel.price }}元/晚</text></view></view><!-- 客房列表 --><view class="room-list"><view class="room" v-for="(room, index) in roomList" :key="index"><text>{{ room.name }}</text><text>{{ room.price }}元/晚</text></view></view></view><view class="footer"><button class="submit-button">确定预订</button>    </view></view></template><style>.container {  display: flex;  flex-direction: column;}.header {  background-color: #333;  color: #fff;  padding: 10px;}.content {  flex: 1;  display: flex;  justify-content: center;  align-items: center;}.hotel-list,.room-list {  width: 50%;  border: 1px solid #ccc;  padding: 10px;  margin: 10px;}.hotel,.room {  display: flex;  justify-content: space-between;  margin-bottom: 5px;}.footer {  background-color: #333;  color: #fff;  padding: 10px;}.submit-button {  background-color: #f60;  color: #fff;  border: none;  padding: 5px 10px;  border-radius: 5px;  cursor: pointer;}</style>

// store/index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({  state: {    hotelList: [], // 酒店列表    roomList: [], // 客房列表    selectedHotel: null, // 已选中的酒店    selectedRoom: null // 已选中的客房  },  mutations: {    setHotelList(state, list) {      state.hotelList = list    },    setRoomList(state, list) {      state.roomList = list    },    selectHotel(state, hotel) {      state.selectedHotel = hotel    },    selectRoom(state, room) {      state.selectedRoom = room    }  },  actions: {    // 获取酒店列表    fetchHotelList({ commit }) {      // 调用uni.request发送网络请求      uni.request({        url: 'https://api.example.com/hotelList',        success(res) {          if (res.statusCode === 200) {            commit('setHotelList', res.data)          }        }      })    },    // 获取客房列表    fetchRoomList({ commit }) {      // 调用uni.request发送网络请求      uni.request({        url: 'https://api.example.com/roomList',        success(res) {          if (res.statusCode === 200) {            commit('setRoomList', res.data)          }        }      })    }  }})export default store

// pages/hotelPage.vueexport default {  mounted() {    // 页面加载时获取酒店列表和客房列表    this.$store.dispatch('fetchHotelList')    this.$store.dispatch('fetchRoomList')  }}

// pages/hotelPage.vueexport default {  methods: {    selectHotel(hotel) {      // 选中酒店      this.$store.commit('selectHotel', hotel)    },    selectRoom(room) {      // 选中客房      this.$store.commit('selectRoom', room)    },    submit() {      // 提交预订      if (this.$store.state.selectedHotel && this.$store.state.selectedRoom) {        uni.request({          url: 'https://api.example.com/submit',          method: 'POST',          data: {            hotel: this.$store.state.selectedHotel,            room: this.$store.state.selectedRoom          },          success(res) {            if (res.statusCode === 200) {              uni.showToast({                title: '预订成功'              })            }          }        })      } else {        uni.showToast({          title: '请选择酒店和客房'        })      }    }  }}