Accordion 折叠内容

<script setup lang="ts">
  import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from 'moriui'
</script>

<template>
  <Accordion default-value="shipping" class="max-w-lg">
    <AccordionItem value="shipping">
      <AccordionTrigger>配送方式有哪些？</AccordionTrigger>
      <AccordionContent>
        我们提供标准配送（5-7天）、快递配送（2-3天）和次日达服务，国际订单满额包邮。
      </AccordionContent>
    </AccordionItem>
    <AccordionItem value="returns">
      <AccordionTrigger>退换货政策是什么？</AccordionTrigger>
      <AccordionContent>
        收货后30天内可退换，商品需保持未使用且原包装完好，退款将在5-7个工作日内处理。
      </AccordionContent>
    </AccordionItem>
    <AccordionItem value="support">
      <AccordionTrigger>如何联系客服？</AccordionTrigger>
      <AccordionContent>
        您可以通过电子邮件、在线聊天或电话联系我们，工作日内我们将在24小时内回复。
      </AccordionContent>
    </AccordionItem>
  </Accordion>
</template>

<script setup lang="ts">
  import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from 'moriui'

  const items = [
    {
      value: 'item-1',
      trigger: '如何重置密码？',
      content: '在登录页面点击"忘记密码"，输入您的邮箱地址，我们将发送重置密码链接。链接将在24小时内有效。'
    },
    {
      value: 'item-2',
      trigger: '可以更改订阅方案吗？',
      content: '是的，您可以在账户设置中随时升级或降级方案，更改将在下一个计费周期生效。'
    },
    {
      value: 'item-3',
      trigger: '支持哪些支付方式？',
      content: '我们支持所有主流信用卡、PayPal 和银行转账，所有支付均通过安全合作伙伴加密处理。'
    }
  ]
</script>

<template>
  <Accordion default-value="item-1" class="max-w-lg">
    <AccordionItem v-for="item in items" :key="item.value" :value="item.value">
      <AccordionTrigger>{{ item.trigger }}</AccordionTrigger>
      <AccordionContent>{{ item.content }}</AccordionContent>
    </AccordionItem>
  </Accordion>
</template>

<script setup lang="ts">
  import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from 'moriui'

  const items = [
    {
      value: 'notifications',
      trigger: '通知设置',
      content: '管理您接收通知的方式，您可以启用电子邮件提醒或移动设备推送通知。'
    },
    {
      value: 'privacy',
      trigger: '隐私与安全',
      content: '控制您的隐私设置和安全偏好，可启用双重认证、管理已连接的设备、查看活跃会话以及配置数据共享偏好。您还可以下载数据或删除账户。'
    },
    {
      value: 'billing',
      trigger: '账单与订阅',
      content: '查看当前方案、付款历史和即将到来的账单。更新支付方式、更改订阅等级或取消订阅。'
    }
  ]
</script>

<template>
  <Accordion type="multiple" class="max-w-lg" :default-value="['notifications']">
    <AccordionItem v-for="item in items" :key="item.value" :value="item.value">
      <AccordionTrigger>{{ item.trigger }}</AccordionTrigger>
      <AccordionContent>{{ item.content }}</AccordionContent>
    </AccordionItem>
  </Accordion>
</template>

<script setup lang="ts">
  import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from 'moriui'
</script>

<template>
  <Accordion class="w-full">
    <AccordionItem value="item-1">
      <AccordionTrigger>我可以查看账户历史吗？</AccordionTrigger>
      <AccordionContent>
        是的，您可以在控制台的"账户历史"中查看完整的账户活动记录，包括所有交易、方案变更和支持工单。
      </AccordionContent>
    </AccordionItem>
    <AccordionItem value="item-2" disabled>
      <AccordionTrigger>高级功能信息</AccordionTrigger>
      <AccordionContent>
        此部分包含高级功能信息。升级您的方案以访问此内容。
      </AccordionContent>
    </AccordionItem>
    <AccordionItem value="item-3">
      <AccordionTrigger>如何更新我的邮箱地址？</AccordionTrigger>
      <AccordionContent>
        您可以在账户设置中更新邮箱地址。修改后，您将收到一封验证邮件以确认变更。
      </AccordionContent>
    </AccordionItem>
  </Accordion>
</template>

<script setup lang="ts">
  import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from 'moriui'

  const items = [
    {
      value: 'billing',
      trigger: '账单如何运作？',
      content: '我们提供月付和年付订阅方案。账单在每个周期开始时自动扣费，您可以随时取消。所有方案均包含自动备份、全天候客服支持和无限制团队成员。'
    },
    {
      value: 'security',
      trigger: '我的数据安全吗？',
      content: '是的。我们采用端到端加密、SOC 2 Type II 合规认证和定期第三方安全审计。所有数据在传输和存储过程中均使用行业标准协议加密。'
    },
    {
      value: 'integration',
      trigger: '支持哪些集成？',
      content: '我们与 500 多种主流工具集成，包括 Slack、Zapier、Salesforce、HubSpot 等。您还可以通过 REST API 和 Webhook 构建自定义集成。'
    }
  ]
</script>

<template>
  <Accordion default-value="billing" class="max-w-lg rounded-lg border">
    <AccordionItem
      v-for="item in items"
      :key="item.value"
      :value="item.value"
      class="border-b px-4 last:border-b-0"
    >
      <AccordionTrigger>{{ item.trigger }}</AccordionTrigger>
      <AccordionContent>{{ item.content }}</AccordionContent>
    </AccordionItem>
  </Accordion>
</template>

<script setup lang="ts">
  import {
    Accordion,
    AccordionContent,
    AccordionItem,
    AccordionTrigger,
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle
  } from 'moriui'

  const items = [
    {
      value: 'plans',
      trigger: '提供哪些订阅套餐？',
      content: '我们提供三个订阅档位：入门版（9美元/月）、专业版（29美元/月）和企业版（99美元/月）。每个方案包含递增的存储空间、API 访问权限、优先客服和团队协作功能。'
    },
    {
      value: 'billing',
      trigger: '账单如何运作？',
      content: '每个计费周期开始时自动扣费。我们接受所有主流信用卡、PayPal 以及企业客户的 ACH 转账。每次付款后您将通过电子邮件收到发票。'
    },
    {
      value: 'cancel',
      trigger: '如何取消订阅？',
      content: '您可以随时从账户设置中取消订阅，无需支付取消费用。取消后，您的访问权限将持续到当前计费周期结束。'
    }
  ]
</script>

<template>
  <Card class="w-full max-w-sm">
    <CardHeader>
      <CardTitle>订阅与账单</CardTitle>
      <CardDescription>关于账户、方案、付款和取消的常见问题。</CardDescription>
    </CardHeader>
    <CardContent>
      <Accordion default-value="plans">
        <AccordionItem v-for="item in items" :key="item.value" :value="item.value">
          <AccordionTrigger>{{ item.trigger }}</AccordionTrigger>
          <AccordionContent>{{ item.content }}</AccordionContent>
        </AccordionItem>
      </Accordion>
    </CardContent>
  </Card>
</template>

<script setup lang="ts">
  import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, DirectionProvider } from 'moriui'
</script>

<template>
  <DirectionProvider dir="rtl">
    <Accordion default-value="item-1" class="max-w-md">
      <AccordionItem value="item-1">
        <AccordionTrigger>كيف يمكنني إعادة تعيين كلمة المرور؟</AccordionTrigger>
        <AccordionContent>
          انقر على "نسيت كلمة المرور" في صفحة تسجيل الدخول، أدخل عنوان بريدك الإلكتروني، وسنرسل لك رابطًا لإعادة تعيين كلمة المرور. سينتهي صلاحية الرابط خلال 24 ساعة.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>هل يمكنني تغيير خطة الاشتراك الخاصة بي؟</AccordionTrigger>
        <AccordionContent>
          نعم، يمكنك ترقية أو تخفيض خطتك في أي وقت من إعدادات حسابك. ستظهر التغييرات في دورة الفوترة التالية.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>ما هي طرق الدفع التي تقبلونها؟</AccordionTrigger>
        <AccordionContent>
          نقبل جميع بطاقات الائتمان الرئيسية و PayPal والتحويلات المصرفية. تتم معالجة جميع المدفوعات بأمان من خلال شركاء الدفع لدينا.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  </DirectionProvider>
</template>