Update resetPayList.vue

src/views/resetTeaming/components/resetPayList.vue

@@ -36,9 +36,9 @@
       <div class="newBand"
            v-permission="'/studentPayBase'"
            @click="setStudentPay">学员缴费设置</div>
-      <div class="newBand"
+      <!-- <div class="newBand"
       v-if="!isNewGropu"
-           @click="onCreateQRCode">续费二维码</div>
+           @click="onCreateQRCode">续费二维码</div> -->
     </div>
     <div class="tableWrap">
       <el-table style="width: 100%"
@@ -117,7 +117,7 @@
         <el-table-column align="center"
                          prop="memo"
                          label="备注"></el-table-column>
-        <el-table-column label="操作">
+        <el-table-column label="操作" fixed="right" min-width="150px">
           <template slot-scope="scope">
             <div>
               <el-button type="text"
@@ -131,6 +131,7 @@
                          v-permission="'musicGroupPaymentCalender/del'"
                          v-if="scope.row.paymentStatus == 0"
                          @click="detelePay(scope.row)">删除</el-button>
+              <el-button type="text" v-if="!isNewGropu" @click="onCreateQRCode(scope.row)">续费二维码</el-button>
             </div>
           </template>
         </el-table-column>
@@ -257,17 +258,6 @@
       />
     </el-dialog>
 
-    <el-dialog title="续费二维码"
-               :visible.sync="qrcodeStatus"
-               width="300px">
-      <div class="left-code">
-        <div id="qrcode"
-             class="qrcode code"
-             ref="qrCodeUrl"></div>
-        <p class="code-url"
-           v-if="codeUrl">{{ codeUrl }}</p>
-      </div>
-    </el-dialog>
     <el-dialog title="学员选择"
                :visible.sync="chioseStudentVisible"
                width='800px'>
@@ -282,6 +272,8 @@
 
       </div>
     </el-dialog>
+
+    <qr-code v-model="qrcodeStatus" title="续费二维码" :codeUrl="codeUrl" />
   </div>
 </template>
 <script>
@@ -291,7 +283,7 @@ import pagination from "@/components/Pagination/index";
 import load from "@/utils/loading";
 import qs from "qs";
 import dayjs from 'dayjs'
-import QRCode from 'qrcodejs2'
+import QrCode from "@/components/QrCode/index";
 import { vaildStudentUrl } from '@/utils/validate'
 import { addMusicGroupPaymentCalender, getMusicGroupPaymentCalender, resetMusicGroupPaymentCalender, delMusicGroupPaymentCalender } from "@/api/buildTeam";
 import { musicGroupPaymentCalenderQueryPage } from '../api'
@@ -305,7 +297,8 @@ export default {
     pagination,
     setStudentFee,
     userPayForm,
-    schoolPayForm
+    schoolPayForm,
+    QrCode
   },
   data () {
     return {
@@ -344,8 +337,6 @@ export default {
         }
       },
       qrcodeStatus: false, // 生成二维码
-      qrcodes: true,
-      qrcode: null,
       codeUrl: null,
       chioseStudentVisible: false,
       chioseStudentList: [],
@@ -396,23 +387,9 @@ export default {
         this.payForm.paymentValidEndDate = null
       }
     },
-    onCreateQRCode () { // 生成报名二维码
+    onCreateQRCode (row) { // 生成报名二维码
       this.qrcodeStatus = true
-      let id = this.$route.query.id
-
-      let teamName = this.$route.query.name
-      setTimeout(() => {
-        document.getElementById('qrcode').innerHTML = '';
-        this.qrcode = new QRCode('qrcode', {
-          width: 200,
-          height: 200,
-          colorDark: '#000000',
-          colorLight: '#ffffff',
-          correctLevel: QRCode.CorrectLevel.H
-        })
-        this.qrcode.makeCode(vaildStudentUrl() + '/#/SporadicLogin?type=renew&musicGroupId=' + id)
-        this.codeUrl = vaildStudentUrl() + '/#/SporadicLogin?type=renew&musicGroupId=' + id
-      }, 500)
+      this.codeUrl = vaildStudentUrl() + '/#/musicGroupRenew?calenderId=' + row.id
     },
     chioseStudent (val) {
       this.chioseStudentList = val;
@@ -561,11 +538,6 @@ export default {
 
   },
   watch: {
-    qrcodeStatus (val) {
-      if (!val) {
-        this.qrcode.clear()
-      }
-    },
     payVisible (val) {
       if (!val) {
         this.payForm = {