|
|
@@ -0,0 +1,899 @@
|
|
|
+<!--
|
|
|
+ * @Description: 详情弹框
|
|
|
+ * @Author: Sugar.
|
|
|
+ * @Date: 2023-11-24 13:55:00
|
|
|
+ * @LastEditors: gcz
|
|
|
+ * @LastEditTime: 2024-03-15 15:13:27
|
|
|
+ * @FilePath: \great_webui\src\views\order\groupBuyingMr\dialog\details.vue
|
|
|
+ * @Copyright: Copyright (c) 2016~2023 by Sugar., All Rights Reserved.
|
|
|
+-->
|
|
|
+<template>
|
|
|
+ <el-dialog
|
|
|
+ title="订单详情"
|
|
|
+ :visible.sync="open"
|
|
|
+ width="96%"
|
|
|
+ append-to-body
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ @close="cancel"
|
|
|
+ >
|
|
|
+ <div v-loading="loading" class="dialog dialog-bbb" v-if="form">
|
|
|
+ <div v-loading="loading_form"
|
|
|
+ element-loading-text="加载详情中...">
|
|
|
+ <!-- 基础信息 -->
|
|
|
+ <div class="title-class" style="margin-top: 0">基础信息</div>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="grid-content bg-purple item-class">团队名称: <span>{{ form.teamName || ''}}</span></div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="grid-content bg-purple item-class">团队类型: <span><dict-tag style="display: inline-block" :options="dict.type.team_type" :value="form.teamType"/></span></div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="grid-content bg-purple item-class">预约场馆: <span>{{ form.theatreName || '' }}</span></div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="grid-content bg-purple item-class">预约演出厅: <span>{{ form.auditoriumName || '' }}</span></div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="grid-content bg-purple item-class">预约剧目: <span>{{ form.performName || '' }}</span></div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="grid-content bg-purple item-class">票务名称: <span>{{ form.goodsName || '' }}</span></div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="grid-content bg-purple item-class">座位类型: <span>{{ form.seatTypeName || '' }}</span></div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="grid-content bg-purple item-class">团购单价: <span v-if="form.price">￥{{ form.price || '' }}/人</span></div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="grid-content bg-purple item-class">预约时间: <span v-if="form.performDate">{{ form.performDate + " " || '' }}{{ form.performTimeStart +' --' || '' }}{{ form.performTimeEnd || '' }}</span></div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="grid-content bg-purple item-class">报名时间: <span>{{ form.applyTime || '' }}</span></div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="grid-content bg-purple item-class">客户负责人: <span>{{ form.teamContact || '' }}</span></div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="grid-content bg-purple item-class">销售员: <span>{{ form.salerPerson || '' }}</span></div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="grid-content bg-purple item-class">联系电话: <span>{{ form.teamMobile || '' }}</span></div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="grid-content bg-purple item-class">带队负责人姓名: <span>{{ form.linkName || '' }}</span></div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="grid-content bg-purple item-class">带队负责人联系电话: <span>{{ form.linkPhone || '' }}</span></div>
|
|
|
+ </el-col>
|
|
|
+ <!-- <el-col :span="12">
|
|
|
+ <div class="grid-content bg-purple item-class">支付总额: <span>￥{{ form.orderPrice || '' }}</span></div>
|
|
|
+ </el-col> -->
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="grid-content bg-purple item-class">应收金额: <span>￥{{ form.orderPrice || form.orderPrice == 0 ? form.orderPrice : '' }}</span></div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="grid-content bg-purple item-class">实收金额: <span>￥{{ form.realPrice || form.realPrice == 0 ? form.realPrice : '' }}</span></div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="grid-content bg-purple item-class">团购人数: <span>{{ form.quantity || '' }}</span></div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="grid-content bg-purple item-class">支付时间: <span>{{ form.payTime || '' }}</span></div>
|
|
|
+ </el-col>
|
|
|
+ <!-- <el-col :span="12">
|
|
|
+ <div class="grid-content bg-purple item-class">支付方式: <span>{{ payWayList[form.payWay] || '' }}</span></div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="grid-content bg-purple item-class">订单状态: <span>{{ statusList[form.status] || '' }}</span></div>
|
|
|
+ </el-col> -->
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="grid-content bg-purple item-class" style="display: flex;">支付方式: <span
|
|
|
+ style="display: block;margin-left: 5px;"><dict-tag :options="dict.type.pay_way_type"
|
|
|
+ :value="form.payWay" /></span></div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="grid-content bg-purple item-class" style="display: flex;">订单状态: <span
|
|
|
+ style="display: block;margin-left: 5px;"><dict-tag :options="dict.type.order_status_type"
|
|
|
+ :value="form.status" /></span></div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="grid-content bg-purple item-class" style="display: flex;">是否成功开票: <span style="display: block;margin-left: 5px;">{{ form.ifSuccessInvoice=='1'?'是':'否' }}</span></div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 对公支付信息 -->
|
|
|
+ <div v-if="form.payWay=='corporate'&&form.status>0&&form.corporate">
|
|
|
+ <div class="title-class">对公支付信息</div>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <div class="voucher-list">
|
|
|
+ <el-image
|
|
|
+ v-for="(item,index) in voucherUrl" :key="index"
|
|
|
+ style="width: 100px; height: 100px"
|
|
|
+ :src="item"
|
|
|
+ :preview-src-list="voucherUrl">
|
|
|
+ </el-image>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col class="pay-type-remark" :span="24">
|
|
|
+ 对公支付备注：{{corporateRremark}}
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 观影人员信息 -->
|
|
|
+ <div class="title-class" style="display: flex;">
|
|
|
+ 观影人员信息:
|
|
|
+ <el-upload
|
|
|
+ class="upload-demo"
|
|
|
+ :action="uploadObj.url"
|
|
|
+ :headers="uploadObj.headers"
|
|
|
+ :auto-upload="false"
|
|
|
+ :disabled="uploadLoading"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-change="beforeAvatarUpload">
|
|
|
+ <el-button size="small" type="primary" :loading="uploadLoading">{{formCopy.viewerList && formCopy.viewerList.length == 0 ? '导入excel' : '重新导入excel'}}</el-button>
|
|
|
+ <div slot="tip" class="el-upload__tip">
|
|
|
+ 上传excel文件，导入模板表头序号、姓名、身份证号码
|
|
|
+ <i @click="handleExport" style="color: #1890ff;cursor: pointer;">下载模板</i>
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-table ref="tables" :data="formCopy.viewerList" border>
|
|
|
+ <el-table-column label="序号" align="center" type="index" width="60"></el-table-column>
|
|
|
+ <el-table-column label="姓名" align="center" prop="name" />
|
|
|
+ <el-table-column label="身份证号码" align="center" prop="cardId" />
|
|
|
+ </el-table>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="dialog-bbb_2" v-loading="loading_seta" element-loading-text="加载座位图中...">
|
|
|
+ <div class="seat-tool-box">
|
|
|
+ <span class="demonstration">座位大小</span>
|
|
|
+ <div class="seat-tool-box-slider">
|
|
|
+ <el-slider v-model="scaleNum" :min="30" :max="100"></el-slider>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;margin-left: 20px;" v-if="seatMapList && JSON.stringify(seatMapList) != '{}'">
|
|
|
+ <div>座位余量：</div>
|
|
|
+ <div :key="index" v-for="(item, index) in seatTypeList" style="margin-left: 10px;align-items: center;">
|
|
|
+ <span :style="{ color: item.color ? item.color : 'none' }">{{ item.name ? (item.name + '(剩余:' + (item.num || 0) + ')')
|
|
|
+ :
|
|
|
+ '暂未命名'}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="seat-box" :style="{ '--scaleNum': scaleNum / 100 }">
|
|
|
+ <!-- 选择座位 -->
|
|
|
+ <div class="seat-list-box">
|
|
|
+ <!-- 座位排版 -->
|
|
|
+ <div id="seatbox-me" ref="seatbox" class="dialogss">
|
|
|
+ <div class="dialogss-box"
|
|
|
+ :style="{ width: width * (scaleNum / 100) + 'px', margin: justifyContent ? 'auto' : 'unset' }">
|
|
|
+ <div style="width: 100%;position: absolute;" class="seat-box-class clearfix" v-if="seatMapList">
|
|
|
+ <div class="seat-item-class-box" v-for="(item1, index1) in seatMapListKey" :key="item1.key">
|
|
|
+ <div class="seat-item-class"
|
|
|
+ :class="setSeatClass(item)"
|
|
|
+ v-for="(item, index) in seatMapList[item1.key]"
|
|
|
+ :style="{ backgroundColor: item.color ? item.color : 'none' }"
|
|
|
+ :key="index">
|
|
|
+ <p class="text-class">{{ item.status != 1 ? '不可售' : (item.name ? item.name : '暂未命名') }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 5px; margin-left: 30px;display: flex;">
|
|
|
+ <!-- <div style="flex-shrink: 0;">
|
|
|
+ 已勾选：{{ seatSelectList.length }}个座位
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="submitForm"
|
|
|
+ :disabled="!formCopy.viewerList || formCopy.viewerList.length == 0"
|
|
|
+ v-loading="loading"
|
|
|
+ element-loading-text="拼命加载中..."
|
|
|
+ element-loading-spinner="el-icon-loading"
|
|
|
+ element-loading-background="rgba(0, 0, 0, 0.8)"
|
|
|
+ >
|
|
|
+ <span v-if="loading">提交中...</span>
|
|
|
+ <span v-else>确认修改</span>
|
|
|
+ </el-button>
|
|
|
+ <el-button @click="cancel">取消</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="cancel">关闭</el-button>
|
|
|
+ </span> -->
|
|
|
+
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { saveAndEdit, uploadExcel, downloadModel, } from "@/api/team/applicationMr";
|
|
|
+import { getSelectById } from '@/api/order/groupBuyingMr'
|
|
|
+import { querySeatList } from '@/api/team/applicationMr'
|
|
|
+import { pageList as getSeatType } from '@/api/seatTypeMr/seatTypeMr'
|
|
|
+import { getToken } from "@/utils/auth";
|
|
|
+export default {
|
|
|
+ name: "detailsDia",
|
|
|
+ dicts: ['order_form_type', 'order_status_type', 'pay_way_type', 'personnel_type'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ title: "编辑",
|
|
|
+ model: "EDIT",
|
|
|
+ open: false,
|
|
|
+ loading: false,
|
|
|
+ form: {
|
|
|
+ id: undefined
|
|
|
+ },
|
|
|
+ corporateRremark:'',
|
|
|
+ performerVisible: false,
|
|
|
+ performerList: [],
|
|
|
+ refund: false,
|
|
|
+ statusList: {
|
|
|
+ 0: '待支付',
|
|
|
+ 2: '超时取消',
|
|
|
+ 3: '支付完成，待使用',
|
|
|
+ 4: '退款中',
|
|
|
+ 5: '己退款',
|
|
|
+ 6: '退款失败',
|
|
|
+ 7: '己使用',
|
|
|
+ 8: '己超期',
|
|
|
+ 9: '关闭',
|
|
|
+ },
|
|
|
+ payWayList: {
|
|
|
+ 'cahsh': '现金',
|
|
|
+ 'wecaht.applet': '微信小程序支付',
|
|
|
+ 'alipay': '支付宝OTA',
|
|
|
+ 'wecaht.h5': '微信公众号支付',
|
|
|
+ 'meituan': '美团支付',
|
|
|
+ 'corporate': '对公支付',
|
|
|
+ },
|
|
|
+ sourceList: {
|
|
|
+ 1: '小程序',
|
|
|
+ 2: '公众号',
|
|
|
+ 3: '美团',
|
|
|
+ 4: '携程',
|
|
|
+ 5: '团购',
|
|
|
+ },
|
|
|
+ dataList: [],
|
|
|
+ voucherUrl:[],
|
|
|
+
|
|
|
+
|
|
|
+ merchantTheatreAuditoriumListS: [], // 演出厅
|
|
|
+ merchantPerformTimeListS: [], // 场次
|
|
|
+ querySeatListS: [], // 座位
|
|
|
+ goodsPageListS: [], // 票务
|
|
|
+ goodsPageListSAll: [], // 票务全部
|
|
|
+ setList: [],
|
|
|
+ seatMapList: {},
|
|
|
+ seatMapListKey: [], // key
|
|
|
+ seatSelectList: [],
|
|
|
+
|
|
|
+ lockOrUnLockLoading: false,
|
|
|
+
|
|
|
+ performId: '',// 剧目ID
|
|
|
+ scaleNum: 30,
|
|
|
+
|
|
|
+ width: 0,
|
|
|
+ justifyContent: false,
|
|
|
+ activeName: 'first',
|
|
|
+ seatTypeList: [],
|
|
|
+ loading_form: false,// 加载表单
|
|
|
+ loading_seta: false, // 加载座位
|
|
|
+
|
|
|
+ uploadLoading: false,
|
|
|
+ uploadObj: {
|
|
|
+ url: process.env.VUE_APP_UPLOAD_FILE_API + "/upload/single/minio",
|
|
|
+ Headers: { Authorization: "Bearer " + getToken() },
|
|
|
+ },
|
|
|
+ formCopy: {}
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getSeatTypeList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
+ * 打开弹框
|
|
|
+ * @date 2023-11-22
|
|
|
+ * @param {any} obj
|
|
|
+ * @returns {any}
|
|
|
+ */
|
|
|
+ openDialog(title, obj, type) {
|
|
|
+ this.open = true;
|
|
|
+ this.querySeatListS = [];
|
|
|
+ this.setList = [];
|
|
|
+ this.seatSelectList = [];
|
|
|
+ this.getSelectByIdApi(obj);
|
|
|
+ },
|
|
|
+ /** 获取详情 */
|
|
|
+ async getSelectByIdApi(row) {
|
|
|
+ try {
|
|
|
+ //this.loading = true
|
|
|
+ this.loading_form = true// 加载表单
|
|
|
+ this.loading_seta = true // 加载座位
|
|
|
+ const id = row.id
|
|
|
+ let res = await getSelectById(id)
|
|
|
+ this.seatSelectList = res.data.viewersOrderList
|
|
|
+ this.form = res.data;
|
|
|
+ this.formCopy = {
|
|
|
+ "theatreId": res.data.theatreId,
|
|
|
+ "theatreName": res.data.theatreName,
|
|
|
+ "auditoriumId": res.data.auditoriumId,
|
|
|
+ "auditoriumName": res.data.auditoriumName,
|
|
|
+ "performId": res.data.performId,
|
|
|
+ "performName": res.data.performName,
|
|
|
+ "seatTypeId": res.data.seatTypeId,
|
|
|
+ "seatTypeName": res.data.seatTypeName,
|
|
|
+ "goodsId": res.data.goodsId,
|
|
|
+ "goodsName": res.data.goodsName,
|
|
|
+ "performTimeId": res.data.performTimeId,
|
|
|
+ "price": res.data.price,
|
|
|
+ "priceTotal": res.data.priceTotal,
|
|
|
+ "viewerList": [],
|
|
|
+ "linkName": res.data.linkName,
|
|
|
+ "linkPhone": res.data.linkPhone
|
|
|
+ }
|
|
|
+ if(res.data.corporate){
|
|
|
+ this.voucherUrl = res.data.corporate.voucherUrl.split(',')||[];
|
|
|
+ this.corporateRremark = res.data.corporate.remark;
|
|
|
+ }
|
|
|
+ this.loading_form = false// 加载表单
|
|
|
+ let res1 = await querySeatList({
|
|
|
+ auditoriumId: res.data.auditoriumId,
|
|
|
+ //seatTypeId: res.data.seatTypeId,
|
|
|
+ timeId: res.data.performTimeId,
|
|
|
+ })
|
|
|
+ this.querySeatListS = res1.data;
|
|
|
+ this.setList = res1.data;
|
|
|
+ if (this.setList && this.setList.length > 0) {
|
|
|
+ this.setSeatMapListCopy(this.setList);
|
|
|
+ }
|
|
|
+ this.loading_seta = false// 加载表单
|
|
|
+ this.loading = false
|
|
|
+ } catch (error) {
|
|
|
+ this.loading = false
|
|
|
+ this.loading_form = false// 加载表单
|
|
|
+ this.loading_seta = false // 加载座位
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 关闭弹框
|
|
|
+ * @date 2023-11-22
|
|
|
+ * @returns {any}
|
|
|
+ */
|
|
|
+ cancel() {
|
|
|
+ this.open = false;
|
|
|
+ },
|
|
|
+ // 设置座位集合
|
|
|
+ setSeatMapListCopy(list) {
|
|
|
+ if (list && list.length > 0) {
|
|
|
+ let listCopy = {}
|
|
|
+ let lisyCopy1 = {}
|
|
|
+ let listNum = JSON.parse(JSON.stringify(this.seatTypeList))
|
|
|
+ listNum.forEach((item, index) => {
|
|
|
+ listNum[index]['num'] = 0
|
|
|
+ })
|
|
|
+ list.forEach(item => {
|
|
|
+ item.isDisabled = (item.occupyStatus != null && (item.occupyStatus == 0 || item.occupyStatus == 1) ? true : false); // 座位是否已被选择
|
|
|
+ item.isSelect = this.setIsSelect(item);
|
|
|
+ if (item.rowNo) {
|
|
|
+ listNum.forEach((item1, index) => {
|
|
|
+ if (item1.id == item.seatTypeId && item.status == 1 && !item.occupyStatus) {
|
|
|
+ listNum[index]['num'] = listNum[index]['num'] + 1
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (listCopy['my' + item.rowNo]) {
|
|
|
+ listCopy['my' + item.rowNo].push(item)
|
|
|
+ } else {
|
|
|
+ listCopy['my' + item.rowNo] = [item]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.seatTypeList = JSON.parse(JSON.stringify(listNum))
|
|
|
+ let width = 0
|
|
|
+ let flog = 0
|
|
|
+ let seatMapListKey = []
|
|
|
+ Object.keys(listCopy).forEach((item) => {
|
|
|
+ if (listCopy[item].length > flog) {
|
|
|
+ flog = listCopy[item].length
|
|
|
+ }
|
|
|
+ seatMapListKey.push({
|
|
|
+ key: item,
|
|
|
+ sort: Number(item.replace('my', ''))
|
|
|
+ })
|
|
|
+ })
|
|
|
+ seatMapListKey.sort((a, b) => {
|
|
|
+ return a.sort - b.sort
|
|
|
+ })
|
|
|
+ this.seatMapListKey = seatMapListKey
|
|
|
+ console.log("seatMapListKey=====", seatMapListKey)
|
|
|
+ this.width = 70 * flog
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (this.$refs.seatbox) {
|
|
|
+ var ele = document.getElementById('seatbox-me');
|
|
|
+ console.log(ele.getBoundingClientRect().width); // 100
|
|
|
+ if (this.width < ele.getBoundingClientRect().width) {
|
|
|
+ this.justifyContent = true
|
|
|
+ } else {
|
|
|
+ //this.justifyContent = false
|
|
|
+ this.justifyContent = true
|
|
|
+ }
|
|
|
+ //this.$refs.seatbox.scrollTo(this.width/4,0)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ console.log("list====", listCopy)
|
|
|
+ this.seatMapList = JSON.parse(JSON.stringify(listCopy))
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setIsSelect(item) {
|
|
|
+ if (!this.seatSelectList || this.seatSelectList.length == 0) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ let flog = false
|
|
|
+ this.seatSelectList.forEach((item1, index1) => {
|
|
|
+ if (item.id == item1.seatId) {
|
|
|
+ flog = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return flog
|
|
|
+ },
|
|
|
+ /** 获取座位类型 说明 */
|
|
|
+ getSeatTypeList() {
|
|
|
+ getSeatType({
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 999,
|
|
|
+ })
|
|
|
+ .then(response => {
|
|
|
+ this.seatTypeList = response.data.rows;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 座位状态 展示 */
|
|
|
+ setSeatClass(item){
|
|
|
+ let srt =
|
|
|
+ this.setIsSelect(item)?'purchased-status':
|
|
|
+ item.occupyStatus == 0 ?
|
|
|
+ item.occupyOrderId?'order-occupy-status':
|
|
|
+ 'occupy-status' :
|
|
|
+ item.occupyStatus == 1 ? 'occupy-status-no' :
|
|
|
+ item.isDisabled || item.status != 1 ? 'disabled-class' :
|
|
|
+ item.isSelect ? 'select-class' : ''
|
|
|
+ console.log("srt=====",srt)
|
|
|
+ return srt
|
|
|
+ },
|
|
|
+ /** 导出按钮操作 */
|
|
|
+ async handleExport() {
|
|
|
+ //this.downloadGet('member/marketTeamApply/downTeamApplyTemplate', {}, `观影人员上传模板_${new Date().getTime()}.xlsx`)
|
|
|
+ try {
|
|
|
+ let res = await downloadModel()
|
|
|
+ let fileName = `观影人员上传模板_${new Date().getTime()}.xlsx`
|
|
|
+ let blob=new Blob([res])
|
|
|
+ let href=window.URL.createObjectURL(blob)
|
|
|
+ // 创建下载按钮a标签进行自动点击下载，下载完后移除按钮a标签
|
|
|
+ let downloadDom=document.createElement('a')
|
|
|
+ downloadDom.href=href
|
|
|
+ downloadDom.download=fileName //--不是必须 若需要【前端重命名文件夹】的话这句代码就需要
|
|
|
+ document.body.appendChild(downloadDom)
|
|
|
+ downloadDom.click()
|
|
|
+ document.body.removeChild(downloadDom)
|
|
|
+ window.URL.revokeObjectURL(href)
|
|
|
+
|
|
|
+ } catch (error) {
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 上传文件之前之前
|
|
|
+ * @date 2023-11-22
|
|
|
+ * @param {any} file
|
|
|
+ * @returns {any}
|
|
|
+ */
|
|
|
+ beforeAvatarUpload(file) {
|
|
|
+ this.uploadExcelApi(file.raw);
|
|
|
+ },
|
|
|
+ // 上传
|
|
|
+ uploadExcelApi(file) {
|
|
|
+ try {
|
|
|
+ let formData = new FormData();
|
|
|
+ formData.append("file", file);
|
|
|
+ this.uploadLoading = true;
|
|
|
+ uploadExcel(formData).then(response => {
|
|
|
+ this.$message.success("上传成功!");
|
|
|
+ this.$set(this.formCopy, 'viewerList', response.data)
|
|
|
+ });
|
|
|
+ } catch (e) {
|
|
|
+ } finally {
|
|
|
+ this.uploadLoading = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 保存
|
|
|
+ * @date 2023-11-22
|
|
|
+ * @returns {any}
|
|
|
+ */
|
|
|
+ async submitForm() {
|
|
|
+ try {
|
|
|
+ this.loading = true;
|
|
|
+ let params = JSON.parse(JSON.stringify(this.formCopy))
|
|
|
+ if(!params.viewerList || params.viewerList.length == 0) {
|
|
|
+ this.$message.error("请导入观影人信息!");
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const { code } = await saveAndEdit({ ...params });
|
|
|
+ if (code === 200) {
|
|
|
+ this.$message.success("操作成功!");
|
|
|
+ this.$emit("getList");
|
|
|
+ this.cancel();
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ } finally {
|
|
|
+ this.loading = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.dialog {
|
|
|
+ width: 100%;
|
|
|
+ height: 75vh;
|
|
|
+}
|
|
|
+.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;
|
|
|
+ }
|
|
|
+ .title-class{
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: black;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .item-class{
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.voucher-list{
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(4, 1fr);
|
|
|
+ gap: 24rpx;
|
|
|
+}
|
|
|
+.pay-type-remark{
|
|
|
+ margin:14px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-bbb {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ --widdd: 700px;
|
|
|
+
|
|
|
+ >div:first-child {
|
|
|
+ width: var(--widdd);
|
|
|
+ flex-shrink: 0;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 0 0 10px 0;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog-bbb_2 {
|
|
|
+ width: calc(100% - var(--widdd));
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-bbb_2 {
|
|
|
+ .seat-tool-box {
|
|
|
+ height: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ white-space: nowrap;
|
|
|
+
|
|
|
+ span {
|
|
|
+ flex-shrink: 0;
|
|
|
+ font-size: 12px;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .seat-tool-box-slider {
|
|
|
+ width: 100px;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .seat-box {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 50px);
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .seat-list-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .seat-select-box {
|
|
|
+ width: 200px;
|
|
|
+ height: 100%;
|
|
|
+ flex-shrink: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 5px;
|
|
|
+ margin-left: 10px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-radius: 10px;
|
|
|
+
|
|
|
+ .seat-select-info {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 60px);
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ .seat-select-item {
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ padding: 5px;
|
|
|
+ border-radius: 5px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 12px;
|
|
|
+
|
|
|
+ >div:first-child {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ span:first-child {
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ >div:last-child {
|
|
|
+ span:first-child {
|
|
|
+ color: #f56c6c;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .seat-select-color-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 5px;
|
|
|
+
|
|
|
+ >span:first-child {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ >span:last-child {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .seat-list-box::before {
|
|
|
+ content: "舞台";
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 300px;
|
|
|
+ height: 30px;
|
|
|
+ background-color: rgb(204, 204, 204, 0.5);
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 0 0 20px 20px;
|
|
|
+ z-index: 99;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialogss {
|
|
|
+ padding: 30px 10px 10px;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: auto;
|
|
|
+ border-radius: 10px;
|
|
|
+ border: 1px solid #323333;
|
|
|
+
|
|
|
+ .dialogss-box {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-class {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: black;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-class {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .seat-box-class {
|
|
|
+ padding: 5px;
|
|
|
+ transform-origin: 50% 0;
|
|
|
+ transform: scale(var(--scaleNum));
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .disabled-class {
|
|
|
+ background-color: #aaabad;
|
|
|
+ user-select: none;
|
|
|
+ // pointer-events: none;
|
|
|
+ cursor: not-allowed !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .select-class {
|
|
|
+ //background-color: #e85353 !important;
|
|
|
+ border: 5px solid #1890ff !important;
|
|
|
+ // color: #eceaea !important;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .purchased-status:after {
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ z-index: -1;
|
|
|
+ background-image: url('../../../../assets/renyuan.png');
|
|
|
+ background-size: 50% 50%;
|
|
|
+ background-position: 50% 50%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ z-index: 99;
|
|
|
+ }
|
|
|
+
|
|
|
+ .occupy-status:after {
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: rgba(0, 0, 0, 0.3);
|
|
|
+ z-index: -1;
|
|
|
+ background-image: url('../../../../assets/jinzhi_1.png');
|
|
|
+ background-size: 50% 50%;
|
|
|
+ background-position: 50% 50%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ z-index: 99;
|
|
|
+ }
|
|
|
+
|
|
|
+ .occupy-status {
|
|
|
+ //pointer-events: none;
|
|
|
+ }
|
|
|
+ /** 订单待支付锁定 */
|
|
|
+ .order-occupy-status {
|
|
|
+
|
|
|
+ }
|
|
|
+ .order-occupy-status:after{
|
|
|
+ content:"";
|
|
|
+ display:block;
|
|
|
+ position:absolute;
|
|
|
+ top:0;
|
|
|
+ left:0;
|
|
|
+ width:100%;
|
|
|
+ height:100%;
|
|
|
+ background-color:rgba(0,0,0,0.3);
|
|
|
+ z-index:-1;
|
|
|
+ background-image: url('../../../../assets/jinzhi.png');
|
|
|
+ background-size: 50% 50%;
|
|
|
+ background-position: 50% 50%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ z-index: 99;
|
|
|
+ }
|
|
|
+ .occupy-status-no {
|
|
|
+ background-color: #f56c6c !important;
|
|
|
+ user-select: none;
|
|
|
+ // pointer-events: none;
|
|
|
+ cursor: not-allowed !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .seat-item-class-box {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ justify-content: center;
|
|
|
+ margin: auto 0;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .seat-item-class {
|
|
|
+ flex-shrink: 0;
|
|
|
+ display: block;
|
|
|
+ float: left;
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ margin: 5px;
|
|
|
+ border: 1px solid #4c4d4d;
|
|
|
+ border-radius: 3px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ user-select: none;
|
|
|
+
|
|
|
+ // transform-origin: 50% 50%;
|
|
|
+ // transform: scale(var(--scaleNum));
|
|
|
+ &:hover {
|
|
|
+ opacity: 0.6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-class {
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 5px;
|
|
|
+ line-height: 16px;
|
|
|
+ margin: 0;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
