|
- <template>
- <view class="page" id="page">
- <!-- tab栏 -->
- <view class="tabBox">
- <u-tabs
- :list="sexList"
- lineWidth="50"
- lineColor="#ff4f00"
- :itemStyle="{ width: '150rpx', height: '90rpx', padding: '0' }"
- :activeStyle="{ color: '#ff4f00', fontsize: '30rpx' }"
- :inactiveStyle="{ color: '#fff', fontsize: '30rpx' }"
- @click="chooseTab"
- ></u-tabs>
- <view class="moreTabs">
- <!-- <view class="moreIcon" @click="showPopup = true"> 更多 </view> -->
- <view class="moreIcon" @click="showPopup = true"> 更多 </view>
- </view>
- </view>
- <!-- 更多tab弹出层 -->
- <u-popup
- closeable="true"
- mode="top"
- :round="20"
- :show="showPopup"
- @close="closePopup"
- @open="openPopup"
- >
- <view class="popupBox">
- <view class="type">性别</view>
- <view class="typeBox">
- <view
- v-show="item.name"
- class="typeBox-item"
- :class="item.id == sex ? 'itemActive' : ''"
- @click="chooseSex(item)"
- v-for="item in sexList2"
- :key="item.id"
- >{{ item.name }}</view
- >
- </view>
- <view class="type">类型</view>
- <view class="typeBox">
- <view
- v-show="item.name"
- class="typeBox-item"
- :class="item.id == mouldType ? 'itemActive' : ''"
- @click="chooseMouldType(item)"
- v-for="item in mouldTypeList"
- :key="item.id"
- >{{ item.name }}</view
- >
- </view>
- </view>
- </u-popup>
- <!-- 模版选择 -->
- <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>
- <view
- v-if="styleList.length == 0"
- style="width: 100%; text-align: center"
- >暂无数据</view
- >
- </u-list-item>
- </u-list>
- </view>
- </template>
-
- <script setup>
- //#region 导入
- import { ref, watch, onMounted } from "vue";
- import { getListApi } from "../../api/closeStyle";
- import { onLoad, onUnload } from "@dcloudio/uni-app";
- import { userInfoModules } from "@/store/modules/userInfo";
- const userInfoModulesPinia = userInfoModules();
- //#endregion -----------------------
-
- //#region tab栏
- // 性别
- const sex = ref(2);
- const sexList = ref([
- { name: "女", id: 2 },
- { name: "男", id: 1 },
- { name: "单人", id: 3 },
- { name: "多人", id: 4 },
- ]);
- const sexList2 = ref([
- { name: "女", id: 2 },
- { name: "男", id: 1 },
- ]);
-
- // 类型
- const mouldType = ref("");
- const mouldTypeList = ref([
- { name: "单人", id: 1 },
- { name: "多人", id: 2 },
- ]);
- // 点击tab
- function chooseTab(item) {
- if (item.id < 3) {
- sex.value = item.id;
- mouldType.value = "";
- } else if (item.id == 3) {
- mouldType.value = 1;
- sex.value = "";
- } else if (item.id == 4) {
- mouldType.value = 2;
- sex.value = "";
- }
- }
- // 更多里的tab 性别
- function chooseSex(item) {
- if (sex.value == item.id) {
- if (mouldType.value == "") {
- return;
- } else {
- sex.value = "";
- }
- } else {
- sex.value = item.id;
- mouldType.value = "";
- }
- }
- // 更多里的tab 类型
- function chooseMouldType(item) {
- if (mouldType.value == item.id) {
- if (sex.value == "") {
- return;
- } else {
- mouldType.value = "";
- }
- } else {
- mouldType.value = item.id;
- sex.value = "";
- }
- }
- //#endregion
-
- //#region 更多tab弹出层
- const showPopup = ref(false);
- function closePopup() {
- showPopup.value = false;
- }
- function openPopup() {}
- function toCreated() {
- // uni.navigateTo({ url: "/pages/createing/index" });
- }
- //#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,
- mouldType.value
- );
- styleList.value = res.data.list;
- uni.hideLoading();
- } catch (error) {
- uni.hideLoading();
- uni.showToast({
- title: "获取列表失败,请重试",
- icon: "none",
- });
- }
- }
- // 监听性别tab变化
- watch(
- () => mouldType.value,
- (old) => {
- pageNum.value = 1;
- pageSize.value = 20;
- getList();
- }
- );
- watch(
- () => sex.value,
- () => {
- 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,
- mouldType.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",
- mask: false,
- });
- }
- } 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) {
- uni.navigateTo({
- url: `/pages/createing/index?id=${item.id}`,
- });
- // if (item.mouldType == 1) {
- // } else {
- // uni.navigateTo({
- // url: `/pages/closeStyle/multiplayer?id=${item.id}`,
- // });
- // }
- }
- //#endregion ---------------------
-
- //#region 页面初始化和卸载
- const resetTimer = ref(null);
- onMounted(() => {
- window.document.addEventListener("touchstart", () => {
- // 用户点击时,清除之前的定时器
- clearTimeout(resetTimer.value);
- // 重新设定120秒后触发的定时器
- resetTimer.value = setTimeout(() => {
- userInfoModulesPinia.clearStorage();
- window.webview.raiseEvent("pageRefresh", "test_params");
- uni.redirectTo({ url: "/pages/login/index" });
- }, 300000);
- });
- resetTimer.value = setTimeout(() => {
- userInfoModulesPinia.clearStorage();
- window.webview.raiseEvent("pageRefresh", "test_params");
- uni.redirectTo({ url: "/pages/login/index" });
- }, 300000);
- });
- onUnload(() => {
- uni.hideLoading();
- clearTimeout(resetTimer.value);
- });
- //#endregion -----------------------
- </script>
-
- <style lang="scss" scoped>
- // <!-- tab栏 -->
- .tabBox {
- position: relative;
- width: 100vw;
-
- .u-tabs {
- :deep(.u-tabs__wrapper__nav__item__text) {
- font-size: 30rpx;
- }
- // width: calc(100% - 100rpx);
- width: 100%;
- color: #fff !important;
- margin-bottom: 30rpx;
- // :deep(.u-tabs__wrapper__nav__item-7) {
- // color: #00ff33 !important;
- // margin-right: 90rpx !important;
- // }
- }
- .moreTabs {
- position: absolute;
- top: 0;
- right: 0;
- width: 200rpx;
- height: 90rpx;
- background: linear-gradient(90deg, transparent 20%, #333 100%);
- // background-color: red;
- .moreIcon {
- margin-left: 50rpx;
- margin-top: 15rpx;
- width: 130rpx;
- height: 60rpx;
- border-radius: 40rpx;
- background-color: #ff4f00;
- text-align: center;
- line-height: 60rpx;
- }
- }
- }
- // <!-- 更多tab弹出层 -->
- .u-popup {
- :deep(.u-popup__content__close--top-right) {
- top: 35rpx;
- right: 35rpx;
- }
- :deep(.uicon-close) {
- font-size: 30rpx !important;
- }
- }
- .popupBox {
- padding-bottom: 30rpx;
- .type {
- padding: 30rpx 30rpx 0 30rpx;
- color: #000;
- font-weight: 900;
- font-size: 32rpx;
- }
- .typeBox {
- padding: 0 0 0 30rpx;
- display: flex;
- flex-wrap: wrap;
- justify-content: flex-start;
- color: #1f1212;
- font-size: 26rpx;
- &-item {
- margin-top: 20rpx;
- margin-right: 30rpx;
- height: 60rpx;
- line-height: 60rpx;
- text-align: center;
- // margin: 0 30rpx;
- width: 200rpx;
- border: 2rpx solid #ccc;
- border-radius: 30rpx;
- }
- .itemActive {
- color: #ff4f00;
- border: 2rpx solid #ff4f00;
- }
- }
- }
- // <!-- 模版选择 -->
- .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>
|