great_service/src/views/order/groupBuyingMr/dialog/details.vue

<!--
 * @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.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;">{{ 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">观影人员信息</div>
        <el-row>
          <el-col :span="24">
            <el-table ref="tables" :data="form.viewersOrderList" 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="idCard" />
              <el-table-column label="核销状态" align="center">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.order_status_type" :value="scope.row.status"/>
                  <!-- <el-tag v-if="scope.row.qrcodeStatus == 0">未使用</el-tag>
                  <el-tag v-if="scope.row.qrcodeStatus == 1" type="success">已使用</el-tag>
                  <el-tag v-if="scope.row.qrcodeStatus == 2" type="info">过期</el-tag> -->
                </template>
              </el-table-column>
              <el-table-column label="核销时间" align="center" prop="useTime" />
              <el-table-column label="座位信息" align="center" prop="seatName" />
              <el-table-column label="座位类型" align="center" prop="seatTypeName" />
            </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' }" @click.stop="seatClick(item)"
                      :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>
            </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 { getSelectById } from '@/api/order/groupBuyingMr'
import { querySeatList } from '@/api/team/applicationMr'
import { pageList as getSeatType } from '@/api/seatTypeMr/seatTypeMr'
export default {
  name: "detailsDia",
  props: {
    dict: {
      type: Object,
      default: () => [],
    },
  },
  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: '关闭',
      },
      payList: {
        0: '未支付',
        1: '已支付',
        2: '支付中',
        3: '支付失败',
        4: '支付退款',
      },
      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, //  加载座位
    };
  },
  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;
        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 ? '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
    }
  },
};
</script>

<style lang="scss" scoped>
.dialog {
  width: 100%;
  height: 70vh;
}
.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.png');
        background-size: 50% 50%;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        z-index: 99;
      }

      .occupy-status {
        //pointer-events: none;
      }

      .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>