修改报名二维码

src/views/training/meeting/index.vue

@@ -56,12 +56,15 @@
                                 </div>
                             </template>
                         </vxe-column>
-                        <vxe-column field="signupsTime" min-width="350" title="报名时间" class-name="f-w-600">
+                        <vxe-column field="signupsTime" min-width="350" title="报名时间" class-name="f-w-600 p-rtv">
                             <template #default="{ row }">
                                 <div class="d-flex a-c">
                                     {{ row.signupStart.slice(0, -3) }}~{{ row.signupEnd.slice(0, -3) }}
                                     <DictTag :options="lm_training_join_status" :value="row?.joinStatus"></DictTag>
                                 </div>
+                                <div v-if="row.joinStatus == '1'" class="pos-tag">
+                                    <el-button @click="openEnrollRegistration(row)" type="primary" size="small" text>报名二维码{{ '>' }}</el-button>
+                                </div>
                             </template>
                         </vxe-column>
                         <vxe-column field="joinType" title="会议方式" width="80">
@@ -125,19 +128,21 @@
     </div>
     <SignInCode v-if="showSignIn" v-model:show="showSignIn" :info="rowInfo" :dict="{ lm_training_join_type }"></SignInCode>
     <TemporaryRegistration v-if="showTemporary" v-model:show="showTemporary" :info="temporaryRegistration" :dict="{ lm_training_join_type }"></TemporaryRegistration>
+    <EnrollRegistration v-if="showEnroll" v-model:show="showEnroll" :info="rowInfo" :dict="{ lm_training_join_type }"></EnrollRegistration>
 </template>
 
 <script setup name="meeting" lang="ts">
 import { colNoData } from '@/utils/noData';
 import { searchTabs } from '@/views/models';
 import { trainingList, queryTrainingCount, trainingDelete, publishTraining, unpublishTraining, offOrNoTemp } from '@/api/training';
-import { SignInCode, TemporaryRegistration } from '../models';
+import { SignInCode, TemporaryRegistration, EnrollRegistration } from '../models';
 const router = useRouter();
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { lm_training_join_type, yes_no, lm_training_join_status, lm_training_status } = toRefs<any>(proxy?.useDict('lm_training_join_type', 'yes_no', 'lm_training_join_status', 'lm_training_status'));
 const loading = ref(true);
 const showSearch = ref(true);
 const showSignIn = ref(false);
+const showEnroll = ref(false);
 const total = ref(0);
 const queryFormRef = ref<ElFormInstance>();
 const dataList = ref<any[]>([]);
@@ -185,7 +190,10 @@ const offOrNoTemps = async (row) => {
     })
 }
 
-
+const openEnrollRegistration = (row) => {
+    rowInfo.value = { ...row };
+    showEnroll.value = true;
+};
 const confirmEvent = (row) => {
     if (resolvePromise) {
         loading1.value = false;
@@ -295,4 +303,11 @@ onMounted(() => {
     justify-content: flex-start;
     /* 左对齐 */
 }
+/* 报名二维码样式 */
+.pos-tag {
+    position: absolute;
+    right: 0;
+    top: 0;
+    cursor: pointer;
+}
 </style>

src/views/training/models/EnrollRegistration.vue

@@ -0,0 +1,63 @@
+<template>
+    <vxe-modal v-model="dialogVisible" :title="title" show-zoom resize show-footer destroy-on-close transfer @hide="close" :width="width" :z-index="1002">
+        <template #default>
+            <div>
+                <div v-if="info" ref="codeImgRef" style="width: 400px; margin: 0 auto;">
+                    <div class="mb-6 f-w-6 f-s-16 c-333">快速报名通道</div>
+                    <div class="mb-6">会议名称:{{ info?.trainingName }}</div>
+                    <div class="mb-6">会议时间:{{ info?.trainingStart }}~{{ info?.trainingEnd }}</div>
+                    <div class="mb-6">会议方式：{{ selectDictLabel(dict.lm_training_join_type, info.joinType) }}</div>
+                    <div class="mb-6">联系电话：{{ info?.tel }}</div>
+                    <div class="d-flex j-c a-c pd-10">
+                        <vueQr :text="VITE_APP_SHARE_QR_CODE_URL + '/enroll?id=' + info?.id + '&tempJoin=0'" :size="300" colorDark="green"></vueQr>
+                    </div>
+                </div>
+            </div>
+
+            <div class="d-flex j-c">
+                <!-- <el-button @click="saveImg">保存临时报名二维码</el-button> -->
+            </div>
+        </template>
+    </vxe-modal>
+</template>
+
+<script setup name="EnrollRegistration" lang="ts">
+import { propTypes } from '@/utils/propTypes';
+import vueQr from 'vue-qr/src/packages/vue-qr.vue';
+import html2canvas from 'html2canvas';
+const emit = defineEmits(['update:show', 'close', 'success']);
+const props = defineProps({
+    show: propTypes.bool.def(false),
+    title: propTypes.string.def(' '),
+    width: propTypes.number.def(500),
+    info: propTypes.any.def(null),
+    dict: propTypes.object.def({})
+});
+const VITE_APP_SHARE_QR_CODE_URL = ref(import.meta.env.VITE_APP_SHARE_QR_CODE_URL);
+const dialogVisible = ref(false);
+const close = () => {
+    emit('update:show', false);
+    emit('close', false);
+};
+const codeImgRef = ref<HTMLElement | null>(null);
+const saveImg = () => {
+    html2canvas(codeImgRef.value, {
+        useCORS: true,
+        allowTaint: false,
+        scale: 2
+    }).then((canvas) => {
+        const url = canvas.toDataURL('image/png');
+        const a: any = document.createElement('a');
+        a.download = `${props?.info?.trainingName}-临时报名二维码.png`;
+        a.href = url;
+        a.click();
+    });
+};
+watch(
+    () => props.show,
+    (val) => {
+        dialogVisible.value = val;
+    },
+    { immediate: true }
+);
+</script>

src/views/training/models/index.ts

@@ -4,4 +4,5 @@ export { default as MeetingDetailattend } from './meeting-detail-attend.vue';
 export { default as TemporaryRegistration } from './temporary-registration.vue'; // 查看签到码
 export { default as MeetingCustom } from './meeting-custom.vue'; // 查看签到码
 export { default as registrationInfo } from './registration-info.vue'; 
-export { default as meetingCustomPreview } from './meeting-custom-preview.vue'; 
+export { default as meetingCustomPreview } from './meeting-custom-preview.vue'; 
+export { default as EnrollRegistration } from './EnrollRegistration.vue';