完成兑奖页面逻辑

2024-01-17 17:13:45 +08:00
parent 27b1eab2ce
commit 3291088bca
48 changed files with 372 additions and 178 deletions
--- a/src/page/Cash/App.vue
+++ b/src/page/Cash/App.vue
@@ -0,0 +1,171 @@
+<script setup>
+import { Toast, Icon } from 'vant'
+import gsap from "gsap";
+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')
+
+
+onMounted(() => {
+  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
+                })
+              }
+            )
+          }
+
+
+        }
+      )
+    } 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
+          })
+        }
+      )
+    }
+  }
+
+
+
+
+
+  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)
+}
+
+</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="icon">
+        <Icon size="40" name="info-o" color="#fda085" />
+      </div>
+      <div class="text">暂无中奖记录</div>
+      <div class="btn" @click="go($event)">前往参与活动</div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.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");
+  }
+
+  .no-prize {
+    @include box(600px, 400px);
+    border-radius: 20px;
+    background-color: aliceblue;
+    @include flexCen();
+    box-shadow: 5px 5px 10px #bebebe,
+      -5px -5px 10px #ffffff;
+
+    .icon {
+      height: 100px;
+    }
+
+    .text {
+      font-size: 28px;
+      letter-spacing: 1px;
+    }
+
+    .btn {
+      @include box(280px, 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>
--- a/src/page/Share/main.js
+++ b/src/page/Share/main.js
@@ -1,14 +1,12 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-import { createPinia } from "pinia"
-// import h5plugin from '@/plugins';
-import { wxShare } from '@/plugins/wxshare';
+import { wxShare } from '@/plugins/wxshare'
+import 'vant/lib/index.css';
+
 const app = createApp(App)

-// 定义引入图片地址的全局方法
-app.config.globalProperties.imgUrl = (url) => {
-    return new URL(`./assets/images/${url}`, import.meta.url).href
-}
+
+
 // 初始化我的方法
 // app.config.globalProperties.myPlugin = h5plugin

@@ -19,6 +17,6 @@ wxShare({
    link: '/index.html',
 })

-app.use(createPinia())
+
 app.mount('#app')
 console.log('Mode:', import.meta.env.VITE_MODE);
--- a/src/page/Home/App.vue
+++ b/src/page/Home/App.vue
@@ -82,91 +82,99 @@ onMounted(() => {

  let code = getQueryString('code')
  console.log('code:', code);
-  if (code) {
-    getUserInfo({ code: code }).then(
-      res => {
-        if (res.code == 0) {
-          console.log('我的信息：', res.data);
-          userStore.updateToken(res.data.authorization)
-          createBGM();
-          // 开始加载组件
-          showLoad.value = true
-          return
-        } else {
-          console.log('hhhh');
-          authorize({ scopeType: 1 }).then(
-            res => {

-              if (res.code == 0) {
-                console.log('重定向地址：', res.data);
-                location.replace(res.data)
-              }
+  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);
+            userStore.updateToken(res.data.authorization)
+            createBGM();
+            // 开始加载组件
+            showLoad.value = true
+            return
+          } else {
+            console.log('hhhh');
+            authorize({ scopeType: 1 }).then(
+              res => {

-              // 活动已结束：6001
-              if (res.code == '6001') {
+                if (res.code == 0) {
+                  console.log('重定向地址：', res.data);
+                  location.replace(res.data)
+                }
+
+                // 活动已结束：6001
+                if (res.code == '6001') {
+                  Toast.fail({
+                    message: res.msg,
+                    duration: 0,
+                    forbidClick: true
+                  })
+                  return
+                }
+
+                // 活动未开启：6002
+                if (res.code == '6002') {
+                  Toast({
+                    message: res.msg,
+                    duration: 0,
+                    icon: 'flag-o',
+                    forbidClick: true
+                  })
+                  return
+                }
+
+                // 其余情况
                Toast.fail({
                  message: res.msg,
                  duration: 0,
                  forbidClick: true
                })
-                return
              }
+            )
+          }

-              // 活动未开启：6002
-              if (res.code == '6002') {
-                Toast({
-                  message: res.msg,
-                  duration: 0,
-                  icon: 'flag-o',
-                  forbidClick: true
-                })
-                return
-              }

-              // 其余情况
-              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)
+          }

-      }
-    )
+          // 活动已结束：6001
+          if (res.code == '6001') {
+            Toast.fail({
+              message: '活动已结束',
+              duration: 0,
+              forbidClick: true
+            })
+          }
+
+          // 活动未开启：6002
+          if (res.code == '6002') {
+            Toast({
+              message: '活动未开始',
+              duration: 0,
+              icon: 'flag-o',
+              forbidClick: true
+            })
+          }
+        }
+      )
+    }
  } else {
-    authorize({ scopeType: 1 }).then(
-      res => {
-
-        if (res.code == 0) {
-          console.log('重定向地址：', res.data);
-          location.replace(res.data)
-        }
-
-        // 活动已结束：6001
-        if (res.code == '6001') {
-          Toast.fail({
-            message: '活动已结束',
-            duration: 0,
-            forbidClick: true
-          })
-        }
-
-        // 活动未开启：6002
-        if (res.code == '6002') {
-          Toast({
-            message: '活动未开始',
-            duration: 0,
-            icon: 'flag-o',
-            forbidClick: true
-          })
-        }
-      }
-    )
+    showLoad.value = true
  }

+
+
 });

 </script>
--- a/src/page/Share/App.vue
+++ b/src/page/Share/App.vue
@@ -1,13 +0,0 @@
-<template>
-  <div class="SharePage">share</div>
-</template>
-
-<script setup>
-</script>
-
-<style lang="scss" scoped>
-.SharePage {
-  @include fixed();
-  @include flexCen();
-}
-</style>