366 lines
8.0 KiB
Plaintext
366 lines
8.0 KiB
Plaintext
<template>
|
|
<view class="marketing-management">
|
|
<!-- 页面标题 -->
|
|
<view class="page-header">
|
|
<text class="page-title">营销管理</text>
|
|
<text class="page-subtitle">管理营销活动、优惠券、直播等营销工具</text>
|
|
</view>
|
|
|
|
<!-- 营销工具导航 -->
|
|
<view class="marketing-tools">
|
|
<view class="tool-grid">
|
|
<view class="tool-item" @click="go('/pages/mall/admin/store-coupon')">
|
|
<view class="tool-icon">🎫</view>
|
|
<text class="tool-name">优惠券管理</text>
|
|
<text class="tool-desc">创建和管理优惠券活动</text>
|
|
</view>
|
|
<view class="tool-item" @click="go('/pages/mall/admin/store-seckill')">
|
|
<view class="tool-icon">⚡</view>
|
|
<text class="tool-name">秒杀活动</text>
|
|
<text class="tool-desc">管理限时秒杀活动</text>
|
|
</view>
|
|
<view class="tool-item" @click="go('/pages/mall/admin/store-bargain')">
|
|
<view class="tool-icon">🪓</view>
|
|
<text class="tool-name">砍价活动</text>
|
|
<text class="tool-desc">管理砍价促销活动</text>
|
|
</view>
|
|
<view class="tool-item" @click="go('/pages/mall/admin/store-combination')">
|
|
<view class="tool-icon">👥</view>
|
|
<text class="tool-name">拼团活动</text>
|
|
<text class="tool-desc">管理拼团购买活动</text>
|
|
</view>
|
|
<view class="tool-item" @click="go('/pages/mall/admin/live-broadcast')">
|
|
<view class="tool-icon">📺</view>
|
|
<text class="tool-name">直播管理</text>
|
|
<text class="tool-desc">管理直播带货活动</text>
|
|
</view>
|
|
<view class="tool-item" @click="go('/pages/mall/admin/channel-code')">
|
|
<view class="tool-icon">📱</view>
|
|
<text class="tool-name">渠道码</text>
|
|
<text class="tool-desc">生成和管理推广渠道码</text>
|
|
</view>
|
|
<view class="tool-item" @click="go('/pages/mall/admin/store-integral')">
|
|
<view class="tool-icon">💎</view>
|
|
<text class="tool-name">积分商品</text>
|
|
<text class="tool-desc">管理积分兑换商品</text>
|
|
</view>
|
|
<view class="tool-item" @click="go('/pages/mall/admin/sign-in')">
|
|
<view class="tool-icon">📅</view>
|
|
<text class="tool-name">签到活动</text>
|
|
<text class="tool-desc">管理用户签到奖励</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 营销数据统计 -->
|
|
<view class="marketing-stats">
|
|
<text class="section-title">营销数据概览</text>
|
|
<view class="stats-grid">
|
|
<view class="stat-card">
|
|
<text class="stat-value">{{ stats.totalCoupons }}</text>
|
|
<text class="stat-label">优惠券发放</text>
|
|
</view>
|
|
<view class="stat-card">
|
|
<text class="stat-value">{{ stats.activeActivities }}</text>
|
|
<text class="stat-label">进行中活动</text>
|
|
</view>
|
|
<view class="stat-card">
|
|
<text class="stat-value">{{ stats.totalParticipants }}</text>
|
|
<text class="stat-label">活动参与人数</text>
|
|
</view>
|
|
<view class="stat-card">
|
|
<text class="stat-value">¥{{ stats.marketingRevenue }}</text>
|
|
<text class="stat-label">营销收入</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 快捷操作 -->
|
|
<view class="quick-actions">
|
|
<text class="section-title">快捷操作</text>
|
|
<view class="action-buttons">
|
|
<button class="action-btn primary" @click="createActivity">创建新活动</button>
|
|
<button class="action-btn secondary" @click="viewReports">查看营销报表</button>
|
|
<button class="action-btn info" @click="manageCoupons">批量管理优惠券</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref, onMounted } from 'vue'
|
|
|
|
// 响应式数据
|
|
const stats = ref({
|
|
totalCoupons: 0,
|
|
activeActivities: 0,
|
|
totalParticipants: 0,
|
|
marketingRevenue: '0.00'
|
|
})
|
|
|
|
// 统一的导航方法
|
|
const go = (url: string) => {
|
|
// 1) 目标页面必须是非 tabBar 页面
|
|
// 2) 必须在 pages.json / subPackages 注册
|
|
uni.navigateTo({ url })
|
|
}
|
|
|
|
// 快捷操作方法
|
|
const createActivity = () => {
|
|
uni.showActionSheet({
|
|
itemList: ['优惠券活动', '秒杀活动', '砍价活动', '拼团活动', '直播活动'],
|
|
success: (res) => {
|
|
const activities = [
|
|
'/pages/mall/admin/store-coupon',
|
|
'/pages/mall/admin/store-seckill',
|
|
'/pages/mall/admin/store-bargain',
|
|
'/pages/mall/admin/store-combination',
|
|
'/pages/mall/admin/live-broadcast'
|
|
]
|
|
if (activities[res.tapIndex]) {
|
|
go(activities[res.tapIndex])
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
const viewReports = () => {
|
|
uni.showToast({
|
|
title: '营销报表功能开发中',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
|
|
const manageCoupons = () => {
|
|
go('/pages/mall/admin/store-coupon')
|
|
}
|
|
|
|
// 页面初始化
|
|
onMounted(() => {
|
|
loadMarketingStats()
|
|
})
|
|
|
|
// 加载营销统计数据
|
|
const loadMarketingStats = async () => {
|
|
try {
|
|
// 这里应该调用实际的API
|
|
// 暂时使用模拟数据
|
|
stats.value = {
|
|
totalCoupons: 12580,
|
|
activeActivities: 8,
|
|
totalParticipants: 45620,
|
|
marketingRevenue: '128500.00'
|
|
}
|
|
} catch (error) {
|
|
console.error('加载营销统计失败:', error)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.marketing-management {
|
|
padding: 30rpx;
|
|
background-color: #f5f5f5;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
// 页面头部
|
|
.page-header {
|
|
background-color: #fff;
|
|
padding: 40rpx;
|
|
border-radius: 16rpx;
|
|
margin-bottom: 30rpx;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
|
|
.page-title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #212529;
|
|
display: block;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.page-subtitle {
|
|
font-size: 26rpx;
|
|
color: #6c757d;
|
|
}
|
|
}
|
|
|
|
// 营销工具网格
|
|
.marketing-tools {
|
|
background-color: #fff;
|
|
padding: 30rpx;
|
|
border-radius: 16rpx;
|
|
margin-bottom: 30rpx;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
|
|
.tool-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.tool-item {
|
|
width: calc(50% - 10rpx);
|
|
background-color: #f8f9fa;
|
|
padding: 30rpx 20rpx;
|
|
border-radius: 12rpx;
|
|
text-align: center;
|
|
transition: all 0.2s;
|
|
|
|
&:hover {
|
|
background-color: #e3f2fd;
|
|
transform: translateY(-2rpx);
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.tool-icon {
|
|
font-size: 48rpx;
|
|
margin-bottom: 15rpx;
|
|
display: block;
|
|
}
|
|
|
|
.tool-name {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #212529;
|
|
margin-bottom: 8rpx;
|
|
display: block;
|
|
}
|
|
|
|
.tool-desc {
|
|
font-size: 22rpx;
|
|
color: #6c757d;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 营销数据统计
|
|
.marketing-stats {
|
|
background-color: #fff;
|
|
padding: 30rpx;
|
|
border-radius: 16rpx;
|
|
margin-bottom: 30rpx;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
|
|
.section-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #212529;
|
|
margin-bottom: 30rpx;
|
|
display: block;
|
|
}
|
|
|
|
.stats-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.stat-card {
|
|
flex: 1;
|
|
min-width: 200rpx;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
padding: 30rpx 20rpx;
|
|
border-radius: 12rpx;
|
|
text-align: center;
|
|
color: white;
|
|
|
|
.stat-value {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
display: block;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 24rpx;
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 快捷操作
|
|
.quick-actions {
|
|
background-color: #fff;
|
|
padding: 30rpx;
|
|
border-radius: 16rpx;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
|
|
.section-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #212529;
|
|
margin-bottom: 30rpx;
|
|
display: block;
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.action-btn {
|
|
flex: 1;
|
|
min-width: 200rpx;
|
|
padding: 20rpx;
|
|
border-radius: 12rpx;
|
|
font-size: 26rpx;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
|
|
&.primary {
|
|
background-color: #007bff;
|
|
color: white;
|
|
|
|
&:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
}
|
|
|
|
&.secondary {
|
|
background-color: #6c757d;
|
|
color: white;
|
|
|
|
&:hover {
|
|
background-color: #545b62;
|
|
}
|
|
}
|
|
|
|
&.info {
|
|
background-color: #17a2b8;
|
|
color: white;
|
|
|
|
&:hover {
|
|
background-color: #138496;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 响应式设计
|
|
@media (max-width: 750rpx) {
|
|
.tool-grid {
|
|
flex-direction: column;
|
|
|
|
.tool-item {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.stats-grid {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.action-buttons {
|
|
flex-direction: column;
|
|
|
|
.action-btn {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|