chuangte/share-space-vue
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

店铺详情

Browse Source
This commit is contained in:
tx 2025-01-07 17:45:22 +08:00
parent 32eaeea1f7
commit 3ac1a965ff
7 changed files with 562 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/system/device/device_detail.vue
View File

@ -820,7 +820,7 @@ export default {
.el-button {
margin: 0;
// padding: 0 10px;
padding: 20 10px;
flex: 1 1 45%;
}
}

5
src/views/system/device/index.vue
View File

@ -358,6 +358,10 @@ export default {
type: Number,
default: 26.94088
},
storeId: {
type: Number,
default: 0
},
},
data() {
return {
@ -616,6 +620,7 @@ export default {
},
getList() {
this.loading = true;
this.queryParams.storeId = this.storeId;
listDevice(this.queryParams).then(response => {
this.deviceList = response.rows;
this.total = response.total;

4
src/views/system/equipment/index.vue
View File

@ -27,7 +27,7 @@
/>
</el-select>
</el-form-item>
<el-form-item label="店铺名" prop="storeName">
<el-form-item label="店铺名" prop="storeName" v-if="!storeId">
<el-input
v-model="queryParams.storeName"
placeholder="请输入店铺名"
@ -328,6 +328,7 @@ export default {
name: "Equipment",
mixins: [$showColumns],
dicts: ['ss_equipment_type', 'ss_unlock_mode', 'ss_unlock_condition', 'ss_equipment_status', 'ss_room_tags'],
props: ['storeId'],
data() {
return {
// 字段列表
@ -417,6 +418,7 @@ export default {
/** 查询设施列表 */
getList() {
this.loading = true;
this.queryParams.storeId = this.storeId;
listEquipment(this.queryParams).then(response => {
this.equipmentList = response.rows
.filter(item => ['2', '3'].includes(item.type))

2
src/views/system/order/index.vue
View File

@ -265,6 +265,7 @@ const defaultSort = {
export default {
name: "Order",
mixins: [$showColumns],
props: ['storeId'],
dicts: ['ss_order_status', 'ss_pay_type', 'rl_distribution_mode', 'rl_rental_unit','ss_order_type','et_order_pay_status'],
data() {
return {
@ -384,6 +385,7 @@ export default {
/** 查询订单列表 */
getList() {
this.loading = true;
this.queryParams.storeId = this.storeId;
listOrder(this.queryParams).then(response => {
this.orderList = response.rows;
this.total = response.total;

4
src/views/system/room/index.vue
View File

@ -9,7 +9,7 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="店铺" prop="storeId">
<el-form-item label="店铺" prop="storeId" v-if="!storeId">
<el-select v-model="queryParams.storeId" clearable filterable placeholder="请选择">
<el-option
v-for="item in storeOptions"
@ -221,6 +221,7 @@ export default {
name: "Room",
mixins: [$showColumns],
dicts: ['ss_room_type', 'ss_room_status','ss_room_tags'],
props: ['storeId'],
data() {
return {
// 字段列表
@ -313,6 +314,7 @@ export default {
/** 查询房间列表 */
getList() {
this.loading = true;
this.queryParams.storeId = this.storeId;
listRoom(this.queryParams).then(response => {
this.roomList = response.rows;
this.total = response.total;

740
src/views/system/store/store_detail.vue
View File

@ -1,223 +1,443 @@
<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>
<!-- 基本信息卡片 -->
<el-card class="info-card" shadow="hover">
<div slot="header" class="card-header">
<div class="header-left">
<span class="title">店铺详情</span>
<el-tag size="small" :type="getStatusType(storeData.status)" class="status-tag">
<dict-tag :options="dict.type.ss_store_status" :value="storeData.status" />
</el-tag>
</div>
<div class="action-buttons">
<!-- <el-button type="primary" size="small" @click="handleEdit">编辑</el-button> -->
<el-button type="danger" size="small" @click="handleDelete">删除</el-button>
</div>
</div>
<el-row :gutter="20">
<el-col :span="2">
<div class="store-image">
<image-preview :src="storeData.picture" :width="80" :height="80" />
</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-col>
<el-col :span="7">
<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="7">
<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>
<div class="info-item">
<span class="label">地址:</span>
<span class="value">{{ storeData.address || '--' }}</span>
</div>
</el-col>
<el-col :span="8">
<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-row :gutter="20" class="stat-cards">
<!-- 今日收入 -->
<el-col :span="4">
<el-card shadow="hover" class="stat-card">
<div class="stat-icon income">
<i class="el-icon-money"></i>
</div>
<div class="stat-content">
<div class="stat-label">今日收入</div>
<div class="stat-value">¥ {{ stats.todayIncome || '0.00' }}</div>
</div>
</el-card>
</el-col>
<!-- 本月收入 -->
<el-col :span="4">
<el-card shadow="hover" class="stat-card">
<div class="stat-icon income-month">
<i class="el-icon-wallet"></i>
</div>
<div class="stat-content">
<div class="stat-label">本月收入</div>
<div class="stat-value">¥ {{ stats.monthIncome || '0.00' }}</div>
</div>
</el-card>
</el-col>
<!-- 总营收 -->
<el-col :span="4">
<el-card shadow="hover" class="stat-card">
<div class="stat-icon total-income">
<i class="el-icon-bank-card"></i>
</div>
<div class="stat-content">
<div class="stat-label">总营收</div>
<div class="stat-value">¥ {{ stats.totalIncome || '0.00' }}</div>
</div>
</el-card>
</el-col>
<!-- 总提现 -->
<el-col :span="4">
<el-card shadow="hover" class="stat-card">
<div class="stat-icon withdraw">
<i class="el-icon-wallet"></i>
</div>
<div class="stat-content">
<div class="stat-label">总提现</div>
<div class="stat-value">¥ {{ stats.totalWithdraw || '0.00' }}</div>
</div>
</el-card>
</el-col>
<!-- 房间统计 -->
<el-col :span="4">
<el-card shadow="hover" class="stat-card">
<div class="stat-icon room">
<i class="el-icon-office-building"></i>
</div>
<div class="stat-content">
<div class="stat-label">房间使用</div>
<div class="stat-numbers">
<span class="current">{{ stats.usedRooms || 0 }}</span>
<span class="divider">/</span>
<span class="total">{{ stats.totalRooms || 0 }}</span>
</div>
</div>
</el-card>
</el-col>
<!-- 设施统计 -->
<el-col :span="4">
<el-card shadow="hover" class="stat-card">
<div class="stat-icon facility">
<i class="el-icon-set-up"></i>
</div>
<div class="stat-content">
<div class="stat-label">设施使用</div>
<div class="stat-numbers">
<span class="current">{{ stats.usedFacilities || 0 }}</span>
<span class="divider">/</span>
<span class="total">{{ stats.totalFacilities || 0 }}</span>
</div>
<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>
<!-- 图表和地图区域 -->
<el-row :gutter="20" class="chart-section">
<el-col :span="16">
<el-card class="chart-card" shadow="hover">
<div slot="header" class="card-header">
<span class="title">收入趋势</span>
<el-radio-group v-model="chartTimeRange" size="small" @change="handleChartRangeChange">
<el-radio-button label="week">近7天</el-radio-button>
<el-radio-button label="month">近30天</el-radio-button>
</el-radio-group>
</div>
<div class="chart-container" ref="incomeChart"></div>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="map-card" shadow="hover">
<div slot="header" class="card-header">
<span class="title">店铺位置</span>
</div>
<div class="map-container" id="mapContainer"></div>
</el-card>
</el-col>
</el-row>
<el-tabs v-model="activeTab" class="detail-tabs">
<el-tab-pane label="订单列表" name="orders">
<order :storeId="storeId"></order>
</el-tab-pane>
<el-tab-pane label="房间列表" name="rooms">
<room :storeId="storeId"></room>
</el-tab-pane>
<el-tab-pane label="设施列表" name="equipments">
<equipment :storeId="storeId"></equipment>
</el-tab-pane>
<el-tab-pane label="设备列表" name="devices">
<device :storeId="storeId"></device>
</el-tab-pane>
<el-tab-pane label="员工列表" name="users">
<user :storeId="storeId"></user>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { getStore, delStore } from "@/api/system/store";
import * as echarts from 'echarts';
import AMapLoader from "@amap/amap-jsapi-loader";
import globalConfig from '@/utils/config/globalConfig';
import order from '@/views/system/order/index.vue';
import room from '@/views/system/room/index.vue';
import equipment from '@/views/system/equipment/index.vue';
import device from '@/views/system/device/index.vue';
import user from '@/views/user/user/index.vue';
export default {
name: 'StoreDetail',
dicts: ['ss_store_status', 'ss_store_tags', 'ss_room_type'],
directives: {
hasPermi: ['system:store:query']
components: {
order,
room,
equipment,
device,
user
},
data() {
return {
storeId: null,
storeData: {},
activeTab: 'rooms',
map: null,
marker: null
marker: null,
stats: {
todayIncome: 0,
monthIncome: 0,
totalIncome: 0,
totalWithdraw: 0,
totalRooms: 0,
usedRooms: 0,
totalFacilities: 0,
usedFacilities: 0
},
chartTimeRange: 'week',
incomeChart: null,
activeTab: 'orders',
}
},
created() {
const storeId = this.$route.params.storeId;
this.getStoreData(storeId);
this.storeId = this.$route.params.storeId;
this.getStoreData();
this.getStoreStats();
},
mounted() {
// 在组件挂载后初始化地图
this.$nextTick(() => {
this.initMap();
this.initChart();
});
},
beforeDestroy() {
if (this.incomeChart) {
this.incomeChart.dispose();
}
if (this.map) {
this.map.destroy();
}
window.removeEventListener('resize', this.resizeChart);
},
methods: {
getStoreData(storeId) {
getStore(storeId).then(response => {
getStatusType(status) {
const statusMap = {
0: 'info',
1: 'success',
2: 'danger'
};
return statusMap[status] || 'info';
},
initChart() {
if (!this.$refs.incomeChart) return;
this.incomeChart = echarts.init(this.$refs.incomeChart);
const option = {
tooltip: {
trigger: 'axis',
formatter: '{b}<br />{a}: ¥{c}'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
axisLine: {
lineStyle: {
color: '#DCDFE6'
}
}
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '¥{value}'
},
axisLine: {
show: false
},
splitLine: {
lineStyle: {
color: '#EBEEF5'
}
}
},
series: [{
name: '收入',
type: 'line',
smooth: true,
data: [820, 932, 901, 934, 1290, 1330, 1320],
itemStyle: {
color: '#409EFF'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(64,158,255,0.3)'
}, {
offset: 1,
color: 'rgba(64,158,255,0.1)'
}])
}
}]
};
this.incomeChart.setOption(option);
window.addEventListener('resize', this.resizeChart);
},
resizeChart() {
if (this.incomeChart) {
this.incomeChart.resize();
}
},
getStoreData() {
getStore(this.storeId).then(response => {
this.storeData = response.data;
// 数据加载完成后更新地图标记
this.$nextTick(() => {
this.updateMapMarker();
});
});
},
getStoreStats() {
// Mock数据，实际项目中替换为API调用
this.stats = {
todayIncome: 1234.56,
monthIncome: 45678.90,
totalDevices: 100,
onlineDevices: 85
};
},
handleChartRangeChange(range) {
// Mock数据，实际项目中替换为API调用
const mockData = {
week: {
xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
series: [820, 932, 901, 934, 1290, 1330, 1320]
},
month: {
xAxis: Array.from({ length: 30 }, (_, i) => `${i + 1}日`),
series: Array.from({ length: 30 }, () => Math.floor(Math.random() * 2000 + 500))
}
};
const data = mockData[range];
this.incomeChart.setOption({
xAxis: { data: data.xAxis },
series: [{ data: data.series }]
});
},
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'
});
async initMap() {
try {
await AMapLoader.load({
key: globalConfig.aMap.key,
version: "2.0",
plugins: [
"AMap.ToolBar",
"AMap.Scale",
"AMap.PlaceSearch",
],
});
// 添加地图控件
this.map.addControl(new AMap.ToolBar());
this.map.addControl(new AMap.Scale());
this.map = new AMap.Map('mapContainer', {
zoom: 15,
viewMode: '3D',
// mapStyle: 'amap://styles/fresh'
});
this.map.addControl(new AMap.ToolBar({
position: 'RB'
}));
this.map.addControl(new AMap.Scale());
// 如果已有店铺数据，更新地图标记
if (this.storeData.longitude && this.storeData.latitude) {
this.updateMapMarker();
}
} catch (e) {
console.error('地图初始化失败:', e);
}
},
// 更新地图标记
updateMapMarker() {
const { lng, lat } = this.storeData;
const { longitude: lng, latitude: 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">
@ -228,10 +448,20 @@ export default {
offset: new AMap.Pixel(0, -30)
});
// 绑定点击事件
this.marker.on('click', () => {
infoWindow.open(this.map, this.marker.getPosition());
});
},
handleEdit() {
this.$router.push(`/system/store/edit/${this.storeId}`);
},
handleDelete() {
this.$modal.confirm('是否确认删除该店铺？').then(() => {
return delStore(this.storeId);
}).then(() => {
this.$modal.msgSuccess("删除成功");
this.$router.push('/system/store/list');
}).catch(() => { });
}
}
}
@ -241,10 +471,6 @@ export default {
.store-detail {
padding: 20px;
.top-section {
margin-bottom: 20px;
}
.info-card {
margin-bottom: 20px;
@ -252,7 +478,21 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
.header-left {
display: flex;
align-items: center;
.title {
font-size: 16px;
font-weight: bold;
margin-right: 12px;
}
.status-tag {
margin-left: 8px;
}
}
.action-buttons {
.el-button {
@ -262,31 +502,23 @@ export default {
}
.info-item {
margin-bottom: 10px;
margin-bottom: 16px;
display: flex;
align-items: center;
.label {
color: #606266;
margin-right: 10px;
min-width: 100px;
color: #909399;
margin-right: 12px;
min-width: 80px;
font-size: 14px;
}
.value {
color: #333;
color: #303133;
font-size: 14px;
}
}
.map-container {
width: 100%;
height: 300px;
border-radius: 4px;
overflow: hidden;
margin-bottom: 0;
}
.store-image {
width: 100%;
height: 100%;
@ -296,43 +528,163 @@ export default {
padding: 10px 0;
:deep(.el-image) {
border-radius: 4px;
border-radius: 8px;
overflow: hidden;
display: block;
border: 1px solid #EBEEF5;
}
}
}
.tab-card {
.detail-tabs {
margin-top: 20px;
.search-form {
margin-bottom: 20px;
.el-form-item {
margin-bottom: 10px;
}
}
}
.map-card {
.map-container {
width: 100%;
height: 300px;
border-radius: 4px;
overflow: hidden;
.stat-cards {
margin-bottom: 20px;
.stat-card {
height: 120px;
display: flex;
padding: 0 10px;
transition: all 0.3s;
&:hover {
transform: translateY(-2px);
}
.stat-icon {
width: 48px;
height: 48px;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 16px;
i {
font-size: 24px;
color: #fff;
}
&.income {
background: linear-gradient(135deg, #36d1dc, #5b86e5);
}
&.income-month {
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
}
&.total-income {
background: linear-gradient(135deg, #a8edea, #fed6e3);
}
&.withdraw {
background: linear-gradient(135deg, #84fab0, #8fd3f4);
}
&.room {
background: linear-gradient(135deg, #fbc2eb, #a6c1ee);
}
&.facility {
background: linear-gradient(135deg, #f6d365, #fda085);
}
}
.stat-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
.stat-value {
font-size: 22px;
font-weight: bold;
color: #303133;
margin-bottom: 8px;
line-height: 1.2;
}
.stat-numbers {
font-size: 22px;
font-weight: bold;
color: #303133;
margin-bottom: 8px;
line-height: 1.2;
.current {
color: #409EFF;
}
.divider {
margin: 0 4px;
color: #909399;
}
.total {
color: #606266;
}
}
.stat-label {
font-size: 14px;
color: #909399;
}
}
}
}
.chart-section {
margin-bottom: 20px;
.card-header {
.title {
font-size: 16px;
font-weight: bold;
}
}
.chart-card {
.chart-container {
height: 350px;
padding: 10px;
}
}
.map-card {
.map-container {
height: 350px;
}
}
}
}
// 信息窗体样式
:deep(.info-window) {
padding: 8px;
padding: 12px;
h4 {
margin: 0 0 5px;
color: #333;
margin: 0 0 8px;
color: #303133;
font-size: 16px;
}
p {
margin: 0;
color: #666;
color: #606266;
font-size: 14px;
}
}
:deep(.el-tag) {
font-size: 14px;
margin-right: 8px;
}
</style>
</style>

2
src/views/user/user/index.vue
View File

@ -351,6 +351,7 @@ export default {
name: "User",
components: {UserConfigDialog },
dicts: ['sys_normal_disable', 'sys_user_sex','et_user_is_authentication','ss_user_type'],
props: ['storeId'],
data() {
return {
showConfigDialog: false,
@ -481,6 +482,7 @@ export default {
},
/** 查询用户列表 */
getList() {
this.queryParams.storeId = this.storeId;
this.loading = true;
listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
this.userList = response.rows;