邃芒智像(Uniapp : WX、TT、H5)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

165 lines
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 { 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. uni.showLoading({
  62. title: "加载中...",
  63. mask: true,
  64. });
  65. pageNum.value += 1;
  66. const res = await getListApi(pageNum.value, pageSize.value);
  67. styleList.value.push(...res.data.list);
  68. uni.hideLoading();
  69. if (res.data.list.length == 0) {
  70. pageNum.value -= 1;
  71. uni.showToast({
  72. title: "已加载全部内容",
  73. icon: "none",
  74. });
  75. }
  76. } catch (error) {
  77. uni.hideLoading();
  78. uni.showToast({
  79. title: "获取数据失败,请重试",
  80. icon: "none",
  81. });
  82. }
  83. };
  84. // 处理单人双人多人
  85. function peopleNum(num) {
  86. if (num == 1) {
  87. return "单人";
  88. } else if (num == 2) {
  89. return "双人";
  90. } else if (num == 3) {
  91. return "三人";
  92. }
  93. }
  94. //#endregion ---------------------
  95. //#region 点击图片
  96. function createPhoto(id) {
  97. uni.navigateTo({
  98. url: `/pages/closeStyle/goCreatePhoto?id=${id}`,
  99. });
  100. }
  101. //#endregion ---------------------
  102. </script>
  103. <style lang="scss">
  104. .page {
  105. background-color: #222527;
  106. }
  107. .u-list {
  108. width: 650rpx;
  109. .glodYBox {
  110. display: flex !important;
  111. flex-direction: row !important;
  112. flex-wrap: wrap !important;
  113. justify-content: space-between !important;
  114. }
  115. .u-list-item {
  116. display: flex !important;
  117. flex-direction: row !important;
  118. flex-wrap: wrap !important;
  119. justify-content: space-between !important;
  120. }
  121. .styleInfo {
  122. position: relative;
  123. display: flex !important;
  124. flex-wrap: wrap !important;
  125. width: 300rpx;
  126. height: 480rpx;
  127. margin-bottom: 50rpx;
  128. border-radius: 24rpx;
  129. overflow: hidden;
  130. image {
  131. width: 300rpx;
  132. height: 400rpx;
  133. }
  134. .name {
  135. background-color: #393b3d;
  136. width: 100%;
  137. height: 80rpx;
  138. text-align: center;
  139. line-height: 80rpx;
  140. font-size: 30rpx;
  141. font-weight: bold;
  142. }
  143. .single {
  144. position: absolute;
  145. top: 11rpx;
  146. right: 13rpx;
  147. width: 72rpx;
  148. height: 41rpx;
  149. text-align: center;
  150. line-height: 41rpx;
  151. background: rgba(0, 0, 0, 0.4);
  152. font-size: 22rpx;
  153. // opacity: 0.4;
  154. border-radius: 12rpx;
  155. }
  156. }
  157. }
  158. </style>