instructions.vue 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <template>
  2. <view class="container">
  3. <view class="list-item" v-for="(item,index) in list" :key="index" @click="handleDetail(item.url)">
  4. {{item.title}}
  5. </view>
  6. <myEmpty v-show="loading == false && list.length == 0"></myEmpty>
  7. </view>
  8. </template>
  9. <script>
  10. import myEmpty from "@/pages_watch/components/myEmpty/myEmpty.vue";
  11. import {guidList} from "@/api/pages_watch/index.js"
  12. export default {
  13. components: {
  14. myEmpty
  15. },
  16. data() {
  17. return {
  18. loading: false,
  19. isMore: true,
  20. queryParam: {
  21. pageSize: 10,
  22. pageNum: 1,
  23. },
  24. total: 0,
  25. list: []
  26. }
  27. },
  28. onLoad() {
  29. this.refresh()
  30. },
  31. methods: {
  32. // 获取数据
  33. getList() {
  34. this.loading = true
  35. guidList(this.queryParam).then(res => {
  36. this.loading = false
  37. if (res.code == 200) {
  38. let list = res.rows && res.rows.length > 0 ? res.rows : []
  39. this.list = this.list.concat(list)
  40. this.total = res.total
  41. this.queryParam.pageNum++
  42. if (this.list.length >= this.total) {
  43. this.isMore = false
  44. }
  45. }
  46. }).catch(() => {
  47. this.loading = false
  48. })
  49. },
  50. refresh() {
  51. this.loading = false
  52. this.isMore = true
  53. this.queryParam.pageNum = 1
  54. this.list = []
  55. this.getList()
  56. },
  57. handleDetail(url) {
  58. // #ifdef APP-PLUS
  59. plus.runtime.openWeb(url)
  60. // #endif
  61. // #ifdef H5
  62. window.open(url, '_blank');
  63. // #endif
  64. // #ifndef H5 || APP-PLUS
  65. uni.navigateTo({
  66. url: "/pages/webview/webview?webUrl="+url
  67. })
  68. // #endif
  69. }
  70. },
  71. onReachBottom() {
  72. if (this.isMore) {
  73. this.getList()
  74. }
  75. }
  76. }
  77. </script>
  78. <style lang="scss" scoped>
  79. .container{
  80. padding: 24rpx;
  81. padding-bottom: calc(var(--window-bottom) + 24rpx);
  82. box-sizing: border-box;
  83. .list-item {
  84. padding: 30rpx 24rpx;
  85. margin-bottom: 24rpx;
  86. border-radius: 16rpx;
  87. overflow: hidden;
  88. background-color: #fff;
  89. }
  90. }
  91. </style>