710 lines
16 KiB
Plaintext
710 lines
16 KiB
Plaintext
<!-- 商家端 - 成长页（Tab4）：经营指南、流量获取方法、店铺经营建议、学习入口 -->
|
||
<template>
|
||
<view class="growth-page">
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<!-- Tab 页无返回按钮，显示顶部安全区 + 页面标题 -->
|
||
<view class="mp-tab-navbar">
|
||
<text class="mp-tab-title">成长</text>
|
||
</view>
|
||
<!-- #endif -->
|
||
|
||
<scroll-view direction="vertical" class="growth-scroll" :refresher-enabled="true" :refresher-triggered="refreshing" @refresherrefresh="onRefresh">
|
||
|
||
<!-- 成长等级卡片 -->
|
||
<view class="level-card">
|
||
<view class="level-header">
|
||
<view class="level-info">
|
||
<text class="level-label">商家成长等级</text>
|
||
<view class="level-badge">
|
||
<text class="level-text">{{ currentLevel.name }}</text>
|
||
</view>
|
||
</view>
|
||
<text class="level-icon">{{ currentLevel.icon }}</text>
|
||
</view>
|
||
<view class="level-progress-wrap">
|
||
<view class="level-progress-bar">
|
||
<view class="level-progress-fill" :style="{ width: currentLevel.progress + '%' }"></view>
|
||
</view>
|
||
<text class="level-progress-text">{{ currentLevel.progress }}% · 距下一级还需 {{ currentLevel.nextTarget }}</text>
|
||
</view>
|
||
<view class="level-tips">
|
||
<text class="level-tips-text">完善店铺信息、上传商品、获得订单可提升等级</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 流量获取方法 -->
|
||
<view class="section-card">
|
||
<view class="section-header">
|
||
<text class="section-title">📈 流量获取方法</text>
|
||
</view>
|
||
<view class="tips-list">
|
||
<view
|
||
v-for="(tip, index) in trafficTips"
|
||
:key="index"
|
||
class="tip-item"
|
||
@click="viewDetail(tip)"
|
||
>
|
||
<view class="tip-icon-wrap" :style="{ backgroundColor: tip.color + '22' }">
|
||
<text class="tip-icon">{{ tip.icon }}</text>
|
||
</view>
|
||
<view class="tip-content">
|
||
<text class="tip-title">{{ tip.title }}</text>
|
||
<text class="tip-desc">{{ tip.desc }}</text>
|
||
</view>
|
||
<text class="tip-arrow">›</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 经营指南 -->
|
||
<view class="section-card">
|
||
<view class="section-header">
|
||
<text class="section-title">📋 经营指南</text>
|
||
</view>
|
||
<view class="guide-grid">
|
||
<view
|
||
v-for="(guide, index) in operationGuides"
|
||
:key="index"
|
||
class="guide-item"
|
||
@click="viewDetail(guide)"
|
||
>
|
||
<text class="guide-icon">{{ guide.icon }}</text>
|
||
<text class="guide-title">{{ guide.title }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 店铺经营建议 -->
|
||
<view class="section-card">
|
||
<view class="section-header">
|
||
<text class="section-title">💡 今日经营建议</text>
|
||
</view>
|
||
<view class="suggestion-list">
|
||
<view
|
||
v-for="(suggestion, index) in suggestions"
|
||
:key="index"
|
||
class="suggestion-item"
|
||
:class="{ done: suggestion.done }"
|
||
@click="toggleSuggestion(index)"
|
||
>
|
||
<view class="suggestion-check">
|
||
<text class="check-icon">{{ suggestion.done ? '✅' : '⬜' }}</text>
|
||
</view>
|
||
<view class="suggestion-content">
|
||
<text class="suggestion-title">{{ suggestion.title }}</text>
|
||
<text class="suggestion-desc">{{ suggestion.desc }}</text>
|
||
</view>
|
||
<view class="suggestion-tag" :style="{ backgroundColor: suggestion.tagColor + '22', color: suggestion.tagColor }">
|
||
<text class="tag-text">{{ suggestion.tag }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 学习中心入口 -->
|
||
<view class="section-card">
|
||
<view class="section-header">
|
||
<text class="section-title">🎓 学习中心</text>
|
||
</view>
|
||
<view class="learn-list">
|
||
<view
|
||
v-for="(course, index) in learnCourses"
|
||
:key="index"
|
||
class="learn-item"
|
||
@click="viewDetail(course)"
|
||
>
|
||
<view class="learn-cover">
|
||
<text class="learn-cover-icon">{{ course.icon }}</text>
|
||
</view>
|
||
<view class="learn-info">
|
||
<text class="learn-title">{{ course.title }}</text>
|
||
<text class="learn-subtitle">{{ course.subtitle }}</text>
|
||
<view class="learn-meta">
|
||
<text class="learn-tag">{{ course.tag }}</text>
|
||
<text class="learn-duration">{{ course.duration }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部安全区（覆盖 tabbar） -->
|
||
<view class="safe-bottom"></view>
|
||
</scroll-view>
|
||
|
||
<!-- 商家端自定义 TabBar -->
|
||
<merchant-tab-bar :current="3"></merchant-tab-bar>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="uts">
|
||
import MerchantTabBar from '@/components/merchant-tabbar/MerchantTabBar.uvue'
|
||
|
||
type TipType = {
|
||
icon: string
|
||
title: string
|
||
desc: string
|
||
color: string
|
||
link: string
|
||
}
|
||
|
||
type GuideType = {
|
||
icon: string
|
||
title: string
|
||
link: string
|
||
}
|
||
|
||
type SuggestionType = {
|
||
title: string
|
||
desc: string
|
||
tag: string
|
||
tagColor: string
|
||
done: boolean
|
||
}
|
||
|
||
type CourseType = {
|
||
icon: string
|
||
title: string
|
||
subtitle: string
|
||
tag: string
|
||
duration: string
|
||
link: string
|
||
}
|
||
|
||
type LevelType = {
|
||
name: string
|
||
icon: string
|
||
progress: number
|
||
nextTarget: string
|
||
}
|
||
|
||
export default {
|
||
components: {
|
||
MerchantTabBar
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
refreshing: false,
|
||
currentLevel: {
|
||
name: '新手商家',
|
||
icon: '🌱',
|
||
progress: 30,
|
||
nextTarget: '上传满5件商品'
|
||
} as LevelType,
|
||
|
||
trafficTips: [
|
||
{
|
||
icon: '🏷️',
|
||
title: '优化商品标题关键词',
|
||
desc: '精准标题可提升搜索曝光量 3-5 倍',
|
||
color: '#ff5000',
|
||
link: ''
|
||
},
|
||
{
|
||
icon: '📷',
|
||
title: '提升主图吸引力',
|
||
desc: '高质量主图点击率提升 40% 以上',
|
||
color: '#007AFF',
|
||
link: ''
|
||
},
|
||
{
|
||
icon: '💰',
|
||
title: '设置限时优惠活动',
|
||
desc: '促销期间订单量平均提升 60%',
|
||
color: '#34C759',
|
||
link: ''
|
||
},
|
||
{
|
||
icon: '⭐',
|
||
title: '维护好评率',
|
||
desc: '好评率 >95% 可获得平台推荐流量',
|
||
color: '#FF9500',
|
||
link: ''
|
||
},
|
||
{
|
||
icon: '📢',
|
||
title: '参与平台活动',
|
||
desc: '报名活动可获得额外曝光位置',
|
||
color: '#AF52DE',
|
||
link: ''
|
||
}
|
||
] as TipType[],
|
||
|
||
operationGuides: [
|
||
{ icon: '🛒', title: '商品管理', link: '/pages/mall/merchant/products' },
|
||
{ icon: '📦', title: '库存优化', link: '/pages/mall/merchant/inventory' },
|
||
{ icon: '🎯', title: '营销策略', link: '/pages/mall/merchant/promotions' },
|
||
{ icon: '💬', title: '客服技巧', link: '/pages/mall/merchant/chat' },
|
||
{ icon: '📊', title: '数据解读', link: '/pages/mall/merchant/statistics' },
|
||
{ icon: '💳', title: '财务管理', link: '/pages/mall/merchant/finance' }
|
||
] as GuideType[],
|
||
|
||
suggestions: [
|
||
{
|
||
title: '完善店铺基础信息',
|
||
desc: '补充店铺 Logo、简介、联系方式',
|
||
tag: '紧急',
|
||
tagColor: '#ff3b30',
|
||
done: false
|
||
},
|
||
{
|
||
title: '上传至少3件在售商品',
|
||
desc: '充足商品是获得流量的基础',
|
||
tag: '重要',
|
||
tagColor: '#ff9500',
|
||
done: false
|
||
},
|
||
{
|
||
title: '回复所有待回评价',
|
||
desc: '及时回复可提升用户信任度',
|
||
tag: '今日',
|
||
tagColor: '#007aff',
|
||
done: false
|
||
},
|
||
{
|
||
title: '检查低库存商品',
|
||
desc: '库存不足会导致订单自动取消',
|
||
tag: '常规',
|
||
tagColor: '#34c759',
|
||
done: false
|
||
}
|
||
] as SuggestionType[],
|
||
|
||
learnCourses: [
|
||
{
|
||
icon: '🚀',
|
||
title: '新手商家开店必读',
|
||
subtitle: '5分钟掌握开店核心流程',
|
||
tag: '入门',
|
||
duration: '5 分钟',
|
||
link: ''
|
||
},
|
||
{
|
||
icon: '📸',
|
||
title: '商品主图拍摄技巧',
|
||
subtitle: '用手机也能拍出专业大片',
|
||
tag: '进阶',
|
||
duration: '8 分钟',
|
||
link: ''
|
||
},
|
||
{
|
||
icon: '📣',
|
||
title: '营销活动策划方法',
|
||
subtitle: '节假日爆单秘诀全攻略',
|
||
tag: '进阶',
|
||
duration: '12 分钟',
|
||
link: ''
|
||
},
|
||
{
|
||
icon: '💬',
|
||
title: '提升客服转化率',
|
||
subtitle: '用话术留住每一位询问客户',
|
||
tag: '实战',
|
||
duration: '10 分钟',
|
||
link: ''
|
||
}
|
||
] as CourseType[]
|
||
}
|
||
},
|
||
|
||
onShow() {
|
||
// 预留：后续可对接成长等级接口
|
||
},
|
||
|
||
methods: {
|
||
onRefresh() {
|
||
this.refreshing = true
|
||
// 预留：刷新成长数据
|
||
setTimeout(() => {
|
||
this.refreshing = false
|
||
}, 1000)
|
||
},
|
||
|
||
toggleSuggestion(index: number) {
|
||
this.suggestions[index].done = !this.suggestions[index].done
|
||
},
|
||
|
||
viewDetail(item: TipType | GuideType | CourseType) {
|
||
if (item.link && item.link.length > 0) {
|
||
uni.navigateTo({ url: item.link })
|
||
} else {
|
||
uni.showToast({ title: '内容即将上线，敬请期待', icon: 'none' })
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.growth-page {
|
||
background-color: #f5f7fa;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* 微信小程序 Tab 页顶部导航 */
|
||
.mp-tab-navbar {
|
||
height: calc(88rpx + var(--status-bar-height));
|
||
padding-top: var(--status-bar-height);
|
||
background-color: #ffffff;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-bottom-width: 1rpx;
|
||
border-bottom-style: solid;
|
||
border-bottom-color: #f0f0f0;
|
||
}
|
||
|
||
.mp-tab-title {
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
}
|
||
|
||
.growth-scroll {
|
||
flex: 1;
|
||
padding: 24rpx;
|
||
}
|
||
|
||
/* 成长等级卡片 */
|
||
.level-card {
|
||
background: linear-gradient(135deg, #ff6b35 0%, #ff8c5a 100%);
|
||
border-radius: 24rpx;
|
||
padding: 36rpx 32rpx;
|
||
margin-bottom: 24rpx;
|
||
box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.3);
|
||
}
|
||
|
||
.level-header {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 28rpx;
|
||
}
|
||
|
||
.level-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.level-label {
|
||
font-size: 26rpx;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.level-badge {
|
||
background-color: rgba(255, 255, 255, 0.25);
|
||
border-radius: 20rpx;
|
||
padding-top: 8rpx;
|
||
padding-bottom: 8rpx;
|
||
padding-left: 24rpx;
|
||
padding-right: 24rpx;
|
||
align-self: flex-start;
|
||
}
|
||
|
||
.level-text {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.level-icon {
|
||
font-size: 80rpx;
|
||
}
|
||
|
||
.level-progress-wrap {
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.level-progress-bar {
|
||
height: 12rpx;
|
||
background-color: rgba(255, 255, 255, 0.3);
|
||
border-radius: 6rpx;
|
||
overflow: hidden;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.level-progress-fill {
|
||
height: 100%;
|
||
background-color: #ffffff;
|
||
border-radius: 6rpx;
|
||
}
|
||
|
||
.level-progress-text {
|
||
font-size: 24rpx;
|
||
color: rgba(255, 255, 255, 0.85);
|
||
}
|
||
|
||
.level-tips {
|
||
background-color: rgba(255, 255, 255, 0.15);
|
||
border-radius: 12rpx;
|
||
padding: 16rpx 20rpx;
|
||
}
|
||
|
||
.level-tips-text {
|
||
font-size: 24rpx;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
/* 通用 section 卡片 */
|
||
.section-card {
|
||
background-color: #ffffff;
|
||
border-radius: 24rpx;
|
||
padding: 28rpx;
|
||
margin-bottom: 24rpx;
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.section-header {
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
}
|
||
|
||
/* 流量获取方法 */
|
||
.tips-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.tip-item {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
padding-top: 20rpx;
|
||
padding-bottom: 20rpx;
|
||
border-bottom-width: 1rpx;
|
||
border-bottom-style: solid;
|
||
border-bottom-color: #f5f5f5;
|
||
}
|
||
|
||
.tip-item:last-child {
|
||
border-bottom: none;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.tip-icon-wrap {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
border-radius: 18rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 24rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.tip-icon {
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.tip-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.tip-title {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
margin-bottom: 6rpx;
|
||
display: block;
|
||
}
|
||
|
||
.tip-desc {
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.tip-arrow {
|
||
font-size: 40rpx;
|
||
color: #cccccc;
|
||
margin-left: 16rpx;
|
||
}
|
||
|
||
/* 经营指南宫格 */
|
||
.guide-grid {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.guide-item {
|
||
width: 33.33%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding-top: 24rpx;
|
||
padding-bottom: 24rpx;
|
||
}
|
||
|
||
.guide-icon {
|
||
font-size: 56rpx;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.guide-title {
|
||
font-size: 24rpx;
|
||
color: #555555;
|
||
}
|
||
|
||
/* 今日经营建议 */
|
||
.suggestion-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.suggestion-item {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
padding-top: 20rpx;
|
||
padding-bottom: 20rpx;
|
||
border-bottom-width: 1rpx;
|
||
border-bottom-style: solid;
|
||
border-bottom-color: #f5f5f5;
|
||
}
|
||
|
||
.suggestion-item:last-child {
|
||
border-bottom: none;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.suggestion-item.done .suggestion-title {
|
||
color: #cccccc;
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
.suggestion-check {
|
||
margin-right: 16rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.check-icon {
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.suggestion-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.suggestion-title {
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
margin-bottom: 6rpx;
|
||
display: block;
|
||
}
|
||
|
||
.suggestion-desc {
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.suggestion-tag {
|
||
margin-left: 16rpx;
|
||
padding-top: 6rpx;
|
||
padding-bottom: 6rpx;
|
||
padding-left: 16rpx;
|
||
padding-right: 16rpx;
|
||
border-radius: 8rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.tag-text {
|
||
font-size: 22rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 学习中心列表 */
|
||
.learn-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.learn-item {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
padding-top: 20rpx;
|
||
padding-bottom: 20rpx;
|
||
border-bottom-width: 1rpx;
|
||
border-bottom-style: solid;
|
||
border-bottom-color: #f5f5f5;
|
||
}
|
||
|
||
.learn-item:last-child {
|
||
border-bottom: none;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.learn-cover {
|
||
width: 100rpx;
|
||
height: 80rpx;
|
||
border-radius: 12rpx;
|
||
background-color: #f5f7ff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 20rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.learn-cover-icon {
|
||
font-size: 44rpx;
|
||
}
|
||
|
||
.learn-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.learn-title {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
margin-bottom: 8rpx;
|
||
display: block;
|
||
}
|
||
|
||
.learn-subtitle {
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
margin-bottom: 12rpx;
|
||
display: block;
|
||
}
|
||
|
||
.learn-meta {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.learn-tag {
|
||
font-size: 22rpx;
|
||
color: #ff5000;
|
||
background-color: #fff3ef;
|
||
padding-top: 4rpx;
|
||
padding-bottom: 4rpx;
|
||
padding-left: 12rpx;
|
||
padding-right: 12rpx;
|
||
border-radius: 6rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.learn-duration {
|
||
font-size: 22rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
/* 底部安全区 */
|
||
.safe-bottom {
|
||
height: 160rpx;
|
||
}
|
||
</style>
|