schoolRank.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. <template>
  2. <view v-show="isShow" class="i-h-p100 i-flex i-al-center i-jst-center i-z-index3">
  3. <view class="i-h-p100 i-w-p100">
  4. <view class="i-flex i-al-center i-jst-center">
  5. <view class="i-w-p80 animate__animated"
  6. :class="pageStatus===1?'animate__fadeInUp':pageStatus===3?'animate__fadeOutDown':''">
  7. <view class="i-h-110"></view>
  8. <view class="i-b-c-fff">
  9. <uni-row>
  10. <uni-col v-for="(item,index) in list" :key="index" :span="4">
  11. <view>
  12. <view class="i-h-60 i-flex i-al-center i-jst-center i-ml-10 i-mr-10 i-mt-10"
  13. :class="nowRegionIndex == index?'i-b-c-B42346 i-c-fff':'i-b-c-F7F7F7'"
  14. @click="RegionClick(item,index)">
  15. <span class="">{{item.region_title}}</span>
  16. </view>
  17. </view>
  18. </uni-col>
  19. </uni-row>
  20. <view>
  21. <view class="i-w-p100 i-b-c-F7F7F7 i-mt-10 i-fs-20">
  22. <view class="i-ptb-16">
  23. <uni-row>
  24. <uni-col :span="5" class="i-flex i-jst-center i-al-center">学校排名</uni-col>
  25. <uni-col :span="5">学校中文名称</uni-col>
  26. <uni-col :span="8">学校英文名称</uni-col>
  27. </uni-row>
  28. </view>
  29. <scroll-view class="i-h-600 i-w-p100" scroll-y="true" :show-scrollbar="false"
  30. :scroll-top="scrollTop">
  31. <view v-for="(item,index) in schoolList" :key="index">
  32. <view v-show="index==nowRegionIndex">
  33. <view v-for="(ite,ind) in item" :key="ind">
  34. <view class="i-ptb-16" :class="(ind%2)!=1?'i-b-c-fff':'i-b-c-F7F7F7'">
  35. <uni-row>
  36. <uni-col :span="5"
  37. class="i-flex i-jst-center i-al-center i-ptb-16">{{ite.rank_num}}</uni-col>
  38. <uni-col :span="5"
  39. class=" i-ptb-16">{{ite.school_name}}</uni-col>
  40. <uni-col :span="8"
  41. class=" i-ptb-16">{{ite.school_name_en}}</uni-col>
  42. <uni-col :span="4" :offset="2" class=" i-w-p100 i-t-end">
  43. <view class="i-mr-30 i-flex i-c-fff">
  44. <view
  45. class="i-radius-30 i-b-c-B42346 i-ptb-16 i-plr-20 i-flex"
  46. @click="toDetail(ite)">
  47. <span>学校简介 >>></span>
  48. </view>
  49. </view>
  50. </uni-col>
  51. </uni-row>
  52. </view>
  53. </view>
  54. </view>
  55. </view>
  56. <view class="i-h-110"></view>
  57. </scroll-view>
  58. </view>
  59. </view>
  60. </view>
  61. </view>
  62. </view>
  63. </view>
  64. </view>
  65. </template>
  66. <script>
  67. export default {
  68. name: "schoolRank",
  69. data() {
  70. return {
  71. scrollTop: 0,
  72. // schoolList: [], // 学校列表
  73. nowRegionIndex: 0 // 当前地区
  74. };
  75. },
  76. props: {
  77. isShow: {
  78. type: Boolean,
  79. default: false
  80. },
  81. list: {
  82. type: Array,
  83. default: () => ([])
  84. },
  85. schoolList: {
  86. type: Array,
  87. default: () => ([])
  88. },
  89. // 页面状态 动画效果 1进入 2正常 3退出
  90. pageStatus: {
  91. type: Number,
  92. default: 1,
  93. },
  94. },
  95. watch: {
  96. list(newVal) {
  97. // console.log(newVal)
  98. // newVal.forEach((item, index) => {
  99. // this.schoolList.push(item.list)
  100. // });
  101. // console.log(this.schoolList)
  102. },
  103. isShow(newVal) {
  104. if (newVal) {
  105. // 强制重置滚动位置
  106. this.scrollTop = 0; // 先设置为 0
  107. this.$nextTick(() => {
  108. this.scrollTop = 1; // 强制触发滚动
  109. this.$nextTick(() => {
  110. this.scrollTop = 0; // 再次设置为 0
  111. });
  112. });
  113. }
  114. }
  115. },
  116. methods: {
  117. RegionClick(item, key) {
  118. // this.schoolList = item
  119. this.nowRegionIndex = key
  120. },
  121. toDetail(item) {
  122. item.title = item.school_name
  123. this.$emit('toDetailEvent', item)
  124. },
  125. }
  126. }
  127. </script>
  128. <style>
  129. </style>