动画优化

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 hasPrize = ref(false)
-const received = ref(true)
-const money = ref('9.99')
-
+const Authorization = ref("");
+const hasPrize = ref(false);
+const received = ref(true);
+const money = ref("9.99");
+const cashCode = ref("");
 
 onMounted(() => {
-  let code = getQueryString('code')
-  let dev = import.meta.env.VITE_MODE
-  if (dev != 'dev') {
+  let code = getQueryString("code");
+  let dev = import.meta.env.VITE_MODE;
+  if (dev != "dev") {
     if (code) {
-      getUserInfo({ code: code }).then(
-        res => {
-          if (res.code == 0) {
-            console.log('我的信息：', res.data);
-            Authorization.value = res.data.authorization
-            exchangePrize({}, Authorization.value).then(
-              res => {
-                console.log('兑换结果：', res);
-              }
-            )
-          } else {
-            authorize({ scopeType: 1 }).then(
-              res => {
-                if (res.code == 0) {
-                  console.log('重定向地址：', res.data);
-                  location.replace(res.data)
-                }
-
-                // 其余情况
-                Toast.fail({
-                  message: res.msg,
-                  duration: 0,
-                  forbidClick: true
-                })
-              }
-            )
-          }
-
+      getUserInfo({ code: code }).then((res) => {
+        if (res.code == 0) {
+          console.log("我的信息：", res.data);
+          Authorization.value = res.data.authorization;
+          exchangePrize({}, Authorization.value).then((res) => {
+            console.log("兑换结果：", res);
+          });
+        } else {
+          authorize({ scopeType: 1 }).then((res) => {
+            if (res.code == 0) {
+              console.log("重定向地址：", res.data);
+              location.replace(res.data);
+            }
 
+            // 其余情况
+            Toast.fail({
+              message: res.msg,
+              duration: 0,
+              forbidClick: true,
+            });
+          });
         }
-      )
+      });
     } else {
-      authorize({ scopeType: 1 }).then(
-        res => {
-
-          if (res.code == 0) {
-            console.log('重定向地址：', res.data);
-            location.replace(res.data)
-          }
-          // 其余情况
-          Toast.fail({
-            message: res.msg,
-            duration: 0,
-            forbidClick: true
-          })
+      authorize({ scopeType: 1 }).then((res) => {
+        if (res.code == 0) {
+          console.log("重定向地址：", res.data);
+          location.replace(res.data);
         }
-      )
+        // 其余情况
+        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
-  debounceTap(e, () => {
-    console.log(1);
-    let url = import.meta.env.VITE_HOST + import.meta.env.VITE_FOLDER + '/index.html'
-    window.location.replace(url)
-  }, 0.5)
-}
+  let e = event.target;
+  debounceTap(
+    e,
+    () => {
+      let url = import.meta.env.VITE_URL;
+      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="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="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 {
-    @include pos(750px, 1624px, 0px, 50%);
-    transform: translateY(-50%);
-    @include bg_pos("cash/lucky_bg.jpg");
-
-    .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");
-  }
+  // .title {
+  //   pointer-events: none;
+  //   @include box(552px, 131px);
+  //   @include bg_pos("index/title.png");
+  // }
 
   .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,
-      -5px -5px 10px #ffffff;
+    box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
 
     .icon {
-      height: 100px;
+      height: 150px;
     }
 
     .text {
@@ -152,20 +138,25 @@ const go = (event) => {
       letter-spacing: 1px;
     }
 
-    .btn {
-      @include box(280px, 80px);
-      background: linear-gradient(135deg, #f6d365, #fda085);
+    .btn-box {
+      @include box(600px, 100px);
       display: flex;
-      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;
+      flex-direction: row;
+      justify-content: space-around;
+
+      .btn {
+        @include box(230px, 80px);
+        background: linear-gradient(135deg, #f6d365, #fda085);
+        display: flex;
+        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>