|
|
@@ -0,0 +1,449 @@
|
|
|
+<template>
|
|
|
+ <div class="setSail">
|
|
|
+ <van-image
|
|
|
+ :width="topWidth"
|
|
|
+ :height="topWidth / 1.7"
|
|
|
+ :src="siluchunwanJpg"
|
|
|
+ />
|
|
|
+ <br />
|
|
|
+ <div class="main">
|
|
|
+ <van-cell-group inset>
|
|
|
+ <van-nav-bar title="大赛介绍" />
|
|
|
+ <p class="paragraph">
|
|
|
+ 2023年是改革开放45周年，更是全面贯彻党的二十大精神的开局之年和全党深入开展学习贯彻习近平新时代中国特色社会主义思想主题教育之年。为反映各级各单位以实干促发展的生动实践，展现改革开放以来特别是党的二十大以来全国各地高质量发展取得的突出成就，弘扬伟大改革开放精神，为推进中国式现代化建设凝心聚力，营造比学赶超、奋勇争先的热烈氛围。“春潮激荡正扬帆”2023年全国短视频大赛于即日起正式启动。
|
|
|
+ </p>
|
|
|
+ <br />
|
|
|
+ </van-cell-group>
|
|
|
+ <br />
|
|
|
+ <van-form @submit="onSubmit">
|
|
|
+ <van-cell-group inset>
|
|
|
+ <van-nav-bar title="投稿信息" />
|
|
|
+ <van-field
|
|
|
+ required
|
|
|
+ v-model="from.name"
|
|
|
+ label="选手姓名"
|
|
|
+ placeholder="请输入用户名"
|
|
|
+ :rules="[{ validator: isString, message: '请输入正确内容' }]"
|
|
|
+ />
|
|
|
+ <van-field
|
|
|
+ required
|
|
|
+ v-model="from.university"
|
|
|
+ label="所在单位"
|
|
|
+ placeholder="请输入所在单位"
|
|
|
+ :rules="[{ validator: isString, message: '请输入正确内容' }]"
|
|
|
+ />
|
|
|
+ <van-field
|
|
|
+ required
|
|
|
+ v-model="from.tel"
|
|
|
+ label="联系方式"
|
|
|
+ type="tel"
|
|
|
+ placeholder="请输入手机号"
|
|
|
+ :rules="[{ validator: isNumber, message: '请输入正确内容' }]"
|
|
|
+ />
|
|
|
+ <van-field
|
|
|
+ required
|
|
|
+ v-model="from.workTitle"
|
|
|
+ label="作品名称"
|
|
|
+ placeholder="请输入名称"
|
|
|
+ :rules="[{ validator: isString, message: '请输入正确内容' }]"
|
|
|
+ />
|
|
|
+ <van-field
|
|
|
+ v-model="from.introduction"
|
|
|
+ rows="2"
|
|
|
+ autosize
|
|
|
+ label="作品介绍"
|
|
|
+ type="textarea"
|
|
|
+ maxlength="50"
|
|
|
+ placeholder="请输入简介"
|
|
|
+ show-word-limit
|
|
|
+ />
|
|
|
+ <van-field
|
|
|
+ placeholder="上传作品"
|
|
|
+ required
|
|
|
+ label="上传作品"
|
|
|
+ :rules="[{ validator: isFile, message: '请输入正确内容' }]"
|
|
|
+ >
|
|
|
+ <template #input>
|
|
|
+ <van-uploader
|
|
|
+ accept="video/*"
|
|
|
+ v-model="from.file"
|
|
|
+ :max-count="1"
|
|
|
+ :max-size="3145728000"
|
|
|
+ @oversize="filesize"
|
|
|
+ result-type="file"
|
|
|
+ >
|
|
|
+ <template #preview-cover>
|
|
|
+ <van-icon
|
|
|
+ color="#fff"
|
|
|
+ size="40"
|
|
|
+ @click="previewClick"
|
|
|
+ name="play-circle-o play"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </van-uploader>
|
|
|
+ <p style="font-size: 12px; color: #666">
|
|
|
+ 支持上传MP4、MOV格式的视频，视频大小2G以内
|
|
|
+ </p>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ <div style="padding: 5px">
|
|
|
+ <van-button block type="danger" native-type="submit">
|
|
|
+ 我要报名
|
|
|
+ </van-button>
|
|
|
+ </div>
|
|
|
+ </van-cell-group>
|
|
|
+ </van-form>
|
|
|
+ <br />
|
|
|
+
|
|
|
+ <div class="guize" @click="showZhuti">大赛主题</div>
|
|
|
+ <div class="guize" style="top: 5em" @click="showGuize">参赛须知</div>
|
|
|
+ <div class="guize" style="top: 8em" @click="showRongyu">奖项设置</div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="Preview"
|
|
|
+ :style="preview !== '' ? '' : 'z-index: -1;opacity: 0'"
|
|
|
+ >
|
|
|
+ <van-icon
|
|
|
+ name="close"
|
|
|
+ color="#fff"
|
|
|
+ size="30"
|
|
|
+ class="close"
|
|
|
+ @click="closePreview"
|
|
|
+ />
|
|
|
+ <video ref="previewVideo" controls :src="preview"></video>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <script setup>
|
|
|
+ // import { onMounted, reactive } from "vue";
|
|
|
+ import { ref, reactive } from 'vue';
|
|
|
+
|
|
|
+ import { showLoadingToast, closeToast, showToast, showDialog } from 'vant';
|
|
|
+ import axios from 'axios';
|
|
|
+ import siluchunwanJpg from '@/assets/img/setSail.jpg';
|
|
|
+ /**
|
|
|
+ * window.$originData.orginParames.title 页面标题
|
|
|
+ * window.$originData.orginParames.parameters 固定参数值
|
|
|
+ * window.$originData.urlParames url参数
|
|
|
+ */
|
|
|
+ const topWidth = ref(document.body.offsetWidth);
|
|
|
+ const preview = ref('');
|
|
|
+ const previewVideo = ref(null);
|
|
|
+ const shanshipin = window.$shanshipin || {};
|
|
|
+ const from = reactive({
|
|
|
+ name: shanshipin.UserName || '',
|
|
|
+ tel:
|
|
|
+ !isNaN(shanshipin.Phone) && Number(shanshipin.Phone)
|
|
|
+ ? shanshipin.Phone
|
|
|
+ : '',
|
|
|
+ introduction: '',
|
|
|
+ file: [],
|
|
|
+ university: '',
|
|
|
+ workTitle: '',
|
|
|
+ });
|
|
|
+
|
|
|
+ window.onresize = () => {
|
|
|
+ topWidth.value = document.body.offsetWidth;
|
|
|
+ };
|
|
|
+
|
|
|
+ const filesize = () => showToast('超出文件大小限制');
|
|
|
+ const previewClick = () => {
|
|
|
+ let getUrl = null;
|
|
|
+ const file = from.file[0].file;
|
|
|
+ if (window.createObjectURL != undefined) {
|
|
|
+ //basic
|
|
|
+ getUrl = window.createObjectURL(file);
|
|
|
+ } else if (window.URL != undefined) {
|
|
|
+ //window.URL 标准定义
|
|
|
+ getUrl = window.URL.createObjectURL(file);
|
|
|
+ } else if (window.webkitURL != undefined) {
|
|
|
+ //window.webkitURL是webkit的内核
|
|
|
+ //webkit or chrome
|
|
|
+ getUrl = window.webkitURL.createObjectURL(file);
|
|
|
+ }
|
|
|
+ preview.value = getUrl;
|
|
|
+ previewVideo.value.play();
|
|
|
+ };
|
|
|
+ const closePreview = () => {
|
|
|
+ preview.value = '';
|
|
|
+ };
|
|
|
+
|
|
|
+ const showRongyu = () => {
|
|
|
+ showDialog({
|
|
|
+ title: '奖项设置',
|
|
|
+ messageAlign: 'left',
|
|
|
+ confirmButtonText: '关闭',
|
|
|
+ message: () => (
|
|
|
+ <div class='art'>
|
|
|
+ <p>
|
|
|
+ 一等奖 3名 奖金5000元 + 证书
|
|
|
+ <br />
|
|
|
+ 二等奖 8名 奖金3000元 + 证书
|
|
|
+ <br />
|
|
|
+ 三等奖 15名 奖金1000元 + 证书
|
|
|
+ <br />
|
|
|
+ 最佳单项奖 20名 奖金500元 + 证书
|
|
|
+ <br />
|
|
|
+ 优秀组织奖 20名 奖牌 + 证书
|
|
|
+ <br />
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ ),
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ const showGuize = () => {
|
|
|
+ showDialog({
|
|
|
+ title: '参赛须知',
|
|
|
+ messageAlign: 'left',
|
|
|
+ confirmButtonText: '关闭',
|
|
|
+ message: () => (
|
|
|
+ <div class='art'>
|
|
|
+ <p>
|
|
|
+ 1、作品内容必须遵守中华人民共和国法律、法规，主题鲜明，积极健康，不得含有色情、暴力、血腥等不良内容。新闻类题材内容必须真实、准确、要素齐全。
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 2、参赛作品体裁不限，可以为剧情片、纪录片、形象片、创意短片、公益广告等。
|
|
|
+ </p>
|
|
|
+ <p>3、参赛作品时长原则不少于15秒、不超过5分钟。</p>
|
|
|
+ <p>
|
|
|
+ 4、投稿作品需横屏拍摄，视频画幅比例建议16:9，分辨率不低于720p（1280×720），视频帧速建议采用25帧/秒或30帧/秒，音频立体声48KHZ 2.0及以上。手机拍摄要求画质和声音清晰。
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 5、投稿者应对作品拥有完整的著作权，并保证其所投送的作品不侵犯第三人的包括著作权、肖像权、名誉权、隐私权等在内的合法权益。
|
|
|
+ </p>
|
|
|
+ <p>6、此次大赛不收取任何报名费、参评费等。</p>
|
|
|
+ </div>
|
|
|
+ ),
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ const showZhuti = () => {
|
|
|
+ showDialog({
|
|
|
+ title: '大赛主题',
|
|
|
+ messageAlign: 'left',
|
|
|
+ confirmButtonText: '关闭',
|
|
|
+ message: () => (
|
|
|
+ <div class='art'>
|
|
|
+ <p>大赛以“改革开放45周年”为主题，设置7个板块，具体内容可包括：</p>
|
|
|
+ <p>
|
|
|
+ 1、
|
|
|
+ “学习正当时”：展示各地各单位坚持政治引领，结合工作实际开展学习贯彻习近平新时代中国特色社会主义思想主题教育，在以学铸魂、以学增智、以学正风、以学促干，推动地方经济、政治、文化、社会、生态文明建设高质量发展上取得的新成就。
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 2、
|
|
|
+ “高质量发展新图景”：以新时代各行各业、各条战线的企事业单位等为主体，通过讲述鲜活生动的发展故事，展示改革开放45年来的发展成果。
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 3、
|
|
|
+ “宜居宜业新乡村”：以改革开放以来乡村人居环境明显改善、农村改革向纵深推进、农村社会保持和谐稳定为主要内容，展示农业高质高效、乡村宜居宜业、农民富裕富足的新华章。
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 4、
|
|
|
+ “科教谱新篇”：展示各地科技与教育事业不断塑造发展新动能新优势的蓬勃景象。讲述各地科教事业的发展成就和砥砺前行的奋斗故事。
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 5、
|
|
|
+ “文旅正当时”：立足于当下全国文化和旅游事业繁荣兴盛的生动景象，展现改革开放以来各地文旅事业发展成果，讲述具有民族凝聚力和中华文化影响力的生动故事。
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 6、
|
|
|
+ “有梦想谁都了不起”：表现“追梦新时代”主题，讲述个人、家庭、集体在改革开放的时代浪潮中实现价值、追求梦想，不负伟大时代、勇于实现梦想的精彩故事。
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 7、
|
|
|
+ “秀出新生活”：主题积极向上、凸显奋进改革开放新时代的音乐MV、舞蹈、快闪、Vlog、动漫、沙画、手语舞等作品。
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ ),
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ const isString = v => {
|
|
|
+ return !!v && typeof v == 'string' && isNaN(v);
|
|
|
+ };
|
|
|
+ const isFile = () => {
|
|
|
+ return from.file && from.file.length;
|
|
|
+ };
|
|
|
+ const isNumber = () => {
|
|
|
+ return /1[0-9]{10}/g.test(from.tel);
|
|
|
+ };
|
|
|
+
|
|
|
+ window.appLoginSuccess = () => {
|
|
|
+ console.log('登录');
|
|
|
+ };
|
|
|
+
|
|
|
+ const onSubmit = () => {
|
|
|
+ if (!isFile) showToast('请上传作品');
|
|
|
+ const oriData = new FormData();
|
|
|
+ oriData.append('operateId', '3');
|
|
|
+ oriData.append('name', from.name);
|
|
|
+ oriData.append('phone', from.tel);
|
|
|
+ // oriData.append('isOnline', true);
|
|
|
+ oriData.append('introduction', from.introduction);
|
|
|
+ oriData.append('university', from.university);
|
|
|
+ oriData.append('workTitle', from.workTitle);
|
|
|
+ oriData.append('file', from.file[0].file);
|
|
|
+ showLoadingToast({
|
|
|
+ message: '正在上传中...',
|
|
|
+ forbidClick: true,
|
|
|
+ duration: 0,
|
|
|
+ });
|
|
|
+ axios({
|
|
|
+ method: 'post',
|
|
|
+ url: 'https://topic.smcic.net/operate/enroll/store',
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'multipart/form-data',
|
|
|
+ },
|
|
|
+ onUploadProgress(res) {
|
|
|
+ showLoadingToast({
|
|
|
+ message: `已上传${Math.floor(res.progress * 100)}%`,
|
|
|
+ forbidClick: true,
|
|
|
+ duration: 0,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ data: oriData,
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ closeToast();
|
|
|
+ showDialog({
|
|
|
+ title: '',
|
|
|
+ messageAlign: 'left',
|
|
|
+ confirmButtonText: '关闭',
|
|
|
+ message: () => (
|
|
|
+ <div style='padding: 1em;text-align:center;font-size: 24px;line-height:1.5em'>
|
|
|
+ <svg
|
|
|
+ viewBox='0 0 1024 1024'
|
|
|
+ version='1.1'
|
|
|
+ xmlns='http://www.w3.org/2000/svg'
|
|
|
+ width='64'
|
|
|
+ height='64'
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ d='M512.465455 0.116364C230.609455 0.116364 1.210182 229.492364 1.210182 511.371636S230.586182 1022.650182 512.465455 1022.650182s511.278545-229.376 511.278545-511.278546C1023.720727 229.492364 794.344727 0.116364 512.465455 0.116364z m286.091636 413.230545L466.013091 754.222545a42.519273 42.519273 0 0 1-30.254546 12.753455h-0.232727a42.589091 42.589091 0 0 1-30.114909-12.427636l-178.711273-178.827637a42.565818 42.565818 0 0 1 0-60.253091 42.565818 42.565818 0 0 1 60.253091 0l148.363637 148.247273 302.312727-310.062545a42.682182 42.682182 0 0 1 60.253091-0.698182 42.821818 42.821818 0 0 1 0.674909 60.392727z m0 0'
|
|
|
+ p-id='3621'
|
|
|
+ fill='#2aae67'
|
|
|
+ ></path>
|
|
|
+ </svg>
|
|
|
+ <br />
|
|
|
+ 恭喜您投稿成功
|
|
|
+ <br />
|
|
|
+ 更多活动动态请关注闪视频app
|
|
|
+ </div>
|
|
|
+ ),
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ closeToast();
|
|
|
+ showToast('报名失败');
|
|
|
+ });
|
|
|
+ };
|
|
|
+ </script>
|
|
|
+ <style>
|
|
|
+ .setSail {
|
|
|
+ width: 100vw;
|
|
|
+ min-height: 100vh;
|
|
|
+ background-color: #0a456d;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+
|
|
|
+ .setSail .paragraph {
|
|
|
+ text-indent: 2em;
|
|
|
+ padding: 8px 8px 0 8px;
|
|
|
+ text-align: justify;
|
|
|
+ line-height: 1.5em;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #a73832;
|
|
|
+ }
|
|
|
+
|
|
|
+ .setSail .art {
|
|
|
+ padding: 8px 8px 0 8px;
|
|
|
+ text-align: justify;
|
|
|
+ line-height: 1.5em;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .setSail .van-hairline--bottom:after {
|
|
|
+ border-bottom-width: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .setSail .van-nav-bar__content {
|
|
|
+ background-image: url('../../assets/img/title.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .setSail .van-nav-bar__title {
|
|
|
+ color: #f63634;
|
|
|
+ font-size: 23px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .setSail .van-button__text {
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+
|
|
|
+ .setSail .van-uploader__preview-cover {
|
|
|
+ background-color: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .van-uploader__preview-cover video {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .setSail .play {
|
|
|
+ position: relative;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .setSail .Preview {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background-color: rgba(0, 0, 0, 0.3);
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+
|
|
|
+ .setSail .Preview video {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ width: 100vw;
|
|
|
+ max-width: 100vh;
|
|
|
+ background: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .setSail .Preview .close {
|
|
|
+ position: absolute;
|
|
|
+ right: 5px;
|
|
|
+ top: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .setSail .guize {
|
|
|
+ background-color: #ff2c2c;
|
|
|
+ position: fixed;
|
|
|
+ right: 0;
|
|
|
+ top: 2em;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ padding: 3px 5px 3px 15px;
|
|
|
+ border-top-left-radius: 1em;
|
|
|
+ border-bottom-left-radius: 1em;
|
|
|
+ z-index: 11;
|
|
|
+ }
|
|
|
+
|
|
|
+ .setSail .main {
|
|
|
+ max-width: 500px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+
|
liyongli