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="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 soundbyteJpg from "../../assets/img/soundbyte.jpg";
	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 showGuize = () => {
		showDialog({
			title: "活动规则",
			messageAlign: "left",
			confirmButtonText: "关闭",
			message: () => ( <
				div class = "art" >
				<
				p > 1、活动主题：“大美中国·多彩丝路”《2023丝路嘉年华·丝路春晚》之我要上丝路春晚。 < /p> <
				p > 2、活动时间：即日起至21日海选报名+作品征集，12月21日-28日网络作品投票打榜，12月31日前公布入选前团体、个人，1月3日-7日丝路嘉年华和丝路春晚晚会录制。< /p> <
				p > 3、征集范围：各群体组织及社会民间文艺团体、凡有才艺者，且创作内容符合节目要求的团体和个人。 < /p> <
				p > 4、内容形式：节目内容以“大美中国·多彩丝路”为主题，健康、积极向上，具备中国文化特色的创意表演，节目形式包括但不限于情景歌舞、演唱、小品、相声等，以及其他适合舞台表演和电视呈现的艺术形式。 < /p> <
				p >
				5、上传规则：参与报名的团体、个人将录制好的高清视频作品上传至闪视频APP，个人节目不超过5分钟，团体节目不超过10分钟。导演组将与入选作品的创作人员充分沟通，在双方认可的条件下进一步优化包装作品，直通丝路嘉年华和丝路春晚。 <
				/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: #d0696a;
		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>