nodeList.vue 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <template>
  2. <view class="container">
  3. <view v-if="list.length > 0" class="list-box flex_item" v-for="(ls,index) in list" :key='index' @click="nav(index)">
  4. <image :src="ls.image_input[0]"></image>
  5. <view class="list-item">
  6. <view class="title ellipsis">{{ls.title}}</view>
  7. <view class="time">{{ls.add_time}}</view>
  8. </view>
  9. </view>
  10. <view class="empty-box" v-show="list.length === 0"><u-empty></u-empty></view>
  11. </view>
  12. </template>
  13. <script>
  14. import { article } from '@/api/user.js';
  15. export default {
  16. data() {
  17. return {
  18. list:''
  19. };
  20. },
  21. onLoad(option){
  22. this.loadData();
  23. },
  24. onShow() {
  25. },
  26. methods: {
  27. // 请求载入数据
  28. async loadData() {
  29. let obj = this;
  30. article({
  31. page:1,
  32. limit:10000
  33. }).then(({ data }) => {
  34. console.log(data)
  35. obj.list = data;
  36. });
  37. },
  38. nav(index){
  39. uni.navigateTo({
  40. url: '/pages/index/article?id=' + this.list[index].id
  41. })
  42. },
  43. }
  44. };
  45. </script>
  46. <style lang="scss">
  47. page {
  48. min-height: 100%;
  49. background-color: #ffffff;
  50. .container {
  51. width: 100%;
  52. padding: 25rpx 27rpx;
  53. }
  54. }
  55. .empty-box{
  56. margin-top: 100rpx;
  57. width: 100%;
  58. height: 500rpx;
  59. }
  60. .list-box{
  61. border-bottom: 1rpx solid #E3E3E3;
  62. margin-bottom: 25rpx;
  63. padding-bottom: 25rpx;
  64. image{
  65. width: 200rpx;
  66. height: 160rpx;
  67. border-radius: 15rpx;
  68. }
  69. .list-item{
  70. padding-left: 16rpx;
  71. width: 80%;
  72. .title{
  73. height: 80rpx;
  74. color: #333333;
  75. font-size: 30rpx;
  76. font-weight: 500;
  77. }
  78. .time{
  79. padding-top: 40rpx;
  80. color: #999999;
  81. font-size: 24rpx;
  82. }
  83. }
  84. }
  85. </style>