提交

src/api/SilkRoadSpringGala.js

@@ -60,4 +60,12 @@ export function getDrawOri(data) {
   });
 }
 
-
+// 更新用户
+export function getUpdateOri(data) {
+  return ajax({
+    url: "users/update",
+    method: "POST",
+	urlType: "slikRoad",
+    data,
+  });
+}

src/config/page.json

@@ -24,6 +24,9 @@
         "title": "丝路春晚"
     },
     "SilkRoadShanShiPin":{
+        "title": "丝路春晚"
+    },
+    "SilkRoadShanShiPinList":{
         "title": "丝路春晚投票"
     }
 }

src/view/SilkRoadShanShiPin/index.js

@@ -2,8 +2,97 @@ 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 || "";
-createApp(App).mount("#app");
+
+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();
+};
+
+// 分享
+window.weixin_Share_Init(
+  "战马音浪 · 校园歌手大赛",
+  "线上连麦PK报名通道已开通，火热报名中...",
+  "https://cxzx.smcic.net/topic/highSpeed/img/logo3.png"
+);
+
+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/SilkRoadShanShiPin/index.vue

@@ -1,19 +1,348 @@
 <template>
-  <div class="SilkRoadShanShiPin"></div>
+  <div class="SilkRoadShanShiPin">
+    <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 { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
+import { ref, reactive } from "vue";
+import { showToast,showLoadingToast, 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参数
  */
-console.log(window.$originData);
+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 = () => 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 = () => {
+  Dialog.alert({
+    title: "活动规则",
+    messageAlign: "left",
+    confirmButtonText: "关闭",
+    message: () => (
+      <div class="art">
+        <p>1、报名时间：即日起至2022年11月22日11时。</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) showToast("请上传作品");
+  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);
+
+  showLoadingToast({
+    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);
+      showLoadingToast.clear();
+      Dialog.alert({
+        title: "报名成功",
+        messageAlign: "left",
+        confirmButtonText: "关闭",
+        message: () => (
+          <img
+            src="https://cxzx.smcic.net/topic/tool/img/er.jpg"
+            style="width: 100%"
+          />
+        ),
+      });
+    })
+    .catch(() => {
+      showToast.clear();
+      showToast("报名失败");
+    });
+};
 </script>
 <style>
 .SilkRoadShanShiPin {
   width: 100vw;
-  height: 100vh;
+  min-height: 100vh;
+  background-color: #0c0000;
+  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>

src/view/SilkRoadShanShiPinList/index.js

@@ -0,0 +1,14 @@
+import App from './index.vue'
+import "@/assets/js/common"
+import {
+	createApp
+} from 'vue'
+import {
+	getPageParameters,
+	environment
+} from "../../config/pageConfig"
+// 判断环境
+environment();
+window.$originData = getPageParameters();
+document.title = window.$originData.orginParames.title || "";
+createApp(App).mount('#app');

src/view/SilkRoadShanShiPinList/index.vue

@@ -0,0 +1,34 @@
+<template>
+	<div class="SilkRoadShanShiPinList">
+		<img src="../../assets/img/soundbyte.jpg" style="width: 100%;" />
+		<div style="padding: .5em;">
+			<van-row gutter="8">
+			  <van-col span="8">
+				  <img src="../../assets/img/soundbyte.jpg" style="width: 100%;" />
+			  </van-col>
+			  <van-col span="8">
+				  <img src="../../assets/img/soundbyte.jpg" style="width: 100%;" />
+			  </van-col>
+			  <van-col span="8">
+				  <img src="../../assets/img/soundbyte.jpg" style="width: 100%;" />
+			  </van-col>
+			</van-row>
+		</div>
+	</div>
+</template>
+<script setup>
+	// import { onMounted, reactive } from "vue";
+	// import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
+	/**
+	 * window.$originData.orginParames.title 页面标题
+	 * window.$originData.orginParames.parameters 固定参数值
+	 * window.$originData.urlParames url参数
+	 */
+	console.log(window.$originData)
+</script>
+<style>
+	.SilkRoadShanShiPinList {
+		width: 100vw;
+		height: 100vh;
+	}
+</style>

src/view/SilkRoadSpringFestivalGala/pages/eight.vue

@@ -25,6 +25,9 @@
 			</van-swipe-item>
 		</van-swipe>
 
+
+
+
 	</div>
 </template>
 <script setup>
@@ -35,11 +38,13 @@
 		defineExpose
 	} from "vue";
 	import {
-		showDialog
+		showDialog,
+		showToast,
+		showConfirmDialog
 	} from "vant";
 	import {
 		getDrawOri,
-		getStore
+		getUpdateOri
 	} from "@/api/SilkRoadSpringGala.js";
 	// import { onMounted, reactive } from "vue";
 	// import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
@@ -50,7 +55,6 @@
 	 */
 	let w = window.$originData.orginParames.availWidth || 0;
 	const show = ref(Array(12).fill(false));
-	let address = localStorage.getItem("silkRoadAddress") || "";
 	const next = false;
 	const emits = defineEmits(["showVideo", "showTitleFunc"]);
 	let t = setInterval(() => {
@@ -68,43 +72,46 @@
 		height: w,
 	});
 
+	let T = undefined;
 	function draw() {
 		const phone = localStorage.getItem("silkRoadPhone");
 		if (!phone) return emits("showTitleFunc");
-		getDrawOri({
-			phone
-		}).then(r => {
-			let isdraw = r.prizeId !== 1; // 非中将概率，后期接入接口后直接由接口提供是否中将
-			showDialog({
-				title: r.name,
-				message: () => {
-					if (isdraw) return drawIsTrue(r);
-					if (!isdraw) return <div > 很遗憾哟，新年礼物擦肩而过啦！点击下方刷个小视频吧，给手气充能，获取额外抽奖机会！</div>;
-				},
-				beforeClose: type => {
-					console.log("type", type);
-					if (!isdraw) return true;
-					getStore({
-						"phone": localStorage.getItem("silkRoadPhone"),
-						"addr": address,
-					}).then(() => {
-						localStorage.setItem("silkRoadAddress", address);
+		if(T) clearTimeout(T);
+		T = setTimeout(()=>{
+			getDrawOri({
+				phone
+			}).then(r => {
+				let isdraw = r.prizeId !== 1; // 接入接口后直接由接口提供是否中将
+				if (!isdraw) return showDialog({
+					title: r.name,
+					message: "很遗憾哟，新年礼物擦肩而过啦！点击下方刷个小视频吧，给手气充能，获取额外抽奖机会！"
+				})
+				const address = ref(localStorage.getItem("silkRoadAddress") || "");
+				const field = <van-field required v-model={address.value} label="地址" placeholder="请输入地址" />;
+				showConfirmDialog({
+					title: "获得" + r.name,
+					message: ()=>{
+						return <div>
+							<img src={r.url} style="width: 5em" />
+							{ !address.value ? field : '' }
+						</div>
+					},
+					showCancelButton: false,
+					beforeClose: type =>{
+						if(type !== 'confirm') return true;
+						getUpdateOri({
+							"phone": localStorage.getItem("silkRoadPhone"),
+							"addr": address.value,
+						}).then(() => {
+							localStorage.setItem("silkRoadAddress", address.value);
+							showToast("奖品已打包，静等您收货哦！");
+						});
 						return true
-					}).catch(() => false);
-				}
-			});
-		})
-	}
-
-	function drawIsTrue(data) {
-		const gift = {
-			url: data.url,
-			name: data.name,
-		};
-		address = localStorage.getItem("silkRoadAddress") || "";
-		const field = <van-field required v-model={address}	label = "地址" type = "text"	placeholder = "请输入收获地址" /> ;
-		let ele = <div><img class = "dialogImg" src = { gift.url }/> <br / ><p > 恭喜您获得 < span style = "color: red" > {	gift.name} < /span>!</p > {!address ? field : ""} </div>;
-		return ele;
+					},
+				})
+			
+			})
+		},200);
 	}
 
 	function playVideo(url) {

src/view/SilkRoadSpringFestivalGala/pages/six.vue

@@ -167,7 +167,7 @@
 	const bgimg = ref(url.bg);
 	const kuangimg = ref(url.kuang);
 	const text2img = ref(url.text2);
-	const step = ref(0); // 动画步骤 默认0
+	const step = ref(4); // 动画步骤 默认0
 	const stepBody = ref(0); // 首页文字显示动画 默认0
 	const nextStep = ref(0);
 	const eightRef = ref(null);