| @@ -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> | |||