createRecordsDetail.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  1. <template>
  2. <view class="container">
  3. <view class="header">
  4. <image src="../../static/images/skm_fn_bg.png" mode="aspectFill" class="bg-img"></image>
  5. <view class="flex-y-bottom box-pack-between header-pd30rpx">
  6. <view>
  7. <block v-if="type==1">自我{{$test.$test}}:{{scan_count||0}}</block>
  8. </view>
  9. <view class="info" style="width: 33%;">
  10. <text class="num">{{total||0}}</text>
  11. <view class="desc">次扫码 <image v-if="type==2" style="margin-left: 10rpx;" class="zhiyin" @click="yiye(1)" src="../../static/images/zhiyin.png"
  12. mode=""></image>
  13. </view>
  14. </view>
  15. <view class="flex">
  16. <block v-if="type==1">
  17. <image class="zhiyin" @click="yiye(2)" src="../../static/images/zhiyin.png" mode=""></image>
  18. 异业{{$test.$test}}:{{scan_exchange_count||0}}
  19. </block>
  20. </view>
  21. </view>
  22. </view>
  23. <view class="main">
  24. <view class="row tab-h sticky">
  25. <view class="td" :class="type==2?'flex-grow-1':'td'">序号</view>
  26. <view class="td" :class="type==2?'flex-grow-1':'td'">用户IP</view>
  27. <view class="td" :class="type==2?'flex-grow-1':'td'">扫码时间</view>
  28. <view class="td" v-if="type==1">类型</view>
  29. </view>
  30. <view class="row" v-for="(item,index) in list" :key="item.id">
  31. <view class="td" :class="type==2?'flex-grow-1':'td'">{{index+1}}</view>
  32. <view class="td" :class="type==2?'flex-grow-1':'td'">{{item.ip}}</view>
  33. <view class="td" :class="type==2?'flex-grow-1':'td'">{{item.time}}</view>
  34. <view class="td" v-if="type==1">{{item.exchange_type==1?`自我${$test.$test}`:`异业${$test.$test}`}}</view>
  35. </view>
  36. </view>
  37. </view>
  38. </template>
  39. <script>
  40. export default {
  41. data() {
  42. return {
  43. $test: this.$test.$test,
  44. list: [],
  45. total: 0,
  46. scan_count:0,
  47. scan_exchange_count:0,
  48. page: 1,
  49. type: 1
  50. }
  51. },
  52. onLoad(e) {
  53. this.card_num = e.card_num;
  54. this.type = e.type;
  55. this.scan_list();
  56. },
  57. onReachBottom(e) {
  58. this.scan_list()
  59. },
  60. methods: {
  61. yiye(type) {
  62. let text = type == 1 ? "换量联盟帮我赋能成功的次数" : '展示换量联盟其他用户的广告'
  63. uni.showModal({
  64. title: '提示',
  65. content: text,
  66. showCancel: false,
  67. cancelText: '关闭',
  68. confirmText: '好的',
  69. success: res => {},
  70. fail: () => {},
  71. complete: () => {}
  72. });
  73. },
  74. scan_list() {
  75. let url = this.type == 1 ? "funeng/scan_list" : "funeng/scan_list2";
  76. this.request({
  77. url: url,
  78. data: {
  79. page: this.page,
  80. card_num: this.card_num,
  81. },
  82. }).then(res => {
  83. console.log(res, "res")
  84. if (res.code === '200') {
  85. this.list = this.list.concat(res.data);
  86. this.page = this.page + 1;
  87. if(this.list.length>0){
  88. this.total=this.list[0].total;
  89. this.scan_count=this.list[0].scan_count;
  90. this.scan_exchange_count=this.list[0].scan_exchange_count;
  91. }
  92. }
  93. });
  94. },
  95. }
  96. }
  97. </script>
  98. <style>
  99. .zhiyin {
  100. width: 28rpx;
  101. height: 28rpx;
  102. margin-right: 6rpx;
  103. }
  104. .header-pd30rpx {
  105. padding: 0 30rpx;
  106. color: #fff;
  107. height: 64%;
  108. font-size: 26rpx;
  109. position: relative;
  110. z-index: 2;
  111. }
  112. .header {
  113. width: 100%;
  114. height: 198rpx;
  115. position: relative;
  116. }
  117. .header .bg-img {
  118. display: block;
  119. position: absolute;
  120. left: 0;
  121. top: 0;
  122. z-index: 1;
  123. width: 100%;
  124. height: 198rpx;
  125. }
  126. .header .info {
  127. width: 100%;
  128. height: 100%;
  129. display: flex;
  130. flex-flow: row nowrap;
  131. justify-content: center;
  132. align-items: center;
  133. }
  134. .header .info .num {
  135. font-size: 70rpx;
  136. font-weight: 700;
  137. font-family: DIN Alternate, DIN Alternate-Bold;
  138. color: #fff;
  139. line-height: 1;
  140. transform: scale(1, 1.3);
  141. }
  142. .header .info .desc {
  143. font-size: 32rpx;
  144. line-height: 1;
  145. color: #fff;
  146. margin-top: 39rpx;
  147. }
  148. .main {
  149. background-color: #fff;
  150. border-radius: 20rpx 20rpx 0 0;
  151. margin-top: -20rpx;
  152. padding: 20rpx 40rpx 0;
  153. display: table;
  154. width: 100%;
  155. box-sizing: border-box;
  156. z-index: 3;
  157. position: relative;
  158. }
  159. .main .row {
  160. display: flex;
  161. flex-flow: row nowrap;
  162. justify-content: flex-start;
  163. align-items: center;
  164. height: 106rpx;
  165. /* line-height: 106rpx; */
  166. border-bottom: 2rpx solid #f5f5f5;
  167. }
  168. .main .row.tab-h {
  169. top: var(--window-top);
  170. background-color: #fff;
  171. }
  172. .main .row .td {
  173. text-align: center;
  174. font-size: 30rpx;
  175. color: #333;
  176. }
  177. .main .row.tab-h .td {
  178. color: #3387FF;
  179. }
  180. .main .row .td:nth-child(1) {
  181. width: 10%;
  182. }
  183. .main .row .td:nth-child(2) {
  184. width: 40%;
  185. }
  186. .main .row .td:nth-child(3) {
  187. width: 30%;
  188. }
  189. .main .row .td:nth-child(4) {
  190. width: 20%;
  191. }
  192. </style>