App Store 精选推荐 — 技术文档

WeUI 的 weui-toptips 是浮动提示条，不适合嵌入内容流。可用 MpTips 组件作基础，但需覆盖背景色为蓝色系（#EAF5FF）并调整为 inline block 布局。

<MpTips type="info">
  欢迎加入小程序成长计划！…
</MpTips>
/* 需额外覆盖：背景 #EAF5FF，边框 #B3D9F5，文字 #1a5fa0 */

卡片严格按照 App Store 精选推荐样式呈现，不展示状态 Badge。可用 MpCells + MpCell 实现左文字 + 右按钮结构，但外层卡片包装（圆角 / 边框）无 WeUI 原生支持，需自定义。

<MpCells>
  <MpCell>
    <template #title>苹果应用商城 App Store 精选推荐</template>
    <template #desc>完成条件后即可报名，入选后可获得 App Store 专属推荐位</template>
    <template #ft>
      <MpButton type="primary" size="mini"
        @click="handleCardClick">去查看</MpButton>
    </template>
  </MpCell>
</MpCells>
/* 外层 card 包装需自定义：border-radius:8px; border:1px solid #E5E5E5 */

WeUI 的 MpBadge 默认为红色数字角标。此处的彩色 tag（绿 / 橙 / 蓝）更接近标签形态，需通过 CSS 变量或 class 覆盖 background 和 color。

<MpBadge :text="badge.label" :class="badge.cls" />
/* 各状态 class 覆盖 */
.badge-green  { background:#E8F8EE; color:#07C160; }
.badge-orange { background:#FFF7E6; color:#FA9D3B; }
.badge-blue   { background:#EEF3FF; color:#1677FF; }

<MpButton type="primary" size="mini">去查看</MpButton>


<MpButton type="default" size="mini" disabled>已完成</MpButton>


<MpButton type="primary" plain size="mini">返回成长计划</MpButton>

WeUI 无「图标 + 标题 + 副标题」横向排列的 App 信息卡组件。需自定义：48px 圆角图标（渐变背景）+ 右侧文字区块，外层 card 包裹。

/* 无 WeUI 对应组件，自定义实现 */
.app-header {
  display: flex; gap: 14px;
  background: #fff; border-radius: 8px;
  border: 1px solid #E5E5E5; padding: 16px;
}
.app-header__icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: linear-gradient(135deg, #07C160, #06AD56);
}

<MpCells title="开通条件">
  <MpCell v-for="c in conditions" :key="c.id">
    <template #icon>{{ c.icon }}</template>
    <template #label>{{ c.label }}</template>
    <template #ft>
      <span :class="c.met ? 'status-met' : 'status-unmet'">
        {{ c.met ? '✅ 已满足' : '❌ 未满足' }}
      </span>
      <MpButton v-if="!c.met && c.action"
        type="primary" plain size="mini"
        @click="goSetup(c)">去开通</MpButton>
    </template>
  </MpCell>
</MpCells>

可复用 MpBadge 结构，但需覆盖颜色：绿色（#E8F8EE / #07C160）表示满足，红色（#FFF0F0 / #FA5151）表示未满足。

.status-met   { background:#E8F8EE; color:#07C160; border-radius:100px; padding:3px 8px; }
.status-unmet { background:#FFF0F0; color:#FA5151; border-radius:100px; padding:3px 8px; }

WeUI 无圆形评分展示组件。该组件为渐变背景圆形 + 中央大号数字，纯 CSS 实现。分数数据来源：WE分析 API，需前端调用后动态渲染。

/* 自定义，无 WeUI 组件 */
.score-ring {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, #07C160, #06AD56);
  display: flex; align-items: center; justify-content: center;
}
.score-ring__val { font-size: 28px; font-weight: 700; color: #fff; }

// Vue 数据获取
const weScore = ref(0)
onMounted(async () => {
  weScore.value = await fetchWeAnalysisScore(appId)
})

可用 MpCard 作外层包装，内部 <ul> 列表使用自定义 CSS 实现绿色圆点 ::before。WeUI 没有内置带自定义 marker 的列表组件。

<MpCard title="功能介绍">
  <ul class="feature-list">
    <li v-for="item in features" :key="item">{{ item }}</li>
  </ul>
</MpCard>
/* 圆点样式 */
.feature-list li::before {
  content:""; width:5px; height:5px;
  border-radius:50%; background:#07C160;
}

<MpCard title="小程序质量评分">
  <!-- 评分圆（自定义）+ 文字说明 -->
  <div class="score-row">
    <div class="score-ring">{{ weScore }}</div>
    <p>we分析综合评分</p>
  </div>
</MpCard>

<!-- 按状态动态切换 type 和 disabled -->
<MpButton
  :type="btnConfig.type"
  :disabled="!btnConfig.enabled"
  block
  @click="handleAction"
>{{ btnConfig.label }}</MpButton>

// btnConfig 计算属性
const btnConfig = computed(() => ({
  partial:  { type:'default', enabled:false, label:'请先满足所有条件' },
  all:      { type:'primary', enabled:true,  label:'立即报名' },
  monthly:  { type:'default', enabled:false, label:'审核中，暂不可报名' },
  cooling:  { type:'default', enabled:false, label:'冷却期内暂不可报名' }
}[checkState.value]))

WeUI 无渐变背景 inline banner 组件。三种横幅（蓝绿 / 蓝 / 橙）通过不同的渐变背景和文字颜色区分状态，需完全自定义。v-if 控制显隐。

<!-- v-if 控制三种横幅互斥显示 -->
<div v-if="state === 'reviewing'" class="notice notice--cyan">
  <p class="notice-title">🕐 报名审核中</p>
  <p class="notice-desc">审核结果将以站内信通知…</p>
</div>
<div v-if="state === 'cooling_passed'" class="notice notice--blue">…</div>
<div v-if="state === 'cooling_rejected'" class="notice notice--orange">…</div>

/* 三种渐变横幅样式 */
.notice--cyan   { background: linear-gradient(135deg,#E5F6FF,#D9F0FF); }
.notice--blue   { background: linear-gradient(135deg,#EAF2FF,#E0ECFF); }
.notice--orange { background: linear-gradient(135deg,#FFF7E6,#FEF0D9); }

WeUI 无「‹ 返回上一页」的 inline 文字链接组件。用自定义 <a> + flex 实现，主色文字 + 悬停下划线。

<a class="back-link" @click="router.back()">‹ 返回成长计划</a>
.back-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; color: #07C160; cursor: pointer;
}
.back-link:hover { text-decoration: underline; }

WeUI 的 MpForm 提供表单整体结构，但无「标题 + 内容」分组卡片的原生支持。可用 MpCard 作外层，内部字段用 MpCells 排列。标签 + 输入框组合需配合 MpCell 的 label slot。

<MpCard title="基本信息">
  <MpCells>
    <MpCell label="小程序昵称">
      <MpInput v-model="form.appName" readonly />
    </MpCell>
    <MpCell label="AppID">
      <MpInput v-model="form.appId" readonly />
    </MpCell>
  </MpCells>
</MpCard>

<MpInput
  v-model="form.appId"
  readonly
  placeholder="自动填充"
/>

<MpTextarea
  v-model="form.intro"
  :maxlength="200"
  show-count
  placeholder="请简要介绍你的小程序（10-200字）"
/>

<MpUploader
  v-model="form.screenshots"
  :max-count="5"
  accept="image/jpeg,image/png"
/>
/* 上传数量校验（≥3张才允许提交）*/
const canSubmit = computed(() =>
  form.screenshots.length >= 3 && introValid && phoneValid
)

<MpButton
  type="primary"
  block
  :disabled="!canSubmit"
  @click="handleSubmit"
>提交报名</MpButton>

<MpMsg
  type="success"
  title="报名提交成功！"
  desc="审核结果将以站内信形式推送，请留意站内信通知。"
>
  <template #action>
    <MpButton type="primary" plain
      @click="router.push('/growth')">
      返回成长计划
    </MpButton>
  </template>
</MpMsg>

// 返回成长计划时，直接将卡片状态置为「审核中」
// 无独立审核状态页，主页任务卡片即展示审核中态
function handleBackToGrowth() {
  cardStatus.value = 'reviewing'
  router.push('/growth')
}

<MpToast v-model:show="toastVisible" :duration="2000">
  {{ toastMsg }}
</MpToast>

// 调用
function showToast(msg: string) {
  toastMsg.value = msg
  toastVisible.value = true
}