feat(fittingRoom): 优化试衣间页面布局和样式
- 调整页面结构，将轮播图组件移入 sticky 容器内 - 添加页面背景色 #ffffff -为滚动区域添加 scroll 样式类 - 优化上传服饰页面结构，使用 s-layout 组件包裹内容 - 更新页面标题为“服饰上传”- 修改 manifest.json 中的 appid - 调整 pages.json 中 uploadClothes 页面配置，自定义导航栏并禁用标题栏
This commit is contained in:
liguigong
+1
-1
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name" : "商城",
|
"name" : "商城",
|
||||||
"appid" : "__UNI__A2B711F",
|
"appid" : "__UNI__A3FE0A4",
|
||||||
"description" : "基于 uni-app + Vue3 技术驱动的在线商城系统，内含诸多功能与丰富的活动，期待您的使用和反馈。",
|
"description" : "基于 uni-app + Vue3 技术驱动的在线商城系统，内含诸多功能与丰富的活动，期待您的使用和反馈。",
|
||||||
"versionName" : "2025.09",
|
"versionName" : "2025.09",
|
||||||
"versionCode" : "183",
|
"versionCode" : "183",
|
||||||
|
|||||||
+5
-6
@@ -100,13 +100,12 @@
|
|||||||
{
|
{
|
||||||
"path": "pages/uploadClothes/index",
|
"path": "pages/uploadClothes/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "服饰上传",
|
"navigationBarTitleText": "123",
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"h5": {
|
||||||
|
"titleNView": false // H5 端直接去掉浏览器默认标题栏
|
||||||
|
},
|
||||||
"enablePullDownRefresh": false
|
"enablePullDownRefresh": false
|
||||||
},
|
|
||||||
"meta": {
|
|
||||||
"sync": true,
|
|
||||||
"title": "服饰上传",
|
|
||||||
"group": "服饰上传"
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
+51
-44
@@ -1,54 +1,57 @@
|
|||||||
<template>
|
<template
|
||||||
<view>
|
><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>
|
|
||||||
<uv-sticky :customNavHeight="0" :offset-top="0">
|
<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 />
|
<s-tabs />
|
||||||
</uv-sticky>
|
</uv-sticky>
|
||||||
<s-grid-clothes />
|
<view class="scroll">
|
||||||
<view class="height1"></view>
|
<s-grid-clothes />
|
||||||
|
<view class="height1"></view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { computed, onMounted, reactive, ref } from 'vue';
|
import { onMounted, reactive } from 'vue';
|
||||||
import { onLoad, onPageScroll, onPullDownRefresh, onUnload } from '@dcloudio/uni-app';
|
import { onLoad, onPullDownRefresh, onUnload } from '@dcloudio/uni-app';
|
||||||
import sheep from '@/sheep';
|
import sheep from '@/sheep';
|
||||||
import SSelectMote from './components/s-select-mote.vue';
|
import SSelectMote from './components/s-select-mote.vue';
|
||||||
import STabs from './components/STabs.vue';
|
import STabs from './components/STabs.vue';
|
||||||
@@ -128,6 +131,7 @@
|
|||||||
.uni-margin-wrap {
|
.uni-margin-wrap {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
background: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.swiper {
|
.swiper {
|
||||||
@@ -207,4 +211,7 @@
|
|||||||
background: #171717;
|
background: #171717;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.scroll {
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,57 +1,59 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container-box">
|
<s-layout :bgStyle="{ color: '#FFF' }" title="服饰上传">
|
||||||
<SelectPic v-if="!imageUrl" @onChange="onChange" />
|
<view class="container-box">
|
||||||
<template v-if="imageUrl">
|
<SelectPic v-if="!imageUrl" @onChange="onChange" />
|
||||||
<view class="clothes-box">
|
<template v-if="imageUrl">
|
||||||
<image :src="imageUrl" class="clothes" mode="aspectFill" @click="uploadFile"></image>
|
<view class="clothes-box">
|
||||||
</view>
|
<image :src="imageUrl" class="clothes" mode="aspectFill" @click="uploadFile"></image>
|
||||||
|
</view>
|
||||||
|
|
||||||
<view class="warp">
|
<view class="warp">
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<view class="title">分类：</view>
|
<view class="title">分类：</view>
|
||||||
<uv-radio-group v-model="fittingRoomStore.selectClothesType">
|
<uv-radio-group v-model="fittingRoomStore.selectClothesType">
|
||||||
<template v-for="(item, index) in fittingRoomStore.tabs">
|
<template v-for="(item, index) in fittingRoomStore.tabs">
|
||||||
|
<uv-radio
|
||||||
|
v-if="index !== 0 && index !== 6"
|
||||||
|
:key="fittingRoomStore.tabsMap[index]"
|
||||||
|
:customStyle="{ margin: '12rpx' }"
|
||||||
|
:label="item"
|
||||||
|
:name="fittingRoomStore.tabsMap[index]"
|
||||||
|
activeColor="#606060"
|
||||||
|
iconSize="20rpx"
|
||||||
|
shape="square"
|
||||||
|
size="26rpx"
|
||||||
|
>
|
||||||
|
</uv-radio>
|
||||||
|
</template>
|
||||||
|
</uv-radio-group>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="warp">
|
||||||
|
<view class="container">
|
||||||
|
<view class="title">长度：</view>
|
||||||
|
<uv-radio-group v-model="fittingRoomStore.selectPattern">
|
||||||
<uv-radio
|
<uv-radio
|
||||||
v-if="index !== 0 && index !== 6"
|
v-for="(item, index) in pattern"
|
||||||
:key="fittingRoomStore.tabsMap[index]"
|
:key="index"
|
||||||
:customStyle="{ margin: '12rpx' }"
|
:customStyle="{ margin: '12rpx' }"
|
||||||
:label="item"
|
:label="item.label"
|
||||||
:name="fittingRoomStore.tabsMap[index]"
|
:name="item.value"
|
||||||
activeColor="#606060"
|
activeColor="#606060"
|
||||||
iconSize="20rpx"
|
iconSize="20rpx"
|
||||||
shape="square"
|
shape="square"
|
||||||
size="26rpx"
|
size="26rpx"
|
||||||
>
|
>
|
||||||
</uv-radio>
|
</uv-radio>
|
||||||
</template>
|
</uv-radio-group>
|
||||||
</uv-radio-group>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
<view class="operating">
|
||||||
<view class="warp">
|
<view class="delete" @click="deleteClothes">删除</view>
|
||||||
<view class="container">
|
<view class="delete" @click="confirmClothes">确认</view>
|
||||||
<view class="title">长度：</view>
|
|
||||||
<uv-radio-group v-model="fittingRoomStore.selectPattern">
|
|
||||||
<uv-radio
|
|
||||||
v-for="(item, index) in pattern"
|
|
||||||
:key="index"
|
|
||||||
:customStyle="{ margin: '12rpx' }"
|
|
||||||
:label="item.label"
|
|
||||||
:name="item.value"
|
|
||||||
activeColor="#606060"
|
|
||||||
iconSize="20rpx"
|
|
||||||
shape="square"
|
|
||||||
size="26rpx"
|
|
||||||
>
|
|
||||||
</uv-radio>
|
|
||||||
</uv-radio-group>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</template>
|
||||||
<view class="operating">
|
</view>
|
||||||
<view class="delete" @click="deleteClothes">删除</view>
|
</s-layout>
|
||||||
<view class="delete" @click="confirmClothes">确认</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
</view>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
|||||||
Reference in New Issue
Block a user