designer-hub/packages/app/src/pages/mine/coupons/index.vue

<route lang="json">
{ "style": { "navigationBarTitleText": "优惠券包", "navigationBarBackgroundColor": "#fff" } }
</route>
<script setup lang="ts">
import Card from '@/components/card.vue'

const tab = ref()
const tabs = ref([{ label: '商品优惠券' }, { label: '销售积分券' }])
const data = ref([{}])
</script>
<template>
  <div class="flex-grow flex flex-col gap-4">
    <wd-tabs v-model="tab">
      <block v-for="({ label }, i) in tabs" :key="i">
        <wd-tab :title="label"></wd-tab>
      </block>
    </wd-tabs>
    <template v-for="(it, i) of data" :key="i">
      <Card custom-class="mx-3.5">
        <div class="flex gap-3">
          <div class="w-[94px] h-[94px] bg-[#f6f6f6] rounded-[10px]"></div>
          <div class="flex flex-col justify-around">
            <div class="text-black text-sm font-normal font-['PingFang SC'] leading-normal">
              GELATO咖啡兑换券
            </div>
            <div
              class="text-center text-black/40 text-xs font-normal font-['PingFang SC'] leading-normal"
            >
              有效期：2024/04/01-2024/05/30
            </div>
            <div class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-normal">
              使用说明
            </div>
          </div>
        </div>
      </Card>
    </template>
  </div>
</template>