medical-mall/pages/mall/consumer/subscription/plan-list.uvue

<template>
  <view class="sub-plan-list">
    <view class="header">
      <text class="title">软件订阅</text>
    </view>

    <view class="plan-container" v-if="!loading && plans.length > 0">
      <view class="plan-card" v-for="p in plans" :key="getPlanId(p)" @click="goPlanDetail(p)">
        <view class="plan-header">
          <text class="plan-name">{{ getPlanName(p) }}</text>
          <text v-if="getBillingPeriod(p) === 'yearly'" class="badge">年付优惠</text>
        </view>
        <text class="plan-desc">{{ getPlanDescription(p) }}</text>
        <view class="price-row">
          <text class="price">¥{{ getPlanPrice(p) }}</text>
          <text class="period">/{{ getBillingPeriod(p) === 'yearly' ? '年' : '月' }}</text>
        </view>
        <view class="feature-list">
          <text class="feature-item" v-for="(v,k) in toFeatureArray(getPlanFeatures(p))" :key="k">• {{ v }}</text>
        </view>
        <view class="actions">
          <button class="primary" @click.stop="toCheckout(p)">立即订阅</button>
        </view>
      </view>
    </view>

    <view v-if="!loading && plans.length === 0" class="empty">
      <text>暂无可用订阅方案</text>
    </view>

    <view v-if="loading" class="loading"><text>加载中...</text></view>
  </view>
</template>

<script setup lang="uts">
import { ref, onMounted } from 'vue'
import supaClient from '@/components/supadb/aksupainstance.uts'

const loading = ref<boolean>(true)
const plans = ref<Array<UTSJSONObject>>([])

function normalizePlanObject(p: any): UTSJSONObject {
  if (p instanceof UTSJSONObject) {
    return p as UTSJSONObject
  }
  const raw = JSON.stringify(p)
  if (raw == null || raw === '') {
    return new UTSJSONObject()
  }
  return JSON.parse(raw) as UTSJSONObject
}

function getPlanId(p: any): string {
  return normalizePlanObject(p).getString('id') ?? ''
}

function getPlanName(p: any): string {
  return normalizePlanObject(p).getString('name') ?? ''
}

function getBillingPeriod(p: any): string {
  return normalizePlanObject(p).getString('billing_period') ?? 'monthly'
}

function getPlanDescription(p: any): string {
  const desc = normalizePlanObject(p).getString('description') ?? ''
  return desc !== '' ? desc : '适用于大部分使用场景'
}

function getPlanPrice(p: any): string {
  const price = normalizePlanObject(p).getNumber('price') ?? 0
  return price.toString()
}

function getPlanFeatures(p: any): any {
  const features = normalizePlanObject(p).get('features')
  return features != null ? features : ''
}

const toFeatureArray = (features: any): Array<string> => {
  const arr: Array<string> = []
  if (features == null) return arr
  const raw = JSON.stringify(features)
  if (raw == null || raw === '') return arr
  try {
    const parsed = JSON.parse(raw)
    if (Array.isArray(parsed)) {
      for (let i = 0; i < parsed.length; i++) {
        arr.push(JSON.stringify(parsed[i]).replace(/[\[\]\{\}"]/g, ''))
      }
      return arr
    }
    arr.push(raw)
  } catch (e) {
    arr.push(raw)
  }
  return arr
}

const loadPlans = async () => {
  try {
    loading.value = true
    const res = await supaClient
      .from('ml_subscription_plans')
      .select('*', {})
      .eq('is_active', true)
      .order('sort_order', { ascending: true })
      .execute()
    if (Array.isArray(res.data)) {
      plans.value = res.data as Array<UTSJSONObject>
    } else {
      plans.value = []
    }
  } catch (e) {
    console.error('加载订阅方案失败:', e)
    uni.showToast({ title: '加载失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

const goPlanDetail = (p: any) => {
  const planObj = normalizePlanObject(p)
  const id = planObj.getString('id') ?? ''
  uni.navigateTo({ url: `/pages/mall/consumer/subscription/plan-detail?id=${id}` })
}

const toCheckout = (p: any) => {
  const planObj = normalizePlanObject(p)
  const id = planObj.getString('id') ?? ''
  uni.navigateTo({ url: `/pages/mall/consumer/subscription/subscribe-checkout?planId=${id}` })
}

onMounted(() => {
  loadPlans()
})
</script>

<style scoped>
.sub-plan-list { padding: 12px; }
.header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.title { font-size: 18px; font-weight: 700; }
.plan-container { display: flex; flex-direction: column; }
  .plan-card { background: #fff; border-radius: 10px; padding: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); margin-bottom: 12px; }
  .plan-card:last-child { margin-bottom: 0; }
  .plan-header { display: flex; align-items: center; justify-content: space-between; }
  .plan-name { font-size: 16px; font-weight: 700; color: #333; }
  .badge { font-size: 12px; color: #fff; background: #3cc51f; border-radius: 999px; padding: 2px 8px; }
  .plan-desc { color: #666; margin: 6px 0; line-height: 1.5; }
  .price-row { display: flex; align-items: flex-end; margin: 6px 0; }
  .price { font-size: 22px; color: #ff4d4f; font-weight: 700; margin-right: 4px; }
  .period { color: #999; }
  .feature-list { color: #444; display: flex; flex-direction: column; margin: 6px 0; }
  .feature-item { font-size: 12px; color: #555; margin-bottom: 2px; }
.actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.primary { background: #3cc51f; color: #fff; border-radius: 6px; padding: 8px 12px; }
.loading, .empty { padding: 24px; text-align: center; color: #888; }
</style>