dy-admin-manager/src/views/resetTeaming/components/resetPayListSchool.vue

<!--  -->
<template>
  <div class="m-core">
    <save-form
      :inline="true"
      @submit="getList"
      save-key="resetPayListSchool"
      :model="searchForm"
    >
      <el-form-item>
        <el-select
          placeholder="缴费类型"
          v-model="searchForm.paymentType"
          clearable
          filterable
        >
          <el-option
            v-for="(item, index) in payOrderTypeList"
            :label="item.label"
            :value="item.value"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="danger" native-type="submit">搜索</el-button>
        <!-- <el-button @click="onReSet" type="primary">重置</el-button> -->
      </el-form-item>
    </save-form>
    <div class="topWrap">
      <div
        class="newBand"
        @click="newSchoolPay"
        v-if="teamStatus"
        v-permission="'musicGroupPaymentCalender/add'"
      >
        新建学校缴费
      </div>
      <div
        class="newBand"
        v-permission="'/studentPayBase'"
        v-if="teamStatus"
        @click="setStudentPay"
      >
        学员缴费设置
      </div>
      <!-- <div class="newBand"
      v-if="!isNewGropu"
           @click="onCreateQRCode">续费二维码</div> -->
    </div>
    <div class="tableWrap">
      <el-table
        style="width: 100%"
        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
        :data="tableList"
      >
        <el-table-column
          align="center"
          prop="batchNo"
          width="200"
          label="缴费批次"
        >
          <template slot-scope="scope">
            <div>
              <copy-text>{{ scope.row.batchNo }}</copy-text>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="paymentType" label="缴费类型">
          <template slot-scope="scope">
            <div>
              {{ scope.row.paymentType | userPaymentTypeFormat }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="paymentPattern" label="缴费方式">
          <template slot-scope="scope">
            <div>
              {{ scope.row.paymentPattern | teamPayStatus }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="auditStatus"
          label="审核状态"
          width="100px"
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.auditStatus | auditType }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="addCourseTotalTime"
          width="150px"
          label="加课总时长"
        >
        </el-table-column>
        <el-table-column
          align="center"
          width="150px"
          prop="courseCurrentPrice"
          label="现价"
        >
          <template slot-scope="scope">
            <div>
              {{
                (scope.row.paymentType === "SPAN_GROUP_CLASS_ADJUST"
                  ? scope.row.courseOriginalPrice
                  : scope.row.courseCurrentPrice) | moneyFormat
              }}
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center"
                         prop="status"
                         label="缴费状态">
          <template slot-scope="scope">
            <div>
              {{ scope.row.status | payTypeStatus }}
            </div>
          </template>
        </el-table-column> -->
        <!-- <el-table-column align="center"
                         prop="operatorName"
                         label="责任人">
        </el-table-column> -->
        <el-table-column align="center" prop="memo" width="200px" label="备注">
          <template slot-scope="scope">
            <overflow-text width="200px" :text="scope.row.memo" />
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" min-width="200px">
          <template slot-scope="scope">
            <div>
              <el-button
                type="text"
                @click="lookList(scope.row)"
                v-permission="'musicGroupPaymentCalender/queryPage'"
                >查看</el-button
              >
              <!-- <el-button type="text"
                         @click="lookDetail(scope.row)"
                         v-permission="'musicGroupPaymentCalender/auditListDetail'">查看</el-button> -->
              <el-button
                type="text"
                @click="openChioseStudent(scope.row)"
                v-if="
                  scope.row.auditStatus != 'REJECT' &&
                  scope.row.auditStatus != 'AUDITING' &&
                  teamStatus &&
                  scope.row.paymentType != 'MUSIC_APPLY' &&
                  scope.row.paymentType != 'ADD_STUDENT'
                "
                v-permission="'musicGroupPaymentCalenderDetail/batchAdd'"
                >添加学员</el-button
              >
              <el-button
                type="text"
                v-if="teamStatus && scope.row.auditStatus === 'REJECT'"
                v-permission="'musicGroupPaymentCalender/update'"
                @click="resetPay(scope.row)"
                >修改</el-button
              >

              <el-button
                type="text"
                v-permission="'musicGroupPaymentCalender/delByBatchNo'"
                v-if="
                  (scope.row.auditStatus == 'REJECT' ||
                    scope.row.auditStatus == 'AUDITING' ||
                    scope.row.auditStatus == 'NO') &&
                  teamStatus &&
                  scope.row.paymentType != 'ADD_STUDENT' &&
                  scope.row.paymentType != 'SPAN_GROUP_CLASS_ADJUST'
                "
                @click="removeBatchNo(scope.row)"
                >删除</el-button
              >

              <!-- <el-button type="text"
                         v-if="!isNewGropu&&teamStatus&&scope.row.paymentType!='MUSIC_APPLY'"
                         @click="onCreateQRCode(scope.row)">续费二维码</el-button> -->
              <!-- <el-button type="text"
                         v-if="isNewGropu"
                         v-permission="'musicGroup/findMusicGroupSubjectInfo/966'"
                         @click="onPreview(scope.row)">预览</el-button> -->
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        save-key="resetPayListSchool"
        sync
        :total.sync="rules.total"
        :page.sync="rules.page"
        :limit.sync="rules.limit"
        :page-sizes="rules.page_size"
        @pagination="getList"
      />
    </div>
    <el-dialog
      :visible.sync="payVisible"
      :close-on-click-modal="false"
      width="500px"
      :title="diTitle"
    >
      <el-form
        :model="payForm"
        :inline="true"
        label-width="120px"
        label-position="right"
        ref="payForm"
      >
        <el-form-item
          label="缴费开始日期"
          :rules="[
            { required: true, message: '请设置缴费开始日期', trigger: 'blur' },
          ]"
          prop="startPaymentDate"
        >
          <el-date-picker
            v-model.trim="payForm.startPaymentDate"
            @change="changeStartTime"
            type="date"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            placeholder="开始日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          label="缴费结束日期"
          :rules="[
            { required: true, message: '请设置缴费结束日期', trigger: 'blur' },
          ]"
          prop="deadlinePaymentDate"
        >
          <el-date-picker
            v-model.trim="payForm.deadlinePaymentDate"
            type="date"
            :picker-options="beginDate(payForm.startPaymentDate)"
            value-format="yyyy-MM-dd"
            placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          label="缴费方式"
          prop="paymentPattern"
          :rules="[{ required: true, message: '请选择缴费方式' }]"
        >
          <el-select
            placeholder="缴费方式"
            style="width: 220px"
            clearable
            filterable
            @change="paymentPatternChange"
            v-model.trim="payForm.paymentPattern"
          >
            <el-option :value="0" label="按月"></el-option>
            <el-option :value="1" label="按季"></el-option>
            <el-option :value="2" label="一次性"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="缴费有效期开始"
          :rules="[
            {
              required: true,
              message: '请设置缴费有效期开始日期',
              trigger: 'blur',
            },
          ]"
          prop="paymentValidStartDate"
        >
          <el-date-picker
            v-model.trim="payForm.paymentValidStartDate"
            type="date"
            @change="changePaymentStartTime"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            placeholder="有效期开始日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          label="缴费有效期结束"
          :rules="[
            {
              required: payForm.paymentPattern !== 2,
              message: '请设置缴费有效期结束日期',
              trigger: 'blur',
            },
          ]"
          prop="paymentValidEndDate"
        >
          <el-date-picker
            v-model.trim="payForm.paymentValidEndDate"
            type="date"
            :disabled="payForm.paymentPattern === 2"
            :picker-options="beginDate(payForm.paymentValidStartDate)"
            value-format="yyyy-MM-dd"
            placeholder="有效期结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          label="收费类型"
          v-if="isNew"
          :rules="[
            { required: true, message: '请选择收费类型', trigger: 'blur' },
          ]"
          prop="type"
        >
          <el-select
            v-model.trim="payForm.type"
            style="width: 220px !important"
            placeholder="课程类型"
          >
            <el-option label="线上" value="ONLINE"></el-option>
            <el-option label="线下" value="OFFLINE"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="备注"
          v-if="isNew"
          :rules="[{ required: true, message: '请填写备注', trigger: 'blur' }]"
          prop="memo"
        >
          <el-input
            type="textarea"
            style="width: 220px !important"
            :rows="4"
            placeholder="请填写备注"
            v-model="payForm.memo"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="payVisible = false">取 消</el-button>
        <el-button type="primary" v-if="isNew" @click="newPayInfo"
          >确 定</el-button
        >
        <el-button type="primary" v-else @click="resetPayDate">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="itemsVisible" title="查看缴费计划" width="1000px">
      <pay-items
        v-if="itemsVisible"
        ref="payItems"
        :batchNo="viewDetail && viewDetail.batchNo"
        payUserType="SCHOOL"
        :teamStatus="teamStatus"
        :teamType="teamType"
        :isNewGropu="isNewGropu"
        @lookUserList="lookUserList"
        @lookDetail="lookDetail"
        @openChioseStudent="openChioseStudent"
        @resetPay="resetPay"
        @close="itemsVisible = false"
        @onCreateQRCode="onCreateQRCode"
      />
    </el-dialog>
    <el-dialog
      title="查看缴费用户列表"
      :visible.sync="userListVisible"
      width="850px"
    >
      <schoolPayUserList
        v-if="userListVisible && viewDetail"
        :detail="viewDetail"
      />
    </el-dialog>
    <el-dialog
      title="查看"
      :visible.sync="reviewVisible"
      width="900px"
      destroy-on-close
    >
      <reviewDetail
        @close="reviewVisible = false"
        @submited="getList"
        :detail="viewDetail"
        :musicGroupId="$route.query.id"
        destroy-on-close
      />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="reviewVisible = false"
          >关闭</el-button
        >
      </div>
    </el-dialog>
    <el-dialog :title="payFormTitle" :visible.sync="userVisible" width="830px">
      <userPayForm
        v-if="userVisible"
        @close="userVisible = false"
        @submited="payedSubmited"
        @changeActive="changeActive"
        :organizationCourseUnitPriceSettings="
          organizationCourseUnitPriceSettings
        "
        :rowDetail="activeRow"
        :type="payFormType"
        :baseInfo="baseInfo"
        :paymentType="team_status == 'PRE_BUILD_FEE' ? 0 : undefined"
        :musicGroupId="$route.query.id"
      />
      <!--  -->
    </el-dialog>

    <el-dialog
      title="学员选择"
      :visible.sync="chioseStudentVisible"
      destroy-on-close
      append-to-body
      width="800px"
    >
      <setStudentFee
        @chioseStudent="chioseStudent"
        v-if="chioseStudentVisible"
        ref="setStudentFee"
        :batchNo="batchNo"
        :musicGroupPaymentCalenderId="musicGroupPaymentCalenderId"
        @submited="chioseStudentSubmited"
        :clearTale="clearStduent"
      ></setStudentFee>
      <div slot="footer" class="dialog-footer">
        <el-button @click="chioseStudentVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitNewPay">确 定</el-button>
      </div>
    </el-dialog>

    <qr-code v-model="qrcodeStatus" title="续费二维码" :codeUrl="codeUrl" />

    <el-dialog title="确认收款" :visible.sync="getMoneyVisible" width="600px">
      <isGetMoney @close="closeMoney" :data="activeRow" ref="getMoney" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="getMoneyVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitGetMoney">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import dayjs from "dayjs";
import QrCode from "@/components/QrCode/index";
import { vaildStudentUrl } from "@/utils/validate";
import {
  resetMusicGroupPaymentCalender,
  delMusicGroupPaymentCalender,
} from "@/api/buildTeam";
import { getOrganizationCourseUnitPriceSettings } from "@/api/specialSetting";
import { getAuditList } from "@/api/auditManager";
import {
  getMusicGroupStu,
  musicGroupPaymentCalenderDetailBatchAdd,
  musicGroupPaymentCalenderDelByBatchNo,
} from "../api";
import setStudentFee from "./studentPayBase";
import userPayForm from "../modals/user-pay-form";
import payItems from "../modals/pay-items";
import schoolPayForm from "../modals/school-pay-form";
import schoolPayUserList from "../modals/school-pay-user-list";
import isGetMoney from "../modals/isGetMoney";
import review from "../modals/review";
import reviewDetail from "../modals/review-detail";
import { userPaymentType } from "@/constant";
import { objectToOptions } from "@/utils";
import { payOrderTypeList } from "@/utils/searchArray";
import { getTeamBaseInfo } from "@/api/buildTeam";
export default {
  props: [ "isNewGropu"],
  components: {
    pagination,
    setStudentFee,
    userPayForm,
    schoolPayForm,
    QrCode,
    review,
    reviewDetail,
    teamType: "",
    "pay-items": payItems,
    schoolPayUserList,
    isGetMoney,
  },
  data() {
    return {
      musicGroupStu: [],
      payFormType: "user",
      userVisible: false,
      schoolVisible: false,
      reviewVisible: false,
      userListVisible: false,
      itemsVisible: false,
      teamType: this.$route.query.type,
      organizationCourseUnitPriceSettings: [],
      searchForm: {
        paymentType: null,
      },
      viewDetail: null,
      tableList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50], // 选择限制显示条数
      },
      isInit: false,
      diTitle: "新增缴费",
      payVisible: false,
      payForm: {
        startPaymentDate: null,
        deadlinePaymentDate: null,
        paymentPattern: null,
        paymentValidStartDate: null,
        paymentValidEndDate: null,
        type: null,
        memo: null,
      },
      isNew: false,
      activeRow: null,
      pickerOptions: {
        firstDayOfWeek: 1,
        disabledDate(time) {
          return time.getTime() + 86400000 <= new Date().getTime();
        },
      },
      qrcodeStatus: false, // 生成二维码
      codeUrl: null,
      chioseStudentVisible: false,
      chioseStudentList: [],
      clearStduent: true,
      batchNo: "",
      musicGroupPaymentCalenderId: "",
      payOrderTypeLists: payOrderTypeList,
      getMoneyVisible: false,
      baseInfo:null
    };
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  async mounted() {
    // 获取分部
    try {
      const res = await getOrganizationCourseUnitPriceSettings({
        rows: 9999,
      });
      this.organizationCourseUnitPriceSettings = res.data.rows;
    } catch (error) {}
    this.init();
  },
  computed: {
    payOrderTypeList() {
      return objectToOptions(userPaymentType);
    },
    payFormTitle() {
      if (this.isNew) {
        return this.payFormType === "user" ? "新增学员缴费" : "新增学校缴费";
      } else {
        return this.payFormType === "user" ? "修改学员缴费" : "修改学校缴费";
      }
    },
    teamStatus() {
      // let type = this.$route.query.type;
      let team_status = this.$route.query.team_status;
      return team_status == "PRE_BUILD_FEE" || team_status == "PROGRESS";
    },
  },
  // activated () {
  //   this.init();
  // },
  methods: {
    async init() {
      this.team_status = this.$route.query.team_status;
      try {
        const res = await getMusicGroupStu({
          musicGroupId: this.$route.query.id,
        });
      } catch (error) {}
           getTeamBaseInfo({ musicGroupId: this.$route.query.id }).then((res) => {
        if (res.code == 200) {
          this.baseInfo = res.data;
        }
      });
      this.getList();
    },
    newUserPay() {
      this.payFormType = "user";
      this.isNew = true;
      this.activeRow = null;
      this.userVisible = true;
    },
    newSchoolPay() {
      this.payFormType = "school";
      this.isNew = true;
      this.activeRow = null;
      this.userVisible = true;
    },
    getList() {
      let musicGroupId = this.$route.query.id;
      return getAuditList({
        page: this.rules.page,
        rows: this.rules.limit,
        search: musicGroupId,
        payUserType: "SCHOOL",
        paymentType: this.searchForm.paymentType,
      }).then((res) => {
        if (res.code == 200) {
          this.rules.total = res.data.total;
          this.tableList = res.data.rows;
        }
      });
    },
    paymentPatternChange(val) {
      if (val === 2) {
        this.payForm.paymentValidEndDate = null;
      }
    },
    onCreateQRCode(row) {
      // 生成报名二维码
      this.qrcodeStatus = true;
      this.codeUrl =
        vaildStudentUrl() + "/#/musicGroupRenew?calenderId=" + row.id;
    },
    chioseStudent(val) {
      this.chioseStudentList = val;
    },
    newPay() {
      this.diTitle = "新增缴费";
      this.isNew = true;
      this.payVisible = true;
    },
    resetPay(row) {
      this.diTitle = "修改缴费";
      this.isNew = false;
      this.activeRow = row;
      this.payFormType = row.payUserType === "SCHOOL" ? "school" : "user";
      this.userVisible = true;
    },
    changeActive(val) {
      if (this.$listeners.changeActive) {
        this.$listeners.changeActive(val);
      }
    },
    async chioseStudentSubmited() {
      try {
        await this.$confirm("缴费创建完成, 是否立即排课？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        if (this.$listeners.changeActive) {
          this.$listeners.changeActive({
            name: "5",
          });
        }
      } catch (error) {}
    },
    detelePay(row) {
      let id = row.id;
      this.$confirm(`确定删除该缴费周期?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delMusicGroupPaymentCalender({ id }).then((res) => {
            if (res.code == 200) {
              this.$message.success("删除成功");
              this.getList();
            }
          });
        })
        .catch(() => {});
    },
    lookList(row) {
      this.viewDetail = row;
      this.itemsVisible = true;
    },
    lookUserList(row) {
      console.log({ ...row });
      this.viewDetail = { ...row };
      this.userListVisible = true;
    },
    lookDetail(row) {
      let query = this.$route.query;
      this.$route.query.paymentId = row.id;
      this.viewDetail = row;
      if (row.payUserType === "SCHOOL") {
        this.reviewVisible = true;
      } else {
        this.$router.push({ path: "/business/strudentPayInfo", query });
      }
    },
    setStudentPay() {
      let query = this.$route.query;
      this.$router.push({ path: "/business/studentPayBase", query });
    },
    async removeBatchNo(row) {
      try {
        await this.$confirm("是否确认删除该缴费批次?", "提示", {
          type: "warning",
        });
        await musicGroupPaymentCalenderDelByBatchNo({ batchNo: row.batchNo });
        this.$message.success("删除成功");
        this.getList();
      } catch (error) {}
    },
    newPayInfo() {
      this.$refs["payForm"].validate((res) => {
        if (res) {
          /**
           *   payForm: {
        startPaymentDate: null,
        deadlinePaymentDate: null,
        type: null,
        memo: null
      },
           *
           */
          this.chioseStudentVisible = true;
          return;
        }
      });
    },
    submitNewPay() {
      if (this.chioseStudentList.length < 1) {
        this.$message.error("请至少选择一名学员");
        return;
      }

      let obj = {};
      obj.userIdList = this.chioseStudentList.map((stu) => {
        return stu.userId;
      });
      obj.batchNo = this.batchNo;
      musicGroupPaymentCalenderDetailBatchAdd(obj).then((res) => {
        if (res.code == 200) {
          this.$message.success("添加成功");
          this.$refs.setStudentFee.clearTable();
          this.payVisible = false;
          this.chioseStudentVisible = false;
          this.getList();
          // this.$refs.payItems?.getList()
        }
      });
    },
    resetPayDate() {
      resetMusicGroupPaymentCalender({
        id: this.activeRow.id,
        startPaymentDate: this.payForm.startPaymentDate,
        deadlinePaymentDate: this.payForm.deadlinePaymentDate,
        paymentValidStartDate: this.payForm.paymentValidStartDate
          ? dayjs(this.payForm.paymentValidStartDate).format("YYYY-MM-DD")
          : this.payForm.paymentValidStartDate,
        paymentValidEndDate: this.payForm.paymentValidEndDate
          ? dayjs(this.payForm.paymentValidEndDate).format("YYYY-MM-DD")
          : this.payForm.paymentValidEndDate,
        paymentPattern: this.payForm.paymentPattern,
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success("修改成功");
          this.payVisible = false;
          this.getList();
        }
      });
    },
    changeStartTime(val) {
      this.payForm.deadlinePaymentDate = this.dateAddDays(val, 3);
    },
    changePaymentStartTime(val) {
      this.payForm.paymentValidEndDate = null;
    },
    dateAddDays(dataStr, dayCount) {
      let strdate = dataStr; //日期字符串
      let isdate = new Date(strdate.replace(/-/g, "/")); //把日期字符串转换成日期格式
      isdate = new Date((isdate / 1000 + 86400 * dayCount) * 1000); //日期加1天
      let pdate =
        isdate.getFullYear() +
        "-" +
        (isdate.getMonth() + 1) +
        "-" +
        isdate.getDate(); //把日期格式转换成字符串
      return pdate;
    },
    beginDate(end) {
      return {
        firstDayOfWeek: 1,
        disabledDate(time) {
          if (end) {
            return new Date(end).getTime() - 86400000 >= time.getTime();
          } else {
            return time.getTime() + 86400000 < Date.now();
            //开始时间不选时，结束时间最大值小于等于当天
          }
        },
      };
    },
    search() {
      this.rules.page = 1;
      this.getList();
    },
    onReSet() {
      this.searchForm = { payUserType: null };
    },
    openChioseStudent(row) {
      this.chioseStudentVisible = true;
      this.batchNo = row.batchNo;
      this.musicGroupPaymentCalenderId = row.id;
    },
    async payedSubmited(data) {
      try {
        await this.getList();
        // if (!this.isNewGropu) {
        //   this.chioseStudentVisible = true;
        //   if (data) {
        //     this.musicGroupPaymentCalenderId = data.musicGroupPaymentCalenderId;
        //   }
        // }
      } catch (error) {}
    },
    commmitGetMoney(row) {
      this.activeRow = row;
      this.getMoneyVisible = true;
    },
    submitGetMoney() {
      this.$refs.getMoney.submitGetMoney();
    },
    closeMoney() {
      this.getMoneyVisible = false;
      this.getList();
    },
  },
  watch: {
    chioseStudentVisible() {
      this.chioseStudentList = [];
    },
    payVisible(val) {
      if (!val) {
        this.payForm = {
          startPaymentDate: null,
          paymentPattern: null,
          paymentValidStartDate: null,
          paymentValidEndDate: null,
          type: null,
          memo: null,
          deadlinePaymentDate: null,
        };
        this.$refs["payForm"].resetFields();
      }
    },
  },
};
</script>
<style lang='scss' scoped>
.topWrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  div {
    margin-right: 10px;
  }
}
.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;
  }
}
</style>