|
|
@@ -0,0 +1,280 @@
|
|
|
+import { defineComponent, onMounted, reactive, ref } from 'vue';
|
|
|
+import styles from './noticeModal.module.less';
|
|
|
+// import p1 from './images/1.png'
|
|
|
+import p2 from './images/2.png';
|
|
|
+import p3 from './images/3.png';
|
|
|
+import p4 from './images/4.png';
|
|
|
+import p5 from './images/5.png';
|
|
|
+import p6 from './images/6.png';
|
|
|
+import iconClose from './images/icon-close.png';
|
|
|
+import iconDownload from './images/icon-download.png';
|
|
|
+import TheQrCode from '@/components/TheQrCode';
|
|
|
+import html2canvas from 'html2canvas';
|
|
|
+import { vaildUrl } from '@/utils/urlUtils';
|
|
|
+import dayjs from 'dayjs';
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ name: 'notice-modal',
|
|
|
+ props: {
|
|
|
+ data: {
|
|
|
+ type: Object,
|
|
|
+ default: () => ({})
|
|
|
+ }
|
|
|
+ },
|
|
|
+ emits: ['close'],
|
|
|
+ setup(props, { emit }) {
|
|
|
+ const data = reactive({
|
|
|
+ uploading: false
|
|
|
+ });
|
|
|
+
|
|
|
+ const extraConfig = ref({} as any);
|
|
|
+
|
|
|
+ const url = ref(
|
|
|
+ vaildUrl() + `/classroom-app/#/student-register?sId=${props.data.id}`
|
|
|
+ );
|
|
|
+ if (props.data.registerType != 'BUG_GOODS') {
|
|
|
+ url.value =
|
|
|
+ vaildUrl() + `/classroom-app/#/register-member?sId=${props.data.id}`;
|
|
|
+ }
|
|
|
+
|
|
|
+ const imgs = reactive({
|
|
|
+ saveLoading: false,
|
|
|
+ image: null as any,
|
|
|
+ shareLoading: false
|
|
|
+ });
|
|
|
+ const downImg = () => {
|
|
|
+ if (imgs.saveLoading) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ imgs.saveLoading = true;
|
|
|
+ // 判断是否已经生成图片
|
|
|
+ if (imgs.image) {
|
|
|
+ saveImg();
|
|
|
+ } else {
|
|
|
+ const container: any = document.getElementById(`preview-container`);
|
|
|
+
|
|
|
+ html2canvas(container, {
|
|
|
+ allowTaint: true,
|
|
|
+ useCORS: true,
|
|
|
+ backgroundColor: null
|
|
|
+ })
|
|
|
+ .then(async canvas => {
|
|
|
+ const url = canvas.toDataURL('image/png');
|
|
|
+ imgs.image = url;
|
|
|
+ saveImg();
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ imgs.saveLoading = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const saveImg = async () => {
|
|
|
+ // showLoadingToast({ message: '图片生成中...', forbidClick: true });
|
|
|
+ setTimeout(() => {
|
|
|
+ imgs.saveLoading = false;
|
|
|
+ }, 100);
|
|
|
+ const link = document.createElement('a');
|
|
|
+ link.setAttribute('download', '报名图片' + '.png');
|
|
|
+ // 添加时间戳，防止浏览器缓存图片
|
|
|
+ // console.log(imgUrl,'imgUrl')
|
|
|
+
|
|
|
+ link.href = imgs.image;
|
|
|
+ link.click();
|
|
|
+ // const res = await promisefiyPostMessage({
|
|
|
+ // api: 'savePicture',
|
|
|
+ // content: {
|
|
|
+ // base64: imgs.image
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // if (res?.content?.status === 'success') {
|
|
|
+ // showSuccessToast('保存成功');
|
|
|
+ // } else {
|
|
|
+ // showFailToast('保存失败');
|
|
|
+ // }
|
|
|
+ };
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ const extraConfigS = props.data.extraConfig
|
|
|
+ ? JSON.parse(props.data.extraConfig)
|
|
|
+ : {};
|
|
|
+ const content = extraConfigS.content.replace(/\n/gi, '<br />');
|
|
|
+ extraConfig.value = {
|
|
|
+ ...extraConfigS,
|
|
|
+ content
|
|
|
+ };
|
|
|
+ });
|
|
|
+ return () => (
|
|
|
+ <div class={styles.noticeBack}>
|
|
|
+ <div class={styles.noticeModal} id="preview-container">
|
|
|
+ <img src={p5} class={styles.bg} />
|
|
|
+ <img src={p4} class={styles.header} />
|
|
|
+ <img src={p2} class={styles.bottom} />
|
|
|
+ <img src={p6} class={styles.bottom_d} />
|
|
|
+
|
|
|
+ <div class={styles.schoolName}>
|
|
|
+ <img
|
|
|
+ class={styles.schoolLogo}
|
|
|
+ crossorigin="anonymous"
|
|
|
+ src={props.data.logo + `?some=${new Date().getTime()}`}
|
|
|
+ />
|
|
|
+ <span>{props.data.name}</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class={styles.studentCore}>
|
|
|
+ <img src={p3} class={styles.book} />
|
|
|
+
|
|
|
+ <div class={styles.title}>尊敬的家长：</div>
|
|
|
+ <div class={styles.content1}>
|
|
|
+ 为贯彻落实县“十四五”教育发展规划、教育部《基础教育课程教学改革深化行动方案》等文件精神，推进教育部“实施国家教育数字化战略行动”，促进信息技术与音乐课堂器乐教学练的深度融合，推动数字化在拓展音乐教学时空、共享优质资源、优化课程内容与教学过程、优化学生学习方式、精准开展教学评价等方面广泛应用，学校决定自本学期开展，开展“器乐课堂数字化建设”，现将有关安排通知如下：
|
|
|
+ </div>
|
|
|
+ <div class={styles.content}>
|
|
|
+ <p class={styles.smallTitle}>
|
|
|
+ 一、音乐课已经学了唱歌，为什么还要学习器乐
|
|
|
+ </p>
|
|
|
+ <p class={styles.smallContnet}>
|
|
|
+ 通过器乐来学习音乐，能全面培养学生的读谱、视唱、听音、节奏、和声、欣赏、创作等综合音乐素养。
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class={styles.content}>
|
|
|
+ <p class={styles.smallTitle}>
|
|
|
+ 二、器乐课堂的小乐器有哪些种类和优势
|
|
|
+ </p>
|
|
|
+ <p class={styles.smallContnet}>
|
|
|
+ 通常有竖笛、排箫、葫芦丝、陶笛等，具有携带方便、轻巧、好存放、简单易学、应用灵活、价格低等优势。
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class={styles.content}>
|
|
|
+ <p class={styles.smallTitle}>
|
|
|
+ 三、我校器乐课堂数字化准备开设的乐器安排
|
|
|
+ </p>
|
|
|
+ <p
|
|
|
+ class={styles.smallContnet}
|
|
|
+ v-html={extraConfig.value.content}></p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class={styles.content}>
|
|
|
+ <p class={styles.smallTitle}>
|
|
|
+ 四、为什么要进行器乐课堂数字化建设
|
|
|
+ </p>
|
|
|
+ <p class={styles.smallContnet}>
|
|
|
+ 在器乐的学练中，涉及乐理、指法、节奏、音准等多项音乐专业知识，借助数字化可以让学生人人随时学练，解决学生课后面临不会练、家长无法辅助、老师无法及时给予指导的专业性问题，让外行人都看得懂；
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class={styles.content}>
|
|
|
+ <p class={styles.smallTitle}>五、建设器乐课堂数字化的优势</p>
|
|
|
+ <p class={styles.smallContnet}>
|
|
|
+ 1.能帮助学生增强专注力与记忆力，提高阅读与理解能力，培养审美与情商，舒缓与释放情绪，有助于培养学生的身心健康；
|
|
|
+ <br />
|
|
|
+ 2.让学生能够较好地适应接下来中考或高考的政策调整；
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class={styles.content}>
|
|
|
+ <p class={styles.smallTitle}>六、如何实施器乐课堂数字化建设</p>
|
|
|
+ <p class={styles.smallContnet}>
|
|
|
+ 1.器乐课堂数字化建设的标准为：家校互联互通、课上课后学练同频；
|
|
|
+ <br />
|
|
|
+ 2.由硬件环境、技术环境、数字化音乐资源、师生数字化素养培养等构成，需长期持续性建设；
|
|
|
+ <br />
|
|
|
+ 3.基于校情，学校借助北京知勉公益基金会提供的专业技术资源，依托学校现有音乐教室场地设备，进行数字化资源建设与升级，并安排音乐教师持续进行数字化素养培训；
|
|
|
+ <br />
|
|
|
+ 4.实施后，音乐老师在课上使用数字化工具进行器乐授课，学生借助数字化工具进行学习，课后，学生在家使用乐器数字化工具进行练习。
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class={styles.content}>
|
|
|
+ <p class={styles.smallTitle}>
|
|
|
+ 七、实施的年级、参加原则、职责分工
|
|
|
+ </p>
|
|
|
+ <p class={styles.smallContnet}>
|
|
|
+ 1.以音乐课堂为建设主体，面向全体学生实施器乐课堂数字化教学练；
|
|
|
+ <br />
|
|
|
+ 2.学校负责协调解决家校互联互通的问题；
|
|
|
+ <br />
|
|
|
+ 3.家长负责解决乐器、数字化学练等工具，遵循家长自愿参与的原则；
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class={styles.content}>
|
|
|
+ <p class={styles.smallTitle}>
|
|
|
+ 八、什么是数字化学练工具，准备途径，参考价格
|
|
|
+ </p>
|
|
|
+ <p class={styles.smallContnet}>
|
|
|
+ 指具有数字化乐谱与课件、测评音视频云储存、五线谱与演奏指法跟播、电子节拍/校音、选段练习、原音/伴奏切换、速度调整等数字化学练工具（软件），通过手机或平板IPAD使用。
|
|
|
+ 家长可自行在手机应用市场中准备，不限品牌、型号及价格，准备前应了解软件是否支持课堂乐器学练及以上功能。也可通过基金会提供的渠道准备，参考价格为290元/年。
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class={styles.content}>
|
|
|
+ <p class={styles.smallTitle}>九、课堂乐器准备的途径、参考要求</p>
|
|
|
+ <p class={styles.smallContnet}>
|
|
|
+ 家长可自行在网店、琴行准备，课堂乐器的要求为：
|
|
|
+ 不限品牌、型号及价格，也可通过基金会提供的渠道准备，参考价格为
|
|
|
+ {extraConfig.value.price || 0}元/支。
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class={styles.content}>
|
|
|
+ <p class={styles.smallTitle}>十、工作安排</p>
|
|
|
+ <p class={styles.smallContnet}>
|
|
|
+ 1.我校定于
|
|
|
+ {dayjs(extraConfig.value.valueteachTime).format(
|
|
|
+ 'YYYY年MM月DD日'
|
|
|
+ )}
|
|
|
+ 正式开展器乐课堂数字化教学； <br />
|
|
|
+ 2.
|
|
|
+ {dayjs(extraConfig.value.buildStartTime).format(
|
|
|
+ 'YYYY年MM月DD日'
|
|
|
+ )}
|
|
|
+ —{dayjs(extraConfig.value.buildEndTime).format('MM月DD日')}
|
|
|
+ 间进行家长互联互通部署（另行通知）；
|
|
|
+ <br />
|
|
|
+ 3.请家长在开课前为学生准备好课堂乐器和数字化学练工具，通过基金会渠道准备的家长可扫码进行工具准备；
|
|
|
+ <br />
|
|
|
+ 4.如有疑问可向本班音乐教师咨询。
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class={[styles.content1, styles.lastContent]}>
|
|
|
+ 器乐课堂数字建设将遵循“立足本校实际，符合学生特点，注重课效课质”，为孩子成长搭建快乐的音乐家园，让我们的孩子以音乐为友，与器乐同行，在艺术特色的引领下茁壮成长，愿我们的孩子们都能奏出美妙的音乐！再次感谢家长朋友们对学校工作的大力支持！
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class={styles.schoolInfo}>
|
|
|
+ <p>{props.data.name}</p>
|
|
|
+ <p>{dayjs().format('YYYY年MM月DD日')}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class={styles.qrCodeContainer}>
|
|
|
+ <div class={styles.codewrap}>
|
|
|
+ <TheQrCode margin={0} text={url.value} size={84} />
|
|
|
+ {/* <img src={codewrap} class={styles.codewrapBg} alt="" /> */}
|
|
|
+ </div>
|
|
|
+ <div class={styles.codewrapSubmit}>请扫码报名</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class={styles.btnGroup}>
|
|
|
+ <img
|
|
|
+ src={iconClose}
|
|
|
+ class={styles.iconClose}
|
|
|
+ onClick={() => emit('close')}
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ src={iconDownload}
|
|
|
+ class={styles.iconDownload}
|
|
|
+ onClick={downImg}
|
|
|
+ />
|
|
|
+ {/* <div class={styles.iconClose} onClick={downImg}>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class={styles.downBtn} onClick={downImg}>
|
|
|
+ 下载图片
|
|
|
+ </div> */}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+});
|
