【无标题】

最新推荐文章于 2024-01-18 23:25:36 发布

weixin_43968963

最新推荐文章于 2024-01-18 23:25:36 发布

阅读量220

点赞数

文章标签： python 前端 linux

本文链接：https://blog.csdn.net/weixin_43968963/article/details/134508679

版权

<template>
  <view class="container">
    <!-- 导航栏 start -->
    <u-navbar :border="false" bgColor="#f0f0f0" :placeholder="true" height="44" :autoBack="true" :title="'我爱你！'" />
    <!-- 导航栏 end -->

    <!-- 选座 start -->
    <chooseSeat
      title="皮皮鲁与鲁西西之罐头小人"
      info="2021年10月22日 国语 奇幻 喜剧 儿童"
      room-name="5号厅"
      :seat-data="seatData"
      :max="10"
      @confirm="onConfirmSeat"
      v-if="seatData"
    >
    </chooseSeat>
    <!-- 选座 end -->
  </view>
</template>

<script>
import chooseSeat from './components/choose-seat/index.vue';
import seatData from './data1.js';

export default {
  name: 'TicketSeat',
  components: { chooseSeat, HallInfo },
  data() {
    return {
      seatData: null,
      // 选中座位的数组
      chooseSeat: [],
    };
  },
  onLoad() {
    this.getSeatData();
  },
  methods: {
    async getSeatData() {
      this.seatData = seatData.seatPlan.map(item => {
        return {
          ...item,
          status: 0,
        };
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>

<style lang="scss">
page {
  height: 100%;
}
</style>

export default {
  seatPlan: [
    {
      colId: '01',
      colNum: 12,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '1',
      rowNum: 1,
      seatCode: '0000000000022434',
      seatName: '1排01座',
      seatType: 'N',
    },
    {
      colId: '02',
      colNum: 11,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '1',
      rowNum: 1,
      seatCode: '0000000000022433',
      seatName: '1排02座',
      seatType: 'N',
    },
    {
      colId: '03',
      colNum: 10,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '1',
      rowNum: 1,
      seatCode: '0000000000022432',
      seatName: '1排03座',
      seatType: 'N',
    },
    {
      colId: '04',
      colNum: 9,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '1',
      rowNum: 1,
      seatCode: '0000000000022431',
      seatName: '1排04座',
      seatType: 'N',
    },
    {
      colId: '05',
      colNum: 8,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '1',
      rowNum: 1,
      seatCode: '0000000000022430',
      seatName: '1排05座',
      seatType: 'N',
    },
    {
      colId: '06',
      colNum: 7,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '1',
      rowNum: 1,
      seatCode: '0000000000022429',
      seatName: '1排06座',
      seatType: 'N',
    },
    {
      colId: '07',
      colNum: 6,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '1',
      rowNum: 1,
      seatCode: '0000000000022428',
      seatName: '1排07座',
      seatType: 'N',
    },
    {
      colId: '08',
      colNum: 5,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '1',
      rowNum: 1,
      seatCode: '0000000000022427',
      seatName: '1排08座',
      seatType: 'N',
    },
    {
      colId: '09',
      colNum: 4,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '1',
      rowNum: 1,
      seatCode: '0000000000022426',
      seatName: '1排09座',
      seatType: 'N',
    },
    {
      colId: '10',
      colNum: 3,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '1',
      rowNum: 1,
      seatCode: '0000000000022425',
      seatName: '1排10座',
      seatType: 'N',
    },
    {
      colId: '11',
      colNum: 2,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '1',
      rowNum: 1,
      seatCode: '0000000000022424',
      seatName: '1排11座',
      seatType: 'N',
    },
    {
      colId: '12',
      colNum: 1,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '1',
      rowNum: 1,
      seatCode: '0000000000022423',
      seatName: '1排12座',
      seatType: 'N',
    },
    {
      colId: '01',
      colNum: 12,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '2',
      rowNum: 2,
      seatCode: '0000000000022446',
      seatName: '2排01座',
      seatType: 'N',
    },
    {
      colId: '02',
      colNum: 11,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '2',
      rowNum: 2,
      seatCode: '0000000000022445',
      seatName: '2排02座',
      seatType: 'N',
    },
    {
      colId: '03',
      colNum: 10,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '2',
      rowNum: 2,
      seatCode: '0000000000022444',
      seatName: '2排03座',
      seatType: 'N',
    },
    {
      colId: '04',
      colNum: 9,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '2',
      rowNum: 2,
      seatCode: '0000000000022443',
      seatName: '2排04座',
      seatType: 'N',
    },
    {
      colId: '05',
      colNum: 8,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '2',
      rowNum: 2,
      seatCode: '0000000000022442',
      seatName: '2排05座',
      seatType: 'N',
    },
    {
      colId: '06',
      colNum: 7,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '2',
      rowNum: 2,
      seatCode: '0000000000022441',
      seatName: '2排06座',
      seatType: 'N',
    },
    {
      colId: '07',
      colNum: 6,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '2',
      rowNum: 2,
      seatCode: '0000000000022440',
      seatName: '2排07座',
      seatType: 'N',
    },
    {
      colId: '08',
      colNum: 5,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '2',
      rowNum: 2,
      seatCode: '0000000000022439',
      seatName: '2排08座',
      seatType: 'N',
    },
    {
      colId: '09',
      colNum: 4,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '2',
      rowNum: 2,
      seatCode: '0000000000022438',
      seatName: '2排09座',
      seatType: 'N',
    },
    {
      colId: '10',
      colNum: 3,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '2',
      rowNum: 2,
      seatCode: '0000000000022437',
      seatName: '2排10座',
      seatType: 'N',
    },
    {
      colId: '11',
      colNum: 2,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '2',
      rowNum: 2,
      seatCode: '0000000000022436',
      seatName: '2排11座',
      seatType: 'N',
    },
    {
      colId: '12',
      colNum: 1,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '2',
      rowNum: 2,
      seatCode: '0000000000022435',
      seatName: '2排12座',
      seatType: 'N',
    },
    {
      colId: '01',
      colNum: 12,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '3',
      rowNum: 3,
      seatCode: '0000000000022458',
      seatName: '3排01座',
      seatType: 'N',
    },
    {
      colId: '02',
      colNum: 11,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '3',
      rowNum: 3,
      seatCode: '0000000000022457',
      seatName: '3排02座',
      seatType: 'N',
    },
    {
      colId: '03',
      colNum: 10,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '3',
      rowNum: 3,
      seatCode: '0000000000022456',
      seatName: '3排03座',
      seatType: 'N',
    },
    {
      colId: '04',
      colNum: 9,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '3',
      rowNum: 3,
      seatCode: '0000000000022455',
      seatName: '3排04座',
      seatType: 'N',
    },
    {
      colId: '05',
      colNum: 8,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '3',
      rowNum: 3,
      seatCode: '0000000000022454',
      seatName: '3排05座',
      seatType: 'N',
    },
    {
      colId: '06',
      colNum: 7,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '3',
      rowNum: 3,
      seatCode: '0000000000022453',
      seatName: '3排06座',
      seatType: 'N',
    },
    {
      colId: '07',
      colNum: 6,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '3',
      rowNum: 3,
      seatCode: '0000000000022452',
      seatName: '3排07座',
      seatType: 'N',
    },
    {
      colId: '08',
      colNum: 5,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '3',
      rowNum: 3,
      seatCode: '0000000000022451',
      seatName: '3排08座',
      seatType: 'N',
    },
    {
      colId: '09',
      colNum: 4,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '3',
      rowNum: 3,
      seatCode: '0000000000022450',
      seatName: '3排09座',
      seatType: 'N',
    },
    {
      colId: '10',
      colNum: 3,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '3',
      rowNum: 3,
      seatCode: '0000000000022449',
      seatName: '3排10座',
      seatType: 'N',
    },
    {
      colId: '11',
      colNum: 2,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '3',
      rowNum: 3,
      seatCode: '0000000000022448',
      seatName: '3排11座',
      seatType: 'N',
    },
    {
      colId: '12',
      colNum: 1,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '3',
      rowNum: 3,
      seatCode: '0000000000022447',
      seatName: '3排12座',
      seatType: 'N',
    },
    {
      colId: '01',
      colNum: 12,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '4',
      rowNum: 4,
      seatCode: '0000000000022470',
      seatName: '4排01座',
      seatType: 'N',
    },
    {
      colId: '02',
      colNum: 11,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '4',
      rowNum: 4,
      seatCode: '0000000000022469',
      seatName: '4排02座',
      seatType: 'N',
    },
    {
      colId: '03',
      colNum: 10,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '4',
      rowNum: 4,
      seatCode: '0000000000022468',
      seatName: '4排03座',
      seatType: 'N',
    },
    {
      colId: '04',
      colNum: 9,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '4',
      rowNum: 4,
      seatCode: '0000000000022467',
      seatName: '4排04座',
      seatType: 'N',
    },
    {
      colId: '05',
      colNum: 8,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '4',
      rowNum: 4,
      seatCode: '0000000000022466',
      seatName: '4排05座',
      seatType: 'N',
    },
    {
      colId: '06',
      colNum: 7,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '4',
      rowNum: 4,
      seatCode: '0000000000022465',
      seatName: '4排06座',
      seatType: 'N',
    },
    {
      colId: '07',
      colNum: 6,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '4',
      rowNum: 4,
      seatCode: '0000000000022464',
      seatName: '4排07座',
      seatType: 'N',
    },
    {
      colId: '08',
      colNum: 5,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '4',
      rowNum: 4,
      seatCode: '0000000000022463',
      seatName: '4排08座',
      seatType: 'N',
    },
    {
      colId: '09',
      colNum: 4,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '4',
      rowNum: 4,
      seatCode: '0000000000022462',
      seatName: '4排09座',
      seatType: 'N',
    },
    {
      colId: '10',
      colNum: 3,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '4',
      rowNum: 4,
      seatCode: '0000000000022461',
      seatName: '4排10座',
      seatType: 'N',
    },
    {
      colId: '11',
      colNum: 2,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '4',
      rowNum: 4,
      seatCode: '0000000000022460',
      seatName: '4排11座',
      seatType: 'N',
    },
    {
      colId: '12',
      colNum: 1,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '4',
      rowNum: 4,
      seatCode: '0000000000022459',
      seatName: '4排12座',
      seatType: 'N',
    },
    {
      colId: '01',
      colNum: 12,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '5',
      rowNum: 5,
      seatCode: '0000000000022482',
      seatName: '5排01座',
      seatType: 'N',
    },
    {
      colId: '02',
      colNum: 11,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '5',
      rowNum: 5,
      seatCode: '0000000000022481',
      seatName: '5排02座',
      seatType: 'N',
    },
    {
      colId: '03',
      colNum: 10,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '5',
      rowNum: 5,
      seatCode: '0000000000022480',
      seatName: '5排03座',
      seatType: 'N',
    },
    {
      colId: '04',
      colNum: 9,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '5',
      rowNum: 5,
      seatCode: '0000000000022479',
      seatName: '5排04座',
      seatType: 'N',
    },
    {
      colId: '05',
      colNum: 8,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '5',
      rowNum: 5,
      seatCode: '0000000000022478',
      seatName: '5排05座',
      seatType: 'N',
    },
    {
      colId: '06',
      colNum: 7,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '5',
      rowNum: 5,
      seatCode: '0000000000022477',
      seatName: '5排06座',
      seatType: 'N',
    },
    {
      colId: '07',
      colNum: 6,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '5',
      rowNum: 5,
      seatCode: '0000000000022476',
      seatName: '5排07座',
      seatType: 'N',
    },
    {
      colId: '08',
      colNum: 5,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '5',
      rowNum: 5,
      seatCode: '0000000000022475',
      seatName: '5排08座',
      seatType: 'N',
    },
    {
      colId: '09',
      colNum: 4,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '5',
      rowNum: 5,
      seatCode: '0000000000022474',
      seatName: '5排09座',
      seatType: 'N',
    },
    {
      colId: '10',
      colNum: 3,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '5',
      rowNum: 5,
      seatCode: '0000000000022473',
      seatName: '5排10座',
      seatType: 'N',
    },
    {
      colId: '11',
      colNum: 2,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '5',
      rowNum: 5,
      seatCode: '0000000000022472',
      seatName: '5排11座',
      seatType: 'N',
    },
    {
      colId: '12',
      colNum: 1,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '5',
      rowNum: 5,
      seatCode: '0000000000022471',
      seatName: '5排12座',
      seatType: 'N',
    },
    {
      colId: '01',
      colNum: 12,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '6',
      rowNum: 6,
      seatCode: '0000000000022494',
      seatName: '6排01座',
      seatType: 'N',
    },
    {
      colId: '02',
      colNum: 11,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '6',
      rowNum: 6,
      seatCode: '0000000000022493',
      seatName: '6排02座',
      seatType: 'N',
    },
    {
      colId: '03',
      colNum: 10,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '6',
      rowNum: 6,
      seatCode: '0000000000022492',
      seatName: '6排03座',
      seatType: 'N',
    },
    {
      colId: '04',
      colNum: 9,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '6',
      rowNum: 6,
      seatCode: '0000000000022491',
      seatName: '6排04座',
      seatType: 'N',
    },
    {
      colId: '05',
      colNum: 8,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '6',
      rowNum: 6,
      seatCode: '0000000000022490',
      seatName: '6排05座',
      seatType: 'N',
    },
    {
      colId: '06',
      colNum: 7,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '6',
      rowNum: 6,
      seatCode: '0000000000022489',
      seatName: '6排06座',
      seatType: 'N',
    },
    {
      colId: '07',
      colNum: 6,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '6',
      rowNum: 6,
      seatCode: '0000000000022488',
      seatName: '6排07座',
      seatType: 'N',
    },
    {
      colId: '08',
      colNum: 5,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '6',
      rowNum: 6,
      seatCode: '0000000000022487',
      seatName: '6排08座',
      seatType: 'N',
    },
    {
      colId: '09',
      colNum: 4,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '6',
      rowNum: 6,
      seatCode: '0000000000022486',
      seatName: '6排09座',
      seatType: 'N',
    },
    {
      colId: '10',
      colNum: 3,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '6',
      rowNum: 6,
      seatCode: '0000000000022485',
      seatName: '6排10座',
      seatType: 'N',
    },
    {
      colId: '11',
      colNum: 2,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '6',
      rowNum: 6,
      seatCode: '0000000000022484',
      seatName: '6排11座',
      seatType: 'N',
    },
    {
      colId: '12',
      colNum: 1,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '6',
      rowNum: 6,
      seatCode: '0000000000022483',
      seatName: '6排12座',
      seatType: 'N',
    },
    {
      colId: '01',
      colNum: 16,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '7',
      rowNum: 7,
      seatCode: '0000000000022508',
      seatName: '7排01座',
      seatType: 'N',
    },
    {
      colId: '02',
      colNum: 15,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '7',
      rowNum: 7,
      seatCode: '0000000000022507',
      seatName: '7排02座',
      seatType: 'N',
    },
    {
      colId: '03',
      colNum: 12,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '7',
      rowNum: 7,
      seatCode: '0000000000022506',
      seatName: '7排03座',
      seatType: 'N',
    },
    {
      colId: '04',
      colNum: 11,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '7',
      rowNum: 7,
      seatCode: '0000000000022505',
      seatName: '7排04座',
      seatType: 'N',
    },
    {
      colId: '05',
      colNum: 10,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '7',
      rowNum: 7,
      seatCode: '0000000000022504',
      seatName: '7排05座',
      seatType: 'N',
    },
    {
      colId: '06',
      colNum: 9,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '7',
      rowNum: 7,
      seatCode: '0000000000022503',
      seatName: '7排06座',
      seatType: 'N',
    },
    {
      colId: '07',
      colNum: 8,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '7',
      rowNum: 7,
      seatCode: '0000000000022502',
      seatName: '7排07座',
      seatType: 'N',
    },
    {
      colId: '08',
      colNum: 7,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '7',
      rowNum: 7,
      seatCode: '0000000000022501',
      seatName: '7排08座',
      seatType: 'N',
    },
    {
      colId: '09',
      colNum: 6,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '7',
      rowNum: 7,
      seatCode: '0000000000022500',
      seatName: '7排09座',
      seatType: 'N',
    },
    {
      colId: '10',
      colNum: 5,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '7',
      rowNum: 7,
      seatCode: '0000000000022499',
      seatName: '7排10座',
      seatType: 'N',
    },
    {
      colId: '11',
      colNum: 4,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '7',
      rowNum: 7,
      seatCode: '0000000000022498',
      seatName: '7排11座',
      seatType: 'N',
    },
    {
      colId: '12',
      colNum: 3,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '7',
      rowNum: 7,
      seatCode: '0000000000022497',
      seatName: '7排12座',
      seatType: 'N',
    },
    {
      colId: '13',
      colNum: 2,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '7',
      rowNum: 7,
      seatCode: '0000000000022496',
      seatName: '7排13座',
      seatType: 'N',
    },
    {
      colId: '14',
      colNum: 1,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '7',
      rowNum: 7,
      seatCode: '0000000000022495',
      seatName: '7排14座',
      seatType: 'N',
    },
    {
      colId: '01',
      colNum: 16,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '8',
      rowNum: 8,
      seatCode: '0000000000022524',
      seatName: '8排01座',
      seatType: 'N',
    },
    {
      colId: '02',
      colNum: 15,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '8',
      rowNum: 8,
      seatCode: '0000000000022523',
      seatName: '8排02座',
      seatType: 'N',
    },
    {
      colId: '03',
      colNum: 14,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '8',
      rowNum: 8,
      seatCode: '0000000000022522',
      seatName: '8排03座',
      seatType: 'N',
    },
    {
      colId: '04',
      colNum: 13,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '8',
      rowNum: 8,
      seatCode: '0000000000022521',
      seatName: '8排04座',
      seatType: 'N',
    },
    {
      colId: '05',
      colNum: 12,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '8',
      rowNum: 8,
      seatCode: '0000000000022520',
      seatName: '8排05座',
      seatType: 'N',
    },
    {
      colId: '06',
      colNum: 11,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '8',
      rowNum: 8,
      seatCode: '0000000000022519',
      seatName: '8排06座',
      seatType: 'N',
    },
    {
      colId: '07',
      colNum: 10,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '8',
      rowNum: 8,
      seatCode: '0000000000022518',
      seatName: '8排07座',
      seatType: 'N',
    },
    {
      colId: '08',
      colNum: 9,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '8',
      rowNum: 8,
      seatCode: '0000000000022517',
      seatName: '8排08座',
      seatType: 'N',
    },
    {
      colId: '09',
      colNum: 8,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '8',
      rowNum: 8,
      seatCode: '0000000000022516',
      seatName: '8排09座',
      seatType: 'N',
    },
    {
      colId: '10',
      colNum: 7,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '8',
      rowNum: 8,
      seatCode: '0000000000022515',
      seatName: '8排10座',
      seatType: 'N',
    },
    {
      colId: '11',
      colNum: 6,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '8',
      rowNum: 8,
      seatCode: '0000000000022514',
      seatName: '8排11座',
      seatType: 'N',
    },
    {
      colId: '12',
      colNum: 5,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '8',
      rowNum: 8,
      seatCode: '0000000000022513',
      seatName: '8排12座',
      seatType: 'N',
    },
    {
      colId: '13',
      colNum: 4,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '8',
      rowNum: 8,
      seatCode: '0000000000022512',
      seatName: '8排13座',
      seatType: 'N',
    },
    {
      colId: '14',
      colNum: 3,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '8',
      rowNum: 8,
      seatCode: '0000000000022511',
      seatName: '8排14座',
      seatType: 'N',
    },
    {
      colId: '15',
      colNum: 2,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '8',
      rowNum: 8,
      seatCode: '0000000000022510',
      seatName: '8排15座',
      seatType: 'N',
    },
    {
      colId: '16',
      colNum: 1,
      effectiveDate: '2012-03-21 00:00:00',
      isDamaged: false,
      rowId: '8',
      rowNum: 8,
      seatCode: '0000000000022509',
      seatName: '8排16座',
      seatType: 'N',
    },
  ],
};

<template>
  <view class="sel-seat">
    <!-- main -->
    <view class="seat-main">
      <movable-area :style="{ height: seatRow * (seatSize + 10) + 50 + 'px' }">
        <movable-view
          :inertia="true"
          :scale="true"
          :scale-value="scaleValue"
          :scale-min="1"
          :scale-max="3"
          direction="all"
          @change="onMove"
          @scale="onScale"
          :animation="false"
          :x="x"
          :y="y"
        >
          <view class="sm-title">
            <text class="text">{{ roomName }}</text>
          </view>
          <view
            v-for="(item, index) in seatArray"
            :key="index"
            class="sm-cell"
            :style="{ width: boxWidth + 'px', height: seatSize + 'px' }"
          >
            <view
              v-for="(seat, col) in item"
              :key="col"
              class="dp-ib"
              :style="{ width: seatSize + 'px', height: seatSize + 'px' }"
              @click="handleChooseSeat($event, index, col)"
            >
              <image v-if="seat.type === 0" class="sm-icon" :src="IMG_URL + '/ticket/normal-seat.png'" mode="aspectFit"></image>
              <image
                v-else-if="seat.type === 1"
                class="sm-icon"
                :src="IMG_URL + '/ticket/select-seat.png'"
                mode="aspectFit"
              ></image>
              <image
                v-else-if="seat.type === 2"
                class="sm-icon"
                :src="IMG_URL + '/ticket/saled-seat.png'"
                mode="aspectFit"
              ></image>
            </view>
          </view>
          <!-- 左侧索引 -->
          <view class="sm-line-index" :style="{ left: -moveX / scale + 'px' }">
            <text class="text" :style="{ height: seatSize + 'px' }" v-for="(m, mindex) in mArr" :key="mindex">{{ m }}</text>
          </view>
          <!-- 最佳观影区 -->
          <!-- v-if="optimalPosition" -->
          <view :style="{'top': `${topDistance}rpx`, 'left': `${leftDistance}rpx`, }" class="best-area"></view>
        </movable-view>
      </movable-area>
    </view>
    <!-- footer -->
    <view class="seat-footer">
      <view class="page-padding">
        <!-- 分区定价 -->
        <view class="area-price">
          <view class="area" v-for="i in 3" :key="i">
            <image :src="IMG_URL + '/ticket/good-seat.png'" mode="" />
            <view class="prices">
              <view>黄金区 ¥33</view>
            </view>
          </view>
        </view>
        <!-- 已选座位 start -->
        <view class="choose-seat">
          <!-- 通知 -->
          <view class="notice">
            <u-icon name="volume-fill" :color="themeColor" size="30rpx"></u-icon>
            <text>请按照座位信息购买，3D电影请自备3D眼镜</text>
          </view>
          <!-- 推荐选座 -->
          <view class="recommend-seat y-center" v-if="!optArr.length">
            <text class="text">推荐座位</text>
            <scroll-view scroll-x="true" class="peoples">
              <view @click="smartChoose(i)" v-for="i in 6" :key="i">{{ i }}人</view>
            </scroll-view>
          </view>
          <!-- 选中的座位 -->
          <scroll-view v-else class="scroll-wrap" scroll-x="true">
            <view
              class="seat"
              v-for="optItem in optArr"
              :key="optItem.seatCode"
              @click="handleChooseSeat($event, optItem.rowIndex, optItem.colIndex)"
            >
              <view class="left">
                <view>{{ optItem.seatName }}</view>
                <view>￥{{ optItem.price || '' }}</view>
              </view>
              <u-icon name="close" color="#333" size="32rpx"></u-icon>
            </view>
          </scroll-view>
        </view>
        <!-- 已选座位 end -->
      </view>
      <!-- 提交 start -->
      <view class="submit y-center" :style="{ paddingBottom: pageBottom + 'px' }">
        <view class="left">
          应付
          <text class="price" :style="{ color: themeColor }">￥{{ aPrice || 0 }}</text>
        </view>
        <view class="right">
          <view @click="buySeat" class="button-text center" :style="{ backgroundColor: themeColor }">提交订单</view>
        </view>
      </view>
      <!-- 提交 end -->
    </view>
  </view>
</template>

<script>
export default {
  props: {
    seatData: {
      type: Array,
      default: () => [],
    },
    max: {
      type: Number,
      default: 4,
    },
    roomName: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      optimalPosition: null,
      boxWidth: 375, //屏幕宽度px
      seatArray: [], //影院座位的二维数组,-1为非座位，0为未购座位，1为已选座位(绿色),2为已购座位(红色),一维行，二维列
      seatRow: 0, //影院座位行数
      seatCol: 0, //影院座位列数
      seatSize: 0, //座位尺寸
      SelectNum: 0, //选择座位数
      moveX: 0, //水平移动偏移量
      scale: 1, //放大倍数
      minRow: 0, //从第几行开始排座位
      minCol: 0, //从第几列开始排座位
      seatList: [], //接口获取的原始位置
      mArr: [], //排数提示
      optArr: [], // 选中的座位数组。
      scaleValue: 1, // 控制缩放的倍数
      x: 0, // 移动的x值
      y: 0, // 移动的y值
      topDistance: '100',
      leftDistance: '200'

    };
  },
  computed: {
    // 总价格
    aPrice() {
      let totalAmount = '';
      if (this.optArr && this.optArr.length) {
        totalAmount = this.optArr.map(item => Number(item.price)).reduce((prev, curr) => prev + curr);
      }
      return totalAmount;
    },
  },
  created() {
    
    //获取宽度
    this.boxWidth = this.systemInfo.screenWidth;
    this.initData();
  },
  methods: {
    // 初始化数据
    initData() {
      let arr = this.seatData;
      //假数据说明：SeatCode座位编号，RowNum-行号，ColumnNum-纵号，rowNum-Y坐标，colNum-X坐标，Status-状态
      let row = 0;
      let col = 0;
      let minCol = parseInt(arr[0].colNum);
      let minRow = parseInt(arr[0].rowNum);
      for (let i of arr) {
        minRow = parseInt(i.rowNum) < minRow ? parseInt(i.rowNum) : minRow;
        minCol = parseInt(i.colNum) < minCol ? parseInt(i.colNum) : minCol;
        row = parseInt(i.rowNum) > row ? parseInt(i.rowNum) : row;
        col = parseInt(i.colNum) > col ? parseInt(i.colNum) : col;
      }
      this.seatList = arr;
      this.seatRow = row - minRow + 1;
      this.seatCol = col - minCol + 3;
      this.minRow = minRow;
      this.minCol = minCol - 1;

      this.initSeatArray();
    },
    //初始座位数组
    initSeatArray() {
      let seatArray = Array(this.seatRow)
        .fill(0)
        .map(() =>
          Array(this.seatCol).fill({
            type: -1,
            seatCode: '',
            rowNum: '',
            colNum: '',
          }),
        );
      this.seatArray = seatArray;
      
      // 获取每个座位的大小
      this.seatSize = Math.floor(this.boxWidth / (this.seatCol + 1));
      this.initNonSeatPlace();
      this.calculateOptimalPosition() // 计算最佳位置
    },
    //初始化是座位的地方
    initNonSeatPlace() {
      let seat = this.seatList;
      let arr = this.seatArray;
      for (let num in seat) {
        // -1 为非座位，0为未购座位，1为已选座位(绿色), 2 为已购座位(红色)
        arr[parseInt(seat[num].rowNum) - this.minRow][parseInt(seat[num].colNum) - this.minCol] = {
          type: seat[num].status,
          seatCode: seat[num].seatCode,
          rowNum: seat[num].rowNum,
          colNum: seat[num].colNum,
          seatName: seat[num].seatName,
          price: 10,
        };
      }
      this.seatArray = arr;
      let mArr = [];
      for (let i in arr) {
        let m = '';
        for (let n of arr[i]) {
          if (n.seatCode) {
            m = n.rowNum;
          }
        }
        if (m) {
          mArr.push(m);
        } else {
          mArr.push('');
        }
      }
      this.mArr = mArr;
    },
    //放大缩小事件
    onScale(e) {
      // this.moveX=-e.detail.x
      let w = this.boxWidth * 0.5;
      let s = 1 - e.detail.scale;
      this.moveX = w * s;
      this.scale = e.detail.scale;
    },
    //移动事件
    onMove(e) {
      this.moveX = e.detail.x;
    },
    //重置座位
    resetSeat() {
      this.SelectNum = 0;
      this.optArr = [];
      //将所有已选座位的值变为0
      let oldArray = this.seatArray;
      for (let i = 0; i < this.seatRow; i++) {
        for (let j = 0; j < this.seatCol; j++) {
          if (oldArray[i][j].type === 1) {
            oldArray[i][j].type = 0;
          }
        }
      }
      this.seatArray = oldArray;
    },
    //选定且购买座位
    buySeat() {
      if (this.SelectNum === 0) return;
      this.$emit('confirm', this.optArr);
    },
    //处理座位选择逻辑
    handleChooseSeat(e, row, col) {
      let seatValue = this.seatArray[row][col].type;
      let newArray = this.seatArray;
      //如果是已购座位，直接返回
      if (seatValue === 2 || seatValue === -1) return;
      //如果是已选座位点击后变未选
      if (seatValue === 1) {
        newArray[row][col].type = 0;
        this.SelectNum--;
        this.getOptArr(newArray[row][col], 0);
      } else if (seatValue === 0) {
        if (this.SelectNum >= this.max) {
          return uni.showToast({
            title: '一次最多选择' + this.max + '张',
            icon: 'none',
          });
        }
        newArray[row][col].rowIndex = row;
        newArray[row][col].colIndex = col;
        newArray[row][col].type = 1;
        this.SelectNum++;
        this.getOptArr(newArray[row][col], 1);
      }
      //必须整体更新二维数组，Vue无法检测到数组某一项更新,必须slice复制一个数组才行
      this.seatArray = newArray.slice();
      this.seatScaleHandler(e, this.seatArray[row][col]);
    },
    //处理已选座位数组
    getOptArr(item, type) {
      let optArr = this.optArr;
      if (type === 1) {
        optArr.push(item);
      } else if (type === 0) {
        let arr = [];
        optArr.forEach(v => {
          if (v.seatCode !== item.seatCode) {
            arr.push(v);
          }
        });
        optArr = arr;
      }
      this.optArr = optArr;
    },
    // 点击座位后放大逻辑
    seatScaleHandler(e, seat) {
      if (this.SelectNum === 0) {
        // this.scaleValue = 1;
        // this.x = 0;
        // this.y = 0;
      } else if (this.SelectNum === 1 && this.scaleValue <= 1.1) {
        // 计算x值和y值
        this.scaleValue = 2;
        this.$nextTick(() => {
          this.y = -(seat.rowNum * (this.seatSize + 2));
          this.x = -(seat.colNum * this.seatSize);
        });
      }
    },
    // 推荐选座,参数是推荐座位数目，
    smartChoose(num) {
      // 先重置
      this.resetSeat();
      //找到影院座位水平垂直中间位置的后一排
      let rowStart = parseInt((this.seatRow - 1) / 2, 10) + 1;
      //先从中间排往后排搜索
      let backResult = this.searchSeatByDirection(rowStart, this.seatRow - 1, num);
      if (backResult.length > 0) {
        this.chooseSeat(backResult);
        this.SelectNum += num;
        return;
      }
      //再从中间排往前排搜索
      let forwardResult = this.searchSeatByDirection(rowStart - 1, 0, num);
      if (forwardResult.length > 0) {
        this.chooseSeat(forwardResult);
        this.SelectNum += num;
        return;
      }
      //提示用户无合法位置可选
      // #ifdef H5
      alert('无合法位置可选!');
      // #endif
    },
    // 搜索函数,参数:fromRow起始行，toRow终止行,num推荐座位数
    searchSeatByDirection(fromRow, toRow, num) {
      /*
       * 推荐座位规则
       * (1)初始状态从座位行数的一半处的后一排的中间开始向左右分别搜索，取离中间最近的，如果满足条件，
       *    记录下该结果离座位中轴线的距离，后排搜索完成后取距离最小的那个结果座位最终结果，优先向后排进行搜索，
       *    后排都没有才往前排搜，前排逻辑同上
       *
       * (2)只考虑并排且连续的座位，不能不在一排或者一排中间有分隔
       *
       * */

      /*
       * 保存当前方向搜索结果的数组,元素是对象,result是结果数组，offset代表与中轴线的偏移距离
       * {
       *   result:Array([x,y])
       *   offset:Number
       * }
       *
       */
      let currentDirectionSearchResult = [];

      let largeRow = fromRow > toRow ? fromRow : toRow,
        smallRow = fromRow > toRow ? toRow : fromRow;

      for (let i = smallRow; i <= largeRow; i++) {
        //每一排的搜索,找出该排里中轴线最近的一组座位
        let tempRowResult = [],
          minDistanceToMidLine = Infinity;
        for (let j = 0; j <= this.seatCol - num; j++) {
          //如果有合法位置
          if (this.checkRowSeatContinusAndEmpty(i, j, j + num - 1)) {
            //计算该组位置距离中轴线的距离:该组位置的中间位置到中轴线的距离
            let resultMidPos = parseInt(j + num / 2, 10);
            let distance = Math.abs(parseInt(this.seatCol / 2) - resultMidPos);
            //如果距离较短则更新
            if (distance < minDistanceToMidLine) {
              minDistanceToMidLine = distance;
              //该行的最终结果
              tempRowResult = this.generateRowResult(i, j, j + num - 1);
            }
          }
        }
        //保存该行的最终结果
        currentDirectionSearchResult.push({
          result: tempRowResult,
          offset: minDistanceToMidLine,
        });
      }

      //处理后排的搜索结果:找到距离中轴线最短的一个
      //注意这里的逻辑需要区分前后排，对于后排是从前往后，前排则是从后往前找
      let isBackDir = fromRow < toRow;
      let finalReuslt = [],
        minDistanceToMid = Infinity;
      if (isBackDir) {
        //后排情况,从前往后
        currentDirectionSearchResult.forEach(item => {
          if (item.offset < minDistanceToMid) {
            finalReuslt = item.result;
            minDistanceToMid = item.offset;
          }
        });
      } else {
        //前排情况，从后往前找
        currentDirectionSearchResult.reverse().forEach(item => {
          if (item.offset < minDistanceToMid) {
            finalReuslt = item.result;
            minDistanceToMid = item.offset;
          }
        });
      }

      //直接返回结果
      return finalReuslt;
    },
    // 辅助函数，判断每一行座位从i列到j列是否全部空余且连续
    checkRowSeatContinusAndEmpty(rowNum, startPos, endPos) {
      let isValid = true;
      for (let i = startPos; i <= endPos; i++) {
        if (this.seatArray[rowNum][i].type !== 0) {
          isValid = false;
          break;
        }
      }
      return isValid;
    },
    // 辅助函数：返回每一行的某个合理位置的座位数组
    generateRowResult(row, startPos, endPos) {
      let result = [];
      for (let i = startPos; i <= endPos; i++) {
        result.push([row, i]);
      }
      return result;
    },
    // 辅助函数:智能推荐的选座操作
    chooseSeat(result) {
      let oldArray = this.seatArray;
      for (let i = 0; i < result.length; i++) {
        //选定座位
        oldArray[result[i][0]][result[i][1]].rowIndex = result[i][0];
        oldArray[result[i][0]][result[i][1]].colIndex = result[i][1];
        oldArray[result[i][0]][result[i][1]].type = 1;
        this.optArr.push(oldArray[result[i][0]][result[i][1]]);
      }
      this.seatArray = oldArray;
    },

    // 计算推荐位置
    calculateOptimalPosition() {

      let ids = ['0000000000022433','0000000000022484'];
      console.log(ids,'idsids')
let Data = ids.map(
  item =>  this.seatData.filter(i => i?.seatCode == item)[0]
);
let shuliang = Data[0].colNum
let shuliang1 = Data[1].colNum
console.log(Data,shuliang, shuliang1,this.seatArray, 999)
this.leftDistance = (shuliang1 + 1) * this.seatSize


      
    },
    // 判断座位是否是推荐座位
    isRecommendedSeat(seat) {
      const optimalPosition = this.calculateOptimalPosition();
      return optimalPosition && seat.row === optimalPosition.row && seat.col === optimalPosition.col;
    },
  },
  watch: {
    // 监听座位布局变化，更新推荐位置
    seatData: {
      handler() {
        this.optimalPosition = this.calculateOptimalPosition();
      },
      deep: true,
      immediate: true, // 是否初始化时就执行一次
    },
  },
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>

.sel-seat {
  display: flex;
  flex-direction: column;
  width: 100%;

  .seat-main {
    width: 100%;
    position: relative;

    movable-area {
      width: 100vw;

      movable-view {
        width: 100%;
        height: 100%;
      }
    }

    .sm-title {
      background-color: #dddddd;
      width: 380rpx;
      height: 34rpx;
      transform: perspective(34rpx) rotateX(-10deg);
      margin: 0 auto 20rpx auto;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 2;

      .text {
        font-size: 24rpx;
        color: #333333;
      }
    }

    // seat style
    .sm-cell {
      display: flex;
      margin-top: 4rpx;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 2;

      .sm-icon {
        width: 100%;
        height: 100%;
      }
    }

    .sm-line-index {
      pointer-events: none;
      position: fixed;
      top: 60rpx;
      border-radius: 9999rpx;
      overflow: hidden;
      background-color: rgba($color: #000000, $alpha: 0.3);
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 30rpx;

      .text {
        font-size: 24rpx;
        color: #ffffff;
        width: 100%;
        text-align: center;
        margin-top: 4rpx;
      }
    }

    .best-area {
      pointer-events: none;
      z-index: 2;
      left: 20%;
      top: 100rpx;
      width: 300rpx;
      height: 200rpx;
      position: absolute;
      border: 1px dashed #ff0000;
    }
  }
}

.seat-footer {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 100%;
  padding-bottom: 0;
  background-color: $page-bg;

  .area-price {
    margin-top: 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
    display: flex;
    padding: 20rpx;
    justify-content: space-between;

    .area {
      display: flex;

      image {
        width: 30rpx;
        height: 30rpx;
        margin-right: 14rpx;
      }

      .prices {
        font-size: 24rpx;
        color: #333333;
      }
    }
  }

  .choose-seat {
    padding: 20rpx;
    border-radius: 10rpx;
    background-color: #fff;
    margin: 20rpx 0;

    .notice {
      display: flex;
      margin-bottom: 20rpx;

      text {
        margin-left: 10rpx;
        font-size: 24rpx;
        color: #333333;
      }
    }

    .scroll-wrap {
      white-space: nowrap;
      width: 100%;

      .seat {
        padding: 20rpx;
        display: inline-flex;
        align-items: center;
        border-radius: 10rpx;
        background-color: rgba($color: #cccccc, $alpha: 0.5);
        margin-right: 14rpx;

        .left {
          font-size: 24rpx;
          font-weight: bold;
          color: #333333;
          margin-right: 24rpx;

          view {
            &:first-child {
              margin-bottom: 4rpx;
            }
          }
        }

        &:last-child {
          margin-right: 0;
        }
      }
    }

    .recommend-seat {
      .text {
        font-size: 24rpx;
        color: #333333;
        min-width: 120rpx;
      }

      .peoples {
        display: flex;
        white-space: nowrap;
        width: calc(100% - 120rpx);

        view {
          display: inline-flex;
          justify-content: center;
          align-items: center;
          font-size: 24rpx;
          color: #333333;
          width: 99rpx;
          height: 46rpx;
          background: #eeeeee;
          border-radius: 10rpx;
          margin-right: 10rpx;
        }
      }
    }
  }

  .submit {
    background: #ffffff;
    padding: 14rpx 20rpx 0 14rpx;
    z-index: 9;
    justify-content: space-between;

    .left {
      font-size: 24rpx;
      color: #333333;

      .price {
        font-size: 30rpx;
        font-weight: bold;
      }
    }

    .right {
      display: flex;
      align-items: center;

      .detail {
        margin-right: 20rpx;

        text {
          color: #666;
          font-size: 24rpx;
          margin-right: 8rpx;
        }
      }

      .button-text {
        width: 250rpx;
        height: 80rpx;
        border-radius: 40rpx;
        font-size: 30rpx;
        font-weight: bold;
        color: #ffffff;
      }
    }
  }
}