提交

src/view/SilkRoadSpringFestivalGala/index.vue

@@ -87,7 +87,7 @@ document.title = "多彩丝路中国年 | 2023新年开运色";
  * window.$originData.orginParames.parameters 固定参数值
  * window.$originData.urlParames url参数
  */
-const page = ref("first");
+const page = ref("six");
 // let first_text = ['"大美中国·多彩丝路"', "2023丝路春晚 联名限定"];
 // for (let i = 0; i < first_text.length; i++) {
 //   first_text[i] = first_text[i].split("");

src/view/SilkRoadSpringFestivalGala/pages/eight.vue

@@ -1,232 +1,279 @@
 <template>
-	<div class="eight">
-		<van-row class="luckDraw">
-			<van-col span="8" v-for="i in 12" :key="i + 'll'" :class="{ shakeSlow: show[i - 1] }">
-				<div v-if="show[i - 1]" class="click">点我</div>
-				<van-image @click="draw" :width="img.width" :height="img.height" :class="{ img: true }" fit="contain"
-					:src="'https://cxzx.smcic.net/topic/tool/img/silugift/' + i + '.png'">
-					<template v-slot:loading>
-						<van-loading type="spinner" size="20" />
-					</template>
-				</van-image>
-			</van-col>
-		</van-row>
-		<van-notice-bar color="#000000" background="#ffffff" wrapable :scrollable="false"
-			text="点击下方小视频，给手气充能，增加一次抽奖机会！" />
-		<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
-			<van-swipe-item>
-				<div class="vieoPlay">
-					<van-icon name="play-circle-o" @click="
-              () => playVideo('https://cxzx.smcic.net/topic/tool/media/ad.mp4')
-            " color="#ffffff" class="play" size="40" />
-					<img style="width: 100%"
-						src="https://cxzx.smcic.net/topic/tool/media/ad.mp4?x-oss-process=video/snapshot,t_100,f_jpg,m_fast" />
-				</div>
-			</van-swipe-item>
-		</van-swipe>
-
-
-
-
-	</div>
+  <div class="eight">
+    <div class="headText">
+      <p>2023丝路嘉年华暨丝路春晚</p>
+      <p>携手长安花小榨菜籽油、长武苹果</p>
+      <p>向你花式拜年，奖品丰厚，福利多多</p>
+      <p>更多周边奖品欢迎你来拿！快来新年冲好运鸭！</p>
+    </div>
+    <van-row class="luckDraw">
+      <van-col
+        span="8"
+        v-for="i in 12"
+        :key="i + 'll'"
+        :class="{ shakeSlow: show[i - 1] }"
+      >
+        <div v-if="show[i - 1]" class="click">点我</div>
+        <van-image
+          @click="draw"
+          :width="img.width"
+          :height="img.height"
+          :class="{ img: true }"
+          fit="contain"
+          :src="'https://cxzx.smcic.net/topic/tool/img/silugift/' + i + '.png'"
+        >
+          <template v-slot:loading>
+            <van-loading type="spinner" size="20" />
+          </template>
+        </van-image>
+      </van-col>
+    </van-row>
+    <van-notice-bar
+      color="#000000"
+      background="#ffffff"
+      wrapable
+      :scrollable="false"
+      text="点击下方小视频，给手气充能，增加一次抽奖机会！"
+    />
+    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+      <van-swipe-item>
+        <div class="vieoPlay">
+          <van-icon
+            name="play-circle-o"
+            @click="() => playVideo()"
+            color="#ffffff"
+            class="play"
+            size="40"
+          />
+          <img
+            style="width: 100%"
+            src="https://cxzx.smcic.net/topic/tool/img/videoImg.jpg"
+          />
+        </div>
+      </van-swipe-item>
+    </van-swipe>
+  </div>
 </template>
 <script setup>
-	import {
-		reactive,
-		ref,
-		defineEmits,
-		defineExpose
-	} from "vue";
-	import {
-		showDialog,
-		showToast,
-		showConfirmDialog
-	} from "vant";
-	import {
-		getDrawOri,
-		getUpdateOri
-	} from "@/api/SilkRoadSpringGala.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参数
-	 */
-	let w = window.$originData.orginParames.availWidth || 0;
-	const show = ref(Array(12).fill(false));
-	const next = false;
-	const emits = defineEmits(["showVideo", "showTitleFunc"]);
-	let t = setInterval(() => {
-		let index = Math.ceil(Math.random() * 12) - 1;
-		if (index < 0) index = 0;
-		for (let i = 0; i < show.value.length; i++) {
-			show.value[i] = i == index;
-		}
-		if (next) clearInterval(t);
-	}, 5000);
-
-	w = (w / 3) * 0.8;
-	const img = reactive({
-		width: w,
-		height: w,
-	});
-
-	let T = undefined;
-	function draw() {
-		const phone = localStorage.getItem("silkRoadPhone");
-		if (!phone) return emits("showTitleFunc");
-		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
-					},
-				})
-			
-			})
-		},200);
-	}
-
-	function playVideo(url) {
-		emits("showVideo", url);
-	}
-
-	defineExpose({
-		draw
-	})
+import { reactive, ref, defineEmits, defineExpose } from "vue";
+import { showDialog, showToast, showConfirmDialog } from "vant";
+import { getDrawOri, getUpdateOri } from "@/api/SilkRoadSpringGala.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参数
+ */
+let w = window.$originData.orginParames.availWidth || 0;
+const show = ref(Array(12).fill(false));
+const address = ref(localStorage.getItem("silkRoadAddress") || "");
+const nickName = ref(localStorage.getItem("silkRoadName") || "");
+const next = false;
+const emits = defineEmits(["showVideo", "showTitleFunc"]);
+let t = setInterval(() => {
+  let index = Math.ceil(Math.random() * 12) - 1;
+  if (index < 0) index = 0;
+  for (let i = 0; i < show.value.length; i++) {
+    show.value[i] = i == index;
+  }
+  if (next) clearInterval(t);
+}, 5000);
+
+w = (w / 3) * 0.8;
+const img = reactive({
+  width: w,
+  height: w,
+});
+
+let T = undefined;
+function draw() {
+  const phone = localStorage.getItem("silkRoadPhone");
+  if (!phone) return emits("showTitleFunc");
+  if (T) clearTimeout(T);
+  T = setTimeout(() => {
+    getDrawOri({
+      phone,
+    }).then(r => {
+      let isdraw = r.prizeId !== 1; // 接入接口后直接由接口提供是否中将
+      if (!isdraw)
+        return showDialog({
+          title: r.name,
+          message:
+            "很遗憾哟，新年礼物擦肩而过啦！点击下方刷个小视频吧，给手气充能，获取额外抽奖机会！",
+        });
+      const field = (
+        <van-field
+          required
+          v-model={address.value}
+          label="地址"
+          placeholder="请输入地址"
+        />
+      );
+      const nickNameEle = (
+        <van-field
+          required
+          v-model={nickName.value}
+          label="昵称"
+          placeholder="请输入昵称"
+        />
+      );
+      showConfirmDialog({
+        title: "获得" + r.name,
+        message: () => {
+          return (
+            <div>
+              <img src={r.url} style="width: 5em" />
+              {!nickName.value ? nickNameEle : ""}
+              {!address.value ? field : ""}
+            </div>
+          );
+        },
+        showCancelButton: false,
+        beforeClose: type => {
+          if (type !== "confirm") return true;
+          getUpdateOri({
+            phone: localStorage.getItem("silkRoadPhone"),
+            userName: phone,
+            addr: address.value,
+          }).then(() => {
+            localStorage.setItem("silkRoadAddress", address.value);
+            localStorage.setItem("silkRoadName", nickName.value);
+            showToast("奖品已打包，静等您收货哦！");
+          });
+          return true;
+        },
+      });
+    });
+  }, 200);
+}
+
+function playVideo() {
+  let url = "https://cxzx.smcic.net/topic/tool/media/ad.mp4";
+  if (Math.random() >= 0.5)
+    url = "https://cxzx.smcic.net/topic/tool/media/changanhua.M4V";
+  emits("showVideo", url);
+}
+
+defineExpose({
+  draw,
+});
 </script>
 <style lang="scss" scoped>
-	.eight {
-		width: 100%;
-		height: 100%;
-		padding: 0.5em 0;
-		background-color: #fff;
-		position: relative;
-
-		.luckDraw {
-			$background: #00000040;
-			background-color: #eeeeee80;
-			border-radius: 5px;
-			padding: 0.5em;
-			margin: 0.5em auto;
-			width: 96%;
-
-			.img {
-				border-radius: 5px;
-				display: block;
-				margin: auto;
-				border: 3px solid #ffffff;
-			}
-
-			.click {
-				background-color: $background;
-				position: absolute;
-				border-radius: 3px;
-				text-align: center;
-				padding: 2px 3px;
-				color: #fff;
-				font-size: 14px;
-				right: -0.5em;
-				top: -0.5em;
-				width: 4em;
-				z-index: 1;
-			}
-
-			.click:before {
-				position: absolute;
-				display: block;
-				content: " ";
-				height: 0px;
-				width: 0px;
-				border: 3px solid $background;
-				border-top-color: rgba($color: #000000, $alpha: 0);
-				border-left-color: rgba($color: #000000, $alpha: 0);
-				bottom: -3px;
-				left: 9px;
-				transform: rotate(45deg);
-			}
-		}
-	}
-
-	.shakeSlow {
-		animation: shake-slow 1s ease-in-out;
-	}
-
-	@keyframes shake-slow {
-		0% {
-			transform: rotate(0) scale(1);
-		}
-
-		20% {
-			transform: rotate(2.5deg);
-		}
-
-		40% {
-			transform: rotate(-2.5deg);
-		}
-
-		60% {
-			transform: rotate(2.5deg) scale(1.1);
-		}
-
-		80% {
-			transform: rotate(-2.5deg);
-		}
-
-		100% {
-			transform: rotate(0);
-		}
-	}
+.eight {
+  width: 100%;
+  height: 100%;
+  padding: 0.5em 0;
+  background-color: #fff;
+  position: relative;
+
+  .headText {
+    text-align: center;
+    font-size: 14px;
+    width: 100vw;
+    line-height: 1.5em;
+  }
+  .luckDraw {
+    $background: #00000040;
+    background-color: #eeeeee80;
+    border-radius: 5px;
+    padding: 0.5em;
+    margin: 0.5em auto;
+    width: 96%;
+
+    .img {
+      border-radius: 5px;
+      display: block;
+      margin: auto;
+      border: 3px solid #ffffff;
+    }
+
+    .click {
+      background-color: $background;
+      position: absolute;
+      border-radius: 3px;
+      text-align: center;
+      padding: 2px 3px;
+      color: #fff;
+      font-size: 14px;
+      right: -0.5em;
+      top: -0.5em;
+      width: 4em;
+      z-index: 1;
+    }
+
+    .click:before {
+      position: absolute;
+      display: block;
+      content: " ";
+      height: 0px;
+      width: 0px;
+      border: 3px solid $background;
+      border-top-color: rgba($color: #000000, $alpha: 0);
+      border-left-color: rgba($color: #000000, $alpha: 0);
+      bottom: -3px;
+      left: 9px;
+      transform: rotate(45deg);
+    }
+  }
+}
+
+.shakeSlow {
+  animation: shake-slow 1s ease-in-out;
+}
+
+@keyframes shake-slow {
+  0% {
+    transform: rotate(0) scale(1);
+  }
+
+  20% {
+    transform: rotate(2.5deg);
+  }
+
+  40% {
+    transform: rotate(-2.5deg);
+  }
+
+  60% {
+    transform: rotate(2.5deg) scale(1.1);
+  }
+
+  80% {
+    transform: rotate(-2.5deg);
+  }
+
+  100% {
+    transform: rotate(0);
+  }
+}
 </style>
 <style lang="scss">
-	.eight {
-		.van-col {
-			padding: 0.2em 0;
-			position: relative;
-		}
-
-		.vieoPlay {
-			position: relative;
-
-			.play {
-				position: absolute;
-				top: 50%;
-				left: 50%;
-				transform: translate(-50%, -50%);
-			}
-		}
-	}
-
-	.dialogImg {
-		width: 5em;
-		display: block;
-		margin: auto;
-	}
+.eight {
+  .van-col {
+    padding: 0.2em 0;
+    position: relative;
+  }
+  .van-notice-bar__wrap {
+    background: #ffffff;
+    color: #000000;
+  }
+
+  .vieoPlay {
+    position: relative;
+
+    .play {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+}
+
+.dialogImg {
+  width: 5em;
+  display: block;
+  margin: auto;
+}
 </style>

src/view/SilkRoadSpringFestivalGala/pages/five.vue

@@ -68,7 +68,7 @@ let fiveT = setInterval(() => {
     line-height: 5vh;
     .line {
       opacity: 0;
-      transition: opacity 1s;
+      transition: opacity 0.5s;
     }
   }
 }

src/view/SilkRoadSpringFestivalGala/pages/six.vue

@@ -10,12 +10,16 @@
       <van-swipe-item>
         <div style="width: 100%; overflow: hidden; position: relative">
           <transition name="fade">
-            <img
-              v-if="step === 5"
-              @click="nextPage"
-              src="../../../assets/img/next.png"
-              class="next"
-            />
+            <div class="next" v-if="step === 5">
+              <img
+                @click="nextPage"
+                src="../../../assets/img/next.png"
+                style="width: 2em; display: block; margin: 0 auto"
+              />
+              <p style="font-size: 12px; text-align: center">
+                获取你的新年好物
+              </p>
+            </div>
           </transition>
           <div class="six" :style="'background-image: url(' + bgimg + ')'">
             <img
@@ -94,11 +98,11 @@
             position: relative;
           "
         >
-          <img
-            @click="nextPage"
-            src="../../../assets/img/next.png"
-            class="next"
-          />
+            <img
+                @click="nextPage"
+                src="../../../assets/img/next.png"
+                class="next"
+            />
           <seven />
         </div>
       </van-swipe-item> -->
@@ -145,17 +149,10 @@
 
     <van-dialog
       v-model:show="showTitle"
-      title="登录"
+      title="登录后即可参与抽奖~"
       show-cancel-button
       :before-close="closeTitle"
     >
-      <van-field
-        required
-        v-model="from.name"
-        label="昵称"
-        type="text"
-        placeholder="请输入昵称"
-      />
       <van-field
         required
         v-model="from.phone"
@@ -268,9 +265,9 @@ let t = setTimeout(() => {
       t = setInterval(() => {
         nextStep.value === 2 && (step.value += 1);
         if (step.value === 5) clearInterval(t);
-      }, 3000);
+      }, 1000);
     }
-  }, 2000);
+  }, 1000);
 }, 200);
 
 function nextPage() {
@@ -304,7 +301,7 @@ function getCode() {
 
 function closeTitle(type) {
   if (type !== "confirm") return true;
-  const v = !from.code || !from.phone || !from.name;
+  const v = !from.code || !from.phone;
   if (v) {
     showToast("请输入完整信息。");
     return false;
@@ -382,6 +379,12 @@ function showVideo(url) {
 }
 
 function closeSeven() {
+  autoTime = Date.now() - time;
+  if (autoTime / current <= 0.95)
+    showToast({
+      message: "温馨提醒：中途退出无法获取抽奖机会哦～",
+      duration: 3000,
+    });
   let ele = document.querySelector(".sevenvideo");
   ele.pause();
   showOverlay.value = false;
@@ -446,7 +449,7 @@ function endVideo() {
       display: inline-block;
       white-space: nowrap;
       transition-property: all;
-      transition-duration: 2s;
+      transition-duration: 0.5s;
       opacity: 0;
     }
   }
@@ -500,7 +503,8 @@ function endVideo() {
   left: 50%;
   transform: translateX(-50%);
   top: inherit;
-  width: 2em;
+  width: 8em;
+  color: #fff;
   z-index: 1;
   position: absolute;
   animation-name: an;
@@ -527,7 +531,7 @@ function endVideo() {
   bottom: 0;
   right: 0;
   z-index: 10;
-  background-color: #00000080;
+  background-color: #000000;
 
   .gs {
     width: 100vw;

src/view/SilkRoadSpringFestivalGala/pages/third.vue

@@ -56,7 +56,7 @@ let thirdT = setInterval(() => {
     line-height: 5vh;
     .line {
       opacity: 0;
-      transition: opacity 1s;
+      transition: opacity .5s;
     }
   }
 }