【私域操盘手】 操盘手端UI
This commit is contained in:
柳清爽
201
Cunkebao/pages/agreement/privacy.vue
Normal file
201
Cunkebao/pages/agreement/privacy.vue
Normal file
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<view class="privacy-container">
|
||||
<u-navbar
|
||||
title="隐私政策"
|
||||
bgColor="#ffffff"
|
||||
></u-navbar>
|
||||
|
||||
<view class="content">
|
||||
<view class="title">村客宝隐私政策</view>
|
||||
<view class="date">生效日期：2023年1月1日</view>
|
||||
|
||||
<view class="section">
|
||||
<view class="section-title">一、引言</view>
|
||||
<view class="paragraph">
|
||||
村客宝（以下简称"我们"）非常重视您的隐私和个人信息保护。本隐私政策旨在向您说明我们如何收集、使用、存储、共享和保护您的个人信息，以及您享有的相关权利。
|
||||
</view>
|
||||
<view class="paragraph">
|
||||
请您在使用我们的服务前，仔细阅读并了解本隐私政策的全部内容。如您对本隐私政策有任何疑问，可随时联系我们的客服。
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section">
|
||||
<view class="section-title">二、我们收集的信息</view>
|
||||
<view class="paragraph">
|
||||
2.1 您主动提供的信息：当您注册账号、使用服务、参与活动或与我们沟通时，您可能会向我们提供手机号码、姓名、联系地址等信息。
|
||||
</view>
|
||||
<view class="paragraph">
|
||||
2.2 在您使用服务过程中收集的信息：包括设备信息、日志信息、位置信息等。这些信息是我们提供服务所必须的基础信息。
|
||||
</view>
|
||||
<view class="paragraph">
|
||||
2.3 来自第三方的信息：在获得您的授权或法律允许的情况下，我们可能从关联方、合作伙伴等第三方获得您的相关信息。
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section">
|
||||
<view class="section-title">三、我们如何使用您的信息</view>
|
||||
<view class="paragraph">
|
||||
3.1 向您提供服务：包括账号注册与管理、客户服务、订单管理等。
|
||||
</view>
|
||||
<view class="paragraph">
|
||||
3.2 产品开发与优化：我们会使用您的信息来开发和改进产品功能，提升用户体验。
|
||||
</view>
|
||||
<view class="paragraph">
|
||||
3.3 安全保障：我们使用您的信息用于身份验证、客户服务、安全防范、诈骗监测、存档和备份等用途。
|
||||
</view>
|
||||
<view class="paragraph">
|
||||
3.4 向您推送消息：我们可能会向您发送服务相关通知、活动信息等。
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section">
|
||||
<view class="section-title">四、信息的共享与披露</view>
|
||||
<view class="paragraph">
|
||||
4.1 在以下情况下，我们可能会共享您的信息：
|
||||
</view>
|
||||
<view class="paragraph">
|
||||
- 获得您的明确同意；
|
||||
</view>
|
||||
<view class="paragraph">
|
||||
- 根据法律法规的要求、强制性的行政或司法要求；
|
||||
</view>
|
||||
<view class="paragraph">
|
||||
- 与我们的关联公司共享，但我们只会共享必要的信息，并要求他们遵守本隐私政策；
|
||||
</view>
|
||||
<view class="paragraph">
|
||||
- 与授权合作伙伴共享，但我们只会共享为实现服务所必要的信息。
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section">
|
||||
<view class="section-title">五、信息的存储</view>
|
||||
<view class="paragraph">
|
||||
5.1 存储地点：我们会按照法律法规的规定，将境内收集的用户个人信息存储在中国境内。
|
||||
</view>
|
||||
<view class="paragraph">
|
||||
5.2 存储期限：我们仅在为实现服务目的所必需的期间内保留您的个人信息，除非法律要求或允许在更长的期间内保留这些信息。
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section">
|
||||
<view class="section-title">六、信息安全</view>
|
||||
<view class="paragraph">
|
||||
6.1 我们努力为您提供信息安全保障，以防止信息的丢失、不当使用、未经授权的访问或披露。
|
||||
</view>
|
||||
<view class="paragraph">
|
||||
6.2 我们使用各种安全技术和程序，以防信息的丢失、不当使用、未经授权的访问或披露。
|
||||
</view>
|
||||
<view class="paragraph">
|
||||
6.3 请您理解，由于技术的限制以及可能存在的各种恶意手段，即使我们已经尽最大努力加强安全措施，也不可能始终保证信息的百分之百安全。
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section">
|
||||
<view class="section-title">七、您的权利</view>
|
||||
<view class="paragraph">
|
||||
7.1 您可以通过我们提供的功能或向我们的客服提出请求，访问、更正、删除您的个人信息，或者撤回您的授权同意。
|
||||
</view>
|
||||
<view class="paragraph">
|
||||
7.2 请您理解，特定的业务功能和服务将需要您的信息才能得以完成，当您撤回同意或授权后，我们无法继续为您提供相应的功能和服务，也不再处理您相应的个人信息。但您撤回同意或授权的决定，不会影响我们此前基于您的授权而开展的个人信息处理。
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section">
|
||||
<view class="section-title">八、未成年人保护</view>
|
||||
<view class="paragraph">
|
||||
8.1 我们非常重视对未成年人个人信息的保护。如您为未满18周岁的未成年人，在使用我们的服务前，应在您的父母或其他监护人监护、指导下共同阅读本隐私政策，并征得您的监护人同意。
|
||||
</view>
|
||||
<view class="paragraph">
|
||||
8.2 如果我们发现自己在未事先获得可证实的父母或监护人同意的情况下收集了未成年人的个人信息，则会尽快删除相关数据。
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section">
|
||||
<view class="section-title">九、隐私政策的更新</view>
|
||||
<view class="paragraph">
|
||||
9.1 我们可能会不时更新本隐私政策。当我们更新隐私政策时，我们将在平台发布最新版本并更新生效日期。
|
||||
</view>
|
||||
<view class="paragraph">
|
||||
9.2 对于重大变更，我们还会提供更为显著的通知（包括对于特定服务，我们会通过电子邮件或站内信方式发送通知，说明隐私政策的具体变更内容）。
|
||||
</view>
|
||||
<view class="paragraph">
|
||||
9.3 本隐私政策所指的重大变更包括但不限于：我们的服务模式发生重大变化；个人信息共享、转让或公开披露的主要对象发生变更等。
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section">
|
||||
<view class="section-title">十、如何联系我们</view>
|
||||
<view class="paragraph">
|
||||
10.1 如您对本隐私政策有任何疑问、意见或建议，可通过以下方式与我们联系：
|
||||
</view>
|
||||
<view class="paragraph">
|
||||
- 客服电话：400-123-4567
|
||||
</view>
|
||||
<view class="paragraph">
|
||||
- 电子邮箱：privacy@cunkebao.com
|
||||
</view>
|
||||
<view class="paragraph">
|
||||
10.2 一般情况下，我们将在收到您的问题、意见或建议后15个工作日内予以回复。
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.privacy-container {
|
||||
background-color: #ffffff;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-bottom: 20rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
text-align: center;
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 20rpx;
|
||||
text-align: justify;
|
||||
}
|
||||
</style>
|
||||
154
Cunkebao/pages/agreement/user.vue
Normal file
154
Cunkebao/pages/agreement/user.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<view class="agreement-container">
|
||||
<u-navbar
|
||||
title="用户协议"
|
||||
bgColor="#ffffff"
|
||||
></u-navbar>
|
||||
|
||||
<view class="content">
|
||||
<view class="title">村客宝用户协议</view>
|
||||
<view class="date">生效日期：2023年1月1日</view>
|
||||
|
||||
<view class="section">
|
||||
<view class="section-title">一、总则</view>
|
||||
<view class="paragraph">
|
||||
1.1 村客宝用户协议（以下简称"本协议"）是您与村客宝平台（以下简称"我们"）之间就村客宝平台服务等相关事宜所订立的契约。
|
||||
</view>
|
||||
<view class="paragraph">
|
||||
1.2 您应当在使用村客宝平台服务之前认真阅读本协议全部内容。如您对本协议有任何疑问，可随时咨询我们的客服。
|
||||
</view>
|
||||
<view class="paragraph">
|
||||
1.3 您点击"同意"或"下一步"，或您使用村客宝平台服务，即视为您已阅读并同意签署本协议。本协议自您确认同意之时起生效。
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section">
|
||||
<view class="section-title">二、账号注册与使用</view>
|
||||
<view class="paragraph">
|
||||
2.1 您应当保证您具有完全民事行为能力，能够独立承担民事责任，并独立承担使用村客宝平台服务的一切法律责任。
|
||||
</view>
|
||||
<view class="paragraph">
|
||||
2.2 您注册成功后，我们将给予您一个用户账号及相应的密码，该用户账号和密码由您负责保管。
|
||||
</view>
|
||||
<view class="paragraph">
|
||||
2.3 您应当对您的账号负责，并就账号项下的一切行为负全部责任。因您保管不当等自身原因导致的任何损失或损害，我们不承担责任。
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section">
|
||||
<view class="section-title">三、服务内容</view>
|
||||
<view class="paragraph">
|
||||
3.1 村客宝平台服务的具体内容由我们根据实际情况提供，包括但不限于信息发布、交易撮合、数据统计等。
|
||||
</view>
|
||||
<view class="paragraph">
|
||||
3.2 我们有权不经事先通知，随时变更、中断或终止部分或全部的服务。
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section">
|
||||
<view class="section-title">四、用户义务</view>
|
||||
<view class="paragraph">
|
||||
4.1 您在使用村客宝平台服务时，必须遵守中华人民共和国相关法律法规。
|
||||
</view>
|
||||
<view class="paragraph">
|
||||
4.2 您不得利用村客宝平台服务从事违法违规行为，包括但不限于发布违法信息、侵犯他人知识产权等。
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section">
|
||||
<view class="section-title">五、知识产权</view>
|
||||
<view class="paragraph">
|
||||
5.1 村客宝平台所包含的全部智力成果，包括但不限于程序、源代码、图标、图饰、图像、图表、文字等，均受著作权法、商标法、专利法及其他知识产权法律法规的保护。
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section">
|
||||
<view class="section-title">六、隐私保护</view>
|
||||
<view class="paragraph">
|
||||
6.1 保护您的隐私是我们的重要原则，我们会采取合理的措施保护您的个人信息。
|
||||
</view>
|
||||
<view class="paragraph">
|
||||
6.2 有关隐私保护的详细政策，请参见《隐私政策》。
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section">
|
||||
<view class="section-title">七、协议修改</view>
|
||||
<view class="paragraph">
|
||||
7.1 我们有权随时修改本协议，并在修改后的协议生效前通过适当方式通知您。
|
||||
</view>
|
||||
<view class="paragraph">
|
||||
7.2 如您不同意修改后的协议，可以选择停止使用村客宝平台服务；如您继续使用村客宝平台服务，则视为您已同意修改后的协议。
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section">
|
||||
<view class="section-title">八、法律适用与争议解决</view>
|
||||
<view class="paragraph">
|
||||
8.1 本协议的成立、生效、履行、解释及纠纷解决，适用中华人民共和国大陆地区法律。
|
||||
</view>
|
||||
<view class="paragraph">
|
||||
8.2 若您和我们之间发生任何纠纷或争议，首先应友好协商解决；协商不成的，您同意将纠纷或争议提交至本协议签订地有管辖权的人民法院管辖。
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.agreement-container {
|
||||
background-color: #ffffff;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-bottom: 20rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
text-align: center;
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 20rpx;
|
||||
text-align: justify;
|
||||
}
|
||||
</style>
|
||||
312
Cunkebao/pages/index/index.vue
Normal file
312
Cunkebao/pages/index/index.vue
Normal 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>
|
||||
445
Cunkebao/pages/login/index.vue
Normal file
445
Cunkebao/pages/login/index.vue
Normal file
@@ -0,0 +1,445 @@
|
||||
<template>
|
||||
<view class="login-container">
|
||||
<!-- 登录方式切换 -->
|
||||
<view class="tabs-container">
|
||||
<u-tabs
|
||||
:list="tabsList"
|
||||
:current="current"
|
||||
@change="handleTabChange"
|
||||
activeStyle="color: #4080ff; font-weight: bold; font-size: 36rpx"
|
||||
inactiveStyle="color: #999999; font-size: 36rpx"
|
||||
itemStyle="height: 96rpx; padding: 0 30rpx;"
|
||||
lineColor="#4080ff"
|
||||
lineWidth="48rpx"
|
||||
lineHeight="4rpx"
|
||||
:itemWidth="300"
|
||||
></u-tabs>
|
||||
</view>
|
||||
|
||||
<!-- 提示文字 -->
|
||||
<view class="login-hint">
|
||||
你所在地区仅支持 手机号 / 微信 / Apple 登录
|
||||
</view>
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<view class="login-form">
|
||||
<!-- 手机号输入 -->
|
||||
<u-form-item>
|
||||
<u--input
|
||||
v-model="form.mobile"
|
||||
placeholder="+86手机号"
|
||||
prefixIcon="phone"
|
||||
prefixIconStyle="font-size: 52rpx;color: #909399;padding-right: 16rpx;"
|
||||
clearable
|
||||
type="number"
|
||||
maxlength="11"
|
||||
border="none"
|
||||
fontSize="36rpx"
|
||||
></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<!-- 验证码输入 -->
|
||||
<u-form-item v-if="current === 0">
|
||||
<u--input
|
||||
v-model="form.code"
|
||||
placeholder="验证码"
|
||||
clearable
|
||||
type="number"
|
||||
maxlength="6"
|
||||
border="none"
|
||||
inputAlign="left"
|
||||
fontSize="36rpx"
|
||||
></u--input>
|
||||
<template #right>
|
||||
<view class="code-btn-wrap">
|
||||
<u-button
|
||||
@tap="getCode"
|
||||
:text="codeTips"
|
||||
type="primary"
|
||||
size="mini"
|
||||
:disabled="!isValidMobile || sending"
|
||||
customStyle="width: 200rpx;height: 76rpx;font-size: 32rpx;"
|
||||
></u-button>
|
||||
</view>
|
||||
</template>
|
||||
</u-form-item>
|
||||
|
||||
<!-- 密码输入 -->
|
||||
<u-form-item v-if="current === 1">
|
||||
<u--input
|
||||
v-model="form.password"
|
||||
placeholder="密码"
|
||||
prefixIcon="lock"
|
||||
prefixIconStyle="font-size: 52rpx;color: #909399;padding-right: 16rpx;"
|
||||
:password="!showPassword"
|
||||
clearable
|
||||
border="none"
|
||||
fontSize="36rpx"
|
||||
></u--input>
|
||||
<template #right>
|
||||
<u-icon
|
||||
:name="showPassword ? 'eye' : 'eye-off'"
|
||||
color="#909399"
|
||||
size="52"
|
||||
@click="showPassword = !showPassword"
|
||||
></u-icon>
|
||||
</template>
|
||||
</u-form-item>
|
||||
|
||||
<!-- 用户协议 -->
|
||||
<view class="agreement">
|
||||
<u-checkbox
|
||||
v-model="isAgree"
|
||||
shape="circle"
|
||||
activeColor="#4080ff"
|
||||
iconSize="24"
|
||||
></u-checkbox>
|
||||
<text class="agreement-text">
|
||||
已阅读并同意
|
||||
<text class="link" @click="goToUserAgreement"> 用户协议 </text>
|
||||
与
|
||||
<text class="link" @click="goToPrivacyPolicy"> 隐私政策 </text>
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<!-- 登录按钮 -->
|
||||
<u-button
|
||||
text="登录"
|
||||
type="info"
|
||||
:disabled="!canLogin"
|
||||
@click="handleLogin"
|
||||
customStyle="width: 100%; margin-top: 40rpx; height: 96rpx; border-radius: 24rpx; font-size: 40rpx; font-weight: bold; background-color: #2563eb;"
|
||||
></u-button>
|
||||
|
||||
<!-- 分割线 -->
|
||||
<view class="divider">
|
||||
<view class="line"></view>
|
||||
<view class="text">或</view>
|
||||
<view class="line"></view>
|
||||
</view>
|
||||
|
||||
<!-- 第三方登录 -->
|
||||
<view class="other-login">
|
||||
<!-- 微信登录 -->
|
||||
<u-button
|
||||
text="使用微信登录"
|
||||
@click="handleWechatLogin"
|
||||
icon="weixin-fill"
|
||||
iconSize="52"
|
||||
plain
|
||||
customStyle="width: 100%; margin-bottom: 20rpx; height: 96rpx; border-radius: 24rpx; border-color: #07c160; color: #07c160; font-size: 40rpx;"
|
||||
></u-button>
|
||||
|
||||
<!-- Apple登录 -->
|
||||
<u-button
|
||||
text="使用 Apple 登录"
|
||||
@click="handleAppleLogin"
|
||||
plain
|
||||
customStyle="width: 100%; margin-bottom: 20rpx; height: 96rpx; border-radius: 24rpx; border-color: #333333; color: #333333; font-size: 40rpx;"
|
||||
>
|
||||
<template #icon>
|
||||
<image src="/static/images/apple.png" class="apple-icon"></image>
|
||||
</template>
|
||||
</u-button>
|
||||
</view>
|
||||
|
||||
<!-- 联系我们 -->
|
||||
<view class="contact-us" @click="handleContact">联系我们</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabsList: [
|
||||
{
|
||||
name: '验证码登录'
|
||||
},
|
||||
{
|
||||
name: '密码登录'
|
||||
}
|
||||
],
|
||||
current: 0, // 当前选中的选项卡索引
|
||||
form: {
|
||||
mobile: '',
|
||||
password: '',
|
||||
code: ''
|
||||
},
|
||||
showPassword: false, // 是否显示密码
|
||||
isAgree: false, // 是否同意协议
|
||||
sending: false, // 是否正在发送验证码
|
||||
codeTips: '发送验证码' // 验证码按钮文字
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 手机号是否有效
|
||||
isValidMobile() {
|
||||
return /^1\d{10}$/.test(this.form.mobile);
|
||||
},
|
||||
// 是否可以登录
|
||||
canLogin() {
|
||||
if (!this.isAgree || !this.isValidMobile) return false;
|
||||
|
||||
if (this.current === 1) {
|
||||
return !!this.form.password;
|
||||
} else {
|
||||
return !!this.form.code;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 处理选项卡切换
|
||||
handleTabChange(index) {
|
||||
this.current = index;
|
||||
},
|
||||
|
||||
// 处理登录
|
||||
handleLogin() {
|
||||
if (!this.canLogin) return;
|
||||
|
||||
if (this.current === 1) {
|
||||
this.passwordLogin();
|
||||
} else {
|
||||
this.codeLogin();
|
||||
}
|
||||
},
|
||||
|
||||
// 密码登录
|
||||
passwordLogin() {
|
||||
uni.showLoading({
|
||||
title: '登录中...'
|
||||
});
|
||||
|
||||
// 这里替换为实际的登录API调用
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '登录成功',
|
||||
icon: 'success'
|
||||
});
|
||||
// 登录成功后跳转到个人中心页面
|
||||
uni.switchTab({
|
||||
url: '/pages/profile/index'
|
||||
});
|
||||
}, 1500);
|
||||
},
|
||||
|
||||
// 验证码登录
|
||||
codeLogin() {
|
||||
uni.showLoading({
|
||||
title: '登录中...'
|
||||
});
|
||||
|
||||
// 这里替换为实际的登录API调用
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '登录成功',
|
||||
icon: 'success'
|
||||
});
|
||||
// 登录成功后跳转到个人中心页面
|
||||
uni.switchTab({
|
||||
url: '/pages/profile/index'
|
||||
});
|
||||
}, 1500);
|
||||
},
|
||||
|
||||
// 获取验证码
|
||||
getCode() {
|
||||
if (this.sending) return;
|
||||
|
||||
// 验证手机号
|
||||
if (!this.isValidMobile) {
|
||||
uni.showToast({
|
||||
title: '请输入正确的手机号',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
uni.showLoading({
|
||||
title: '发送中...'
|
||||
});
|
||||
|
||||
this.sending = true;
|
||||
this.codeTips = '60s';
|
||||
|
||||
let secondsLeft = 60;
|
||||
const timer = setInterval(() => {
|
||||
secondsLeft--;
|
||||
this.codeTips = `${secondsLeft}s`;
|
||||
|
||||
if (secondsLeft <= 0) {
|
||||
clearInterval(timer);
|
||||
this.sending = false;
|
||||
this.codeTips = '发送验证码';
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
// 这里替换为实际的发送验证码API调用
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '验证码已发送',
|
||||
icon: 'success'
|
||||
});
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
// 微信登录
|
||||
handleWechatLogin() {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: (res) => {
|
||||
console.log('微信登录成功', res);
|
||||
// 获取用户信息
|
||||
uni.getUserInfo({
|
||||
provider: 'weixin',
|
||||
success: (infoRes) => {
|
||||
console.log('获取用户信息成功', infoRes);
|
||||
// 处理登录逻辑
|
||||
}
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('微信登录失败', err);
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
|
||||
// #ifdef H5 || APP-PLUS
|
||||
uni.showToast({
|
||||
title: '请在微信中打开',
|
||||
icon: 'none'
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
|
||||
// Apple登录
|
||||
handleAppleLogin() {
|
||||
// #ifdef APP-PLUS
|
||||
uni.login({
|
||||
provider: 'apple',
|
||||
success: (res) => {
|
||||
console.log('Apple登录成功', res);
|
||||
// 处理登录逻辑
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('Apple登录失败', err);
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
|
||||
// #ifdef H5 || MP-WEIXIN
|
||||
uni.showToast({
|
||||
title: '请在iOS设备上使用',
|
||||
icon: 'none'
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
|
||||
// 前往用户协议
|
||||
goToUserAgreement() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/agreement/user'
|
||||
});
|
||||
},
|
||||
|
||||
// 前往隐私政策
|
||||
goToPrivacyPolicy() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/agreement/privacy'
|
||||
});
|
||||
},
|
||||
|
||||
// 联系我们
|
||||
handleContact() {
|
||||
uni.showModal({
|
||||
title: '联系我们',
|
||||
content: '客服电话：400-123-4567\n工作时间：9:00-18:00',
|
||||
showCancel: false
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login-container {
|
||||
padding: 40rpx;
|
||||
background-color: #ffffff;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.tabs-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.login-hint {
|
||||
font-size: 32rpx;
|
||||
color: #999999;
|
||||
margin: 30rpx 0 60rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
.u-form-item {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.code-btn-wrap {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.agreement {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 40rpx 0;
|
||||
|
||||
.agreement-text {
|
||||
font-size: 32rpx;
|
||||
color: #999999;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 60rpx 0;
|
||||
|
||||
.line {
|
||||
flex: 1;
|
||||
height: 2px;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #999999;
|
||||
padding: 0 30rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.apple-icon {
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.contact-us {
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
color: #666666;
|
||||
margin-top: 60rpx;
|
||||
}
|
||||
</style>
|
||||
297
Cunkebao/pages/profile/index.vue
Normal file
297
Cunkebao/pages/profile/index.vue
Normal file
@@ -0,0 +1,297 @@
|
||||
<template>
|
||||
<view class="profile-container">
|
||||
<!-- 顶部导航栏 -->
|
||||
<view class="header">
|
||||
<view class="title">我的</view>
|
||||
<view class="header-icons">
|
||||
<u-icon name="setting" size="26" class="icon-setting" @click="goToSetting"></u-icon>
|
||||
<u-icon name="bell" size="26" class="icon-bell" @click="goToNotification"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 用户信息卡片 -->
|
||||
<view class="user-card">
|
||||
<view class="avatar-wrap">
|
||||
<template v-if="userInfo.avatar">
|
||||
<image class="avatar" :src="userInfo.avatar"></image>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="avatar-icon">
|
||||
<u-icon name="account-fill" size="60" color="#4080ff"></u-icon>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<view class="user-info">
|
||||
<view class="username">卡若</view>
|
||||
<view class="account">账号: 84675209</view>
|
||||
</view>
|
||||
<view class="edit-profile-btn" @click="editProfile">
|
||||
编辑资料
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 功能菜单列表 -->
|
||||
<view class="menu-list">
|
||||
<view class="menu-item" @click="navigateTo('/pages/device/index')">
|
||||
<view class="menu-left">
|
||||
<u-icon name="setting" size="28" color="#4080ff" class="menu-icon"></u-icon>
|
||||
<text class="menu-title">设备管理</text>
|
||||
</view>
|
||||
<u-icon name="arrow-right" size="20" color="#c8c9cc"></u-icon>
|
||||
</view>
|
||||
|
||||
<view class="menu-item" @click="navigateTo('/pages/wechat/index')">
|
||||
<view class="menu-left">
|
||||
<u-icon name="weixin-fill" size="28" color="#07c160" class="menu-icon"></u-icon>
|
||||
<text class="menu-title">微信号管理</text>
|
||||
</view>
|
||||
<u-icon name="arrow-right" size="20" color="#c8c9cc"></u-icon>
|
||||
</view>
|
||||
|
||||
<view class="menu-item" @click="navigateTo('/pages/traffic/index')">
|
||||
<view class="menu-left">
|
||||
<u-icon name="wifi" size="28" color="#fa3534" class="menu-icon"></u-icon>
|
||||
<text class="menu-title">流量池</text>
|
||||
</view>
|
||||
<u-icon name="arrow-right" size="20" color="#c8c9cc"></u-icon>
|
||||
</view>
|
||||
|
||||
<view class="menu-item" @click="navigateTo('/pages/content/index')">
|
||||
<view class="menu-left">
|
||||
<u-icon name="folder" size="28" color="#ff9900" class="menu-icon"></u-icon>
|
||||
<text class="menu-title">内容库</text>
|
||||
</view>
|
||||
<u-icon name="arrow-right" size="20" color="#c8c9cc"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 退出登录按钮 -->
|
||||
<view class="logout-btn" @click="handleLogout">
|
||||
<u-icon name="arrow-left" color="#ff3c2a" size="18"></u-icon>
|
||||
<text class="logout-text">退出登录</text>
|
||||
</view>
|
||||
|
||||
<!-- 底部导航栏 -->
|
||||
<CustomTabBar active="profile"></CustomTabBar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CustomTabBar from '@/components/CustomTabBar.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CustomTabBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
userInfo: {
|
||||
avatar: null,
|
||||
username: '卡若',
|
||||
account: '84675209'
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// 获取用户信息
|
||||
this.getUserInfo();
|
||||
},
|
||||
methods: {
|
||||
// 获取用户信息
|
||||
getUserInfo() {
|
||||
// 这里可以添加获取用户信息的API调用
|
||||
console.log('获取用户信息');
|
||||
// 示例数据，实际应从API获取
|
||||
this.userInfo = {
|
||||
avatar: null, // 设置为 null，使用默认图标
|
||||
username: '卡若',
|
||||
account: '84675209'
|
||||
};
|
||||
},
|
||||
|
||||
// 跳转到设置页面
|
||||
goToSetting() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/setting/index'
|
||||
});
|
||||
},
|
||||
|
||||
// 跳转到通知页面
|
||||
goToNotification() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/notification/index'
|
||||
});
|
||||
},
|
||||
|
||||
// 编辑个人资料
|
||||
editProfile() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/profile/edit'
|
||||
});
|
||||
},
|
||||
|
||||
// 页面导航
|
||||
navigateTo(url) {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
});
|
||||
},
|
||||
|
||||
// 处理退出登录
|
||||
handleLogout() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要退出登录吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// 清除登录状态
|
||||
// uni.removeStorageSync('token');
|
||||
// uni.removeStorageSync('userInfo');
|
||||
|
||||
// 跳转到登录页面
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/index'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.profile-container {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
position: relative;
|
||||
padding-bottom: 150rpx; /* 为底部导航栏预留空间，从110rpx更新为150rpx */
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 40rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.title {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.header-icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon-setting {
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-card {
|
||||
margin: 20rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.avatar-wrap {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
margin-right: 30rpx;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
flex: 1;
|
||||
|
||||
.username {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.account {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-profile-btn {
|
||||
padding: 12rpx 30rpx;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 30rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
margin: 20rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30rpx 40rpx;
|
||||
border-bottom: 2rpx solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.menu-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.menu-icon {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 60rpx auto;
|
||||
width: 200rpx;
|
||||
|
||||
.logout-text {
|
||||
font-size: 32rpx;
|
||||
color: #ff3c2a;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
203
Cunkebao/pages/scenarios/create.vue
Normal file
203
Cunkebao/pages/scenarios/create.vue
Normal 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>
|
||||
482
Cunkebao/pages/scenarios/detail.vue
Normal file
482
Cunkebao/pages/scenarios/detail.vue
Normal file
@@ -0,0 +1,482 @@
|
||||
<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: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
text-align: center;
|
||||
padding: 40rpx 0;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
447
Cunkebao/pages/scenarios/index.vue
Normal file
447
Cunkebao/pages/scenarios/index.vue
Normal file
@@ -0,0 +1,447 @@
|
||||
<template>
|
||||
<view class="scenarios-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="plus" size="26" class="icon-add" @click="createNewPlan"></u-icon>
|
||||
</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">
|
||||
<u-icon name="arrow-up-fill" size="16" color="#2fc25b"></u-icon>
|
||||
<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">
|
||||
<u-icon name="arrow-up-fill" size="16" color="#2fc25b"></u-icon>
|
||||
<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">
|
||||
<u-icon name="arrow-up-fill" size="16" color="#2fc25b"></u-icon>
|
||||
<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">
|
||||
<u-icon name="arrow-up-fill" size="16" color="#2fc25b"></u-icon>
|
||||
<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">
|
||||
<u-icon name="arrow-up-fill" size="16" color="#2fc25b"></u-icon>
|
||||
<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">
|
||||
<u-icon name="arrow-up-fill" size="16" color="#2fc25b"></u-icon>
|
||||
<text>+11.2%</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- AI智能获客 版块标题 -->
|
||||
<view class="section-title">
|
||||
<u-icon name="robot" size="28" color="#4080ff"></u-icon>
|
||||
<text>AI智能获客</text>
|
||||
<text class="beta-tag">Beta</text>
|
||||
</view>
|
||||
|
||||
<!-- AI智能加友 -->
|
||||
<view class="channel-card" @click="navigateToDetail('ai-friend')">
|
||||
<view class="channel-icon bg-blue">
|
||||
<u-icon name="star" size="28" color="#ffffff"></u-icon>
|
||||
</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">
|
||||
<u-icon name="arrow-up-fill" size="16" color="#2fc25b"></u-icon>
|
||||
<text>+18.5%</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- AI群引流 -->
|
||||
<view class="channel-card" @click="navigateToDetail('ai-group')">
|
||||
<view class="channel-icon bg-blue">
|
||||
<u-icon name="star" size="28" color="#ffffff"></u-icon>
|
||||
</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">178</view>
|
||||
</view>
|
||||
<view class="data-trend up">
|
||||
<u-icon name="arrow-up-fill" size="16" color="#2fc25b"></u-icon>
|
||||
<text>+15.2%</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- AI场景转化 -->
|
||||
<view class="channel-card" @click="navigateToDetail('ai-convert')">
|
||||
<view class="channel-icon bg-blue">
|
||||
<u-icon name="star" size="28" color="#ffffff"></u-icon>
|
||||
</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">
|
||||
<u-icon name="arrow-up-fill" size="16" color="#2fc25b"></u-icon>
|
||||
<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: #f5f5f5;
|
||||
position: relative;
|
||||
padding-bottom: 150rpx; /* 为底部导航栏预留空间 */
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.channel-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 15rpx;
|
||||
|
||||
.channel-card {
|
||||
width: calc(50% - 15rpx);
|
||||
margin: 7.5rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx 15rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.channel-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.channel-desc {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
margin-bottom: 15rpx;
|
||||
height: 68rpx;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.channel-data {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.data-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.data-label {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.data-value {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.data-trend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 22rpx;
|
||||
|
||||
&.up {
|
||||
color: #2fc25b;
|
||||
}
|
||||
|
||||
&.down {
|
||||
color: #fa3534;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx 20rpx 15rpx;
|
||||
margin: 15rpx 7.5rpx 5rpx;
|
||||
|
||||
u-icon {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.beta-tag {
|
||||
font-size: 22rpx;
|
||||
color: #4080ff;
|
||||
background-color: #ecf5ff;
|
||||
padding: 2rpx 10rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1
Cunkebao/pages/work/index.vue
Normal file
1
Cunkebao/pages/work/index.vue
Normal file
@@ -0,0 +1 @@
|
||||
|
||||
Reference in New Issue
Block a user