uni-app 售票选择座位的插件

针对您提到的uni-app售票选择座位的插件需求，下面是一个简化的代码示例，用于展示如何在uni-app中实现座位选择功能。这个示例不会覆盖所有复杂的业务逻辑，但提供了一个基础框架，您可以在此基础上进行扩展和优化。

首先，您需要创建一个自定义组件用于显示座位图。假设我们有一个简单的座位布局，使用二维数组来表示座位状态（可选或已选）。

seat-map.vue (自定义组件)

<template>
  <view class="seat-map">
    <view v-for="(row, rowIndex) in seats" :key="rowIndex" class="row">
      <view
        v-for="(seat, colIndex) in row"
        :key="colIndex"
        :class="['seat', { selected: seat === 1 }]"
        @click="selectSeat(rowIndex, colIndex)"
      >
        {{ seat === 1 ? '✓' : '' }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    seats: {
      type: Array,
      required: true
    }
  },
  methods: {
    selectSeat(rowIndex, colIndex) {
      this.$emit('select', { rowIndex, colIndex });
    }
  }
}
</script>

<style>
.seat-map {
  display: grid;
  grid-template-columns: repeat(10, 1fr); /* Adjust according to your seat layout */
  gap: 10px;
}
.seat {
  width: 50px;
  height: 50px;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}
.seat.selected {
  background-color: #007aff;
  color: white;
}
</style>

pages/index/index.vue (使用自定义组件)

<template>
  <view>
    <seat-map :seats="seats" @select="handleSeatSelect" />
  </view>
</template>

<script>
import SeatMap from '@/components/seat-map.vue';

export default {
  components: {
    SeatMap
  },
  data() {
    return {
      seats: Array.from({ length: 5 }, () => Array(10).fill(0)) // 5 rows, 10 cols
    };
  },
  methods: {
    handleSeatSelect({ rowIndex, colIndex }) {
      this.seats[rowIndex][colIndex] = this.seats[rowIndex][colIndex] === 1 ? 0 : 1;
    }
  }
}
</script>

上述代码展示了如何在uni-app中创建一个简单的座位选择插件。seat-map.vue组件负责渲染座位图并处理座位点击事件，而pages/index/index.vue页面则管理座位状态并传递座位数据给组件。您可以根据实际需求调整座位布局、样式和业务逻辑。