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元</p>
				 <p>网络投票人气第二团体：奖金2000元</p>
				 <p>网络投票人气第三团体：奖金1000元</p>
				 <p>网络投票人气第一个人：奖金1000元</p>
				 <p>网络投票人气第二个人：奖金600元</p>
				 <p>网络投票人气第三个人：奖金300元</p>
				 </div>
			),
		});
	}

	const showGuize = () => {
		showDialog({
			title: "活动规则",
			messageAlign: "left",
			confirmButtonText: "关闭",
			message: () => ( <
				div class = "art" >
				<
				p > 1、 活动主题：“ 大美中国· 多彩丝路”《 2023 丝路嘉年华· 丝路春晚》 之我要上丝路春晚。 < /p> <
				p > 2、 活动时间： 即日起至21日海选报名 + 作品征集， 12 月21日 - 22 日线上海选， 12 月23 -
				26 日网络作品投票打榜， 12 月26日投票通道关闭， 公布排名， 1 月3日 - 7 日丝路嘉年华和丝路春晚晚会录制。 < /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>