浏览代码

1. 新增库存设置

MONSTER-ygh 11 月之前
父节点
当前提交
dcb125d0ca

+ 37 - 0
src/api/schedulingMr/schedulingMr.js

@@ -73,3 +73,40 @@ export const ionline = (data) => {
     data: data
   })
 }
+
+
+// 获取渠道库存设置信息
+export const commonConfigAllApi = (query) => {
+  return request({
+    url: '/merchant/merchantPerTimeStock/commonConfig',
+    method: 'get',
+    params: query
+  })
+}
+
+// 批量添加排期
+export const saveCommonConfigApi = (data) => {
+  return request({
+    url: '/merchant/merchantPerTimeStock/saveCommonConfig',
+    method: 'post',
+    data: data
+  })
+}
+
+// 获取渠道库存设置信息
+export const commonConfigSingleApi = (query) => {
+  return request({
+    url: '/merchant/merchantPerTimeStock/queryPerformTimeConfig',
+    method: 'get',
+    params: query
+  })
+}
+
+// 批量添加排期
+export const saveCommonConfigSingleApi = (data) => {
+  return request({
+    url: '/merchant/merchantPerTimeStock/savePerformTimeConfig',
+    method: 'post',
+    data: data
+  })
+}

+ 160 - 0
src/views/venue/schedulingMr/dialog/addStock.vue

@@ -0,0 +1,160 @@
+<!--
+ * @Description: 新增/编辑弹框
+ * @Author: Sugar.
+ * @Date: 2023-11-24 13:55:00
+ * @LastEditors: Sugar.
+ * @LastEditTime: 2023-11-24 13:55:00
+ * @FilePath: \cattle_webui\src\views\venue\schedulingMr\dialog\AddOrEditDialog.vue
+ * @Copyright: Copyright (c) 2016~2023 by Sugar., All Rights Reserved.
+-->
+<template>
+    <el-dialog
+      :title="title"
+      :visible.sync="open"
+      width="900px"
+      class="text-dia-log-class"
+      append-to-body
+      :close-on-click-modal="false"
+      @close="cancel"
+    >
+      <div class="dialog" v-loading="loading">
+        <div v-for="(item,index) in tableData" :key="index" :style="{display: 'flex',marginBottom: '10px',alignItems:tableId ? 'flex-start' : 'center'}">
+          <div :style="{display: 'flex',minWidth: '150px',justifyContent: 'flex-end',padding: tableId ? '8px 0 0 0' : '0px'}">
+            <dict-tag :options="dict.type.order_form_type" :value="item.source"/>:
+          </div>
+          <div v-if="!tableId" style="display: flex;margin-left: 20px;align-items: center;">
+            <span style="margin-right: 10px;">库存</span>
+            <el-input-number placeholder="请输入库存" v-model="tableData[index].stock" controls-position="right"></el-input-number>
+          </div>
+          <div v-if="tableId" style="margin-left: 20px;">
+            <el-radio-group v-model="tableData[index].status">
+              <div>
+                <el-radio :label="0">在售</el-radio>
+                <el-input-number placeholder="请输入库存" :disabled="tableData[index].status == 1" v-model="tableData[index].stock" controls-position="right"></el-input-number>
+              </div>
+              <div style="margin-top: 10px;">
+                <el-radio :label="1">售罄</el-radio>
+              </div>
+            </el-radio-group>
+          </div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button v-if="!loading" @click="cancel">取消</el-button>
+        <el-button
+          type="primary"
+          @click="submitForm"
+          :loading="loading"
+        >
+          <span v-if="loading">提交中...</span>
+          <span v-else>保存</span>
+        </el-button>
+      </span>
+    </el-dialog>
+  </template>
+  
+  <script>
+  import { saveCommonConfigApi,saveCommonConfigSingleApi } from "@/api/schedulingMr/schedulingMr";
+  export default {
+    name: "stockAll",
+    dicts: ['order_form_type'],
+    data() {
+      return {
+        title: "渠道默认库存设置",
+        model: "EDIT",
+        open: false,
+        loading: false,
+        tableData: [], // 票务
+        stock: {},
+        tableId: ''
+      };
+    },
+    methods: {
+      /**
+       * 打开弹框
+       * @date 2023-11-22
+       * @param {any} obj
+       * @returns {any}
+       */
+      async openDialog(title,data,id) {
+        this.open = true;
+        this.tableId = id
+        this.stock = JSON.parse(JSON.stringify(data))
+        this.tableData = JSON.parse(JSON.stringify(data.chennelStock))
+      },
+      /**  票务信息  */
+      async saveCommonConfigFun(value){
+        try {
+          let res = await saveCommonConfigApi()
+          if(res.code == 200){
+            this.tableData = res.data.stock
+          }
+        } catch (error) {      
+        }
+      },
+      /**
+       * 关闭弹框
+       * @date 2023-11-22
+       * @returns {any}
+       */
+      cancel() {
+        this.open = false;
+      },
+      /**
+       * 保存
+       * @date 2023-11-22
+       * @returns {any}
+       */
+      async submitForm() {
+        try {
+          this.loading = true;
+          let params = JSON.parse(JSON.stringify(this.stock))
+          params.chennelStock = this.tableData
+          let res = null
+          if(this.tableId) {
+            res = await saveCommonConfigSingleApi({ stock: [{...params}] });
+          }else {
+            res = await saveCommonConfigApi({ stock: [{...params}] });
+          }
+          if (res.code === 200) {
+            this.$message.success("操作成功!");
+            this.loading = false;
+            this.$emit("getList");
+            this.cancel();
+          }
+        } catch (error) {
+          this.loading = false;
+        }
+      },
+    },
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  .dialog {
+    padding: 0 30px;
+    max-height: 65vh;
+    overflow-y: auto;
+  }
+  .dialog {
+    padding: 0 30px;
+    .upload-btn {
+      width: 100px;
+      height: 100px;
+      background-color: #fbfdff;
+      border: dashed 1px #c0ccda;
+      border-radius: 5px;
+      i {
+        font-size: 30px;
+        margin-top: 20px;
+      }
+      &-text {
+        margin-top: -10px;
+      }
+    }
+    .avatar {
+      cursor: pointer;
+    }
+  }
+  </style>
+  

+ 157 - 0
src/views/venue/schedulingMr/dialog/stockAll.vue

@@ -0,0 +1,157 @@
+<!--
+ * @Description: 新增/编辑弹框
+ * @Author: Sugar.
+ * @Date: 2023-11-24 13:55:00
+ * @LastEditors: Sugar.
+ * @LastEditTime: 2023-11-24 13:55:00
+ * @FilePath: \cattle_webui\src\views\venue\schedulingMr\dialog\AddOrEditDialog.vue
+ * @Copyright: Copyright (c) 2016~2023 by Sugar., All Rights Reserved.
+-->
+<template>
+    <el-dialog
+      :title="title"
+      :visible.sync="open"
+      width="900px"
+      class="text-dia-log-class"
+      append-to-body
+      :close-on-click-modal="false"
+      @close="cancel"
+    >
+      <div 
+      class="dialog"
+      v-loading="loading"
+      >
+      <span style="padding: 0 0 10px;display: flex;font-size: 16px;font-weight: 600;">可售总库存:{{ stockAllNum }}</span>
+        <el-table
+            :data="tableData"
+            style="width: 100%">
+            <el-table-column
+                prop="seatTypeName"
+                label="座位类型">
+            </el-table-column>
+            <el-table-column
+                prop="stock"
+                label="可售库存(个)">
+            </el-table-column>
+            <el-table-column
+                prop="address"
+                label="操作项">
+                <template slot-scope="scope">
+                    <el-button type="text" size="small" @click="addStockFun(scope.row)">修改渠道库存</el-button>
+                </template>
+            </el-table-column>
+            </el-table>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="cancel">取消</el-button>
+      </span>
+      <addStock ref="addStock" @getList="commonConfigAllFun" />
+    </el-dialog>
+  </template>
+  
+  <script>
+  import { commonConfigAllApi,commonConfigSingleApi } from "@/api/schedulingMr/schedulingMr";
+  import addStock from "./addStock.vue";
+  export default {
+    name: "stockAll",
+    components: { addStock },
+    data() {
+      return {
+        title: "场次库存设置",
+        model: "EDIT",
+        open: false,
+        loading: false,
+        tableData: [], // 票务
+        tableId: '',
+        stockAllNum: 0
+      };
+    },
+    methods: {
+      
+      /**
+       * 打开弹框
+       * @date 2023-11-22
+       * @param {any} obj
+       * @returns {any}
+       */
+      async openDialog(title,row) {
+        this.open = true;
+        this.title = "场次库存设置";
+        this.loading = true;
+        this.tableId = row && row.id ? row.id : ''
+        await this.commonConfigAllFun()
+        this.loading = false;
+      },
+      /**  票务信息  */
+      async commonConfigAllFun(){
+        try {
+          this.loading = true;
+          let res = null
+          if(this.tableId) {
+            res = await commonConfigSingleApi({id: this.tableId })
+          }else {
+            res = await commonConfigAllApi()
+          }
+          
+
+          if(res.code == 200){
+            this.tableData = res.data.stock
+            let stockAllNum = 0
+            this.tableData.forEach((item,index)=>{
+              if(item.stock){
+                stockAllNum = stockAllNum + item.stock
+              }
+            })
+            this.stockAllNum = stockAllNum
+          }
+          this.loading = false;
+        } catch (error) {   
+            this.loading = false;
+            this.open = false
+        }
+      },
+      /**
+       * 关闭弹框
+       * @date 2023-11-22
+       * @returns {any}
+       */
+      cancel() {
+        this.$emit('getList')
+        this.open = false;
+      },
+      /**  场次库存设置   */
+      addStockFun(row) {
+        this.$refs["addStock"].openDialog('',row,this.tableId);
+      }
+    },
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  .dialog {
+    padding: 0 30px;
+    max-height: 65vh;
+    overflow-y: auto;
+  }
+  .dialog {
+    padding: 0 30px;
+    .upload-btn {
+      width: 100px;
+      height: 100px;
+      background-color: #fbfdff;
+      border: dashed 1px #c0ccda;
+      border-radius: 5px;
+      i {
+        font-size: 30px;
+        margin-top: 20px;
+      }
+      &-text {
+        margin-top: -10px;
+      }
+    }
+    .avatar {
+      cursor: pointer;
+    }
+  }
+  </style>
+  

+ 26 - 1
src/views/venue/schedulingMr/index.vue

@@ -97,6 +97,15 @@
           v-hasPermi="['schedulingMr:schedulingMr:batchDelete']"
         >批量删除</el-button>
       </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          size="mini"
+          @click="handleStockAll"
+          v-hasPermi="['schedulingMr:schedulingMr:stock']"
+        >渠道库存设置</el-button>
+      </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
@@ -124,6 +133,7 @@
           <span>{{ scope.row.performTimeEnd }}</span>
         </template>
       </el-table-column>
+      <el-table-column label="可售总库存" align="center" prop="saleSeatNum" />
       <el-table-column label="状态" align="center" prop="status">
         <template slot-scope="scope">
           <el-tag type="success" v-if="scope.row.status == '1'">启用</el-tag>
@@ -147,6 +157,15 @@
             @click="handleUpdate(scope.row)"
             v-hasPermi="['schedulingMr:schedulingMr:edit']"
           >修改</el-button>
+          <span v-hasPermi="['schedulingMr:schedulingMr:stock']" style="display: inline-block;">
+            <el-button
+              size="mini"
+              type="text"
+              v-if="scope.row.status == 1"
+              @click="handleStockAll(scope.row)"
+              style="margin-left: 10px;margin-right: 10px;"
+            >库存设置</el-button>
+          </span>
           <el-button
             size="mini"
             type="text"
@@ -194,6 +213,7 @@
         <el-button type="primary" @click="visibleStatus = false">确 定</el-button>
       </div>
     </el-dialog>
+    <stockAll ref="stockAll" @getList="getList" />
   </div>
 </template>
 
@@ -202,10 +222,12 @@
 import { pageList, deleteById, deleteBatchById,ionline } from '@/api/schedulingMr/schedulingMr'
 import addAndEdit from "./dialog/addAndEdit";
 import { pageList as goodsIdsListApi } from '@/api/ticketMr/ticketMr'
+import stockAll from "./dialog/stockAll.vue"
+import { row } from 'mathjs';
 export default {
   name: "SchedulingMr1",
   dicts: ['agreement_type'],
-  components: { addAndEdit },
+  components: { addAndEdit,stockAll },
   data() {
     return {
       // 遮罩层
@@ -379,6 +401,9 @@ export default {
       this.visibleStatus = true
       this.visibleType = type;
       this.newObj = obj;
+    },
+    handleStockAll(row) {
+      this.$refs["stockAll"].openDialog("新增数据",row);
     }
   }
 };

+ 1211 - 0
src/views/windowTicketSales/model/increaseViewers copy 2.vue

@@ -0,0 +1,1211 @@
+<template>
+    <el-dialog
+    title="添加观影人"
+    :visible.sync="dialogVisible"
+    width="90%"
+    :before-close="handleClose">
+    <div
+    v-loading="loading" 
+    :element-loading-text="loadingText"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)"
+    class="increase-viewers-box">
+        <div class="increase-viewers-info">
+            <el-table
+            :data="viewerList"
+            border
+            style="width: 100%">
+                <el-table-column
+                label="序号"
+                type="index"
+                width="50">
+                </el-table-column>
+                <el-table-column
+                    label="姓名"
+                    width="180">
+                    <template slot-scope="scope">
+                        <div>
+                            <span v-if="actionIndex != scope.row.id">{{ scope.row.name }}</span>
+                            <el-input size="mini" v-else v-model="tableForm.name" placeholder="请输入姓名"></el-input>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                    label="身份证号"
+                    width="250">
+                    <template slot-scope="scope">
+                        <div>
+                            <span v-if="actionIndex != scope.row.id">{{ scope.row.idcard }}</span>
+                            <el-input
+                                size="mini"
+                                v-else
+                                v-model="tableForm.idcard"
+                                placeholder="请输入身份证号"
+                                clearable
+                                style="width: 230px;"
+                                @keyup.enter.native="handleQuery"
+                            >
+                                <el-button slot="append" :loading="idcardLoading" size="mini" type="primary" @click="readCert">{{ idcardLoading ? '识别中':'识别' }}</el-button>
+                            </el-input>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                    label="座位类型">
+                    <template slot-scope="scope">
+                        <span>{{ scope.row.seatTypeName }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                    prop="date"
+                    label="座位号">
+                    <template slot-scope="scope">
+                        <span>{{ scope.row.seatName }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                    prop="date"
+                    label="价格(元)">
+                    <template slot-scope="scope">
+                        <span>{{ scope.row.salePrice }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                    label="人员类别"
+                    width="140">
+                    <template slot-scope="scope">
+                        <div>
+                             <dict-tag v-if="actionIndex != scope.row.id" :options="dict.type.personnel_type" :value="scope.row.identity"/>
+                            <el-select
+                                size="mini"
+                                v-else
+                                v-model="tableForm.identity"
+                                placeholder="请选择人员类别"
+                                clearable
+                                style="width: 100%"
+                            >
+                                <el-option
+                                v-for="dict in dict.type.personnel_type"
+                                :key="dict.value"
+                                :label="dict.label"
+                                :value="dict.value"
+                                />
+                            </el-select>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                    label="应收金额(元)">
+                    <template slot-scope="scope">
+                        <span v-if="(scope.$index!=0 && oneMany ==1 && personnelNum != 0)">{{ scope.row.realPrice }}</span>
+                        <div v-else>
+                            <span v-if="actionIndex != scope.row.id">{{ scope.row.realPrice }}</span>
+                            <el-input-number size="mini" style="width: 120px;" v-else v-model="tableForm.realPrice" controls-position="right" label="请输入应收金额(元)"></el-input-number>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                    label="备注"
+                    width="180">
+                    <template slot-scope="scope">
+                        <div>
+                            <span v-if="actionIndex != scope.row.id">{{ scope.row.remark }}</span>
+                            <el-input size="mini" v-else v-model="tableForm.remark" placeholder="请输入备注"></el-input>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                    label="操作"
+                    width="80"
+                    >
+                    <template slot-scope="scope" v-if="(scope.$index != 0 && oneMany!=2) || scope.$index == 0">
+                        <el-button
+                        size="mini"
+                        type="success"
+                        :loading="factorAuthLoading"
+                        v-if="actionIndex == scope.row.id"
+                        @click="handleSeva(scope.$index, scope.row)">{{ factorAuthLoading ? '保存中....' : '保存' }}</el-button>
+                        <el-button
+                        :disabled="!!actionIndex"
+                        size="mini"
+                        type="primary"
+                        v-if="actionIndex != scope.row.id"
+                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+                        <!-- <el-button
+                        size="mini"
+                        type="danger"
+                        @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <div style="padding: 10px 0 20px;">合计:累计观影人员{{ viewerList.length }}人,应收总额¥{{ moneyAll }}(元)</div>
+        <div>
+            <el-form 
+            :model="ruleForm" 
+            :rules="rules" 
+            ref="ruleForm11" 
+            label-width="120px" 
+            class="demo-ruleForm"
+            size="mini"
+            >
+                
+                <div style="display: flex;">
+                    <el-form-item label="用户来源 :" prop="source">
+                        <el-radio-group @input="selectMarketTeamBySourceFun" v-model="ruleForm.source">
+                            <el-radio label="7">窗口</el-radio>
+                            <el-radio label="10">美团</el-radio>
+                            <el-radio label="11">携程</el-radio>
+                            <el-radio label="13">抖音</el-radio>
+                            <el-radio label="14">猫眼</el-radio>
+                            <el-radio label="18">大麦</el-radio>
+                            <el-radio label="19">飞猪</el-radio>
+                            <!-- <el-radio label="15">去哪儿</el-radio> -->
+                            <el-radio label="16">其他</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                    <el-form-item label-width="60px" v-if="ruleForm.source && ruleForm.source == 16" label="备注 :" prop="sourceRemark">
+                        <el-input style="width: 200px;" v-model="ruleForm.sourceRemark"></el-input>
+                    </el-form-item>
+                </div>
+                <el-form-item v-if="ruleForm.source && ruleForm.source != 7" label="核销码/订单码" prop="orderIdOrQrCode">
+                    <el-input style="width: 400px;" type="textarea" :rows="2" v-model="ruleForm.orderIdOrQrCode"></el-input>
+                </el-form-item>
+                <el-form-item label="支付方式 :" prop="paymentType">
+                    <el-radio-group v-model="ruleForm.paymentType">
+                        <el-radio label="1">扫码</el-radio>
+                        <el-radio label="2">现金</el-radio>
+                        <!-- <el-radio v-if="['10','11','13','14','18','19'].includes(ruleForm.source)" label="3">对公支付</el-radio> -->
+                        <el-radio v-if="['10','11','13','14','18','19'].includes(ruleForm.source)" label="4">账户余额({{ balance }})</el-radio>
+                        <el-radio v-if="['10','11','13','14','18','19'].includes(ruleForm.source)" label="5">授信余额({{ grantQuota }})</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="应收金额 :">
+                    ¥{{ moneyAll }}元
+                </el-form-item>
+                <!-- <el-form-item label="找零计算(注:只用于找零不提交数据 找零金额 = 收到金额 - 实收金额)" v-if="ruleForm.paymentType == 2 || ruleForm.paymentType == 3" label-width="480px"></el-form-item> -->
+                <el-form-item v-if="ruleForm.paymentType == 2 || ruleForm.paymentType == 3" label="收取现金 :" prop="realPrice_1">
+                    <el-input @input="setRealPrice_1" style="width: 200px;" v-model="ruleForm.realPrice_1"></el-input>
+                    <span>元</span>
+                </el-form-item>
+                <el-form-item label="找零金额 :" v-if="ruleForm.paymentType == 2">
+                    ¥{{ ruleForm.small }}元
+                </el-form-item>
+                <el-form-item v-if="ruleForm.paymentType == 2 || ruleForm.paymentType == 3" label="实收金额 :" prop="realPrice">
+                    <el-input @input="setRealPrice" style="width: 200px;" v-model="ruleForm.realPrice"></el-input>
+                    <span>元</span>
+                </el-form-item>
+                <el-form-item label="订单备注 :" prop="remark">
+                    <el-input style="width: 400px;" type="textarea" :rows="2" maxlength="200" v-model="ruleForm.remark" show-word-limit></el-input>
+                </el-form-item>
+            </el-form>
+        </div>
+        <!--  支付过程 控制  -->
+        <div v-if="payStatus" class="increase-viewers-pay-status">
+            <div class="increase-viewers-pay-status-info" v-if="!loading">
+                <span style="font-weight: 600;font-size: 20px;">提示</span>
+                <span style="padding: 10px 0;">
+                    {{ payStatus==1 ? '生成订单失败!!!' : 
+                    payStatus==2 ? '生成订单生成成功,请点击调取扫码盒子' : 
+                    payStatus==4 ? '扫码支付失败!!!' :
+                    payStatus==5 ? '请出示付款码!!!' :
+                    payStatus==5.5 ? '扫码成功,支付中...' :
+                    payStatus==5.6 ? '扫码成功,支付中...' :
+                    payStatus==6 ? '连接扫码器失败!!!' :
+                    payStatus==7 ? '用户支付失败或未支付,请重新连接支付!!!' :
+                    payStatus==8 ? '用户支付成功,请点击打印票!!!' :
+                    payStatus==9 ? '支付超时!!!' :
+                    payStatus==3 ? '现金支付记录入库失败,请重新提交' : '未知状态' }}
+                </span>
+                <!-- 重新生成订单 1  -->
+                <div v-if="payStatus==1" style="display: flex;">
+                    <el-button @click="payStatus = null" type="success">修改信息</el-button>
+                    <el-button @click="orderInfoSubmitFun()" style="margin-left: 20px;" type="primary">重新生成订单</el-button>
+                </div>
+                <!-- 扫码支付 2 -->
+                <el-button v-if="payStatus==2" @click="vbar_open(orderId)" type="success">扫码支付</el-button>
+                <!-- 扫码支付 4 -->
+                <el-button v-if="payStatus==4" @click="vbar_open(orderId)" type="success">重新扫码支付</el-button>
+                <!-- 重新支付 3 -->
+                <el-button v-if="payStatus==3" @click="gotoCashPayFun(orderId)" type="success">重新提交入库</el-button>
+                <!-- 重新支付 6  7 -->
+                <el-button v-if="payStatus==6 || payStatus==7" @click="vbar_open(orderId)" type="success">重新连接扫码支付</el-button>
+                <!-- 打印 8  -->
+                <div v-if="payStatus==8">
+                    <el-select v-model="printListId" placeholder="选择打印机">
+                        <el-option :label="item.deviceName" :key="item.id" :value="item.id" v-for="(item,index) in printList"></el-option>
+                    </el-select>
+                    <el-button style="margin-left: 15px" @click="print" type="success">打印门票</el-button>
+                    <el-button style="margin-left: 15px" @click="goTicketingCollections" type="success">跳转取票界面</el-button>
+                </div>
+                <!-- 支付超时 9  -->
+                <div v-if="payStatus==9">
+                    <!-- <el-button @click="print" type="danger">取消支付</el-button> -->
+                    <el-button @click="orderInfoSubmitFun()" type="primary">重新扫码</el-button>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <span slot="footer" class="dialog-footer">
+        <el-button @click="handleClose()">取 消</el-button>
+        <el-button v-if="!orderId&&!payStatus" :loading="loading" type="primary" @click="submitForm('ruleForm11')">确定支付</el-button>
+    </span>
+    </el-dialog>
+</template>
+<script>
+import { 
+  orderInfoSubmit,
+  gotoMicroPay,
+  gotoCashPay,
+  gotoCorporatePay,
+  gotoBalancePay,
+  gotoQuotaPay,
+  payQuery,
+  selectRegion,
+  orderInfoCancel,
+  factorAuth,
+  selectMarketTeamBySourceApi
+ } from '@/api/windowTicketSales/ticketingSales'
+ import { pageList as getPrintListApi } from "@/api/device/pda";
+ import { printApi } from '@/api/windowTicketSales/ticketingCollection'
+ const mathM = require('mathjs')
+ const https = require('https');
+ const axios = require('axios');
+  export default {
+    dicts: ['personnel_type'],
+    data() {
+      return {
+        loading: false,
+        loadingText: '',
+        dialogVisible: false,
+        actionIndex: false,
+        tableForm: {
+            name: '', // 姓名
+            mobile: '', // 电话
+            idcard: '', // 身份证
+            identity: '', // 观影人身份
+            remark: '', // 备注信息
+            salePrice: '', // 原价
+            realPrice: '', // 实收金额
+            seatId: '', // 座位ID
+            seatName: '', // 座位名称
+            seatType: '', // 座位类型
+        },
+        ruleForm: {
+            performId: "", // 剧目ID
+            retailId: "", // 分销ID
+            goodsList: [], // 商品列表
+            auditoriumId: "", // 演出厅ID
+            performTimeId: "1", // 场次时段ID
+            seatTypeId: "", // 座位类型ID
+            source: '', // 订单来源
+            purchaser: {},// 购票人信息
+            viewerList: [], // 观影人列表
+            orderIdOrQrCode: '',
+            paymentType: '', // 支付方式
+            small: '',// 找零
+            realPrice: '', // 实收金额
+        },
+        viewerList: [], // 观影人列表
+        rules: {
+            source: [
+                { required: true, message: '请选择用户来源', trigger: ['blur','change']},
+            ],
+            orderIdOrQrCode: [
+                { required: true, message: '请输入核销码/订单码', trigger: ['blur','change']},
+            ],
+            paymentType: [
+                { required: true, message: '请选择支付方式', trigger: ['blur','change']},
+            ],
+            realPrice: [
+                { required: true, message: '请输入实收金额', trigger: ['blur','change']},
+            ],
+            sourceRemark: [
+                { required: true, message: '请输入备注', trigger: ['blur','change']},
+            ],
+        },
+        moneyAll: '',
+        payment: '',
+        payStatus: null, // 支付状态
+        orderId: null,
+        websocket_connected: false, // 是否已连接
+        websocketCtrl: null,
+        websocketData: null,
+
+        idcardLoading: false,
+        payTime: null, // 支付等待时间
+        payTimeNum: 0,
+        printListId: null,
+        printList: [],
+
+        // 身份证校验 loading
+        factorAuthLoading: false,
+
+        ifRealUser: 0,  // 散客是否实名:0-否 1-是
+        ifRealTeam: 0,   // 团购是否实名:0否 1-是
+        oneMany: 1,   // 证件要求: 1一证一票,2一证多票
+        personnelNum: 0,   // 人员要求:0-表示不限制 其他数字表示限制人数
+      
+    
+        balance: null, // 授信额度
+        grantQuota: null, // 授信使用额度
+
+        code: '', // 支付code
+        codeTime: null // 检测是websocket是否还在连接
+    };
+      
+    },
+    methods: {
+        async initData(list,params){
+            try {
+                this.code = ''
+                this.ifRealUser = params.ifRealUser  // 散客是否实名:0-否 1-是
+                this.ifRealTeam = params.ifRealTeam   // 团购是否实名:0否 1-是
+                this.oneMany = params.oneMany   // 证件要求: 1一证一票,2一证多票
+                this.personnelNum = params.personnelNum   // 人员要求:0-表示不限制 其他数字表示限制人数
+                this.websocketClear()
+                this.idcardLoading = false
+                this.ruleForm = {
+                    performId: "", // 剧目ID
+                    retailId: "", // 分销ID
+                    goodsList: [], // 商品列表
+                    auditoriumId: "", // 演出厅ID
+                    performTimeId: "", // 场次时段ID
+                    seatTypeId: "", // 座位类型ID
+                    source: '', // 订单来源
+                    purchaser: {},// 购票人信息
+                    viewerList: [], // 观影人列表
+                    orderIdOrQrCode: '',
+                    paymentType: '', // 支付方式
+                    small: '',// 实收金额
+                    realPrice: '', // 实收金额
+                    remark: '', // 订单备注
+                    sourceRemark: '', //  来源备注
+                }
+                this.payStatus = null
+                this.orderId = null
+                this.websocket_connected = false
+                this.dialogVisible = true
+                this.loading = true
+                this.actionIndex = null
+                this.viewerList = []
+                let perform = await this.selectRegionFun(params,list[0].seatTypeId)
+                console.log("perform===",perform)
+                // let perform = {
+                //     money: 1,
+                //     name: '普通票'
+                // }
+                let listCopy = []
+                let listCopy1 = []
+                list.forEach((item,index)=>{
+                    listCopy.push({
+                        id: index+1,
+                        name: '', // 姓名
+                        mobile: '', // 电话
+                        idcard: '', // 身份证
+                        identity: '', // 观影人身份
+                        remark: '', // 备注信息
+                        salePrice: this.oneMany == 2 || (this.oneMany == 1 && this.personnelNum != 0)  ? index == 0 ? perform.money  : 0 : perform.money, // 原价
+                        realPrice: this.oneMany == 2 || (this.oneMany == 1 && this.personnelNum != 0)  ? index == 0 ? perform.money  : 0 : perform.money, // 实收金额
+                        seatId: item.id, // 座位ID
+                        seatName: item.name?item.name:'暂无命名', // 座位名称
+                        seatType: perform.seatTypeId, // 座位类型
+                        seatTypeId: perform.seatTypeId,
+                        seatTypeName: perform.seatTypeName,
+                    })
+                })
+                //this.goodsList = 
+                this.viewerList = JSON.parse(JSON.stringify(listCopy))
+                this.setMoneyAll()
+                
+                console.log(this.viewerList)
+                this.loading = false
+                this.$nextTick(()=>{
+                    this.$refs.ruleForm11.clearValidate()
+                })
+            } catch (error) {
+                console.error("error====",error)
+            }
+            
+        },
+        /**  获取票务信息  */
+        async selectRegionFun(params,seatTypeId){
+            try {
+                this.loadingText = "获取票务信息中..."
+                let res = await selectRegion({
+                    "auditoriumId": params.auditoriumId, // 演艺厅ID
+                    "goodsId": params.goodsId, // 商品ID
+                    "performId": params.performId, // 上一界面节目ID
+                    "performTimeId": params.timeId, // 时段ID
+                    "retailId": "" // 分销ID
+                })
+                if(res.code == 200) {
+                    if(res.data.regionPriceList &&res.data.regionPriceList.length>0){
+                        //let obj = res.data.regionPriceList[0]
+                        let obj = {}
+                        res.data.regionPriceList.forEach((item,index)=>{
+                            if(seatTypeId == item.seatTypeId) {
+                                obj = item
+                            }
+                        }) 
+                        if(JSON.stringify(obj) != '{}'){
+                            this.ruleForm.performId = obj.performId
+                            this.ruleForm.goodsList = [
+                                {
+                                    goodsId: obj.goodsId,
+                                    salePeice: obj.salePrice,
+                                    saleNum: 1,
+                                }
+                            ]
+                            this.ruleForm.auditoriumId = obj.auditoriumId
+                            this.ruleForm.performId = obj.performId
+                            this.ruleForm.performTimeId = res.data.performTimeId
+                            this.ruleForm.seatTypeId = obj.seatTypeId
+                            return {
+                                money: obj.salePrice,
+                                //name: obj.goodsName,
+                                seatTypeId: obj.seatTypeId,
+                                seatTypeName: obj.seatTypeName,
+                            }
+                        }else {
+                            this.$message.error('存在座位未设置价格,请选择其他票!!!');
+                            this.loading = false
+                            this.dialogVisible = false
+                        }
+                        
+                    }else {
+                        this.$message.error('存在座位未设置价格,请选择其他票!!!');
+                        this.loading = false
+                        this.dialogVisible = false
+                    }
+                    console.log("res====",res)
+                }else {
+                    this.$message.error(res.msg);
+                    this.loading = false
+                    this.dialogVisible = false
+                }
+            } catch (error) {
+                console.error("error=====",error)
+                this.$message.error('价格查询出错');
+                this.loading = false
+                this.dialogVisible = false
+            }
+        },
+        /**  取消订单   */
+        async orderInfoCancelFun(type){
+            // let payStatus = this.payStatus
+            // this.payStatus = null
+            try {
+                this.loading = true
+                this.loadingText = "取消订单中..."
+                orderInfoCancel({
+                    orderId: this.orderId
+                }).then((res)=>{
+                    if(res.code==200) {
+                        if(type){ // 关闭弹窗
+                            if(this.codeTime) {
+                                clearInterval(this.codeTime)
+                            }
+                            this.orderId = null
+                            this.payStatus = null
+                            this.$emit('clearDialogVisible')
+                            this.dialogVisible = false
+                        }else {
+                            this.payStatus = 9
+                            this.loading = false
+                        }
+                        
+                    }else {
+                        
+                    }
+                }).catch(()=>{
+                    this.$message.error('订单关闭失败!!!');
+                })
+            } catch (error) {
+                
+            }
+        },
+        /** 退出窗口 */
+        handleClose(done) {
+            // if(this.payStatus==8) {
+            //     this.$message.error('请daying');
+            //     return
+            // }
+            this.$confirm('确认关闭?')
+                .then(_ => {
+                    if(this.orderId){
+                        this.orderInfoCancelFun(true)
+                    }else {
+                        this.dialogVisible = false
+                    }
+                })
+                .catch(_ => {});
+        },
+        /**  保存个人信息 */
+        handleSeva(index, row) {    
+            if(!this.tableForm.name){
+                this.$message.error('请输入姓名!!!');
+                return
+            }
+            if(!this.tableForm.idcard){
+                this.$message.error('请输入身份证号!!!');
+                return 
+            }
+            if(this.tableForm.identity && this.tableForm.identity != 0){
+                if(!this.tableForm.remark){
+                    this.$message.error('请输入备注!!!');
+                    return 
+                }
+            }
+        
+            //this.factorAuthFun(index,this.tableForm)
+            if(this.oneMany == 2 && index==0) {
+                this.$set(this.viewerList,index,JSON.parse(JSON.stringify(this.tableForm)))
+                let list = JSON.parse(JSON.stringify(this.viewerList))
+                list.forEach((item,index)=>{
+                    item.name = this.tableForm.name
+                    item.idcard = this.tableForm.idcard
+                })
+                this.viewerList = list
+            }else {
+                this.$set(this.viewerList,index,JSON.parse(JSON.stringify(this.tableForm)))
+            }
+            this.actionIndex = null
+            this.setMoneyAll()
+        },
+        /**  校验 身份证 */
+        async factorAuthFun(index, obj){
+            try {
+                this.factorAuthLoading = true
+                let res = await factorAuth({
+                    "name": obj.name,
+                    "idcard": obj.idcard
+                })
+                if(res.code == 200){
+                    this.factorAuthLoading = false
+                    if(res.data.status != 1) {
+                        this.$message.error(res.data.errReason);
+                    }else {
+                        this.$set(this.viewerList,index,JSON.parse(JSON.stringify(this.tableForm)))
+                        this.actionIndex = null
+                        this.setMoneyAll()
+                    }
+                }else {
+                    this.$message.error(res.msg);
+                    this.factorAuthLoading = false
+                }
+            } catch (error) {
+                this.$message.error(error);
+                this.factorAuthLoading = false
+            }
+        },
+        handleEdit(index, row) {
+            this.actionIndex = row.id
+            this.tableForm = JSON.parse(JSON.stringify(row))
+            
+            console.log(index, row);
+        },
+        handleDelete(index, row) {
+            console.log(index, row);
+        },
+        setMoneyAll(){
+            let moneyAll = 0
+            this.viewerList.forEach((item,index) => {
+                console.log("item.realPrice====",item.realPrice)
+                if(item.realPrice && !isNaN(Number(item.realPrice))) {
+                    moneyAll = mathM.format(Number(moneyAll) + Number(item.realPrice),10) 
+                }
+            })
+            console.log("dsfsfdsf",moneyAll)
+            this.moneyAll = moneyAll? moneyAll: ''
+            this.$set(this.ruleForm,'realPrice',this.moneyAll)
+        },
+        setRealPrice(value) {
+            // if(value && !isNaN(value)) {
+            //     this.$set(this.ruleForm,'small',mathM.format(Number(value) - Number(this.moneyAll),10) )
+            // }
+            if(this.ruleForm.realPrice_1 && !isNaN(this.ruleForm.realPrice_1) && value && !isNaN(value)) {
+                this.$set(this.ruleForm,'small',mathM.format(Number(this.ruleForm.realPrice_1) - Number(value),10) )
+            }
+        },
+        setRealPrice_1(value) {
+            if(this.ruleForm.realPrice && !isNaN(this.ruleForm.realPrice) && value && !isNaN(value)) {
+                this.$set(this.ruleForm,'small',mathM.format(Number(value) - Number(this.ruleForm.realPrice),10) )
+            }
+        },
+        /**  检查是否存在空值 */
+        checkViewerList() {
+            let flog = false
+            for(let i = 0; i < this.viewerList.length; i++){
+                let obj = this.viewerList[i]
+                if(!obj.name){
+                    this.$message.error('请填写观影人姓名!!!');
+                    flog = true
+                    break;
+                }
+                if(!obj.idcard){
+                    this.$message.error('请填写观影人身份证号!!!');
+                    flog = true
+                    break; 
+                }
+                if(obj.identity && obj.identity != 0){
+                    if(!obj.remark){
+                        this.$message.error('请填写观影人备注!!!');
+                        flog = true
+                        break; 
+                    }
+                }
+            }
+            if(this.actionIndex){
+                this.$message.error('请先保存观影影人信息!!!');
+                flog = true
+            }
+            return flog
+        },
+        submitForm(formName) {
+            this.$refs[formName].validate((valid) => {
+            if (valid) {
+                if(this.ruleForm.paymentType == 4 && (!this.balance||this.balance<=0||this.balance < this.moneyAll)) {
+                    this.$message.error('团队账户余额不足!!!');
+                    return
+                }
+                if(this.ruleForm.paymentType == 5 && (!this.grantQuota||this.grantQuota<=0||this.grantQuota < this.moneyAll)) {
+                    this.$message.error('团队授信余额不足!!!');
+                    return
+                }
+                if(!this.checkViewerList()){
+                    this.orderInfoSubmitFun()
+                }
+            } else {
+                console.log('error submit!!');
+                return false;
+            }
+            });
+        },
+        resetForm(formName) {
+            this.$refs[formName].resetFields();
+        },
+        /**  生成订单  */
+        async orderInfoSubmitFun(){
+            this.loading = true
+            try {
+                this.orderId = null
+                this.loadingText = "生成订单中..."
+                let res = await orderInfoSubmit({
+                    ...this.ruleForm,
+                    viewerList: this.viewerList
+                })
+                if(res.code == 200){
+                    this.orderId = res.data.orderId
+                    if(this.ruleForm.paymentType == 2) {
+                        this.gotoCashPayFun(this.orderId)
+                    }else if(this.ruleForm.paymentType == 3) { // 对公支付
+                        this.gotoCorporatePayFun(this.orderId)
+                    }else if(this.ruleForm.paymentType == 4){ // 账户余额
+                        this.gotoBalancePayFun(this.orderId)
+                    }else if(this.ruleForm.paymentType == 5){ // 授信余额
+                        this.gotoQuotaPayFun(this.orderId)
+                    }else {
+                        // 扫码支付
+                        this.loading = false
+                        this.payStatus = 2
+                    }
+                }else{
+                    this.$message.error('生成订单失败!!!');
+                    this.loading = false
+                    this.payStatus = 1
+                }
+            } catch (error) {
+                this.$message.error('生成订单失败!!!');
+                this.loading = false
+                this.payStatus = 1
+            }
+        },
+        
+         /** 调取 订单支付码支付  */
+         async gotoMicroPayFun(orderId,code){
+            this.loading = true
+            try {
+                this.loadingText = "订单支付中..."
+                this.payStatus = ''
+                let res = await gotoMicroPay({
+                    "orderId": orderId, // 订单编号-提交订单返回
+                    "authCode": code // 微信扫码支付-支付码
+                })
+                if(res.code == 200){
+                    this.payTimeNum = 0
+                    this.websocketClear()
+                    if(this.payTime){
+                        clearInterval(this.payTime)
+                    }
+                    this.payTime = setInterval(()=>{
+                        this.payQueryFun(this.orderId)
+                    },1500)
+                }else{
+                    this.$message.error('支付失败!!!');
+                    this.payStatus = ''
+                    this.loading = false
+                    this.payStatus = 6
+                }
+            } catch (error) {
+                this.$message.error('支付失败!!!');
+                this.loading = false
+                this.payStatus = 6
+            }
+        },
+        /**  对公支付  */
+        async gotoCorporatePayFun(orderId) {
+            this.loading = true
+            try {
+                this.loadingText = "订单入库中..."
+                let res = await gotoCorporatePay({
+                    "orderId": orderId, // 订单编号-提交订单返回
+                    "payAmount": this.ruleForm.realPrice
+                })
+                if(res.code == 200){
+                    if(this.payTime){
+                        clearInterval(this.payTime)
+                    }
+                    this.payTimeNum = 0
+                    this.payTime = setInterval(()=>{
+                        this.payQueryFun(this.orderId)
+                    },1000)
+                }else{
+                    this.$message.error('订单入库中失败!!!');
+                    this.loading = false
+                    this.payStatus = 3
+                }
+            } catch (error) {
+                this.$message.error('订单入库中失败!!!');
+                this.loading = false
+                this.payStatus = 3
+            }
+        },
+        /**  授信额度支付  */
+        async gotoQuotaPayFun(orderId) {
+            this.loading = true
+            try {
+                this.loadingText = "订单入库中..."
+                let res = await gotoQuotaPay({
+                    "orderId": orderId, // 订单编号-提交订单返回
+                })
+                if(res.code == 200){
+                    if(this.payTime){
+                        clearInterval(this.payTime)
+                    }
+                    this.payTimeNum = 0
+                    this.payTime = setInterval(()=>{
+                        this.payQueryFun(this.orderId)
+                    },1000)
+                }else{
+                    this.$message.error('订单入库中失败!!!');
+                    this.loading = false
+                    this.payStatus = 3
+                }
+            } catch (error) {
+                this.$message.error('订单入库中失败!!!');
+                this.loading = false
+                this.payStatus = 3
+            }
+        },
+        /**  余额支付  */
+        async gotoBalancePayFun(orderId) {
+            this.loading = true
+            try {
+                this.loadingText = "订单入库中..."
+                let res = await gotoBalancePay({
+                    "orderId": orderId, // 订单编号-提交订单返回
+                })
+                if(res.code == 200){
+                    if(this.payTime){
+                        clearInterval(this.payTime)
+                    }
+                    this.payTimeNum = 0
+                    this.payTime = setInterval(()=>{
+                        this.payQueryFun(this.orderId)
+                    },1000)
+                }else{
+                    this.$message.error('订单入库中失败!!!');
+                    this.loading = false
+                    this.payStatus = 3
+                }
+            } catch (error) {
+                this.$message.error('订单入库中失败!!!');
+                this.loading = false
+                this.payStatus = 3
+            }
+        },
+         /**  订单现金支付  */
+         async gotoCashPayFun(orderId){
+            this.loading = true
+            try {
+                this.loadingText = "订单入库中..."
+                let res = await gotoCashPay({
+                    "orderId": orderId, // 订单编号-提交订单返回
+                    "payAmount": this.ruleForm.realPrice
+                })
+                if(res.code == 200){
+                    if(this.payTime){
+                        clearInterval(this.payTime)
+                    }
+                    this.payTimeNum = 0
+                    this.payTime = setInterval(()=>{
+                        this.payQueryFun(this.orderId)
+                    },1000)
+                }else{
+                    this.$message.error('订单入库中失败!!!');
+                    this.loading = false
+                    this.payStatus = 3
+                }
+            } catch (error) {
+                this.$message.error('订单入库中失败!!!');
+                this.loading = false
+                this.payStatus = 3
+            }
+        },
+        // 跳转取票界面
+        goTicketingCollections(){
+            this.$router.push({
+                path:"/windowTicketSales/ticketingCollections",
+                query:{
+                    orderId: this.orderId
+                }
+            })
+        },
+
+         /**  查看支付 状态  */
+         async payQueryFun(orderId){
+            this.loading = true
+            
+            try {
+                this.payTimeNum = this.payTimeNum + 1
+                if(this.payTimeNum==15){
+                    if(this.payTime){
+                        clearInterval(this.payTime)
+                    }
+                    this.orderInfoCancelFun()
+                    return
+                }
+                if(this.ruleForm.paymentType == 2){
+                    this.loadingText = "订单入库中..."
+                }else {
+                    this.loadingText = "订单支付中..."
+                }
+                this.payStatus = ''
+                let res = await payQuery({
+                    orderId: orderId
+                })
+                if(res.code == 200){
+                    if(res.data) {
+                        if(res.data.payStatus == 0) {
+                            if(this.payTime){
+                                clearInterval(this.payTime)
+                            }
+                            if(this.ruleForm.paymentType == 2){
+                                this.$message.error('"订单入库中失败"');
+                                this.loading = false
+                                this.payStatus = 3
+                            }else {
+                                this.$message.error('用户未支付!!!');
+                                this.loading = false
+                                this.payStatus = 7
+                            }
+                            
+                        }else if(res.data.payStatus == 1) {
+                            if(this.payTime){
+                                clearInterval(this.payTime)
+                            }
+                            if(this.ruleForm.paymentType == 2){
+                                this.$message({
+                                    message: '订单入库成功',
+                                    type: 'success'
+                                });
+                                this.loading = false
+                                // this.payStatus = 8
+                                // this.getPrintListApi()
+                                this.goTicketingCollections()
+                                
+                            }else {
+                                this.$message({
+                                    message: '用户已支付成功,请打印门票',
+                                    type: 'success'
+                                });
+                                // 开始 打印
+                                this.loading = false
+                                // this.payStatus = 8
+                                // this.getPrintListApi()
+                                this.goTicketingCollections()
+                            }
+                            
+                            
+                        }else if(res.data.payStatus == 2) {
+
+                        }else if(res.data.payStatus == 3) {
+                            if(this.payTime){
+                                clearInterval(this.payTime)
+                            }
+                            if(this.ruleForm.paymentType == 2){
+                                this.$message.error('"订单入库中失败"');
+                                this.loading = false
+                                this.payStatus = 3
+                            }else {
+                                this.$message.error('用户支付失败!!!');
+                                this.loading = false
+                                this.payStatus = 7
+                            }
+                        }else if(res.data.payStatus == 4) {
+                            if(this.payTime){
+                                clearInterval(this.payTime)
+                            }
+                            
+                            if(this.ruleForm.paymentType == 2){
+                                this.$message.error('"订单入库中失败"');
+                                this.loading = false
+                                this.payStatus = 3
+                            }else {
+                                this.$message.error('支付退款!!!');
+                                this.loading = false
+                                this.payStatus = 7
+                            }
+                            
+                        }
+                    }
+                    
+                }else{
+                    this.$message.error('支付失败!!!');
+                    this.loading = false
+                    this.payStatus = 7
+                }
+                
+            } catch (error) {
+                this.$message.error('支付失败!!!');
+                this.loading = false
+                this.payStatus = 7
+            }
+        },
+
+        /**  连接VBarServer  */
+        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
+        },  
+        /**  连接结果 */
+        websocket_open_state(message){
+            console.log("连接结果 ===== ",message)
+            this.codeTime = setInterval(()=>{
+                console.log("检测是否连接")
+                if(this.websocketData.readyState != WebSocket.OPEN) {
+                    this.payStatus = 6
+                }
+            },3000)
+            //document.getElementById('wsocket').value = "已连接";
+        },
+        // 拼接字符串
+        keydownAdd(e){
+            console.log("e=====",e)
+            console.log("this.code=====",this.code)
+            if( this.payStatus == 5 && e.code.indexOf('Digit') != -1 ) {
+                this.code = this.code + e.key
+            }
+            const regex = /^(%%%)\S+(%%%)$/;
+            if(regex.test(this.code)) {
+                let codeCopy = this.code.replace("%%%", "").replace("%%%", "")
+                this.payStatus == 5.5
+                this.code = ''
+                this.gotoMicroPayFun(this.orderId,codeCopy)
+            }
+        },
+        //接收扫码完整结果处理
+        websocket_decode(code){
+            console.log("orderId=========",this.orderId )
+            console.log("code=========",code)
+            if(this.orderId && this.payStatus == 5.5 &&  regex.test(code) ) {
+                this.payStatus = 5.6 // 支付中
+                let codeCopy = code.replace("%%%", "").replace("%%%", "")
+                this.gotoMicroPayFun(this.orderId,codeCopy)
+            }else if(!code){
+                this.payStatus = 5
+                this.code = ''
+            }
+        },
+        /** 关闭通讯 */
+        websocketClear(){
+            document.removeEventListener('keydown',this.keydownAdd);
+        },
+        /**  读取身份证 */
+        readCert(){
+            this.idcardLoading = true
+            var result = "";
+            try {
+                let xmlHttp = new XMLHttpRequest();
+                let Protocol = window.location.protocol.split(':')[0];
+                //获取当前协议,并且分割字符串,得到http或者https
+                if (Protocol === 'https'){
+                    //创建请求 第一个参数是代表以post方式发送;第二个是请求端口和地址;第三个表示是否异步
+                    xmlHttp.open("POST", "http://127.0.0.1:18889/api/readCert?ReadSN=" + 0, false);	  //readCert读卡,生成正反面仿复印件	
+                }else {
+                    //创建请求 第一个参数是代表以post方式发送;第二个是请求端口和地址;第三个表示是否异步
+                    xmlHttp.open("POST", "http://127.0.0.1:18889/api/readCert?ReadSN=" + 0, false);	  //readCert读卡,生成正反面仿复印件	
+                }
+                //发送请求
+                xmlHttp.send();
+                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
+                    result = xmlHttp.responseText;
+                    xmlHttp.readyState = 1;
+                }
+            } catch (e) {
+                console.error("e====",e)
+            }
+            let obj = JSON.parse(result)
+            if(obj.resultContent && obj.resultContent.certNumber){
+                this.$set(this.tableForm,"idcard",obj.resultContent.certNumber)
+                this.$set(this.tableForm,"name",obj.resultContent.partyName)
+            }else {
+                this.$message.error('读取失败!!!');
+            }
+            
+            this.idcardLoading = false
+            //return result;
+             console.log(result,obj)
+        },
+        /** 查询打印机列表 */
+        getPrintListApi() {
+          getPrintListApi({deviceType:5,pageNum: 1,
+          pageSize: 999,})
+          .then(response => {
+              this.printList = response.data.rows;
+          }).catch((error)=>{
+            console.log("error===",error)
+          }
+          );
+        },
+        // 打印 
+        async print(list = []){
+            if(!this.printListId) {
+                this.$message.error('请选择打印机!!');
+                return
+            }
+            this.loading = true
+              this.loadingText = '打印中...'
+              this.payStatus = ''
+              try {
+                let res = await printApi({
+                  orderId: this.orderId,
+                  source: 2,
+                  deviceId: this.printListId
+                })
+                if(res.code == 200) {
+                  let url = res.data.linkIp
+                  let printInfo = res.data.printInfo
+                  this.connectPrint(url,printInfo)
+                }else {
+                  throw new Error(res)
+                }
+              } catch (error) {
+                this.loading = false
+                 this.payStatus = 8
+                console.error("error=====",error)
+              }
+          
+        },
+        /**  连接打印机  */
+        connectPrint(url,data){
+          // 创建忽略 SSL 的 axios 实例
+          const ignoreSSL = axios.create({
+            httpsAgent: new https.Agent({  
+              rejectUnauthorized: false
+            }),
+            withCredentials: true, // 跨域请求时发送Cookie
+            timeout: 60000, // 请求超时
+            headers: {
+              "Content-Type": "application/json; charset=UTF-8;"
+            }
+          });
+          ignoreSSL.post(url, 
+            { ...data }
+            ).then(()=>{
+            this.dialogVisible = false
+            this.loading = false
+          }).catch(()=>{
+            this.loading = false
+            this.payStatus = 8
+            // this.dialogVisible = false
+            // this.loading = false
+          })
+          // 在 axios 请求时,选择性忽略 SSL
+          // const agent = new https.Agent({  
+          //   rejectUnauthorized: false
+          // });
+          // axios.post(
+          //   url, 
+          //   { httpsAgent: agent,...data }
+          //   ).then(()=>{
+          //   this.dialogVisible = false
+          //   this.loading = false
+          // })
+          // .catch(()=>{
+          //   this.dialogVisible = false
+          //   this.loading = false
+          // })
+        },
+        /** 获取授信余额和账户余额  */
+        async selectMarketTeamBySourceFun(value) {
+            console.log("value===",value)
+            try {
+                if(!['10','11','13','14','18','19'].includes(value)) return
+                let res = await selectMarketTeamBySourceApi({
+                    source: value
+                })
+                this.balance = res.data.balance
+                if(res.data.grantQuota && res.data.grantUsed) {
+                    this.grantQuota = res.data.grantQuota - res.data.grantUsed
+                }else if(res.data.grantQuota) {
+                    this.grantQuota = res.data.grantQuota
+                }else {
+                    this.grantQuota = 0
+                }
+                
+            } catch (error) {
+                this.balance = null
+                this.grantQuota = null
+            }
+        }
+    }
+}
+</script>
+<style scoped lang="scss">
+.increase-viewers-box {
+    width: 100%;
+    height: calc( 100vh - 250px );
+    box-sizing: border-box;
+    overflow: hidden;
+    overflow-y: auto;
+    position: relative;
+}
+.increase-viewers-pay-status {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+    background-color: rgba(0,0,0,0.3);
+    top: 0;
+    left: 0;
+    .increase-viewers-pay-status-info {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        color: #fff;
+    } 
+} 
+
+</style>

+ 1228 - 0
src/views/windowTicketSales/model/increaseViewers copy.vue

@@ -0,0 +1,1228 @@
+<template>
+    <el-dialog
+    title="添加观影人"
+    :visible.sync="dialogVisible"
+    width="90%"
+    :before-close="handleClose">
+    <div
+    v-loading="loading" 
+    :element-loading-text="loadingText"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)"
+    class="increase-viewers-box">
+        <div class="increase-viewers-info">
+            <el-table
+            :data="viewerList"
+            border
+            style="width: 100%">
+                <el-table-column
+                label="序号"
+                type="index"
+                width="50">
+                </el-table-column>
+                <el-table-column
+                    label="姓名"
+                    width="180">
+                    <template slot-scope="scope">
+                        <div>
+                            <span v-if="actionIndex != scope.row.id">{{ scope.row.name }}</span>
+                            <el-input size="mini" v-else v-model="tableForm.name" placeholder="请输入姓名"></el-input>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                    label="身份证号"
+                    width="250">
+                    <template slot-scope="scope">
+                        <div>
+                            <span v-if="actionIndex != scope.row.id">{{ scope.row.idcard }}</span>
+                            <el-input
+                                size="mini"
+                                v-else
+                                v-model="tableForm.idcard"
+                                placeholder="请输入身份证号"
+                                clearable
+                                style="width: 230px;"
+                                @keyup.enter.native="handleQuery"
+                            >
+                                <el-button slot="append" :loading="idcardLoading" size="mini" type="primary" @click="readCert">{{ idcardLoading ? '识别中':'识别' }}</el-button>
+                            </el-input>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                    label="座位类型">
+                    <template slot-scope="scope">
+                        <span>{{ scope.row.seatTypeName }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                    prop="date"
+                    label="座位号">
+                    <template slot-scope="scope">
+                        <span>{{ scope.row.seatName }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                    prop="date"
+                    label="价格(元)">
+                    <template slot-scope="scope">
+                        <span>{{ scope.row.salePrice }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                    label="人员类别"
+                    width="140">
+                    <template slot-scope="scope">
+                        <div>
+                             <dict-tag v-if="actionIndex != scope.row.id" :options="dict.type.personnel_type" :value="scope.row.identity"/>
+                            <el-select
+                                size="mini"
+                                v-else
+                                v-model="tableForm.identity"
+                                placeholder="请选择人员类别"
+                                clearable
+                                style="width: 100%"
+                            >
+                                <el-option
+                                v-for="dict in dict.type.personnel_type"
+                                :key="dict.value"
+                                :label="dict.label"
+                                :value="dict.value"
+                                />
+                            </el-select>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                    label="应收金额(元)">
+                    <template slot-scope="scope">
+                        <span v-if="(scope.$index!=0 && oneMany ==1 && personnelNum != 0)">{{ scope.row.realPrice }}</span>
+                        <div v-else>
+                            <span v-if="actionIndex != scope.row.id">{{ scope.row.realPrice }}</span>
+                            <el-input-number size="mini" style="width: 120px;" v-else v-model="tableForm.realPrice" controls-position="right" label="请输入应收金额(元)"></el-input-number>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                    label="备注"
+                    width="180">
+                    <template slot-scope="scope">
+                        <div>
+                            <span v-if="actionIndex != scope.row.id">{{ scope.row.remark }}</span>
+                            <el-input size="mini" v-else v-model="tableForm.remark" placeholder="请输入备注"></el-input>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                    label="操作"
+                    width="80"
+                    >
+                    <template slot-scope="scope" v-if="(scope.$index != 0 && oneMany!=2) || scope.$index == 0">
+                        <el-button
+                        size="mini"
+                        type="success"
+                        :loading="factorAuthLoading"
+                        v-if="actionIndex == scope.row.id"
+                        @click="handleSeva(scope.$index, scope.row)">{{ factorAuthLoading ? '保存中....' : '保存' }}</el-button>
+                        <el-button
+                        :disabled="!!actionIndex"
+                        size="mini"
+                        type="primary"
+                        v-if="actionIndex != scope.row.id"
+                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+                        <!-- <el-button
+                        size="mini"
+                        type="danger"
+                        @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <div style="padding: 10px 0 20px;">合计:累计观影人员{{ viewerList.length }}人,应收总额¥{{ moneyAll }}(元)</div>
+        <div>
+            <el-form 
+            :model="ruleForm" 
+            :rules="rules" 
+            ref="ruleForm11" 
+            label-width="120px" 
+            class="demo-ruleForm"
+            size="mini"
+            >
+                
+                <div style="display: flex;">
+                    <el-form-item label="用户来源 :" prop="source">
+                        <el-radio-group @input="selectMarketTeamBySourceFun" v-model="ruleForm.source">
+                            <el-radio label="7">窗口</el-radio>
+                            <el-radio label="10">美团</el-radio>
+                            <el-radio label="11">携程</el-radio>
+                            <el-radio label="13">抖音</el-radio>
+                            <el-radio label="14">猫眼</el-radio>
+                            <el-radio label="18">大麦</el-radio>
+                            <el-radio label="19">飞猪</el-radio>
+                            <!-- <el-radio label="15">去哪儿</el-radio> -->
+                            <el-radio label="16">其他</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                    <el-form-item label-width="60px" v-if="ruleForm.source && ruleForm.source == 16" label="备注 :" prop="sourceRemark">
+                        <el-input style="width: 200px;" v-model="ruleForm.sourceRemark"></el-input>
+                    </el-form-item>
+                </div>
+                <el-form-item v-if="ruleForm.source && ruleForm.source != 7" label="核销码/订单码" prop="orderIdOrQrCode">
+                    <el-input style="width: 400px;" type="textarea" :rows="2" v-model="ruleForm.orderIdOrQrCode"></el-input>
+                </el-form-item>
+                <el-form-item label="支付方式 :" prop="paymentType">
+                    <el-radio-group v-model="ruleForm.paymentType">
+                        <el-radio label="1">扫码</el-radio>
+                        <el-radio label="2">现金</el-radio>
+                        <!-- <el-radio v-if="['10','11','13','14','18','19'].includes(ruleForm.source)" label="3">对公支付</el-radio> -->
+                        <el-radio v-if="['10','11','13','14','18','19'].includes(ruleForm.source)" label="4">账户余额({{ balance }})</el-radio>
+                        <el-radio v-if="['10','11','13','14','18','19'].includes(ruleForm.source)" label="5">授信余额({{ grantQuota }})</el-radio>
+                    </el-radio-group>
+                </el-form-item>
+                <el-form-item label="应收金额 :">
+                    ¥{{ moneyAll }}元
+                </el-form-item>
+                <!-- <el-form-item label="找零计算(注:只用于找零不提交数据 找零金额 = 收到金额 - 实收金额)" v-if="ruleForm.paymentType == 2 || ruleForm.paymentType == 3" label-width="480px"></el-form-item> -->
+                <el-form-item v-if="ruleForm.paymentType == 2 || ruleForm.paymentType == 3" label="收取现金 :" prop="realPrice_1">
+                    <el-input @input="setRealPrice_1" style="width: 200px;" v-model="ruleForm.realPrice_1"></el-input>
+                    <span>元</span>
+                </el-form-item>
+                <el-form-item label="找零金额 :" v-if="ruleForm.paymentType == 2">
+                    ¥{{ ruleForm.small }}元
+                </el-form-item>
+                <el-form-item v-if="ruleForm.paymentType == 2 || ruleForm.paymentType == 3" label="实收金额 :" prop="realPrice">
+                    <el-input @input="setRealPrice" style="width: 200px;" v-model="ruleForm.realPrice"></el-input>
+                    <span>元</span>
+                </el-form-item>
+                <el-form-item label="订单备注 :" prop="remark">
+                    <el-input style="width: 400px;" type="textarea" :rows="2" maxlength="200" v-model="ruleForm.remark" show-word-limit></el-input>
+                </el-form-item>
+            </el-form>
+        </div>
+        <!--  支付过程 控制  -->
+        <div v-if="payStatus" class="increase-viewers-pay-status">
+            <div class="increase-viewers-pay-status-info" v-if="!loading">
+                <span style="font-weight: 600;font-size: 20px;">提示</span>
+                <span style="padding: 10px 0;">
+                    {{ payStatus==1 ? '生成订单失败!!!' : 
+                    payStatus==2 ? '生成订单生成成功,请点击调取扫码盒子' : 
+                    payStatus==4 ? '扫码支付失败!!!' :
+                    payStatus==5 ? '请出示付款码!!!' :
+                    payStatus==5.5 ? '扫码失败,请刷新付款码,再进行扫码!!!' :
+                    payStatus==6 ? '连接扫码器失败!!!' :
+                    payStatus==7 ? '用户支付失败或未支付,请重新连接支付!!!' :
+                    payStatus==8 ? '用户支付成功,请点击打印票!!!' :
+                    payStatus==9 ? '支付超时!!!' :
+                    payStatus==3 ? '现金支付记录入库失败,请重新提交' : '未知状态' }}
+                </span>
+                <!-- 重新生成订单 1  -->
+                <div v-if="payStatus==1" style="display: flex;">
+                    <el-button @click="payStatus = null" type="success">修改信息</el-button>
+                    <el-button @click="orderInfoSubmitFun()" style="margin-left: 20px;" type="primary">重新生成订单</el-button>
+                </div>
+                <!-- 扫码支付 2 -->
+                <el-button v-if="payStatus==2" @click="vbar_open(orderId)" type="success">扫码支付</el-button>
+                <!-- 扫码支付 4 -->
+                <el-button v-if="payStatus==4" @click="vbar_open(orderId)" type="success">重新扫码支付</el-button>
+                <!-- 重新支付 3 -->
+                <el-button v-if="payStatus==3" @click="gotoCashPayFun(orderId)" type="success">重新提交入库</el-button>
+                <!-- 重新支付 6  7 -->
+                <el-button v-if="payStatus==6 || payStatus==7" @click="vbar_open(orderId)" type="success">重新连接扫码支付</el-button>
+                <!-- 打印 8  -->
+                <div v-if="payStatus==8">
+                    <el-select v-model="printListId" placeholder="选择打印机">
+                        <el-option :label="item.deviceName" :key="item.id" :value="item.id" v-for="(item,index) in printList"></el-option>
+                    </el-select>
+                    <el-button style="margin-left: 15px" @click="print" type="success">打印门票</el-button>
+                    <el-button style="margin-left: 15px" @click="goTicketingCollections" type="success">跳转取票界面</el-button>
+                </div>
+                <!-- 支付超时 9  -->
+                <div v-if="payStatus==9">
+                    <!-- <el-button @click="print" type="danger">取消支付</el-button> -->
+                    <el-button @click="orderInfoSubmitFun()" type="primary">重新扫码</el-button>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <span slot="footer" class="dialog-footer">
+        <el-button @click="handleClose()">取 消</el-button>
+        <el-button v-if="!orderId&&!payStatus" :loading="loading" type="primary" @click="submitForm('ruleForm11')">确定支付</el-button>
+    </span>
+    </el-dialog>
+</template>
+<script>
+import { 
+  orderInfoSubmit,
+  gotoMicroPay,
+  gotoCashPay,
+  gotoCorporatePay,
+  gotoBalancePay,
+  gotoQuotaPay,
+  payQuery,
+  selectRegion,
+  orderInfoCancel,
+  factorAuth,
+  selectMarketTeamBySourceApi
+ } from '@/api/windowTicketSales/ticketingSales'
+ import { pageList as getPrintListApi } from "@/api/device/pda";
+ import { printApi } from '@/api/windowTicketSales/ticketingCollection'
+ const mathM = require('mathjs')
+ const https = require('https');
+ const axios = require('axios');
+  export default {
+    dicts: ['personnel_type'],
+    data() {
+      return {
+        loading: false,
+        loadingText: '',
+        dialogVisible: false,
+        actionIndex: false,
+        tableForm: {
+            name: '', // 姓名
+            mobile: '', // 电话
+            idcard: '', // 身份证
+            identity: '', // 观影人身份
+            remark: '', // 备注信息
+            salePrice: '', // 原价
+            realPrice: '', // 实收金额
+            seatId: '', // 座位ID
+            seatName: '', // 座位名称
+            seatType: '', // 座位类型
+        },
+        ruleForm: {
+            performId: "", // 剧目ID
+            retailId: "", // 分销ID
+            goodsList: [], // 商品列表
+            auditoriumId: "", // 演出厅ID
+            performTimeId: "1", // 场次时段ID
+            seatTypeId: "", // 座位类型ID
+            source: '', // 订单来源
+            purchaser: {},// 购票人信息
+            viewerList: [], // 观影人列表
+            orderIdOrQrCode: '',
+            paymentType: '', // 支付方式
+            small: '',// 找零
+            realPrice: '', // 实收金额
+        },
+        viewerList: [], // 观影人列表
+        rules: {
+            source: [
+                { required: true, message: '请选择用户来源', trigger: ['blur','change']},
+            ],
+            orderIdOrQrCode: [
+                { required: true, message: '请输入核销码/订单码', trigger: ['blur','change']},
+            ],
+            paymentType: [
+                { required: true, message: '请选择支付方式', trigger: ['blur','change']},
+            ],
+            realPrice: [
+                { required: true, message: '请输入实收金额', trigger: ['blur','change']},
+            ],
+            sourceRemark: [
+                { required: true, message: '请输入备注', trigger: ['blur','change']},
+            ],
+        },
+        moneyAll: '',
+        payment: '',
+        payStatus: null, // 支付状态
+        orderId: null,
+        websocket_connected: false, // 是否已连接
+        websocketCtrl: null,
+        websocketData: null,
+
+        idcardLoading: false,
+        payTime: null, // 支付等待时间
+        payTimeNum: 0,
+        printListId: null,
+        printList: [],
+
+        // 身份证校验 loading
+        factorAuthLoading: false,
+
+        ifRealUser: 0,  // 散客是否实名:0-否 1-是
+        ifRealTeam: 0,   // 团购是否实名:0否 1-是
+        oneMany: 1,   // 证件要求: 1一证一票,2一证多票
+        personnelNum: 0,   // 人员要求:0-表示不限制 其他数字表示限制人数
+      
+    
+        balance: null, // 授信额度
+        grantQuota: null, // 授信使用额度
+
+        code: null, // 支付code
+        codeTime: null // 检测是websocket是否还在连接
+    };
+      
+    },
+    methods: {
+        async initData(list,params){
+            try {
+                this.ifRealUser = params.ifRealUser  // 散客是否实名:0-否 1-是
+                this.ifRealTeam = params.ifRealTeam   // 团购是否实名:0否 1-是
+                this.oneMany = params.oneMany   // 证件要求: 1一证一票,2一证多票
+                this.personnelNum = params.personnelNum   // 人员要求:0-表示不限制 其他数字表示限制人数
+                this.websocketClear()
+                this.idcardLoading = false
+                this.ruleForm = {
+                    performId: "", // 剧目ID
+                    retailId: "", // 分销ID
+                    goodsList: [], // 商品列表
+                    auditoriumId: "", // 演出厅ID
+                    performTimeId: "", // 场次时段ID
+                    seatTypeId: "", // 座位类型ID
+                    source: '', // 订单来源
+                    purchaser: {},// 购票人信息
+                    viewerList: [], // 观影人列表
+                    orderIdOrQrCode: '',
+                    paymentType: '', // 支付方式
+                    small: '',// 实收金额
+                    realPrice: '', // 实收金额
+                    remark: '', // 订单备注
+                    sourceRemark: '', //  来源备注
+                }
+                this.payStatus = null
+                this.orderId = null
+                this.websocket_connected = false
+                this.dialogVisible = true
+                this.loading = true
+                this.actionIndex = null
+                this.viewerList = []
+                let perform = await this.selectRegionFun(params,list[0].seatTypeId)
+                console.log("perform===",perform)
+                // let perform = {
+                //     money: 1,
+                //     name: '普通票'
+                // }
+                let listCopy = []
+                let listCopy1 = []
+                list.forEach((item,index)=>{
+                    listCopy.push({
+                        id: index+1,
+                        name: '', // 姓名
+                        mobile: '', // 电话
+                        idcard: '', // 身份证
+                        identity: '', // 观影人身份
+                        remark: '', // 备注信息
+                        salePrice: this.oneMany == 2 || (this.oneMany == 1 && this.personnelNum != 0)  ? index == 0 ? perform.money  : 0 : perform.money, // 原价
+                        realPrice: this.oneMany == 2 || (this.oneMany == 1 && this.personnelNum != 0)  ? index == 0 ? perform.money  : 0 : perform.money, // 实收金额
+                        seatId: item.id, // 座位ID
+                        seatName: item.name?item.name:'暂无命名', // 座位名称
+                        seatType: perform.seatTypeId, // 座位类型
+                        seatTypeId: perform.seatTypeId,
+                        seatTypeName: perform.seatTypeName,
+                    })
+                })
+                //this.goodsList = 
+                this.viewerList = JSON.parse(JSON.stringify(listCopy))
+                this.setMoneyAll()
+                
+                console.log(this.viewerList)
+                this.loading = false
+                this.$nextTick(()=>{
+                    this.$refs.ruleForm11.clearValidate()
+                })
+            } catch (error) {
+                console.error("error====",error)
+            }
+            
+        },
+        /**  获取票务信息  */
+        async selectRegionFun(params,seatTypeId){
+            try {
+                this.loadingText = "获取票务信息中..."
+                let res = await selectRegion({
+                    "auditoriumId": params.auditoriumId, // 演艺厅ID
+                    "goodsId": params.goodsId, // 商品ID
+                    "performId": params.performId, // 上一界面节目ID
+                    "performTimeId": params.timeId, // 时段ID
+                    "retailId": "" // 分销ID
+                })
+                if(res.code == 200) {
+                    if(res.data.regionPriceList &&res.data.regionPriceList.length>0){
+                        //let obj = res.data.regionPriceList[0]
+                        let obj = {}
+                        res.data.regionPriceList.forEach((item,index)=>{
+                            if(seatTypeId == item.seatTypeId) {
+                                obj = item
+                            }
+                        }) 
+                        if(JSON.stringify(obj) != '{}'){
+                            this.ruleForm.performId = obj.performId
+                            this.ruleForm.goodsList = [
+                                {
+                                    goodsId: obj.goodsId,
+                                    salePeice: obj.salePrice,
+                                    saleNum: 1,
+                                }
+                            ]
+                            this.ruleForm.auditoriumId = obj.auditoriumId
+                            this.ruleForm.performId = obj.performId
+                            this.ruleForm.performTimeId = res.data.performTimeId
+                            this.ruleForm.seatTypeId = obj.seatTypeId
+                            return {
+                                money: obj.salePrice,
+                                //name: obj.goodsName,
+                                seatTypeId: obj.seatTypeId,
+                                seatTypeName: obj.seatTypeName,
+                            }
+                        }else {
+                            this.$message.error('存在座位未设置价格,请选择其他票!!!');
+                            this.loading = false
+                            this.dialogVisible = false
+                        }
+                        
+                    }else {
+                        this.$message.error('存在座位未设置价格,请选择其他票!!!');
+                        this.loading = false
+                        this.dialogVisible = false
+                    }
+                    console.log("res====",res)
+                }else {
+                    this.$message.error(res.msg);
+                    this.loading = false
+                    this.dialogVisible = false
+                }
+            } catch (error) {
+                console.error("error=====",error)
+                this.$message.error('价格查询出错');
+                this.loading = false
+                this.dialogVisible = false
+            }
+        },
+        /**  取消订单   */
+        async orderInfoCancelFun(type){
+            // let payStatus = this.payStatus
+            // this.payStatus = null
+            try {
+                this.loading = true
+                this.loadingText = "取消订单中..."
+                orderInfoCancel({
+                    orderId: this.orderId
+                }).then((res)=>{
+                    if(res.code==200) {
+                        if(type){ // 关闭弹窗
+                            if(this.codeTime) {
+                                clearInterval(this.codeTime)
+                            }
+                            this.orderId = null
+                            this.payStatus = null
+                            this.$emit('clearDialogVisible')
+                            this.dialogVisible = false
+                        }else {
+                            this.payStatus = 9
+                            this.loading = false
+                        }
+                        
+                    }else {
+                        
+                    }
+                }).catch(()=>{
+                    this.$message.error('订单关闭失败!!!');
+                })
+            } catch (error) {
+                
+            }
+        },
+        /** 退出窗口 */
+        handleClose(done) {
+            // if(this.payStatus==8) {
+            //     this.$message.error('请daying');
+            //     return
+            // }
+            this.$confirm('确认关闭?')
+                .then(_ => {
+                    if(this.orderId){
+                        this.orderInfoCancelFun(true)
+                    }else {
+                        this.dialogVisible = false
+                    }
+                })
+                .catch(_ => {});
+        },
+        /**  保存个人信息 */
+        handleSeva(index, row) {    
+            if(!this.tableForm.name){
+                this.$message.error('请输入姓名!!!');
+                return
+            }
+            if(!this.tableForm.idcard){
+                this.$message.error('请输入身份证号!!!');
+                return 
+            }
+            if(this.tableForm.identity && this.tableForm.identity != 0){
+                if(!this.tableForm.remark){
+                    this.$message.error('请输入备注!!!');
+                    return 
+                }
+            }
+        
+            //this.factorAuthFun(index,this.tableForm)
+            if(this.oneMany == 2 && index==0) {
+                this.$set(this.viewerList,index,JSON.parse(JSON.stringify(this.tableForm)))
+                let list = JSON.parse(JSON.stringify(this.viewerList))
+                list.forEach((item,index)=>{
+                    item.name = this.tableForm.name
+                    item.idcard = this.tableForm.idcard
+                })
+                this.viewerList = list
+            }else {
+                this.$set(this.viewerList,index,JSON.parse(JSON.stringify(this.tableForm)))
+            }
+            this.actionIndex = null
+            this.setMoneyAll()
+        },
+        /**  校验 身份证 */
+        async factorAuthFun(index, obj){
+            try {
+                this.factorAuthLoading = true
+                let res = await factorAuth({
+                    "name": obj.name,
+                    "idcard": obj.idcard
+                })
+                if(res.code == 200){
+                    this.factorAuthLoading = false
+                    if(res.data.status != 1) {
+                        this.$message.error(res.data.errReason);
+                    }else {
+                        this.$set(this.viewerList,index,JSON.parse(JSON.stringify(this.tableForm)))
+                        this.actionIndex = null
+                        this.setMoneyAll()
+                    }
+                }else {
+                    this.$message.error(res.msg);
+                    this.factorAuthLoading = false
+                }
+            } catch (error) {
+                this.$message.error(error);
+                this.factorAuthLoading = false
+            }
+        },
+        handleEdit(index, row) {
+            this.actionIndex = row.id
+            this.tableForm = JSON.parse(JSON.stringify(row))
+            
+            console.log(index, row);
+        },
+        handleDelete(index, row) {
+            console.log(index, row);
+        },
+        setMoneyAll(){
+            let moneyAll = 0
+            this.viewerList.forEach((item,index) => {
+                console.log("item.realPrice====",item.realPrice)
+                if(item.realPrice && !isNaN(Number(item.realPrice))) {
+                    moneyAll = mathM.format(Number(moneyAll) + Number(item.realPrice),10) 
+                }
+            })
+            console.log("dsfsfdsf",moneyAll)
+            this.moneyAll = moneyAll? moneyAll: ''
+            this.$set(this.ruleForm,'realPrice',this.moneyAll)
+        },
+        setRealPrice(value) {
+            // if(value && !isNaN(value)) {
+            //     this.$set(this.ruleForm,'small',mathM.format(Number(value) - Number(this.moneyAll),10) )
+            // }
+            if(this.ruleForm.realPrice_1 && !isNaN(this.ruleForm.realPrice_1) && value && !isNaN(value)) {
+                this.$set(this.ruleForm,'small',mathM.format(Number(this.ruleForm.realPrice_1) - Number(value),10) )
+            }
+        },
+        setRealPrice_1(value) {
+            if(this.ruleForm.realPrice && !isNaN(this.ruleForm.realPrice) && value && !isNaN(value)) {
+                this.$set(this.ruleForm,'small',mathM.format(Number(value) - Number(this.ruleForm.realPrice),10) )
+            }
+        },
+        /**  检查是否存在空值 */
+        checkViewerList() {
+            let flog = false
+            for(let i = 0; i < this.viewerList.length; i++){
+                let obj = this.viewerList[i]
+                if(!obj.name){
+                    this.$message.error('请填写观影人姓名!!!');
+                    flog = true
+                    break;
+                }
+                if(!obj.idcard){
+                    this.$message.error('请填写观影人身份证号!!!');
+                    flog = true
+                    break; 
+                }
+                if(obj.identity && obj.identity != 0){
+                    if(!obj.remark){
+                        this.$message.error('请填写观影人备注!!!');
+                        flog = true
+                        break; 
+                    }
+                }
+            }
+            if(this.actionIndex){
+                this.$message.error('请先保存观影影人信息!!!');
+                flog = true
+            }
+            return flog
+        },
+        submitForm(formName) {
+            this.$refs[formName].validate((valid) => {
+            if (valid) {
+                if(this.ruleForm.paymentType == 4 && (!this.balance||this.balance<=0||this.balance < this.moneyAll)) {
+                    this.$message.error('团队账户余额不足!!!');
+                    return
+                }
+                if(this.ruleForm.paymentType == 5 && (!this.grantQuota||this.grantQuota<=0||this.grantQuota < this.moneyAll)) {
+                    this.$message.error('团队授信余额不足!!!');
+                    return
+                }
+                if(!this.checkViewerList()){
+                    this.orderInfoSubmitFun()
+                }
+            } else {
+                console.log('error submit!!');
+                return false;
+            }
+            });
+        },
+        resetForm(formName) {
+            this.$refs[formName].resetFields();
+        },
+        /**  生成订单  */
+        async orderInfoSubmitFun(){
+            this.loading = true
+            try {
+                this.orderId = null
+                this.loadingText = "生成订单中..."
+                let res = await orderInfoSubmit({
+                    ...this.ruleForm,
+                    viewerList: this.viewerList
+                })
+                if(res.code == 200){
+                    this.orderId = res.data.orderId
+                    if(this.ruleForm.paymentType == 2) {
+                        this.gotoCashPayFun(this.orderId)
+                    }else if(this.ruleForm.paymentType == 3) { // 对公支付
+                        this.gotoCorporatePayFun(this.orderId)
+                    }else if(this.ruleForm.paymentType == 4){ // 账户余额
+                        this.gotoBalancePayFun(this.orderId)
+                    }else if(this.ruleForm.paymentType == 5){ // 授信余额
+                        this.gotoQuotaPayFun(this.orderId)
+                    }else {
+                        // 扫码支付
+                        this.loading = false
+                        this.payStatus = 2
+                    }
+                }else{
+                    this.$message.error('生成订单失败!!!');
+                    this.loading = false
+                    this.payStatus = 1
+                }
+            } catch (error) {
+                this.$message.error('生成订单失败!!!');
+                this.loading = false
+                this.payStatus = 1
+            }
+        },
+        
+         /** 调取 订单支付码支付  */
+         async gotoMicroPayFun(orderId,code){
+            this.loading = true
+            try {
+                this.loadingText = "订单支付中..."
+                this.payStatus = ''
+                let res = await gotoMicroPay({
+                    "orderId": orderId, // 订单编号-提交订单返回
+                    "authCode": code // 微信扫码支付-支付码
+                })
+                if(res.code == 200){
+                    this.payTimeNum = 0
+                    this.websocketClear()
+                    if(this.payTime){
+                        clearInterval(this.payTime)
+                    }
+                    this.payTime = setInterval(()=>{
+                        this.payQueryFun(this.orderId)
+                    },1500)
+                }else{
+                    this.$message.error('支付失败!!!');
+                    this.payStatus = ''
+                    this.loading = false
+                    this.payStatus = 6
+                }
+            } catch (error) {
+                this.$message.error('支付失败!!!');
+                this.loading = false
+                this.payStatus = 6
+            }
+        },
+        /**  对公支付  */
+        async gotoCorporatePayFun(orderId) {
+            this.loading = true
+            try {
+                this.loadingText = "订单入库中..."
+                let res = await gotoCorporatePay({
+                    "orderId": orderId, // 订单编号-提交订单返回
+                    "payAmount": this.ruleForm.realPrice
+                })
+                if(res.code == 200){
+                    if(this.payTime){
+                        clearInterval(this.payTime)
+                    }
+                    this.payTimeNum = 0
+                    this.payTime = setInterval(()=>{
+                        this.payQueryFun(this.orderId)
+                    },1000)
+                }else{
+                    this.$message.error('订单入库中失败!!!');
+                    this.loading = false
+                    this.payStatus = 3
+                }
+            } catch (error) {
+                this.$message.error('订单入库中失败!!!');
+                this.loading = false
+                this.payStatus = 3
+            }
+        },
+        /**  授信额度支付  */
+        async gotoQuotaPayFun(orderId) {
+            this.loading = true
+            try {
+                this.loadingText = "订单入库中..."
+                let res = await gotoQuotaPay({
+                    "orderId": orderId, // 订单编号-提交订单返回
+                })
+                if(res.code == 200){
+                    if(this.payTime){
+                        clearInterval(this.payTime)
+                    }
+                    this.payTimeNum = 0
+                    this.payTime = setInterval(()=>{
+                        this.payQueryFun(this.orderId)
+                    },1000)
+                }else{
+                    this.$message.error('订单入库中失败!!!');
+                    this.loading = false
+                    this.payStatus = 3
+                }
+            } catch (error) {
+                this.$message.error('订单入库中失败!!!');
+                this.loading = false
+                this.payStatus = 3
+            }
+        },
+        /**  余额支付  */
+        async gotoBalancePayFun(orderId) {
+            this.loading = true
+            try {
+                this.loadingText = "订单入库中..."
+                let res = await gotoBalancePay({
+                    "orderId": orderId, // 订单编号-提交订单返回
+                })
+                if(res.code == 200){
+                    if(this.payTime){
+                        clearInterval(this.payTime)
+                    }
+                    this.payTimeNum = 0
+                    this.payTime = setInterval(()=>{
+                        this.payQueryFun(this.orderId)
+                    },1000)
+                }else{
+                    this.$message.error('订单入库中失败!!!');
+                    this.loading = false
+                    this.payStatus = 3
+                }
+            } catch (error) {
+                this.$message.error('订单入库中失败!!!');
+                this.loading = false
+                this.payStatus = 3
+            }
+        },
+         /**  订单现金支付  */
+         async gotoCashPayFun(orderId){
+            this.loading = true
+            try {
+                this.loadingText = "订单入库中..."
+                let res = await gotoCashPay({
+                    "orderId": orderId, // 订单编号-提交订单返回
+                    "payAmount": this.ruleForm.realPrice
+                })
+                if(res.code == 200){
+                    if(this.payTime){
+                        clearInterval(this.payTime)
+                    }
+                    this.payTimeNum = 0
+                    this.payTime = setInterval(()=>{
+                        this.payQueryFun(this.orderId)
+                    },1000)
+                }else{
+                    this.$message.error('订单入库中失败!!!');
+                    this.loading = false
+                    this.payStatus = 3
+                }
+            } catch (error) {
+                this.$message.error('订单入库中失败!!!');
+                this.loading = false
+                this.payStatus = 3
+            }
+        },
+        // 跳转取票界面
+        goTicketingCollections(){
+            this.$router.push({
+                path:"/windowTicketSales/ticketingCollections",
+                query:{
+                    orderId: this.orderId
+                }
+            })
+        },
+
+         /**  查看支付 状态  */
+         async payQueryFun(orderId){
+            this.loading = true
+            
+            try {
+                this.payTimeNum = this.payTimeNum + 1
+                if(this.payTimeNum==15){
+                    if(this.payTime){
+                        clearInterval(this.payTime)
+                    }
+                    this.orderInfoCancelFun()
+                    return
+                }
+                if(this.ruleForm.paymentType == 2){
+                    this.loadingText = "订单入库中..."
+                }else {
+                    this.loadingText = "订单支付中..."
+                }
+                this.payStatus = ''
+                let res = await payQuery({
+                    orderId: orderId
+                })
+                if(res.code == 200){
+                    if(res.data) {
+                        if(res.data.payStatus == 0) {
+                            if(this.payTime){
+                                clearInterval(this.payTime)
+                            }
+                            if(this.ruleForm.paymentType == 2){
+                                this.$message.error('"订单入库中失败"');
+                                this.loading = false
+                                this.payStatus = 3
+                            }else {
+                                this.$message.error('用户未支付!!!');
+                                this.loading = false
+                                this.payStatus = 7
+                            }
+                            
+                        }else if(res.data.payStatus == 1) {
+                            if(this.payTime){
+                                clearInterval(this.payTime)
+                            }
+                            if(this.ruleForm.paymentType == 2){
+                                this.$message({
+                                    message: '订单入库成功',
+                                    type: 'success'
+                                });
+                                this.loading = false
+                                // this.payStatus = 8
+                                // this.getPrintListApi()
+                                this.goTicketingCollections()
+                                
+                            }else {
+                                this.$message({
+                                    message: '用户已支付成功,请打印门票',
+                                    type: 'success'
+                                });
+                                // 开始 打印
+                                this.loading = false
+                                // this.payStatus = 8
+                                // this.getPrintListApi()
+                                this.goTicketingCollections()
+                            }
+                            
+                            
+                        }else if(res.data.payStatus == 2) {
+
+                        }else if(res.data.payStatus == 3) {
+                            if(this.payTime){
+                                clearInterval(this.payTime)
+                            }
+                            if(this.ruleForm.paymentType == 2){
+                                this.$message.error('"订单入库中失败"');
+                                this.loading = false
+                                this.payStatus = 3
+                            }else {
+                                this.$message.error('用户支付失败!!!');
+                                this.loading = false
+                                this.payStatus = 7
+                            }
+                        }else if(res.data.payStatus == 4) {
+                            if(this.payTime){
+                                clearInterval(this.payTime)
+                            }
+                            
+                            if(this.ruleForm.paymentType == 2){
+                                this.$message.error('"订单入库中失败"');
+                                this.loading = false
+                                this.payStatus = 3
+                            }else {
+                                this.$message.error('支付退款!!!');
+                                this.loading = false
+                                this.payStatus = 7
+                            }
+                            
+                        }
+                    }
+                    
+                }else{
+                    this.$message.error('支付失败!!!');
+                    this.loading = false
+                    this.payStatus = 7
+                }
+                
+            } catch (error) {
+                this.$message.error('支付失败!!!');
+                this.loading = false
+                this.payStatus = 7
+            }
+        },
+
+        /**  连接VBarServer  */
+        vbar_open() {
+            this.loading = true
+            this.loadingText = "连接扫码盒子中!!!"
+            this.payStatus =  null
+            this.code = null
+            this.websocketClear()
+            console.log('sdfdsfsd')
+            if (!this.websocket_connected) {
+                var host = "ws://localhost:2693";
+                this.websocketCtrl = new WebSocket(host,'ctrl');
+                this.websocketData = new WebSocket(host,'data');
+                this.websocketData.onopen = (evt) => {
+                    console.log('连接结果====',evt)
+                    this.loading = false
+                    this.payStatus = 5
+                    this.websocket_connected = true;
+                    this.websocket_open_state(evt);
+                }
+                this.websocketData.onerror = (evt) => {
+                    console.log('sdasdasd11111====',evt)
+                    this.payStatus = 6
+                    //this.vbar_open()
+                }
+                this.websocketData.onclose = (evt) => {
+                    console.log('关闭 ==== ',evt)
+                    // this.payStatus = 6
+                    //this.vbar_open()
+                }
+                this.websocketData.onmessage = (evt) => {
+                    console.log("接受消息====",evt)
+                    this.websocket_decode(evt.data);
+                }
+            }
+
+            //setTimeout(this.vbar_open(), 3000);
+        },
+        /**  连接结果 */
+        websocket_open_state(message){
+            console.log("连接结果 ===== ",message)
+            this.codeTime = setInterval(()=>{
+                console.log("检测是否连接")
+                if(this.websocketData.readyState != WebSocket.OPEN) {
+                    this.payStatus = 6
+                }
+            },3000)
+            //document.getElementById('wsocket').value = "已连接";
+        },
+        //接收扫码结果处理
+        websocket_decode(code){
+            console.log("code=========",this.orderId , code)
+            if(this.orderId && (this.payStatus==5 ||this.payStatus == 5.5)  &&code) {
+                if(this.codeTime) {
+                    clearInterval(this.codeTime)
+                }
+                this.gotoMicroPayFun(this.orderId,code)
+            }else if(!code){
+                this.payStatus = 5.5
+            }
+        },
+        /** 关闭通讯 */
+        websocketClear(){
+            if(this.codeTime) {
+                clearInterval(this.codeTime)
+            }
+            if(this.websocketCtrl){
+                this.websocketCtrl.close()
+            }
+            if(this.websocketData){
+                this.websocketData.close()
+            }
+            this.websocket_connected = false
+        },
+        /**  读取身份证 */
+        readCert(){
+            this.idcardLoading = true
+            var result = "";
+            try {
+                let xmlHttp = new XMLHttpRequest();
+                let Protocol = window.location.protocol.split(':')[0];
+                //获取当前协议,并且分割字符串,得到http或者https
+                if (Protocol === 'https'){
+                    //创建请求 第一个参数是代表以post方式发送;第二个是请求端口和地址;第三个表示是否异步
+                    xmlHttp.open("POST", "http://127.0.0.1:18889/api/readCert?ReadSN=" + 0, false);	  //readCert读卡,生成正反面仿复印件	
+                }else {
+                    //创建请求 第一个参数是代表以post方式发送;第二个是请求端口和地址;第三个表示是否异步
+                    xmlHttp.open("POST", "http://127.0.0.1:18889/api/readCert?ReadSN=" + 0, false);	  //readCert读卡,生成正反面仿复印件	
+                }
+                //发送请求
+                xmlHttp.send();
+                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
+                    result = xmlHttp.responseText;
+                    xmlHttp.readyState = 1;
+                }
+            } catch (e) {
+                console.error("e====",e)
+            }
+            let obj = JSON.parse(result)
+            if(obj.resultContent && obj.resultContent.certNumber){
+                this.$set(this.tableForm,"idcard",obj.resultContent.certNumber)
+                this.$set(this.tableForm,"name",obj.resultContent.partyName)
+            }else {
+                this.$message.error('读取失败!!!');
+            }
+            
+            this.idcardLoading = false
+            //return result;
+             console.log(result,obj)
+        },
+        /** 查询打印机列表 */
+        getPrintListApi() {
+          getPrintListApi({deviceType:5,pageNum: 1,
+          pageSize: 999,})
+          .then(response => {
+              this.printList = response.data.rows;
+          }).catch((error)=>{
+            console.log("error===",error)
+          }
+          );
+        },
+        // 打印 
+        async print(list = []){
+            if(!this.printListId) {
+                this.$message.error('请选择打印机!!');
+                return
+            }
+            this.loading = true
+              this.loadingText = '打印中...'
+              this.payStatus = ''
+              try {
+                let res = await printApi({
+                  orderId: this.orderId,
+                  source: 2,
+                  deviceId: this.printListId
+                })
+                if(res.code == 200) {
+                  let url = res.data.linkIp
+                  let printInfo = res.data.printInfo
+                  this.connectPrint(url,printInfo)
+                }else {
+                  throw new Error(res)
+                }
+              } catch (error) {
+                this.loading = false
+                 this.payStatus = 8
+                console.error("error=====",error)
+              }
+          
+        },
+        /**  连接打印机  */
+        connectPrint(url,data){
+          // 创建忽略 SSL 的 axios 实例
+          const ignoreSSL = axios.create({
+            httpsAgent: new https.Agent({  
+              rejectUnauthorized: false
+            }),
+            withCredentials: true, // 跨域请求时发送Cookie
+            timeout: 60000, // 请求超时
+            headers: {
+              "Content-Type": "application/json; charset=UTF-8;"
+            }
+          });
+          ignoreSSL.post(url, 
+            { ...data }
+            ).then(()=>{
+            this.dialogVisible = false
+            this.loading = false
+          }).catch(()=>{
+            this.loading = false
+            this.payStatus = 8
+            // this.dialogVisible = false
+            // this.loading = false
+          })
+          // 在 axios 请求时,选择性忽略 SSL
+          // const agent = new https.Agent({  
+          //   rejectUnauthorized: false
+          // });
+          // axios.post(
+          //   url, 
+          //   { httpsAgent: agent,...data }
+          //   ).then(()=>{
+          //   this.dialogVisible = false
+          //   this.loading = false
+          // })
+          // .catch(()=>{
+          //   this.dialogVisible = false
+          //   this.loading = false
+          // })
+        },
+        /** 获取授信余额和账户余额  */
+        async selectMarketTeamBySourceFun(value) {
+            console.log("value===",value)
+            try {
+                if(!['10','11','13','14','18','19'].includes(value)) return
+                let res = await selectMarketTeamBySourceApi({
+                    source: value
+                })
+                this.balance = res.data.balance
+                if(res.data.grantQuota && res.data.grantUsed) {
+                    this.grantQuota = res.data.grantQuota - res.data.grantUsed
+                }else if(res.data.grantQuota) {
+                    this.grantQuota = res.data.grantQuota
+                }else {
+                    this.grantQuota = 0
+                }
+                
+            } catch (error) {
+                this.balance = null
+                this.grantQuota = null
+            }
+        }
+    }
+}
+</script>
+<style scoped lang="scss">
+.increase-viewers-box {
+    width: 100%;
+    height: calc( 100vh - 250px );
+    box-sizing: border-box;
+    overflow: hidden;
+    overflow-y: auto;
+    position: relative;
+}
+.increase-viewers-pay-status {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+    background-color: rgba(0,0,0,0.3);
+    top: 0;
+    left: 0;
+    .increase-viewers-pay-status-info {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        color: #fff;
+    } 
+} 
+
+</style>