client-mazu/src/pages/sellManage/group.vue

<template>
  <SaleLayout>
    <QuickType></QuickType>
    <!-- 票种列表 -->
    <TickList
      ref="ticketList"
      type-id="2"
      slot="left"
      v-model="currentTicket"
    ></TickList>

    <div slot="right">
      <div>
        <!-- 昭苏团体票打折定制 -->
        <FormInfoZhaosu
          v-if="['昭苏'].includes(scenicName)"
          ref="formInfo"
          style="margin-bottom:10px"
          :current-ticket="currentTicket"
          :order-items="orderItems"></FormInfoZhaosu>
        <!-- 其他景区保持原样 -->
        <FormInfo
          v-else
          ref="formInfo"
          style="margin-bottom:10px"
          :current-ticket="currentTicket"
          :order-items="orderItems"></FormInfo>
      </div>

      <div>
        <!-- 昭苏团体票打折定制 -->
        <OrderInfoZhaosu
          v-if="['昭苏'].includes(scenicName)"
          style="margin-bottom:10px"
          @clear="handleClear"
          ref="orderInfo"
          :current-ticket="currentTicket"
          v-model="orderItems"></OrderInfoZhaosu>
        <OrderInfoMingtou
          v-else-if="['铭投山庄','大陈岛景区'].includes(scenicName)"
          style="margin-bottom:10px"
          @clear="handleClear"
          ref="orderInfo"
          v-model="orderItems"></OrderInfoMingtou>
        <OrderInfo
          v-else
          style="margin-bottom:10px"
          @clear="handleClear"
          ref="orderInfo"
          v-model="orderItems"></OrderInfo>
      </div>

      <!-- 售票记录 -->
      <OrderRecord ref="orderRecord"></OrderRecord>
    </div>
  </SaleLayout>
</template>

<script>
import SaleLayout from '@/layout/SaleLayout'
import TickList from './common/TicketList'
import QuickType from './common/QuickType'

import FormInfo from './group/FormInfo'
import FormInfoZhaosu from './group/FormInfoZhaosu'
import OrderInfo from './group/OrderInfo'
import OrderInfoZhaosu from './group/OrderInfoZhaosu'
import OrderInfoMingtou from './group/OrderInfoMingtou.vue'
import OrderRecord from './common/OrderRecord'

import handleKeyBind from './common/keyBind'

export default {
  data () {
    return {
      currentTicket: null,
      orderItems: []
    }
  },
  components: {
    SaleLayout,
    TickList,
    FormInfo,
    FormInfoZhaosu,
    QuickType,
    OrderInfo,
    OrderInfoZhaosu,
    OrderInfoMingtou,
    OrderRecord
  },
  computed: {
    scenicName () {
      return this.$localStore.get('scenicName') || this.$store.state.user.scenicName
    }
  },
  mounted () {
    this.keyBind = e => {
      handleKeyBind(e, this)
    }
    document.addEventListener('keydown', this.keyBind, true)
  },
  methods: {
    handleClear () {
      this.orderItems = []
      this.$refs.formInfo.$refs.form.clearValidate()
    }
  },
  beforeDestroy () {
    // 离开时，卸载事件
    document.removeEventListener('keydown', this.keyBind, true)
  }
}
</script>