activity/src/view/Soundbyte/index.vue

<template>
  <div class="Soundbyte">
    <van-image :width="topWidth" :height="topWidth / 1.7" :src="soundbyteJpg" />
    <br />
    <van-cell-group inset>
      <van-nav-bar title="活动介绍" />
      <p
        style="
          text-indent: 2em;
          padding: 8px;
          text-align: justify;
          line-height: 1.5em;
          font-size: 16px;
        "
      >
        由陕西广电融媒体集团（台）官方平台闪视频APP与陕西音乐广播FM98.8共同打造的校园音乐IP-“战马音浪•校园歌手大赛”将于2022年11月16日-11月26日举办。本次活动以线上直播PK
        为主，结合线上线下丰富有趣的内容设置，依托省台影响力将赛事在全网曝光。
      </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.isOnLine" 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.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"
              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 { Toast, Dialog } from "vant";
import axios from "axios";
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: "",
  isOnLine: "线上",
  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月25日。\n2、参与对象：陕西各高校学生。\n3、参赛要求：曲风不限，自行准备演唱伴奏。\n4、嘉宾评委：陕西广播电视台音乐类主播/西安知名音乐人/歌手。\n5、评比规则：唱功为基本要求，结合现场表现、演唱发挥进行综合评分，优秀选手将直接进入总决赛（决赛时间：2022年11月26日），线上将评出人气选手。\n6、线上比赛时间：11月16日 19:00--21:00、11月23日 19:00--21:00。\n7、线下比赛时间：11月12日 14:00--16:00、11月13日 14:00--16:00、11月19日 14:00--16:00、11月20日 14:00--16:00。",
  });
};

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;
};

window.appLoginSuccess = () => {
  console.log("登录");
};

const onSubmit = () => {
  if (!isFile) Toast("请上传作品");
  const oriData = new FormData();
  oriData.append("name", from.name);
  oriData.append("phone", from.tel);
  oriData.append("university", from.university);
  oriData.append("isOnLine", from.isOnLine);
  oriData.append("file", from.file[0].file);

  Toast.loading({
    message: "报名中...",
    forbidClick: true,
    duration: 0,
  });
  axios({
    method: "post",
    url: "https://topic.smcic.net/xian-song/store",
    headers: {
      "Content-Type": "multipart/form-data",
    },
    data: oriData,
  })
    .then(r => {
      console.log(r);
      Toast.clear();
      Dialog.alert({
        title: "报名成功",
        messageAlign: "left",
        confirmButtonText: "关闭",
        message: () => (
          <img
            src="https://cxzx.smcic.net/topic/tool/img/er.jpg"
            style="width: 100%"
          />
        ),
      });
    })
    .catch(() => {
      Toast.clear();
      Toast("报名失败");
    });
};
</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;
  overflow: hidden;
}
.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>