邃芒智像(Uniapp : WX、TT、H5)
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
 
 
 
 

180 linhas
3.9 KiB

  1. <template>
  2. <div class="page">
  3. <u-list
  4. class="styleListBox"
  5. @scrolltolower="scrolltolower"
  6. lowerThreshold="100"
  7. >
  8. <u-list-item class="glodYBox">
  9. <u-list-item
  10. v-for="item in styleList"
  11. :key="item.id"
  12. class="styleListBoxItme"
  13. >
  14. <view class="styleInfo" @click="createPhoto(item)">
  15. <image :src="item.coverImg" mode="aspectFit" />
  16. <text class="name">{{ item.title }}</text>
  17. <text class="single">{{ peopleNum(item.mouldType) }}</text>
  18. </view>
  19. </u-list-item>
  20. </u-list-item>
  21. </u-list>
  22. </div>
  23. </template>
  24. <script setup>
  25. //#region 导入
  26. import { onPullDownRefresh } from "@dcloudio/uni-app";
  27. import { ref, reactive } from "vue";
  28. import { getListApi } from "../../api/closeStyle";
  29. //#endregion
  30. //#region 页面下拉刷新
  31. // onPullDownRefresh(async () => {
  32. // uni.showLoading({
  33. // title: "加载中...",
  34. // mask: true,
  35. // });
  36. // pageNum.value = 1;
  37. // pageSize.value = 8;
  38. // styleList.value = [];
  39. // await getList();
  40. // uni.hideLoading();
  41. // uni.stopPullDownRefresh();
  42. // });
  43. //#endregion
  44. //#region 列表加载
  45. const pageNum = ref(1);
  46. const pageSize = ref(20);
  47. const styleList = ref([]);
  48. // 得到列表
  49. async function getList() {
  50. try {
  51. const res = await getListApi(pageNum.value, pageSize.value);
  52. styleList.value = res.data.list;
  53. } catch (error) {
  54. uni.showToast({
  55. title: "获取列表失败,请重试",
  56. icon: "none",
  57. });
  58. }
  59. }
  60. getList();
  61. // 触底加载更多
  62. const scrolltolower = async () => {
  63. try {
  64. uni.showLoading({
  65. title: "加载中...",
  66. mask: true,
  67. duration: 2000,
  68. });
  69. pageNum.value += 1;
  70. const res = await getListApi(pageNum.value, pageSize.value);
  71. styleList.value.push(...res.data.list);
  72. setTimeout(function () {
  73. uni.hideLoading();
  74. }, 500);
  75. if (res.data.list.length == 0) {
  76. pageNum.value -= 1;
  77. uni.showToast({
  78. title: "已加载全部内容",
  79. icon: "none",
  80. });
  81. }
  82. } catch (error) {
  83. setTimeout(function () {
  84. uni.hideLoading();
  85. }, 500);
  86. uni.showToast({
  87. title: "获取数据失败,请重试",
  88. icon: "none",
  89. });
  90. }
  91. };
  92. // 处理单人双人多人
  93. function peopleNum(num) {
  94. if (num == 1) {
  95. return "单人";
  96. } else if (num == 2) {
  97. return "双人";
  98. } else if (num == 3) {
  99. return "三人";
  100. }
  101. }
  102. //#endregion ---------------------
  103. //#region 点击图片
  104. function createPhoto(item) {
  105. if (item.mouldType == 1) {
  106. uni.navigateTo({
  107. url: `/pages/closeStyle/goCreatePhoto?id=${item.id}`,
  108. });
  109. } else {
  110. uni.navigateTo({
  111. url: `/pages/closeStyle/multiplayer?id=${item.id}`,
  112. });
  113. }
  114. }
  115. //#endregion ---------------------
  116. </script>
  117. <style lang="scss">
  118. .page {
  119. background-color: #222527;
  120. }
  121. .u-list {
  122. width: 650rpx;
  123. .glodYBox {
  124. display: flex !important;
  125. flex-direction: row !important;
  126. flex-wrap: wrap !important;
  127. justify-content: space-between !important;
  128. }
  129. .u-list-item {
  130. display: flex !important;
  131. flex-direction: row !important;
  132. flex-wrap: wrap !important;
  133. justify-content: space-between !important;
  134. }
  135. .styleInfo {
  136. position: relative;
  137. display: flex !important;
  138. flex-wrap: wrap !important;
  139. width: 300rpx;
  140. height: 480rpx;
  141. margin-bottom: 50rpx;
  142. border-radius: 24rpx;
  143. overflow: hidden;
  144. image {
  145. width: 300rpx;
  146. height: 400rpx;
  147. }
  148. .name {
  149. background-color: #393b3d;
  150. width: 100%;
  151. height: 80rpx;
  152. text-align: center;
  153. line-height: 80rpx;
  154. font-size: 30rpx;
  155. font-weight: bold;
  156. }
  157. .single {
  158. position: absolute;
  159. top: 11rpx;
  160. right: 13rpx;
  161. width: 72rpx;
  162. height: 41rpx;
  163. text-align: center;
  164. line-height: 41rpx;
  165. background: rgba(0, 0, 0, 0.4);
  166. font-size: 22rpx;
  167. // opacity: 0.4;
  168. border-radius: 12rpx;
  169. }
  170. }
  171. }
  172. </style>