feat(fittingRoom): 优化试衣间页面布局和样式

- 调整页面结构,将轮播图组件移入 sticky 容器内
- 添加页面背景色 #ffffff
-为滚动区域添加 scroll 样式类
- 优化上传服饰页面结构,使用 s-layout 组件包裹内容
- 更新页面标题为“服饰上传”- 修改 manifest.json 中的 appid
- 调整 pages.json 中 uploadClothes 页面配置,自定义导航栏并禁用标题栏
This commit is contained in:
liguigong
2025-10-09 15:04:41 +08:00
parent f9861d09f9
commit 738f56caad
4 changed files with 101 additions and 93 deletions
+51 -44
View File
@@ -1,54 +1,57 @@
<template>
<view>
<view class="uni-margin-wrap">
<!-- https://ext.dcloud.net.cn/plugin?id=22930-->
<hbxw-stack-carousel
:key="fittingRoomStore.testResults"
:autoplay="false"
:height="680"
:interval="15000"
:list="fittingRoomStore.testResults"
:width="430"
indicatorStyle="line"
loop
@change="handleChange"
@click="handleItemClick"
>
<template #default="{ item, index }">
<view class="custom-item">
<image
:src="item.tryOnResultUrl || '/static/uploads/loading12.gif'"
class="swiper-image"
mode="aspectFill"
/>
</view>
</template>
<template #indicator="{ currentIndex, total, handleClick }">
<view class="custom-indicators">
<view
v-for="i in total"
:key="i"
:class="{ active: currentIndex === i - 1 }"
class="custom-indicator"
@click="handleClick(i - 1)"
></view>
</view>
</template>
</hbxw-stack-carousel>
<s-select-mote />
<Clothespic />
</view>
<template
><view>
<uv-sticky :customNavHeight="0" :offset-top="0">
<view class="uni-margin-wrap">
<!-- https://ext.dcloud.net.cn/plugin?id=22930-->
<hbxw-stack-carousel
:key="fittingRoomStore.testResults"
:autoplay="false"
:height="680"
:interval="15000"
:list="fittingRoomStore.testResults"
:width="430"
indicatorStyle="line"
loop
@change="handleChange"
@click="handleItemClick"
>
<template #default="{ item, index }">
<view class="custom-item">
<image
:src="item.tryOnResultUrl || '/static/uploads/loading12.gif'"
class="swiper-image"
mode="aspectFill"
/>
</view>
</template>
<template #indicator="{ currentIndex, total, handleClick }">
<view class="custom-indicators">
<view
v-for="i in total"
:key="i"
:class="{ active: currentIndex === i - 1 }"
class="custom-indicator"
@click="handleClick(i - 1)"
></view>
</view>
</template>
</hbxw-stack-carousel>
<s-select-mote />
<Clothespic />
</view>
<s-tabs />
</uv-sticky>
<s-grid-clothes />
<view class="height1"></view>
<view class="scroll">
<s-grid-clothes />
<view class="height1"></view>
</view>
</view>
</template>
<script setup>
import { computed, onMounted, reactive, ref } from 'vue';
import { onLoad, onPageScroll, onPullDownRefresh, onUnload } from '@dcloudio/uni-app';
import { onMounted, reactive } from 'vue';
import { onLoad, onPullDownRefresh, onUnload } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import SSelectMote from './components/s-select-mote.vue';
import STabs from './components/STabs.vue';
@@ -128,6 +131,7 @@
.uni-margin-wrap {
width: 100%;
position: relative;
background: #ffffff;
}
.swiper {
@@ -207,4 +211,7 @@
background: #171717;
}
}
.scroll {
overflow-y: scroll;
}
</style>