You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
321 lines
7.5 KiB
321 lines
7.5 KiB
<script setup>
|
|
import RPC from '@/utils/rpc'
|
|
import MapSelector from '@/components/MapSelector.vue'
|
|
import UploadFile from '@/components/UploadFile.vue'
|
|
const props = defineProps({
|
|
type: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
row: [Object],
|
|
categoryList: {
|
|
type: Array,
|
|
default: [],
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(['closed', 'onSuccess'])
|
|
|
|
const dialogVisible = ref(false)
|
|
|
|
onMounted(() => {
|
|
dialogVisible.value = true
|
|
})
|
|
|
|
const loading = ref(true)
|
|
|
|
function closed() {
|
|
emit('closed')
|
|
}
|
|
|
|
const store = ref({})
|
|
const categories = ref([])
|
|
|
|
const product_images_list = ref([])
|
|
const qualification_images_list = ref([])
|
|
const product_pdfs_list = ref([])
|
|
|
|
RPC.post('/store/detail', { id: props.row.id })
|
|
.then((res) => {
|
|
console.log(res)
|
|
store.value = res.store || {}
|
|
product_images_list.value = res?.store?.product_images
|
|
? res?.store?.product_images.split(',')
|
|
: []
|
|
qualification_images_list.value = res?.store?.qualification_images
|
|
? res?.store?.qualification_images.split(',')
|
|
: []
|
|
product_pdfs_list.value = res?.store?.product_pdfs ? JSON.parse(res?.store?.product_pdfs) : []
|
|
// categories.value =
|
|
// res.categories?.map((item) => {
|
|
// return {
|
|
// ...item,
|
|
// images: item.images ? JSON.parse(item.images) : [],
|
|
// }
|
|
// }) || []
|
|
})
|
|
.finally(() => {
|
|
loading.value = false
|
|
})
|
|
|
|
const openPdf = (item) => {
|
|
if (item.url) {
|
|
window.open(item.url)
|
|
}
|
|
}
|
|
|
|
const activeTab = ref(0)
|
|
</script>
|
|
|
|
<template>
|
|
<el-dialog
|
|
align-center
|
|
title="详情"
|
|
width="80%"
|
|
v-model="dialogVisible"
|
|
@closed="closed"
|
|
:close-on-click-modal="false"
|
|
>
|
|
<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"
|
|
/>
|
|
<!-- <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="categoriesBox">
|
|
<div class="line" v-if="store.video_intro">
|
|
<div class="key">视频</div>
|
|
<div class="value">
|
|
<video
|
|
controls
|
|
muted
|
|
:src="store.video_intro"
|
|
alt=""
|
|
class="video_box"
|
|
v-if="store.video_intro"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="line">
|
|
<div class="key">产品图片</div>
|
|
<div class="value">
|
|
<div class="imgBox" v-for="item in product_images_list" :key="item">
|
|
<el-image
|
|
ref="imageRef"
|
|
style="width: 100%; height: 100%"
|
|
:src="item"
|
|
show-progress
|
|
:preview-src-list="[item]"
|
|
fit="cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="line">
|
|
<div class="key">企业资质</div>
|
|
<div class="value">
|
|
<div class="imgBox" v-for="item in qualification_images_list" :key="item">
|
|
<el-image
|
|
ref="imageRef"
|
|
style="width: 100%; height: 100%"
|
|
:src="item"
|
|
show-progress
|
|
:preview-src-list="[item]"
|
|
fit="cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="line">
|
|
<div class="key">产品资料</div>
|
|
<div class="value">
|
|
<div
|
|
class="pdfBox"
|
|
v-for="item in product_pdfs_list"
|
|
@click="openPdf(item)"
|
|
:key="item"
|
|
>
|
|
<div class="pdf_item">
|
|
<el-icon size="40"><Document /></el-icon>
|
|
<div class="name">{{ item.name }}</div>
|
|
<div class="info">
|
|
<div class="size">{{ item.size }}MB</div>
|
|
<div class="date">{{ item.date }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button @click="closed"> 取 消 </el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.pdfBox {
|
|
width: 200px;
|
|
height: 100px;
|
|
margin-right: 10px;
|
|
margin-bottom: 10px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
.closeBox {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.pdf_item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 99%;
|
|
border-radius: 10px;
|
|
padding: 0 10px;
|
|
box-sizing: border-box;
|
|
border: 1px solid #ccc;
|
|
cursor: pointer;
|
|
.name {
|
|
font-weight: 700;
|
|
}
|
|
.info {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
color: #999;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
</style>
|