refactor: 拆分小程序 vue 结构
This commit is contained in:
230
src/pages/trade/checkout/index.vue
Normal file
230
src/pages/trade/checkout/index.vue
Normal file
@@ -0,0 +1,230 @@
|
||||
<template>
|
||||
<view class="checkout-page">
|
||||
<!-- Empty State -->
|
||||
<view v-if="!itemCount" class="checkout-page__empty-card">
|
||||
<text class="checkout-page__empty-title">购物车还是空的</text>
|
||||
<text class="checkout-page__empty-desc">先去点餐页加购吧</text>
|
||||
<view class="checkout-page__empty-btn" @click="goMenu">
|
||||
<text>去点餐</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<template v-else>
|
||||
<!-- Scene Tabs -->
|
||||
<view class="checkout-page__scene-tabs">
|
||||
<view
|
||||
v-for="option in appStore.sceneOptions"
|
||||
:key="option.value"
|
||||
class="checkout-page__scene-tab"
|
||||
:class="{ 'checkout-page__scene-tab--active': appStore.scene === option.value }"
|
||||
@click="appStore.setScene(option.value)"
|
||||
>
|
||||
<text>{{ option.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Store Card -->
|
||||
<view class="checkout-page__oc-card">
|
||||
<view class="checkout-page__store">
|
||||
<view class="checkout-page__store-icon">
|
||||
<text>🏠</text>
|
||||
</view>
|
||||
<view class="checkout-page__store-info">
|
||||
<text class="checkout-page__store-name">{{ appStore.currentStore.name }}</text>
|
||||
<view class="checkout-page__store-meta">
|
||||
<view class="checkout-page__mode-badge">
|
||||
<text>{{ sceneLabel }}{{ sceneSuffix }}</text>
|
||||
</view>
|
||||
<text class="checkout-page__store-hint">{{ sceneHint }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Delivery: Address -->
|
||||
<view v-if="appStore.scene === 'Delivery'" class="checkout-page__oc-card">
|
||||
<view class="checkout-page__dash-divider" />
|
||||
<view class="checkout-page__address" @click="goSceneContext">
|
||||
<view class="checkout-page__addr-icon">
|
||||
<text>📍</text>
|
||||
</view>
|
||||
<view class="checkout-page__addr-body">
|
||||
<view class="checkout-page__addr-name">
|
||||
<text>{{ draftName }}</text>
|
||||
<text class="checkout-page__addr-phone">{{ draftPhone }}</text>
|
||||
</view>
|
||||
<text class="checkout-page__addr-detail">
|
||||
{{ fulfillmentStore.addressText || '请填写配送地址' }}
|
||||
</text>
|
||||
</view>
|
||||
<text class="checkout-page__addr-arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Pickup: Contact + info -->
|
||||
<view v-if="appStore.scene === 'Pickup'" class="checkout-page__oc-card">
|
||||
<view class="checkout-page__oc-card-body">
|
||||
<view class="checkout-page__pickup-contact">
|
||||
<view class="checkout-page__addr-icon checkout-page__addr-icon--green">
|
||||
<text>👤</text>
|
||||
</view>
|
||||
<view class="checkout-page__pickup-contact-body">
|
||||
<view class="checkout-page__addr-name">
|
||||
<text>{{ draftName }}</text>
|
||||
<text class="checkout-page__addr-phone">{{ draftPhone }}</text>
|
||||
</view>
|
||||
<text class="checkout-page__addr-detail">自提门店：{{ appStore.currentStore.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="checkout-page__pickup-hint">
|
||||
<text>🕐</text>
|
||||
<text class="checkout-page__pickup-hint-text">预计取餐时间 约 15 分钟后</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- DineIn: Table Number -->
|
||||
<view v-if="appStore.scene === 'DineIn'" class="checkout-page__oc-card">
|
||||
<view class="checkout-page__oc-card-body">
|
||||
<view class="checkout-page__dinein-table">
|
||||
<view class="checkout-page__addr-icon checkout-page__addr-icon--green">
|
||||
<text>📅</text>
|
||||
</view>
|
||||
<view class="checkout-page__table-num">
|
||||
<text class="checkout-page__table-label">桌号</text>
|
||||
<text class="checkout-page__table-value">{{ fulfillmentStore.tableNo || '--' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="checkout-page__dinein-contact">
|
||||
<view class="checkout-page__addr-icon checkout-page__addr-icon--green checkout-page__addr-icon--sm">
|
||||
<text>👤</text>
|
||||
</view>
|
||||
<view>
|
||||
<text class="checkout-page__dinein-name">{{ draftName }}</text>
|
||||
<text class="checkout-page__dinein-phone">{{ draftPhone }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="checkout-page__pickup-hint">
|
||||
<text>🛡</text>
|
||||
<text class="checkout-page__pickup-hint-text">下单后商家将尽快制作，请留意取餐提醒</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Customer Info -->
|
||||
<view class="checkout-page__oc-card">
|
||||
<view class="checkout-page__oc-card-body">
|
||||
<text class="checkout-page__field-title">顾客信息</text>
|
||||
<input class="field-input" :value="draftName" placeholder="请输入顾客姓名" @input="handleNameInput" />
|
||||
<input class="field-input checkout-page__field-gap" :value="draftPhone" type="number" placeholder="请输入手机号" @input="handlePhoneInput" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Product List -->
|
||||
<view class="checkout-page__oc-card">
|
||||
<view class="checkout-page__goods-title">
|
||||
<text class="checkout-page__goods-title-text">商品清单</text>
|
||||
<text class="checkout-page__goods-count">共 {{ itemCount }} 件</text>
|
||||
</view>
|
||||
<view class="checkout-page__goods-list">
|
||||
<view v-for="line in lineList" :key="line.lineKey" class="checkout-page__good">
|
||||
<image
|
||||
v-if="line.coverImageUrl"
|
||||
class="checkout-page__good-img"
|
||||
:src="line.coverImageUrl"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="checkout-page__good-info">
|
||||
<text class="checkout-page__good-name">{{ line.name }}</text>
|
||||
<text v-if="line.specText" class="checkout-page__good-spec">{{ line.specText }}</text>
|
||||
</view>
|
||||
<view class="checkout-page__good-right">
|
||||
<text class="checkout-page__good-price"><text class="checkout-page__good-unit">¥</text>{{ line.lineAmountText }}</text>
|
||||
<text class="checkout-page__good-qty">×{{ line.quantity }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Remark -->
|
||||
<view class="checkout-page__oc-card">
|
||||
<view class="checkout-page__remark">
|
||||
<text class="checkout-page__remark-title">✏️ 订单备注</text>
|
||||
<input class="field-input" type="text" placeholder="如少冰、少辣、不要香菜等" :value="remark" @input="handleRemarkInput" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Fees -->
|
||||
<view class="checkout-page__oc-card">
|
||||
<view class="checkout-page__fees">
|
||||
<view class="checkout-page__fee-row">
|
||||
<text class="checkout-page__fee-label">商品小计</text>
|
||||
<text class="checkout-page__fee-value">¥{{ estimate.originalAmountText }}</text>
|
||||
</view>
|
||||
<view class="checkout-page__fee-row">
|
||||
<text class="checkout-page__fee-label">打包费</text>
|
||||
<text class="checkout-page__fee-value">¥{{ estimate.packagingFeeText }}</text>
|
||||
</view>
|
||||
<view v-if="appStore.scene === 'Delivery'" class="checkout-page__fee-row">
|
||||
<text class="checkout-page__fee-label">配送费</text>
|
||||
<text class="checkout-page__fee-value">¥{{ estimate.deliveryFeeText }}</text>
|
||||
</view>
|
||||
<view v-if="estimate.discountAmount > 0" class="checkout-page__fee-row">
|
||||
<text class="checkout-page__fee-label">优惠抵扣</text>
|
||||
<text class="checkout-page__fee-value checkout-page__fee-value--green">-¥{{ estimate.discountAmountText }}</text>
|
||||
</view>
|
||||
<view class="checkout-page__fee-row checkout-page__fee-row--total">
|
||||
<text class="checkout-page__fee-label">应付金额</text>
|
||||
<text class="checkout-page__fee-value checkout-page__fee-value--total">
|
||||
<text class="checkout-page__fee-unit">¥</text>{{ estimate.payableAmountText }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Bottom Submit Bar -->
|
||||
<view class="checkout-page__submit-bar">
|
||||
<view class="checkout-page__submit-left">
|
||||
<text class="checkout-page__submit-label">应付金额</text>
|
||||
<view class="checkout-page__submit-price">
|
||||
<text class="checkout-page__submit-unit">¥</text>
|
||||
<text class="checkout-page__submit-value">{{ estimate.payableAmountText }}</text>
|
||||
</view>
|
||||
<text v-if="estimate.discountAmount > 0" class="checkout-page__submit-saved">已优惠 ¥{{ estimate.discountAmountText }}</text>
|
||||
</view>
|
||||
<view class="checkout-page__submit-btn" @click="submitOrder">
|
||||
<text>{{ submitting ? '提交中...' : '提交订单' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useCheckoutPage } from './composables/useCheckoutPage'
|
||||
|
||||
const {
|
||||
appStore,
|
||||
draftName,
|
||||
draftPhone,
|
||||
estimate,
|
||||
fulfillmentStore,
|
||||
goMenu,
|
||||
goSceneContext,
|
||||
handleNameInput,
|
||||
handlePhoneInput,
|
||||
handleRemarkInput,
|
||||
itemCount,
|
||||
lineList,
|
||||
remark,
|
||||
sceneHint,
|
||||
sceneLabel,
|
||||
sceneSuffix,
|
||||
submitOrder,
|
||||
submitting
|
||||
} = useCheckoutPage()
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import './styles/index.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user