activity/src/view/SilkRoadShanShiPin/index.vue

<template>
	<div class="SilkRoadShanShiPin">
		<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;
        ">
				《丝路嘉年华·丝路春晚》是陕西广电融媒体集团着力打造的融媒晚会品牌，通过对丝路IP的挖掘、锤炼、凝聚、延伸，以多样的艺术形式展开创作。
			</p>
			<p style="
          text-indent: 2em;
          padding: 0 8px 8px 8px;
          text-align: justify;
          line-height: 1.5em;
          font-size: 16px;
		  color: #a73832;
        ">依托《丝路嘉年华·丝路春晚》IP强大的社会影响力和关注度，陕西广电融媒体集团（台）创新中心西部网与经营中心丝路春晚导演组共同打造丝路春晚系列IP——《我要上丝路春晚》活动，开启直通丝路春晚的线上评选通道，邀请社会多家艺术机构、民间社团，以及才华出众的个人参与，征集优秀节目作品进行网络报名评选，最终人气排名前三的团体和个人将直通丝路嘉年华和丝路春晚晚会录制现场。
			</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.tel" label="联系方式" type="tel" placeholder="请输入手机号"
					:rules="[{ validator: isNumber, 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="524288000"
							@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格式的视频，视频大小500M以内
						</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 {
		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(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 : "",
		introduction: "",
		type: "个人",
		file: [],
	});

	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> 1） 荣誉 </p>
				<p>1、网络投票人气第一的团体、 个人直通丝路春晚晚会， 在丝路春晚晚会中露出（ 陕西卫视、 五大洲电视台播出）， 具体呈现形式由导演组与入选作品的团体、 个人分别充分沟通， 优化包装作品。</p>
				<p>2、网络投票第二、三名的团体、个人将直通丝路嘉年华，在丝路嘉年华露出（陕西卫视），具体呈现形式由导演组与入选作品的团体、个人分别充分沟通，优化包装作品。</p>
				<p>3、直通丝路嘉年华和丝路春晚的团体、 个人在录制结束后， 将获得闪视频独家个人专访和宣传形象照；</p>
				<p>4、网络投票人气五的团体、 个人将获得由丝路春晚导演组颁发的荣誉证书。</p>
				<br/>
				<p>2）奖励</p>
				<p>
				网络投票人气第一团体：奖金3000元<br/>
				网络投票人气第二团体：奖金2000元<br/>
				网络投票人气第三团体：奖金1000元<br/>
				网络投票人气第一个人：奖金1000元<br/>
				网络投票人气第二个人：奖金600元<br/>
				网络投票人气第三个人：奖金300元
				</p>
				</div>
			),
		});
	}

	const showGuize = () => {
		showDialog({
			title: "活动规则",
			messageAlign: "left",
			confirmButtonText: "关闭",
			message: () => ( <
				div class = "art" >
				<
				p > 1、活动主题：“ 大美中国· 多彩丝路”《 2023 丝路嘉年华· 丝路春晚》 之我要上丝路春晚。 < /p> <
				p > 2、活动时间： 即日起至12月20日海选报名 + 节目征集， 12 月21日 - 22 日线上海选， 12 月23日 - 26 日网络投票。 < /p> <
				p > 3、征集范围： 各群体组织及社会民间文艺团体、 凡有才艺者， 且创作内容符合节目要求的团体和个人。 < /p> <
				p >
				4、内容形式： 节目内容以“ 大美中国· 多彩丝路” 为主题， 健康、 积极向上， 具备中国文化特色的创意表演， 节目形式包括但不限于情景歌舞、 演唱等， 以及其他适合舞台表演和电视呈现的艺术形式。 <
				/p> <
				p >
				5、上传规则： 参与报名的团体、 个人将录制好的高清视频作品上传至闪视频APP， 个人节目不超过3分钟， 团体节目不超过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 = () => {
		console.log(from)
		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", "2");
		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("file", from.file[0].file);

		axios({
				method: "post",
				url: "https://topic.smcic.net/operate/enroll/store",
				headers: {
					"Content-Type": "multipart/form-data",
				},
				data: oriData,
			})
			.then(r => {
				console.log(r);
				showDialog({
					title: "报名成功",
					messageAlign: "left",
					confirmButtonText: "关闭",
					message: () => ( <
						img src = "https://cxzx.smcic.net/topic/tool/img/er1.jpg"
						style = "width: 100%" /
						>
					),
				});
			})
			.catch(() => {
				showToast("报名失败");
			});
	};
</script>
<style>
	.SilkRoadShanShiPin {
		width: 100vw;
		min-height: 100vh;
		background-color: #a05954;
		font-weight: 400;
	}

	.SilkRoadShanShiPin .art {
		padding: 8px 8px 0 8px;
		text-align: justify;
		line-height: 1.5em;
		font-size: 16px;
	}

	.SilkRoadShanShiPin .van-hairline--bottom:after {
		border-bottom-width: 0px;
	}

	.SilkRoadShanShiPin .van-nav-bar__content {
		background-image: url("../../assets/img/title.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		overflow: hidden;
	}

	.SilkRoadShanShiPin .van-nav-bar__title {
		color: #f63634;
		font-size: 23px;
	}

	.SilkRoadShanShiPin .van-button__text {
		font-size: 15px;
		font-weight: 400;
	}

	.SilkRoadShanShiPin .van-uploader__preview-cover {
		background-color: #000;
	}

	.van-uploader__preview-cover video {
		width: 100%;
		height: 100%;
	}

	.SilkRoadShanShiPin .play {
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.SilkRoadShanShiPin .Preview {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 10;
	}

	.SilkRoadShanShiPin .Preview video {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 100vw;
		max-width: 100vh;
		background: #000;
	}

	.SilkRoadShanShiPin .Preview .close {
		position: absolute;
		right: 5px;
		top: 5px;
	}

	.SilkRoadShanShiPin .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>