|
@@ -0,0 +1,323 @@
|
|
|
|
+<!--
|
|
|
|
+ * @Description:
|
|
|
|
+ * @Author: gcz
|
|
|
|
+ * @Date: 2025-02-21 14:56:50
|
|
|
|
+ * @LastEditors: gcz
|
|
|
|
+ * @LastEditTime: 2025-02-21 17:24:36
|
|
|
|
+ * @FilePath: \great_webui\src\views\windowTicketSales\rebook.vue
|
|
|
|
+ * @Copyright: Copyright (c) 2016~2025 by gcz, All Rights Reserved.
|
|
|
|
+-->
|
|
|
|
+
|
|
|
|
+<template>
|
|
|
|
+ <div class="app-container">
|
|
|
|
+ <!-- 搜索区域 -->
|
|
|
|
+ <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
|
|
|
|
+ <el-form-item label="订单号" prop="orderId">
|
|
|
|
+ <el-input v-model="queryParams.orderId" placeholder="请输入订单号" clearable />
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="购票人手机号" prop="memberMobile">
|
|
|
|
+ <el-input v-model="queryParams.memberMobile" placeholder="请输入手机号" clearable />
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="身份证号码" prop="idcard">
|
|
|
|
+ <el-input v-model="queryParams.idcard" placeholder="请输入身份证号码" clearable />
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="票务名称" prop="performName">
|
|
|
|
+ <el-input v-model="queryParams.performName" placeholder="请输入票务名称" clearable />
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="订单状态" prop="status">
|
|
|
|
+ <el-select v-model="queryParams.status" placeholder="请选择订单状态" clearable>
|
|
|
|
+ <el-option
|
|
|
|
+ v-for="dict in dict.type.order_status_type"
|
|
|
|
+ :key="dict.value"
|
|
|
|
+ :label="dict.label"
|
|
|
|
+ :value="dict.value"
|
|
|
|
+ />
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item>
|
|
|
|
+ <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
|
|
|
+ <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-form>
|
|
|
|
+
|
|
|
|
+ <!-- 数据列表 -->
|
|
|
|
+ <el-table v-loading="loading" :data="rebookList">
|
|
|
|
+ <el-table-column label="序号" type="index" width="50" align="center" />
|
|
|
|
+ <el-table-column label="姓名" align="center" prop="memberName" />
|
|
|
|
+ <el-table-column label="身份证号码" align="center" prop="idcard" />
|
|
|
|
+ <el-table-column label="购票人手机号" align="center" prop="mobile" />
|
|
|
|
+ <el-table-column label="订单号" align="center" prop="orderId" />
|
|
|
|
+ <el-table-column label="剧目名称" align="center" prop="performName" />
|
|
|
|
+ <el-table-column label="票务名称" align="center" prop="goodsName" />
|
|
|
|
+ <el-table-column label="票档" align="center" prop="seatTypeName" />
|
|
|
|
+ <el-table-column label="日期" align="center" prop="performDate" />
|
|
|
|
+ <el-table-column label="场次" align="center" prop="performInterval" />
|
|
|
|
+ <el-table-column label="下单时间" align="center" prop="createTime" />
|
|
|
|
+ <el-table-column label="支付金额" align="center" prop="realPrice" />
|
|
|
|
+ <el-table-column label="购票渠道" align="center" prop="channelType">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <dict-tag :options="dict.type.channel_type" :value="scope.row.channelType" />
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="订单状态" align="center" prop="status">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <dict-tag :options="dict.type.order_status_type" :value="scope.row.status" />
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <el-button type="primary" @click="handleRebook(scope.row)">改签</el-button>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ </el-table>
|
|
|
|
+
|
|
|
|
+ <!-- 改签对话框 -->
|
|
|
|
+ <el-dialog title="订单改签" :visible.sync="rebookDialog" width="500px" append-to-body @open="handleDialogOpen">
|
|
|
|
+ <div class="tip-box">
|
|
|
|
+ <p>温馨提示:每张票仅限改签一次,改签成功后原订单费用将原路返回退还给客户,请知悉。</p>
|
|
|
|
+ </div>
|
|
|
|
+ <el-form :model="rebookForm" label-width="80px">
|
|
|
|
+ <el-form-item label="选择日期">
|
|
|
|
+ <el-date-picker
|
|
|
|
+ v-model="rebookForm.performDate"
|
|
|
|
+ type="date"
|
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
|
+ placeholder="选择日期"
|
|
|
|
+ @change="handleDateChange"
|
|
|
|
+ />
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="选择场次">
|
|
|
|
+ <div class="interval-list">
|
|
|
|
+ <el-button
|
|
|
|
+ v-for="item in intervalList"
|
|
|
|
+ :key="item.performTimeId"
|
|
|
|
+ :type="rebookForm.performTimeId === item.performTimeId ? 'primary' : ''"
|
|
|
|
+ @click="selectInterval(item)"
|
|
|
|
+ >
|
|
|
|
+ {{ item.performInterval }}
|
|
|
|
+ </el-button>
|
|
|
|
+ </div>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-form>
|
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
|
+ <el-button @click="rebookDialog = false">取 消</el-button>
|
|
|
|
+ <el-button type="primary" @click="submitRebook" :disabled="!rebookForm.performTimeId">确认改签</el-button>
|
|
|
|
+ </div>
|
|
|
|
+ </el-dialog>
|
|
|
|
+
|
|
|
|
+ <!-- 支付扫码对话框 -->
|
|
|
|
+ <el-dialog title="扫码支付" :visible.sync="payDialog" width="400px" append-to-body>
|
|
|
|
+ <div class="pay-status">
|
|
|
|
+ <p v-if="payStatus === 5">请扫描支付码</p>
|
|
|
|
+ <p v-if="payStatus === 5.5">正在处理...</p>
|
|
|
|
+ <p v-if="payStatus === 5.6">支付中...</p>
|
|
|
|
+ <p v-if="payStatus === 6">连接断开,请重试</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
|
+ <el-button @click="cancelPay">取 消</el-button>
|
|
|
|
+ </div>
|
|
|
|
+ </el-dialog>
|
|
|
|
+
|
|
|
|
+ <!-- 改签成功提示 -->
|
|
|
|
+ <el-dialog title="改签成功" :visible.sync="successDialog" width="400px" append-to-body>
|
|
|
|
+ <div class="success-info">
|
|
|
|
+ <p>新订单号:{{ newOrderId }}</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
|
+ <el-button @click="successDialog = false">关 闭</el-button>
|
|
|
|
+ <el-button type="primary" @click="goToTicketing">去取票</el-button>
|
|
|
|
+ </div>
|
|
|
|
+ </el-dialog>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import { reSubmitPageList, getDateTimeAll, rebook } from '@/api/windowTicketSales/rebook'
|
|
|
|
+
|
|
|
|
+export default {
|
|
|
|
+ name: 'Rebook',
|
|
|
|
+ dicts: ['order_status_type', 'channel_type'],
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ loading: false,
|
|
|
|
+ showSearch: true,
|
|
|
|
+ // 查询参数
|
|
|
|
+ queryParams: {
|
|
|
|
+ orderId: undefined,
|
|
|
|
+ memberMobile: undefined,
|
|
|
|
+ idcard: undefined,
|
|
|
|
+ performName: undefined,
|
|
|
|
+ status: undefined
|
|
|
|
+ },
|
|
|
|
+ // 改签列表数据
|
|
|
|
+ rebookList: [],
|
|
|
|
+ // 改签对话框
|
|
|
|
+ rebookDialog: false,
|
|
|
|
+ // 改签表单
|
|
|
|
+ rebookForm: {
|
|
|
|
+ orderId: undefined,
|
|
|
|
+ performDate: undefined,
|
|
|
|
+ performTimeId: undefined,
|
|
|
|
+ performInterval: undefined,
|
|
|
|
+ performId: undefined,
|
|
|
|
+ auditoriumId: undefined
|
|
|
|
+ },
|
|
|
|
+ // 场次列表
|
|
|
|
+ intervalList: [],
|
|
|
|
+ // 支付相关
|
|
|
|
+ payDialog: false,
|
|
|
|
+ payStatus: null,
|
|
|
|
+ code: '',
|
|
|
|
+ websocketData: null,
|
|
|
|
+ codeTime: null,
|
|
|
|
+ // 成功对话框
|
|
|
|
+ successDialog: false,
|
|
|
|
+ newOrderId: ''
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ created() {
|
|
|
|
+ this.getList()
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ getList() {
|
|
|
|
+ this.loading = true
|
|
|
|
+ reSubmitPageList(this.queryParams).then(response => {
|
|
|
|
+ this.rebookList = response.data.rows
|
|
|
|
+ this.loading = false
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ handleQuery() {
|
|
|
|
+ this.getList()
|
|
|
|
+ },
|
|
|
|
+ resetQuery() {
|
|
|
|
+ this.$refs.queryForm.resetFields()
|
|
|
|
+ this.handleQuery()
|
|
|
|
+ },
|
|
|
|
+ handleRebook(row) {
|
|
|
|
+ console.log('row.status',row.status);
|
|
|
|
+
|
|
|
|
+ if (row.status !== 3) { // 检查订单状态是否为3
|
|
|
|
+ this.$modal.msgError('该票禁止改签请知悉')
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ this.rebookForm = {
|
|
|
|
+ orderId: row.orderId,
|
|
|
|
+ performDate: undefined,
|
|
|
|
+ performTimeId: undefined,
|
|
|
|
+ performInterval: undefined,
|
|
|
|
+ performId: row.performId,
|
|
|
|
+ auditoriumId: row.auditoriumId
|
|
|
|
+ }
|
|
|
|
+ this.rebookDialog = true
|
|
|
|
+ },
|
|
|
|
+ handleDialogOpen() {
|
|
|
|
+ const today = new Date()
|
|
|
|
+ this.rebookForm.performDate = this.formatDate(today)
|
|
|
|
+ this.handleDateChange()
|
|
|
|
+ },
|
|
|
|
+ handleDateChange() {
|
|
|
|
+ if (!this.rebookForm.performDate) return
|
|
|
|
+ getDateTimeAll({
|
|
|
|
+ performDate: this.rebookForm.performDate,
|
|
|
|
+ orderId: this.rebookForm.orderId,
|
|
|
|
+ performId: this.rebookForm.performId,
|
|
|
|
+ auditoriumId: this.rebookForm.auditoriumId
|
|
|
|
+ }).then(response => {
|
|
|
|
+ this.intervalList = response.data.list || []
|
|
|
|
+ this.rebookForm.performTimeId = undefined
|
|
|
|
+ this.rebookForm.performInterval = undefined
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ selectInterval(item) {
|
|
|
|
+ this.rebookForm.performTimeId = item.performTimeId
|
|
|
|
+ this.rebookForm.performInterval = item.performInterval
|
|
|
|
+ },
|
|
|
|
+ formatDate(date) {
|
|
|
|
+ const year = date.getFullYear()
|
|
|
|
+ const month = String(date.getMonth() + 1).padStart(2, '0')
|
|
|
|
+ const day = String(date.getDate()).padStart(2, '0')
|
|
|
|
+ return `${year}-${month}-${day}`
|
|
|
|
+ },
|
|
|
|
+ submitRebook() {
|
|
|
|
+ this.rebookDialog = false
|
|
|
|
+ this.vbar_open()
|
|
|
|
+ this.payDialog = true
|
|
|
|
+ },
|
|
|
|
+ // 支付相关方法
|
|
|
|
+ vbar_open() {
|
|
|
|
+ this.loading = true
|
|
|
|
+ this.loadingText = "连接扫码盒子中!!!"
|
|
|
|
+ this.payStatus = null
|
|
|
|
+ this.code = ''
|
|
|
|
+ this.websocketClear()
|
|
|
|
+ this.payStatus = 5
|
|
|
|
+ document.addEventListener('keydown', this.keydownAdd)
|
|
|
|
+ this.loading = false
|
|
|
|
+ },
|
|
|
|
+ keydownAdd(e) {
|
|
|
|
+ if (this.payStatus == 5 && e.key != 'Enter') {
|
|
|
|
+ this.code = this.code + e.key
|
|
|
|
+ }
|
|
|
|
+ if (e.key == 'Enter') {
|
|
|
|
+ document.removeEventListener('keydown', this.keydownAdd)
|
|
|
|
+ let codeCopy = this.code
|
|
|
|
+ this.payStatus = 5.5
|
|
|
|
+ this.code = ''
|
|
|
|
+ this.gotoMicroPayFun(this.rebookForm.orderId, codeCopy)
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ websocketClear() {
|
|
|
|
+ document.removeEventListener('keydown', this.keydownAdd)
|
|
|
|
+ },
|
|
|
|
+ cancelPay() {
|
|
|
|
+ this.payDialog = false
|
|
|
|
+ this.websocketClear()
|
|
|
|
+ },
|
|
|
|
+ gotoMicroPayFun(orderId, code) {
|
|
|
|
+ rebook({
|
|
|
|
+ orderId: orderId,
|
|
|
|
+ code: code,
|
|
|
|
+ performDate: this.rebookForm.performDate,
|
|
|
|
+ performTimeId: this.rebookForm.performTimeId,
|
|
|
|
+ performInterval: this.rebookForm.performInterval
|
|
|
|
+ }).then(response => {
|
|
|
|
+ this.payDialog = false
|
|
|
|
+ this.newOrderId = response.data
|
|
|
|
+ this.successDialog = true
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ goToTicketing() {
|
|
|
|
+ this.$router.push('/windowTicketSales/ticketingCollection')
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style scoped>
|
|
|
|
+.tip-box {
|
|
|
|
+ padding: 10px;
|
|
|
|
+ background-color: #f8f8f8;
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
+}
|
|
|
|
+.tip-box p {
|
|
|
|
+ color: #E6A23C;
|
|
|
|
+ margin: 0;
|
|
|
|
+}
|
|
|
|
+.pay-status {
|
|
|
|
+ text-align: center;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+}
|
|
|
|
+.success-info {
|
|
|
|
+ text-align: center;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+}
|
|
|
|
+.interval-list {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
+ gap: 10px;
|
|
|
|
+}
|
|
|
|
+.interval-list .el-button {
|
|
|
|
+ margin: 0;
|
|
|
|
+}
|
|
|
|
+</style>
|