75 lines
2.6 KiB
Vue
75 lines
2.6 KiB
Vue
<template>
|
||
<view class="page-shell profile-page">
|
||
<PageHero title="我的" subtitle="管理联系人、地址和常用信息">
|
||
<view class="profile-page__hero-row">
|
||
<view>
|
||
<text class="profile-page__hero-label">联系人</text>
|
||
<text class="profile-page__hero-value">{{ customerStore.name || '未填写' }}</text>
|
||
</view>
|
||
<view>
|
||
<text class="profile-page__hero-label">手机号</text>
|
||
<text class="profile-page__hero-value">{{ customerStore.phone || '未填写' }}</text>
|
||
</view>
|
||
</view>
|
||
</PageHero>
|
||
|
||
<view class="surface-card">
|
||
<text class="section-title">顾客信息</text>
|
||
<input class="field-input" :value="draftName" placeholder="请输入顾客姓名" @input="handleNameInput" />
|
||
<input class="field-input profile-page__field-gap" :value="draftPhone" type="number" placeholder="请输入手机号" @input="handlePhoneInput" />
|
||
<view class="profile-page__action-row">
|
||
<NutButton type="primary" block @click="saveProfile">保存信息</NutButton>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="surface-card">
|
||
<view class="row-between">
|
||
<view>
|
||
<text class="section-title">常用信息</text>
|
||
<text class="section-subtitle">提前填写地址或桌号，下单时更方便。</text>
|
||
</view>
|
||
</view>
|
||
<view class="profile-page__kv-list">
|
||
<view class="profile-page__kv-item">
|
||
<text class="caption-text">配送地址</text>
|
||
<text class="value-text profile-page__break-all">{{ fulfillmentStore.addressText || '暂未填写' }}</text>
|
||
</view>
|
||
<view class="profile-page__kv-item">
|
||
<text class="caption-text">堂食桌号</text>
|
||
<text class="value-text">{{ fulfillmentStore.tableNo || '暂未填写' }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="profile-page__action-grid">
|
||
<NutButton block plain @click="goAddress">编辑地址</NutButton>
|
||
<NutButton block plain @click="goDineIn">编辑桌号</NutButton>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { Button as NutButton } from '@nutui/nutui-taro'
|
||
import PageHero from '@/components/page-hero/index.vue'
|
||
import { useTabBarSelection } from '@/utils/useTabBarSelection'
|
||
import { useProfilePage } from './composables/useProfilePage'
|
||
|
||
useTabBarSelection(3)
|
||
|
||
const {
|
||
customerStore,
|
||
draftName,
|
||
draftPhone,
|
||
fulfillmentStore,
|
||
goAddress,
|
||
goDineIn,
|
||
handleNameInput,
|
||
handlePhoneInput,
|
||
saveProfile
|
||
} = useProfilePage()
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@use './styles/index.scss';
|
||
</style>
|