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.
104 lines
4.2 KiB
104 lines
4.2 KiB
<template>
|
|
<view class="page-confirm">
|
|
<view class="top-bar">
|
|
<text class="top-back" @tap="goBack">←</text>
|
|
<text class="top-title">确认下单</text>
|
|
<text></text>
|
|
</view>
|
|
|
|
<scroll-view class="confirm-body" scroll-y>
|
|
<view class="section">
|
|
<text class="section-title">🍷 订单清单</text>
|
|
<view v-for="item in cart.items" :key="item.product.id" class="confirm-item">
|
|
<text class="ci-emoji">{{ item.product.emoji }}</text>
|
|
<view class="ci-info">
|
|
<text class="ci-name">{{ item.product.name }}</text>
|
|
<text class="ci-desc">{{ item.product.desc }}</text>
|
|
</view>
|
|
<text class="ci-qty">×{{ item.qty }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="section">
|
|
<text class="section-title">🏷 快捷备注</text>
|
|
<PresetTags v-model="presets" />
|
|
</view>
|
|
|
|
<view class="section">
|
|
<text class="section-title">✏️ 补充备注</text>
|
|
<input class="note-input" v-model="note" placeholder="好晕好渴好想喝..." maxlength="100" />
|
|
</view>
|
|
|
|
<view class="total-line">
|
|
<text>共 {{ cart.totalCount }} 件</text>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<view class="confirm-footer">
|
|
<button class="bell-btn" @tap="onSubmit" :loading="submitting">🔔 摇铃下单</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref } from 'vue'
|
|
import { useCartStore } from '@/stores/cart'
|
|
import { useCardStore } from '@/stores/card'
|
|
import { post } from '@/utils/request'
|
|
import { API } from '@/utils/constants'
|
|
import PresetTags from '@/components/PresetTags.vue'
|
|
|
|
export default {
|
|
components: { PresetTags },
|
|
setup() {
|
|
const cart = useCartStore()
|
|
const card = useCardStore()
|
|
const presets = ref([])
|
|
const note = ref('')
|
|
const submitting = ref(false)
|
|
|
|
function goBack() { uni.navigateBack() }
|
|
|
|
async function onSubmit() {
|
|
if (cart.items.length === 0) {
|
|
uni.showToast({ title: '购物车为空', icon: 'none' })
|
|
return
|
|
}
|
|
submitting.value = true
|
|
try {
|
|
const fullNote = [...presets.value, note.value].filter(Boolean).join(' ')
|
|
const items = cart.items.map(i => ({ productId: i.product.id, qty: i.qty }))
|
|
await post(API.ORDER_SUBMIT, { cardNo: card.cardNo, items, note: fullNote })
|
|
cart.clearCart()
|
|
uni.showToast({ title: '下单成功 🎉', icon: 'success' })
|
|
setTimeout(() => { uni.redirectTo({ url: '/pages/orders/orders' }) }, 1500)
|
|
} catch (e) {}
|
|
submitting.value = false
|
|
}
|
|
|
|
return { cart, presets, note, submitting, goBack, onSubmit }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-confirm{min-height:100vh;display:flex;flex-direction:column;background:var(--bg);width:100%}
|
|
.top-bar{height:100rpx;display:flex;align-items:center;justify-content:space-between;padding:0 28rpx;border-bottom:1px solid var(--border);flex-shrink:0}
|
|
.top-back{font-size:36rpx;color:var(--text-dim)}
|
|
.top-title{font-size:32rpx;font-weight:800;color:var(--gold)}
|
|
.confirm-body{flex:1;padding:0 28rpx}
|
|
.section{padding:20rpx 0;border-bottom:1px solid var(--border)}
|
|
.section-title{font-size:28rpx;font-weight:700;color:var(--gold);display:block;margin-bottom:16rpx}
|
|
.confirm-item{display:flex;align-items:center;padding:16rpx 0;gap:16rpx}
|
|
.ci-emoji{font-size:48rpx}
|
|
.ci-info{flex:1}
|
|
.ci-name{font-size:28rpx;font-weight:600;color:var(--text);display:block}
|
|
.ci-desc{font-size:22rpx;color:var(--text-dim)}
|
|
.ci-qty{font-size:28rpx;font-weight:700;color:var(--gold)}
|
|
.note-input{width:100%;height:80rpx;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 24rpx;font-size:28rpx;color:var(--text);margin-top:8rpx}
|
|
.total-line{padding:24rpx 0;font-size:28rpx;color:var(--text-dim)}
|
|
.confirm-footer{padding:20rpx 28rpx;padding-bottom:calc(20rpx + var(--safe-b));flex-shrink:0}
|
|
.bell-btn{width:100%;height:96rpx;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--gold-dark),var(--gold));color:#1A1A1A;border:none;font-size:32rpx;font-weight:800;display:flex;align-items:center;justify-content:center;animation:pulse-glow 2s ease-in-out infinite}
|
|
@keyframes pulse-glow{0%,100%{box-shadow:0 0 20rpx rgba(245,166,35,.3)}50%{box-shadow:0 0 40rpx rgba(245,166,35,.6)}}
|
|
</style>
|
|
|