整合

2024-01-23 17:36:30 +08:00
parent 8db3e50c0f
commit 315ad5a8f0
8 changed files with 105 additions and 356 deletions
--- a/src/components/Draw.vue
+++ b/src/components/Draw.vue
@@ -2,7 +2,7 @@
 import gsap from "gsap";
 import { addPoint, debounceTap } from "@/plugins";
 import { Toast } from "vant";
-import { Clipboard } from "v-clipboard";
+import useClipboard from 'vue-clipboard3'
 import { useMainStore } from "@/store";
 import { drawApi } from "@/api";

@@ -10,7 +10,9 @@ import { drawApi } from "@/api";
 const emit = defineEmits(["DrawPage"]);
 const userStore = useMainStore();

-const money = ref("8.88");
+
+
+const money = ref("1.88");
 const code = ref("sss");

 const showResult = ref(false);
@@ -20,45 +22,35 @@ const drawFn = (event) => {
  let e = event.target.parentElement;
  debounceTap(e, async () => {
    console.log("抽奖");
-    if(userStore.hasDraw){
+    if (userStore.hasDraw) {
      Toast.loading({
-      message: "抽奖中",
-      forbidClick: true,
-      duration: 0,
-    });
-    gsap.fromTo(
-      e,
-      { rotation: "-30" },
-      { rotation: "+30", repeat: -1, yoyo: true, ease: "none", duration: 0.3 }
-    );
+        message: "抽奖中",
+        forbidClick: true,
+        duration: 0,
+      });
+      gsap.fromTo(
+        e,
+        { rotation: "-30" },
+        { rotation: "+30", repeat: -1, yoyo: true, ease: "none", duration: 0.3 }
+      );

-    drawApi(
-      { subAnswerKey: userStore.drawKey },
-      userStore.token
-    ).then(res => {
-      if (res.code == 0) {
-        console.log('正常抽奖');
-        // isDrawn后端判断有没有中奖
-        hasPrize.value = res.data.isDrawn == 1 ? true : false; // true 中奖 || false 未中奖
-        userStore.updateDraw(); // 更新抽奖机会
+      drawApi(
+        { subAnswerKey: userStore.drawKey },
+        userStore.token
+      ).then(res => {
+        if (res.code == 0) {
+          console.log('正常抽奖');
+          // isDrawn后端判断有没有中奖
+          hasPrize.value = res.data.isDrawn == 1 ? true : false; // true 中奖 || false 未中奖
+          userStore.updateDraw(); // 更新抽奖机会

-        // 有奖品的话更新奖品信息
-        if (res.data.isDrawn == 1) {
-          money.value = res.data.prizeAmount;
-          code.value = res.data.prizeCode;
-          userStore.updatePrize(res.data);
-        }
-      } else {
-        console.log('抽奖异常');
-        if (res.code == 6003) {
-          console.log('6003', res);
-          Toast(res.msg)
-          userStore.updateDraw();
+          // 有奖品的话更新奖品信息
+          if (res.data.isDrawn == 1) {
+            money.value = res.data.prizeAmount;
+            code.value = res.data.prizeCode;
+            userStore.updatePrize(res.data);
+          }

-        } else {
-          console.log('eroor', res);
-          hasPrize.value = false; // true 中奖 || false 未中奖
-          userStore.updateDraw();
          setTimeout(() => {
            Toast.clear();
            showResult.value = true;
@@ -69,10 +61,31 @@ const drawFn = (event) => {
            });
            gsap.killTweensOf(".draw-light,.draw");
          }, 1000);
+        } else {
+          console.log('抽奖异常');
+          if (res.code == 6003) {
+            console.log('6003', res);
+            Toast(res.msg)
+            userStore.updateDraw();
+
+          } else {
+            console.log('eroor', res);
+            hasPrize.value = false; // true 中奖 || false 未中奖
+            userStore.updateDraw();
+            setTimeout(() => {
+              Toast.clear();
+              showResult.value = true;
+              gsap.from(".result-container", {
+                duration: 0.5,
+                scale: 0.7,
+                autoAlpha: 0,
+              });
+              gsap.killTweensOf(".draw-light,.draw");
+            }, 1000);
+          }
        }
-      }
-    })
-    }else{
+      })
+    } else {
      Toast('今日抽奖次数已用完！')
    }

@@ -93,12 +106,14 @@ const hide = (event) => {
 };
 const copyFn = (event) => {
  let e = event.target;
-  debounceTap(e, () => {
-    Clipboard.copy(code.value);
+  toClipboard(code.value)
+  debounceTap(e, async() => {
    Toast(`复制成功：${code.value}`);
  });
 };

+
+
 const entryAni = () => {
  gsap.from(".DrawPage", { duration: 0.2, autoAlpha: 0 });
  gsap.from(".draw-container", { duration: 0.5, autoAlpha: 0, scale: 0.7 });
@@ -126,7 +141,7 @@ onMounted(() => {
      </div>
      <div class="draw-star"></div>
      <div class="draw-tips"></div>
-    <!-- 关闭按钮 -->
+      <!-- 关闭按钮 -->
      <div class="draw-cls-btn" @click="hide($event)"></div>
    </div>
    <div v-show="showResult" class="result-container">
@@ -160,11 +175,11 @@ onMounted(() => {
    @include box(685px, 694px);
    position: relative;

-    
-  .draw-cls-btn{
-    @include pos(82px, 82px,300.5px,670px);
+
+    .draw-cls-btn {
+      @include pos(82px, 82px, 300.5px, 670px);
      @include bg_pos("prize/cls-btn.png");
-  }
+    }

    .draw-light {
      pointer-events: none;
--- a/src/components/MyPrize.vue
+++ b/src/components/MyPrize.vue
@@ -2,25 +2,27 @@
 import { debounceTap } from "@/plugins";
 import gsap from "gsap";
 import { Toast } from "vant";
-import { Clipboard } from "v-clipboard";
+import useClipboard from 'vue-clipboard3'
 import { useMainStore } from "@/store";
 import { onMounted } from "vue";

 // 页面配置初始化
 const emit = defineEmits(["MyPrizePage"]);
 const userStore = useMainStore();
+const { toClipboard } = useClipboard()

 const money = ref(userStore.prizeMoney);
 const code = ref(userStore.prizeCode);

 const copyFn = (event) => {
  let e = event.target;
+  toClipboard(code.value)
  debounceTap(e, () => {
-    Clipboard.copy(code.value);
    Toast(`复制成功：${code.value}`);
  });
 };

+
 const hide = (event) => {
  let e = event.target;
  debounceTap(e, () => {
--- a/src/page/Cash/App.vue
+++ b/src/page/Cash/App.vue
@@ -1,162 +0,0 @@
-<script setup>
-import { Toast, Icon, Field, CellGroup } 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");
-const cashCode = ref("");
-
-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,
-    () => {
-      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="no-prize">
-      <div class="icon">
-        <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>
-  </div>
-</template>
-
-<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();
-
-  // .title {
-  //   pointer-events: none;
-  //   @include box(552px, 131px);
-  //   @include bg_pos("index/title.png");
-  // }
-
-  .no-prize {
-    margin-top: 100px;
-    @include box(600px, 500px);
-    border-radius: 20px;
-    background-color: rgb(255, 255, 255);
-    @include flexCen();
-    box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
-
-    .icon {
-      height: 150px;
-    }
-
-    .text {
-      font-size: 28px;
-      letter-spacing: 1px;
-    }
-
-    .btn-box {
-      @include box(600px, 100px);
-      display: flex;
-      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>
--- a/src/page/Cash/main.js
+++ b/src/page/Cash/main.js
@@ -1,22 +0,0 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import { wxShare } from '@/plugins/wxshare'
-import 'vant/lib/index.css';
-
-const app = createApp(App)
-
-
-
-// 初始化我的方法
-// app.config.globalProperties.myPlugin = h5plugin
-
-// 微信分享配置
-wxShare({
-    title: '分享标题',
-    desc: '分享描述',
-    link: '/index.html',
-})
-
-
-app.mount('#app')
-console.log('Mode:', import.meta.env.VITE_MODE);