320 lines
6.1 KiB
Vue
320 lines
6.1 KiB
Vue
<template>
|
|
<view class="container">
|
|
<!-- 代理商信息卡片 -->
|
|
<view class="agent-card">
|
|
<view class="agent-info">
|
|
<image :src="agentInfo.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
|
|
<view class="info">
|
|
<text class="name">{{ agentInfo.name || '代理商' }}</text>
|
|
<text class="region">{{ agentInfo.region || '服务区域' }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="level-badge">
|
|
<text>{{ agentInfo.level || 'VIP' }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 数据概览 -->
|
|
<view class="overview-grid">
|
|
<view class="overview-item">
|
|
<text class="number">{{ overviewData.totalTechnicians }}</text>
|
|
<text class="label">管理技师</text>
|
|
</view>
|
|
<view class="overview-item">
|
|
<text class="number">{{ overviewData.monthOrders }}</text>
|
|
<text class="label">本月订单</text>
|
|
</view>
|
|
<view class="overview-item">
|
|
<text class="number">¥{{ overviewData.monthRevenue }}</text>
|
|
<text class="label">本月营收</text>
|
|
</view>
|
|
<view class="overview-item">
|
|
<text class="number">¥{{ overviewData.commission }}</text>
|
|
<text class="label">待结佣金</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 图表区域 -->
|
|
<view class="chart-section">
|
|
<view class="section-title">营收趋势</view>
|
|
<view class="chart-placeholder">
|
|
<text>图表区域 - 可集成echarts</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 快速操作 -->
|
|
<view class="quick-menu">
|
|
<view class="menu-item" @click="goToTechnicians">
|
|
<image src="/static/icon-tech-manage.png" mode="aspectFit"></image>
|
|
<text>技师管理</text>
|
|
</view>
|
|
<view class="menu-item" @click="goToOrders">
|
|
<image src="/static/icon-order-stat.png" mode="aspectFit"></image>
|
|
<text>订单统计</text>
|
|
</view>
|
|
<view class="menu-item" @click="goToFinance">
|
|
<image src="/static/icon-finance.png" mode="aspectFit"></image>
|
|
<text>财务管理</text>
|
|
</view>
|
|
<view class="menu-item" @click="goToReports">
|
|
<image src="/static/icon-report.png" mode="aspectFit"></image>
|
|
<text>数据报表</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 最新动态 -->
|
|
<view class="section">
|
|
<view class="section-title">最新动态</view>
|
|
<view class="activity-list">
|
|
<view class="activity-item" v-for="(item, index) in activities" :key="index">
|
|
<view class="activity-icon">
|
|
<text>{{ item.type === 'order' ? '📋' : item.type === 'tech' ? '👨🔧' : '💰' }}</text>
|
|
</view>
|
|
<view class="activity-content">
|
|
<text class="content">{{ item.content }}</text>
|
|
<text class="time">{{ item.time }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
agentInfo: {},
|
|
overviewData: {
|
|
totalTechnicians: 0,
|
|
monthOrders: 0,
|
|
monthRevenue: 0,
|
|
commission: 0
|
|
},
|
|
activities: []
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.loadData()
|
|
},
|
|
methods: {
|
|
loadData() {
|
|
// 加载代理商信息
|
|
this.agentInfo = uni.getStorageSync('agentInfo') || {}
|
|
// 加载概览数据
|
|
this.loadOverviewData()
|
|
// 加载最新动态
|
|
this.loadActivities()
|
|
},
|
|
|
|
loadOverviewData() {
|
|
this.$api.get('/api/agent/overview').then(res => {
|
|
this.overviewData = res.data
|
|
})
|
|
},
|
|
|
|
loadActivities() {
|
|
this.$api.get('/api/agent/activities').then(res => {
|
|
this.activities = res.data
|
|
})
|
|
},
|
|
|
|
goToTechnicians() {
|
|
uni.switchTab({
|
|
url: '/pages/technicians/technicians'
|
|
})
|
|
},
|
|
|
|
goToOrders() {
|
|
uni.switchTab({
|
|
url: '/pages/orders/orders'
|
|
})
|
|
},
|
|
|
|
goToFinance() {
|
|
uni.switchTab({
|
|
url: '/pages/finance/finance'
|
|
})
|
|
},
|
|
|
|
goToReports() {
|
|
uni.navigateTo({
|
|
url: '/pages/reports/reports'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container {
|
|
padding: 0;
|
|
background: #f8f8f8;
|
|
}
|
|
|
|
.agent-card {
|
|
background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
|
|
padding: 20px;
|
|
color: white;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.agent-info {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.agent-info image {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 30px;
|
|
border: 2px solid white;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.info .name {
|
|
display: block;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.info .region {
|
|
display: block;
|
|
font-size: 14px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.level-badge {
|
|
padding: 6px 12px;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 15px;
|
|
border: 1px solid white;
|
|
}
|
|
|
|
.overview-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 15px;
|
|
margin: 15px;
|
|
}
|
|
|
|
.overview-item {
|
|
background: white;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.overview-item .number {
|
|
display: block;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
color: #6c5ce7;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.overview-item .label {
|
|
display: block;
|
|
font-size: 14px;
|
|
color: #999;
|
|
}
|
|
|
|
.chart-section {
|
|
margin: 15px;
|
|
background: white;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.chart-placeholder {
|
|
height: 200px;
|
|
background: #f8f8f8;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #999;
|
|
}
|
|
|
|
.quick-menu {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 15px;
|
|
margin: 15px;
|
|
}
|
|
|
|
.menu-item {
|
|
background: white;
|
|
border-radius: 10px;
|
|
padding: 20px 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.menu-item image {
|
|
width: 30px;
|
|
height: 30px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.menu-item text {
|
|
display: block;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.section {
|
|
margin: 15px;
|
|
background: white;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.activity-list {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.activity-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
margin-bottom: 15px;
|
|
padding-bottom: 15px;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.activity-item:last-child {
|
|
border-bottom: none;
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.activity-icon {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 15px;
|
|
background: #f0f0f0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 10px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.activity-content .content {
|
|
display: block;
|
|
font-size: 14px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.activity-content .time {
|
|
display: block;
|
|
font-size: 12px;
|
|
color: #999;
|
|
}
|
|
</style> |