更新周边功能

2025-09-09 23:24:51 +08:00
parent 9a5cf53e3c
commit 246edb68ab
15 changed files with 644 additions and 344 deletions
--- a/package.json
+++ b/package.json
@@ -10,8 +10,11 @@
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.3.2",
+    "canvas-confetti": "^1.9.3",
    "element-plus": "^2.11.1",
+    "gsap": "^3.13.0",
    "howler": "^2.2.4",
+    "mitt": "^3.0.1",
    "qrcode": "^1.5.4",
    "vite-plugin-vue-devtools": "^8.0.1",
    "vue": "^3.5.18",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,12 +11,21 @@ importers:
      '@element-plus/icons-vue':
        specifier: ^2.3.2
        version: 2.3.2(vue@3.5.20)
+      canvas-confetti:
+        specifier: ^1.9.3
+        version: 1.9.3
      element-plus:
        specifier: ^2.11.1
        version: 2.11.1(vue@3.5.20)
+      gsap:
+        specifier: ^3.13.0
+        version: 3.13.0
      howler:
        specifier: ^2.2.4
        version: 2.2.4
+      mitt:
+        specifier: ^3.0.1
+        version: 3.0.1
      qrcode:
        specifier: ^1.5.4
        version: 1.5.4
@@ -413,56 +422,67 @@ packages:
    resolution: {integrity: sha512-u72Mzc6jyJwKjJbZZcIYmd9bumJu7KNmHYdue43vT1rXPm2rITwmPWF0mmPzLm9/vJWxIRbao/jrQmxTO0Sm9w==}
    cpu: [arm]
    os: [linux]
+    libc: [glibc]

  '@rollup/rollup-linux-arm-musleabihf@4.50.0':
    resolution: {integrity: sha512-S4UefYdV0tnynDJV1mdkNawp0E5Qm2MtSs330IyHgaccOFrwqsvgigUD29uT+B/70PDY1eQ3t40+xf6wIvXJyg==}
    cpu: [arm]
    os: [linux]
+    libc: [musl]

  '@rollup/rollup-linux-arm64-gnu@4.50.0':
    resolution: {integrity: sha512-1EhkSvUQXJsIhk4msxP5nNAUWoB4MFDHhtc4gAYvnqoHlaL9V3F37pNHabndawsfy/Tp7BPiy/aSa6XBYbaD1g==}
    cpu: [arm64]
    os: [linux]
+    libc: [glibc]

  '@rollup/rollup-linux-arm64-musl@4.50.0':
    resolution: {integrity: sha512-EtBDIZuDtVg75xIPIK1l5vCXNNCIRM0OBPUG+tbApDuJAy9mKago6QxX+tfMzbCI6tXEhMuZuN1+CU8iDW+0UQ==}
    cpu: [arm64]
    os: [linux]
+    libc: [musl]

  '@rollup/rollup-linux-loongarch64-gnu@4.50.0':
    resolution: {integrity: sha512-BGYSwJdMP0hT5CCmljuSNx7+k+0upweM2M4YGfFBjnFSZMHOLYR0gEEj/dxyYJ6Zc6AiSeaBY8dWOa11GF/ppQ==}
    cpu: [loong64]
    os: [linux]
+    libc: [glibc]

  '@rollup/rollup-linux-ppc64-gnu@4.50.0':
    resolution: {integrity: sha512-I1gSMzkVe1KzAxKAroCJL30hA4DqSi+wGc5gviD0y3IL/VkvcnAqwBf4RHXHyvH66YVHxpKO8ojrgc4SrWAnLg==}
    cpu: [ppc64]
    os: [linux]
+    libc: [glibc]

  '@rollup/rollup-linux-riscv64-gnu@4.50.0':
    resolution: {integrity: sha512-bSbWlY3jZo7molh4tc5dKfeSxkqnf48UsLqYbUhnkdnfgZjgufLS/NTA8PcP/dnvct5CCdNkABJ56CbclMRYCA==}
    cpu: [riscv64]
    os: [linux]
+    libc: [glibc]

  '@rollup/rollup-linux-riscv64-musl@4.50.0':
    resolution: {integrity: sha512-LSXSGumSURzEQLT2e4sFqFOv3LWZsEF8FK7AAv9zHZNDdMnUPYH3t8ZlaeYYZyTXnsob3htwTKeWtBIkPV27iQ==}
    cpu: [riscv64]
    os: [linux]
+    libc: [musl]

  '@rollup/rollup-linux-s390x-gnu@4.50.0':
    resolution: {integrity: sha512-CxRKyakfDrsLXiCyucVfVWVoaPA4oFSpPpDwlMcDFQvrv3XY6KEzMtMZrA+e/goC8xxp2WSOxHQubP8fPmmjOQ==}
    cpu: [s390x]
    os: [linux]
+    libc: [glibc]

  '@rollup/rollup-linux-x64-gnu@4.50.0':
    resolution: {integrity: sha512-8PrJJA7/VU8ToHVEPu14FzuSAqVKyo5gg/J8xUerMbyNkWkO9j2ExBho/68RnJsMGNJq4zH114iAttgm7BZVkA==}
    cpu: [x64]
    os: [linux]
+    libc: [glibc]

  '@rollup/rollup-linux-x64-musl@4.50.0':
    resolution: {integrity: sha512-SkE6YQp+CzpyOrbw7Oc4MgXFvTw2UIBElvAvLCo230pyxOLmYwRPwZ/L5lBe/VW/qT1ZgND9wJfOsdy0XptRvw==}
    cpu: [x64]
    os: [linux]
+    libc: [musl]

  '@rollup/rollup-openharmony-arm64@4.50.0':
    resolution: {integrity: sha512-PZkNLPfvXeIOgJWA804zjSFH7fARBBCpCXxgkGDRjjAhRLOR8o0IGS01ykh5GYfod4c2yiiREuDM8iZ+pVsT+Q==}
@@ -622,6 +642,9 @@ packages:
  caniuse-lite@1.0.30001739:
    resolution: {integrity: sha512-y+j60d6ulelrNSwpPyrHdl+9mJnQzHBr08xm48Qno0nSk4h3Qojh+ziv2qE6rXf4k3tadF4o1J/1tAbVm1NtnA==}

+  canvas-confetti@1.9.3:
+    resolution: {integrity: sha512-rFfTURMvmVEX1gyXFgn5QMn81bYk70qa0HLzcIOSVEyl57n6o9ItHeBtUSWdvKAPY0xlvBHno4/v3QPrT83q9g==}
+
  cliui@6.0.0:
    resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}

@@ -748,6 +771,9 @@ packages:
    resolution: {integrity: sha512-kVCxPF3vQM/N0B1PmoqVUqgHP+EeVjmZSQn+1oCRPxd2P21P2F19lIgbR3HBosbB1PUhOAoctJnfEn2GbN2eZA==}
    engines: {node: '>=18'}

+  gsap@3.13.0:
+    resolution: {integrity: sha512-QL7MJ2WMjm1PHWsoFrAQH/J8wUeqZvMtHO58qdekHpCfhvhSL4gSiz6vJf5EeMP0LOn3ZCprL2ki/gjED8ghVw==}
+
  hookable@5.5.3:
    resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}

@@ -1715,6 +1741,8 @@ snapshots:

  caniuse-lite@1.0.30001739: {}

+  canvas-confetti@1.9.3: {}
+
  cliui@6.0.0:
    dependencies:
      string-width: 4.2.3
@@ -1864,6 +1892,8 @@ snapshots:
      '@sec-ant/readable-stream': 0.4.1
      is-stream: 4.0.1

+  gsap@3.13.0: {}
+
  hookable@5.5.3: {}

  howler@2.2.4: {}
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { Howl, Howler } from 'howler';
-import { onMounted, ref } from "vue"
+import { onMounted, ref, watch } from "vue"
+import globalToastEvent, { ToastType } from './globalToastEvent';
 import { isWeixin, isLogin, getParam, Storage, Request } from "./libs/utils"
 import Login from './components/Login.vue'
 import HomePage from './components/HomePage.vue'
@@ -8,11 +9,13 @@ import Address from "./components/Address.vue"
 import PrizeList from "./components/PrizeList.vue"
 import Todolist from "./components/TodoList.vue";
 import Rule from "./components/Rule.vue";
+import Ad from "./components/Ad.vue"
+import Lottery from './components/Lottery.vue';
 import SelectTemplate from './components/SelectTemplate.vue'
 import GenerateLoading from './components/GenerateLoading.vue'
 import SelectTemplateV2 from './components/SelectTemplateV2.vue'
 import { globalStore } from "./globalstore";
-
+import { useRouter } from 'vue-router'
 import bgmUrl from "./assets/audio/bgm.mp3"
 import GenerateImg from './components/GenerateImg.vue';
 var bgmSound = new Howl({
@@ -22,7 +25,14 @@ var bgmSound = new Howl({

 const loginShow = ref(false)
 const homePageShow = ref(false)
-const todolistShow = ref(true)
+const todolistShow = ref(false)
+const prizeListShow = ref(false)
+const ruleShow = ref(false)
+const prizelist = ref([])
+const addressShow = ref(false)
+const activePrizeId = ref(0)
+const adShow = ref(false)
+const lotteryShow = ref(false)

 //分享进来
 const fromShare = async () => {
@@ -79,7 +89,6 @@ const initUserGameInfos = async (refresh_official, refresh_cap_scan) => {
  const result = await Request('game/info', { refresh_official: refresh_official, refresh_cap_scan: refresh_cap_scan }, "GET")

  if (result.res.status === 200) {
-
    globalStore.invitees = result.json.invitees
    globalStore.followed_official = result.json.followed_official
    globalStore.cap_scan = result.json.cap_scan
@@ -103,13 +112,63 @@ if (isLogin()) {
 } else {
  userStatus(handleLoginSuccess)
 }
+const getUserLottery = async () => {
+  // const result = await Request("lottery", { pool: "all" }, "GET")
+  // if (result.res.status === 200) {
+  //   prizelist.value = result.json.lottery_logs.length > 0 ? result.json.lottery_logs : []
+  // }
+  prizelist.value = [
+    { id: 1, prize_code: "FIRST", prize_name: "一等奖", coupon_type: "scene", pushed: 0 },
+    { id: 2, prize_code: "FIRST1", prize_name: "二等奖", coupon_type: "scene", pushed: 1 }
+  ]
+}
+const handleAddressSubmitAfter = (data) => {
+  const targetItem = prizelist.value.find(item => item.id === data.id)
+  targetItem.pushed = 1
+  addressShow.value = false
+}
+
+const handleAddress = (id) => {
+  activePrizeId.value = id
+  addressShow.value = true
+}
+
+globalToastEvent.on(ToastType.SHOW_TODO, () => {
+  todolistShow.value = true
+})
+globalToastEvent.on(ToastType.SHOW_PRIZELIST, async () => {
+  await getUserLottery()
+  prizeListShow.value = true
+})
+globalToastEvent.on(ToastType.SHOW_RULE, () => {
+  ruleShow.value = true
+})
+globalToastEvent.on(ToastType.SHOW_AD, () => {
+  adShow.value = true
+})
+globalToastEvent.on(ToastType.SHOW_LOTTERY, () => {
+  lotteryShow.value = true
+})
+globalToastEvent.on(ToastType.SHOW_ADDRESS, (id) => {
+  activePrizeId.value = id
+  addressShow.value = true
+})
+
+
 </script>

 <template>
  <router-view />
+  <PrizeList :show="prizeListShow" @close="prizeListShow = false" :prizelist="prizelist" @address="handleAddress">
+  </PrizeList>
+  <Todolist :show="todolistShow" @close="todolistShow = false"></Todolist>
+  <Rule :show="ruleShow" @close="ruleShow = false"></Rule>
+  <Address :show="addressShow" :prizeId="activePrizeId" @address-submit="handleAddressSubmitAfter"
+    @address-close="addressShow = false"></Address>
+  <Ad :show="adShow" @close="adShow = false"></Ad>
+  <Lottery :show="lotteryShow" @close="lotteryShow = false"></Lottery>
  <Login :show="loginShow" @login-success="handleLoginSuccess" />
  <!-- <HomePage :show="homePageShow" /> -->
-  <!-- <Todolist /> -->
  <!-- <SelectTemplateV2 /> -->
  <!-- <GenerateImg /> -->
  <!-- <GenerateLoading /> -->
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -9,7 +9,7 @@
  left: 0;
  width: 100%;
  height: 100%;
-  background-color: rgba(0, 0, 0, .85);
+  background-color: rgba(0, 0, 0, .7);
 }

 .global-modal-content {
--- a/src/components/Ad.vue
+++ b/src/components/Ad.vue
@@ -0,0 +1,63 @@
+<template>
+  <ModalTransition class="ad" :show="show" position="center">
+    <div class="ad-wrapper">
+      <div class="btn-ad" v-html="adHtml" @click="adGoto"></div>
+      <div class="close" @click="emit('close')"></div>
+    </div>
+  </ModalTransition>
+</template>
+
+<script setup>
+import ModalTransition from "./ModalTransition.vue"
+import { ref } from "vue"
+import { isWeixinPlatform, miniJumpToScene, getMiniPageBtnHack } from "../libs/utils"
+const props = defineProps({
+  show: false,
+})
+const emit = defineEmits(['close'])
+const adHtml = ref('')
+//TODO: 这个地址后面要改的
+adHtml.value = getMiniPageBtnHack("/pages/unify/unify?orgId=200282401019674482&targetUrl=%2Fpages%2Fcoupon%2Fcoupons-list")
+const adGoto = () => {
+  if (!isWeixinPlatform()) {
+    weui.alert("请前往「泸州老窖会员中心」小程序进行查询")
+  }
+}
+
+</script>
+
+<style scoped>
+.ad-wrapper {
+  position: relative;
+  width: 100vw;
+  height: 190vw;
+  background-image: url("../assets/images/ad-bg.png");
+  background-repeat: no-repeat;
+  background-size: 100%;
+}
+
+.btn-ad {
+  width: 54.351852vw;
+  height: 20.092593vw;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, 180%);
+  background-image: url("../assets/images/btn-ad.png");
+  background-repeat: no-repeat;
+  background-size: 100%;
+}
+
+.close {
+  position: absolute;
+  width: 8.148148vw;
+  height: 8.148148vw;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, 0);
+  margin-top:  58vw;
+  background-image: url("../assets/images/close-btn.png");
+  background-repeat: no-repeat;
+  background-size: 100%;
+}
+</style>
--- a/src/components/Address.vue
+++ b/src/components/Address.vue
@@ -1,5 +1,5 @@
 <template>
-  <ModalTransition :show="addressShow">
+  <ModalTransition :show="show">
    <div class="address-wrapper">
      <div class="address-title">收货地址填写</div>
      <div class="address-content">
@@ -36,7 +36,7 @@ const props = defineProps({
  prizeId: Number
 })
 const emit = defineEmits(['addressSubmit','addressClose'])
-const addressShow = computed(() => props.prizeId ? props.show : false)
+// const addressShow = computed(() => props.prizeId ? props.show : false)
 const btnDisableClass = ref(false)
 const name = ref('')
 const phone = ref('')
--- a/src/components/HomePage.vue
+++ b/src/components/HomePage.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { ref, computed, watch, onMounted } from "vue"
 import { useRouter } from 'vue-router'
+import globalToastEvent, { ToastType } from '../globalToastEvent';
 import { Request, Storage } from "../libs/utils"
 import faceFamily from "../assets/audio/faceFamily.mp3"
 defineProps({
@@ -56,12 +57,25 @@ const navigateSelectTemplatePage = () => {
  })
 }

+const navigateTodoList = () => {
+  globalToastEvent.emit(ToastType.SHOW_TODO)
+}
+const handlePrizeList = async () => {
+  globalToastEvent.emit(ToastType.SHOW_PRIZELIST)
+}
+const handleRule = () => {
+  globalToastEvent.emit(ToastType.SHOW_RULE)
+}
+const handleLottery = () => {
+  globalToastEvent.emit(ToastType.SHOW_LOTTERY)
+}
+
 </script>

 <template>
  <div :show="show">
    <div class="home-wrapper">
-      <div class="scene-item item-1">
+      <div class="scene-item item-1" @click="handleLottery">
        <img src="../assets/images/lottery.png" alt="抽奖">
        <div class="lottery-main">
          <p class="lottery-value">3</p>
@@ -85,10 +99,10 @@ const navigateSelectTemplatePage = () => {
          <img src="../assets/images/music-off.png" alt="音乐关">
        </div>
      </div>
-      <div class="scene-item item-6">
+      <div class="scene-item item-6" @click="handleRule">
        <img src="../assets/images/rule.png" alt="规则">
      </div>
-      <div class="scene-item item-7">
+      <div class="scene-item item-7" @click="handlePrizeList">
        <img src="../assets/images/award.png" alt="奖励">
      </div>
      <div class="scene-item item-8">
@@ -193,36 +207,42 @@ const navigateSelectTemplatePage = () => {
  right: 0;
  animation-delay: 0s;
 }
+
 .item-4 {
  width: 46px;
  top: 1.5%;
  right: 1.5%;
  animation-delay: 0s;
 }
+
 .item-5 {
  width: 46px;
  top: 1.5%;
  right: 1.5%;
  animation-delay: 0s;
 }
+
 .item-6 {
  width: 62px;
  top: 8%;
  right: 0;
  animation-delay: 0s;
 }
+
 .item-7 {
  width: 62px;
  top: 13.5%;
  right: 0;
  animation-delay: 0s;
 }
+
 .item-8 {
  width: 50px;
  bottom: 32%;
  right: 1%;
  animation-delay: 0s;
 }
+
 .item-9 {
  width: 50px;
  bottom: 23%;
--- a/src/components/Lottery.vue
+++ b/src/components/Lottery.vue
@@ -1,140 +1,189 @@
 <template>
  <ModalTransition class="lottery" :show="show" name="opacity" position="center">
    <div class="lottery-wrapper">
-      <div class="laohuji">
-        <div class="laohuji-temp" ref="tempRef"></div>
-        <div class="laohuji-bottom">
-          <div class="laohuji-list">
-            <div class="laohuji-item a" ref="itemaRef"></div>
-            <div class="laohuji-item b" ref="itembRef"></div>
-            <div class="laohuji-item c" ref="itemcRef"></div>
+      <div class="guang" ref="guangRef"></div>
+      <div class="guangyun" ref="guangyunRef"></div>
+      <div class="lottery-scene" ref="sceneRef">
+        <div class="lottery-card" ref="cardRef">
+          <div class="lottery-face">
+            <img :src="lotteryFaceUrl" alt="">
+          </div>
+          <div class="lottery-prize">
+            <div class="lottery-title" ref="titleRef"></div>
+            <div class="lottery-image" :class="activePrizeData.prize_code"></div>
+            <div class="lottery-name">{{ activePrizeData.name }}</div>
+            <div class="lottery-btngroup" v-show="btngroupShow">
+              <div class="btn-more" @click="handleBtnMore"></div>
+              <div class="btn-kaixin" @click="handleLotteryAction"></div>
            </div>
          </div>
-        <div class="btn-kaixin" ref="btnRef" @click="handleGetLottery"></div>
-        <div class="laohuji-kapian" ref="kapianRef">
-          <div class="laohuji-kapian-bg" ref="kapianBgRef">
-            <div class="laohuji-kapian-cover" :class="kapianCover"></div>
        </div>
      </div>
-        <div class="laohuji-top"></div>
-      </div>
+
    </div>
  </ModalTransition>
 </template>

 <script setup>
 import { gsap } from "gsap";
-import Phaser from "phaser"
 import { ref, watch, onMounted, onUnmounted } from "vue"
+import globalToastEvent, { ToastType } from "../globalToastEvent";
 import ModalTransition from "./ModalTransition.vue"
 import confetti from "canvas-confetti";
-import { Howl } from 'howler';
-import { Request } from "../libs/utils"
-import lotterySoundUrl from '../assets/audio/lottery.mp3'
-import laohujiSoundUrl from '../assets/audio/laohuji.mp3'
+import { Request, Sleep } from "../libs/utils"
 import { globalStore } from "@/globalstore";
-const laohujiSound = new Howl({
-  src: [laohujiSoundUrl]
-});
-const lotterySoundSuccess = new Howl({
-  src: [lotterySoundUrl]
-});
+//TODO: 这里这张图要用用户分享那张图
+import lotteryFace from "../assets/images/haibao-cover.png"

+const lotteryFaceUrl = ref(lotteryFace)
+const cardRef = ref(null)
+const sceneRef = ref(null)
+const guangRef = ref(null)
+const guangyunRef = ref(null)
+const titleRef = ref(null)
+const activePrizeData = ref({})
+const btngroupShow = ref(false)

 gsap.registerPlugin()
 const props = defineProps({
  show: false,
 })
-const emit = defineEmits(['close', 'address'])
+const emit = defineEmits(['close'])

-const kapianRef = ref(null)
-const tempRef = ref(null)
-const btnRef = ref(null)
-const itemaRef = ref(null)
-const itembRef = ref(null)
-const itemcRef = ref(null)
-const kapianCover = ref('')
-const kapianBgRef = ref(null)
-
-const PRIZE_LIST = ['TJGJ','XINCHUN_WEIZUN', 'TEQU_JL_52_60Y_100ML_2', 'LZLJ_TEQU_LZH_52_100ML_2', 'HEIGAI_42_GPJ_500ML', 'DZCZ', 'DZSCZ', '66_POINTS', 'NO']
-
-
-// 滚动奖品图片的高度（所有奖品）
-const GRID = 165.833333
-let PRIZEDATA = null
 let interval = null
+const PRIZE_LIST = ['TJGJ', 'XINCHUN_WEIZUN', 'TEQU_JL_52_60Y_100ML_2', 'LZLJ_TEQU_LZH_52_100ML_2', 'HEIGAI_42_GPJ_500ML', 'DZCZ', 'DZSCZ', '66_POINTS', 'NO']

 let gsapCtx = null
+let shakeTimeline = null
+let PRIZEDATA = null
+
+const closeThis = () => {
+  initAnimateStyle()
+  emit("close")
+}
+
+const handleBtnMore = () => {
+  closeThis()
+  globalToastEvent.emit(ToastType.SHOW_AD)
+}
+const handleLotteryAction = () => {
+  //实物
+  closeThis()
+  if (activePrizeData.value.coupon_type === 'scene') {
+    globalToastEvent.emit(ToastType.SHOW_ADDRESS, activePrizeData.value.id)
+  }
+}

 onMounted(() => {
+  gsap.registerPlugin()
  initAnimateStyle()
 })

 const initAnimateStyle = () => {
  interval && clearInterval(interval)
  interval = null
-  const list = [itemaRef.value, itembRef.value, itemcRef.value]
-  const randomHeight = [Phaser.Math.Between(3, 8), Phaser.Math.Between(3, 8), Phaser.Math.Between(3, 8)]

-  gsap.set(kapianBgRef.value, { y: '-72vw' })
-  gsap.set(btnRef.value, { scale: 0, display: 'none' })
-  gsap.set(tempRef.value, { height: '63.518519vw' })
-  list.forEach((v, idx) => {
-    gsap.set(v, { y: `-${randomHeight[idx] * GRID - GRID / PRIZE_LIST.length}vw`, height: `${randomHeight[idx] * GRID}vw` })
-  })
+  let keyframes = [];
+  const frames = 20; // 关键帧数量
+  const strength = 5; // 抖动强度
+
+  // 生成关键帧
+  for (let i = 0; i < frames; i++) {
+    keyframes.push({
+      x: gsap.utils.random(-strength, strength),
+      y: gsap.utils.random(-strength, strength),
+      duration: 0.05 // 每帧的持续时间
+    });
+  }
+
+  // 创建一个时间线，添加关键帧，并循环
+  shakeTimeline = gsap.timeline({ repeat: -1, paused: true });
+  shakeTimeline.to(cardRef.value, { duration: 0, x: 0, y: 0 }); // 初始位置
+  keyframes.forEach(keyframe => {
+    shakeTimeline.to(cardRef.value, keyframe);
+  });
+  shakeTimeline.to(cardRef.value, { duration: 0.1, x: 0, y: 0 })
+
+  gsap.set(guangyunRef.value, { scale: 0, opacity: 1 })
+  gsap.set(titleRef.value, { scaleY: 0 })
+  gsap.set(sceneRef.value, { scale: .5 })
+  gsap.set(cardRef.value, { rotateY: 0 })
+  btngroupShow.value = false
 }
-onMounted(() => {
-  gsap.set(btnRef.value, { display: "none", scale: 0 })
-})

 watch(() => props.show, async (newVal) => {
  if (!newVal) {
    return
  }

-  const lottteryResult = await Request("lottery/draw", { pool: 'game', consume_type: 'points' })
-  // const lottteryResult = {
-  //   res: { status: 200 },
-  //   json: {
-  //     code: "HEIGAI_42_GPJ_500ML",
-  //     prize_code: 'HEIGAI_42_GPJ_500ML'
-  //   }
-  // }
+  shakeTimeline.play()
+
+  //TODO: 延时测试，上限删掉
+  await Sleep(2000)
+
+  shakeTimeline.pause()
+  // const lottteryResult = await Request("lottery/draw", { pool: 'game', consume_type: 'points' })
+  // TODO: 测试数据
+  const lottteryResult = {
+    res: { status: 200 },
+    json: {
+      id: 0,
+      code: "HEIGAI_42_GPJ_500ML",
+      prize_code: 'HEIGAI_42_GPJ_500ML',
+      coupon_type: "scene",
+      name: "泸州老窖的一瓶酒"
+    }
+  }

  if (lottteryResult.res.status !== 200) {
    emit('close')
    return
  } else {
-    globalStore.consumeBingyin(globalStore.CONSUME_POINT_1_PER_DRAW)
-    PRIZEDATA = lottteryResult.json
+    globalStore.lotteryCut()
+    activePrizeData.value = lottteryResult.json

    // 未中奖的情况
    if (lottteryResult.json.code === 204) {
-      PRIZEDATA = { prize_code: 'NO', coupon_type: 'NO' }
+      activePrizeData.value = { prize_code: 'NO', coupon_type: 'NO' }
    }

-    kapianCover.value = PRIZEDATA.prize_code === '66_POINTS' ? 'POINTS' : PRIZEDATA.prize_code
+    // kapianCover.value = PRIZEDATA.prize_code === '66_POINTS' ? 'POINTS' : PRIZEDATA.prize_code
  }

  gsapCtx = gsap.context(() => {
    initAnimateStyle()

-    const prizeIndex = PRIZE_LIST.findIndex(v => v === PRIZEDATA.prize_code)
-    const durationArr = [Phaser.Math.Between(3, 9), Phaser.Math.Between(3, 9), Phaser.Math.Between(3, 9)]
-
-    gsap.to([itemaRef.value, itembRef.value, itemcRef.value], {
-      y: `-${GRID / PRIZE_LIST.length * prizeIndex}vw`,
-      ease: "expo.out",
-      duration: (idx) => {
-        return durationArr[idx]
-      },
-      onStart: () => {
-        laohujiSound.play()
-        laohujiSound.fade(1, 0, Math.max(...durationArr)*1000)
-      },
-      delay: .4,
+    const prizeshowTime = gsap.timeline({
      onComplete: () => {
-        lotterySoundSuccess.play()
+        btngroupShow.value = true
+      }
+    });
+
+    prizeshowTime.to(sceneRef.value, {
+      duration: .4,
+      scale: .2,
+    })
+    prizeshowTime.to(sceneRef.value, {
+      duration: 1,
+      scale: 1,
+      opacity: 1,
+      ease: "power4.out"
+    })
+    prizeshowTime.to(guangyunRef.value, {
+      duration: 1.5,
+      scale: 2,
+    }, "-=1")
+
+    prizeshowTime.to(cardRef.value, {
+      rotateY: 180 * 3,
+      duration: 1,
+    }, "-=1.4")
+
+    prizeshowTime.to(titleRef.value, {
+      scaleY: 1,
+      ease: "elastic.out(1,0.3)"
+    })
+
    var duration = 4 * 1000;
    var animationEnd = Date.now() + duration;
    var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
@@ -155,81 +204,175 @@ watch(() => props.show, async (newVal) => {
      confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } });
    }, 250);

-        gsap.to(kapianBgRef.value, { y: '0', duration: 4, ease: "sine.inOut", })
-        gsap.to(tempRef.value, {
-          height: '+=90vw', duration: 4, ease: "sine.inOut", onComplete: () => {
-            gsap.set(btnRef.value, { display: "block" })
-            gsap.to(btnRef.value, { scale: 1, ease: "sine.inOut", duration: .3 })
-          }
-        })
-      }
-    })
  })
 })

-
-const handleGetLottery = () => {
-  emit('close', { coupon_type: PRIZEDATA.coupon_type })
-  initAnimateStyle()
-
-  if (PRIZEDATA.coupon_type === 'scene') {
-    emit('address', PRIZEDATA.id)
-  }
-}
-
 onUnmounted(() => {
+  shakeTimeline = null
  gsapCtx && gsapCtx.revert()
 })
 </script>

 <style scoped>
-.laohuji {
+.guang,
+.guangyun {
+  position: absolute;
+  left: 50%;
+  margin-left: -66.2vw;
+  top: 50%;
+  margin-top: -64.5vw;
+  width: 129.62963vw;
+  height: 129.62963vw;
+  background-repeat: no-repeat;
+  background-size: 100%;
+}
+
+.guang {
+  background-image: url("../assets/images/guang.png");
+  animation: rotateGuang 20s linear infinite;
+}
+
+
+.guangyun {
+  background-image: url("../assets/images/guangyun.png");
+  /* animation: rotateGuangyun 3s linear infinite; */
+}
+
+.lottery-title {
+  position: absolute;
+  top: 24vw;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 65.462963vw;
+  height: 19.907407vw;
+  background-image: url("../assets/images/lottery-title.png");
+  background-repeat: no-repeat;
+  background-size: 100%;
+}
+
+.lottery-name {
+  position: absolute;
+  bottom: 18vw;
+  text-align: center;
+  width: 100%;
+  font-size: 6vw;
+  font-weight: 700;
+  color: rgb(255, 255, 255);
+  text-shadow:
+    0 0 0.37037vw #ff0000,
+    0 0 0.740741vw #ff0000,
+    0 0 1.111111vw #ff0000,
+    0.092593vw 0.092593vw 0 #ff0000,
+    -0.092593vw -0.092593vw 0 #ff0000;
+}
+
+.lottery-btngroup {
+  position: absolute;
+  bottom: -24vw;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.btn-more {
+  width: 48.703704vw;
+  height: 18.240741vw;
+  background-image: url("../assets/images/btn-more.png");
+  background-repeat: no-repeat;
+  background-size: 100%;
+}
+
+.btn-kaixin {
+  width: 48.703704vw;
+  height: 18.240741vw;
+  background-image: url("../assets/images/btn-kaixin.png");
+  background-repeat: no-repeat;
+  background-size: 100%;
+}
+
+.lottery-image {
+  position: absolute;
+  top: 45vw;
+  width: 100%;
+  height: 60vw;
+  background-position: center bottom;
+  background-repeat: no-repeat;
+  background-size: auto 100%;
+}
+
+.lottery-image.HEIGAI_42_GPJ_500ML {
+  background-image: url("../assets/images/HEIGAI_42_GPJ_500ML.png");
+}
+
+@keyframes rotateGuangyun {
+  0% {
+    transform: scale(.3);
+    opacity: 0;
+  }
+
+  50% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(1.4);
+    opacity: 0;
+  }
+}
+
+@keyframes rotateGuang {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(-360deg);
+  }
+}
+
+.lottery-scene {
  position: relative;
-  margin-top: -20vw;
+  width: 88.055556vw;
+  height: 148.796296vw;
 }

-.laohuji-temp {
-  width: 80.833333vw;
-  height: 63.518519vw;
+.lottery-card {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
 }

-.laohuji-top {
-  width: 80.833333vw;
-  height: 63.518519vw;
+.lottery-card.flip {
+  transform: rotateY(180deg);
+}
+
+.lottery-face {
  position: absolute;
  top: 0;
  left: 0;
-  background-image: url("../assets/images/laohuji-top.webp");
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
 }

-.laohuji-bottom {
-  width: 80.833333vw;
-  height: 63.518519vw;
+.lottery-card img {
+  width: 100%;
+  display: block;
+}
+
+.lottery-prize {
  position: absolute;
  top: 0;
  left: 0;
-  background-image: url("../assets/images/laohuji-bottom.webp");
+  width: 100%;
+  height: 100%;
+  background-image: url("../assets/images/prize-bg.png");
  background-repeat: no-repeat;
-  background-size: 100% 100%;
-}
-
-.laohuji-kapian {
-  position: absolute;
-  overflow: hidden;
-  top: 58vw;
-  left: 14.4vw;
-}
-
-.laohuji-kapian-bg {
-  width: 51.851852vw;
-  clip-path: rect(0px 51.851852vw 74vw 0px);
-  height: 72vw;
-  background-image: url("../assets/images/laohuji-kapian.webp");
-  background-position: left bottom;
-  background-repeat: no-repeat;
-  background-size: 100% 73.333333vw;
+  background-size: 100%;
+  backface-visibility: hidden;
+  transform: rotateY(180deg);
 }

 .close {
@@ -242,80 +385,4 @@ onUnmounted(() => {
  background-repeat: no-repeat;
  background-size: 100%;
 }
-
-.btn-kaixin {
-  width: 40.092593vw;
-  height: 15.555556vw;
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  margin-left: -20vw;
-  background-image: url("../assets/images/btn-kaixin.webp");
-  background-repeat: no-repeat;
-  background-size: 100%;
-}
-
-.laohuji-list {
-  position: absolute;
-  top: 31.5vw;
-  left: 14vw;
-  width: 53.6vw;
-  height: 18.425926vw;
-  background-color: #fff;
-  display: flex;
-  justify-content: space-between;
-  overflow: hidden;
-}
-
-.laohuji-item {
-  width: 16.296296vw;
-  height: 18.425926vw;
-  background-color: #ccc;
-  background-image: url("../assets/images/laohuji-item-1.webp");
-  background-repeat: repeat-y;
-  background-size: 16.296296vw 165.833333vw;
-}
-
-.laohuji-kapian-cover {
-  position: relative;
-  left: 3vw;
-  top: 13vw;
-  width: 45.555556vw;
-  height: 55.185185vw;
-  background-image: url("../assets/images/NO.webp");
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-}
-
-.laohuji-kapian-cover.TJGJ {
-  background-image: url("../assets/images/TJGJ.webp");
-}
-
-.laohuji-kapian-cover.XINCHUN_WEIZUN {
-  background-image: url("../assets/images/XINCHUN_WEIZUN.webp");
-}
-
-.laohuji-kapian-cover.TEQU_JL_52_60Y_100ML_2 {
-  background-image: url("../assets/images/TEQU_JL_52_60Y_100ML_2.webp");
-}
-
-.laohuji-kapian-cover.LZLJ_TEQU_LZH_52_100ML_2 {
-  background-image: url("../assets/images/LZLJ_TEQU_LZH_52_100ML_2.webp");
-}
-
-.laohuji-kapian-cover.HEIGAI_42_GPJ_500ML {
-  background-image: url("../assets/images/HEIGAI_42_GPJ_500ML.webp");
-}
-
-.laohuji-kapian-cover.DZCZ {
-  background-image: url("../assets/images/DZCZ.webp");
-}
-
-.laohuji-kapian-cover.DZSCZ {
-  background-image: url("../assets/images/DZSCZ.webp");
-}
-
-.laohuji-kapian-cover.POINTS {
-  background-image: url("../assets/images/66_POINTS.webp");
-}
 </style>
--- a/src/components/PrizeList.vue
+++ b/src/components/PrizeList.vue
@@ -27,7 +27,7 @@
 </template>

 <script setup>
-import { ref } from "vue"
+import { ref, watch } from "vue"
 import { isWeixinPlatform, miniJumpToScene, getMiniPageBtnHack } from "../libs/utils"
 import ModalTransition from "./ModalTransition.vue";
 const props = defineProps({
@@ -37,7 +37,8 @@ const props = defineProps({
    default: () => []
  }
 })
-const emit = defineEmits(['address','close'])
+
+const emit = defineEmits(['address', 'close'])
 const sceneBtnHtml = ref('')
 const couponBtnHtml = ref('')
 sceneBtnHtml.value = getMiniPageBtnHack("/pages/unify/unify?orgId=200282401019674482&targetUrl=%2Fpages%2Fretail%2Forder%2Forder-list%3Ftab%3DAll%26topTab%3D1")
@@ -62,8 +63,8 @@ const handleItemBtn = (id, event) => {
 .prizelist {
  position: relative;
  width: 100vw;
-  height: 140.740741vw;
-  background-image: url("../assets/images/prizelist-bg.webp");
+  height: 131.759259vw;
+  background-image: url("../assets/images/prizelist-bg.png");
  background-repeat: no-repeat;
  background-size: 100%;
  display: flex;
@@ -72,7 +73,7 @@ const handleItemBtn = (id, event) => {

 .prizelist-wrapper {
  width: 100%;
-  height: 90vw;
+  height: 84vw;
  overflow: auto;

 }
@@ -87,12 +88,12 @@ const handleItemBtn = (id, event) => {
  margin-bottom: 4vw;
  margin-left: 2.5vw;
  padding-left: 3vw;
-  width: 95.092593vw;
-  height: 19.814815vw;
+  width: 95.833333vw;
+  height: 20.648148vw;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
-  background-image: url("../assets/images/prizelist-item-bg.webp");
+  background-image: url("../assets/images/prizelist-item-bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
 }
@@ -121,10 +122,10 @@ const handleItemBtn = (id, event) => {
 .prizelist-close {
  position: absolute;
  width: 8.148148vw;
-  height: 8.055556vw;
+  height: 8.148148vw;
  right: 5vw;
-  top: 0;
-  background-image: url("../assets/images/icon-close.webp");
+  top: 15vw;
+  background-image: url("../assets/images/close-btn.png");
  background-repeat: no-repeat;
  background-size: 100%;
 }
@@ -134,7 +135,7 @@ const handleItemBtn = (id, event) => {
  width: 23.981481vw;
  height: 9.074074vw;
  background-size: 100% 100%;
-  background-image: url("../assets/images/btn-gotomember.webp");
+  background-image: url("../assets/images/btn-goto.png");
  background-repeat: no-repeat;
  background-size: 100%;
 }
@@ -149,7 +150,7 @@ wx-open-launch-weapp,
 }

 .btn-goto.noaddress {
-  background-image: url("../assets/images/btn-address.webp");
+  background-image: url("../assets/images/btn-address.png");
 }

 .prizelist-cover.USER_TJGJ {
--- a/src/components/Rule.vue
+++ b/src/components/Rule.vue
@@ -25,8 +25,8 @@ const emit = defineEmits(['close'])
 .rule-wrapper {
  position: relative;
  width: 100%;
-  height: 200vw;
-  background-image: url("../assets/images/rule-bg.webp");
+  height: 175.740741vw;
+  background-image: url("../assets/images/rule-bg.png");
  background-repeat: no-repeat;
  background-size: 100%;
 }
@@ -48,10 +48,10 @@ const emit = defineEmits(['close'])
 .close {
  position: absolute;
  width: 8.148148vw;
-  height: 8.055556vw;
+  height: 8.148148vw;
  right: 5vw;
-  top: 10vw;
-  background-image: url("../assets/images/icon-close.webp");
+  top: 15vw;
+  background-image: url("../assets/images/close-btn.png");
  background-repeat: no-repeat;
  background-size: 100%;
 }
--- a/src/components/TodoList.vue
+++ b/src/components/TodoList.vue
@@ -1,34 +1,17 @@
 <template>
-  <div class="home-wrapper" style="z-index: 9;">
-    <img src="../assets/images/todo-bg.png" alt="任务列表背景图">
-
-    <div class="scene-item item-1" @click="closeTodoList">
-      <img src="../assets/images/close-btn.png" alt="关闭按钮">
-    </div>
-    <div class="scene-item item-2" @click="openQiwei($event)">
-      <img src="../assets/images/add-wx.png" alt="去添加">
-    </div>
-    <div class="scene-item item-3" @click="handleScan($event)">
-      <img src="../assets/images/scan-code.png" alt="去扫码">
-    </div>
-    <div class="scene-item item-4" @click="openHaibao($event)">
-      <img src="../assets/images/share-link.png" alt="去分享">
-    </div>
-  </div>
  <ModalTransition class="todolist" :show="show">
    <div class="todolist-wrapper">
      <div class="btn-group">
-        <div class="btn-share" :class="globalStore.invitees >= globalStore.MAX_INVITE_DAILY && 'has'"
-          @click="openHaibao($event)"></div>
        <div class="btn-qiwei" :class="globalStore.followed_official && 'has'" @click="openQiwei($event)"></div>
        <div class="btn-scan" :class="globalStore.cap_scan >= globalStore.MAX_CAP_SCAN && 'has'"
          @click="handleScan($event)"></div>
-        <div class="btn-peifang" :class="globalStore.game_chances_view_recipes >= globalStore.MAX_VIEW_RECIPES_DAILY && 'has'" @click="openPeifang($event)"></div>
+        <div class="btn-share" :class="globalStore.invitees >= globalStore.MAX_INVITE_DAILY && 'has'"
+          @click="openHaibao($event)"></div>
      </div>
      <div class="close" @click="$emit('close')"></div>
    </div>
    <div class="fullsection" v-show="haibaoShow">
-      <div class="haibao">
+      <div class="haibao" :style="userhaibaoCover">
        <img :src="haibaoUrl" alt="">
        <div class="close" @click="haibaoShow = false"></div>
      </div>
@@ -36,7 +19,7 @@

    <div class="fullsection" v-show="qiweiShow">
      <div class="qiwei">
-        <img src="../assets/images/qiwei-bg.webp" alt="">
+        <img src="../assets/images/qiwei-bg.png" alt="">
        <div class="close" @click="qiweiShow = false"></div>
      </div>
    </div>
@@ -44,38 +27,67 @@
 </template>

 <script setup>
-import { ref } from "vue"
+import { ref, computed } from "vue"
 import { globalStore } from "@/globalstore";
 import ModalTransition from "./ModalTransition.vue"
 import { Storage, generateQR, isWeixin, isMiniPage } from "../libs/utils"
 import Haibao from "@/libs/haibao"
-import bg from "../assets/images/haibao-bg.webp"
+import userPicture from "../assets/images/home-bg.png" //TODO: 这里得图片后面要换成用户参榜的图片
+import bg from "../assets/images/haibao-bg.png"
+import mask from "../assets/images/haibao-mask.png"
+import haibaoCoverBorder from "../assets/images/haibao-cover.png"
 const props = defineProps({
-  show: true,
+  show: false,
 })

-const emit = defineEmits(['close','open'])
+const emit = defineEmits(['close', 'open'])
 const shareShow = ref(false)
 const qiweiShow = ref(false)
 const haibaoShow = ref(false)
 const haibaoUrl = ref('')
+const userHaibaoUrl = ref('')
+const userhaibaoCover = computed(() => {
+  return { backgroundImage: `url(${userHaibaoUrl.value})` }
+})

 const handleHaibao = async () => {
  if (haibaoUrl.value) {
    return
  }
+
  const loading = weui.loading()
  const infos = Storage.get("userinfos")
-  const haibao = new Haibao(1080, 2160)
-  const qrcode = await generateQR(`fromid=${infos.invite_code}&org_id=${infos.org_id}`)
-  haibao.add(bg, 0, 0)
-  haibao.add(qrcode, 802, 1908)
-  haibao.generate().then(url => {
+  const haibaoCover = new Haibao(951, 1607)
+  haibaoCover.add(userPicture, 0, 0)
+  haibaoCover.add(mask, 10, 100)
+  haibaoCover.add(haibaoCoverBorder, 0, 0)
+  haibaoCover.draw('destination-in').then(() => {
+    haibaoCover.generate({ mimeType: 'image/png' }).then(async (url) => {
+      userHaibaoUrl.value = url
+
+      const haibaoSave = new Haibao(1080, 2160)
+      const qrcode = await generateQR(`fromid=${infos.invite_code}&org_id=${infos.org_id}`, 200, 200)
+      haibaoSave.add(url, 62, 350)
+      haibaoSave.add(bg, 0, 0)
+      haibaoSave.add(qrcode, 115, 1875)
+      haibaoSave.draw().then(() => {
+        haibaoSave.text(infos.nickname, haibaoSave.canvas.width / 2, 200, { font: 'bold 50px Arial', color: '#ffee6f' })
+        haibaoSave.generate({ mimeType: 'image/png' }).then(url => {
          haibaoUrl.value = url
          loading.hide()
        }).catch(err => {
+          console.log(err)
          weui.alert("海报生成失败，请重新生成")
+          loading.hide()
        })
+      }).catch(err => {
+        console.log(err)
+        weui.alert("海报生成失败，请重新生成")
+        loading.hide()
+      })
+    })
+  })
+
 }
 const openQiwei = (e) => {
  const target = e.currentTarget
@@ -101,7 +113,7 @@ const openPeifang = (e) => {
  if (target.classList.contains("has")) {
    return
  }
-  emit('open',{ type: 'peifang' })
+  emit('open', { type: 'peifang' })
 }
 const handleScan = (e) => {
  const target = e.currentTarget
@@ -131,11 +143,13 @@ const handleScan = (e) => {
  position: relative;
  min-height: -webkit-fill-available;
 }
+
 .home-wrapper img {
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
 }
+
 .scene-item {
  position: absolute;
  z-index: 2;
@@ -196,8 +210,8 @@ const handleScan = (e) => {

 .qiwei {
  position: relative;
-  width: 71.851852vw;
-  height: 89.259259vw;
+  width: 80.740741vw;
+  /* height: 89.259259vw; */
 }

 .qiwei img {
@@ -227,15 +241,6 @@ const handleScan = (e) => {
  background-size: 100%;
 }

-
-.haibao .close {
-  right: -10vw;
-}
-
-.qiwei .close {
-  right: -10vw;
-}
-
 .haibao img {
  width: 100%;
  height: 100%;
@@ -246,19 +251,32 @@ const handleScan = (e) => {
 .close {
  position: absolute;
  width: 8.148148vw;
-  height: 8.055556vw;
+  height: 8.148148vw;
  right: 5vw;
-  top: 0;
-  background-image: url("../assets/images/icon-close.webp");
+  top: 15vw;
+  background-image: url("../assets/images/close-btn.png");
  background-repeat: no-repeat;
  background-size: 100%;
 }

+.haibao .close {
+  left: 50%;
+  bottom: -5vw;
+  top: initial;
+  transform: translate3d(-50%,0,0);
+}
+
+.qiwei .close {
+  right: 50%;
+  top: 90vw;
+  margin-right: -4vw;
+}
+
 .todolist-wrapper {
  position: relative;
  width: 100vw;
-  height: 136.018519vw;
-  background-image: url("../assets/images/todo-bg.webp");
+  height: 123.333333vw;
+  background-image: url("../assets/images/todo-bg.png");
  background-repeat: no-repeat;
  background-size: 100%;
 }
@@ -266,23 +284,23 @@ const handleScan = (e) => {
 .btn-group {
  position: absolute;
  right: 6vw;
-  top: 46vw;
-  width: 23.981481vw;
-  height: 84vw;
+  top: 45vw;
+  width: 24.907407vw;
+  height: 70vw;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
 }

 .btn-group div {
-  width: 23.981481vw;
-  height: 9.074074vw;
+  width: 24.907407vw;
+  height: 10vw;
  background-repeat: no-repeat;
  background-size: 100%;
 }

 .btn-share {
-  background-image: url("../assets/images/btn-share.webp");
+  background-image: url("../assets/images/share-link.png");
 }

 .btn-share.has {
@@ -290,7 +308,7 @@ const handleScan = (e) => {
 }

 .btn-qiwei {
-  background-image: url("../assets/images/btn-qiwei.webp");
+  background-image: url("../assets/images/add-wx.png");
 }

 .btn-qiwei.has {
@@ -298,15 +316,10 @@ const handleScan = (e) => {
 }

 .btn-scan {
-  background-image: url("../assets/images/btn-scan.webp");
+  background-image: url("../assets/images/scan-code.png");
 }
+
 .btn-scan.has {
  background-image: url("../assets/images/btn-max.webp");
 }
-.btn-peifang {
-  background-image: url("../assets/images/btn-look.webp");
-}
-.btn-peifang.has {
-  background-image: url("../assets/images/btn-max.webp");
-}
 </style>
--- a/src/globalToastEvent.js
+++ b/src/globalToastEvent.js
@@ -0,0 +1,13 @@
+import mitt from 'mitt';
+const globalToastEvent = mitt();
+
+export const ToastType = {
+  SHOW_TODO: "show_todo",
+  SHOW_RULE: "show_rule",
+  SHOW_PRIZELIST: "show_prizelist",
+  SHOW_LOTTERY: "show_lottery",
+  SHOW_AD:"show_ad",
+  SHOW_ADDRESS:"show_address"
+};
+
+export default globalToastEvent;
--- a/src/globalstore.js
+++ b/src/globalstore.js
@@ -4,6 +4,7 @@ export const globalStore = reactive({
  invitees: 0,
  followed_official: false,
  cap_scan: 0,
+  lotteryCount: 0,
  game_chances_view_recipes: 0,
  POINT_1_ICESIP: 100,
  POINT_1_ICON: 100,
@@ -13,5 +14,11 @@ export const globalStore = reactive({
  MAX_VIEW_RECIPES_DAILY: 3,
  updateViewRecipesCount () {
    this.game_chances_view_recipes = this.game_chances_view_recipes >= this.MAX_VIEW_RECIPES_DAILY ? this.MAX_VIEW_RECIPES_DAILY : this.game_chances_view_recipes + 1
+  },
+  lotteryCut () {
+    this.lotteryCount--
+  },
+  lotteryAdd () {
+    this.lotteryCount++
  }
 })
--- a/src/libs/haibao.js
+++ b/src/libs/haibao.js
@@ -1,10 +1,10 @@
 export default class Haibao {
  constructor(width, height, color = '#fff') {
    this.canvas = document.createElement('canvas');
-    this.ctx = this.canvas.getContext('2d', { alpha: false });
+    this.ctx = this.canvas.getContext('2d', { alpha: true });
    this.canvas.width = width;
    this.canvas.height = height;
-    this.ctx.fillStyle = color;
+    // this.ctx.fillStyle = color;
    this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)

    this.zIndex = 0
@@ -29,26 +29,50 @@ export default class Haibao {
    this.imagePromises.push(loadPromise);
    return loadPromise;
  }
+  text (text, x, y, opts) {
+    const { font = '16px sans-serif', color = '#000', align = 'center' } = opts || {};
+    this.ctx.font = font;
+    this.ctx.fillStyle = color;

+    const drawText = (text, x, y) => {
+      this.ctx.fillText(text, x, y);
+    };
+    const totalWidth = this.ctx.measureText(text).width;
+
+    if (align === 'center') {
+      x -= totalWidth / 2;
+    }
+
+    drawText(text, x, y);
+
+    return this
+  }
+  async draw (mask = 'source-over') {
+    await Promise.all(this.imagePromises);
+
+    // 绘制所有图片
+    this.images.sort((a, b) => a.zIndex - b.zIndex)
+    this.images.forEach(({ img, x, y, zIndex }, idx) => {
+      this.ctx.drawImage(img, x, y);
+      if (idx === 0) {
+        this.ctx.globalCompositeOperation = mask
+      } else {
+        this.ctx.globalCompositeOperation = 'source-over'
+      }
+    });
+
+
+    return this;
+  }
  /**
   * 生成合成后的图片（返回Promise）
   * @returns {Promise<string>} 合成后的Base64图片数据
   */
-  async generate (mimeType = 'image/jpeg', quality = .8) {
+  async generate ({ mimeType = 'image/jpeg', quality = .8 }) {
    const validTypes = ['image/png', 'image/jpeg', 'image/webp'];
    mimeType = validTypes.includes(mimeType) ? mimeType : 'image/png';
    quality = Math.min(1, Math.max(0, Number(quality))) || .8;

-    await Promise.all(this.imagePromises);
-    // 清空画布
-    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-
-    // 绘制所有图片
-    this.images.sort((a, b) => a.zIndex - b.zIndex)
-    this.images.forEach(({ img, x, y, zIndex }) => {
-      this.ctx.drawImage(img, x, y);
-    });
-
    const b64 = this.canvas.toDataURL(mimeType, quality)

    this.images.length = 0;
--- a/src/libs/utils.js
+++ b/src/libs/utils.js
@@ -28,12 +28,12 @@ export const isBaseLogin = () => {
  return Storage.get("userinfos")
  // return true
 }
-export const generateQR = async (text) => {
+export const generateQR = async (text, width = 160, height = 160) => {
  return await QRCode.toDataURL(`${HOST}/${DIR}/?${text}`, {
    errorCorrectionLevel: 'H',
-    width: 160,
-    height: 160,
-    margin:1,
+    width: width,
+    height: height,
+    margin: 1,
    colorDark: "#000000",
    colorLight: "#e8e2cc",
  })