feat(fittingRoom):优化试衣间轮播图逻辑与加载状态检测 swiper
- 新增CurrentIndex 状态管理当前轮播索引 - 移除数组反转逻辑,调整模特展示顺序 - 添加 generatingLoading 计算属性检测试穿结果生成状态 - 更新轮播图组件绑定状态为 store 中的 swiperCurrentIndex - 修复轮播切换事件更新 store 状态的逻辑 - 调整定时任务检测条件为 generatingLoading 状态- 微调轮播图片样式位置
This commit is contained in:
+49
-49
@@ -1,47 +1,48 @@
|
||||
<template
|
||||
><view>
|
||||
<uv-sticky :customNavHeight="0" :offset-top="0">
|
||||
<view class="uni-margin-wrap">
|
||||
<uni-swiper-dot
|
||||
:current="currentIndex"
|
||||
:dots-styles="dotsStyles"
|
||||
:info="fittingRoomStore.testResults"
|
||||
:mode="'default'"
|
||||
field="content"
|
||||
<template>
|
||||
<uv-sticky :customNavHeight="0" :offset-top="0">
|
||||
<view class="uni-margin-wrap">
|
||||
<uni-swiper-dot
|
||||
:current="fittingRoomStore.swiperCurrentIndex"
|
||||
:dots-styles="dotsStyles"
|
||||
:info="fittingRoomStore.testResults"
|
||||
:mode="'default'"
|
||||
field="content"
|
||||
>
|
||||
<swiper
|
||||
:autoplay="false"
|
||||
:duration="500"
|
||||
:interval="5000"
|
||||
:next-margin="'160rpx'"
|
||||
:previous-margin="'160rpx'"
|
||||
circular
|
||||
class="swiper"
|
||||
current="0"
|
||||
@change="swiperChange"
|
||||
>
|
||||
<swiper
|
||||
:autoplay="false"
|
||||
:duration="500"
|
||||
:interval="5000"
|
||||
:next-margin="'160rpx'"
|
||||
:previous-margin="'160rpx'"
|
||||
circular
|
||||
class="swiper"
|
||||
current="0"
|
||||
@change="swiperChange"
|
||||
>
|
||||
<swiper-item v-for="(item, index) in fittingRoomStore.testResults" :key="index">
|
||||
<view class="swiper-item">
|
||||
<image
|
||||
:class="['swiper-image', currentIndex === index ? 'active' : '']"
|
||||
:src="item.tryOnResultUrl || '/static/uploads/loading12.gif'"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</uni-swiper-dot>
|
||||
<s-select-mote />
|
||||
<Clothespic />
|
||||
</view>
|
||||
|
||||
<s-tabs />
|
||||
</uv-sticky>
|
||||
<view class="scroll">
|
||||
<s-grid-clothes />
|
||||
<view class="height1"></view>
|
||||
<swiper-item v-for="(item, index) in fittingRoomStore.testResults" :key="index">
|
||||
<view class="swiper-item">
|
||||
<image
|
||||
:class="[
|
||||
'swiper-image',
|
||||
fittingRoomStore.swiperCurrentIndex === index ? 'active' : '',
|
||||
]"
|
||||
:src="item.tryOnResultUrl || '/static/uploads/loading12.gif'"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</uni-swiper-dot>
|
||||
<s-select-mote />
|
||||
<Clothespic />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<s-tabs />
|
||||
</uv-sticky>
|
||||
<scroll-view class="scroll" scroll-y="true">
|
||||
<s-grid-clothes />
|
||||
<view class="height1"></view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -62,8 +63,6 @@
|
||||
selectedBorder: '0px rgba(83, 200, 249,0.9) solid',
|
||||
};
|
||||
|
||||
const currentIndex = ref(0);
|
||||
|
||||
// sheep.$helper.toast('请选择是否同意协议');
|
||||
// 隐藏原生tabBar
|
||||
uni.hideTabBar({
|
||||
@@ -71,7 +70,8 @@
|
||||
});
|
||||
|
||||
function swiperChange(event) {
|
||||
currentIndex.value = event.detail.current;
|
||||
console.log('🚀 ~ swiperChange 🐶75 ~ event: ', event);
|
||||
fittingRoomStore.swiperCurrentIndex = event.detail.current;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
@@ -80,8 +80,8 @@
|
||||
fittingRoomStore.getModelList();
|
||||
timer = setInterval(() => {
|
||||
// TODO: 检测到还有没生成图的, 获取最新数据
|
||||
// fittingRoomStore.currentModel?.id &&
|
||||
// fittingRoomStore.getTestResults(fittingRoomStore.currentModel?.id);
|
||||
fittingRoomStore.generatingLoading &&
|
||||
fittingRoomStore.getTestResults(fittingRoomStore.currentModel?.id);
|
||||
}, 6000);
|
||||
});
|
||||
onUnload(() => {
|
||||
@@ -119,7 +119,7 @@
|
||||
// sheep.$store('app').init();
|
||||
if (fittingRoomStore.currentModel?.id) {
|
||||
fittingRoomStore.getTestResults(fittingRoomStore.currentModel?.id).then(() => {
|
||||
console.log('➤➤➤ ~ index.vue ~ L100');
|
||||
console.log('➤➤➤ ~ index.vue ~ L124');
|
||||
uni.stopPullDownRefresh();
|
||||
});
|
||||
} else {
|
||||
@@ -158,7 +158,7 @@
|
||||
width: 430rpx;
|
||||
height: 680rpx;
|
||||
box-shadow: 0px 0px 30rpx rgba(0, 0, 0, 0.2);
|
||||
transform: scale(0.9) translate(0, 18px);
|
||||
transform: scale(0.9) translate(0, 20px);
|
||||
opacity: 0.3;
|
||||
transition: all 0.2s ease-in 0.1s;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user