提交

src/utils/isTerminal.js

@@ -1,6 +1,13 @@
 const wn = window.navigator;
 const ua = wn.userAgent;
 
+let sspFun = window.webkit
+  ? window.webkit.messageHandlers
+    ? "ios"
+    : "none"
+  : "none";
+if (sspFun == "none" && window.TideApp) sspFun = "android";
+
 const isAndroid = /(Android);?[\s/]+([\d.]+)?/i.test(ua);
 const isIpad = /(iPad).*OS\s([\d_]+)/i.test(ua);
 const isIpod = /(iPod)(.*OS\s([\d_]+))?/i.test(ua);
@@ -9,5 +16,16 @@ const isWechat = /micromessenger/i.test(ua);
 const isAlipay = /alipayclient/i.test(ua);
 const isWindows = /Win/i.test(wn.platform);
 const isMac = /Mac/i.test(wn.platform);
+const isShanshipin = !isWindows && !isMac && !isWechat && sspFun != "none";
 
-export {isIphone,isWechat,isAlipay,isAndroid,isIpad,isIpod,isWindows,isMac}
+export {
+  isIphone,
+  isWechat,
+  isAlipay,
+  isAndroid,
+  isIpad,
+  isIpod,
+  isWindows,
+  isMac,
+  isShanshipin,
+};

src/utils/tool.js

@@ -5,7 +5,7 @@ import {
   isWindows,
   isMac,
   isWechat,
-} from ".//isTerminal";
+} from "./isTerminal";
 /**
  * 动态加载script
  * @param {string} url
@@ -62,10 +62,8 @@ export function getUser(next) {
   } 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,
@@ -74,6 +72,10 @@ export function getUser(next) {
   }
 }
 
+/**
+ * 帧动画
+ * @returns 
+ */
 export function requestAnimationFrame() {
   return (
     window.requestAnimationFrame ||

src/view/WorldContribution/index.vue

@@ -53,6 +53,13 @@
           placeholder="请输入院校名称"
           :rules="[{ validator: isString, message: '请输入正确内容' }]"
         />
+        <van-field
+          required
+          v-model="from.description"
+          label="作品简介"
+          placeholder="请输入简介"
+          :rules="[{ validator: isString, message: '请输入正确内容' }]"
+        />
         <van-field
           placeholder="上传作品"
           required
@@ -196,6 +203,7 @@ const onSubmit = () => {
   const oriData = new FormData();
   oriData.append("name", from.name);
   oriData.append("phone", from.tel);
+  oriData.append("description", from.description);
   oriData.append("university", from.university);
   oriData.append("file", from.file[0].file);
 
@@ -212,20 +220,9 @@ const onSubmit = () => {
     },
     data: oriData,
   })
-    .then(r => {
-      console.log(r);
+    .then(() => {
       Toast.clear();
-      Dialog.alert({
-        title: "报名成功",
-        messageAlign: "left",
-        confirmButtonText: "关闭",
-        message: () => (
-          <img
-            src="https://cxzx.smcic.net/topic/tool/img/er.jpg"
-            style="width: 100%"
-          />
-        ),
-      });
+      Toast("报名成功");
     })
     .catch(() => {
       Toast.clear();

src/view/WorldCup/components/chat.vue

@@ -28,7 +28,7 @@
   </div>
 </template>
 <script setup>
-import { ref, nextTick } from "vue";
+import { ref, nextTick, inject, defineEmits } from "vue";
 import { getChat, setChat } from "@/api/worldCup.js";
 import { requestAnimationFrame } from "@/utils/tool.js";
 import { Toast } from "vant";
@@ -44,6 +44,10 @@ const chatList = ref([]);
 const allChat = ref(null);
 const chat = ref("");
 const mT = ref(0);
+const user = inject("user");
+
+const emit = defineEmits(["toLogin"]);
+
 let time = undefined;
 let time1 = undefined;
 let id = -1;
@@ -63,14 +67,14 @@ function formmater(li) {
   nextTick(() => {
     AnimationFrame(scorllFun);
   });
-  if(!chatList.value.length) return;
+  if (!chatList.value.length) return;
   let max = -1;
   let index = -1;
   for (let i = 0; i < chatList.value.length; i++) {
     const v = chatList.value[i];
-    if(v.id > max){
-        max= Math.max(max, v.id);
-        index = i;
+    if (v.id > max) {
+      max = Math.max(max, v.id);
+      index = i;
     }
   }
   id = chatList.value[index].id;
@@ -93,8 +97,14 @@ function scorllFun() {
 
 function onSearch() {
   if (!chat.value) return;
+  if (!user.phone) return emit("toLogin", oriSave);
+  else oriSave();
+}
+
+function oriSave() {
+    console.log(user, user.phone)
   setChat({
-    phone: "18439106376",
+    phone: user.phone,
     content: chat.value,
   }).then(r => {
     console.log(r);

src/view/WorldCup/components/match.vue

@@ -72,7 +72,6 @@ const rowHeight = fontSize.value / 1.5 + 30;
 const height = ref(rowHeight * maxcol.length + 25);
 let textSize = 12;
 let id = "";
-console.log(team);
 for (let row = 0; row < maxcol.length; row++) {
   let imgUrl = {
     isDefault: true,
@@ -258,7 +257,7 @@ function selectFlag(index) {
     border-radius: 12px;
     background-color: rgba($color: #b8dd8a, $alpha: 0.5);
     color: #fff;
-    padding: 0.2em 0;
+    padding: 0;
     position: relative;
     .svg {
       position: absolute;

src/view/WorldCup/index.vue

@@ -2,9 +2,16 @@
   <div class="WorldCup" :style="'font-size: ' + fontSize + 'px'">
     <div class="up">
       <img class="upbg" :src="require('../../assets/img/upbg.jpg')" />
-      <video class="video" src=""></video>
+      <video controls class="video" src=""></video>
       <img class="activityTitle" :src="require('../../assets/img/T.png')" />
-      <div class="activity"></div>
+      <div class="activity">
+        <p>
+          尽管曾经的比赛已成过眼云烟，但总有些经典瞬间无法忘却。那些年的世界杯名场面、那些与挚友一同熬夜看比赛的日子，那些因为足球而欣喜、落寞、激动、感伤的时刻，会永远铭记心中。
+        </p>
+        <p class="nextDuan">
+          用户可在下方“我要投稿”上传自己与足球相关的视频，题材包含：足球技巧展示、喜爱的球队/球星、球衣收藏、印象深刻的比赛等各种足球、世界杯相关的视频，并点击“我的投稿”分享邀请好友助威。
+        </p>
+      </div>
       <div class="btns">
         <img
           class="userInput"
@@ -13,7 +20,7 @@
         />
         <img
           class="userInput my"
-          @click="() => toNewPage('./WorldCupDetail.html')"
+          @click="verification"
           :src="require('../../assets/img/my.png')"
         />
       </div>
@@ -23,24 +30,24 @@
         <div class="title">模块标题</div>
         <van-row gutter="18">
           <van-col span="12">
-            <video class="video" src=""></video>
+            <video controls class="video" src=""></video>
           </van-col>
           <van-col span="12">
-            <video class="video" src=""></video>
+            <video controls class="video" src=""></video>
           </van-col>
         </van-row>
         <van-row gutter="18">
           <van-col span="12">
-            <video class="video" src=""></video>
+            <video controls class="video" src=""></video>
           </van-col>
           <van-col span="12">
-            <video class="video" src=""></video>
+            <video controls class="video" src=""></video>
           </van-col>
         </van-row>
       </div>
       <div class="vote">
         <ranking />
-        <chat />
+        <chat @toLogin="login" />
       </div>
       <match v-if="team.length" />
     </div>
@@ -51,15 +58,10 @@ import { ref, provide, reactive } from "vue";
 import chat from "./components/chat.vue";
 import ranking from "./components/ranking.vue";
 import match from "./components/match.vue";
+import { Dialog } from "vant";
 
 import { getMatch } from "@/api/worldCup.js";
-// import { onMounted, reactive } from "vue";
-// import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
-/**
- * window.$originData.orginParames.title 页面标题
- * window.$originData.orginParames.parameters 固定参数值
- * window.$originData.urlParames url参数
- */
+
 const availWidth =
   window.$originData.orginParames.availWidth > 1440
     ? 1440
@@ -67,11 +69,28 @@ const availWidth =
 const fontSize = ref(availWidth / 10);
 const maxcol = [8, 4, 2, 1, 1, 1, 2, 4, 8];
 let team = reactive([]);
-
+const shanshipin = window.$shanshipin || {};
+const from = reactive({
+  name: shanshipin.UserName || localStorage.getItem("worldCupName") || "",
+  phone: shanshipin.Phone || localStorage.getItem("worldCupPhone") || "",
+});
 provide("fontSize", fontSize); // 配置全域参数
 provide("availWidth", availWidth); // 配置全域参数
 provide("maxcol", maxcol); // 配置全域参数
 provide("team", team); // 配置全域参数
+provide("user", from); // 配置全域参数
+// import { onMounted, reactive } from "vue";
+// import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
+/**
+ * window.$originData.orginParames.title 页面标题
+ * window.$originData.orginParames.parameters 固定参数值
+ * window.$originData.urlParames url参数
+ */
+
+function setStorage() {
+  localStorage.setItem("worldCupPhone", from.phone || "");
+  localStorage.setItem("worldCupName", from.name || "");
+}
 
 /**
  * getMatch  获得赛事日程；
@@ -143,6 +162,40 @@ function setTeam(teamIndex, item) {
   });
 }
 
+function login(next) {
+  Dialog.alert({
+    title: "",
+    messageAlign: "left",
+    theme: "round-button",
+    confirmButtonText: "登录",
+    message: () => (
+      <div>
+        <van-field
+          required
+          v-model={from.name}
+          label="姓名"
+          placeholder="请输入用户名"
+        />
+        <van-field
+          required
+          v-model={from.phone}
+          label="联系方式"
+          type="tel"
+          placeholder="请输入手机号"
+        />
+      </div>
+    ),
+  }).then(() => {
+    setStorage();
+    next && next();
+  });
+}
+
+function verification() {
+  if (!from.phone) return login(() => toNewPage("./WorldCupDetail.html"));
+  toNewPage("./WorldCupDetail.html");
+}
+
 function toNewPage(url) {
   if (!url) return;
   let U = url || "";
@@ -190,6 +243,20 @@ function toNewPage(url) {
       background-size: 100% 100%;
       margin: 17px 10px 19px 10px;
       min-height: 315px;
+      color: #fff;
+      font-size: 14px;
+      font-weight: 400;
+      padding: 15px;
+      line-height: 1.8em;
+      p {
+        text-indent: 2em;
+        border: 1px solid #fbd204;
+        border-radius: 1em;
+        padding: 5px;
+      }
+      .nextDuan {
+        margin-top: 20px;
+      }
     }
     .btns {
       display: flex;

src/view/WorldCupDetail/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="WorldCupDetail">
     <img class="upbg" :src="require('../../assets/img/upbg.jpg')" />
-    <video class="video" :src="detailUse.file || ''"></video>
+    <video controls class="video" :src="detailUse.file || ''"></video>
     <p class="title" v-text="detailUse.name"></p>
     <van-cell-group inset>
       <van-row>
@@ -49,29 +49,25 @@
         </van-col>
       </van-row>
     </van-cell-group>
-    <div class="line">作品简介</div>
-    <div class="artcle">
-      这是一个小小的简介这是一个小小的简介这是一个小小的简介这是一个小小的简介这是一个小小的简介这是一个
-      小小的简介这是一个小小的简介这是一个小小的简介这是一个小小的简介这是一个小小的简介这是一个小小的简
-      介这是一个小小的简介这是一个小小的简介这是一个小小的简介这是一个小小的简介这是一个小小的简介这是一
-      个小小的简介这是一个小小的简介这是一个小小的简介这是一个小小的简介这是一个小小的简介这是一个小
-      小的简介这是一个小小的简介这是一个小小的简介这是一个小小的简介这是一个小小的简介这是一个小小的简介
-    </div>
+    <div class="line" v-if="detailUse.description">作品简介</div>
+    <div class="artcle" v-text="detailUse.description"></div>
     <van-button
       round
       color="linear-gradient(to bottom, #FFA244, #FF5733)"
       type="primary"
       class="saveP"
       block
-      style="font-size: 18px;"
+      style="font-size: 18px"
       @click="saveVote"
       >投票</van-button
     >
   </div>
 </template>
 <script setup>
-import {ref} from "vue";
-import {votpSave} from "@/api/worldCup.js";
+import { isShanshipin,isWechat } from "@/utils/isTerminal";
+import { ref, reactive } from "vue";
+import { votpSave } from "@/api/worldCup.js";
+import { Toast, Dialog } from "vant";
 // import { onMounted, reactive } from "vue";
 // import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
 /**
@@ -79,29 +75,66 @@ import {votpSave} from "@/api/worldCup.js";
  * window.$originData.orginParames.parameters 固定参数值
  * window.$originData.urlParames url参数
  */
-import {Detail} from "@/api/worldCup.js";
+import { Detail } from "@/api/worldCup.js";
+
+const p = isWechat?'微信': isShanshipin? '闪视频' : '其它';
 const detailUse = ref({});
 const shanshipin = window.$shanshipin || {};
-shanshipin.Phone =
-  window.$originData.urlParames.phone || shanshipin.Phone || "";
-shanshipin.UserName =
-  decodeURI(window.$originData.urlParames.userName || "") ||
-  shanshipin.UserName ||
-  "";
+const from = reactive({
+  name: shanshipin.UserName || localStorage.getItem("worldCupName") || "",
+  phone: shanshipin.Phone || localStorage.getItem("worldCupPhone") || "",
+});
+
+function login(next) {
+  Dialog.alert({
+    title: "",
+    messageAlign: "left",
+    theme: "round-button",
+    confirmButtonText: "登录",
+    message: () => (
+      <div>
+        <van-field
+          required
+          v-model={from.name}
+          label="姓名"
+          placeholder="请输入用户名"
+        />
+        <van-field
+          required
+          v-model={from.phone}
+          label="联系方式"
+          type="tel"
+          placeholder="请输入手机号"
+        />
+      </div>
+    ),
+  }).then(() => {
+    localStorage.setItem("worldCupPhone", from.phone || "");
+    localStorage.setItem("worldCupName", from.name || "");
+    next && next();
+  });
+}
+console.log('-------->',isShanshipin)
+const target = window.$originData.urlParames.phone || from.phone;
+
 Detail({
-    phone: shanshipin.Phone
-}).then(r=>{
+  phone: target,
+}).then(r => {
+  detailUse.value = r || {};
+});
+function saveVote() {
+  if (!from.phone) return login(vote);
+  else vote();
+}
+function vote() {
+  votpSave({
+    target: target,
+    source: from.phone,
+    client: p
+  }).then(r => {
     console.log(r);
-    detailUse.value = r || {};
-})
-
-function saveVote(){
-    votpSave({
-        target: shanshipin.Phone,
-        source: ""
-    }).then(r=>{
-        console.log(r)
-    })
+    Toast("感谢您的支持！");
+  });
 }
 </script>
 <style lang="scss">