推广小程序前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

144 lines
3.2 KiB

1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
  1. <template>
  2. <view class="cart">
  3. <view class="head-box"></view>
  4. <uv-navbar title="我的订单" bgColor="transparent" leftIconSize="0px" height="100rpx"></uv-navbar>
  5. <view class="content">
  6. <uv-tabs :scrollable="false" @click="tabs" :list="tabList" lineWidth="40" :lineColor="`url(${lineBg}) 100% 100%`"
  7. :activeStyle="{
  8. color: '#FD5C5C',
  9. fontWeight: 'bold',
  10. transform: 'scale(1.05)'
  11. }" :inactiveStyle="{
  12. color: '#999',
  13. transform: 'scale(1)'
  14. }" itemStyle="padding-left: 15px; padding-right: 15px; height: 44px;"></uv-tabs>
  15. <cardList :cardListData="cardListData" />
  16. </view>
  17. <tabber select="cart" />
  18. </view>
  19. </template>
  20. <script>
  21. import tabber from '@/components/base/tabbar.vue'
  22. import cardList from '@/components/cart/cardList.vue'
  23. export default {
  24. components: {
  25. tabber,
  26. cardList
  27. },
  28. data() {
  29. return {
  30. tabList: [{
  31. id: 0,
  32. name: '全部'
  33. },
  34. {
  35. id: 1,
  36. name: '待参加'
  37. },
  38. {
  39. id: 2,
  40. name: '已完成'
  41. },
  42. {
  43. id: 3,
  44. name: '已取消'
  45. },
  46. ],
  47. lineBg: require('@/static/image/cart/tabIcon.png'),
  48. cardListData: [
  49. {
  50. imgUrl: 'https://up.zhuoku.org/22/a4/60/50/fc3bd0b4e656911fccdde4383637c1cd.jpg',
  51. orderTime: '2024.08.23 12:00',
  52. state: 'U',
  53. stateText: '待参加',
  54. title: '夏日去撒野旅游计划~',
  55. time: '2024.10.28 10:00',
  56. address: '成都市东丽湖露营地32号',
  57. totalPrice: '298.00',
  58. btnObj: [{
  59. id: '0',
  60. btnTitle: '取消活动',
  61. color: '#AFAFAF',
  62. bgColor: '#34312E'
  63. },
  64. {
  65. id: '1',
  66. btnTitle: '活动签到',
  67. color: '#FF4546',
  68. bgColor: '#492623'
  69. }
  70. ]
  71. },
  72. {
  73. imgUrl: 'https://up.zhuoku.org/22/a4/60/50/fc3bd0b4e656911fccdde4383637c1cd.jpg',
  74. orderTime: '2024.08.23 12:00',
  75. state: 'S',
  76. stateText: '已完成',
  77. title: '夏日去撒野旅游计划~',
  78. time: '2024.10.28 10:00',
  79. address: '成都市东丽湖露营地32号',
  80. totalPrice: '298.00',
  81. btnObj: [{
  82. id: '2',
  83. btnTitle: '活动评价',
  84. color: '#FF4546',
  85. bgColor: '#492623'
  86. },
  87. {
  88. id: '3',
  89. btnTitle: '开具发票',
  90. color: '#FFB245',
  91. bgColor: '#49361D'
  92. }
  93. ]
  94. },
  95. {
  96. imgUrl: 'https://up.zhuoku.org/22/a4/60/50/fc3bd0b4e656911fccdde4383637c1cd.jpg',
  97. orderTime: '2024.08.23 12:00',
  98. state: 'F',
  99. stateText: '已完成',
  100. title: '夏日去撒野旅游计划~',
  101. time: '2024.10.28 10:00',
  102. address: '成都市东丽湖露营地32号',
  103. totalPrice: '298.00',
  104. btnObj: []
  105. }
  106. ]
  107. }
  108. },
  109. methods: {
  110. tabs(val) {
  111. console.log(val);
  112. }
  113. }
  114. }
  115. </script>
  116. <style lang="scss">
  117. page {
  118. background-color: #060504;
  119. }
  120. </style>
  121. <style scoped lang="scss">
  122. .cart {
  123. .head-box {
  124. background: url('@/static/image/nav-bg.png') no-repeat;
  125. background-size: 100% 100%;
  126. width: 100%;
  127. height: 534rpx;
  128. position: absolute;
  129. }
  130. /deep/.uv-navbar__content__title {
  131. color: #fff;
  132. }
  133. .content {
  134. position: absolute;
  135. width: 100%;
  136. color: #fff;
  137. padding-top: calc(var(--status-bar-height) + 110rpx);
  138. }
  139. }
  140. </style>