邃芒智像(Uniapp : WX、TT、H5)
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.
 
 
 
 

162 rader
3.5 KiB

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