game.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. <template>
  2. <view class="main">
  3. <view class="first">
  4. <input type="text" v-model="searchInfo.name" @input="toInput" placeholder="搜索赛事名称">
  5. </view>
  6. <view class="second">
  7. <scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage" @scroll="toScroll">
  8. <view class="list-scroll-view">
  9. <view class="list" v-for="(item, index) in list" :key="index" @tap="toInfo(item)">
  10. <view class="list_1">
  11. <view class="left">
  12. <image class="image" mode="aspectFill" :src="item.logo||config.logoUrl"></image>
  13. </view>
  14. <view class="right">
  15. <view class="name">
  16. {{item.name||'暂无名称'}}
  17. </view>
  18. <view class="other">
  19. {{item.address||'暂无地点'}} | {{item.date||'暂无日期'}}
  20. </view>
  21. <view class="other">
  22. {{item.format||'暂无赛制'}}
  23. </view>
  24. </view>
  25. </view>
  26. <view class="list_2">{{item.ranking||'暂无排名'}}</view>
  27. </view>
  28. <view class="is_bottom" v-if="is_bottom">
  29. <text>{{config.bottomTitle||'到底了!'}}</text>
  30. </view>
  31. </view>
  32. </scroll-view>
  33. </view>
  34. </view>
  35. </template>
  36. <script setup lang="ts">
  37. import { ref } from 'vue';
  38. //该依赖已内置不需要单独安装
  39. import { onShow } from "@dcloudio/uni-app";
  40. interface PropsItem {
  41. name ?: string,
  42. address ?: string,
  43. type ?: string,
  44. logo ?: string,
  45. date ?: string,
  46. format ?: string,
  47. ranking ?: string,
  48. };
  49. // 基本信息
  50. const config = ref({ bottomTitle: '', logoUrl: '' });
  51. // 查询
  52. const searchInfo = ref({ name: '' });
  53. // 列表
  54. const list = ref<PropsItem[]>([{ name: '肝帝33联赛' }]);
  55. // 分页
  56. const skip = ref(0);
  57. const limit = ref(6);
  58. const page = ref(0);
  59. const total = ref(0);
  60. // 数据是否触底
  61. const scrollTop = ref(0);
  62. const is_bottom = ref(false);
  63. onShow(() => {
  64. searchConfig();
  65. search();
  66. })
  67. // config信息
  68. const searchConfig = async () => {
  69. config.value = uni.getStorageSync('config');
  70. };
  71. // 查询列表
  72. const search = async () => {
  73. console.log('查询');
  74. };
  75. //查询
  76. const toInput = (e : any) => {
  77. if (searchInfo.value.name) searchInfo.value.name = e.detail.value
  78. searchInfo.value = { name: '' }
  79. clearPage();
  80. search();
  81. };
  82. // 球队详情
  83. const toInfo = (item : any) => {
  84. console.log(item);
  85. };
  86. // 分页
  87. const toPage = () => {
  88. if (total.value > list.value.length) {
  89. uni.showLoading({
  90. title: '加载中',
  91. mask: true
  92. })
  93. page.value = page.value + 1
  94. skip.value = page.value * limit.value;
  95. search();
  96. uni.hideLoading();
  97. } else is_bottom.value = true
  98. };
  99. const toScroll = (e : any) => {
  100. let up = scrollTop.value;
  101. scrollTop.value = e.detail.scrollTop
  102. let num = Math.sign(up - e.detail.scrollTop);
  103. if (num == 1) is_bottom.value = false
  104. };
  105. // 清空数据
  106. const clearPage = () => {
  107. list.value = []
  108. skip.value = 0
  109. limit.value = 6
  110. page.value = 0
  111. };
  112. </script>
  113. <style lang="scss" scoped>
  114. .main {
  115. display: flex;
  116. flex-direction: column;
  117. width: 100vw;
  118. height: 66vh;
  119. .first {
  120. display: flex;
  121. justify-content: center;
  122. align-items: center;
  123. padding: 2vw;
  124. border-bottom: 1px solid var(--f5Color);
  125. input {
  126. width: 100%;
  127. padding: 2vw;
  128. background-color: var(--f1Color);
  129. font-size: var(--font14Size);
  130. border-radius: 5px;
  131. }
  132. }
  133. .second {
  134. position: relative;
  135. flex-grow: 1;
  136. .list {
  137. border-bottom: 1px solid var(--f5Color);
  138. padding: 3vw;
  139. .list_1 {
  140. display: flex;
  141. align-items: center;
  142. .left {
  143. width: 15vw;
  144. .image {
  145. width: 15vw;
  146. height: 15vw;
  147. border-radius: 20vw;
  148. }
  149. }
  150. .right {
  151. width: 75vw;
  152. margin: 0 0 0 2vw;
  153. .name {
  154. font-size: var(--font16Size);
  155. }
  156. .other {
  157. margin: 1vw 0 0 0;
  158. font-size: var(--font14Size);
  159. color: var(--f85Color);
  160. }
  161. }
  162. }
  163. .list_2 {
  164. text-align: right;
  165. font-size: var(--font14Size);
  166. color: var(--fFFColor);
  167. }
  168. }
  169. }
  170. }
  171. .scroll-view {
  172. position: absolute;
  173. top: 0;
  174. left: 0;
  175. right: 0;
  176. bottom: 0;
  177. .list-scroll-view {
  178. display: flex;
  179. flex-direction: column;
  180. }
  181. }
  182. .is_bottom {
  183. width: 100%;
  184. text-align: center;
  185. text {
  186. padding: 2vw 0;
  187. display: inline-block;
  188. color: var(--f85Color);
  189. font-size: var(--font14Size);
  190. }
  191. }
  192. </style>