乐器置换

1

src/views/reaplceMusicPlayer/index.vue

@@ -104,9 +104,11 @@
           <el-table-column align="center" prop="studentId" label="操作">
             <template slot-scope="scope">
               <div>
-                <el-button type="text" @click="lookDetail(scope.row)">详情</el-button>
-                <el-button type="text">调查链接</el-button>
-                <el-button type="text">统计链接</el-button>
+                <el-button type="text" @click="lookDetail(scope.row)"
+                  >详情</el-button
+                >
+                <el-button type="text" @click="onCreateQRCode(scope.row,'调查链接')">调查链接</el-button>
+                <el-button type="text"  @click="onCreateQRCode(scope.row,'统计链接')">统计链接</el-button>
                 <el-button type="text">开启缴费</el-button>
               </div>
             </template>
@@ -128,40 +130,47 @@
       width="500px"
       v-if="makeUrlVisible"
     >
-        <addUrl ref="addUrl" @close='close'/>
+      <addUrl ref="addUrl" @close="close" />
       <div slot="footer">
         <el-button @click="makeUrlVisible = false">取 消</el-button>
-        <el-button type="primary" @click="addurl"
-          >生成链接</el-button
-        >
+        <el-button type="primary" @click="addurl">生成链接</el-button>
       </div>
     </el-dialog>
 
-        <el-dialog
+    <el-dialog
       title="详情"
       :visible.sync="detailVisible"
       width="1000px"
       v-if="detailVisible"
     >
-        <detail ref="detail" @close='close'/>
+      <detail ref="detail" @close="close" />
       <div slot="footer">
         <el-button type="primary" @click="detailVisible = false"
           >确定</el-button
         >
       </div>
     </el-dialog>
+    <el-dialog :title="qrcodeName" :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-if="codeUrl">{{ codeUrl }}</p>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import axios from "axios";
 import { getToken } from "@/utils/auth";
+import { vaildStudentUrl } from "@/utils/validate";
 import pagination from "@/components/Pagination/index";
-import addUrl from './modals/addUrl'
-import detail from './modals/detail'
+import addUrl from "./modals/addUrl";
+import detail from "./modals/detail";
 import load from "@/utils/loading";
+import QRCode from "qrcodejs2";
 export default {
-  components: { pagination,addUrl,detail },
+  components: { pagination, addUrl, detail },
   data() {
     return {
       searchForm: {
@@ -179,7 +188,11 @@ export default {
         page_size: [10, 20, 40, 50], // 选择限制显示条数
       },
       makeUrlVisible: false,
-      detailVisible:false
+      detailVisible: false,
+      codeUrl: "",
+      qrcodes: true,
+      qrcodeStatus:false,
+      qrcodeName:'调查链接'
     };
   },
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -205,17 +218,39 @@ export default {
     makeUrl() {
       this.makeUrlVisible = true;
     },
-    addurl(){
-        this.$refs.addUrl.submit()
+    addurl() {
+      this.$refs.addUrl.submit();
     },
-    close(){
-        this.makeUrlVisible=false;
-        this.detailVisible = false
+    close() {
+      this.makeUrlVisible = false;
+      this.detailVisible = false;
     },
     onExport() {},
-    lookDetail(row){
-    this.detailVisible = true
-    }
+    lookDetail(row) {
+      this.detailVisible = true;
+    },
+    onCreateQRCode(row,name) {
+      // 生成链接
+      this.qrcodeName = name;
+      this.qrcodeStatus = true;
+      let id = this.$route.query.id;
+      if (this.qrcodes) {
+        this.qrcodes = false;
+        setTimeout(() => {
+          this.qrcode = new QRCode("qrcode", {
+            width: 260,
+            height: 260,
+            colorDark: "#000000",
+            colorLight: "#ffffff",
+            correctLevel: QRCode.CorrectLevel.H,
+          });
+          this.qrcode.makeCode(
+            vaildStudentUrl() + "/#/login?musicGroupId=" + id
+          );
+          this.codeUrl = vaildStudentUrl() + "/#/login?musicGroupId=" + id;
+        }, 500);
+      }
+    },
   },
 };
 </script>
@@ -225,4 +260,7 @@ export default {
   flex-direction: row;
   justify-content: flex-start;
 }
+.code-url {
+  margin-top: 10px;
+}
 </style>