liguigong
b9d19508ca
- 统一代码风格，修复缺少分号问题-优化试衣结果图片加载逻辑，添加默认loading图 - 修复上传衣物页面容器样式问题 - 调整模特切换逻辑，增加可见性控制- 更新README文档，添加试衣间相关链接 -优化上传衣物选择器样式与交互细节
96 lines
1.9 KiB
Vue
96 lines
1.9 KiB
Vue
<!--
|
||
* @Author:
|
||
* @Date: 2025-09-21 10:09:22
|
||
* @LastEditors: liguigong liguigong@shopline.com
|
||
* @LastEditTime: 2025-09-28 16:11:43
|
||
* @FilePath: pages/uploadClothes/SelectPic.vue
|
||
* @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
|
||
-->
|
||
<template>
|
||
<view class="pic">
|
||
<image class="image" mode="aspectFit" src="/static/yangtu.png" />
|
||
</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: 100rpx;
|
||
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>
|