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

存客宝 React

Browse Source
This commit is contained in:
柳清爽
2025-03-29 16:50:39 +08:00
parent caea0b4b99
commit 7e7c199996
388 changed files with 53282 additions and 2076 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
Cunkebao_Uniapp/pages/scenarios/create.vue Normal file
View File

@@ -0,0 +1,203 @@
<template>
<view class="create-container">
<!-- 顶部导航栏 -->
<view class="header">
<view class="back-icon" @click="goBack">
<u-icon name="arrow-left" size="26"></u-icon>
</view>
<view class="title">新建计划</view>
<view class="header-icons">
<u-icon name="checkmark" size="26" color="#4080ff" class="icon-save" @click="savePlan"></u-icon>
</view>
</view>
<!-- 表单区域 -->
<view class="form-content">
<u-form :model="formData" ref="uForm">
<u-form-item label="计划名称" prop="name">
<u-input v-model="formData.name" placeholder="请输入计划名称" />
</u-form-item>
<u-form-item label="获客渠道" prop="channel">
<u-input v-model="formData.channelName" placeholder="选择获客渠道" @click="showChannelPicker" disabled disabledColor="#ffffff" />
<u-icon slot="right" name="arrow-right" size="24" color="#c8c9cc"></u-icon>
</u-form-item>
<u-form-item label="目标人数" prop="target">
<u-input v-model="formData.target" placeholder="请输入目标获客人数" type="number" />
</u-form-item>
<u-form-item label="开始日期" prop="startDate">
<u-input v-model="formData.startDate" placeholder="选择开始日期" @click="showDatePicker('start')" disabled disabledColor="#ffffff" />
<u-icon slot="right" name="calendar" size="24" color="#c8c9cc"></u-icon>
</u-form-item>
<u-form-item label="结束日期" prop="endDate">
<u-input v-model="formData.endDate" placeholder="选择结束日期" @click="showDatePicker('end')" disabled disabledColor="#ffffff" />
<u-icon slot="right" name="calendar" size="24" color="#c8c9cc"></u-icon>
</u-form-item>
<u-form-item label="描述" prop="description">
<u-input v-model="formData.description" type="textarea" placeholder="请输入计划描述" />
</u-form-item>
</u-form>
</view>
<!-- 渠道选择器 -->
<u-select
:list="channelList"
v-model="showChannelSelect"
@confirm="confirmChannel"
></u-select>
<!-- 日期选择器 -->
<u-calendar
v-model="showDateSelect"
:mode="dateMode"
@confirm="confirmDate"
></u-calendar>
</view>
</template>
<script>
export default {
data() {
return {
formData: {
name: '',
channel: '',
channelName: '',
target: '',
startDate: '',
endDate: '',
description: ''
},
showChannelSelect: false,
showDateSelect: false,
dateMode: 'single',
dateType: 'start',
channelList: [
{ value: 'douyin', label: '抖音获客' },
{ value: 'xiaohongshu', label: '小红书获客' },
{ value: 'phone', label: '电话获客' },
{ value: 'official', label: '公众号获客' },
{ value: 'poster', label: '海报获客' },
{ value: 'wechat-group', label: '微信群获客' }
]
}
},
methods: {
// 返回上一页
goBack() {
uni.navigateBack();
},
// 显示渠道选择器
showChannelPicker() {
this.showChannelSelect = true;
},
// 确认选择渠道
confirmChannel(e) {
this.formData.channel = e[0].value;
this.formData.channelName = e[0].label;
},
// 显示日期选择器
showDatePicker(type) {
this.dateType = type;
this.showDateSelect = true;
},
// 确认选择日期
confirmDate(e) {
const dateStr = e.year + '-' + e.month + '-' + e.day;
if (this.dateType === 'start') {
this.formData.startDate = dateStr;
} else {
this.formData.endDate = dateStr;
}
},
// 保存计划
savePlan() {
// 表单验证
if (!this.formData.name) {
uni.showToast({
title: '请输入计划名称',
icon: 'none'
});
return;
}
if (!this.formData.channel) {
uni.showToast({
title: '请选择获客渠道',
icon: 'none'
});
return;
}
// 显示保存成功
uni.showLoading({
title: '保存中'
});
setTimeout(() => {
uni.hideLoading();
uni.showToast({
title: '保存成功',
icon: 'success'
});
// 延迟返回
setTimeout(() => {
uni.navigateBack();
}, 1500);
}, 1000);
}
}
}
</script>
<style lang="scss" scoped>
.create-container {
min-height: 100vh;
background-color: #f5f5f5;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 40rpx;
background-color: #fff;
position: relative;
.back-icon {
width: 48rpx;
}
.title {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: 40rpx;
font-weight: bold;
color: #333;
}
.header-icons {
display: flex;
align-items: center;
}
}
.form-content {
margin: 20rpx;
background-color: #fff;
border-radius: 16rpx;
padding: 30rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}
</style>

504
Cunkebao_Uniapp/pages/scenarios/detail.vue Normal file
View File

@@ -0,0 +1,504 @@
<template>
<view class="detail-container">
<!-- 顶部导航栏 -->
<view class="header">
<view class="back-icon" @click="goBack">
<u-icon name="arrow-left" size="26"></u-icon>
</view>
<view class="title">{{channelInfo.name}}</view>
<view class="header-icons">
<u-icon name="more-circle" size="26" class="icon-more" @click="showOptions"></u-icon>
</view>
</view>
<!-- 数据概览卡片 -->
<view class="data-overview">
<view class="overview-header">
<view class="channel-icon" :class="'bg-' + channelInfo.bgColor">
<u-icon :name="channelInfo.icon" size="32" color="#ffffff"></u-icon>
</view>
<view class="channel-info">
<view class="channel-name">{{channelInfo.name}}</view>
<view class="channel-desc">今日新增客户 {{channelInfo.count}} 人</view>
</view>
</view>
<view class="overview-data">
<view class="data-col">
<view class="data-value">{{channelInfo.count}}</view>
<view class="data-label">今日获客</view>
</view>
<view class="data-col">
<view class="data-value">{{weekTotal}}</view>
<view class="data-label">本周获客</view>
</view>
<view class="data-col">
<view class="data-value">{{monthTotal}}</view>
<view class="data-label">本月获客</view>
</view>
</view>
</view>
<!-- 趋势图 -->
<view class="trend-card">
<view class="card-title">获客趋势</view>
<view class="tab-wrapper">
<view
class="tab-item"
:class="{ active: timeRange === 'week' }"
@click="changeTimeRange('week')"
>本周</view>
<view
class="tab-item"
:class="{ active: timeRange === 'month' }"
@click="changeTimeRange('month')"
>本月</view>
<view
class="tab-item"
:class="{ active: timeRange === 'year' }"
@click="changeTimeRange('year')"
>全年</view>
</view>
<view class="chart-container">
<LineChart
:points="trendData"
:xAxisLabels="timeRange === 'week' ? weekDays : (timeRange === 'month' ? monthDays : monthNames)"
:color="getColorByChannel(channelInfo.bgColor)"
class="custom-chart"
></LineChart>
</view>
</view>
<!-- 客户列表 -->
<view class="customer-list">
<view class="list-header">
<view class="list-title">新增客户</view>
<view class="list-action" @click="viewAllCustomers">查看全部</view>
</view>
<view class="customer-item" v-for="(item, index) in customers" :key="index">
<view class="customer-avatar">
<template v-if="item.avatar">
<image class="avatar" :src="item.avatar"></image>
</template>
<template v-else>
<view class="avatar-icon">
<u-icon name="account-fill" size="30" color="#4080ff"></u-icon>
</view>
</template>
</view>
<view class="customer-info">
<view class="customer-name">{{item.name}}</view>
<view class="customer-time">{{item.time}}</view>
</view>
<view class="customer-action">
<u-button size="mini" type="primary" text="联系" @click="contactCustomer(item)"></u-button>
</view>
</view>
<view class="empty-tip" v-if="customers.length === 0">
暂无客户数据
</view>
</view>
</view>
</template>
<script>
import LineChart from '@/components/LineChart.vue'
export default {
components: {
LineChart
},
data() {
return {
channelId: '',
timeRange: 'week',
weekDays: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
monthDays: Array.from({length: 30}, (_, i) => `${i+1}日`),
monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
weekData: [52, 65, 78, 95, 110, 95, 80],
monthData: [30, 45, 60, 75, 90, 105, 120, 135, 120, 105, 90, 75, 60, 45, 30, 45, 60, 75, 90, 105, 120, 135, 120, 105, 90, 75, 60, 45, 30],
yearData: [100, 120, 150, 170, 190, 210, 230, 250, 270, 290, 310, 330],
customers: [
{ name: '张先生', time: '今天 12:30', avatar: null },
{ name: '李女士', time: '今天 10:15', avatar: null },
{ name: '王先生', time: '今天 09:45', avatar: null },
{ name: '赵女士', time: '今天 08:20', avatar: null }
],
channels: [
{ id: 'douyin', name: '抖音获客', icon: 'play-right', bgColor: 'black', count: 156, increase: '+12.5%' },
{ id: 'xiaohongshu', name: '小红书获客', icon: 'heart', bgColor: 'red', count: 89, increase: '+8.3%' },
{ id: 'phone', name: '电话获客', icon: 'phone', bgColor: 'blue', count: 42, increase: '+15.8%' },
{ id: 'official', name: '公众号获客', icon: 'integral-fill', bgColor: 'green', count: 234, increase: '+15.7%' },
{ id: 'poster', name: '海报获客', icon: 'coupon', bgColor: 'yellow', count: 167, increase: '+10.2%' },
{ id: 'wechat-group', name: '微信群获客', icon: 'weixin-fill', bgColor: 'wechat', count: 145, increase: '+11.2%' }
]
}
},
computed: {
// 获取当前渠道信息
channelInfo() {
const channel = this.channels.find(item => item.id === this.channelId);
return channel || { name: '获客详情', icon: 'home', bgColor: 'blue', count: 0, increase: '+0.0%' };
},
// 根据时间范围获取趋势数据
trendData() {
if (this.timeRange === 'week') {
return this.weekData;
} else if (this.timeRange === 'month') {
return this.monthData;
} else {
return this.yearData;
}
},
// 计算周总量
weekTotal() {
return this.weekData.reduce((sum, num) => sum + num, 0);
},
// 计算月总量
monthTotal() {
return this.monthData.slice(0, 30).reduce((sum, num) => sum + num, 0);
}
},
onLoad(options) {
// 获取渠道ID
if (options.id) {
this.channelId = options.id;
}
// 加载数据
this.loadData();
},
methods: {
// 返回上一页
goBack() {
uni.navigateBack();
},
// 显示更多选项
showOptions() {
uni.showActionSheet({
itemList: ['分享', '设置', '删除'],
success: (res) => {
console.log('选择了第' + (res.tapIndex + 1) + '个选项');
}
});
},
// 切换时间范围
changeTimeRange(range) {
this.timeRange = range;
},
// 查看全部客户
viewAllCustomers() {
uni.navigateTo({
url: `/pages/scenarios/customers?id=${this.channelId}`
});
},
// 联系客户
contactCustomer(customer) {
uni.showModal({
title: '联系客户',
content: `是否联系 ${customer.name}？`,
success: (res) => {
if (res.confirm) {
console.log('联系客户:', customer);
}
}
});
},
// 根据渠道类型获取颜色
getColorByChannel(type) {
const colorMap = {
'black': '#000000',
'red': '#fa5151',
'blue': '#4080ff',
'green': '#07c160',
'yellow': '#ff9900',
'wechat': '#07c160'
};
return colorMap[type] || '#4080ff';
},
// 加载数据
loadData() {
// 这里可以添加API调用获取实际数据
console.log('加载获客详情数据:', this.channelId);
// 示例数据已在data中预设
}
}
}
</script>
<style lang="scss" scoped>
.detail-container {
min-height: 100vh;
background-color: #f5f5f5;
padding-bottom: 40rpx;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 40rpx;
background-color: #fff;
position: relative;
.back-icon {
width: 48rpx;
}
.title {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: 40rpx;
font-weight: bold;
color: #333;
}
.header-icons {
display: flex;
align-items: center;
}
}
.data-overview {
margin: 20rpx;
background-color: #fff;
border-radius: 16rpx;
padding: 30rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
.overview-header {
display: flex;
align-items: center;
margin-bottom: 30rpx;
.channel-icon {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 20rpx;
&.bg-black {
background-color: #000000;
}
&.bg-red {
background-color: #fa5151;
}
&.bg-blue {
background-color: #4080ff;
}
&.bg-green {
background-color: #07c160;
}
&.bg-yellow {
background-color: #ff9900;
}
&.bg-wechat {
background-color: #07c160;
}
}
.channel-info {
.channel-name {
font-size: 36rpx;
font-weight: bold;
color: #333;
margin-bottom: 8rpx;
}
.channel-desc {
font-size: 28rpx;
color: #777;
}
}
}
.overview-data {
display: flex;
justify-content: space-around;
text-align: center;
.data-col {
flex: 1;
.data-value {
font-size: 44rpx;
font-weight: bold;
color: #333;
margin-bottom: 8rpx;
}
.data-label {
font-size: 28rpx;
color: #777;
}
}
}
}
.trend-card {
margin: 20rpx;
background-color: #fff;
border-radius: 16rpx;
padding: 30rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
.card-title {
font-size: 36rpx;
font-weight: bold;
margin-bottom: 30rpx;
color: #333;
}
.tab-wrapper {
display: flex;
margin-bottom: 20rpx;
.tab-item {
padding: 10rpx 30rpx;
font-size: 28rpx;
color: #666;
border-radius: 8rpx;
margin-right: 20rpx;
&.active {
background-color: #ecf5ff;
color: #4080ff;
}
}
}
.chart-container {
height: 400rpx;
.custom-chart {
width: 100%;
height: 100%;
}
}
}
.customer-list {
margin: 20rpx;
background-color: #fff;
border-radius: 16rpx;
padding: 30rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
.list-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
.list-title {
font-size: 36rpx;
font-weight: bold;
color: #333;
}
.list-action {
font-size: 28rpx;
color: #4080ff;
}
}
.customer-item {
display: flex;
align-items: center;
padding: 20rpx 0;
border-bottom: 1rpx solid #f5f5f5;
&:last-child {
border-bottom: none;
}
.customer-avatar {
width: 80rpx;
height: 80rpx;
margin-right: 20rpx;
.avatar {
width: 100%;
height: 100%;
border-radius: 50%;
}
.avatar-icon {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #f0f5ff;
display: flex;
justify-content: center;
align-items: center;
}
}
.customer-info {
flex: 1;
.customer-name {
font-size: 32rpx;
color: #333;
margin-bottom: 8rpx;
}
.customer-time {
font-size: 24rpx;
color: #777;
}
}
}
.empty-tip {
text-align: center;
padding: 40rpx 0;
color: #777;
font-size: 28rpx;
}
}
.progress-label {
font-size: 24rpx;
color: #777;
margin-bottom: 10rpx;
}
.stat-label {
font-size: 24rpx;
color: #777;
}
.timeline-time {
font-size: 24rpx;
color: #777;
margin-bottom: 8rpx;
}
.timeline-meta {
font-size: 22rpx;
color: #777;
}
</style>

512
Cunkebao_Uniapp/pages/scenarios/index.vue Normal file
View File

@@ -0,0 +1,512 @@
<template>
<view class="scenarios-container">
<!-- 顶部导航栏 -->
<view class="header">
<view class="back-icon" @click="goBack">
<u-icon name="arrow-left" size="42" color="black"></u-icon>
</view>
<view class="title">场景获客</view>
<view class="header-icons">
<u-icon name="plus" size="30" color="#fff" class="icon-add" @click="createNewPlan"></u-icon>
<text>新建计划</text>
</view>
</view>
<!-- 获客渠道卡片列表 -->
<view class="channel-grid">
<!-- 抖音获客 -->
<view class="channel-card" @click="navigateToDetail('douyin')">
<view class="channel-icon bg-black">
<u-icon name="play-right" size="28" color="#ffffff"></u-icon>
</view>
<view class="channel-name">抖音获客</view>
<view class="channel-data">
<view class="data-item">
<view class="data-label">今日：</view>
<view class="data-value">156</view>
</view>
<view class="data-trend up">
<image src="/static/images/icons/trend-up.svg" style="width: 32rpx; height: 32rpx;"></image>
<text>+12.5%</text>
</view>
</view>
</view>
<!-- 小红书获客 -->
<view class="channel-card" @click="navigateToDetail('xiaohongshu')">
<view class="channel-icon bg-red">
<u-icon name="heart" size="28" color="#ffffff"></u-icon>
</view>
<view class="channel-name">小红书获客</view>
<view class="channel-data">
<view class="data-item">
<view class="data-label">今日：</view>
<view class="data-value">89</view>
</view>
<view class="data-trend up">
<image src="/static/images/icons/trend-up.svg" style="width: 32rpx; height: 32rpx;"></image>
<text>+8.3%</text>
</view>
</view>
</view>
<!-- 电话获客 -->
<view class="channel-card" @click="navigateToDetail('phone')">
<view class="channel-icon bg-blue">
<u-icon name="phone" size="28" color="#ffffff"></u-icon>
</view>
<view class="channel-name">电话获客</view>
<view class="channel-data">
<view class="data-item">
<view class="data-label">今日：</view>
<view class="data-value">42</view>
</view>
<view class="data-trend up">
<image src="/static/images/icons/trend-up.svg" style="width: 32rpx; height: 32rpx;"></image>
<text>+15.8%</text>
</view>
</view>
</view>
<!-- 公众号获客 -->
<view class="channel-card" @click="navigateToDetail('official')">
<view class="channel-icon bg-green">
<u-icon name="integral-fill" size="28" color="#ffffff"></u-icon>
</view>
<view class="channel-name">公众号获客</view>
<view class="channel-data">
<view class="data-item">
<view class="data-label">今日：</view>
<view class="data-value">234</view>
</view>
<view class="data-trend up">
<image src="/static/images/icons/trend-up.svg" style="width: 32rpx; height: 32rpx;"></image>
<text>+15.7%</text>
</view>
</view>
</view>
<!-- 海报获客 -->
<view class="channel-card" @click="navigateToDetail('poster')">
<view class="channel-icon bg-yellow">
<u-icon name="coupon" size="28" color="#ffffff"></u-icon>
</view>
<view class="channel-name">海报获客</view>
<view class="channel-data">
<view class="data-item">
<view class="data-label">今日：</view>
<view class="data-value">167</view>
</view>
<view class="data-trend up">
<image src="/static/images/icons/trend-up.svg" style="width: 32rpx; height: 32rpx;"></image>
<text>+10.2%</text>
</view>
</view>
</view>
<!-- 微信群获客 -->
<view class="channel-card" @click="navigateToDetail('wechat-group')">
<view class="channel-icon bg-wechat">
<u-icon name="weixin-fill" size="28" color="#ffffff"></u-icon>
</view>
<view class="channel-name">微信群获客</view>
<view class="channel-data">
<view class="data-item">
<view class="data-label">今日：</view>
<view class="data-value">145</view>
</view>
<view class="data-trend up">
<image src="/static/images/icons/trend-up.svg" style="width: 32rpx; height: 32rpx;"></image>
<text>+11.2%</text>
</view>
</view>
</view>
<!-- AI智能获客 版块标题 -->
<view class="section-title">
<image src="/static/images/icons/robot.svg" class="robot-icon"></image>
<text>AI智能获客</text>
<text class="beta-tag">Beta</text>
</view>
<!-- AI智能加友 -->
<view class="channel-card channel-card-xw" @click="navigateToDetail('ai-friend')">
<view class="channel-icon">
<image src="/static/images/icons/aipa.svg" mode="aspectFit" class="ai-icon"></image>
</view>
<view class="channel-name">AI智能加友</view>
<view class="channel-desc">智能分析目标用户画像，自动筛选优质客户</view>
<view class="channel-data">
<view class="data-item">
<view class="data-label">今日：</view>
<view class="data-value">245</view>
</view>
<view class="data-trend up">
<image src="/static/images/icons/trend-up.svg" style="width: 32rpx; height: 32rpx;"></image>
<text>+18.5%</text>
</view>
</view>
</view>
<!-- AI智能群控 -->
<view class="channel-card channel-card-xw" @click="navigateToDetail('ai-group')">
<view class="channel-icon">
<image src="/static/images/icons/aipa.svg" mode="aspectFit" class="ai-icon"></image>
</view>
<view class="channel-name">AI智能群控</view>
<view class="channel-desc">一键管理多个群聊，自动回复，数据分析</view>
<view class="channel-data">
<view class="data-item">
<view class="data-label">今日：</view>
<view class="data-value">128</view>
</view>
<view class="data-trend up">
<image src="/static/images/icons/trend-up.svg" style="width: 32rpx; height: 32rpx;"></image>
<text>+9.7%</text>
</view>
</view>
</view>
<!-- AI场景转化 -->
<view class="channel-card channel-card-xw" @click="navigateToDetail('ai-convert')">
<view class="channel-icon">
<image src="/static/images/icons/aipa.svg" mode="aspectFit" class="ai-icon"></image>
</view>
<view class="channel-name">AI场景转化</view>
<view class="channel-desc">多场景智能营销，提升获客转化效果</view>
<view class="channel-data">
<view class="data-item">
<view class="data-label">今日：</view>
<view class="data-value">134</view>
</view>
<view class="data-trend up">
<image src="/static/images/icons/trend-up.svg" style="width: 32rpx; height: 32rpx;"></image>
<text>+14.3%</text>
</view>
</view>
</view>
</view>
<!-- 底部导航栏 -->
<CustomTabBar active="market"></CustomTabBar>
</view>
</template>
<script>
import CustomTabBar from '@/components/CustomTabBar.vue'
export default {
components: {
CustomTabBar
},
data() {
return {
channels: [
{ id: 'douyin', name: '抖音获客', icon: 'play-right', bgColor: 'black', count: 156, increase: '+12.5%' },
{ id: 'xiaohongshu', name: '小红书获客', icon: 'heart', bgColor: 'red', count: 89, increase: '+8.3%' },
{ id: 'phone', name: '电话获客', icon: 'phone', bgColor: 'blue', count: 42, increase: '+15.8%' },
{ id: 'official', name: '公众号获客', icon: 'integral-fill', bgColor: 'green', count: 234, increase: '+15.7%' },
{ id: 'poster', name: '海报获客', icon: 'coupon', bgColor: 'yellow', count: 167, increase: '+10.2%' },
{ id: 'wechat-group', name: '微信群获客', icon: 'weixin-fill', bgColor: 'wechat', count: 145, increase: '+11.2%' },
{
id: 'ai-friend',
name: 'AI智能加友',
icon: 'star',
bgColor: 'blue',
count: 245,
increase: '+18.5%',
desc: '智能分析目标用户画像，自动筛选优质客户',
isAI: true
},
{
id: 'ai-group',
name: 'AI群引流',
icon: 'star',
bgColor: 'blue',
count: 178,
increase: '+15.2%',
desc: '智能推聊互动，提高群活跃度和转化率',
isAI: true
},
{
id: 'ai-convert',
name: 'AI场景转化',
icon: 'star',
bgColor: 'blue',
count: 134,
increase: '+14.3%',
desc: '多场景智能营销，提升获客转化效果',
isAI: true
}
]
}
},
onLoad() {
// 页面加载时获取数据
this.loadData();
},
methods: {
// 返回上一页
goBack() {
uni.navigateBack();
},
// 创建新的获客计划
createNewPlan() {
uni.navigateTo({
url: '/pages/scenarios/create'
});
},
// 导航到详情页面
navigateToDetail(channelId) {
uni.navigateTo({
url: `/pages/scenarios/detail?id=${channelId}`
});
},
// 加载数据
loadData() {
// 这里可以添加API调用获取实际数据
console.log('加载场景获客数据');
// 示例数据已在data中预设
}
}
}
</script>
<style lang="scss" scoped>
.scenarios-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 #e9e9e9;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
.back-icon {
width: 60rpx;
color: #000;
padding: 10rpx;
border-radius: 50%;
&:active {
background-color: rgba(0, 0, 0, 0.05);
}
}
.title {
position: absolute;
font-size: 40rpx;
float: left;
margin-left: 70rpx;
}
.header-icons {
display: flex;
align-items: center;
background-color: #2563EB;
border-radius: 20rpx;
padding: 15rpx 30rpx;
color: #fff;
text-indent: 15rpx;
}
}
.channel-grid {
display: flex;
flex-wrap: wrap;
padding: 15rpx;
margin-top: 130rpx; // 添加顶部边距，为固定header留出空间
.channel-card {
width: calc(50% - 30rpx);
margin: 15rpx;
background-color: #fff;
border-radius: 35rpx;
padding: 35rpx 20rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
// AI智能获客栏目下的卡片特殊背景色
.section-title + & {
background-color: #F8FBFF;
}
.channel-icon {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 15rpx;
&.bg-black {
background-color: #000000;
}
&.bg-red {
background-color: #fa5151;
}
&.bg-blue {
background-color: #4080ff;
}
&.bg-green {
background-color: #07c160;
}
&.bg-yellow {
background-color: #ff9900;
}
&.bg-wechat {
background-color: #07c160;
}
&.bg-purple {
background-color: #8a2be2;
}
}
.channel-name {
font-size: 30rpx;
color: #2563EB;
margin: 15rpx;
}
.channel-desc {
font-size: 24rpx;
color: #666;
text-align: center;
margin-bottom: 15rpx;
height: 80rpx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.channel-data {
width: 100%;
padding: 0 10rpx;
display: flex;
flex-direction: column;
align-items: center;
.data-item {
display: flex;
align-items: center;
margin-bottom: 10rpx;
.data-label {
display: flex;
align-items: center;
font-size: 24rpx;
color: #999;
&::before {
content: '';
display: inline-block;
width: 36rpx;
height: 36rpx;
margin-right: 6rpx;
background: url('/static/images/icons/user-label.svg') no-repeat center/contain;
}
}
.data-value {
font-size: 38rpx;
font-weight: bold;
color: #333;
}
}
.data-trend {
display: flex;
align-items: center;
font-size: 28rpx;
text-indent: 15rpx;
&.up {
color: #2fc25b;
}
&.down {
color: #fa3534;
}
}
}
}
.channel-card-xw {
background-color: #F8FBFF !important;
border: 6rpx solid #DBEAFE !important;
.channel-icon {
background: none !important;
.ai-icon {
width: 90rpx;
height: 90rpx;
}
}
}
}
.section-title {
width: 100%;
display: flex;
align-items: center;
padding: 30rpx 20rpx 15rpx;
margin: 15rpx 7.5rpx 5rpx;
.robot-icon {
width: 56rpx;
height: 56rpx;
margin-right: 10rpx;
}
text {
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.beta-tag {
font-size: 25rpx;
color: #4080ff;
background-color: #ecf5ff;
padding: 5rpx 20rpx;
border-radius: 20rpx;
margin-left: 20rpx;
}
}
.tab-text {
font-size: 26rpx;
color: #777;
margin-top: 10rpx;
&.active-text {
color: #4080ff;
}
}
</style>