You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
172 lines
7.8 KiB
172 lines
7.8 KiB
<template>
|
|
<view class="page-index">
|
|
<view class="nav-bar" :style="{ top: statusBarHeight + 'px' }">
|
|
<view class="nav-left">
|
|
<text class="nav-logo">🍸</text>
|
|
<text class="nav-brand">纯瘾大</text>
|
|
</view>
|
|
<view class="nav-right">
|
|
<text class="my-btn" @tap="goMyOrders">我的</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="landing-bg">
|
|
<view class="landing-decor" style="top:10%;left:8%">🍺</view>
|
|
<view class="landing-decor" style="top:8%;right:10%">🍸</view>
|
|
<view class="landing-decor" style="top:55%;left:5%;font-size:56rpx">🍋</view>
|
|
<view class="landing-decor" style="top:48%;right:8%">🥃</view>
|
|
<view class="landing-decor" style="bottom:25%;left:14%;font-size:48rpx">🧊</view>
|
|
|
|
<text class="landing-logo">🍸</text>
|
|
<text class="landing-title">纯瘾大</text>
|
|
<text class="landing-sub">唤醒你的专属调酒师</text>
|
|
<button class="btn-primary" @tap="showModal = true">🎫 领取号码牌</button>
|
|
</view>
|
|
|
|
<!-- 员工入口 -->
|
|
<view class="staff-link">
|
|
<text @tap="goStaffLogin">🔐 员工入口</text>
|
|
</view>
|
|
|
|
<!-- 号码牌弹窗 (点击按钮才显示) -->
|
|
<view class="modal-mask" :class="{ show: showModal }" @tap="onMaskTap">
|
|
<view class="card-modal" @tap.stop>
|
|
<!-- 初始状态 -->
|
|
<view v-if="!generated" class="modal-header">
|
|
<text class="modal-icon">🎫</text>
|
|
<text class="modal-title">领取你的号码牌</text>
|
|
<text class="modal-desc">一个号码开启今晚的微醺之旅</text>
|
|
</view>
|
|
<!-- 已生成状态 -->
|
|
<view v-else class="card-generated">
|
|
<text class="modal-title">🎉 这是你的专属号码</text>
|
|
<view class="card-number-big">
|
|
<text>{{ cardNo }}</text>
|
|
</view>
|
|
<text class="card-remember">⚠️ 请记住！点任意位置跳过</text>
|
|
</view>
|
|
<!-- 输入区域 -->
|
|
<view v-if="!generated" class="modal-body">
|
|
<view class="card-input-group">
|
|
<input class="card-input" v-model="inputNo" placeholder="输入号码" maxlength="4" />
|
|
<button class="card-confirm-btn" @tap="onCheck">确认</button>
|
|
</view>
|
|
<view class="card-divider">
|
|
<text>或</text>
|
|
</view>
|
|
</view>
|
|
<view v-if="!generated" class="modal-footer">
|
|
<button class="btn-primary" @tap="onGenerate">🎫 领取新号码牌</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref } from 'vue'
|
|
import { post, get } from '@/utils/request'
|
|
import { API } from '@/utils/constants'
|
|
import { useCardStore } from '@/stores/card'
|
|
|
|
export default {
|
|
setup() {
|
|
const card = useCardStore()
|
|
const showModal = ref(false)
|
|
const generated = ref(false)
|
|
const inputNo = ref('')
|
|
const cardNo = ref('')
|
|
const statusBarHeight = ref(0)
|
|
let navTimer = null
|
|
|
|
function goMenu() {
|
|
showModal.value = false
|
|
generated.value = false
|
|
uni.navigateTo({ url: '/pages/menu/menu' })
|
|
}
|
|
|
|
async function onGenerate() {
|
|
try {
|
|
const res = await post(API.CARD_GENERATE)
|
|
cardNo.value = res.cardNo
|
|
card.setCardNo(res.cardNo)
|
|
generated.value = true
|
|
navTimer = setTimeout(() => { goMenu() }, 3000)
|
|
} catch (e) {}
|
|
}
|
|
|
|
async function onCheck() {
|
|
const no = inputNo.value.trim().toUpperCase()
|
|
if (!no) return
|
|
// 1997 → 员工登录
|
|
if (no === '1997') {
|
|
showModal.value = false
|
|
uni.navigateTo({ url: '/pages/staff/login' })
|
|
return
|
|
}
|
|
try {
|
|
await get(API.CARD_CHECK, { no })
|
|
card.setCardNo(no)
|
|
showModal.value = false
|
|
uni.navigateTo({ url: '/pages/menu/menu' })
|
|
} catch (e) {}
|
|
}
|
|
|
|
function onMaskTap() {
|
|
if (generated.value) {
|
|
if (navTimer) { clearTimeout(navTimer); navTimer = null }
|
|
goMenu()
|
|
}
|
|
}
|
|
|
|
function goMyOrders() { uni.navigateTo({ url: '/pages/orders/orders' }) }
|
|
function goStaffLogin() { uni.navigateTo({ url: '/pages/staff/login' }) }
|
|
|
|
return { showModal, generated, inputNo, cardNo, statusBarHeight, onGenerate, onCheck, onMaskTap, goMyOrders, goStaffLogin }
|
|
},
|
|
created() {
|
|
const systemInfo = uni.getSystemInfoSync()
|
|
this.statusBarHeight = systemInfo.statusBarHeight
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
.page-index{min-height:100vh;display:flex;flex-direction:column;background:var(--bg);width:100%}
|
|
.nav-bar{height:100rpx;position:fixed;top:0;z-index:100;background:var(--bg);display:flex;align-items:center;justify-content:space-between;padding:0 28rpx;border-bottom:1px solid var(--border);width:100%}
|
|
.nav-left{display:flex;align-items:center;gap:16rpx}
|
|
.nav-logo{font-size:44rpx}
|
|
.nav-brand{font-size:40rpx;font-weight:900;color:var(--gold);letter-spacing:4rpx}
|
|
.my-btn{font-size:26rpx;color:var(--gold);font-weight:600}
|
|
|
|
.landing-bg{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;background:radial-gradient(ellipse at center,#1A1A1A 0%,var(--bg) 70%);padding:40rpx}
|
|
.landing-decor{position:absolute;font-size:80rpx;opacity:.08;animation:float 6s ease-in-out infinite;pointer-events:none}
|
|
.landing-logo{font-size:160rpx;animation:float 3s ease-in-out infinite}
|
|
.landing-title{font-size:56rpx;font-weight:900;color:var(--gold);margin-top:24rpx;letter-spacing:8rpx}
|
|
.landing-sub{font-size:28rpx;color:var(--text-dim);margin:12rpx 0 80rpx;letter-spacing:2rpx}
|
|
.btn-primary{width:440rpx;height:96rpx;border-radius:24rpx;background:linear-gradient(135deg,var(--gold-dark),var(--gold),var(--gold-light));color:#1A1A1A;border:none;font-size:32rpx;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 8rpx 40rpx rgba(245,166,35,.35)}
|
|
|
|
/* 员工入口 */
|
|
.staff-link{padding:20rpx;text-align:center;flex-shrink:0}
|
|
.staff-link text{color:var(--text-muted);font-size:22rpx;letter-spacing:2rpx}
|
|
|
|
/* 号码牌弹窗 */
|
|
.modal-mask{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.75);z-index:300;align-items:center;justify-content:center}
|
|
.modal-mask.show{display:flex}
|
|
.card-modal{width:580rpx;background:var(--bg-card);border-radius:40rpx;border:2px solid var(--border);overflow:hidden;animation:bounce-in .5s ease}
|
|
.modal-header{padding:48rpx 36rpx 28rpx;text-align:center}
|
|
.modal-icon{font-size:104rpx;animation:float 2s ease-in-out infinite}
|
|
.modal-title{font-size:36rpx;font-weight:800;color:var(--gold);margin-top:16rpx;white-space:nowrap}
|
|
.modal-desc{font-size:26rpx;color:var(--text-dim);margin-top:8rpx;line-height:1.6;white-space:nowrap}
|
|
.card-generated{text-align:center;padding:24rpx 36rpx 40rpx}
|
|
.card-number-big{padding:32rpx;background:linear-gradient(135deg,rgba(245,166,35,.1),rgba(245,166,35,.05));border-radius:28rpx;border:2rpx dashed rgba(245,166,35,.3)}
|
|
.card-number-big text{font-size:84rpx;font-weight:900;letter-spacing:20rpx;color:var(--gold)}
|
|
.card-remember{font-size:26rpx;color:var(--red);margin-top:20rpx;font-weight:600;display:block}
|
|
.modal-body{padding:0 36rpx 36rpx}
|
|
.card-input-group{display:flex;align-items:stretch;margin-bottom:24rpx;border:4rpx solid var(--border);border-radius:20rpx;overflow:hidden;background:var(--bg)}
|
|
.card-input{flex:1;min-width:0;height:92rpx;background:transparent;border:none;outline:none;padding:0 28rpx;font-size:36rpx;font-weight:700;text-align:center;letter-spacing:8rpx;color:var(--gold)}
|
|
.card-confirm-btn{flex-shrink:0;width:128rpx;border:none;background:linear-gradient(135deg,var(--gold-dark),var(--gold));color:#1A1A1A;font-size:28rpx;font-weight:700;display:flex;align-items:center;justify-content:center}
|
|
.card-divider{text-align:center;color:var(--text-muted);font-size:24rpx;margin:20rpx 0;position:relative}
|
|
.modal-footer{padding:0 36rpx 40rpx}
|
|
</style>
|