order.vue 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <script setup lang="ts">
  2. const { statusBarHeight, MenuButtonHeight } = storeToRefs(useSysStore())
  3. const tab = ref<number>(0)
  4. const tabsList = ref(['全部', '成功', '失败'])
  5. </script>
  6. <template>
  7. <view class="video-rights-order-page">
  8. <wd-navbar
  9. title="订单" custom-style="background-color:#FFF" :bordered="false" :z-index="99"
  10. safe-area-inset-top fixed
  11. />
  12. <view :style="{ paddingTop: `${(Number(statusBarHeight) || 44) + MenuButtonHeight + 12}px` }" />
  13. <wd-tabs v-model="tab" animated>
  14. <block v-for="item in tabsList" :key="item">
  15. <wd-tab :title="item">
  16. <view class="box-border bg-#f6f6f6 px24rpx">
  17. <view class="h-28rpx" />
  18. <view class="rounded-16rpx bg-#FFF p-24rpx">
  19. <view class="flex items-center justify-between">
  20. <view class="text-28rpx">
  21. 2024-12-13 11:12:30
  22. </view>
  23. <view class="text-28rpx font-bold">
  24. 充值成功
  25. </view>
  26. </view>
  27. <view class="mt-24rpx h-2rpx w-full bg-#F0F0F0" />
  28. <view class="mt-24rpx flex items-center justify-between">
  29. <view class="flex items-center gap-20rpx">
  30. <view class="h-160rpx w-160rpx">
  31. image
  32. </view>
  33. <view>
  34. <view class="text-32rpx font-bold">
  35. 网易云黑胶VIP月卡
  36. </view>
  37. <view class="mt-16rpx text-#FF4D3A">
  38. <text class="text-22rpx font-500">
  39. </text>
  40. <text class="text-36rpx font-800">
  41. 18
  42. </text>
  43. </view>
  44. <view class="mt-16rpx text-24rpx">
  45. XN123458625484359845
  46. </view>
  47. </view>
  48. </view>
  49. <wd-icon name="chevron-right" size="22px" color="#222222" />
  50. </view>
  51. </view>
  52. </view>
  53. </wd-tab>
  54. </block>
  55. </wd-tabs>
  56. </view>
  57. </template>
  58. <style lang="scss" scoped></style>