| @@ -1,225 +0,0 @@ | |||||
| <template> | |||||
| <div class="page"> | |||||
| <!-- 性别tab --> | |||||
| <view class="sexTab"> | |||||
| <view @click="sex = 2" class="sex" :class="sex == 2 ? 'sexActive' : ''" | |||||
| >女</view | |||||
| > | |||||
| <view @click="sex = 1" class="sex" :class="sex == 1 ? 'sexActive' : ''" | |||||
| >男</view | |||||
| > | |||||
| </view> | |||||
| <u-list | |||||
| class="styleListBox" | |||||
| @scrolltolower="scrolltolower" | |||||
| lowerThreshold="100" | |||||
| > | |||||
| <u-list-item class="glodYBox"> | |||||
| <u-list-item | |||||
| v-for="item in styleList" | |||||
| :key="item.id" | |||||
| class="styleListBoxItme" | |||||
| > | |||||
| <view class="styleInfo" @click="createPhoto(item)"> | |||||
| <image :src="item.coverImg" mode="aspectFit" /> | |||||
| <text class="name">{{ item.title }}</text> | |||||
| <text class="single">{{ peopleNum(item.mouldType) }}</text> | |||||
| </view> | |||||
| </u-list-item> | |||||
| </u-list-item> | |||||
| </u-list> | |||||
| </div> | |||||
| </template> | |||||
| <script setup> | |||||
| //#region 导入 | |||||
| import { onPullDownRefresh } from "@dcloudio/uni-app"; | |||||
| import { ref, reactive, watch } from "vue"; | |||||
| import { getListApi } from "../../api/closeStyle"; | |||||
| //#endregion | |||||
| //#region 页面下拉刷新 | |||||
| // onPullDownRefresh(async () => { | |||||
| // uni.showLoading({ | |||||
| // title: "加载中...", | |||||
| // mask: true, | |||||
| // }); | |||||
| // pageNum.value = 1; | |||||
| // pageSize.value = 8; | |||||
| // styleList.value = []; | |||||
| // await getList(); | |||||
| // uni.hideLoading(); | |||||
| // uni.stopPullDownRefresh(); | |||||
| // }); | |||||
| //#endregion | |||||
| //#region 列表加载 | |||||
| const pageNum = ref(1); | |||||
| const pageSize = ref(20); | |||||
| const sex = ref(2); //1男2女 | |||||
| const styleList = ref([]); | |||||
| // 得到列表 | |||||
| async function getList() { | |||||
| try { | |||||
| uni.showLoading({ | |||||
| title: "加载中...", | |||||
| mask: true, | |||||
| }); | |||||
| const res = await getListApi(pageNum.value, pageSize.value, sex.value); | |||||
| styleList.value = res.data.list; | |||||
| uni.hideLoading(); | |||||
| } catch (error) { | |||||
| uni.hideLoading(); | |||||
| uni.showToast({ | |||||
| title: "获取列表失败,请重试", | |||||
| icon: "none", | |||||
| }); | |||||
| } | |||||
| } | |||||
| // 监听性别tab变化 | |||||
| watch( | |||||
| () => sex.value, | |||||
| (sex) => { | |||||
| pageNum.value = 1; | |||||
| pageSize.value = 20; | |||||
| getList(); | |||||
| } | |||||
| ); | |||||
| getList(); | |||||
| // 触底加载更多 | |||||
| const scrolltolower = async () => { | |||||
| try { | |||||
| uni.showLoading({ | |||||
| title: "加载中...", | |||||
| mask: true, | |||||
| }); | |||||
| pageNum.value += 1; | |||||
| const res = await getListApi(pageNum.value, pageSize.value, sex.value); | |||||
| styleList.value.push(...res.data.list); | |||||
| setTimeout(function () { | |||||
| uni.hideLoading(); | |||||
| }, 500); | |||||
| if (res.data.list.length == 0) { | |||||
| pageNum.value -= 1; | |||||
| uni.showToast({ | |||||
| title: "已加载全部内容", | |||||
| icon: "none", | |||||
| }); | |||||
| } | |||||
| } catch (error) { | |||||
| setTimeout(function () { | |||||
| uni.hideLoading(); | |||||
| }, 500); | |||||
| uni.showToast({ | |||||
| title: "获取数据失败,请重试", | |||||
| icon: "none", | |||||
| }); | |||||
| } | |||||
| }; | |||||
| // 处理单人双人多人 | |||||
| function peopleNum(num) { | |||||
| if (num == 1) { | |||||
| return "单人"; | |||||
| } else if (num == 2) { | |||||
| return "双人"; | |||||
| } else if (num == 3) { | |||||
| return "三人"; | |||||
| } | |||||
| } | |||||
| //#endregion --------------------- | |||||
| //#region 点击图片 | |||||
| function createPhoto(item) { | |||||
| if (item.mouldType == 1) { | |||||
| uni.navigateTo({ | |||||
| url: `/pages/closeStyle/goCreatePhoto?id=${item.id}`, | |||||
| }); | |||||
| } else { | |||||
| uni.navigateTo({ | |||||
| url: `/pages/closeStyle/multiplayer?id=${item.id}`, | |||||
| }); | |||||
| } | |||||
| } | |||||
| //#endregion --------------------- | |||||
| </script> | |||||
| <style lang="scss"> | |||||
| .page { | |||||
| background-color: #222527; | |||||
| } | |||||
| .sexTab { | |||||
| margin: 20rpx 0; | |||||
| width: 100%; | |||||
| height: 60rpx; | |||||
| display: flex; | |||||
| justify-content: space-evenly; | |||||
| line-height: 54rpx; | |||||
| text-align: center; | |||||
| .sex { | |||||
| border-radius: 20rpx; | |||||
| border: 2rpx solid #ccc; | |||||
| width: 40%; | |||||
| } | |||||
| .sexActive { | |||||
| color: #ff4f00; | |||||
| border: 2rpx solid #ff4f00; | |||||
| transition: all 0.3s; | |||||
| } | |||||
| } | |||||
| .u-list { | |||||
| overflow: hidden; | |||||
| height: calc(100vh - 200rpx) !important; | |||||
| width: 650rpx; | |||||
| .glodYBox { | |||||
| display: flex !important; | |||||
| flex-direction: row !important; | |||||
| flex-wrap: wrap !important; | |||||
| justify-content: space-between !important; | |||||
| } | |||||
| .u-list-item { | |||||
| display: flex !important; | |||||
| flex-direction: row !important; | |||||
| flex-wrap: wrap !important; | |||||
| justify-content: space-between !important; | |||||
| } | |||||
| .styleInfo { | |||||
| position: relative; | |||||
| display: flex !important; | |||||
| flex-wrap: wrap !important; | |||||
| width: 300rpx; | |||||
| height: 480rpx; | |||||
| margin-bottom: 50rpx; | |||||
| border-radius: 24rpx; | |||||
| overflow: hidden; | |||||
| image { | |||||
| width: 300rpx; | |||||
| height: 400rpx; | |||||
| } | |||||
| .name { | |||||
| background-color: #393b3d; | |||||
| width: 100%; | |||||
| height: 80rpx; | |||||
| text-align: center; | |||||
| line-height: 80rpx; | |||||
| font-size: 30rpx; | |||||
| font-weight: bold; | |||||
| } | |||||
| .single { | |||||
| position: absolute; | |||||
| top: 11rpx; | |||||
| right: 13rpx; | |||||
| width: 72rpx; | |||||
| height: 41rpx; | |||||
| text-align: center; | |||||
| line-height: 41rpx; | |||||
| background: rgba(0, 0, 0, 0.4); | |||||
| font-size: 22rpx; | |||||
| // opacity: 0.4; | |||||
| border-radius: 12rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||