717 lines
17 KiB
Plaintext
717 lines
17 KiB
Plaintext
<!-- 机构端 - 机构成长页(安读Tab4 -->
|
||
<template>
|
||
<view class="growth-page">
|
||
<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'
|
||
import { requireMerchantAuth } from '@/utils/merchantAuth.uts'
|
||
|
||
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: '<27>',
|
||
title: '优化服务标题与科室标签',
|
||
desc: '精准标签可提升搜索曝光量 3-5 倍',
|
||
color: '#ff5000',
|
||
link: ''
|
||
},
|
||
{
|
||
icon: '📷',
|
||
title: '优化服务封面与机构展示图',
|
||
desc: '高质量展示图点击率提升 40% 以上',
|
||
color: '#09C39D',
|
||
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: '#09C39D',
|
||
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: 'AI和长者/家属咨询接待话术',
|
||
subtitle: '用话术留住每一位和查用户',
|
||
tag: '实战',
|
||
duration: '10 分钟',
|
||
link: ''
|
||
},
|
||
{
|
||
icon: '📊',
|
||
title: '慢病管理服务运营方法',
|
||
subtitle: '慢病客户持续服务与复购指南',
|
||
tag: '实战',
|
||
duration: '15 分钟',
|
||
link: ''
|
||
}
|
||
] as CourseType[]
|
||
}
|
||
},
|
||
|
||
onShow() {
|
||
this.ensureMerchantAuth()
|
||
},
|
||
|
||
methods: {
|
||
async ensureMerchantAuth(): Promise<boolean> {
|
||
const result = await requireMerchantAuth({ redirectOnFail: true, toastOnFail: true })
|
||
return result.ok
|
||
},
|
||
|
||
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: calc(24rpx + var(--status-bar-height)) 24rpx 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>
|