动画优化

src/components/Index.vue

@@ -2,10 +2,10 @@
 import { Toast } from "vant";
 import { debounceTap } from "@/plugins";
 import gsap from "gsap";
-import { useMainStore } from '@/store'
+import { useMainStore } from "@/store";
 
 const emit = defineEmits(["IndexPage"]);
-const userStore = useMainStore()
+const userStore = useMainStore();
 
 const start = (event) => {
   debounceTap(event.target, () => {
@@ -13,7 +13,7 @@ const start = (event) => {
     gsap.to(".IndexPage", {
       duration: 0.5,
       autoAlpha: 0,
-      onComplete: () => { },
+      onComplete: () => {},
     });
   });
 };
@@ -32,7 +32,6 @@ const showRule = (event) => {
   });
 };
 
-
 const clockAni = () => {
   gsap.to(".index-clock-h", {
     duration: 12,
@@ -55,6 +54,28 @@ const clockAni = () => {
 };
 
 onMounted(() => {
+  gsap.from(".index-bg", { duration: 1, scale: 1.2, autoAlpha: 0 });
+  gsap.from(".index-title", { duration: 1, y: 20, autoAlpha: 0 });
+  gsap.from(".index-rule-btn", { duration: 1, x: -100, autoAlpha: 0 });
+  gsap.from(".index-prize-btn", {
+    duration: 1,
+    x: -100,
+    autoAlpha: 0,
+    delay: 0.3,
+  });
+  gsap.from(".index-start-btn", {
+    duration: 1,
+    y: 30,
+    autoAlpha: 0,
+    delay: 0.5,
+  });
+  gsap.from(".index-agreement", {
+    duration: 1,
+    scale: 0.4,
+    autoAlpha: 0,
+    delay: 0.5,
+  });
+
   clockAni();
 });
 </script>
@@ -72,13 +93,21 @@ onMounted(() => {
     <div class="index-container">
       <div class="index-title"></div>
       <div class="index-rule-btn" @click="showRule($event)"></div>
-      <div class="index-prize-btn" v-if="userStore.hasPrize" @click="showMyPrize($event)"></div>
+      <div
+        class="index-prize-btn"
+        v-if="userStore.hasPrize"
+        @click="showMyPrize($event)"
+      ></div>
       <div class="index-start-btn" @click="start"></div>
       <div class="index-agreement">
         风险提示:本材料由平安理财有限责任公司(以下简称“平安理财”)制作并提供。<span
-          class="b">本资料内容及观点仅供参考，不构成对任何人的投资建议。</span>以上产品投资管理机构/管理人为平安理财，代理销售机构不承担产品的投资、兑付和风险管理的责任。以上产品通过代理销售机构渠道销售的，产品风险评级应当以代理销售机构最终披露的评级结果为准。以上产品为非保本浮动收益理财产品，具体以产品说明书或产品公告披露为准。产品的业绩比较基准指管理人基于过往投资经验以及对产品存续期投资市场波动的预判而对本产品所设定的投资目标，业绩比较基准不是预期收益率，不代表产品的未来表现和实际收益，不构成对产品收益的承诺。<span
+          class="b"
-          class="b">理财产品过往业绩不代表其未来表现，不等于理财产品实际收益，投资须谨慎。过往业绩相关数据已经托管人核对。</span><span
+          >本资料内容及观点仅供参考，不构成对任何人的投资建议。</span
-          class="orange">理财非存款，产品有风险，投资须谨慎。</span>金融消费者不得利用金融产品和服务从事违法活动。
+        >以上产品投资管理机构/管理人为平安理财，代理销售机构不承担产品的投资、兑付和风险管理的责任。以上产品通过代理销售机构渠道销售的，产品风险评级应当以代理销售机构最终披露的评级结果为准。以上产品为非保本浮动收益理财产品，具体以产品说明书或产品公告披露为准。产品的业绩比较基准指管理人基于过往投资经验以及对产品存续期投资市场波动的预判而对本产品所设定的投资目标，业绩比较基准不是预期收益率，不代表产品的未来表现和实际收益，不构成对产品收益的承诺。<span
+          class="b"
+          >理财产品过往业绩不代表其未来表现，不等于理财产品实际收益，投资须谨慎。过往业绩相关数据已经托管人核对。</span
+        ><span class="orange">理财非存款，产品有风险，投资须谨慎。</span
+        >金融消费者不得利用金融产品和服务从事违法活动。
       </div>
     </div>
   </div>

src/components/MyPrize.vue

@@ -36,7 +36,7 @@ const hide = (event) => {
 
 const entryAni = () => {
   gsap.from(".MyPrizePage", { duration: 0.2, autoAlpha: 0 });
-  gsap.from(".myPrize-container", { duration: 0.5, autoAlpha: 0, scale: 0.7 });
+  gsap.from(".myPrize-container", { duration: 1, autoAlpha: 0, scale: 0.7 });
 };
 
 onMounted(() => {

src/components/Result.vue

@@ -56,6 +56,51 @@ onMounted(() => {
     .catch((err) => {
       console.error(err);
     });
+
+  gsap.from(".result-bg", {
+    duration: 0.7,
+    scale: 1.2,
+    autoAlpha: 0,
+  });
+  gsap.from(".mbti-title", {
+    duration: 0.7,
+    x: 100,
+    autoAlpha: 0,
+    delay: 0.3,
+  });
+  gsap.from(".des", {
+    duration: 0.7,
+    x: 100,
+    autoAlpha: 0,
+    stagger: 0.3,
+    delay: 0.5,
+  });
+  gsap.from(".blessings", {
+    duration: 0.7,
+    x: 100,
+    autoAlpha: 0,
+    stagger: 0.2,
+    delay: 0.6,
+  });
+  gsap.from(".product", {
+    duration: 0.7,
+    x: 100,
+    autoAlpha: 0,
+    delay: 0.9,
+  });
+  gsap.from(".produc-img", {
+    duration: 0.7,
+    x: 100,
+    autoAlpha: 0,
+    delay: 1.2,
+  });
+  gsap.from(".theme-tab", {
+    duration: 0.7,
+    x: 100,
+    autoAlpha: 0,
+    stagger: 0.3,
+    delay: 1.4,
+  });
 });
 
 const createPoster = (event) => {

src/components/Rule.vue

@@ -1,117 +1,137 @@
 <script setup>
-import { debounceTap } from '@/plugins'
+import { debounceTap } from "@/plugins";
+import gsap from "gsap";
 
 // 页面配置初始化
 const emit = defineEmits(["RulePage"]);
 
 const hide = (event) => {
-    debounceTap(event.target, () => {
+  debounceTap(event.target, () => {
-        emit('RulePage', { action: 'hide' })
+    emit("RulePage", { action: "hide" });
-    })
+  });
-}
+};
-
+onMounted(() => {
+  gsap.from(".RulePage", { duration: 0.2, autoAlpha: 0 });
+  gsap.from(".rule-container", { duration: 0.5, autoAlpha: 0, scale: 0.7 });
+});
 </script>
 
 <template>
-    <div class="RulePage">
+  <div class="RulePage">
-        <div class="rule-container">
+    <div class="rule-container">
-            <div class="content">
+      <div class="content">
-                <div class="rule-content">
+        <div class="rule-content">
-                    <div class="rule-text-area">
+          <div class="rule-text-area">
-                        <div class="part">
+            <div class="part">
-                            <div>【活动时间】：2024年2月5日——2月8日</div>
+              <div>【活动时间】：2024年2月5日——2月8日</div>
-                            <div>【活动奖励】：0.5-8.88元微信红包</div>
+              <div>【活动奖励】：0.5-8.88元微信红包</div>
-                        </div>
-                        <div class="part">
-                            <div>【活动攻略】：</div>
-                            <div>1、进入H5参加【测测你的花式性格】测试，共设计12道题目，全部选择完毕后即可获取测试结果。即可参与抽奖活动；</div>
-                            <div>2、活动期间不限制参与测试次数，每人每日有1次抽奖机会。</div>
-                        </div>
-                        <div class="part">
-                            <div>【领奖说明】：</div>
-                            <div>1、中奖后在中奖页面复制兑换码，前往[平安理财服务号] 消息框发送兑换码即可领取奖品。如关闭了中奖界面，可在首页-[我的奖品] 内查看兑换码；</div>
-                            <div>2、成功领奖后，奖品将会在24小时内自动到账，请耐心等候；</div>
-                            <div>3、中奖人请在活动结束前进行兑换，逾期视为弃权。</div>
-                            <div>其他：</div>
-                            <div>活动期间如遇到任何问题，请在[平安理财服务号]后台咨询，我们会在一个工作日内回复。</div>
-                            <div>说明：</div>
-                            <div>
-                                1、本活动由平安理财有限责任公司主办，为保证活动的公平公正，活动结束后主办方将对中奖用户信息进行核对，用户若有下列任何一种行为或情况的，主办方有权不经另行通知，取消其参与活动以及获奖资格，收回奖品权
-                            </div>
-                            <div>(1) 以任何机器人软件、蜘蛛软件、爬虫软件、刷奖软件或其它任何自动方式不正当手段等参与本活动；</div>
-                            <div>(2) 同一用户(包含相同手机号、相同收货信息、相同移动设备号、相同IP地址等) 单日内恶意切换微信账号参加活动，扰乱正常抽奖秩序，影响活动公平性的;</div>
-                            <div>(3) 有任何违反法律法规、诚实信用、公序良俗、公平公正、平安理财平台规则等行为;</div>
-                            <div>2、平安理财保留调整、暂停和终止本活动的权利，并经公告后生效;</div>
-                        </div>
-                        <div class="part">
-                            <div></div>
-                            <div></div>
-                            <div></div>
-                        </div>
-
-                    </div>
-                </div>
-                <div class="rule-cls-btn" @click="hide($event)"></div>
-                <div class="rule-arrow"></div>
             </div>
-            <div class="rule-caidai"></div>
+            <div class="part">
+              <div>【活动攻略】：</div>
+              <div>
+                1、进入H5参加【测测你的花式性格】测试，共设计12道题目，全部选择完毕后即可获取测试结果。即可参与抽奖活动；
+              </div>
+              <div>2、活动期间不限制参与测试次数，每人每日有1次抽奖机会。</div>
+            </div>
+            <div class="part">
+              <div>【领奖说明】：</div>
+              <div>
+                1、中奖后在中奖页面复制兑换码，前往[平安理财服务号]
+                消息框发送兑换码即可领取奖品。如关闭了中奖界面，可在首页-[我的奖品]
+                内查看兑换码；
+              </div>
+              <div>2、成功领奖后，奖品将会在24小时内自动到账，请耐心等候；</div>
+              <div>3、中奖人请在活动结束前进行兑换，逾期视为弃权。</div>
+              <div>其他：</div>
+              <div>
+                活动期间如遇到任何问题，请在[平安理财服务号]后台咨询，我们会在一个工作日内回复。
+              </div>
+              <div>说明：</div>
+              <div>
+                1、本活动由平安理财有限责任公司主办，为保证活动的公平公正，活动结束后主办方将对中奖用户信息进行核对，用户若有下列任何一种行为或情况的，主办方有权不经另行通知，取消其参与活动以及获奖资格，收回奖品权
+              </div>
+              <div>
+                (1)
+                以任何机器人软件、蜘蛛软件、爬虫软件、刷奖软件或其它任何自动方式不正当手段等参与本活动；
+              </div>
+              <div>
+                (2)
+                同一用户(包含相同手机号、相同收货信息、相同移动设备号、相同IP地址等)
+                单日内恶意切换微信账号参加活动，扰乱正常抽奖秩序，影响活动公平性的;
+              </div>
+              <div>
+                (3)
+                有任何违反法律法规、诚实信用、公序良俗、公平公正、平安理财平台规则等行为;
+              </div>
+              <div>
+                2、平安理财保留调整、暂停和终止本活动的权利，并经公告后生效;
+              </div>
+            </div>
+            <div class="part">
+              <div></div>
+              <div></div>
+              <div></div>
+            </div>
+          </div>
         </div>
+        <div class="rule-cls-btn" @click="hide($event)"></div>
+        <div class="rule-arrow"></div>
+      </div>
+      <div class="rule-caidai"></div>
     </div>
+  </div>
 </template>  
 
 <style lang="scss" scoped>
 .RulePage {
-    @include fixed();
+  @include fixed();
-    @include flexCen();
+  @include flexCen();
-    background-color: rgba($color: #000000, $alpha: 0.7);
+  background-color: rgba($color: #000000, $alpha: 0.7);
 
-    .rule-container {
+  .rule-container {
+    position: relative;
+    @include box(492px, 712px);
+
+    .content {
+      .rule-content {
+        @include box(490px, 709px);
+        @include bg_pos("rule/rule-box.png");
         position: relative;
-        @include box(492px, 712px);
 
-        .content {
+        .rule-text-area {
+          @include pos(405px, 523px, 41px, 101px);
+          // background-color: #000000;
+          overflow: hidden;
+          overflow-y: scroll;
 
-            .rule-content {
+          .part {
-                @include box(490px, 709px);
+            font-family: "fzcy";
-                @include bg_pos('rule/rule-box.png');
+            color: #ac4d31;
-                position: relative;
+            font-size: 20px;
-
+            line-height: 30px;
-                .rule-text-area {
+            margin-top: 30px;
-                    @include pos(405px, 523px, 41px, 101px);
+            text-align: justify;
-                    // background-color: #000000;
+            padding: 0 10px;
-                    overflow: hidden;
+          }
-                    overflow-y: scroll;
-
-                    .part {
-                        font-family: 'fzcy';
-                        color: #ac4d31;
-                        font-size: 20px;
-                        line-height: 30px;
-                        margin-top: 30px;
-                        text-align: justify;
-                        padding: 0 10px;
-                    }
-                }
-
-            }
-
-            .rule-arrow {
-                @include pos(38px, 23px, 224px, 641px);
-                @include bg_pos('rule/arrow.png');
-            }
-
-            .rule-cls-btn {
-                @include pos(48px, 48px, 441px, -76px);
-                @include bg_pos('rule/cls-btn.png');
-            }
         }
+      }
 
-        .rule-caidai {
+      .rule-arrow {
-            @include pos(135px, 185px, 357px, 557px);
+        @include pos(38px, 23px, 224px, 641px);
-            @include bg_pos('rule/caidai.png');
+        @include bg_pos("rule/arrow.png");
-            pointer-events: none;
+      }
-        }
+
+      .rule-cls-btn {
+        @include pos(48px, 48px, 441px, -76px);
+        @include bg_pos("rule/cls-btn.png");
+      }
     }
 
+    .rule-caidai {
+      @include pos(135px, 185px, 357px, 557px);
+      @include bg_pos("rule/caidai.png");
+      pointer-events: none;
+    }
+  }
 }
 </style>

src/page/Cash/App.vue

@@ -1,150 +1,136 @@
 <script setup>
-import { Toast, Icon } from 'vant'
+import { Toast, Icon, Field, CellGroup } from "vant";
 import gsap from "gsap";
-import { authorize, getUserInfo, exchangePrize } from '@/api'
+import { authorize, getUserInfo, exchangePrize } from "@/api";
 import { getQueryString, debounceTap } from "@/plugins";
 
-const Authorization = ref('')
+const Authorization = ref("");
-const hasPrize = ref(false)
+const hasPrize = ref(false);
-const received = ref(true)
+const received = ref(true);
-const money = ref('9.99')
+const money = ref("9.99");
-
+const cashCode = ref("");
 
 onMounted(() => {
-  let code = getQueryString('code')
+  let code = getQueryString("code");
-  let dev = import.meta.env.VITE_MODE
+  let dev = import.meta.env.VITE_MODE;
-  if (dev != 'dev') {
+  if (dev != "dev") {
     if (code) {
-      getUserInfo({ code: code }).then(
+      getUserInfo({ code: code }).then((res) => {
-        res => {
+        if (res.code == 0) {
-          if (res.code == 0) {
+          console.log("我的信息：", res.data);
-            console.log('我的信息：', res.data);
+          Authorization.value = res.data.authorization;
-            Authorization.value = res.data.authorization
+          exchangePrize({}, Authorization.value).then((res) => {
-            exchangePrize({}, Authorization.value).then(
+            console.log("兑换结果：", res);
-              res => {
+          });
-                console.log('兑换结果：', res);
+        } else {
-              }
+          authorize({ scopeType: 1 }).then((res) => {
-            )
+            if (res.code == 0) {
-          } else {
+              console.log("重定向地址：", res.data);
-            authorize({ scopeType: 1 }).then(
+              location.replace(res.data);
-              res => {
+            }
-                if (res.code == 0) {
-                  console.log('重定向地址：', res.data);
-                  location.replace(res.data)
-                }
-
-                // 其余情况
-                Toast.fail({
-                  message: res.msg,
-                  duration: 0,
-                  forbidClick: true
-                })
-              }
-            )
-          }
-
 
+            // 其余情况
+            Toast.fail({
+              message: res.msg,
+              duration: 0,
+              forbidClick: true,
+            });
+          });
         }
-      )
+      });
     } else {
-      authorize({ scopeType: 1 }).then(
+      authorize({ scopeType: 1 }).then((res) => {
-        res => {
+        if (res.code == 0) {
-
+          console.log("重定向地址：", res.data);
-          if (res.code == 0) {
+          location.replace(res.data);
-            console.log('重定向地址：', res.data);
-            location.replace(res.data)
-          }
-          // 其余情况
-          Toast.fail({
-            message: res.msg,
-            duration: 0,
-            forbidClick: true
-          })
         }
-      )
+        // 其余情况
+        Toast.fail({
+          message: res.msg,
+          duration: 0,
+          forbidClick: true,
+        });
+      });
     }
   }
 
-
+  gsap.from(".CashPage", { duration: 0.5, autoAlpha: 0 });
-
+});
-
-
-  gsap.from('.CashPage', { duration: 0.5, autoAlpha: 0 })
-})
 
 const go = (event) => {
-  let e = event.target
+  let e = event.target;
-  debounceTap(e, () => {
+  debounceTap(
-    console.log(1);
+    e,
-    let url = import.meta.env.VITE_HOST + import.meta.env.VITE_FOLDER + '/index.html'
+    () => {
-    window.location.replace(url)
+      let url = import.meta.env.VITE_URL;
-  }, 0.5)
+      window.location.replace(url);
-}
+    },
+    0.5
+  );
+};
 
+const cashFn = (event) => {
+  debounceTap(event.target, () => {
+    console.log("兑换码", cashCode.value);
+    if (cashCode.value != "") {
+      // 兑奖接口
+    } else {
+      Toast.fail("请输入兑奖码");
+    }
+  });
+};
 </script>
 
 <template>
   <div class="CashPage" @touchmove.prevent>
-    <div class="cash-container" v-if="hasPrize">
+    <div class="no-prize">
-      <!-- 正常领奖 -->
-      <div class="cashed-success" v-if="!received">
-        <div class="money">¥{{ money }}元</div>
-      </div>
-      <!-- 已经领过奖 -->
-      <div class="cashed-worng" v-else></div>
-    </div>
-    <!-- 暂无中奖记录 -->
-    <div v-else class="no-prize">
       <div class="icon">
-        <Icon size="40" name="info-o" color="#fda085" />
+        <Icon size="60" name="gift-o" color="#fda085" />
+      </div>
+      <div class="code-input-box">
+        <CellGroup inset>
+          <Field
+            v-model="cashCode"
+            maxlength="10"
+            label="兑奖码"
+            placeholder="请输入兑奖码"
+          />
+        </CellGroup>
+      </div>
+      <div class="btn-box">
+        <div class="btn" @click="go($event)">参与活动</div>
+        <div class="btn" @click="cashFn($event)">兑奖</div>
       </div>
-      <div class="text">暂无中奖记录</div>
-      <div class="btn" @click="go($event)">前往参与活动</div>
     </div>
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss" >
+.van-cell__title {
+  width: 100px !important;
+}
 .CashPage {
   @include pos(100%, 100%, 0px, 0px);
   background: linear-gradient(135deg, #f6d365, #fda085);
   overflow: hidden;
   @include flexCen();
 
-  .cashed-success {
+  // .title {
-    @include pos(750px, 1624px, 0px, 50%);
+  //   pointer-events: none;
-    transform: translateY(-50%);
+  //   @include box(552px, 131px);
-    @include bg_pos("cash/lucky_bg.jpg");
+  //   @include bg_pos("index/title.png");
-
+  // }
-    .money {
-      @include pos(750px, 200px, 0px, 650px);
-      // background-color: rgba($color: #000000, $alpha: .7);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      font-size: 100px;
-      font-weight: 700;
-      color: #fda085;
-      letter-spacing: 2px;
-    }
-  }
-
-  .cashed-worng {
-    @include pos(750px, 1624px, 0px, 50%);
-    transform: translateY(-50%);
-    @include bg_pos("cash/received.jpg");
-  }
 
   .no-prize {
-    @include box(600px, 400px);
+    margin-top: 100px;
+    @include box(600px, 500px);
     border-radius: 20px;
-    background-color: aliceblue;
+    background-color: rgb(255, 255, 255);
     @include flexCen();
-    box-shadow: 5px 5px 10px #bebebe,
+    box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
-      -5px -5px 10px #ffffff;
 
     .icon {
-      height: 100px;
+      height: 150px;
     }
 
     .text {
@@ -152,20 +138,25 @@ const go = (event) => {
       letter-spacing: 1px;
     }
 
-    .btn {
+    .btn-box {
-      @include box(280px, 80px);
+      @include box(600px, 100px);
-      background: linear-gradient(135deg, #f6d365, #fda085);
       display: flex;
-      justify-content: center;
+      flex-direction: row;
-      align-items: center;
+      justify-content: space-around;
-      border-radius: 50px;
+
-      font-size: 30px;
+      .btn {
-      color: #fff;
+        @include box(230px, 80px);
-      margin-top: 50px;
+        background: linear-gradient(135deg, #f6d365, #fda085);
-      box-shadow: 20px 20px 60px #bebebe,
+        display: flex;
-        -20px -20px 60px #ffffff;
+        justify-content: center;
+        align-items: center;
+        border-radius: 50px;
+        font-size: 30px;
+        color: #fff;
+        margin-top: 50px;
+        box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
+      }
     }
   }
-
 }
 </style>