|
|
|
|
@ -18,146 +18,222 @@ const emit = defineEmits(['closed', 'onSuccess'])
|
|
|
|
|
|
|
|
|
|
const dialogVisible = ref(false)
|
|
|
|
|
|
|
|
|
|
const isAdd = computed(() => props.type === 'add')
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
dialogVisible.value = true
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const formRef = ref(null)
|
|
|
|
|
const formField = ref({})
|
|
|
|
|
const formRules = reactive({
|
|
|
|
|
store_name: [{ required: true, message: '不可为空', trigger: 'change' }],
|
|
|
|
|
latitude: [{ required: true, message: '不可为空', trigger: 'change' }],
|
|
|
|
|
longitude: [{ required: true, message: '不可为空', trigger: 'change' }],
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const loading = ref(false)
|
|
|
|
|
const showMapSelector = ref(false)
|
|
|
|
|
const loading = ref(true)
|
|
|
|
|
|
|
|
|
|
function closed() {
|
|
|
|
|
emit('closed')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const submitForm = async () => {
|
|
|
|
|
await formRef.value.validate()
|
|
|
|
|
const params = { store: { ...formField.value }, category_ids: formField.value.category_ids }
|
|
|
|
|
RPC.post('/store/create', params)
|
|
|
|
|
}
|
|
|
|
|
const store = ref({})
|
|
|
|
|
const categories = ref([])
|
|
|
|
|
|
|
|
|
|
if (!isAdd.value) {
|
|
|
|
|
formField.value = props.row
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const chooseCoordinates = () => {
|
|
|
|
|
showMapSelector.value = true
|
|
|
|
|
RPC.post('/store/detail', { id: props.row.id })
|
|
|
|
|
.then((res) => {
|
|
|
|
|
console.log(res)
|
|
|
|
|
store.value = res.store || {}
|
|
|
|
|
categories.value =
|
|
|
|
|
res.categories?.map((item) => {
|
|
|
|
|
return {
|
|
|
|
|
...item,
|
|
|
|
|
images: item.images ? JSON.parse(item.images) : [],
|
|
|
|
|
}
|
|
|
|
|
}) || []
|
|
|
|
|
})
|
|
|
|
|
.finally(() => {
|
|
|
|
|
loading.value = false
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
RPC.post('/store/detail', { id: props.row.id })
|
|
|
|
|
const activeTab = ref(0)
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<el-dialog
|
|
|
|
|
align-center
|
|
|
|
|
:title="isAdd ? '新增' : '修改'"
|
|
|
|
|
title="详情"
|
|
|
|
|
width="80%"
|
|
|
|
|
v-model="dialogVisible"
|
|
|
|
|
@closed="closed"
|
|
|
|
|
:close-on-click-modal="false"
|
|
|
|
|
>
|
|
|
|
|
<el-form
|
|
|
|
|
ref="formRef"
|
|
|
|
|
label-position="right"
|
|
|
|
|
label-suffix=":"
|
|
|
|
|
:model="formField"
|
|
|
|
|
:rules="formRules"
|
|
|
|
|
v-loading="loading"
|
|
|
|
|
label-width="100"
|
|
|
|
|
>
|
|
|
|
|
<el-form-item prop="store_name" label="门店名称">
|
|
|
|
|
<el-input placeholder="请输入" v-model="formField.store_name" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item prop="address" label="详细地址">
|
|
|
|
|
<el-input placeholder="请输入" v-model="formField.address" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item prop="location" label="地址">
|
|
|
|
|
<el-input placeholder="请输入" v-model="formField.location" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item prop="business_hours" label="工作时间">
|
|
|
|
|
<el-input placeholder="请输入" v-model="formField.business_hours" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item prop="contact_phone" label="联系电话">
|
|
|
|
|
<el-input placeholder="请输入" v-model="formField.contact_phone" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item prop="tags" label="分类标签">
|
|
|
|
|
<el-input placeholder="请输入,多个以,分隔" v-model="formField.tags" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item prop="category_ids" label="分类">
|
|
|
|
|
<el-select
|
|
|
|
|
clearable
|
|
|
|
|
default-first-option
|
|
|
|
|
filterable
|
|
|
|
|
multiple
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
v-model="formField.category_ids"
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in categoryList"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
:label="item.name"
|
|
|
|
|
:value="item.id"
|
|
|
|
|
<div v-loading="loading">
|
|
|
|
|
<div class="title">基本信息</div>
|
|
|
|
|
<div class="storeBox">
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="key">门店名称</div>
|
|
|
|
|
<div class="value">{{ store.store_name }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="key">地址详情</div>
|
|
|
|
|
<div class="value">{{ store.address }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="key">地区</div>
|
|
|
|
|
<div class="value">{{ store.location }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="key">工作时间</div>
|
|
|
|
|
<div class="value">{{ store.business_hours }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="key">联系电话</div>
|
|
|
|
|
<div class="value">{{ store.contact_phone }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="key">分类标签</div>
|
|
|
|
|
<div class="value">{{ store.tags }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="key">门店主图</div>
|
|
|
|
|
<div class="value">
|
|
|
|
|
<div class="main_image_box" v-if="store.main_image">
|
|
|
|
|
<el-image
|
|
|
|
|
ref="imageRef"
|
|
|
|
|
style="width: 100%; height: 100%"
|
|
|
|
|
:src="store.main_image"
|
|
|
|
|
show-progress
|
|
|
|
|
:preview-src-list="[store.main_image]"
|
|
|
|
|
fit="cover"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item prop="main_image" label="门店主图">
|
|
|
|
|
<img
|
|
|
|
|
:src="formField.main_image"
|
|
|
|
|
<!-- <img :src="store.main_image" alt="" /> -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="key">经度</div>
|
|
|
|
|
<div class="value">{{ store.longitude }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="key">纬度</div>
|
|
|
|
|
<div class="value">{{ store.latitude }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="title">分类信息</div>
|
|
|
|
|
<div class="categoriesBox" v-if="categories.length > 0">
|
|
|
|
|
<div class="tabBox">
|
|
|
|
|
<div
|
|
|
|
|
class="tabItem"
|
|
|
|
|
:class="{ selected: activeTab === index }"
|
|
|
|
|
v-for="(item, index) in categories"
|
|
|
|
|
@click="activeTab = index"
|
|
|
|
|
>
|
|
|
|
|
{{ item.name }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="line">
|
|
|
|
|
<div class="key">视频</div>
|
|
|
|
|
<div class="value">
|
|
|
|
|
<video
|
|
|
|
|
controls
|
|
|
|
|
muted
|
|
|
|
|
:src="categories[activeTab]?.video"
|
|
|
|
|
alt=""
|
|
|
|
|
class="main_image_box"
|
|
|
|
|
v-if="formField.main_image"
|
|
|
|
|
/>
|
|
|
|
|
<UploadFile v-else @on-success="set_main_image"></UploadFile>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item prop="longitude" label="经度">
|
|
|
|
|
<el-input-number
|
|
|
|
|
style="width: 200px"
|
|
|
|
|
:controls="false"
|
|
|
|
|
placeholder="请输入"
|
|
|
|
|
v-model="formField.longitude"
|
|
|
|
|
class="video_box"
|
|
|
|
|
v-if="categories[activeTab]?.video"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item prop="latitude" label="纬度">
|
|
|
|
|
<el-input-number
|
|
|
|
|
style="width: 200px"
|
|
|
|
|
:controls="false"
|
|
|
|
|
placeholder="请输入"
|
|
|
|
|
v-model="formField.latitude"
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="line">
|
|
|
|
|
<div class="key">图片</div>
|
|
|
|
|
<div class="value">
|
|
|
|
|
<div class="imgBox" v-for="item in categories[activeTab]?.images" :key="item">
|
|
|
|
|
<el-image
|
|
|
|
|
ref="imageRef"
|
|
|
|
|
style="width: 100%; height: 100%"
|
|
|
|
|
:src="item"
|
|
|
|
|
show-progress
|
|
|
|
|
:preview-src-list="[item]"
|
|
|
|
|
fit="cover"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item prop="" label="">
|
|
|
|
|
<el-button type="primary" @click="chooseCoordinates">选择坐标</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<template #footer>
|
|
|
|
|
<div class="dialog-footer">
|
|
|
|
|
<el-button @click="closed"> 取 消 </el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
|
|
<!-- 地图坐标选择器 -->
|
|
|
|
|
<MapSelector
|
|
|
|
|
v-model="showMapSelector"
|
|
|
|
|
:longitude="formField.longitude"
|
|
|
|
|
:latitude="formField.latitude"
|
|
|
|
|
@confirm="handleCoordinateConfirm"
|
|
|
|
|
/>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.main_image_box {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100px;
|
|
|
|
|
img {
|
|
|
|
|
width: auto;
|
|
|
|
|
height: auto;
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
max-height: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.title {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
.storeBox {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
.item {
|
|
|
|
|
width: 32%;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
.key {
|
|
|
|
|
width: 70px;
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.categoriesBox {
|
|
|
|
|
.tabBox {
|
|
|
|
|
display: flex;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.tabItem {
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
padding: 5px 10px;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
&.selected {
|
|
|
|
|
color: #006eff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.line {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
.key {
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
width: 60px;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
}
|
|
|
|
|
.value {
|
|
|
|
|
flex: 1;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
.video_box {
|
|
|
|
|
width: 370px;
|
|
|
|
|
height: 130px;
|
|
|
|
|
}
|
|
|
|
|
.imgBox {
|
|
|
|
|
width: 100px;
|
|
|
|
|
height: 100px;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
