feat(uploadClothes): 新增服饰上传页面及选择图片组件

新增 uploadClothes 页面,支持用户上传服饰图片并展示。
包含 SelectPic 组件用于引导用户选择符合要求的图片。
页面支持下拉刷新和模板初始化逻辑。
This commit is contained in:
guigongli
2025-09-21 21:33:03 +08:00
parent f8dd924fa4
commit f5bfdb812f
4 changed files with 195 additions and 1 deletions
+13 -1
View File
@@ -53,7 +53,19 @@
"meta": {
"sync": true,
"title": "试衣间",
"group": "商城"
"group": "试衣间"
}
},
{
"path": "pages/uploadClothes/index",
"style": {
"navigationBarTitleText": "服饰上传",
"enablePullDownRefresh": true
},
"meta": {
"sync": true,
"title": "服饰上传",
"group": "服饰上传"
}
},
{
+95
View File
@@ -0,0 +1,95 @@
<!--
* @Author:
* @Date: 2025-09-21 10:09:22
* @LastEditors:
* @LastEditTime: 2025-09-21 21:20:33
* @FilePath: pages/uploadClothes/SelectPic.vue
* @Description: 这是默认设置,可以在设置工具File Description中进行配置
-->
<template>
<view class="pic">
<image class="image" src="/static/yangtu.png" mode="aspectFit" />
</view>
<view class="text">
<text>单件衣服去掉衣架</text>
<text>平铺在白色背景</text>
<text>尽可能拍摄正面图片如图</text>
</view>
<view class="btn" @click="dian">
上传服饰
<uni-file-picker
:auto-upload="false"
:del-icon="false"
:disable-preview="true"
:image-styles="imageStyle"
:sizeType="sizeType"
class="upload"
limit="1"
mode="grid"
@select="selectPic"
>选择
</uni-file-picker>
</view>
</template>
<script setup>
const imageStyle = {
width: 350,
height: 50,
};
const emits = defineEmits(['onChange']);
function selectPic(...e) {
emits('onChange', e);
console.log(e, 123);
}
</script>
<style lang="scss" scoped>
.upload {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
opacity: 0;
}
.btn {
box-sizing: border-box;
margin: 100rpx auto 0;
width: 580rpx;
height: 80rpx;
background: #000;
text-align: center;
line-height: 80rpx;
font-weight: 700;
color: #FFFFFF;
letter-spacing: 10rpx;
position: relative;
}
.pic {
padding-top: 150rpx;
display: flex;
justify-content: center;
align-items: center;
}
.text {
padding-top: 100rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text {
font-size: 28rpx;
font-style: normal;
font-weight: 400;
line-height: 44rpx;
}
}
.image {
width: 485rpx;
height: 700rpx;
}
</style>
+87
View File
@@ -0,0 +1,87 @@
<template>
<view v-if="template">
<SelectPic v-if="!imageUrl" @onChange="onChange" />
<view v-if="imageUrl" class="clothes-box">
<image
class="clothes"
mode="aspectFill"
:src="imageUrl"
@click="uploadFile"
></image>
</view>
</view>
</template>
<script setup>
import { computed, ref } from 'vue';
import { onLoad, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import SelectPic from '@/pages/uploadClothes/SelectPic.vue';
const fittingRoom = sheep.$store('fittingRoom');
const imageUrl = ref('https://picsum.photos/600/300?random=3')
// 隐藏原生tabBar
uni.hideTabBar({
fail: () => {},
});
function onChange(e) {
console.log(e, 12345);
imageUrl.value = e[0].tempFilePaths[0]
}
const template = computed(() => sheep.$store('app').template?.home);
onLoad((options) => {
// #ifdef MP
// 小程序识别二维码
if (options.scene) {
const sceneParams = decodeURIComponent(options.scene).split('=');
console.log('sceneParams=>', sceneParams);
options[sceneParams[0]] = sceneParams[1];
}
// #endif
// 预览模板
if (options.templateId) {
sheep.$store('app').init(options.templateId);
}
// 解析分享信息
if (options.spm) {
$share.decryptSpm(options.spm);
}
// 进入指定页面(完整页面路径)
if (options.page) {
sheep.$router.go(decodeURIComponent(options.page));
}
});
// 下拉刷新
onPullDownRefresh(() => {
sheep.$store('app').init();
setTimeout(function () {
uni.stopPullDownRefresh();
}, 800);
});
onPageScroll(() => {});
</script>
<style lang="scss" scoped>
.clothes-box {
display: flex;
justify-content: center;
align-items: center;
}
.clothes {
width: 480rpx;
height: 700rpx;
background: #000;
border: 0.5px solid #000;
margin-top: 50rpx;
}
</style>
BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 560 KiB