Browse Source

1

dev_YWQ
congzc 1 year ago
parent
commit
3e03b58bd8
1 changed files with 0 additions and 225 deletions
  1. +0
    -225
      src/pages/closeStyle/closeStyle copy.vue

+ 0
- 225
src/pages/closeStyle/closeStyle copy.vue View File

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

Loading…
Cancel
Save