fnvtk/CKB-mini-program
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

小程序提交

Browse Source
This commit is contained in:
Ghost
2026-01-07 11:00:09 +08:00
parent c15bce23a4
commit 0e79aca04e
54 changed files with 7324 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

912
pages/index/index.vue Normal file
View File

@@ -0,0 +1,912 @@
<template>
<view class="container">
<!-- Header Navigation -->
<view class="header-nav">
<view class="nav-content">
<view class="nav-title">存客宝</view>
<view class="nav-avatar" @click="goToLogin">
<image class="avatar-img" src="/static/tabbar/me.png" mode="aspectFit"></image>
</view>
</view>
</view>
<!-- Hero Section -->
<view class="hero-section">
<view class="hero-content">
<view class="badge">场景化客户留存 SaaS 工具</view>
<view class="hero-title">
<text class="title-main">存客宝</text>
<text class="title-sub">私域流量运营专家</text>
</view>
<view class="hero-desc">
专注于场景化客户留存的私域流量运营工具，帮助中小企业将多平台公域流量高效转化为私域客户资产，通过数据驱动的精细化运营提升客户粘性和生命周期价值
</view>
</view>
</view>
<!-- 立即体验按钮 -->
<view class="cta-button-section">
<button class="cta-button" @click="showDialogBtn">
<text class="button-text">立即体验</text>
<text class="arrow">→</text>
</button>
</view>
<!-- Core Values Section -->
<view class="section values-section">
<view class="section-header">
<view class="section-title">核心价值与优势</view>
<view class="section-desc">通过统一管理、智能触达和数据驱动，全面提升企业私域运营效率</view>
</view>
<view class="values-grid">
<view class="value-card">
<view class="card-icon users-icon">👥</view>
<view class="card-title">统一管理 (存客)</view>
<view class="card-desc">一站式平台统一存储、管理和追踪来自各渠道的客户数据及关联的微信号状态，告别数据分散管理困难</view>
</view>
<view class="value-card">
<view class="card-icon target-icon">🎯</view>
<view class="card-title">智能触达 (获客)</view>
<view class="card-desc">场景化获客配置打通线上线下流量入口，利用AI智能内容库和多平台工作台高效触达转化客户</view>
</view>
<view class="value-card">
<view class="card-icon chart-icon">📊</view>
<view class="card-title">数据驱动 (宝)</view>
<view class="card-desc">通过数据统计与分析量化运营效果，优化营销策略，实现营销活动的标准化和数据化决策</view>
</view>
</view>
</view>
<!-- Functional Modules Section -->
<view class="section modules-section">
<view class="section-header">
<view class="section-title">五大核心功能模块</view>
<view class="section-desc">从数据概览到客户获取，从内容管理到多平台运营，全方位覆盖私域运营需求</view>
</view>
<view class="modules-grid">
<view class="module-card primary-border">
<view class="module-header">
<view class="module-icon primary-bg">📊</view>
<view class="module-title">数据概览</view>
</view>
<view class="module-desc">实时展示微信号总数、健康度、新增好友数等关键指标，提供运营全局概览和数据可视化分析</view>
</view>
<view class="module-card secondary-border">
<view class="module-header">
<view class="module-icon secondary-bg">🌐</view>
<view class="module-title">场景化获客</view>
</view>
<view class="module-desc">标准化多渠道获客入口配置，支持抖音、小红书、公众号、海报、付款码等多种获客场景</view>
</view>
<view class="module-card accent-border">
<view class="module-header">
<view class="module-icon accent-bg">🧠</view>
<view class="module-title">智能内容库</view>
</view>
<view class="module-desc">多源内容采集、智能分类标签、AI分析改写，提供内容集中管理和API接口开放能力</view>
</view>
<view class="module-card orange-border">
<view class="module-header">
<view class="module-icon orange-bg">⚡</view>
<view class="module-title">运营工作台</view>
</view>
<view class="module-desc">社交矩阵运营操作中心，支持多渠道内容推送、跨设备同步、智能优化建议和任务调度</view>
</view>
<view class="module-card red-border">
<view class="module-header">
<view class="module-icon red-bg">⚙️</view>
<view class="module-title">设备监控</view>
</view>
<view class="module-desc">实时监控设备状态、微信号健康度，支持微信号替换后的数据继承和异常预警机制</view>
</view>
</view>
</view>
<!-- Scenario Examples Section -->
<view class="section scenarios-section">
<view class="section-header">
<view class="section-title">应用场景示例</view>
<view class="section-desc">不同行业和业务场景下的实际应用案例</view>
</view>
<view class="scenarios-grid">
<view class="scenario-card">
<view class="scenario-badge">电商零售</view>
<view class="scenario-title">多平台流量整合</view>
<view class="scenario-desc">某服装品牌通过存客宝整合抖音、小红书、微信公众号等多平台流量，统一管理客户数据，通过场景化获客配置提升转化率30%，客户复购率提升45%。</view>
<view class="scenario-tags">
<text class="tag">抖音获客</text>
<text class="tag">内容分发</text>
<text class="tag">客户留存</text>
</view>
</view>
<view class="scenario-card">
<view class="scenario-badge">教育培训</view>
<view class="scenario-title">智能内容运营</view>
<view class="scenario-desc">某在线教育机构利用AI内容改写功能，将课程内容智能适配不同平台特点，内容生产效率提升60%，学员互动率提升35%，课程转化率显著提升。</view>
<view class="scenario-tags">
<text class="tag">AI改写</text>
<text class="tag">多平台推送</text>
<text class="tag">数据分析</text>
</view>
</view>
</view>
</view>
<!-- CTA Section -->
<view class="cta-section">
<view class="cta-content">
<view class="cta-title">开始您的私域运营之旅</view>
<view class="cta-desc">加入数千家企业的选择，用存客宝提升您的客户留存和运营效率</view>
<button class="cta-main-button" @click="showDialogBtn">
<text class="button-text" style='color:#333;'>立即体验</text>
<text class="arrow" style='color:#333;'>→</text>
</button>
<button class="cta-secondary-button" @click="goToSite">
<text class="button-text">访问老游条电竞学院</text>
<text class="arrow">→</text>
</button>
<view class="stats-grid">
<view class="stat-item">
<view class="stat-number">1000+</view>
<view class="stat-label">企业用户</view>
</view>
<view class="stat-item">
<view class="stat-number">50万+</view>
<view class="stat-label">管理客户</view>
</view>
<view class="stat-item">
<view class="stat-number">30%</view>
<view class="stat-label">转化提升</view>
</view>
<view class="stat-item">
<view class="stat-number">24/7</view>
<view class="stat-label">技术支持</view>
</view>
</view>
</view>
</view>
<!-- Footer -->
<view class="footer">
<view class="footer-text">© {{currentYear}} 存客宝. 保留所有权利 | 遵循"事事有回应，件件有结果，日日精进"的服务理念</view>
</view>
<!-- 弹窗遮罩 -->
<view v-if="showDialog" class="dialog-overlay" @click="hideDialog">
<view class="dialog-content" @click.stop>
<view class="dialog-header">
<view class="dialog-title">申请体验存客宝</view>
<view class="dialog-desc">我们的客服团队将在24小时内为您创建专属体验账号，并提供一对一的产品演示和使用指导。</view>
</view>
<view class="dialog-form">
<view class="form-item">
<view class="form-label">手机号</view>
<input class="form-input" v-model="phoneNumber" placeholder="请输入手机号" type="number" maxlength="11" />
</view>
</view>
<view class="dialog-buttons">
<button class="dialog-button cancel-button" @click="hideDialog">取消</button>
<button class="dialog-button confirm-button" @click="confirmBtn">确认</button>
</view>
</view>
</view>
<!-- 成功提示 -->
<view v-if="showSuccessMessage" class="success-toast">
<text class="success-text">申请已提交</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
showDialog: false,
showSuccessMessage: false,
taskid: 127,
currentYear: new Date().getFullYear(),
phoneNumber: ''
}
},
methods: {
showDialogBtn() {
this.showDialog = true
},
hideDialog() {
this.showDialog = false
},
goToLogin() {
uni.navigateTo({
url: '/pages/login/login'
})
},
goToSite() {
uni.navigateTo({
url: '/pages/index/site'
})
},
confirmBtn() {
let that = this;
if (!this.phoneNumber) {
uni.showToast({
title: '请输入手机号',
icon: 'none',
duration: 2000
})
return
}else{
uni.showLoading({
title: '请求中...',
mask: true
})
uni.request({
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
'token': that.token
},
url: that.$config.apiUrl2 + '/v1/frontend/business/poster/decryptphones',
data: {
id: that.taskid,
phone: this.phoneNumber
},
success: (res) => {
uni.hideLoading();
if (res.data.code == 200) {
this.showDialog = false
uni.showModal({
title: '提示',
content: '申请成功',
success: function(res) {
console.log(res)
}
})
this.showDialog = false
} else {
uni.showToast({
title: '申请失败',
icon: 'none',
duration: 2000
});
}
}
});
}
},
// 获取用户手机号
getPhoneNumber(res) {
let that = this;
if (res.detail.errMsg == "getPhoneNumber:ok") {
uni.showLoading({
title: '请求中...',
mask: true
})
uni.request({
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
'token': that.token
},
url: that.$config.apiUrl2 + '/v1/frontend/business/poster/decryptphone',
data: {
id: that.taskid,
code: res.detail.code
},
success: (res) => {
uni.hideLoading();
if (res.data.code == 10000) {
uni.showModal({
title: '提示',
content: that.task.sTip,
success: function(res) {
console.log(res)
}
})
this.showDialog = false
} else {
uni.showToast({
title: res.data.message,
icon: 'none',
duration: 2000
});
}
}
});
}
},
}
}
</script>
<style lang="scss">
.container {
min-height: 100vh;
background-color: #ffffff;
}
/* Header Navigation */
.header-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10rpx);
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
z-index: 1000;
}
.nav-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24rpx 32rpx;
height: 88rpx;
}
.nav-title {
font-size: 36rpx;
font-weight: bold;
color: #6366f1;
}
.nav-avatar {
width: 64rpx;
height: 64rpx;
border-radius: 50%;
overflow: hidden;
border: 2rpx solid #e5e7eb;
cursor: pointer;
}
.avatar-img {
width: 100%;
height: 100%;
}
/* Hero Section */
.hero-section {
margin-top: calc(88rpx + var(--status-bar-height));
background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, #ffffff 50%, rgba(168, 85, 247, 0.05) 100%);
padding: 80rpx 32rpx 120rpx;
text-align: center;
}
.hero-content {
max-width: 1200rpx;
margin: 0 auto;
}
.badge {
display: inline-block;
background-color: rgba(99, 102, 241, 0.1);
color: #6366f1;
padding: 12rpx 24rpx;
border-radius: 20rpx;
font-size: 24rpx;
font-weight: 500;
margin-bottom: 32rpx;
}
.hero-title {
margin-bottom: 32rpx;
}
.title-main {
display: block;
font-size: 80rpx;
font-weight: bold;
color: #1f2937;
line-height: 1.2;
}
.title-sub {
display: block;
font-size: 64rpx;
font-weight: bold;
color: #6366f1;
margin-top: 16rpx;
}
.hero-desc {
font-size: 32rpx;
color: #6b7280;
line-height: 1.6;
max-width: 1000rpx;
margin: 0 auto;
}
/* CTA Button Section */
.cta-button-section {
padding: 64rpx 32rpx;
text-align: center;
background-color: #ffffff;
}
.cta-button {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
color: white;
border: none;
border-radius: 12rpx;
padding: 24rpx 64rpx;
font-size: 32rpx;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 8rpx 32rpx rgba(99, 102, 241, 0.3);
}
.button-text {
color: white;
}
.arrow {
margin-left: 16rpx;
color: white;
}
/* Section Styles */
.section {
padding: 120rpx 32rpx;
}
.values-section {
background-color: rgba(249, 250, 251, 0.5);
}
.section-header {
text-align: center;
margin-bottom: 80rpx;
}
.section-title {
font-size: 64rpx;
font-weight: bold;
color: #1f2937;
margin-bottom: 24rpx;
}
.section-desc {
font-size: 32rpx;
color: #6b7280;
line-height: 1.6;
max-width: 800rpx;
margin: 0 auto;
}
/* Values Grid */
.values-grid {
display: flex;
flex-direction: column;
gap: 48rpx;
}
.value-card {
background: white;
border-radius: 16rpx;
padding: 48rpx 32rpx;
text-align: center;
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
}
.card-icon {
width: 96rpx;
height: 96rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24rpx;
font-size: 48rpx;
}
.users-icon {
background-color: rgba(99, 102, 241, 0.1);
}
.target-icon {
background-color: rgba(168, 85, 247, 0.1);
}
.chart-icon {
background-color: rgba(34, 197, 94, 0.1);
}
.card-title {
font-size: 36rpx;
font-weight: bold;
color: #1f2937;
margin-bottom: 16rpx;
}
.card-desc {
font-size: 28rpx;
color: #6b7280;
line-height: 1.6;
}
/* Modules Grid */
.modules-grid {
display: flex;
flex-direction: column;
gap: 32rpx;
}
.module-card {
background: white;
border-radius: 12rpx;
padding: 32rpx;
border-left: 8rpx solid;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}
.primary-border { border-left-color: #6366f1; }
.secondary-border { border-left-color: #8b5cf6; }
.accent-border { border-left-color: #22c55e; }
.orange-border { border-left-color: #f97316; }
.red-border { border-left-color: #ef4444; }
.module-header {
display: flex;
align-items: center;
gap: 24rpx;
margin-bottom: 16rpx;
}
.module-icon {
width: 64rpx;
height: 64rpx;
border-radius: 12rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
}
.primary-bg { background-color: rgba(99, 102, 241, 0.1); }
.secondary-bg { background-color: rgba(139, 92, 246, 0.1); }
.accent-bg { background-color: rgba(34, 197, 94, 0.1); }
.orange-bg { background-color: rgba(249, 115, 22, 0.1); }
.red-bg { background-color: rgba(239, 68, 68, 0.1); }
.module-title {
font-size: 32rpx;
font-weight: 600;
color: #1f2937;
}
.module-desc {
font-size: 26rpx;
color: #6b7280;
line-height: 1.6;
}
/* Scenarios Section */
.scenarios-section {
background-color: rgba(249, 250, 251, 0.5);
}
.scenarios-grid {
display: flex;
flex-direction: column;
gap: 48rpx;
}
.scenario-card {
background: white;
border-radius: 16rpx;
padding: 48rpx 32rpx;
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
}
.scenario-badge {
display: inline-block;
background-color: rgba(168, 85, 247, 0.1);
color: #8b5cf6;
padding: 8rpx 16rpx;
border-radius: 12rpx;
font-size: 22rpx;
margin-bottom: 16rpx;
}
.scenario-title {
font-size: 36rpx;
font-weight: bold;
color: #1f2937;
margin-bottom: 24rpx;
}
.scenario-desc {
font-size: 28rpx;
color: #6b7280;
line-height: 1.6;
margin-bottom: 32rpx;
}
.scenario-tags {
display: flex;
flex-wrap: wrap;
gap: 16rpx;
}
.tag {
background-color: rgba(99, 102, 241, 0.1);
color: #6366f1;
padding: 8rpx 16rpx;
border-radius: 12rpx;
font-size: 22rpx;
}
/* CTA Section */
.cta-section {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
padding: 120rpx 32rpx;
}
.cta-content {
text-align: center;
max-width: 1000rpx;
margin: 0 auto;
}
.cta-title {
font-size: 64rpx;
font-weight: bold;
color: white;
margin-bottom: 32rpx;
}
.cta-desc {
font-size: 32rpx;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin-bottom: 64rpx;
}
.cta-main-button {
background: white;
color: #6366f1;
border: none;
border-radius: 12rpx;
padding: 24rpx 64rpx;
font-size: 32rpx;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 32rpx;
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}
.cta-secondary-button {
background: rgba(255, 255, 255, 0.2);
color: white;
border: 2rpx solid rgba(255, 255, 255, 0.3);
border-radius: 12rpx;
padding: 20rpx 48rpx;
font-size: 28rpx;
font-weight: 500;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 64rpx;
backdrop-filter: blur(10rpx);
}
.cta-secondary-button .button-text {
margin-right: 8rpx;
}
.cta-secondary-button .arrow {
font-size: 24rpx;
}
.stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32rpx;
}
.stat-item {
text-align: center;
}
.stat-number {
font-size: 48rpx;
font-weight: bold;
color: white;
margin-bottom: 8rpx;
}
.stat-label {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.8);
}
/* Footer */
.footer {
padding: 64rpx 32rpx;
background-color: #f9fafb;
}
.footer-text {
text-align: center;
font-size: 24rpx;
color: #6b7280;
}
/* Dialog Overlay */
.dialog-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 9998;
padding: 32rpx;
}
/* Dialog Styles */
.dialog-content {
background: white;
border-radius: 16rpx;
padding: 48rpx 32rpx;
max-width: 600rpx;
width: 100%;
box-shadow: 0 16rpx 64rpx rgba(0, 0, 0, 0.2);
}
.dialog-header {
margin-bottom: 32rpx;
}
.dialog-form {
margin-bottom: 32rpx;
}
.form-item {
margin-bottom: 24rpx;
}
.form-label {
font-size: 28rpx;
color: #374151;
margin-bottom: 12rpx;
font-weight: 500;
}
.form-input {
width: 100%;
height: 88rpx;
border: 2rpx solid #e5e7eb;
border-radius: 8rpx;
padding: 0 24rpx;
font-size: 28rpx;
color: #1f2937;
background-color: #ffffff;
box-sizing: border-box;
}
.form-input:focus {
border-color: #6366f1;
outline: none;
}
.dialog-title {
font-size: 40rpx;
font-weight: bold;
color: #1f2937;
margin-bottom: 16rpx;
text-align: center;
}
.dialog-desc {
font-size: 28rpx;
color: #6b7280;
line-height: 1.6;
text-align: center;
}
.dialog-buttons {
display: flex;
gap: 24rpx;
}
.dialog-button {
flex: 1;
padding: 24rpx;
border-radius: 12rpx;
font-size: 32rpx;
font-weight: 600;
border: none;
}
.cancel-button {
background: transparent;
color: #6b7280;
border: 2rpx solid #e5e7eb;
}
.confirm-button {
background: #6366f1;
color: white;
}
/* Success Toast */
.success-toast {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(34, 197, 94, 0.9);
color: white;
padding: 32rpx 48rpx;
border-radius: 16rpx;
z-index: 9999;
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
}
.success-text {
font-size: 32rpx;
font-weight: 600;
color: white;
}
/* 响应式适配 */
@media (min-width: 768rpx) {
.values-grid,
.scenarios-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48rpx;
}
.modules-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32rpx;
}
.stats-grid {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 1024rpx) {
.values-grid {
grid-template-columns: repeat(3, 1fr);
}
.modules-grid {
grid-template-columns: repeat(3, 1fr);
}
}
</style>

167
pages/index/site.vue Normal file
View File

@@ -0,0 +1,167 @@
<template>
<view class="webview-container">
<!-- 头部导航栏 -->
<view class="header-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
<view class="nav-content">
<text class="nav-title">老游条电竞学院</text>
<view class="nav-right"></view>
</view>
</view>
<!-- WebView 内容区域 -->
<view class="webview-content" :style="{ marginTop: (statusBarHeight + 44) + 'px' }">
<web-view :src="webUrl" @message="onMessage" @error="onError" @load="onLoad"></web-view>
</view>
<!-- 加载提示 -->
<view v-if="loading" class="loading-overlay">
<view class="loading-content">
<uni-icons type="spinner-cycle" size="30" color="#007AFF"></uni-icons>
<text class="loading-text">加载中...</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
webUrl: 'https://www.lytiao.com/',
loading: true,
statusBarHeight: 0
}
},
onLoad() {
// 获取状态栏高度
const systemInfo = uni.getSystemInfoSync()
this.statusBarHeight = systemInfo.statusBarHeight || 0
},
methods: {
// 返回上一页
goBack() {
uni.navigateBack({
delta: 1
})
},
// WebView 加载完成
onLoad(event) {
console.log('WebView 加载完成:', event)
this.loading = false
},
// WebView 加载错误
onError(event) {
console.error('WebView 加载错误:', event)
this.loading = false
uni.showToast({
title: '页面加载失败',
icon: 'none',
duration: 2000
})
},
// 接收 WebView 消息
onMessage(event) {
console.log('收到 WebView 消息:', event.detail.data)
}
}
}
</script>
<style scoped>
.webview-container {
width: 100%;
height: 100vh;
background-color: #fff;
}
.header-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid #e5e5e5;
}
.nav-content {
display: flex;
align-items: center;
justify-content: space-between;
height: 44px;
padding: 0 16px;
}
.nav-left {
display: flex;
align-items: center;
cursor: pointer;
}
.back-text {
margin-left: 4px;
font-size: 16px;
color: #333;
}
.nav-title {
font-size: 18px;
font-weight: 600;
color: #333;
text-align: center;
flex: 1;
}
.nav-right {
width: 60px;
}
.webview-content {
width: 100%;
height: calc(100vh - 44px);
}
.loading-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
}
.loading-content {
display: flex;
flex-direction: column;
align-items: center;
}
.loading-text {
margin-top: 12px;
font-size: 14px;
color: #666;
}
/* 适配不同平台 */
/* #ifdef MP-WEIXIN */
.webview-content {
height: calc(100vh - 88px);
}
/* #endif */
/* #ifdef H5 */
.header-nav {
background-color: #fff;
}
/* #endif */
</style>