index.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. <template>
  2. <view class="activity">
  3. <u-navbar leftIconSize="0" :placeholder="true" bgColor="#ffffff">
  4. <view class="u-nav-slot" slot="left" style="font-size: 32rpx;">免费抽奖</view>
  5. </u-navbar>
  6. <view class="u-nav-slot" slot="left" style="background-color: #ffffff;width: 100%;">
  7. <u-tabs @change="changeTab" :scrollable="false" :list="statusArr" lineWidth="30" lineHeight="1"
  8. lineColor="#E96737" :activeStyle="{
  9. color: '#E96737',
  10. transform: 'scale(1)',
  11. width: '130rpx',
  12. }" :inactiveStyle="{
  13. color: '#999999',
  14. transform: 'scale(1)',
  15. width: '130rpx'
  16. }" itemStyle="padding-left: 11px; padding-right: 11px; height: 44px;text-align: center; ">
  17. </u-tabs>
  18. </view>
  19. <view class="list">
  20. <view v-for="(item,index) in list" :key="index" class="list-view">
  21. <view class="list-view-slot">
  22. <navigator hover-class="none" :url="item.status.value == 4 ?`/packageOperate/activity/record?id=${ item.id }`:`/packageOperate/activity/index?id=${ item.id }`">
  23. <view>
  24. <image :src="item.picUrl" mode="" class="list-view-slot-img"></image>
  25. </view>
  26. <view class="list-view-slot-bor">
  27. <view class="list-view-slot-bor-title">
  28. <view class="time bor-title">{{item.title}}</view>
  29. <view v-if="item.status.value == 2" class="time" >开始时间:{{ $parseTime(item.startTime, '{y}-{m}-{d} {h}:{i}:{s}')}}</view>
  30. <view v-else class="time" >开奖时间:{{ $parseTime(item.endTime, '{y}-{m}-{d} {h}:{i}:{s}')}}</view>
  31. </view>
  32. <view class="details">
  33. <button class="details-button" v-if="item.status.value == 3" >查看详情</button>
  34. <button class="details-buttonTwo" v-else-if="item.isHit == 0" >未中奖</button>
  35. <button class="details-buttonTwo" v-else-if="item.isHit == 1">已中奖</button>
  36. <button class="details-buttonTwo" v-else >即将开始</button>
  37. </view>
  38. </view>
  39. </navigator>
  40. </view>
  41. </view>
  42. <view class="flex empty" v-if="!list.length && !loading">
  43. <u-empty text="活动为空" mode="order" />
  44. </view>
  45. </view>
  46. <custom-tab-bar :activeValue="'activity'" />
  47. </view>
  48. </template>
  49. <script>
  50. import env from '../../config/env.js'
  51. import $http from '@/utils/request.js'
  52. export default {
  53. data() {
  54. return {
  55. list: [],
  56. statusArr: [{
  57. name: '参与抽奖'
  58. }, {
  59. name: '已开奖',
  60. },{disabled: true},{disabled: true},{disabled: true}],
  61. triggerStatus: 0,
  62. }
  63. },
  64. onShow() {
  65. this.pageList()
  66. },
  67. methods: {
  68. changeTab(e) {
  69. if (e.index == 0) {
  70. this.triggerStatus = 0
  71. } else if (e.index == 1) {
  72. this.triggerStatus = 1
  73. }
  74. this.pageList()
  75. },
  76. pageList() {
  77. this.pageNum = 1
  78. this.list = []
  79. this.getList()
  80. },
  81. getList() {
  82. uni.showLoading({
  83. title: '加载中'
  84. });
  85. this.loading = true
  86. $http.post(`/api/v1/mp/user/marketing/list?pageNum=${ this.pageNum }&pageSize=20`, {
  87. triggerStatus: this.triggerStatus,
  88. }).then(res => {
  89. uni.hideLoading();
  90. this.loading = false
  91. if (res.code == 0) {
  92. res.rows.forEach(item => {
  93. let picUrlArr = item.picUrl.split(',')
  94. item.picUrl = env.filePublic + picUrlArr[0] + '?imageView2/2/w/170'
  95. item.status = JSON.parse(item.status)
  96. })
  97. this.total = res.total
  98. this.list = this.list.concat(res.rows)
  99. }
  100. }).catch(() => {
  101. uni.hideLoading();
  102. this.loading = false
  103. })
  104. },
  105. }
  106. }
  107. </script>
  108. <style lang="scss" scoped>
  109. .activity {
  110. width: 100%;
  111. height: 100%;
  112. // 设置ios刘海屏底部横线安全区域
  113. padding-bottom: constant(safe-area-inset-bottom);
  114. padding-bottom: env(safe-area-inset-bottom);
  115. }
  116. .list {
  117. padding: 0 20rpx;
  118. &-view {
  119. text-align: center;
  120. height: 530rpx;
  121. &-slot {
  122. background-color: #FFFFFF;
  123. // margin-bottom: 20rpx;
  124. border-radius: 22rpx;
  125. &-img {
  126. width: 100%;
  127. height: 370rpx;
  128. border-radius: 22rpx 22rpx 0 0;
  129. }
  130. &-bor {
  131. line-height: 50rpx;
  132. width: 700rpx;
  133. height: 120rpx;
  134. margin: 0 auto;
  135. padding:10rpx 20rpx 0 20rpx;
  136. border-radius: 0 0 22rpx 22rpx ;
  137. &-title {
  138. text-align: left; float: left;
  139. .time {
  140. color: #333333;
  141. }
  142. .bor-title {
  143. font-size: 34rpx;
  144. }
  145. }
  146. .details {
  147. float: right;
  148. .details-button{
  149. width: 200rpx;
  150. height: 72rpx;
  151. line-height: 72rpx;
  152. background-color: #F9822C;
  153. color: #fff;
  154. margin-top: 18rpx;
  155. font-size: 30rpx;
  156. border-radius: 36rpx;
  157. }
  158. .details-buttonTwo{
  159. width: 200rpx;
  160. height: 72rpx;
  161. line-height: 72rpx;
  162. background-color: #BBBBBB;
  163. color: #fff;
  164. margin-top: 18rpx;
  165. font-size: 30rpx;
  166. border-radius: 36rpx;
  167. }
  168. }
  169. }
  170. }
  171. }
  172. }
  173. .empty {
  174. height: 60vh;
  175. }
  176. </style>