|
|
@@ -0,0 +1,281 @@
|
|
|
+<template>
|
|
|
+ <div class="Soundbyte">
|
|
|
+ <van-image :width="topWidth" :height="topWidth / 1.7" :src="soundbyteJpg" />
|
|
|
+ <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;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 新学期伊始，依托陕西音乐广播强大社会影响力、收听率，以及深入年轻群体的《西安人的歌》，联合战马饮料，共同打造“星声代”校园音乐IP——【战马音浪·校园歌手大赛】。
|
|
|
+ </p>
|
|
|
+ <p
|
|
|
+ style="
|
|
|
+ text-indent: 2em;
|
|
|
+ padding: 0 8px 8px 8px;
|
|
|
+ text-align: justify;
|
|
|
+ line-height: 1.5em;
|
|
|
+ font-size: 16px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 赛事全程将通过闪视频APP、FM98.8《西安人的歌》深度挖掘“音乐、能量、青春、活力、潮流、极致”的精神内核，与热爱音乐的学生产生共鸣，为校园文化艺术生活赋能！
|
|
|
+ </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
|
|
|
+ required
|
|
|
+ v-model.number="from.tel"
|
|
|
+ label="联系方式"
|
|
|
+ type="tel"
|
|
|
+ maxlength="11"
|
|
|
+ placeholder="请输入手机号"
|
|
|
+ :rules="[{ validator: isNumber, message: '请输入正确内容' }]"
|
|
|
+ />
|
|
|
+ <van-field
|
|
|
+ required
|
|
|
+ v-model="from.university"
|
|
|
+ label="参赛院校"
|
|
|
+ placeholder="请输入院校名称"
|
|
|
+ :rules="[{ validator: isString, message: '请输入正确内容' }]"
|
|
|
+ />
|
|
|
+ <van-field
|
|
|
+ placeholder="上传作品"
|
|
|
+ required
|
|
|
+ label="上传作品"
|
|
|
+ :rules="[{ validator: isFile, message: '请输入正确内容' }]"
|
|
|
+ >
|
|
|
+ <template #input>
|
|
|
+ <van-uploader
|
|
|
+ accept="video/*"
|
|
|
+ v-model="from.file"
|
|
|
+ :max-count="1"
|
|
|
+ :max-size="524288000"
|
|
|
+ @oversize="filesize"
|
|
|
+ >
|
|
|
+ <template #preview-cover>
|
|
|
+ <van-icon
|
|
|
+ color="#fff"
|
|
|
+ size="40"
|
|
|
+ @click="previewClick"
|
|
|
+ name="play-circle-o play"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </van-uploader>
|
|
|
+ </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="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 { Toast, Dialog } from "vant";
|
|
|
+import soundbyteJpg from "../../assets/img/soundbyte.jpg";
|
|
|
+/**
|
|
|
+ * window.$originData.orginParames.title 页面标题
|
|
|
+ * window.$originData.orginParames.parameters 固定参数值
|
|
|
+ * window.$originData.urlParames url参数
|
|
|
+ */
|
|
|
+const topWidth = ref(window.$originData.orginParames.availWidth);
|
|
|
+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
|
|
|
+ : "",
|
|
|
+ university: "",
|
|
|
+ file: [],
|
|
|
+});
|
|
|
+
|
|
|
+const filesize = () => Toast("超出文件大小限制");
|
|
|
+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 showGuize = () => {
|
|
|
+ Dialog.alert({
|
|
|
+ title: "活动规则",
|
|
|
+ messageAlign: "left",
|
|
|
+ confirmButtonText: "关闭",
|
|
|
+ message:
|
|
|
+ "1、报名时间：即日起至2022年11月26日。\n2、活动时间：11月16日 20:00--22:00。\n3、赛事举办形式：闪视频APP线上直播参赛。\n4、参与对象：西安各高校学生。\n5、参赛要求：曲风不限，自行准备演唱伴奏。\n6、评比规则：唱功为基本要求，结合现场舞台表现，演唱发挥进行综合评分。每所高校报名推选15-20人（组）进入半决赛，每场半决赛产生前五强，并根据个人综合表现评出“战马人物”，评委拥有1张决赛PASS卡。\n7、嘉宾评委：陕西广播电台音乐类主播/西安知名音乐人/歌手。",
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const isString = v => {
|
|
|
+ return !!v && typeof v == "string" && isNaN(v);
|
|
|
+};
|
|
|
+const isNumber = v => {
|
|
|
+ return !!v && !isNaN(v);
|
|
|
+};
|
|
|
+const isFile = () => {
|
|
|
+ return from.file && from.file.length;
|
|
|
+};
|
|
|
+
|
|
|
+const onSubmit = () => {
|
|
|
+ if (!isFile) Toast("请上传作品");
|
|
|
+ console.log("--", from);
|
|
|
+ const oriData = new FormData();
|
|
|
+ oriData.append("name", from.name);
|
|
|
+ oriData.append("tel", from.tel);
|
|
|
+ oriData.append("university", from.university);
|
|
|
+ oriData.append("file", from.file[0]);
|
|
|
+
|
|
|
+ var xhttp;
|
|
|
+ Toast.loading({
|
|
|
+ message: "加载中...",
|
|
|
+ forbidClick: true,
|
|
|
+ duration: 0,
|
|
|
+ });
|
|
|
+ if (window.XMLHttpRequest) xhttp = new XMLHttpRequest();
|
|
|
+ else if (window.ActiveXObject)
|
|
|
+ xhttp = new window.ActiveXObject("Microsoft.XMLHTTP");
|
|
|
+ xhttp.open("POST", "", true);
|
|
|
+ xhttp.setRequestHeader("Content-type", "application/json");
|
|
|
+ xhttp.send(JSON.stringify(oriData));
|
|
|
+ xhttp.onreadystatechange = function () {
|
|
|
+ if (this.readyState != 4) return;
|
|
|
+ Toast.clear();
|
|
|
+ if (this.status != 200) return Toast("请求失败 " + this.status);
|
|
|
+ let data = {};
|
|
|
+ try {
|
|
|
+ data = this.responseText || "";
|
|
|
+ console.log("--->", data);
|
|
|
+ } catch (err) {
|
|
|
+ Toast("请求失败");
|
|
|
+ console.error(err);
|
|
|
+ }
|
|
|
+ };
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+.Soundbyte {
|
|
|
+ width: 100vw;
|
|
|
+ min-height: 100vh;
|
|
|
+ background-color: #0c0000;
|
|
|
+ font-weight: 400;
|
|
|
+}
|
|
|
+.Soundbyte .van-hairline--bottom:after {
|
|
|
+ border-bottom-width: 0px;
|
|
|
+}
|
|
|
+.Soundbyte .van-nav-bar__content {
|
|
|
+ background-image: url("../../assets/img/title.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+}
|
|
|
+.Soundbyte .van-nav-bar__title {
|
|
|
+ color: #f63634;
|
|
|
+ font-size: 23px;
|
|
|
+}
|
|
|
+.Soundbyte .van-button__text {
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 400;
|
|
|
+}
|
|
|
+.Soundbyte .van-uploader__preview-cover {
|
|
|
+ background-color: #000;
|
|
|
+}
|
|
|
+.van-uploader__preview-cover video {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.Soundbyte .play {
|
|
|
+ position: relative;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+}
|
|
|
+.Soundbyte .Preview {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background-color: rgba(0, 0, 0, 0.3);
|
|
|
+ z-index: 10;
|
|
|
+}
|
|
|
+.Soundbyte .Preview video {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ width: 100vw;
|
|
|
+ max-width: 100vh;
|
|
|
+ background: #000;
|
|
|
+}
|
|
|
+.Soundbyte .Preview .close {
|
|
|
+ position: absolute;
|
|
|
+ right: 5px;
|
|
|
+ top: 5px;
|
|
|
+}
|
|
|
+.Soundbyte .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
