|
|
@@ -0,0 +1,418 @@
|
|
|
+<template>
|
|
|
+ <div class="setSail">
|
|
|
+ <van-image
|
|
|
+ :width="topWidth"
|
|
|
+ :height="topWidth / 1.7"
|
|
|
+ :src="siluchunwanJpg"
|
|
|
+ />
|
|
|
+ <br />
|
|
|
+ <van-cell-group inset>
|
|
|
+ <van-nav-bar title="活动介绍" />
|
|
|
+ <p
|
|
|
+ style="
|
|
|
+ text-indent: 2em;
|
|
|
+ padding: 8px 8px 0 8px;
|
|
|
+ text-align: justify;
|
|
|
+ line-height: 1.5em;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #a73832;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 2023年是改革开放45周年，更是全面贯彻党的二十大精神的开局之年和全党深入开展学习贯彻习近平新时代中国特色社会主义思想主题教育之年。5月17日，习近平总书记在西安主持中国－中亚峰会前夕，专门听取了陕西省委和省政府工作汇报，强调陕西在推进中国式现代化建设中要有勇立潮头、争当时代弄潮儿的志向和气魄，奋力追赶、敢于超越，在西部地区发挥示范作用。习近平总书记掷地有声的话语为奋力谱写中国式现代化建设的陕西篇章指明了方向，提供了根本遵循。
|
|
|
+ </p>
|
|
|
+ <p
|
|
|
+ style="
|
|
|
+ text-indent: 2em;
|
|
|
+ padding: 8px 8px 0 8px;
|
|
|
+ text-align: justify;
|
|
|
+ line-height: 1.5em;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #a73832;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 陕西省外参赛作品发送至邮箱xxqgzhengji@163.com，邮件标题注明【春潮激荡正扬帆】，来稿须附带视频名称、作品简介、主创信息（参赛者姓名、联系电话、所在单位）；或下载“闪视频”APP，通过首页置顶专题进行投稿。
|
|
|
+ </p>
|
|
|
+ <p
|
|
|
+ style="
|
|
|
+ text-indent: 2em;
|
|
|
+ padding: 8px 8px 0 8px;
|
|
|
+ text-align: justify;
|
|
|
+ line-height: 1.5em;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #a73832;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 陕西省内参赛作品可通过“学习强国”供稿链路报送，加标签【春潮激荡正扬帆】，并完善信息页作品简介、作者姓名、单位、电话等信息；也可发送至邮箱
|
|
|
+ </p>
|
|
|
+ </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
|
|
|
+ name="radio"
|
|
|
+ label="参赛方式"
|
|
|
+ required
|
|
|
+ :rules="[{ validator: isString, message: '请输入正确内容' }]"
|
|
|
+ >
|
|
|
+ <template #input>
|
|
|
+ <van-radio-group v-model="from.type" direction="horizontal">
|
|
|
+ <van-radio name="团队" checked-color="#ff2c2c">单位</van-radio>
|
|
|
+ <van-radio name="个人" checked-color="#ff2c2c">个人</van-radio>
|
|
|
+ </van-radio-group>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ <van-field
|
|
|
+ required
|
|
|
+ v-model="from.university"
|
|
|
+ label="所在单位"
|
|
|
+ v-if="from.type === '团队'"
|
|
|
+ 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="showGuize">参赛要求</div>
|
|
|
+ <div class="guize" style="top: 5em" @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>
|
|
|
+</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/siluchunwan.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: '',
|
|
|
+ type: '个人',
|
|
|
+ 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>奖励</p>
|
|
|
+ <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 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('type', from.type);
|
|
|
+ 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',
|
|
|
+ },
|
|
|
+ data: oriData,
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ closeToast();
|
|
|
+ showDialog({
|
|
|
+ title: '报名成功',
|
|
|
+ messageAlign: 'left',
|
|
|
+ confirmButtonText: '关闭',
|
|
|
+ message: () => (
|
|
|
+ <img
|
|
|
+ src='https://cxzx.smcic.net/topic/tool/img/er1.jpg'
|
|
|
+ style='width: 100%'
|
|
|
+ />
|
|
|
+ ),
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ closeToast();
|
|
|
+ showToast('报名失败');
|
|
|
+ });
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+.setSail {
|
|
|
+ width: 100vw;
|
|
|
+ min-height: 100vh;
|
|
|
+ background-color: #a05954;
|
|
|
+ font-weight: 400;
|
|
|
+}
|
|
|
+
|
|
|
+.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;
|
|
|
+}
|
|
|
+</style>
|
liyongli