125 lines
3.6 KiB
Vue
125 lines
3.6 KiB
Vue
<template>
|
||
<view class="store-page">
|
||
<!-- 导航栏 -->
|
||
<view class="nav-bar">
|
||
<text class="nav-back" @click="goBack">‹</text>
|
||
<text class="nav-title">店铺设置</text>
|
||
<view style="width:40px;"></view>
|
||
</view>
|
||
|
||
<view class="form-wrap">
|
||
<view class="form-card">
|
||
<view class="form-row">
|
||
<text class="row-label">店铺名称</text>
|
||
<input class="row-input" v-model="form.name" placeholder="请输入" />
|
||
</view>
|
||
<view class="form-row">
|
||
<text class="row-label">联系电话</text>
|
||
<input class="row-input" v-model="form.phone" placeholder="请输入" />
|
||
</view>
|
||
<view class="form-row">
|
||
<text class="row-label">地址</text>
|
||
<input class="row-input" v-model="form.address" placeholder="请输入" />
|
||
</view>
|
||
<view class="form-row" style="flex-direction:column; align-items:flex-start;">
|
||
<text class="row-label" style="margin-bottom:8px;">简介</text>
|
||
<textarea class="row-textarea" v-model="form.intro" placeholder="请输入店铺简介" rows="3" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="save-btn-wrap">
|
||
<view class="btn-save" :class="{ loading: saving }" @click="saveStore">保存设置</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue'
|
||
import { updateStore } from '../../../utils/api.js'
|
||
|
||
const storeInfo = JSON.parse(uni.getStorageSync('petstore_store') || '{}')
|
||
const saving = ref(false)
|
||
const form = ref({ name: '', phone: '', address: '', intro: '' })
|
||
|
||
const goBack = () => uni.navigateBack()
|
||
|
||
const saveStore = async () => {
|
||
if (!form.value.name) { 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 updated = { ...storeInfo, ...form.value }
|
||
uni.setStorageSync('petstore_store', JSON.stringify(updated))
|
||
} else {
|
||
uni.showToast({ title: res.message || '保存失败', icon: 'none' })
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
form.value = {
|
||
name: storeInfo.name || '',
|
||
phone: storeInfo.phone || '',
|
||
address: storeInfo.address || '',
|
||
intro: storeInfo.intro || ''
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.store-page { min-height: 100vh; background: #f5f5f5; padding-bottom: 20px; }
|
||
.nav-bar {
|
||
background: #fff;
|
||
padding: 40px 16px 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
.nav-back { font-size: 28px; color: #333; font-weight: 300; }
|
||
.nav-title { font-size: 16px; font-weight: 600; color: #333; }
|
||
|
||
.form-wrap { padding: 12px 16px 0; }
|
||
.form-card { background: #fff; border-radius: 12px; padding: 4px 16px; }
|
||
.form-row {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 14px 0;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
.form-row:last-child { border-bottom: none; }
|
||
.row-label { font-size: 14px; color: #666; width: 72px; flex-shrink: 0; }
|
||
.row-input {
|
||
flex: 1;
|
||
font-size: 14px;
|
||
color: #333;
|
||
text-align: right;
|
||
}
|
||
.row-textarea {
|
||
width: 100%;
|
||
font-size: 14px;
|
||
color: #333;
|
||
border: none;
|
||
resize: none;
|
||
background: transparent;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.save-btn-wrap { padding: 16px; }
|
||
.btn-save {
|
||
width: 100%;
|
||
height: 46px;
|
||
background: #07c160;
|
||
color: #fff;
|
||
border-radius: 23px;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.btn-save.loading { opacity: 0.7; }
|
||
</style>
|