dy-admin-manager/src/views/teamBuild/signupList.vue

<template>
  <div class="sigup-container">
    <div class="topWrap">
      <div>
        <div style="display: flex; justify-content: space-between">
          <div
            style="
              display: flex;
              margin-bottom: 15px;
              font-size: 18px;
              font-weight: 400;
            "
          >
            <p style="margin-right: 10px" v-if="applyExpireDate">
              报名截止时间:{{ applyExpireDate | formatTimer }}
            </p>
            <p v-if="paymentExpireDate">
              缴费截止时间:{{ paymentExpireDate | formatTimer }}
            </p>
          </div>
        </div>

        <div class="btnList">
          <!-- <div class='newBand close'
               v-permission="'musicGroup/cancelMusicGroup'"
               @click="onClose">停止乐团</div>   v-show="status == 'APPLY'"-->
          <div
            class="newBand"
            @click="payStart"
            v-permission="'musicGroup/openPay'"
            v-if="status == 'APPLY'"
          >
            开始缴费
          </div>
          <!-- v-show="status=='PAY'" -->
          <div
            class="newBand"
            v-permission="'musicGroup/found'"
            @click="onGoHome"
            v-if="status == 'APPLY' || status == 'PAY'"
          >
            确认开团
          </div>
          <div
            class="newBand"
            v-permission="'musicGroup/extensionPayment'"
            @click="extendTime(true)"
            v-show="
              status == 'PAY' || status == 'PROGRESS' || status == 'PREPARE'
            "
          >
            延长缴费
          </div>
          <div
            class="newBand"
            v-permission="'musicGroup/extensionApplyExpireDate'"
            @click="extendTime(false)"
            v-show="
              status == 'PAY' ||
              status == 'APPLY' ||
              status == 'PROGRESS' ||
              status == 'PREPARE'
            "
          >
            延长报名
          </div>
          <div
            class="newBand"
            @click="onCreateQRCode('payment')"
            v-show="
              (status == 'PAY' ||
                status == 'APPLY' ||
                status == 'PROGRESS' ||
                status == 'PREPARE') &&
              ischeckCanReg
            "
          >
            报名链接
          </div>
          <div class="newBand" @click="onCreateQRCode('detail')">缴费详情</div>
          <div
            class="newBand"
            v-show="rightList.length > 0"
            v-permission="'studentRegistration/queryStudentApplyDetailExport'"
            @click="onDownLoadExecl"
          >
            报表导出
          </div>
          <auth :auths="'studentRegistration/queryPreApplyList/4263'">
            <div
              class="newBand"
              style="margin-right: 0"
              @click="forecastVisible = true"
            >
              预报名名单
            </div>
          </auth>
          <!--    v-permission="getFullPermission('musicGroup/addMusicGroupRegs')" -->
          <div
            class="newBand"
            v-permission="'musicGroup/addMusicGroupRegs'"
            @click="mergeVisible = true"
            v-show="
              (status == 'PAY' ||
                status == 'APPLY' ||
                status == 'PROGRESS' ||
                status == 'PREPARE') &&
              ischeckCanReg
            "
          >
            合并学员
          </div>
          <div
            class="newBand"
            style="background-color: #f97215; border: 1px solid #f97215"
            @click="onCreateQRCode('rePayment')"
            v-show="
              (status == 'PAY' ||
                status == 'APPLY' ||
                status == 'PROGRESS' ||
                status == 'PREPARE') &&
              ischeckCanReg
            "
          >
            报名链接（无乐器）
          </div>
        </div>
      </div>
      <el-dialog
        title="选择合并乐团"
        :visible.sync="mergeVisible"
        width="950px"
      >
        <mergeMusic
          v-if="mergeVisible"
          style="padding: 0 20px"
          :organId="organId"
          @close="mergeVisible = false"
          @submited="getList"
        />
      </el-dialog>

      <el-dialog
        title="预报名名单"
        :visible.sync="forecastVisible"
        width="950px"
      >
        <forecastList v-if="forecastVisible" @close="forecastVisible = false" />
      </el-dialog>
      <!--  stepImgs: {
        APPLY: require('@/assets/images/base/clock.png'),
        PAY: require('@/assets/images/base/pay.png')
      }, -->
    </div>
    <div class="searchList">
      <save-form
        :inline="true"
        :model="searchFrom"
        @submit="search"
        @reset="onReset"
      >
        <el-form-item>
          <el-select
            v-model.trim="searchFrom.subject"
            filterable
            clearable
            placeholder="请选择专业"
          >
            <el-option
              v-for="(item, index) in soundList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model.trim="searchFrom.isAllowAdjust"
            filterable
            placeholder="请选择是否允许调剂"
            clearable
          >
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model.trim="searchFrom.name"
            placeholder="请输入用户名或手机号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <!-- <el-input v-model.trim="searchFrom.currentGrade" placeholder="请输入年级" clearable></el-input> -->
          <el-select
            v-model.trim="searchFrom.currentGrade"
            filterable
            clearable
            placeholder="请输入年级"
          >
            <el-option
              v-for="(item, index) in gradeList"
              :key="index"
              :label="item.label"
              :value="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model.trim="searchFrom.paymentStatus"
            clearable
            filterable
            placeholder="报名缴费"
          >
            <el-option label="未开启缴费" value="0"></el-option>
            <el-option label="开启缴费" value="1"></el-option>
            <el-option label="已缴费" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model.trim="searchFrom.visited"
            clearable
            filterable
            placeholder="是否回访"
          >
            <el-option label="否" value="false"></el-option>
            <el-option label="是" value="true"></el-option>
          </el-select>
        </el-form-item>
        <!-- 专业actualSubjectId 调剂isAllowAdjust 手机号name -->
        <el-form-item>
          <el-button type="danger" native-type="search">搜索</el-button>
          <el-button type="primary" native-type="reset">重置</el-button>
        </el-form-item>
      </save-form>
    </div>
    <div class="sigup-core">
      <div class="left">
        <el-table
          style="width: 100% !important"
          :data="leftList"
          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
        >
          <el-table-column label="乐团声部" prop="subjectName" align="center">
          </el-table-column>
          <el-table-column
            label="计划招生"
            prop="expectedStudentNum"
            align="center"
          >
            <template slot-scope="scope">
              <div>
                <p v-show="!isEdit">{{ scope.row.expectedStudentNum }}</p>

                <el-input
                  v-show="isEdit"
                  v-model.trim="scope.row.expectedStudentNum"
                ></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="已报名" prop="applyStudentNum" align="center">
          </el-table-column>
          <el-table-column label="已缴费" prop="payNum" align="center">
          </el-table-column>
        </el-table>
        <div
          class="btnWrap"
          v-permission="'musicGroup/updateExpectedStudentNum'"
          style="margin-right: 20px; margin-top: 20px"
        >
          <el-button
            v-show="
              !isEdit &&
              (status == 'PAY' ||
                status == 'APPLY' ||
                status == 'PROGRESS' ||
                status == 'PREPARE')
            "
            @click="isEdit = true"
            >编辑</el-button
          >
          <el-button v-show="isEdit" @click="saveIsEdit">保存</el-button>
        </div>
      </div>
      <div class="right">
        <el-table
          :data="rightList"
          ref="multipleTable"
          :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
            :selectable="checkboxSelect"
          >
          </el-table-column>
          <el-table-column label="学员姓名" prop="studentName" align="center">
          </el-table-column>
          <el-table-column label="家长姓名" prop="parentsName" align="center">
          </el-table-column>
          <el-table-column align="center" label="入团年份">
            <template slot-scope="scope">
              <div>
                {{ scope.row.createTime | dayjsFormat("YYYY年") }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="年级班级" align="center">
            <template slot-scope="scope">
              <div>
                {{ scope.row.currentGrade + scope.row.currentClass }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="性别" prop="gender" align="center">
            <template slot-scope="scope">
              <div>
                {{ scope.row.gender | sex }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="服从调剂" prop="isAllowAdjust" align="center">
            <template slot-scope="scope">
              <div>
                {{ scope.row.isAllowAdjust | isAllowAdjust }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="报名专业" prop="subjectName" align="center">
          </el-table-column>
          <el-table-column
            label="调剂专业"
            prop="actualSubjectName"
            align="center"
          >
          </el-table-column>
          <el-table-column label="联系电话" prop="parentsPhone" align="center">
          </el-table-column>

          <el-table-column label="是否回访" prop="paymentStatus" align="center">
            <template slot-scope="scope">
              <div>
                {{ scope.row.visitNum ? "是" : "否" }}
              </div>
            </template>
          </el-table-column>
          <!-- visited -->
          <!-- v-show='status == "PAY"' -->
          <el-table-column
            label="报名缴费状态"
            fixed="right"
            prop="paymentStatus"
            align="center"
          >
            <template slot-scope="scope">
              <div>
                {{ scope.row.paymentStatus | paymentStatus }}
              </div>
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            fixed="right"
            width="240"
            align="center"
            v-if="
              status == 'PAY' ||
              status == 'APPLY' ||
              status == 'PROGRESS' ||
              status == 'PREPARE'
            "
          >
            <!--  v-show="
              status == 'PAY' || status == 'PROGRESS' || status == 'PREPARE' || status=='APPLY'
            " -->
            <template slot-scope="scope">
              <div>
                <auth :auths="'studentRegistration/batchUpdateSubject'">
                  <el-button
                    type="text"
                    v-show="scope.row.paymentStatus != 2"
                    @click="resetSubject(scope.row)"
                    >修改专业</el-button
                  >
                </auth>

                <!-- APPLY  status == "APPLY" || s-->
                <el-popover
                  v-show="scope.row.remark"
                  placement="top-start"
                  title="备注"
                  width="200"
                  trigger="hover"
                  :content="scope.row.remark"
                >
                  <el-button type="text" slot="reference">备注</el-button>
                </el-popover>
                <!-- PAY -->
                <!-- &&  status == "PAY"-->
                <auth
                  :auths="'studentRegistration/queryFeeDetail'"
                  v-show="scope.row.paymentStatus == 2"
                >
                  <el-button type="text" @click="lookdetail(scope.row)"
                    >查看</el-button
                  >
                </auth>
                <auth
                  :auths="'musicGroupQuit/directQuitMusicGroup2'"
                  v-show="scope.row.paymentStatus == 2"
                >
                  <el-button type="text" @click="quitTeam(scope.row)"
                    >退团退费</el-button
                  >
                </auth>
                <auth
                  :auths="'musicGroupQuit/directQuitMusicGroup3'"
                  v-show="scope.row.paymentStatus == 2"
                >
                  <el-button type="text" @click="quieTeams(scope.row)"
                    >退团</el-button
                  >
                </auth>
                <auth
                  :auths="'visit/add/teamSignupList'"
                  v-if="scope.row.visitNum <= 0"
                >
                  <el-button type="text" @click="addVisit(scope.row)"
                    >新增回访</el-button
                  >
                </auth>
                <auth
                  :auths="'subjectChange/getStudentOriginal'"
                  v-show="scope.row.paymentStatus == 2"
                >
                  <el-button type="text" @click="openChangeVoice(scope.row)"
                    >更改声部</el-button
                  >
                </auth>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div
          style="margin-top: 10px; margin-bottom: 10px"
          v-show="
            status == 'APPLY' || status == 'PROGRESS' || status == 'PREPARE'
          "
        >
          <el-button @click="onSelectAll">全选/取消</el-button>
          <auth :auths="'studentRegistration/openPayment'">
            <el-button
              style="background-color: #14928a; border: 1px solid #14928a"
              @click="onPartPayment"
              type="primary"
              >开启缴费</el-button
            >
          </auth>
          <!-- <div class='newBand' v-show="status=='APPLY'">允许缴费</div> -->
        </div>
        <pagination
          sync
          :total.sync="rules.total"
          :page.sync="rules.page"
          :limit.sync="rules.limit"
          :page-sizes="rules.page_size"
          @pagination="getList"
        />
      </div>
    </div>
    <el-dialog title="修改专业" :visible.sync="subjectVisible" width="400px">
      <el-form :model="maskForm">
        <el-form-item label="选择专业">
          <el-select v-model.trim="maskForm.subject" filterable clearable>
            <el-option
              v-for="(item, index) in soundList"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="subjectVisible = false">取 消</el-button>
        <el-button type="primary" @click="okReset">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="!isPay ? '延长报名' : '延长缴费'"
      :visible.sync="extendPaymentStatus"
      destroy-on-close
      width="400px"
    >
      <el-form :model="extendForm" ref="extendForm" :rules="extendRule">
        <el-form-item v-if="isPay" label="延长缴费时间" prop="expireDate">
          <el-date-picker
            v-model.trim="extendForm.expireDate"
            value-format="yyyy-MM-dd"
            type="date"
            :picker-options="payDate()"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="延长报名时间" v-else prop="expireDate">
          <el-date-picker
            v-model.trim="extendForm.expireDate"
            value-format="yyyy-MM-dd"
            type="date"
            :picker-options="applyDates"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="extendPaymentStatus = false">取 消</el-button>
        <el-button
          type="primary"
          v-if="isPay"
          @click="onExtendPayment('extendForm', isPay)"
          >确 定</el-button
        >
        <el-button
          v-else
          type="primary"
          @click="onExtendPayment('extendForm', isPay)"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog title="订单详情" :visible.sync="orderVisible" width="600px">
      <el-form :model="orderForm" :inline="true">
        <!--     name: '',
        totalAmount: '',
        subject: '',
        subjectFee: '',
        axe: '',
        axePrice: '',
        others: '',
        othersPrice: '' -->
        <el-form-item label="学员姓名">
          <el-input v-model.trim="orderForm.name" disabled=""></el-input>
        </el-form-item>
        <el-form-item label="实缴金额">
          <el-input v-model.trim="orderForm.totalAmount" disabled=""></el-input>
        </el-form-item>
        <el-form-item label="实际专业">
          <el-input v-model.trim="orderForm.subject" disabled=""></el-input>
        </el-form-item>
        <el-form-item label="课程费用">
          <el-input v-model.trim="orderForm.subjectFee" disabled=""></el-input>
        </el-form-item>
        <el-form-item label="选择乐器">
          <el-input v-model.trim="orderForm.axe" disabled=""></el-input>
        </el-form-item>
        <el-form-item label="乐器价格">
          <el-input v-model.trim="orderForm.axePrice" disabled=""></el-input>
        </el-form-item>
        <el-form-item label="教辅组合">
          <el-input v-model.trim="orderForm.others" disabled=""></el-input>
        </el-form-item>
        <el-form-item label="组合价格">
          <el-input v-model.trim="orderForm.othersPrice" disabled=""></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button>取 消</el-button> -->
        <el-button type="primary" @click="orderVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      title="开始缴费"
      :visible.sync="paymentStatus"
      width="400px"
      destroy-on-close
    >
      <el-form
        ref="paymentForm"
        class="paymentForm"
        :model="paymentForm"
        label-position="top"
        :rules="paymentRules"
      >
        <el-form-item label="请设置缴费截止日期" prop="paymentExpireDate">
          <el-date-picker
            v-model.trim="paymentForm.paymentExpireDate"
            type="date"
            value-format="yyyy-MM-dd"
            :picker-options="payDate()"
            style="width: 100%"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="是否排乐团网管课"
                      :rules="[{ required: true, message: '请选择是否排乐团网管课'}]"
                      prop="feeType">
          <el-select v-model="paymentForm.feeType"
                     style="width: 100%!imoprtant">
            <el-option label="需要排线上课"
                       value="ONLINE"></el-option>
            <el-option label="只排线下课"
                       value="OFFLINE"></el-option>
          </el-select>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="paymentStatus = false">取 消</el-button>
        <el-button type="primary" @click="onStartPayment('paymentForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- <el-dialog title="报名二维码" :visible.sync="qrcodeStatus" width="300px">
      <div class="left-code">
        <h2>学员报名链接</h2>
        <div id="qrcode" class="qrcode code" ref="qrCodeUrl"></div>
        <p class="code-url" v-show="codeUrl">{{ codeUrl }}</p>
      </div>
    </el-dialog>
    <el-dialog
      title="缴费详情二维码"
      :visible.sync="qrcodeStatus2"
      width="300px"
    >
      <div class="right-code">
        <h2>报名缴费详情</h2>
        <div id="qrcode2" class="qrcode code" ref="qrCodeUrl"></div>
        <p class="code-url" v-show="codeUrl2">{{ codeUrl2 }}</p>
      </div>
    </el-dialog> -->

    <!-- 预报名链接 -->
    <qr-code v-model="codeStatus" :title="codeTitle" :codeUrl="qrCodeUrl" />

    <!-- 退团弹窗 -->
    <el-dialog
      title="退团信息确认"
      :destroy-on-close="true"
      width="640px"
      :visible.sync="quitVisible"
    >
      <el-form :model="quitForm" ref="quitForm" :rules="quitRules">
        <el-form-item label="退还课程费用" prop="isRefundCourseFee">
          <el-radio v-model.trim="quitForm.isRefundCourseFee" :label="true"
            >是</el-radio
          >
          <el-radio v-model.trim="quitForm.isRefundCourseFee" :label="false"
            >否</el-radio
          >
        </el-form-item>
        <el-form-item label="退还乐器费用" prop="isRefundInstrumentFee">
          <el-radio v-model.trim="quitForm.isRefundInstrumentFee" :label="true"
            >是</el-radio
          >
          <el-radio v-model.trim="quitForm.isRefundInstrumentFee" :label="false"
            >否</el-radio
          >
        </el-form-item>
        <el-form-item label="退还教辅费用" prop="isRefundTeachingAssistantsFee">
          <el-radio
            v-model.trim="quitForm.isRefundTeachingAssistantsFee"
            :label="true"
            >是</el-radio
          >
          <el-radio
            v-model.trim="quitForm.isRefundTeachingAssistantsFee"
            :label="false"
            >否</el-radio
          >
        </el-form-item>
        <el-form-item
          label="退还乐保费用"
          prop="isMaintenanceFee"
          v-if="activeRow.hasMaintenance"
        >
          <el-radio v-model.trim="quitForm.isMaintenanceFee" :label="true"
            >是</el-radio
          >
          <el-radio v-model.trim="quitForm.isMaintenanceFee" :label="false"
            >否</el-radio
          >
        </el-form-item>
        <el-form-item
          label="退还乐保金额"
          prop="maintenanceFee"
          v-if="quitForm.isMaintenanceFee"
        >
          <el-input
            type="number"
            v-model.trim="quitForm.maintenanceFee"
            style="width: 180px"
          >
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="退团原因" prop="reason">
          <el-input type="textarea" v-model.trim="quitForm.reason"> </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer question">
        <div>
          <el-popover placement="right" width="500" trigger="click">
            <div class="popoverWrap">
              <p>乐团退团退费规则：</p>
              <p>退还课程费用：缴费总额-已结束课时单价之和</p>
              <p>退还乐器费用：报名缴费时缴纳的乐器费用（团购、租金）</p>
              <p>退还教辅费用：报名缴费时缴费的教辅费用</p>
            </div>
            <el-button
              type="text"
              icon="el-icon-question"
              slot="reference"
              style="color: red"
              >退团退费说明</el-button
            >
          </el-popover>
        </div>
        <div>
          <el-button @click="quitVisible = false">取 消</el-button>
          <el-button type="primary" @click="chioseType">确 定</el-button>
        </div>
      </span>
    </el-dialog>
    <!-- 回访记录 -->
    <el-dialog
      title="新增回访"
      width="500px"
      destroy-on-close
      :close-on-click-modal="false"
      :visible.sync="visitVisiable"
    >
      <visit
        v-if="visitVisiable && detail"
        :detail="detail"
        @close="visitVisiable = false"
        @submited="getList"
      />
    </el-dialog>
    <el-dialog
      title="更改声部"
      :visible.sync="changeVoiceVisible"
      v-if="changeVoiceVisible"
      width="600px"
    >
      <changeVoice
        @close="closeChangeVoice"
        @submited="getList"
        :detail.sync="rowDetail"
        :musicGroupId="id"
        :voiceList="leftList"
      />
    </el-dialog>
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import qrCode from "@/components/QrCode/index";
import {
  getintoClass,
  getStudentList,
  findSound,
  musicGroupOpenPay,
  openPayment,
  musicGroupFound,
  extensionPayment,
  extensionApplyExpire,
  resetPlanNum,
  cancelMusicGroup,
  getTeamBaseInfo,
  studentApplyDetailExport,
  StudentQuit,
  getMusicGroupGradeList,
  checkCanReg,
} from "@/api/buildTeam";
import mergeMusic from "./components/merge-music";
import forecastList from "./components/forecast-list";
import { resetStudentSubject, getStudentFeeDetail } from "@/api/studentManager";
import { vaildStudentUrl, vaildTeacherUrl } from "@/utils/validate";
import { addVisit } from "@/views/returnVisitManager/api.js";
import QRCode from "qrcodejs2";
import { visitChiose } from "@/utils/searchArray";
import axios from "axios";
import { getToken } from "@/utils/auth";
import load from "@/utils/loading";
import qs from "qs";
import { permission } from "@/utils/directivePage";
import cleanDeep from "clean-deep";
import changeVoice from "./modals/change-voice";
import visit from "@/views/withdrawal-application/modals/visit";
export default {
  name: "signupList",
  components: {
    pagination,
    qrCode,
    changeVoice,
    mergeMusic,
    forecastList,
    visit,
  },
  data() {
    return {
      multipleSelection: [], //
      forecastVisible: false, // 预报名状态
      isEdit: false,
      rowDetail: null,
      mergeVisible: false,
      changeVoiceVisible: false,
      subjectVisible: false,
      orderVisible: false,
      quitVisible: false,
      leftList: [],
      rightList: [],
      searchFrom: {
        name: "",
        subject: "", // 专业
        isAllowAdjust: "", // 是否允许调剂
        currentGrade: null, // 入学年级
        paymentStatus: "",
        visited: "",
      },
      quitForm: {
        // 退团信息确认
        isRefundCourseFee: null,
        isRefundInstrumentFee: null,
        isRefundTeachingAssistantsFee: null,
        isMaintenanceFee: null,
        maintenanceFee: 0,
        reason: "",
      },
      stepImgs: {
        APPLY: require("@/assets/images/base/clock.png"),
        PAY: require("@/assets/images/base/pay.png"),
      },
      status: "",
      id: "",
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 30, 40], // 选择限制显示条数
      },
      teamName: "",
      maskForm: {
        subject: "",
      },
      activeId: "",
      soundList: [],
      orderForm: {
        name: "",
        totalAmount: "",
        subject: "",
        subjectFee: "",
        axe: "",
        axePrice: "",
        others: "",
        othersPrice: "",
      },
      paymentStatus: false,
      paymentForm: {
        paymentExpireDate: null,
        // feeType: null
      },
      paymentRules: {
        paymentExpireDate: [
          { required: true, message: "请设置缴费截止日期", trigger: "blur" },
        ],
      },
      paymentNum: 0, // 缴费了多少人
      qrcodeStatus: false, // 生成二维码
      qrcodes: true,
      qrcode: null,
      codeUrl: null,
      qrcodeStatus2: false, // 生成二维码
      qrcodes2: true,
      qrcode2: null,
      codeUrl2: null,
      codeStatus: false,
      codeTitle: null,
      qrCodeUrl: null,
      organId: "",
      extendPaymentStatus: false,
      extendForm: {
        expireDate: null,
      },
      extendRule: {
        expireDate: [
          { required: true, message: "请选择延长时间", trigger: "change" },
        ],
      },
      quitRules: {
        isRefundCourseFee: [
          { required: true, message: "请选择是否退还课程费用" },
        ],
        isRefundInstrumentFee: [
          { required: true, message: "选择是否退还乐器费用" },
        ],
        isRefundTeachingAssistantsFee: [
          { required: true, message: "选择是否退还教辅费用" },
        ],
        isMaintenanceFee: [{ required: true, message: "选择是否退还乐保费用" }],
        maintenanceFee: [{ required: true, message: "请输入退还乐保金额" }],
        reason: [{ required: true, message: "请填写退团退费原因" }],
      },
      applyExpireDate: "",
      paymentExpireDate: "",
      activeRow: { hasMaintenance: false },
      visitVisiable: false,
      visitForm: {
        musicGroupId: "",
        overview: "",
        purpose: "",
        studentId: "",
        type: "",
        visitTime: "",
        visitType: "",
        feedback: "",
        studentName: "",
      },

      visitChiose,
      visitRules: {
        overview: [{ required: true, message: "请输入学生近况" }],
        feedback: [{ required: true, message: "请输入家长反馈" }],
        visitTime: [{ required: true, message: "请输入回访时间" }],
        visitType: [{ required: true, message: "请选择回访类型" }],
      },
      isPay: false,
      applyDates: this.applyDate(),
      detail: null,
      gradeList: [],
      ischeckCanReg: false,
    };
  },
  created() {},
  mounted() {
    // 通过乐团状态判断显示隐藏的东西
    this.init();
  },
  activated() {
    this.init();
  },
  methods: {
    permission(str) {
      return permission(str);
    },
    async init() {
      this.status = this.$route.query.team_status;
      // 通过乐团id 获取乐团招生状态
      this.id = this.$route.query.id;
      this.teamName = this.$route.query.name;
      // 判断是否带缓存参数
      this.pickerOptions = this.beginDate(new Date());
      // checkCanReg
      try {
        this.ischeckCanReg = await (
          await checkCanReg({ musicGroupId: this.id })
        ).data;
        console.log(this.ischeckCanReg);
      } catch (e) {
        console.log(e);
      }

      getMusicGroupGradeList({ musicGroupId: this.id }).then((res) => {
        let result = res.data;
        if (res.code == 200 && result) {
          for (let i in result) {
            this.gradeList.push({
              value: i,
              label: result[i],
            });
          }
        }
      });

      getTeamBaseInfo({ musicGroupId: this.id }).then((res) => {
        if (res.code == 200) {
          this.organId = res.data.musicGroup.organId;
          this.applyExpireDate = res.data.musicGroup.applyExpireDate;
          this.paymentExpireDate = res.data.musicGroup.paymentExpireDate;
        }
      });

      // 根据乐团id获乐团声部
      findSound({ musicGroupId: this.id }).then((res) => {
        if (res.code == 200) {
          this.soundList = res.data;
        }
      });
      // 通过乐团id获取乐团学生列表
      this.getList();
    },
    search() {
      this.rules.page = 1;
      this.getList();
    },
    onReset() {
      this.rules.page = 1;
      this.rules.limit = 10;
      this.searchFrom = {
        name: null,
        subject: null, // 专业
        isAllowAdjust: null, // 是否允许调剂
        currentGrade: null,
        paymentStatus: null,
        visited: null,
      };
      this.getList();
    },
    onCancel() {
      this.$store.dispatch("delVisitedViews", this.$route);
      this.$router.push({ path: "/teamList" });
    },
    payStart() {
      this.paymentStatus = true;
      getTeamBaseInfo({ musicGroupId: this.id }).then((res) => {
        if (res.code == 200) {
          this.applyExpireDate = res.data.musicGroup.applyExpireDate;
          this.paymentExpireDate = res.data.musicGroup.paymentExpireDate;
        }
      });
    },
    getList() {
      let obj = {
        musicGroupId: this.id,
        actualSubjectId: this.searchFrom.subject || null,
        isAllowAdjust: this.searchFrom.isAllowAdjust || null,
        name: this.searchFrom.name || null,
        currentGrade: this.searchFrom.currentGrade || null,
        paymentStatus: this.searchFrom.paymentStatus || null,
        visited: this.searchFrom.visited || null,
        page: this.rules.page,
        rows: this.rules.limit,
      };
      // 根据乐团id获取学团情况
      getintoClass({ musicGroupId: this.id }).then((res) => {
        if (res.code == 200) {
          this.leftList = res.data;
        }
      });

      return getStudentList(obj).then((res) => {
        if (res.code == 200) {
          res.data.rows.forEach((item) => {
            // '未开启缴费', '开启缴费', '已缴费'
            if (item.paymentStatus == 2) {
              this.paymentNum += 1;
            }
          });
          this.rightList = res.data.rows;
          this.rules.total = res.data.total;
          return res;
        }
      });
    },
    onStartPayment(formName) {
      // 开启缴费
      this.$refs[formName].validate((valid) => {
        if (valid) {
          musicGroupOpenPay({
            musicGroupId: this.id,
            expireDate: this.paymentForm.paymentExpireDate,
            // feeType: this.paymentForm.feeType
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("开启成功");
              this.paymentStatus = false;
              this.$store.dispatch("delVisitedViews", this.$route);
              this.$router.push({
                path: "/teamList",
              });
              this.status = "PAY";
              this.paymentExpireDate = this.paymentForm.paymentExpireDate;
              this.getList();
            }
          });
        } else {
          return false;
        }
      });
    },
    onSelectAll() {
      // 选中全部
      this.$refs.multipleTable.toggleAllSelection();
    },
    onPartPayment() {
      // 部分缴费
      let selection = this.multipleSelection;
      if (selection.length <= 0) {
        this.$message.error("您还没有选择学生");
        return false;
      }
      let ids = [];
      selection.forEach((item) => {
        ids.push(item.id);
      });

      this.$confirm(`是否确认开启缴费?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          openPayment({
            ids: ids.join(","),
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("开启成功");
              this.getList();
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {});
    },
    onCreateQRCode(type) {
      // 生成报名二维码
      let id = this.id;
      this.codeStatus = true;
      if (type == "payment") {
        this.codeTitle = "学员报名链接";
        this.qrCodeUrl = vaildStudentUrl() + "/#/login?musicGroupId=" + id;
      } else if (type == "detail") {
        let teamName = this.$route.query.name;
        this.codeTitle = "报名缴费详情";
        this.qrCodeUrl =
          vaildTeacherUrl() +
          "/#/order?musicGroupId=" +
          id +
          "&musicGroupName=" +
          teamName;
      } else if (type == "rePayment") {
        this.codeTitle = "学生报名链接（无乐器）";
        this.qrCodeUrl =
          vaildStudentUrl() + "/#/login?musicGroupId=" + id + "&instrument=1";
      }
    },
    onCreateQRCode2() {
      // 生成报名二维码
      this.qrcodeStatus2 = true;
      let id = this.id;

      let teamName = this.$route.query.name;

      setTimeout(() => {
        document.getElementById("qrcode2").innerHTML = "";
        this.qrcode2 = new QRCode("qrcode2", {
          width: 200,
          height: 200,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H,
        });
        this.qrcode2.makeCode(
          vaildTeacherUrl() +
            "/#/order?musicGroupId=" +
            id +
            "&musicGroupName=" +
            teamName
        );
        this.codeUrl2 =
          vaildTeacherUrl() +
          "/#/order?musicGroupId=" +
          id +
          "&musicGroupName=" +
          teamName;
      }, 500);
    },
    onDownLoadExecl() {
      // 报表导出
      let url = "/api-web/studentRegistration/queryStudentApplyDetailExport";
      let data = {
        musicGroupId: this.$route.query.id,
        page: 1,
        rows: 9999,
      };
      const options = {
        method: "POST",
        headers: {
          Authorization: getToken(),
        },
        data: qs.stringify(data),
        url,
        responseType: "blob",
      };
      this.$confirm("您确定导出吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          load.startLoading();
          axios(options)
            .then((res) => {
              let blob = new Blob([res.data], {
                // type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
                type: "application/vnd.ms-excel;charset=utf-8",
                //word文档为application/msword,pdf文档为application/pdf,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8
              });

              let text = new Response(blob).text();
              text.then((res) => {
                // 判断是否报错
                if (res.indexOf("code") != -1) {
                  let json = JSON.parse(res);
                  this.$message.error(json.msg);
                } else {
                  let objectUrl = URL.createObjectURL(blob);
                  let link = document.createElement("a");
                  let nowTime = new Date();
                  let ymd =
                    nowTime.getFullYear() +
                    "" +
                    (nowTime.getMonth() + 1) +
                    "" +
                    nowTime.getDate() +
                    "" +
                    nowTime.getHours() +
                    "" +
                    nowTime.getMinutes();
                  let fname = this.$route.query.id + "-" + ymd + ".xls"; //下载文件的名字
                  link.href = objectUrl;
                  link.setAttribute("download", fname);
                  document.body.appendChild(link);
                  link.click();
                }
              });
              load.endLoading();
            })
            .catch((error) => {
              this.$message.error("导出数据失败，请联系管理员");
              load.endLoading();
            });
        })
        .catch(() => {});
    },
    onGoHome() {
      // 确认开团
      // 判断是否有学生缴费
      if (this.paymentNum <= 0) {
        this.$message.error("当前缴费人数为0，无法开团");
        return;
      }
      this.$confirm(`是否确认开团?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          musicGroupFound({
            musicGroupId: this.$route.query.id,
          }).then((res) => {
            if (res.code == 200) {
              // let query = this.$route.query;
              // this.$message.success("开启成功");
              // this.$router.push({
              //   path: "/teamList",
              //   query: {
              //     ...query,
              //   },
              // });
              this.onCancel();
            }
          });
        })
        .catch(() => {});
    },
    onClose() {
      // 停止乐团
      this.$confirm("您确定停止乐团吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          cancelMusicGroup({
            musicGroupId: this.$route.query.id,
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("停止成功");
              this.$store.dispatch("delVisitedViews", this.$route);
              this.$router.push({
                path: "/teamList",
              });
            }
          });
        })
        .catch(() => {});
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 修改专业
    resetSubject(row) {
      console.log(row);
      this.activeId = row.studentId;
      this.maskForm.subject = row.actualSubjectId;
      this.subjectVisible = true;
      //   resetStudentSubject().then(res=>{]})
    },
    // 确认修改
    okReset() {
      if (!this.maskForm.subject) {
        this.$message.error("请选择调剂专业");
        return;
      }
      resetStudentSubject({
        musicGroupId: this.id,
        userId: this.activeId,
        subId: this.maskForm.subject,
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success("修改成功");
          this.subjectVisible = false;
          this.maskForm.subject = "";
          getintoClass({ musicGroupId: this.id }).then((res) => {
            if (res.code == 200) {
              this.leftList = res.data;
            }
          });
          this.getList();
        }
      });
    },
    onExtendPayment(formName, isPay) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!isPay) {
            extensionApplyExpire({
              musicGroupId: this.id,
              expireDate: this.extendForm.expireDate,
            }).then((res) => {
              if (res.code == 200) {
                this.$message.success("延长报名成功");
                this.extendPaymentStatus = false;
                getTeamBaseInfo({ musicGroupId: this.id }).then((res) => {
                  if (res.code == 200) {
                    this.applyExpireDate = res.data.musicGroup.applyExpireDate;
                  }
                });
              } else {
                this.$message.error(res.msg);
              }
            });
          } else {
            extensionPayment({
              musicGroupId: this.id,
              expireDate: this.extendForm.expireDate,
            }).then((res) => {
              if (res.code == 200) {
                this.$message.success("延长缴费成功");
                this.extendPaymentStatus = false;
                getTeamBaseInfo({ musicGroupId: this.id }).then((res) => {
                  if (res.code == 200) {
                    this.paymentExpireDate =
                      res.data.musicGroup.paymentExpireDate;
                  }
                });
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        }
      });
    },
    lookdetail(row) {
      this.orderVisible = true;
      this.activeId = row.studentId;
      this.orderForm.name = row.studentName;
      this.orderForm.subject = row.subjectName;
      getStudentFeeDetail({
        musicGroupId: this.id,
        studentId: row.studentId,
      }).then((res) => {
        if (res.code == 200) {
          if (res.data) {
            this.orderForm.totalAmount = res.data.totalAmount;
            // this.orderForm.subjectFee = res.data.courseFee;
            let goodStr = "";
            let goodPrice = 0;
            let otherStr = "";
            let othersPrice = 0;
            for (let i in res.data.goods) {
              if (res.data.goods[i].goodsType == "INSTRUMENT") {
                goodStr += res.data.goods[i].goodsName + ",";
                goodPrice += parseFloat(res.data.goods[i].musicalFee);
                // this.orderForm.axe = res.data.goods[i].goodsName;
                // this.orderForm.axePrice = res.data.goods[i].musicalFee;
              } else if (res.data.goods[i].goodsType == "ACCESSORIES") {
                otherStr += res.data.goods[i].goodsName + ",";
                othersPrice += parseFloat(res.data.goods[i].musicalFee);
                // this.orderForm.others = res.data.goods[i].goodsName;
                // this.orderForm.othersPrice = res.data.goods[i].musicalFee;
              } else if (res.data.goods[i].goodsType == "COURSE") {
                this.orderForm.subjectFee = res.data.goods[i].musicalFee;
              }
            }
            this.orderForm.others = otherStr.substring(0, otherStr.length - 1);
            this.orderForm.othersPrice = othersPrice;
            this.orderForm.axe = goodStr.substring(0, goodStr.length - 1);
            this.orderForm.axePrice = goodPrice;
          }
        }
      });
    },
    saveIsEdit() {
      // 提交数据
      this.isEdit = false;
      resetPlanNum(this.leftList).then((res) => {});
    },
    quitTeam(row) {
      this.activeRow = row;
      this.quitVisible = true;
    },
    quieTeams(row) {
      this.$prompt("请输入退团原因", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /\S/,
        inputErrorMessage: "请输入退团原因",
        type: "warning",
      })
        .then((val) => {
          // 发请求 退团
          StudentQuit({
            musicGroupId: this.id,
            userId: row.studentId,
            reason: val.value,
            isRefundCourseFee: false,
            isRefundInstrumentFee: false,
            isRefundTeachingAssistantsFee: false,
          }).then((res) => {
            this.quitForm = {
              // 退团信息确认
              isRefundCourseFee: null,
              isRefundInstrumentFee: null,
              isRefundTeachingAssistantsFee: null,
              isMaintenanceFee: null,
              maintenanceFee: 0,
              reason: "",
            };
            if (res.code == 200) {
              this.$message.success("退团成功");
              this.getList();
              this.quitVisible = false;
            }
          });
        })
        .catch(() => {});
    },
    chioseType() {
      this.$refs["quitForm"].validate((res) => {
        if (res) {
          this.$confirm("确定退团?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              let row = this.activeRow;
              // 发请求 退团
              StudentQuit({
                musicGroupId: this.id,
                userId: row.studentId,
                reason: this.quitForm.reason,
                isRefundCourseFee: this.quitForm.isRefundCourseFee,
                isRefundInstrumentFee: this.quitForm.isRefundInstrumentFee,
                isRefundTeachingAssistantsFee: this.quitForm
                  .isRefundTeachingAssistantsFee,
                maintenanceFee: this.quitForm.maintenanceFee,
              }).then((res) => {
                this.quitForm = {
                  // 退团信息确认
                  isRefundCourseFee: null,
                  isRefundInstrumentFee: null,
                  isRefundTeachingAssistantsFee: null,
                  isMaintenanceFee: null,
                  maintenanceFee: 0,
                  reason: "",
                };
                if (res.code == 200) {
                  this.$message.success("退团成功");
                  this.getList();
                  this.quitVisible = false;
                }
              });
            })
            .catch(() => {});
        } else {
        }
      });

      // row.typeVisible = false;
    },
    addVisit(row) {
      // this.visitForm.studentName = row.studentName;
      // this.visitForm.musicGroupId = this.teamid;
      // this.visitForm.studentId = row.studentId;
      row.userId = row.studentId;
      this.detail = row;
      this.detail.musicGroupId = this.$route.query.id;
      this.visitVisiable = true;
    },
    openChangeVoice(row) {
      this.getList().then((res) => {
        for (const item of res.data.rows) {
          if (item.id === row.id) {
            this.rowDetail = { ...item, userId: item.studentId };
            // console.log(this.rowDetail)
            this.changeVoiceVisible = true;
          }
        }
      });
    },
    closeChangeVoice() {
      this.changeVoiceVisible = false;
      // this.rowDetail = null
    },
    handleChange(val) {
      this.visitForm.type = val[0];
      this.visitForm.purpose = val[1];
    },
    submitAddVisit() {
      this.$refs.visitForm.validate((res) => {
        if (res) {
          this.visitForm.visitType = null;
          this.visitForm.musicGroupId = this.id;
          addVisit(cleanDeep(this.visitForm)).then((res) => {
            if (res.code === 200) {
              this.$message.success("新增成功");
              this.visitVisiable = false;
            }
          });
        }
      });
    },
    beginDate(date) {
      let self = this;
      return {
        firstDayOfWeek: 1,
        disabledDate(time) {
          return time.getTime() >= date.getTime(); //开始时间不选时，结束时间最大值小于等于当天
        },
      };
    },
    extendTime(isPay) {
      this.isPay = isPay;

      if (isPay) {
        // 点击的延长缴费
        this.extendForm.expireDate = this.paymentExpireDate;
      } else {
        // 点击的延长报名
        this.extendForm.expireDate = this.applyExpireDate;
      }
      this.extendPaymentStatus = true;
    },
    payDate() {
      let self = this;
      return {
        firstDayOfWeek: 1,
        disabledDate(time) {
          return time.getTime() + 86400000 < new Date().getTime();
        },
      };
    },
    applyDate() {
      let self = this;
      return {
        firstDayOfWeek: 1,
        disabledDate(time) {
          return time.getTime() + 86400000 < new Date().getTime();
        },
      };
    },
    checkboxSelect(row) {
      return row.paymentStatus == 0;
    },
  },
  watch: {
    "quitForm.isMaintenanceFee"(val) {
      if (val) {
        this.quitForm.maintenanceFee = 300;
      } else {
        this.quitForm.maintenanceFee = 0;
      }
    },
    orderVisible(val) {
      if (!val) {
        this.orderForm = {
          name: "",
          totalAmount: "",
          subject: "",
          subjectFee: "",
          axe: "",
          axePrice: "",
          others: "",
          othersPrice: "",
        };
      }
    },
    qrcodeStatus(val) {
      if (!val) {
        this.qrcode.clear();
      }
    },
    qrcodeStatus2(val) {
      if (!val) {
        this.qrcode2.clear();
      }
    },
    paymentStatus(val) {
      if (!val) {
        this.paymentForm = {
          paymentExpireDate: null,
          // feeType: null
        };
      }
    },
    quitVisible(val) {
      if (!val) {
        this.quitForm = {
          // 退团信息确认
          isRefundCourseFee: null,
          isRefundInstrumentFee: null,
          isRefundTeachingAssistantsFee: null,
          reason: "",
        };
        this.$refs["quitForm"].resetFields();
      }
    },
    // visitVisiable(val) {
    //   if (!val) {
    //     this.$refs["visitForm"].resetFields();
    //   }
    // },
  },
};
</script>
<style lang="scss" scoped>
.auth {
  display: inline-block;
  & + .auth {
    margin-left: 0px;
  }
}
.dialog-footer.question {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.sigup-container {
  margin-left: 12px;
  .topWrap {
    padding: 18px 58px 18px 0;
    // height: 136px;
    background-color: #fff;
    // display: flex;
    // flex-direction: row;
    // justify-content: space-between;
    .msg.pay {
      color: #f85043;
    }
    .msg {
      text-align: right;
      color: #f97215;
      font-size: 32px;
      font-weight: bold;
      padding-top: 30px;
      box-sizing: border-box;
      img {
        width: 36px;
        height: 36px;
        position: relative;
        top: 5px;
        margin-right: 8px;
      }
    }
    h2 {
      height: 48px;
      line-height: 48px;
      position: relative;
      // padding-left: 30px;
      font-size: 32px;
      font-weight: 600;
      margin-bottom: 10px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      .term {
        height: 32px;
        line-height: 32px;
        border-radius: 24px;
        width: 100px;
        color: #14928a;
        border: 1px solid rgba(20, 146, 138, 1);
        font-size: 14px;
        text-align: center;
        margin-right: 12px;
        &:nth-child(1) {
          margin-left: 47px;
        }
      }
      .term.active {
        color: #fff;
        background-color: #14928a;
      }
      .squrt {
        position: absolute;
        left: -25px;
        top: 8px;
        height: 34px;
        width: 8px;
        background-color: #14928a;
      }
    }
    .btnList {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      & > div {
        margin-right: 15px;
        margin-bottom: 10px;
      }
    }
    .newBand.close {
      background-color: #777;
      border: 1px solid #777;
    }
  }
  .searchList {
    background-color: #fff;
    padding: 0 58p 0 0px;
  }
  .sigup-core {
    margin-top: 12px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    .left {
      width: 340px;
      background-color: #fff;
      height: 80vh;
      overflow: auto;
    }
    .right {
      width: calc(100% - 340px);
      margin-left: 12px;
      flex-grow: 1;
    }
  }
}
.el-dialog__body {
  overflow: hidden;
}
.left-code,
.right-code {
  // width: 50%;
  // float: left;
  h2 {
    font-size: 18px;
    text-align: center;
    padding-bottom: 8px;
  }

  .qrcode {
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      width: 200px;
      height: 200px;
      margin: 0 auto;
    }
  }
  .code-url {
    font-size: 18px;
    text-align: center;
    padding: 15px 15px 0 15px;
  }
}
.newBand {
  margin-bottom: 0;
  max-width: inherit;
}
/deep/.el-button--danger {
  background: #f85043;
}
.paymentForm {
  /deep/.el-input__inner,
  /deep/.el-input.el-input--suffix {
    width: 360px !important;
  }
}
.popoverWrap {
  p {
    line-height: 25px;
  }
}
</style>