邃芒智像(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.
 
 
 
 

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