enabling.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  1. <template>
  2. <view class="container">
  3. <view class="main">
  4. <view class="flex-y-center main-home" @click="choice" :data-url='item.url' :data-type='item.type' :data-id='item.id'
  5. :data-index="index" v-for="(item,index) in list" :key="item.id">
  6. <view class="main-icon">
  7. <i class="iconfont iconxuanzhong" v-if="checked==index"></i>
  8. <i class="iconfont iconweixuanzhong" v-else style="color:#bfbfbf"></i>
  9. </view>
  10. <view :data-index='index' class="item flex-row">
  11. <image src="../../static/images/icon_game.png" mode="aspectFit" class="type-img" v-if="item.type == 7"></image>
  12. <image src="../../static/images/icon_6.png" mode="aspectFit" class="type-img" v-if="item.type == 4"></image>
  13. <image src="../../static/images/icon_5.png" mode="aspectFit" class="type-img" v-if="item.type == 3"></image>
  14. <image src="../../static/images/icon_2.png" mode="aspectFit" class="type-img" v-if="item.type == 2"></image>
  15. <image src="../../static/images/icon_4.png" mode="aspectFit" class="type-img" v-if="item.type == 1"></image>
  16. <image src="../../static/images/icon_7.png" mode="aspectFit" class="type-img" v-if="item.type == 6"></image>
  17. <view class="info">
  18. <view class="title text-1" v-if="item.description">{{item.description}}</view>
  19. <view class="desc flex-row-between">
  20. <view class="time content">{{item.url}}</view>
  21. </view>
  22. </view>
  23. </view>
  24. </view>
  25. </view>
  26. </view>
  27. </template>
  28. <script>
  29. export default {
  30. data() {
  31. return {
  32. list: [
  33. ],
  34. page: 1,
  35. checked:-1,
  36. }
  37. },
  38. onLoad() {
  39. uni.setNavigationBarTitle({
  40. title:`${this.$test.$test}列表`
  41. })
  42. this.page = 1;
  43. this.list = [];
  44. this.funeng_list();
  45. },
  46. onShow() {
  47. },
  48. onReachBottom(e) {
  49. this.funeng_list()
  50. },
  51. methods: {
  52. choice(e) {
  53. let id= e.currentTarget.dataset.id,type= e.currentTarget.dataset.type;
  54. this.checked = e.currentTarget.dataset.index;
  55. var url= e.currentTarget.dataset.url;
  56. var pages = getCurrentPages();
  57. var currPage = pages[pages.length - 1]; //当前页面
  58. var prevPage = pages[pages.length - 2]; //上一个页面
  59. //可以打印prevPage看看
  60. console.log(prevPage)
  61. //h5的写法
  62. // #ifdef H5
  63. prevPage.save_url=url;
  64. prevPage.id=id;
  65. prevPage.type=type;
  66. prevPage.code_url=url;
  67. // #endif
  68. // #ifdef MP-WEIXIN
  69. //小程序的写法 具体要怎么写可以打印一下prevPage看一下
  70. prevPage.$vm.save_url=url;
  71. prevPage.$vm.code_url=url;
  72. prevPage.$vm.id=id;
  73. prevPage.$vm.type=type;
  74. // #endif
  75. uni.navigateBack();
  76. },
  77. viewRecords(e) {
  78. var index = e.currentTarget.dataset.index,
  79. card_num = this.list[index].card_num,
  80. type = this.list[index].type;
  81. uni.navigateTo({
  82. url: "../viewRecords/viewRecords?card_num=" + card_num + '&type=' + type
  83. })
  84. },
  85. funeng_list() {
  86. this.request({
  87. url: "user/funeng_list",
  88. data: {
  89. page: this.page,
  90. token: uni.getStorageSync("token"),
  91. },
  92. }).then(res => {
  93. console.log(res, "res")
  94. if (res.code === '200') {
  95. // for(var i of res.data){
  96. // i.checked=false;
  97. // }
  98. this.list = this.list.concat(res.data);
  99. this.page = this.page + 1;
  100. }
  101. });
  102. }
  103. }
  104. }
  105. </script>
  106. <style>
  107. page {
  108. background: #F9F9F9;
  109. }
  110. .content {
  111. word-wrap: break-word;
  112. word-break: break-all;
  113. }
  114. .iconxuanzhong {
  115. color: #007AFF;
  116. }
  117. .header {
  118. width: 100%;
  119. height: 198rpx;
  120. position: relative;
  121. }
  122. .header .bg-img {
  123. display: block;
  124. position: absolute;
  125. left: 0;
  126. top: 0;
  127. z-index: -1;
  128. width: 100%;
  129. height: 198rpx;
  130. }
  131. .header .info {
  132. width: 100%;
  133. height: 100%;
  134. display: flex;
  135. flex-flow: row nowrap;
  136. justify-content: center;
  137. align-items: center;
  138. }
  139. .header .info .num {
  140. font-size: 70rpx;
  141. font-weight: 700;
  142. font-family: DIN Alternate, DIN Alternate-Bold;
  143. color: #fff;
  144. line-height: 1;
  145. }
  146. .header .info .desc {
  147. font-size: 32rpx;
  148. line-height: 1;
  149. color: #fff;
  150. margin-top: 39rpx;
  151. }
  152. .main {
  153. /* background-color: #fff; */
  154. border-radius: 20rpx 20rpx 0 0;
  155. margin-top: 20rpx;
  156. padding: 20rpx 40rpx 0;
  157. }
  158. .main .page-title {
  159. padding: 28rpx 0 40rpx;
  160. }
  161. .main .page-title .title {
  162. font-size: 36rpx;
  163. color: #262626;
  164. line-height: 50rpx;
  165. font-weight: 600;
  166. }
  167. .main .item {
  168. background-color: #fff;
  169. border-radius: 8rpx;
  170. padding: 20rpx 32rpx 20rpx 34rpx;
  171. width: 606rpx;
  172. }
  173. .main-home {
  174. margin-bottom: 40rpx;
  175. }
  176. .main .item .type-img {
  177. display: block;
  178. flex: none;
  179. width: 40rpx;
  180. height: 40rpx;
  181. margin-right: 26rpx;
  182. }
  183. .main .item .info {
  184. flex: auto;
  185. }
  186. .main .item .info .title {
  187. /* width: 538rpx; */
  188. font-size: 30rpx;
  189. font-weight: 500;
  190. color: #323232;
  191. line-height: 42rpx;
  192. margin-bottom: 16rpx;
  193. }
  194. .main .item .info .desc {
  195. /* margin-top: 16rpx; */
  196. }
  197. .main .item .info .num {
  198. font-size: 28rpx;
  199. font-weight: 400;
  200. color: #3387FF;
  201. line-height: 40rpx;
  202. }
  203. .main .item .info .time {
  204. font-size: 28rpx;
  205. font-weight: 400;
  206. color: #999;
  207. line-height: 40rpx;
  208. }
  209. .main-icon {
  210. margin-right: 33rpx;
  211. }
  212. .main-icon .iconfont{
  213. font-size: 38rpx;
  214. }
  215. </style>