guigongli
f5bfdb812f
新增 uploadClothes 页面，支持用户上传服饰图片并展示。 包含 SelectPic 组件用于引导用户选择符合要求的图片。 页面支持下拉刷新和模板初始化逻辑。
96 lines
1.9 KiB
Vue
96 lines
1.9 KiB
Vue
<!--
|
||
* @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>
|