推广小程序前端代码
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.

174 lines
4.5 KiB

5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
  1. <template>
  2. <view class="invoiceIssuance">
  3. <view class="head-box"></view>
  4. <Navbar title="我的收藏" :autoBack="true" :bgColor="bgColor" leftIconSize="18px" height="100rpx"
  5. :leftIconColor="leftIconColor" :titleStyle="{color:fontColor}" />
  6. <view class="content contentPosition_">
  7. <uv-sticky offsetTop="220rpx" :bgColor="bgColor">
  8. <uv-tabs :scrollable="false" @click="tabs" :list="tabList" lineWidth="40" :current="tabCurrent"
  9. :lineColor="`url(${lineBg}) 100% 100%`"
  10. :activeStyle="{color: '#FD5C5C', fontWeight: 'bold',transform: 'scale(1.05)'}"
  11. :inactiveStyle="{color: '#999', transform: 'scale(1)'}"
  12. itemStyle="padding-left: 15px; padding-right: 15px; height: 44px;"></uv-tabs>
  13. </uv-sticky>
  14. <view class="info cardStyle_" v-for="(item, index) in cardListData" :key="index">
  15. <view class="left">
  16. <image :src="item.image.split(',')[0]" alt="">
  17. </view>
  18. <view class="right">
  19. <view class="detailed">
  20. <view class="title">{{item.title}}</view>
  21. <view class="date">{{item.startTime}}</view>
  22. <view class="address">{{item.address}}</view>
  23. </view>
  24. <view class="data">
  25. <view>12/30</view>
  26. <button class="mini-btn" size="mini" @click="toDetail(item)">立即报名</button>
  27. </view>
  28. </view>
  29. <i class="icon"></i>
  30. </view>
  31. <!-- <view class="info cardStyle_">
  32. <view class="left">
  33. <image src="https://img0.baidu.com/it/u=4274003247,920124130&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1031" alt="">
  34. </view>
  35. <view class="right">
  36. <view class="detailed">
  37. <view class="title">夏日去撒野旅游计划</view>
  38. <view class="date">2024.10.28 10:00</view>
  39. <view class="address">成都市东丽湖露营地32号</view>
  40. </view>
  41. <view class="data">
  42. <view>12/30</view>
  43. <button class="mini-btn" size="mini" @click="toDetail(item)">立即报名</button>
  44. </view>
  45. </view>
  46. <i class="icon"></i>
  47. </view> -->
  48. </view>
  49. </view>
  50. </template>
  51. <script>
  52. import Navbar from '@/pages/components/Navbar.vue'
  53. import {
  54. globalMixin
  55. } from '../pages/mixins/globalMixin';
  56. export default {
  57. mixins: [globalMixin],
  58. components: {
  59. Navbar
  60. },
  61. computed: {
  62. customStyle1() {
  63. return {
  64. height: '30rpx',
  65. color: '#FF4546',
  66. }
  67. }
  68. },
  69. data() {
  70. return {
  71. lineBg: require('@/static/image/cart/tabIcon.png'),
  72. tabCurrent:0,
  73. params: {
  74. pageNo: 1,
  75. pageSize: 10,
  76. type:0
  77. },
  78. totalPage: '',
  79. cardListData: [],
  80. tabList: [
  81. {
  82. id: 0,
  83. name: '旅行'
  84. },
  85. {
  86. id: 1,
  87. name: '活动'
  88. },
  89. ],
  90. }
  91. },
  92. onReachBottom() {
  93. if (this.params.pageNo >= this.totalPage) return
  94. this.params.pageNo++
  95. this.collectPageList()
  96. },
  97. onLoad() {
  98. this.collectPageList()
  99. },
  100. methods: {
  101. tabs(e) {
  102. this.tabCurrent = e.index
  103. this.cardListData = []
  104. this.params.pageNo = 1
  105. this.collectPageList()
  106. },
  107. collectPageList() {
  108. this.params.type = this.tabCurrent
  109. this.$api('collectPageList', this.params, res => {
  110. if (res.code == 200) {
  111. this.totalPage = res.result.pages
  112. this.cardListData = [...this.cardListData, ...res.result.records]
  113. }
  114. })
  115. },
  116. toDetail(item) {
  117. if(item.type == 0) {//活动
  118. uni.navigateTo({
  119. url: `/pages_order/huodong-detail?activityId=${item.activityOrderId}`
  120. })
  121. }else{//旅行
  122. uni.navigateTo({
  123. url: `/pages_order/lvyou-detail?travelId=${item.activityOrderId}`
  124. })
  125. }
  126. }
  127. }
  128. }
  129. </script>
  130. <style scoped lang="scss">
  131. .invoiceIssuance {
  132. .content {
  133. .info {
  134. position: relative;
  135. margin: 10rpx 32rpx 36rpx;
  136. ;
  137. border-radius: 26rpx;
  138. .icon {
  139. position: absolute;
  140. right: 0;
  141. top: 0;
  142. display: block;
  143. width: 66rpx;
  144. height: 56rpx;
  145. background: red;
  146. background: url('@/static/image/icon.png') no-repeat;
  147. background-size: 100% 100%;
  148. }
  149. .right {
  150. .data {
  151. display: flex;
  152. justify-content: space-between;
  153. align-items: center;
  154. .mini-btn {
  155. display: flex;
  156. align-items: center;
  157. margin: 0;
  158. background: linear-gradient(to right, #FE5E5E, #E41522);
  159. height: 45rpx;
  160. width: 181rpx;
  161. color: #fff;
  162. border-radius: 60rpx;
  163. padding-bottom: 10rpx;
  164. }
  165. }
  166. }
  167. }
  168. }
  169. }
  170. </style>