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

新增 uploadClothes 页面，支持用户上传服饰图片并展示。包含 SelectPic 组件用于引导用户选择符合要求的图片。页面支持下拉刷新和模板初始化逻辑。
2025-09-21 21:33:03 +08:00
parent f8dd924fa4
commit f5bfdb812f
4 changed files with 195 additions and 1 deletions
@@ -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>