siyu-bank/cunkebao_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

【私域操盘手】 操盘手端UI

Browse Source
This commit is contained in:
柳清爽
2025-03-24 10:19:21 +08:00
parent cb67dd094b
commit a623090d00
36 changed files with 5715 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

312
Cunkebao/pages/index/index.vue Normal file
View File

@@ -0,0 +1,312 @@
<template>
<view class="index-container">
<!-- 顶部导航栏 -->
<view class="header">
<view class="title">存客宝</view>
<view class="header-icons">
<u-icon name="bell" size="56" class="icon-bell" @click="goToNotification"></u-icon>
</view>
</view>
<!-- 数据概览卡片 -->
<view class="data-cards">
<view class="data-card">
<view class="data-title">设备数量</view>
<view class="data-content">
<text class="data-number">42</text>
<u-icon name="phone" size="68" color="#4080ff"></u-icon>
</view>
</view>
<view class="data-card">
<view class="data-title">微信号数量</view>
<view class="data-content">
<text class="data-number">42</text>
<u-icon name="weixin-fill" size="68" color="#4080ff"></u-icon>
</view>
</view>
<view class="data-card">
<view class="data-title">在线微信号</view>
<view class="data-content">
<text class="data-number">35</text>
<u-icon name="checkmark-circle" size="68" color="#4080ff"></u-icon>
</view>
<view class="progress-container">
<view class="progress-bar">
<view class="progress-fill" :style="{ width: onlineRate + '%' }"></view>
</view>
</view>
</view>
</view>
<!-- 场景获客统计卡片 -->
<view class="stat-card">
<view class="card-title">场景获客统计</view>
<view class="stat-grid">
<view class="stat-item">
<view class="stat-icon bg-green">
<u-icon name="integral-fill" size="32" color="#ffffff"></u-icon>
</view>
<view class="stat-number">234</view>
<view class="stat-label">公众号获客</view>
</view>
<view class="stat-item">
<view class="stat-icon bg-yellow">
<u-icon name="coupon" size="32" color="#ffffff"></u-icon>
</view>
<view class="stat-number">167</view>
<view class="stat-label">海报获客</view>
</view>
<view class="stat-item">
<view class="stat-icon bg-black">
<u-icon name="play-right" size="32" color="#ffffff"></u-icon>
</view>
<view class="stat-number">156</view>
<view class="stat-label">抖音获客</view>
</view>
<view class="stat-item">
<view class="stat-icon bg-red">
<u-icon name="heart" size="32" color="#ffffff"></u-icon>
</view>
<view class="stat-number">89</view>
<view class="stat-label">小红书获客</view>
</view>
</view>
</view>
<!-- 每日获客趋势卡片 -->
<view class="trend-card">
<view class="card-title">每日获客趋势</view>
<view class="chart-container">
<!-- 使用自定义LineChart组件代替uChart -->
<LineChart
:points="weekTrendData"
:xAxisLabels="weekDays"
color="#4080ff"
class="custom-chart"
></LineChart>
</view>
</view>
<!-- 底部导航栏 -->
<CustomTabBar active="home"></CustomTabBar>
</view>
</template>
<script>
import LineChart from '@/components/LineChart.vue'
import CustomTabBar from '@/components/CustomTabBar.vue'
export default {
components: {
LineChart,
CustomTabBar
},
data() {
return {
weekTrendData: [120, 150, 180, 210, 240, 210, 190],
weekDays: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
deviceCount: 42,
wechatCount: 42,
onlineCount: 35,
onlineRate: 83, // 计算在线率百分比：(35/42)*100 约等于 83
channelStats: [
{ icon: 'integral-fill', color: 'green', count: 234, label: '公众号获客' },
{ icon: 'coupon', color: 'yellow', count: 167, label: '海报获客' },
{ icon: 'play-right', color: 'black', count: 156, label: '抖音获客' },
{ icon: 'heart', color: 'red', count: 89, label: '小红书获客' }
]
}
},
onLoad() {
// 加载数据
this.loadData();
},
methods: {
// 加载数据
loadData() {
// 这里可以添加API调用获取实际数据
console.log('加载首页数据');
// 示例数据已在data中预设
},
// 跳转到通知页面
goToNotification() {
uni.navigateTo({
url: '/pages/notification/index'
});
}
}
}
</script>
<style lang="scss" scoped>
.index-container {
min-height: 100vh;
background-color: #f9fafb;
position: relative;
padding-bottom: 150rpx; /* 为底部导航栏预留空间 */
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 25rpx 30rpx;
background-color: #fff;
border-bottom: 1px solid #eeeeee;
.title {
font-size: 45rpx;
font-weight: bold;
color: #2664ec;
}
.header-icons {
display: flex;
color: black;
align-items: center;
}
}
.data-cards {
display: flex;
justify-content: space-between;
margin: 20rpx;
.data-card {
flex: 1;
background-color: #fff;
border-radius: 30rpx;
padding: 30rpx 30rpx;
margin: 15rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
.data-title {
font-size: 28rpx;
color: black;
margin-bottom: 16rpx;
}
.data-content {
display: flex;
align-items: center;
justify-content: space-between;
.data-number {
font-size: 55rpx;
font-weight: bold;
color: #4080ff;
}
}
.progress-container {
display: flex;
align-items: center;
margin-top: 16rpx;
.progress-bar {
flex: 1;
height: 10rpx;
background-color: #eeeeee;
border-radius: 5rpx;
overflow: hidden;
.progress-fill {
height: 100%;
background-color: #2664ec;
border-radius: 5rpx;
}
}
.progress-text {
margin-left: 10rpx;
font-size: 24rpx;
color: #666;
}
}
}
}
.stat-card, .trend-card {
margin: 35rpx;
background-color: #fff;
border-radius: 16rpx;
padding: 25rpx 40rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
.card-title {
font-size: 36rpx;
font-weight: bold;
margin-bottom: 30rpx;
color: #333;
}
}
.stat-grid {
display: flex;
flex-wrap: wrap;
.stat-item {
width: 25%;
display: flex;
flex-direction: column;
align-items: center;
padding: 20rpx 0;
.stat-icon {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 16rpx;
&.bg-green {
background-color: #07c160;
}
&.bg-yellow {
background-color: #ff9900;
}
&.bg-black {
background-color: #000000;
}
&.bg-red {
background-color: #fa5151;
}
}
.stat-number {
font-size: 32rpx;
font-weight: bold;
color: #333;
margin-bottom: 8rpx;
}
.stat-label {
font-size: 24rpx;
color: #999;
}
}
}
.chart-container {
height: 500rpx;
display: flex;
justify-content: center;
align-items: center;
.custom-chart {
width: 100%;
height: 100%;
}
}
</style>