client-mazu/src/pages/sellManage/retail/Confirm.vue

<template>
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :visible="visible"
    :before-close="handleClose"
    title="出票确认"
    width="80%">
    <el-form
      v-loading="submitDisable"
      element-loading-text="正在处理付款请求，请稍候"
      class="info-wrap"
      label-width="100px"
      :inline="true">
      <div style="margin-bottom: 20px;">
        付款方式：
        <el-radio-group
          :disabled="createOrderStatus===1"
          size="medium"
          fill="#ff6934"
          v-model="currentPayChannel">
          <el-radio-button
            v-for="val in payChannelOptions"
            :key="val"
            :label="val"></el-radio-button>
        </el-radio-group>
      </div>

      <el-table
        border
        :data="orderInfo"
        style="margin-bottom:30px">
        <el-table-column
          prop="ticketName"
          label="票种名称">
        </el-table-column>
        <el-table-column
          label="游玩日期">
          <template slot-scope="">
            {{ playDate }}
          </template>
        </el-table-column>
        <el-table-column
          prop="count"
          label="数量">
        </el-table-column>
        <el-table-column
          prop="total"
          label="小计">
          <template slot-scope="scope">
            <span v-if="scope.row.discountPrice">
              {{ scope.row.total + scope.row.discountPrice * scope.row.tickets.length }} <s style="color: #f56c6c;">{{ scope.row.total }}</s>
            </span>
            <span v-else>
              {{ scope.row.total }}
            </span>
          </template>
        </el-table-column>
      </el-table>

      <el-form-item
        label="检票方式"
        class="warning">
        <span class="strong">
          {{ getCheckWayName(formData?formData.checkWay:'') }}
        </span>
      </el-form-item>

      <el-form-item
        label="总数"
        class="warning">
        <span class="strong">
          {{ totalCount }}
        </span>
      </el-form-item>

      <el-form-item
        label="总金额"
        class="warning">
        <span class="strong">
          {{ orderPrice }}
        </span> 元
      </el-form-item>

      <el-form-item
        label="付款方式"
        class="warning">
        <span class="strong">
          {{ currentPayChannel }}
        </span>
      </el-form-item>

      <br>
      <el-form-item
        label="下单备注">
        {{ createOrderRemark }}
      </el-form-item>
    </el-form>
    <div
      class="table-box"
      style="padding-top:0">
      <Collapse title="游客详情信息">
        <el-table
          stripe
          :data="tickets">
          <el-table-column
            type="index"
            width="50"
          >
          </el-table-column>

          <el-table-column
            prop="guestName"
            label="游客姓名"
          >
          </el-table-column>

          <el-table-column
            prop="guestPhone"
            label="游客电话"
          >
          </el-table-column>

          <el-table-column
            prop="guestIdentify"
            label="身份证"
            min-width="130"
          >
          </el-table-column>

          <el-table-column
            v-if="formData.checkWay===5"
            prop="ticketNo"
            label="票号"
            min-width="130"
          >
          </el-table-column>
        </el-table>
      </Collapse>
    </div>

    <div class="dialog-btn-wrap">
      打印小票
      <el-switch
        style="margin:0 50px 0 10px"
        v-model="isPrintSmallTicket">
      </el-switch>

      自动打印
      <el-switch
        style="margin:0 50px 0 10px"
        v-model="isPrint">
      </el-switch>

      <el-button @click="handleClose">
        取消
      </el-button>

      <!-- <el-button
        type="warning"
        v-if="showRefresh"
        :disabled="isRefresh"
        @click="payRefresh">
        刷新支付状态<span v-if="isRefresh">({{ countNum }})</span>
      </el-button> -->

      <el-button
        type="danger"
        v-if="scenicName==='狼山景区'||scenicName==='军山景区'"
        @click="$refs.queryPos.show()">
        查询POS机交易
      </el-button>
      <el-button
        type="primary"
        :disabled="submitDisable"
        @click="submit()"
      >
        {{ submitDisable?'正在处理':'确认出票' }}
      </el-button>
    </div>

    <ReadValueCard
      ref="readValueCard"
      @getInfo="handleValueCardPay"
      @close="submitDisable=false"></ReadValueCard>

    <QueryPos
      ref="queryPos"
      @confirm="handleQueryPos"></QueryPos>

    <!-- GlobalComponents 全局组件 -->
    <PosQrCodeReader
      ref="posQrCodeReader"
      @getQrcode="submit"></PosQrCodeReader>
    <XSCQrCodeReader
      ref="XSCQrCodeReader"
      @getQrcode="submit"></XSCQrCodeReader>
    <ValueCardInput
      ref="ValueCardInput"
      @getMemberSystemId="submit"></ValueCardInput>
    <el-dialog
      title="请扫码支付"
      :visible.sync="payCodeDialogVisible"
      :close-on-click-modal="false"
      append-to-body
      width="50%">
      <el-input
        autofocus
        ref="payCodeInputRef"
        v-model="payCode"
      ></el-input>
      <div class="dialog-footer" style="margin-top: 10px;">
        <el-button @click="cancelOnlinePay">取消</el-button>
        <el-button type="primary" @click="submitOnlinePay">确定</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
import mixin from './mixin'
import posMixin from '@/pages/common/posMixin'
import confirmMixin from '../common/confirmMixin'
import moment from 'moment'

export default {
  mixins: [mixin, posMixin, confirmMixin],
  data () {
    return {
      pageName: '散客售票'
    }
  },
  methods: {
    setParams () {
      let tickets = JSON.parse(JSON.stringify(this.tickets))
      let params = Object.assign({}, this.formData)

      params.playDateBegin = moment(this.formData.playDateBegin).format('YYYY-MM-DD')
      params.playDateEnd = moment(this.formData.playDateEnd).format('YYYY-MM-DD')

      // 一码多人,根据单张门票最大限额进行拆分
      if (params.checkWay - 0 === 2) {
        let allTickets = []

        this.orderInfo.forEach((item, index) => {
          let count = item.count
          let ticketOrderTravellers = item.tickets.map(i => {
            return {
              name: i.guestName,
              idType: i.guestIdentifyType,
              idNum: i.guestIdentify,
              mobile: i.guestPhone
            }
          })
          let obj = JSON.parse(JSON.stringify(item.tickets[0]))
          obj.ticketOrderTravellers = ticketOrderTravellers
          let originItem = JSON.stringify(obj)

          if (!this.maxNum) {
            let item = JSON.parse(originItem)
            item.checkNum = count
            item.price = this.$NP.times(item.checkNum, item.price)
            allTickets.push(item)
            return
          }

          if (count > this.maxNum) {
            let num = Math.ceil(count / this.maxNum)

            for (let i = 0; i < num - 1; i++) {
              let newItem = JSON.parse(originItem)
              newItem.checkNum = this.maxNum
              newItem.price = this.$NP.times(this.maxNum, item.price)
              allTickets.push(newItem)
            }
            let lastItem = JSON.parse(originItem)
            if (count % this.maxNum === 0) {
              lastItem.checkNum = this.maxNum
            } else {
              lastItem.checkNum = count % this.maxNum
            }
            lastItem.price = this.$NP.times(lastItem.checkNum, item.price)

            allTickets.push(lastItem)
          } else {
            let item = JSON.parse(originItem)
            item.checkNum = count
            item.price = this.$NP.times(item.checkNum, item.price)
            allTickets.push(item)
          }
        })
        console.log('allTickets', allTickets)

        params.tickets = allTickets
      } else {
        params.tickets = tickets
      }
      // params.count = this.totalCount
      params.payChannel = this.currentPayChannel
      params.price = this.orderPrice
      params.sellDevice = this.sellerDevice && this.sellerDevice.ip4

      this.params = params
    }
  }
}
</script>

<style lang="scss" scoped>
.btn-wrap {
  padding-top: 20px; text-align: center;
}
.info-wrap {
  padding: 20px 20px;
  ::v-deep .el-form-item__label{
    font-size: 16px;
  }
  ::v-deep .el-form-item{
    display: inline-block;
  }
  .strong {
    font-size: 1.8em; font-weight: bold;
  }
}
</style>

<style lang="scss">

</style>