339 lines
9.0 KiB
Vue
339 lines
9.0 KiB
Vue
|
<template>
|
||
|
|
<div class="store-detail">
|
||
|
|
<!-- 上半部分 -->
|
||
|
|
<el-row :gutter="20" class="top-section">
|
||
|
|
<!-- 左侧信息 -->
|
||
|
|
<el-col :span="24" class="left-section">
|
||
|
|
<el-card class="info-card" shadow="always">
|
||
|
|
<div slot="header" class="card-header">
|
||
|
|
<span>基本信息</span>
|
||
|
|
</div>
|
||
|
|
<el-row :gutter="20">
|
||
|
|
<el-col :span="2">
|
||
|
|
<div class="store-image">
|
||
|
|
<image-preview
|
||
|
|
:src="storeData.picture"
|
||
|
|
:width="80"
|
||
|
|
:height="80"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="6">
|
||
|
|
<div class="info-item">
|
||
|
|
<span class="label">店铺名称:</span>
|
||
|
|
<span class="value">{{ storeData.name || '--' }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="info-item">
|
||
|
|
<span class="label">联系人:</span>
|
||
|
|
<span class="value">{{ storeData.contactName || '--' }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="info-item">
|
||
|
|
<span class="label">联系电话:</span>
|
||
|
|
<span class="value">{{ storeData.contactMobile || '--' }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="info-item">
|
||
|
|
<span class="label">营业时间:</span>
|
||
|
|
<span class="value">{{ formatBusinessTime(storeData.businessTimeStart, storeData.businessTimeEnd) }}</span>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="6">
|
||
|
|
<div class="info-item">
|
||
|
|
<span class="label">店长:</span>
|
||
|
|
<span class="value">{{ storeData.managerName || '--' }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="info-item">
|
||
|
|
<span class="label">客服电话:</span>
|
||
|
|
<span class="value">{{ storeData.serverPhone || '--' }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="info-item">
|
||
|
|
<span class="label">身份证号:</span>
|
||
|
|
<span class="value">{{ storeData.idcard || '--' }}</span>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="6">
|
||
|
|
<div class="info-item">
|
||
|
|
<span class="label">状态:</span>
|
||
|
|
<dict-tag :options="dict.type.ss_store_status" :value="storeData.status"/>
|
||
|
|
</div>
|
||
|
|
<div class="info-item">
|
||
|
|
<span class="label">标签:</span>
|
||
|
|
<dict-tag :options="dict.type.ss_store_tags" :value="storeData.tags"/>
|
||
|
|
</div>
|
||
|
|
<div class="info-item">
|
||
|
|
<span class="label">类型:</span>
|
||
|
|
<dict-tag :options="dict.type.ss_room_type" :value="storeData.typeTags"/>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</el-card>
|
||
|
|
|
||
|
|
<el-card class="info-card" shadow="always">
|
||
|
|
<div slot="header" class="card-header">
|
||
|
|
<span>位置信息</span>
|
||
|
|
</div>
|
||
|
|
<el-row :gutter="20">
|
||
|
|
<el-col :span="20">
|
||
|
|
<div class="info-item">
|
||
|
|
<span class="label">门店地址:</span>
|
||
|
|
<el-link
|
||
|
|
type="primary"
|
||
|
|
@click="openMap(storeData.lng, storeData.lat)"
|
||
|
|
v-if="storeData.lng && storeData.lat"
|
||
|
|
>
|
||
|
|
{{ storeData.address || '--' }}
|
||
|
|
</el-link>
|
||
|
|
<span v-else>{{ storeData.address || '--' }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="info-item">
|
||
|
|
<span class="label">经度:</span>
|
||
|
|
<span class="value">{{ storeData.lng || '--' }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="info-item">
|
||
|
|
<span class="label">纬度:</span>
|
||
|
|
<span class="value">{{ storeData.lat || '--' }}</span>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="4">
|
||
|
|
<div slot="header" class="card-header">
|
||
|
|
<span>店铺位置</span>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</el-card>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
|
||
|
|
<!-- 下半部分 - 选项卡 -->
|
||
|
|
<el-card class="tab-card">
|
||
|
|
<el-tabs v-model="activeTab">
|
||
|
|
<el-tab-pane label="房间列表" name="rooms">
|
||
|
|
<!-- 房间列表内容 -->
|
||
|
|
</el-tab-pane>
|
||
|
|
<el-tab-pane label="设施列表" name="equipments">
|
||
|
|
<!-- 设施列表内容 -->
|
||
|
|
</el-tab-pane>
|
||
|
|
<el-tab-pane label="设备列表" name="equipments">
|
||
|
|
<!-- 设备列表内容 -->
|
||
|
|
</el-tab-pane>
|
||
|
|
<el-tab-pane label="员工列表" name="equipments">
|
||
|
|
<!-- 员工列表内容 -->
|
||
|
|
</el-tab-pane>
|
||
|
|
<el-tab-pane label="订单列表" name="orders">
|
||
|
|
<!-- 订单列表内容 -->
|
||
|
|
</el-tab-pane>
|
||
|
|
</el-tabs>
|
||
|
|
</el-card>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { getStore, delStore } from "@/api/system/store";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'StoreDetail',
|
||
|
|
dicts: ['ss_store_status', 'ss_store_tags', 'ss_room_type'],
|
||
|
|
directives: {
|
||
|
|
hasPermi: ['system:store:query']
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
storeData: {},
|
||
|
|
activeTab: 'rooms',
|
||
|
|
map: null,
|
||
|
|
marker: null
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
const storeId = this.$route.params.storeId;
|
||
|
|
this.getStoreData(storeId);
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
// 在组件挂载后初始化地图
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.initMap();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getStoreData(storeId) {
|
||
|
|
getStore(storeId).then(response => {
|
||
|
|
this.storeData = response.data;
|
||
|
|
// 数据加载完成后更新地图标记
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.updateMapMarker();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
formatBusinessTime(start, end) {
|
||
|
|
if (!start && !end) return '--';
|
||
|
|
return `${start || '--'} - ${end || '--'}`;
|
||
|
|
},
|
||
|
|
openMap(lng, lat) {
|
||
|
|
if (!lng || !lat) return;
|
||
|
|
window.open(`https://uri.amap.com/marker?position=${lng},${lat}&callnative=1`);
|
||
|
|
},
|
||
|
|
handleEdit() {
|
||
|
|
this.$router.push(`/system/store/index?storeId=${this.storeData.storeId}`);
|
||
|
|
},
|
||
|
|
handleDelete() {
|
||
|
|
this.$modal.confirm('是否确认删除该店铺？').then(() => {
|
||
|
|
return delStore(this.storeData.storeId);
|
||
|
|
}).then(() => {
|
||
|
|
this.$modal.msgSuccess("删除成功");
|
||
|
|
this.$router.push('/system/store/index');
|
||
|
|
}).catch(() => {});
|
||
|
|
},
|
||
|
|
// 初始化地图
|
||
|
|
initMap() {
|
||
|
|
// 创建地图实例
|
||
|
|
this.map = new AMap.Map('mapContainer', {
|
||
|
|
zoom: 15,
|
||
|
|
viewMode: '3D'
|
||
|
|
});
|
||
|
|
|
||
|
|
// 添加地图控件
|
||
|
|
this.map.addControl(new AMap.ToolBar());
|
||
|
|
this.map.addControl(new AMap.Scale());
|
||
|
|
},
|
||
|
|
// 更新地图标记
|
||
|
|
updateMapMarker() {
|
||
|
|
const { lng, lat } = this.storeData;
|
||
|
|
if (!lng || !lat) return;
|
||
|
|
|
||
|
|
// 设置地图中心点
|
||
|
|
this.map.setCenter([lng, lat]);
|
||
|
|
|
||
|
|
// 清除旧的标记
|
||
|
|
if (this.marker) {
|
||
|
|
this.map.remove(this.marker);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 创建新的标记
|
||
|
|
this.marker = new AMap.Marker({
|
||
|
|
position: new AMap.LngLat(lng, lat),
|
||
|
|
title: this.storeData.name,
|
||
|
|
animation: 'AMAP_ANIMATION_DROP'
|
||
|
|
});
|
||
|
|
|
||
|
|
// 添加标记到地图
|
||
|
|
this.map.add(this.marker);
|
||
|
|
|
||
|
|
// 创建信息窗体
|
||
|
|
const infoWindow = new AMap.InfoWindow({
|
||
|
|
content: `
|
||
|
|
<div class="info-window">
|
||
|
|
<h4>${this.storeData.name || '未命名店铺'}</h4>
|
||
|
|
<p>${this.storeData.address || '暂无地址'}</p>
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
offset: new AMap.Pixel(0, -30)
|
||
|
|
});
|
||
|
|
|
||
|
|
// 绑定点击事件
|
||
|
|
this.marker.on('click', () => {
|
||
|
|
infoWindow.open(this.map, this.marker.getPosition());
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.store-detail {
|
||
|
|
padding: 20px;
|
||
|
|
|
||
|
|
.top-section {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.info-card {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
|
||
|
|
.card-header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
font-size: 14px;
|
||
|
|
|
||
|
|
.action-buttons {
|
||
|
|
.el-button {
|
||
|
|
margin-left: 10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.info-item {
|
||
|
|
margin-bottom: 10px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.label {
|
||
|
|
color: #606266;
|
||
|
|
margin-right: 10px;
|
||
|
|
min-width: 100px;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.value {
|
||
|
|
color: #333;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.map-container {
|
||
|
|
width: 100%;
|
||
|
|
height: 300px;
|
||
|
|
border-radius: 4px;
|
||
|
|
overflow: hidden;
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.store-image {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
padding: 10px 0;
|
||
|
|
|
||
|
|
:deep(.el-image) {
|
||
|
|
border-radius: 4px;
|
||
|
|
overflow: hidden;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.tab-card {
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.map-card {
|
||
|
|
.map-container {
|
||
|
|
width: 100%;
|
||
|
|
height: 300px;
|
||
|
|
border-radius: 4px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 信息窗体样式
|
||
|
|
:deep(.info-window) {
|
||
|
|
padding: 8px;
|
||
|
|
|
||
|
|
h4 {
|
||
|
|
margin: 0 0 5px;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
p {
|
||
|
|
margin: 0;
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.el-tag) {
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
</style>
|