|
@@ -8,6 +8,7 @@
|
|
|
<div class="newBand"
|
|
|
v-permission="'/studentPayBase'"
|
|
|
@click="setStudentPay">学员缴费设置</div>
|
|
|
+ <div class="newBand" @click="onCreateQRCode">续费二维码</div>
|
|
|
</div>
|
|
|
<div class="tableWrap">
|
|
|
<el-table style="width: 100%"
|
|
@@ -138,6 +139,18 @@
|
|
|
@click="resetPayDate">确 定</el-button>
|
|
|
</div>
|
|
|
</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>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
@@ -145,6 +158,8 @@ import axios from "axios";
|
|
|
import { getToken } from "@/utils/auth";
|
|
|
import pagination from "@/components/Pagination/index";
|
|
|
import load from "@/utils/loading";
|
|
|
+import QRCode from 'qrcodejs2'
|
|
|
+import { vaildStudentUrl } from '@/utils/validate'
|
|
|
import { addMusicGroupPaymentCalender, getMusicGroupPaymentCalender, resetMusicGroupPaymentCalender, delMusicGroupPaymentCalender } from "@/api/buildTeam";
|
|
|
export default {
|
|
|
components: { pagination },
|
|
@@ -176,6 +191,10 @@ export default {
|
|
|
return time.getTime() + 86400000 <= new Date().getTime();
|
|
|
}
|
|
|
},
|
|
|
+ qrcodeStatus: false, // 生成二维码
|
|
|
+ qrcodes: true,
|
|
|
+ qrcode: null,
|
|
|
+ codeUrl: null,
|
|
|
};
|
|
|
},
|
|
|
//生命周期 - 创建完成(可以访问当前this实例)
|
|
@@ -203,6 +222,24 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
+ onCreateQRCode () { // 生成报名二维码
|
|
|
+ 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)
|
|
|
+ },
|
|
|
newPay () {
|
|
|
this.diTitle = '新增缴费'
|
|
|
this.isNew = true
|
|
@@ -264,6 +301,11 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
+ qrcodeStatus (val) {
|
|
|
+ if (!val) {
|
|
|
+ this.qrcode.clear()
|
|
|
+ }
|
|
|
+ },
|
|
|
payVisible (val) {
|
|
|
if (!val) {
|
|
|
this.payForm = {
|
|
@@ -286,4 +328,30 @@ export default {
|
|
|
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>
|