499 lines
14 KiB
Vue
499 lines
14 KiB
Vue
<template>
|
||
<view class="page-shell store-page">
|
||
<view class="store-nav nav-gradient" :style="navSafeStyle">
|
||
<view class="nav-back" @click="goBackToMine"><AppIcon name="back" :size="18" color="#ffffff" /></view>
|
||
<text class="nav-title">店铺设置</text>
|
||
<view class="nav-placeholder"></view>
|
||
</view>
|
||
|
||
<view class="store-body">
|
||
<view class="store-hero">
|
||
<view class="store-hero-icon" aria-hidden="true">
|
||
<AppIcon name="store" :size="22" color="#15803d" />
|
||
</view>
|
||
<view class="store-hero-text">
|
||
<text class="store-hero-title">门店资料</text>
|
||
<text class="store-hero-desc">在此维护门店名称、电话、地址与简介，并设置「营业时间」。营业时间决定客户线上可预约的时段范围（每半小时为一个时段，同一时段仅一单）。</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="store-card">
|
||
<view class="store-card-head">
|
||
<text class="store-card-kicker">基础信息</text>
|
||
</view>
|
||
|
||
<view class="store-field">
|
||
<view class="store-field-label">
|
||
<span class="store-ico"><AppIcon name="store" :size="15" color="#475569" /></span>
|
||
<text>店铺名称</text>
|
||
</view>
|
||
<input v-model="form.name" class="van-field store-input" placeholder="请输入店铺名称" />
|
||
</view>
|
||
|
||
<view class="store-field">
|
||
<view class="store-field-label">
|
||
<span class="store-ico"><AppIcon name="phone" :size="15" color="#475569" /></span>
|
||
<text>联系电话</text>
|
||
</view>
|
||
<input v-model="form.phone" type="tel" class="van-field store-input" placeholder="请输入联系电话" maxlength="20" />
|
||
</view>
|
||
|
||
<view class="store-field">
|
||
<view class="store-field-label">
|
||
<span class="store-ico"><AppIcon name="pin" :size="15" color="#475569" /></span>
|
||
<text>地址</text>
|
||
</view>
|
||
<view class="address-row">
|
||
<input v-model="form.address" class="van-field store-input address-input" placeholder="输入地址或点右侧选点" />
|
||
<button type="button" class="pick-location-btn" :disabled="pickingLocation" @click="pickAddress">
|
||
地图选点
|
||
</button>
|
||
</view>
|
||
<view v-if="hasMapPin" class="geo-hint">已选地图位置，可再微调上方文字后保存</view>
|
||
</view>
|
||
|
||
<view class="store-field store-field-last">
|
||
<view class="store-field-label">
|
||
<span class="store-ico"><AppIcon name="report" :size="15" color="#475569" /></span>
|
||
<text>简介</text>
|
||
</view>
|
||
<textarea
|
||
v-model="form.intro"
|
||
class="van-field store-input intro-textarea"
|
||
placeholder="一句话介绍门店特色、服务亮点等"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="store-card store-card--hours store-card--after-basic">
|
||
<view class="store-card-head">
|
||
<text class="store-card-title">营业时间</text>
|
||
<text class="store-card-sub">客户可预约时段为「开始」至「结束」之间的半点档；每半小时为一档，每档最多一单，已满或已过不可选。</text>
|
||
</view>
|
||
<view class="store-field">
|
||
<view class="store-field-label">
|
||
<span class="store-ico"><AppIcon name="service" :size="15" color="#475569" /></span>
|
||
<text>开始时间</text>
|
||
</view>
|
||
<text class="store-field-tip">当日第一个可预约的半点（例如 09:00）</text>
|
||
<picker mode="selector" :range="HALF_HOUR_TIME_SLOTS" :value="bookingStartIdx" @change="onBookingStartChange">
|
||
<view class="app-form-input app-form-picker store-picker-like">
|
||
<text>{{ form.bookingDayStart || '请选择' }}</text>
|
||
<text class="app-form-arrow">›</text>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class="store-field store-field-last">
|
||
<view class="store-field-label">
|
||
<span class="store-ico"><AppIcon name="service" :size="15" color="#475569" /></span>
|
||
<text>结束时间</text>
|
||
</view>
|
||
<text class="store-field-tip">当日最后一个可预约的半点起始时刻（例如 21:30 表示最晚可约 21:00–21:30 这一档）</text>
|
||
<picker mode="selector" :range="HALF_HOUR_TIME_SLOTS" :value="bookingLastIdx" @change="onBookingLastChange">
|
||
<view class="app-form-input app-form-picker store-picker-like">
|
||
<text>{{ form.bookingLastSlotStart || '请选择' }}</text>
|
||
<text class="app-form-arrow">›</text>
|
||
</view>
|
||
</picker>
|
||
<view class="booking-hint">结束须不早于开始。保存后对新建预约生效。</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="store-actions">
|
||
<button
|
||
class="van-button van-button--primary van-button--block store-save-btn"
|
||
:loading="saving"
|
||
@click="saveStore"
|
||
>
|
||
保存设置
|
||
</button>
|
||
<view class="store-actions-hint">保存后立即生效，并写入本地缓存。</view>
|
||
</view>
|
||
|
||
<view class="store-footer-tip">宠伴生活馆 · 商家版</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onMounted } from 'vue'
|
||
import AppIcon from '../../components/AppIcon.vue'
|
||
import { navigateTo } from '../../utils/globalState.js'
|
||
import { updateStore, getStoreDetail } from '../../api/index.js'
|
||
import { HALF_HOUR_TIME_SLOTS, halfHourPickerIndex } from '../../utils/halfHourTime.js'
|
||
import { getStoreSession, setStoreSession } from '../../utils/session.js'
|
||
|
||
defineEmits(['change-page'])
|
||
const storeInfo = getStoreSession()
|
||
const goBackToMine = () => {
|
||
const pages = getCurrentPages()
|
||
if (pages.length > 1) {
|
||
uni.navigateBack()
|
||
return
|
||
}
|
||
navigateTo('mine')
|
||
}
|
||
|
||
const navSafeStyle = (() => {
|
||
const statusBarHeight = uni.getSystemInfoSync?.().statusBarHeight || 20
|
||
let navHeight = statusBarHeight + 44
|
||
const menuRect = uni.getMenuButtonBoundingClientRect?.()
|
||
if (menuRect && menuRect.top && menuRect.height) {
|
||
const verticalGap = Math.max(menuRect.top - statusBarHeight, 4)
|
||
navHeight = statusBarHeight + verticalGap * 2 + menuRect.height
|
||
}
|
||
return `padding-top:${statusBarHeight}px;height:${navHeight}px;`
|
||
})()
|
||
const saving = ref(false)
|
||
const pickingLocation = ref(false)
|
||
const form = ref({
|
||
name: '',
|
||
phone: '',
|
||
address: '',
|
||
intro: '',
|
||
latitude: null,
|
||
longitude: null,
|
||
bookingDayStart: '09:00',
|
||
bookingLastSlotStart: '21:30'
|
||
})
|
||
|
||
const toHHmm = (v) => {
|
||
if (v == null || v === '') return ''
|
||
if (typeof v === 'string') return v.length >= 5 ? v.slice(0, 5) : v
|
||
if (Array.isArray(v) && v.length >= 2) {
|
||
return `${String(v[0]).padStart(2, '0')}:${String(v[1]).padStart(2, '0')}`
|
||
}
|
||
return ''
|
||
}
|
||
|
||
const bookingStartIdx = computed(() => halfHourPickerIndex(form.value.bookingDayStart))
|
||
const bookingLastIdx = computed(() => halfHourPickerIndex(form.value.bookingLastSlotStart))
|
||
|
||
const onBookingStartChange = (e) => {
|
||
const i = Number(e.detail.value)
|
||
form.value.bookingDayStart = HALF_HOUR_TIME_SLOTS[i] || '09:00'
|
||
}
|
||
|
||
const onBookingLastChange = (e) => {
|
||
const i = Number(e.detail.value)
|
||
form.value.bookingLastSlotStart = HALF_HOUR_TIME_SLOTS[i] || '21:30'
|
||
}
|
||
|
||
const hasMapPin = computed(() => form.value.latitude != null && form.value.longitude != null)
|
||
|
||
const toCoord = (v) => {
|
||
if (v == null || v === '') return null
|
||
const n = typeof v === 'number' ? v : parseFloat(v)
|
||
return Number.isFinite(n) ? n : null
|
||
}
|
||
|
||
const pickAddress = () => {
|
||
pickingLocation.value = true
|
||
uni.chooseLocation({
|
||
success: (res) => {
|
||
const name = res.name || ''
|
||
const addr = res.address || ''
|
||
form.value.address = [name, addr].filter(Boolean).join(' · ') || addr || name
|
||
form.value.latitude = toCoord(res.latitude)
|
||
form.value.longitude = toCoord(res.longitude)
|
||
},
|
||
fail: (err) => {
|
||
const msg = (err && err.errMsg) || ''
|
||
if (/cancel|取消/i.test(msg)) return
|
||
uni.showToast({ title: '无法打开选点，请手动填写', icon: 'none' })
|
||
},
|
||
complete: () => {
|
||
pickingLocation.value = false
|
||
}
|
||
})
|
||
}
|
||
|
||
const saveStore = async () => {
|
||
const i0 = HALF_HOUR_TIME_SLOTS.indexOf(form.value.bookingDayStart)
|
||
const i1 = HALF_HOUR_TIME_SLOTS.indexOf(form.value.bookingLastSlotStart)
|
||
if (i0 < 0 || i1 < 0 || i1 < i0) {
|
||
uni.showToast({ title: '结束时间须不早于开始时间', icon: 'none' })
|
||
return
|
||
}
|
||
saving.value = true
|
||
const res = await updateStore({ id: storeInfo.id, ...form.value })
|
||
saving.value = false
|
||
if (res.code === 200) {
|
||
uni.showToast({ title: '保存成功', icon: 'success' })
|
||
const merged = res.data ? { ...storeInfo, ...res.data } : { ...storeInfo, ...form.value }
|
||
setStoreSession(merged)
|
||
} else {
|
||
uni.showToast({ title: res.message || '保存失败', icon: 'none' })
|
||
}
|
||
}
|
||
|
||
onMounted(async () => {
|
||
const base = {
|
||
name: storeInfo.name || '',
|
||
phone: storeInfo.phone || '',
|
||
address: storeInfo.address || '',
|
||
intro: storeInfo.intro || '',
|
||
latitude: toCoord(storeInfo.latitude),
|
||
longitude: toCoord(storeInfo.longitude),
|
||
bookingDayStart: toHHmm(storeInfo.bookingDayStart) || '09:00',
|
||
bookingLastSlotStart: toHHmm(storeInfo.bookingLastSlotStart) || '21:30'
|
||
}
|
||
if (storeInfo.id) {
|
||
const res = await getStoreDetail(storeInfo.id)
|
||
if (res.code === 200 && res.data) {
|
||
const d = res.data
|
||
base.bookingDayStart = toHHmm(d.bookingDayStart) || base.bookingDayStart
|
||
base.bookingLastSlotStart = toHHmm(d.bookingLastSlotStart) || base.bookingLastSlotStart
|
||
if (d.name != null) base.name = d.name
|
||
if (d.phone != null) base.phone = d.phone
|
||
if (d.address != null) base.address = d.address
|
||
if (d.intro != null) base.intro = d.intro
|
||
if (d.latitude != null) base.latitude = toCoord(d.latitude)
|
||
if (d.longitude != null) base.longitude = toCoord(d.longitude)
|
||
}
|
||
}
|
||
form.value = base
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.store-page {
|
||
min-height: 100vh;
|
||
background: var(--pet-bg, #f5f7fb);
|
||
padding-bottom: 120rpx;
|
||
}
|
||
.nav-placeholder {
|
||
width: 32px;
|
||
}
|
||
|
||
.store-nav {
|
||
padding: 14px 16px 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 10;
|
||
}
|
||
.nav-back {
|
||
font-size: 20px;
|
||
color: #fff;
|
||
}
|
||
.nav-title {
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
color: #fff;
|
||
}
|
||
|
||
.store-body {
|
||
padding: 12px 14px 28px;
|
||
}
|
||
|
||
.store-hero {
|
||
display: flex;
|
||
gap: 12px;
|
||
align-items: flex-start;
|
||
padding: 16px 14px;
|
||
border-radius: 16px;
|
||
background: linear-gradient(135deg, #ffffff 0%, #ecfdf3 55%, #f0fdf4 100%);
|
||
border: 1px solid #d8f0e2;
|
||
box-shadow: var(--pet-card-shadow, 0 8px 24px rgba(15, 23, 42, 0.06));
|
||
margin-bottom: 14px;
|
||
}
|
||
.store-hero-icon {
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 12px;
|
||
background: rgba(255, 255, 255, 0.9);
|
||
border: 1px solid #bbf7d0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
.store-hero-text {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
.store-hero-title {
|
||
display: block;
|
||
font-size: 17px;
|
||
font-weight: 700;
|
||
color: #14532d;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
.store-hero-desc {
|
||
display: block;
|
||
margin-top: 6px;
|
||
font-size: 13px;
|
||
line-height: 1.55;
|
||
color: #4b5563;
|
||
}
|
||
|
||
.store-card {
|
||
background: #fff;
|
||
border: 1px solid #e6ecf4;
|
||
border-radius: 16px;
|
||
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
|
||
padding: 4px 4px 8px;
|
||
overflow: hidden;
|
||
}
|
||
.store-card--hours {
|
||
border-color: #86efac;
|
||
box-shadow: 0 8px 22px rgba(34, 197, 94, 0.12);
|
||
}
|
||
.store-card--after-basic {
|
||
margin-top: 14px;
|
||
}
|
||
.store-card-head {
|
||
padding: 14px 14px 6px;
|
||
}
|
||
.store-card-kicker {
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
color: #94a3b8;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
.store-card-title {
|
||
display: block;
|
||
font-size: 17px;
|
||
font-weight: 800;
|
||
color: #14532d;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
.store-card-sub {
|
||
display: block;
|
||
margin-top: 6px;
|
||
font-size: 13px;
|
||
line-height: 1.55;
|
||
color: #64748b;
|
||
}
|
||
|
||
.store-field {
|
||
padding: 12px 12px 4px;
|
||
}
|
||
.store-field + .store-field {
|
||
border-top: 1px solid #f1f5f9;
|
||
}
|
||
.store-field-label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-bottom: 6px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #374151;
|
||
}
|
||
.store-field-tip {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
font-size: 13px;
|
||
line-height: 1.5;
|
||
color: #64748b;
|
||
}
|
||
.store-ico {
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 8px;
|
||
background: #f1f5f9;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 输入区：略抬高层级，避免贴边过紧 */
|
||
.store-input {
|
||
margin-top: 0 !important;
|
||
}
|
||
|
||
.address-row {
|
||
display: flex;
|
||
align-items: stretch;
|
||
gap: 10px;
|
||
}
|
||
.address-input {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
.pick-location-btn {
|
||
flex-shrink: 0;
|
||
padding: 0 14px;
|
||
min-height: 44px;
|
||
border-radius: 12px;
|
||
border: 1px solid #2db96d;
|
||
background: #f0fdf4;
|
||
color: #15803d;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
line-height: 44px;
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
.pick-location-btn:active:not([disabled]) {
|
||
opacity: 0.92;
|
||
transform: translateY(1px);
|
||
}
|
||
.pick-location-btn[disabled] {
|
||
opacity: 0.55;
|
||
}
|
||
.geo-hint {
|
||
margin-top: 8px;
|
||
font-size: 12px;
|
||
color: #2db96d;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.intro-textarea {
|
||
min-height: 112px !important;
|
||
line-height: 1.55 !important;
|
||
padding-top: 12px !important;
|
||
padding-bottom: 12px !important;
|
||
resize: none;
|
||
}
|
||
|
||
.store-field-last {
|
||
padding-bottom: 14px;
|
||
}
|
||
|
||
.store-actions {
|
||
margin-top: 18px;
|
||
}
|
||
.store-save-btn {
|
||
margin-top: 0 !important;
|
||
box-shadow: 0 10px 26px rgba(34, 197, 94, 0.35) !important;
|
||
}
|
||
.store-actions-hint {
|
||
margin-top: 10px;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
color: #94a3b8;
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.store-footer-tip {
|
||
margin-top: 28px;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
color: #cbd5e1;
|
||
}
|
||
|
||
.store-picker-like {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
min-height: 44px;
|
||
padding: 0 12px;
|
||
border-radius: 12px;
|
||
background: #f8fafc;
|
||
border: 1px solid #e2e8f0;
|
||
font-size: 15px;
|
||
color: #111827;
|
||
}
|
||
.booking-hint {
|
||
margin-top: 8px;
|
||
font-size: 13px;
|
||
color: #64748b;
|
||
line-height: 1.5;
|
||
}
|
||
</style>
|