提交

src/config/page.json

@@ -10,6 +10,10 @@
     "imageLiveAdmin": {
         "title": "图片直播上传"
     },
+    "WorldContribution":{
+        "title": "世界杯投稿",
+        "parameters": {}
+    },
     "WorldCup": {
         "title": "世界杯"
     },

src/utils/tool.js

@@ -1,27 +1,63 @@
 /**
  * 动态加载script
- * @param {string} url 
- * @param {string} callback 
+ * @param {string} url
+ * @param {string} callback
  */
- export function loadScript(url, callback) {
-    let script = document.createElement("script");
-    if (script.readyState) {
-      // IE
-      script.onreadystatechange = function () {
-        if (
-          script.readyState === "loaded" ||
-          script.readyState === "complete"
-        ) {
-          script.onreadystatechange = null;
-          callback();
-        }
-      };
-    } else {
-      // 其他浏览器
-      script.onload = function () {
+export function loadScript(url, callback) {
+  let script = document.createElement("script");
+  if (script.readyState) {
+    // IE
+    script.onreadystatechange = function () {
+      if (script.readyState === "loaded" || script.readyState === "complete") {
+        script.onreadystatechange = null;
         callback();
+      }
+    };
+  } else {
+    // 其他浏览器
+    script.onload = function () {
+      callback();
+    };
+  }
+  script.src = url;
+  document.getElementsByTagName("head")[0].appendChild(script);
+}
+
+export function getUser(next) {
+    window.$shanshipin = {};
+  // 判断闪视频登录状态
+  if (isWindows || isMac || isWechat) return next && next();
+  // 获取登录信息
+  if (isIpad || isIpod || isIphone) {
+    if (!window.webkit || !window.webkit.messageHandlers)
+      return next && next();
+    window.setUser = user => {
+      if (user == "{}")
+        return window.webkit.messageHandlers.iosJumpLogin.postMessage([]);
+      const u1 = JSON.parse(user || "{}");
+      window.webkit.messageHandlers.getAppInfo.postMessage([]);
+      window.setAppInfo = userJson => {
+        const u2 = JSON.parse(userJson || "{}");
+        window.$shanshipin = {
+          ...u1,
+          ...u2,
+        };
+        next && next();
       };
-    }
-    script.src = url;
-    document.getElementsByTagName("head")[0].appendChild(script);
-  }
+    };
+
+    window.webkit.messageHandlers.tideGetUser.postMessage([]);
+  } else {
+    if (!window.TideApp) return next && next();
+    const u1 = JSON.parse(window.TideApp.getUser() || "{}");
+    console.log("u1", u1);
+    if (!u1.UserId) window.TideApp.login();
+    const u2 = JSON.parse(window.TideApp.getAppInfo() || "{}");
+    console.log("u2", u2);
+    window.$shanshipin = {
+      ...u1,
+      ...u2,
+    };
+    next && next();
+  }
+}

src/view/Soundbyte/index.vue

@@ -177,7 +177,7 @@ const showGuize = () => {
     confirmButtonText: "关闭",
     message: () => (
       <div class="art">
-        <p>1、报名时间：即日起至2022年11月25日。</p>
+        <p>1、报名时间：即日起至2022年11月22日11时。</p>
         <p>2、参与对象：陕西各高校学生。</p>
         <p>3、参赛要求：曲风不限，自行准备演唱伴奏。</p>
         <p>4、嘉宾评委：陕西广播电视台音乐类主播/西安知名音乐人/歌手。</p>

src/view/WorldContribution/index.js

@@ -0,0 +1,92 @@
+import App from "./index.vue";
+import "@/assets/js/common";
+import { createApp } from "vue";
+import { getPageParameters, environment } from "../../config/pageConfig";
+import {
+  isIpad,
+  isIpod,
+  isIphone,
+  isWindows,
+  isMac,
+  isWechat,
+} from "../../utils/isTerminal";
+// 判断环境
+environment();
+window.$originData = getPageParameters();
+document.title = window.$originData.orginParames.title || "";
+
+const getUser = () => {
+  window.$shanshipin = {};
+  // 判断闪视频登录状态
+  if (isWindows || isMac || isWechat) return createApp(App).mount("#app");
+  // 获取登录信息
+  if (isIpad || isIpod || isIphone) {
+    if (!window.webkit || !window.webkit.messageHandlers)
+      return createApp(App).mount("#app");
+    window.setUser = user => {
+      if (user == "{}")
+        return window.webkit.messageHandlers.iosJumpLogin.postMessage([]);
+      const u1 = JSON.parse(user || "{}");
+      window.webkit.messageHandlers.getAppInfo.postMessage([]);
+      window.setAppInfo = userJson => {
+        const u2 = JSON.parse(userJson || "{}");
+        window.$shanshipin = {
+          ...u1,
+          ...u2,
+        };
+        createApp(App).mount("#app");
+      };
+    };
+
+    window.webkit.messageHandlers.tideGetUser.postMessage([]);
+  } else {
+    if (!window.TideApp) return createApp(App).mount("#app");
+    const u1 = JSON.parse(window.TideApp.getUser() || "{}");
+    console.log("u1", u1);
+    if (!u1.UserId) window.TideApp.login();
+    const u2 = JSON.parse(window.TideApp.getAppInfo() || "{}");
+    console.log("u2", u2);
+    window.$shanshipin = {
+      ...u1,
+      ...u2,
+    };
+    createApp(App).mount("#app");
+  }
+};
+getUser();
+
+window.setUserSession = () => {
+  console.log("登录");
+  getUser();
+};
+
+
+var SL = new window.SmcicLogger("shanshipin", "c6124d95");
+SL.Util.SetUrl("https://collect.smcic.net:8443/");
+SL.Systematic.Init({
+  appid: "c6124d95",
+  channel: "shanshipin",
+  model: "",
+  os: "",
+  os_version: "",
+  carrier: "",
+  network_type: "",
+  ip: "",
+  app_name: "",
+  app_version: "",
+  build_version: "",
+  platform_type: "",
+});
+SL.Content.CommodityDetail({
+  commodity_detail_source: "活动",
+  commodity_id: "",
+  commodity_name: document.title,
+  publisher_name: "",
+  publisher_id: "",
+  review_count: 0,
+  comment_count: 0,
+  collect_count: 0,
+  share_count: 0,
+  like_count: 0,
+  tag: [],
+});

src/view/WorldContribution/index.vue

@@ -0,0 +1,349 @@
+<template>
+  <div class="WorldContribution">
+    <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 8px 0 8px;
+          text-align: justify;
+          line-height: 1.5em;
+          font-size: 16px;
+        "
+      >
+        由陕西广电融媒体集团(台)官方平台闪视频APP、陕西音乐广播FM98.8、战马能量型维生素饮料联合打造的校园音乐
+        IP-“战马音浪·校园歌手大赛”将于2022年11月16日-11月26日举办。本次活动以线上直播PK
+        为主，结合线上线下丰富有趣的内容设置，依托省台影响力将赛事在全网曝光。
+      </p>
+      <p
+        style="
+          text-indent: 2em;
+          padding: 0 8px 8px 8px;
+          text-align: justify;
+          line-height: 1.5em;
+          font-size: 16px;
+        "
+      >
+        直播间不仅有暖冬定制大礼包、笔记本、U型枕、战马饮料，还有千元现金大奖、总决赛门票等你来拿！
+      </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="from.tel"
+          label="联系方式"
+          type="tel"
+          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: () => (
+      <div class="art">
+        <p>1、报名时间：即日起至2022年11月25日。</p>
+        <p>2、参与对象：陕西各高校学生。</p>
+        <p>3、参赛要求：曲风不限，自行准备演唱伴奏。</p>
+        <p>4、嘉宾评委：陕西广播电视台音乐类主播/西安知名音乐人/歌手。</p>
+        <p>
+          5、评比规则：唱功为基本要求，结合现场表现、演唱发挥进行综合评分，优秀选手将直接进入总决赛（决赛时间：2022年11月26日），线上将评出人气选手。
+        </p>
+        <p>
+          6、线上比赛时间：
+          <p style="text-indent: 2em;">11月16日 19:00--21:00</p>
+          <p style="text-indent: 2em;">11月23日 19:00--21:00</p>
+        </p>
+        <p>
+          7、线下比赛时间：
+          <p style="text-indent: 2em;">11月12日 14:00--16:00</p>
+          <p style="text-indent: 2em;">11月13日 14:00--16:00</p>
+          <p style="text-indent: 2em;">11月19日 14:00--16:00</p>
+          <p style="text-indent: 2em;">11月20日 14:00--16:00</p>
+        </p>
+        <p>8、线上PK赛奖品：战马定制大礼包、笔记本、U型枕、战马饮料。</p>
+        <p>
+          9、11月26日总决赛奖品：
+          <p style="text-indent: 2em;">冠军：3000元奖金 + 战马饮料4箱;</p>
+          <p style="text-indent: 2em;">亚军：2000元奖金 + 战马饮料3箱</p>
+          <p style="text-indent: 2em;">季军：1000元奖金 + 战马饮料2箱</p>
+        </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) 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>
+.WorldContribution {
+  width: 100vw;
+  min-height: 100vh;
+  background-color: #0c0000;
+  font-weight: 400;
+}
+.WorldContribution .art {
+  padding: 8px 8px 0 8px;
+  text-align: justify;
+  line-height: 1.5em;
+  font-size: 16px;
+}
+.WorldContribution .van-hairline--bottom:after {
+  border-bottom-width: 0px;
+}
+.WorldContribution .van-nav-bar__content {
+  background-image: url("../../assets/img/title.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  overflow: hidden;
+}
+.WorldContribution .van-nav-bar__title {
+  color: #f63634;
+  font-size: 23px;
+}
+.WorldContribution .van-button__text {
+  font-size: 15px;
+  font-weight: 400;
+}
+.WorldContribution .van-uploader__preview-cover {
+  background-color: #000;
+}
+.van-uploader__preview-cover video {
+  width: 100%;
+  height: 100%;
+}
+.WorldContribution .play {
+  position: relative;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.WorldContribution .Preview {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.3);
+  z-index: 10;
+}
+.WorldContribution .Preview video {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 100vw;
+  max-width: 100vh;
+  background: #000;
+}
+.WorldContribution .Preview .close {
+  position: absolute;
+  right: 5px;
+  top: 5px;
+}
+.WorldContribution .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>

src/view/WorldCup/index.js

@@ -7,3 +7,10 @@ environment();
 window.$originData = getPageParameters();
 document.title = window.$originData.orginParames.title || "";
 createApp(App).mount("#app");
+
+// 分享
+window.weixin_Share_Init(
+  "世界杯",
+  "这是世界杯",
+  "https://cxzx.smcic.net/topic/highSpeed/img/logo3.png"
+);