Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>WeChat Mini Program Flash Sale</title> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/weui@2.5.17/dist/style/weui.min.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/weui.js@1.2.1/dist/weui.min.js"></script> | |
| <style> | |
| .flash-sale-item { | |
| animation: pulse 1.5s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7); } | |
| 70% { box-shadow: 0 0 0 10px rgba(255, 59, 48, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); } | |
| } | |
| .countdown-timer { | |
| background: linear-gradient(135deg, #FF3B30, #FF9500); | |
| } | |
| .sold-out-badge { | |
| background: rgba(0, 0, 0, 0.7); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="app" class="weui-tab"> | |
| <!-- Header --> | |
| <div class="weui-navbar"> | |
| <div class="weui-navbar__item weui-bar__item_on">抢购中</div> | |
| <div class="weui-navbar__item">即将开始</div> | |
| <div class="weui-navbar__item">我的订单</div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="weui-tab__panel"> | |
| <!-- Countdown Banner --> | |
| <div class="weui-panel weui-panel_access"> | |
| <div class="weui-panel__hd countdown-timer flex justify-between items-center text-white p-3"> | |
| <div> | |
| <div class="weui-media-box__title text-sm">今日秒杀</div> | |
| <div class="text-xl font-bold">限时特惠</div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="text-center mx-1"> | |
| <div class="bg-black/30 rounded px-2 py-1 text-lg font-mono">{{countdown.hours}}</div> | |
| <div class="text-xs mt-1">时</div> | |
| </div> | |
| <div class="text-lg">:</div> | |
| <div class="text-center mx-1"> | |
| <div class="bg-black/30 rounded px-2 py-1 text-lg font-mono">{{countdown.minutes}}</div> | |
| <div class="text-xs mt-1">分</div> | |
| </div> | |
| <div class="text-lg">:</div> | |
| <div class="text-center mx-1"> | |
| <div class="bg-black/30 rounded px-2 py-1 text-lg font-mono">{{countdown.seconds}}</div> | |
| <div class="text-xs mt-1">秒</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Flash Sale Items --> | |
| <div class="weui-panel weui-panel_access"> | |
| <div class="weui-panel__hd">正在抢购</div> | |
| <div class="weui-panel__bd"> | |
| <div v-for="(item, index) in flashSaleItems" :key="index" | |
| class="weui-media-box weui-media-box_appmsg flash-sale-item relative" | |
| :class="{'opacity-50': item.soldOut}"> | |
| <div class="weui-media-box__hd"> | |
| <img class="weui-media-box__thumb" :src="item.image" alt=""> | |
| <div v-if="item.soldOut" class="sold-out-badge absolute top-0 left-0 right-0 bottom-0 flex items-center justify-center text-white"> | |
| <div class="text-center"> | |
| <div class="text-lg font-bold">已售罄</div> | |
| <div class="text-xs">下次再来</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="weui-media-box__bd"> | |
| <h4 class="weui-media-box__title">{{item.name}}</h4> | |
| <p class="weui-media-box__desc">{{item.desc}}</p> | |
| <div class="flex items-center mt-2"> | |
| <div class="text-red-500 font-bold">¥{{item.price}}</div> | |
| <div class="text-gray-500 text-sm line-through ml-2">¥{{item.originalPrice}}</div> | |
| <div class="ml-auto text-xs bg-red-500 text-white px-1 rounded">{{item.discount}}折</div> | |
| </div> | |
| <div class="mt-2"> | |
| <div class="weui-progress"> | |
| <div class="weui-progress__bar"> | |
| <div class="weui-progress__inner-bar" :style="{width: item.stockPercent + '%'}"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-500 mt-1"> | |
| <span>已抢{{item.soldPercent}}%</span> | |
| <span>仅剩{{item.stock}}件</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Buy Button --> | |
| <div class="weui-btn-area"> | |
| <button class="weui-btn weui-btn_primary" @click="buyNow">立即抢购</button> | |
| </div> | |
| </div> | |
| <!-- Footer Tabbar --> | |
| <div class="weui-tabbar"> | |
| <a href="javascript:;" class="weui-tabbar__item weui-bar__item_on"> | |
| <i class="weui-tabbar__icon iconfont icon-home"></i> | |
| <p class="weui-tabbar__label">首页</p> | |
| </a> | |
| <a href="javascript:;" class="weui-tabbar__item"> | |
| <i class="weui-tabbar__icon iconfont icon-flash-sale"></i> | |
| <p class="weui-tabbar__label">秒杀</p> | |
| </a> | |
| <a href="javascript:;" class="weui-tabbar__item"> | |
| <i class="weui-tabbar__icon iconfont icon-cart"></i> | |
| <p class="weui-tabbar__label">购物车</p> | |
| </a> | |
| <a href="javascript:;" class="weui-tabbar__item"> | |
| <i class="weui-tabbar__icon iconfont icon-user"></i> | |
| <p class="weui-tabbar__label">我的</p> | |
| </a> | |
| </div> | |
| </div> | |
| <script> | |
| new Vue({ | |
| el: '#app', | |
| data: { | |
| countdown: { | |
| hours: '02', | |
| minutes: '15', | |
| seconds: '47' | |
| }, | |
| flashSaleItems: [ | |
| { | |
| name: 'Apple iPhone 14 Pro', | |
| desc: 'A16仿生芯片，4800万像素主摄', | |
| price: '7999', | |
| originalPrice: '9999', | |
| discount: '8', | |
| image: 'http://static.photos/technology/200x200/1', | |
| stock: 12, | |
| stockPercent: 24, | |
| soldPercent: 76, | |
| soldOut: false | |
| }, | |
| { | |
| name: 'Xiaomi 13 Ultra', | |
| desc: '1英寸大底徕卡专业影像', | |
| price: '5999', | |
| originalPrice: '6999', | |
| discount: '8.5', | |
| image: 'http://static.photos/technology/200x200/2', | |
| stock: 5, | |
| stockPercent: 15, | |
| soldPercent: 85, | |
| soldOut: false | |
| }, | |
| { | |
| name: 'HUAWEI Mate 50 Pro', | |
| desc: '超光变XMAGE影像，北斗卫星消息', | |
| price: '6799', | |
| originalPrice: '7999', | |
| discount: '8.5', | |
| image: 'http://static.photos/technology/200x200/3', | |
| stock: 0, | |
| stockPercent: 0, | |
| soldPercent: 100, | |
| soldOut: true | |
| } | |
| ] | |
| }, | |
| methods: { | |
| updateCountdown() { | |
| const now = new Date(); | |
| const nextSale = new Date(); | |
| nextSale.setHours(now.getHours() + 2, 15, 47); | |
| const diff = nextSale - now; | |
| const hours = Math.floor(diff / (1000 * 60 * 60)); | |
| const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); | |
| const seconds = Math.floor((diff % (1000 * 60)) / 1000); | |
| this.countdown.hours = hours.toString().padStart(2, '0'); | |
| this.countdown.minutes = minutes.toString().padStart(2, '0'); | |
| this.countdown.seconds = seconds.toString().padStart(2, '0'); | |
| }, | |
| buyNow() { | |
| weui.dialog({ | |
| title: '确认抢购', | |
| content: '确定要立即抢购此商品吗？', | |
| buttons: [{ | |
| label: '取消', | |
| type: 'default', | |
| onClick: () => console.log('取消') | |
| }, { | |
| label: '确定', | |
| type: 'primary', | |
| onClick: () => { | |
| weui.toast('抢购成功！', 2000); | |
| setTimeout(() => { | |
| window.location.href = 'order.html'; | |
| }, 2000); | |
| } | |
| }] | |
| }); | |
| } | |
| }, | |
| mounted() { | |
| setInterval(this.updateCountdown, 1000); | |
| this.updateCountdown(); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |