redPacket.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. <template>
  2. <view class="content">
  3. <view class="header-img">
  4. <u-image src="/static/hbheader.jpg" width="750" height="578"></u-image>
  5. <!-- 滚动区域 -->
  6. <view class="scroll-list" v-if="slist.length">
  7. <scrollBox :list="slist" placeText="刚刚得到了1.5元 红包奖励" bgColor="rgba(250, 224, 188, 0.6)"></scrollBox>
  8. </view>
  9. <view class="amount-box">
  10. 345.5
  11. <text>元</text>
  12. </view>
  13. <view class="view-gz">查看活动规则>></view>
  14. </view>
  15. <view class="list-box">
  16. <view class="codes flex align_center">
  17. <view @click="openImg('/static/codetemp.jpg')">
  18. <u-image src="/static/codetemp.jpg" width="160" height="160"></u-image>
  19. </view>
  20. <view>
  21. <view>扫描添加客服微信,领取待发放红包</view>
  22. <view>点击二维码查看大图,长按识别二维码</view>
  23. </view>
  24. </view>
  25. <view class="tabbox">
  26. <view class="tabhead flex align_center justify_between">
  27. <view class="active">所有红包</view>
  28. <view>已发红包</view>
  29. <view>待发红包</view>
  30. </view>
  31. <view class="tablist">
  32. <view class="flex align_center justify_between" v-for="item in 12">
  33. <view class="flex align_center">
  34. <view class="imgs">
  35. <u-icon size="30" color="#fff" name="red-packet"></u-icon>
  36. </view>
  37. <view class="txts">
  38. <view class="txts-name">扫描VIN码下单得红包</view>
  39. <view class="txts-time">2022-10-28 12:36</view>
  40. </view>
  41. </view>
  42. <view class="amount">+0.50</view>
  43. </view>
  44. </view>
  45. </view>
  46. </view>
  47. </view>
  48. </template>
  49. <script>
  50. import scrollBox from '@/components/scrollBox.vue'
  51. import { scanVinLogQueryRoll }from '@/api/car.js'
  52. export default {
  53. components: {
  54. scrollBox,
  55. },
  56. data() {
  57. return {
  58. slist:[],
  59. }
  60. },
  61. onLoad(){
  62. this.getScrollLog()
  63. },
  64. methods: {
  65. openImg(url){
  66. uni.previewImage({
  67. urls:[url]
  68. })
  69. },
  70. // 获取上方滚动扫描记录
  71. getScrollLog(){
  72. scanVinLogQueryRoll({pageNo:1,pageSize:1000}).then(res => {
  73. console.log(res)
  74. this.slist = res.data.list || []
  75. this.slist.map(item => {
  76. item.placeText = item.userName + '刚刚得到了1.5元 红包奖励'
  77. })
  78. })
  79. },
  80. }
  81. }
  82. </script>
  83. <style lang="less">
  84. .content{
  85. padding: 0;
  86. background-color: #fae0bc;
  87. .header-img{
  88. position: relative;
  89. color: #fff;
  90. .amount-box{
  91. position: absolute;
  92. width: 100%;
  93. text-align: center;
  94. font-size: 80rpx;
  95. text{
  96. font-size: 40rpx;
  97. }
  98. top: 50%;
  99. color: #f5563d;
  100. }
  101. .view-gz{
  102. position: absolute;
  103. width: 100%;
  104. text-align: center;
  105. bottom: 45rpx;
  106. font-size: 30rpx;
  107. }
  108. .scroll-list{
  109. width:100%;
  110. position: absolute;
  111. left:10rpx;
  112. top:0;
  113. }
  114. }
  115. .list-box{
  116. padding: 30rpx;
  117. .codes{
  118. margin-bottom: 40rpx;
  119. > view{
  120. &:first-child{
  121. padding: 10rpx;
  122. background-color: #fff;
  123. }
  124. &:last-child{
  125. padding: 0 20rpx;
  126. > view{
  127. padding: 10rpx 0;
  128. font-size: 26rpx;
  129. }
  130. }
  131. }
  132. }
  133. .tabbox{
  134. background-color: #fff5e7;
  135. box-shadow: 0 0 10rpx #e75115;
  136. border-radius: 15rpx;
  137. .tabhead{
  138. border-bottom: 1rpx solid #f0b675;
  139. > view{
  140. width: 30%;
  141. color: #5a4f49;
  142. padding: 20rpx 0;
  143. text-align: center;
  144. }
  145. .active{
  146. color: #e7463c;
  147. border-bottom: 4rpx solid #e7463c;
  148. font-weight: bold;
  149. }
  150. }
  151. .tablist{
  152. padding: 20rpx 0;
  153. > view{
  154. border-bottom: 1rpx solid #fff;
  155. padding: 20rpx 30rpx;
  156. .txts-name{
  157. color: #e7463c;
  158. }
  159. .txts-time{
  160. font-size: 24rpx;
  161. color: #666;
  162. margin-top: 10rpx;
  163. }
  164. .amount{
  165. color: #e7463c;
  166. font-weight: bold;
  167. font-size: 32rpx;
  168. }
  169. }
  170. .txts{
  171. padding:0 20rpx;
  172. }
  173. .imgs{
  174. background-color: #fe9790;
  175. border-radius: 100rpx;
  176. padding: 10rpx;
  177. width: 50rpx;
  178. height: 50rpx;
  179. text-align: center;
  180. }
  181. }
  182. }
  183. }
  184. }
  185. </style>