update
This commit is contained in:
aaron
parent
8628a6beab
commit
e94baa8630
@ -58,7 +58,7 @@
|
||||
v-model:visible="addModalVisible"
|
||||
title="添加商家"
|
||||
:confirmLoading="confirmLoading"
|
||||
width="800px"
|
||||
width="1000px"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<template #footer>
|
||||
@ -74,113 +74,121 @@
|
||||
ref="formRef"
|
||||
:model="formState"
|
||||
:rules="rules"
|
||||
:label-col="{ span: 6 }"
|
||||
:wrapper-col="{ span: 16 }"
|
||||
layout="vertical"
|
||||
>
|
||||
<a-form-item label="品牌图片" name="brand_image_url" required>
|
||||
<div class="upload-wrapper">
|
||||
<a-upload
|
||||
v-model:fileList="brandImageList"
|
||||
:customRequest="handleBrandImageUpload"
|
||||
list-type="picture-card"
|
||||
:maxCount="1"
|
||||
@preview="handlePreview"
|
||||
@remove="handleBrandImageRemove"
|
||||
accept=".jpg,.jpeg,.png"
|
||||
>
|
||||
<div v-if="!formState.brand_image_url">
|
||||
<plus-outlined />
|
||||
<div style="margin-top: 8px">上传图片</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
<div class="upload-tip">建议尺寸：200x200px，支持jpg、png格式</div>
|
||||
</a-form-item>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<div class="form-left-column">
|
||||
<a-form-item label="品牌图片" name="brand_image_url" required>
|
||||
<div class="upload-wrapper">
|
||||
<a-upload
|
||||
v-model:fileList="brandImageList"
|
||||
:customRequest="handleBrandImageUpload"
|
||||
list-type="picture-card"
|
||||
:maxCount="1"
|
||||
@preview="handlePreview"
|
||||
@remove="handleBrandImageRemove"
|
||||
accept=".jpg,.jpeg,.png"
|
||||
>
|
||||
<div v-if="!formState.brand_image_url">
|
||||
<plus-outlined />
|
||||
<div style="margin-top: 8px">上传图片</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
<div class="upload-tip">建议尺寸：200x200px，支持jpg、png格式</div>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="选择用户" name="user_id" required>
|
||||
<a-select
|
||||
v-model:value="formState.user_id"
|
||||
placeholder="请选择用户"
|
||||
:loading="userLoading"
|
||||
:filter-option="false"
|
||||
:show-search="true"
|
||||
@search="handleUserSearch"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="user in userOptions"
|
||||
:key="user.userid"
|
||||
:value="user.userid"
|
||||
>
|
||||
{{ user.phone }} ({{ user.nickname || '未设置昵称' }})
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="选择用户" name="user_id" required>
|
||||
<a-select
|
||||
v-model:value="formState.user_id"
|
||||
placeholder="请选择用户"
|
||||
:loading="userLoading"
|
||||
:filter-option="false"
|
||||
:show-search="true"
|
||||
@search="handleUserSearch"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="user in userOptions"
|
||||
:key="user.userid"
|
||||
:value="user.userid"
|
||||
>
|
||||
{{ user.phone }} ({{ user.nickname || '未设置昵称' }})
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="商家分类" name="category_id" required>
|
||||
<a-select
|
||||
v-model:value="formState.category_id"
|
||||
placeholder="请选择商家分类"
|
||||
:options="categories.map(item => ({
|
||||
value: item.id,
|
||||
label: item.name
|
||||
}))"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="商家分类" name="category_id" required>
|
||||
<a-select
|
||||
v-model:value="formState.category_id"
|
||||
placeholder="请选择商家分类"
|
||||
:options="categories.map(item => ({
|
||||
value: item.id,
|
||||
label: item.name
|
||||
}))"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="商家名称" name="name" required>
|
||||
<a-input v-model:value="formState.name" placeholder="请输入商家名称" />
|
||||
</a-form-item>
|
||||
<a-form-item label="商家名称" name="name" required>
|
||||
<a-input v-model:value="formState.name" placeholder="请输入商家名称" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="营业时间" name="business_hours" required>
|
||||
<a-input v-model:value="formState.business_hours" placeholder="例如：10:30~20:30" />
|
||||
</a-form-item>
|
||||
<a-form-item label="营业时间" name="business_hours" required>
|
||||
<a-input v-model:value="formState.business_hours" placeholder="例如：10:30~20:30" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="联系电话" name="phone" required>
|
||||
<a-input v-model:value="formState.phone" placeholder="请输入联系电话" />
|
||||
</a-form-item>
|
||||
<a-form-item label="联系电话" name="phone" required>
|
||||
<a-input v-model:value="formState.phone" placeholder="请输入联系电话" />
|
||||
</a-form-item>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="form-right-column">
|
||||
<a-form-item label="地址搜索">
|
||||
<a-auto-complete
|
||||
v-model:value="searchAddress"
|
||||
:options="searchOptions"
|
||||
placeholder="输入地址搜索"
|
||||
@change="handleSearch"
|
||||
@select="handleSelect"
|
||||
:loading="searchLoading"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="地址搜索">
|
||||
<a-auto-complete
|
||||
v-model:value="searchAddress"
|
||||
:options="searchOptions"
|
||||
placeholder="输入地址搜索"
|
||||
@change="handleSearch"
|
||||
@select="handleSelect"
|
||||
:loading="searchLoading"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="地图选点" required>
|
||||
<div class="map-container">
|
||||
<div id="add-map-container" style="height: 300px;"></div>
|
||||
</div>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="地图选点" required>
|
||||
<div class="map-container">
|
||||
<div id="add-map-container" style="height: 300px;"></div>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="详细地址" name="address" required>
|
||||
<a-input v-model:value="formState.address" placeholder="请输入详细地址" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="详细地址" name="address" required>
|
||||
<a-input v-model:value="formState.address" placeholder="请输入详细地址" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="经纬度" required>
|
||||
<a-input-group compact>
|
||||
<a-input-number
|
||||
v-model:value="formState.longitude"
|
||||
:min="-180"
|
||||
:max="180"
|
||||
style="width: calc(100% - 8px); margin-right: 16px"
|
||||
placeholder="经度"
|
||||
disabled
|
||||
/>
|
||||
<a-input-number
|
||||
v-model:value="formState.latitude"
|
||||
:min="-90"
|
||||
:max="90"
|
||||
style="width: calc(100% - 8px)"
|
||||
placeholder="纬度"
|
||||
disabled
|
||||
/>
|
||||
</a-input-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="经纬度" required>
|
||||
<a-input-group compact>
|
||||
<a-input-number
|
||||
v-model:value="formState.longitude"
|
||||
:min="-180"
|
||||
:max="180"
|
||||
style="width: calc(100% - 8px); margin-right: 16px"
|
||||
placeholder="经度"
|
||||
disabled
|
||||
/>
|
||||
<a-input-number
|
||||
v-model:value="formState.latitude"
|
||||
:min="-90"
|
||||
:max="90"
|
||||
style="width: calc(100% - 8px)"
|
||||
placeholder="纬度"
|
||||
disabled
|
||||
/>
|
||||
</a-input-group>
|
||||
</a-form-item>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
@ -202,7 +210,7 @@
|
||||
v-model:visible="editModalVisible"
|
||||
title="修改商家"
|
||||
:confirmLoading="editLoading"
|
||||
width="800px"
|
||||
width="1000px"
|
||||
@cancel="handleEditCancel"
|
||||
>
|
||||
<template #footer>
|
||||
@ -218,113 +226,121 @@
|
||||
ref="editFormRef"
|
||||
:model="editFormState"
|
||||
:rules="rules"
|
||||
:label-col="{ span: 6 }"
|
||||
:wrapper-col="{ span: 16 }"
|
||||
layout="vertical"
|
||||
>
|
||||
<a-form-item label="品牌图片" name="brand_image_url" required>
|
||||
<div class="upload-wrapper">
|
||||
<a-upload
|
||||
v-model:fileList="editBrandImageList"
|
||||
:customRequest="handleBrandImageUpload"
|
||||
list-type="picture-card"
|
||||
:maxCount="1"
|
||||
@preview="handlePreview"
|
||||
@remove="handleBrandImageRemove"
|
||||
accept=".jpg,.jpeg,.png"
|
||||
>
|
||||
<div v-if="!editFormState.brand_image_url">
|
||||
<plus-outlined />
|
||||
<div style="margin-top: 8px">上传图片</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
<div class="upload-tip">建议尺寸：200x200px，支持jpg、png格式</div>
|
||||
</a-form-item>
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<div class="form-left-column">
|
||||
<a-form-item label="品牌图片" name="brand_image_url" required>
|
||||
<div class="upload-wrapper">
|
||||
<a-upload
|
||||
v-model:fileList="editBrandImageList"
|
||||
:customRequest="handleBrandImageUpload"
|
||||
list-type="picture-card"
|
||||
:maxCount="1"
|
||||
@preview="handlePreview"
|
||||
@remove="handleBrandImageRemove"
|
||||
accept=".jpg,.jpeg,.png"
|
||||
>
|
||||
<div v-if="!editFormState.brand_image_url">
|
||||
<plus-outlined />
|
||||
<div style="margin-top: 8px">上传图片</div>
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
<div class="upload-tip">建议尺寸：200x200px，支持jpg、png格式</div>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="选择用户" name="user_id" required>
|
||||
<a-select
|
||||
v-model:value="editFormState.user_id"
|
||||
placeholder="请选择用户"
|
||||
:loading="userLoading"
|
||||
:filter-option="false"
|
||||
:show-search="true"
|
||||
@search="handleUserSearch"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="user in userOptions"
|
||||
:key="user.userid"
|
||||
:value="user.userid"
|
||||
>
|
||||
{{ user.phone }} ({{ user.nickname || '未设置昵称' }})
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="选择用户" name="user_id" required>
|
||||
<a-select
|
||||
v-model:value="editFormState.user_id"
|
||||
placeholder="请选择用户"
|
||||
:loading="userLoading"
|
||||
:filter-option="false"
|
||||
:show-search="true"
|
||||
@search="handleUserSearch"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="user in userOptions"
|
||||
:key="user.userid"
|
||||
:value="user.userid"
|
||||
>
|
||||
{{ user.phone }} ({{ user.nickname || '未设置昵称' }})
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="商家分类" name="category_id" required>
|
||||
<a-select
|
||||
v-model:value="editFormState.category_id"
|
||||
placeholder="请选择商家分类"
|
||||
:options="categories.map(item => ({
|
||||
value: item.id,
|
||||
label: item.name
|
||||
}))"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="商家分类" name="category_id" required>
|
||||
<a-select
|
||||
v-model:value="editFormState.category_id"
|
||||
placeholder="请选择商家分类"
|
||||
:options="categories.map(item => ({
|
||||
value: item.id,
|
||||
label: item.name
|
||||
}))"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="商家名称" name="name" required>
|
||||
<a-input v-model:value="editFormState.name" placeholder="请输入商家名称" />
|
||||
</a-form-item>
|
||||
<a-form-item label="商家名称" name="name" required>
|
||||
<a-input v-model:value="editFormState.name" placeholder="请输入商家名称" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="营业时间" name="business_hours" required>
|
||||
<a-input v-model:value="editFormState.business_hours" placeholder="例如：10:30~20:30" />
|
||||
</a-form-item>
|
||||
<a-form-item label="营业时间" name="business_hours" required>
|
||||
<a-input v-model:value="editFormState.business_hours" placeholder="例如：10:30~20:30" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="联系电话" name="phone" required>
|
||||
<a-input v-model:value="editFormState.phone" placeholder="请输入联系电话" />
|
||||
</a-form-item>
|
||||
<a-form-item label="联系电话" name="phone" required>
|
||||
<a-input v-model:value="editFormState.phone" placeholder="请输入联系电话" />
|
||||
</a-form-item>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="form-right-column">
|
||||
<a-form-item label="地址搜索">
|
||||
<a-auto-complete
|
||||
v-model:value="editSearchAddress"
|
||||
:options="searchOptions"
|
||||
placeholder="输入地址搜索"
|
||||
@change="handleSearch"
|
||||
@select="handleEditSelect"
|
||||
:loading="searchLoading"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="地址搜索">
|
||||
<a-auto-complete
|
||||
v-model:value="editSearchAddress"
|
||||
:options="searchOptions"
|
||||
placeholder="输入地址搜索"
|
||||
@change="handleSearch"
|
||||
@select="handleEditSelect"
|
||||
:loading="searchLoading"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="地图选点" required>
|
||||
<div class="map-container">
|
||||
<div id="edit-map-container" style="height: 300px;"></div>
|
||||
</div>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="地图选点" required>
|
||||
<div class="map-container">
|
||||
<div id="edit-map-container" style="height: 300px;"></div>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="详细地址" name="address" required>
|
||||
<a-input v-model:value="editFormState.address" placeholder="请输入详细地址" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="详细地址" name="address" required>
|
||||
<a-input v-model:value="editFormState.address" placeholder="请输入详细地址" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="经纬度" required>
|
||||
<a-input-group compact>
|
||||
<a-input-number
|
||||
v-model:value="editFormState.longitude"
|
||||
:min="-180"
|
||||
:max="180"
|
||||
style="width: calc(100% - 8px); margin-right: 16px"
|
||||
placeholder="经度"
|
||||
disabled
|
||||
/>
|
||||
<a-input-number
|
||||
v-model:value="editFormState.latitude"
|
||||
:min="-90"
|
||||
:max="90"
|
||||
style="width: calc(100% - 8px)"
|
||||
placeholder="纬度"
|
||||
disabled
|
||||
/>
|
||||
</a-input-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="经纬度" required>
|
||||
<a-input-group compact>
|
||||
<a-input-number
|
||||
v-model:value="editFormState.longitude"
|
||||
:min="-180"
|
||||
:max="180"
|
||||
style="width: calc(100% - 8px); margin-right: 16px"
|
||||
placeholder="经度"
|
||||
disabled
|
||||
/>
|
||||
<a-input-number
|
||||
v-model:value="editFormState.latitude"
|
||||
:min="-90"
|
||||
:max="90"
|
||||
style="width: calc(100% - 8px)"
|
||||
placeholder="纬度"
|
||||
disabled
|
||||
/>
|
||||
</a-input-group>
|
||||
</a-form-item>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
@ -1481,4 +1497,34 @@ export default defineComponent({
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-left-column,
|
||||
.form-right-column {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.form-left-column {
|
||||
border-right: 1px dashed #f0f0f0;
|
||||
}
|
||||
|
||||
.form-right-column {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:deep(.ant-form-item) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
:deep(.ant-row-form) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
:deep(.ant-input),
|
||||
:deep(.ant-select),
|
||||
:deep(.ant-input-number),
|
||||
:deep(.ant-picker),
|
||||
:deep(.ant-auto-complete) {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user