guigongli
8f68f9b0c8
fix(uploadClothes): 修复上传页面分类选择逻辑 调整上传衣服页面的分类选择逻辑，使用 uv-radio-group 实现单选功能，支持衣服类型和长度部位的选择。引入 fittingRoom store 中的 tabs 和 pattern 数据，优化用户交互体验。 chore(deps): 更新 uv-icon 和 uv-radio 组件版本更新 uv-icon 和 uv-radio 组件的 package.json 配置文件，设置版本号为1.0.13。更新 changelog 文档，记录组件的优化和 bug 修复历史。完善组件的平台兼容性配置和依赖关系。 style(components): 调整上传页面样式布局优化上传衣服页面的样式布局，新增 warp、title、container 等样式类，改善分类和长度选择区域的显示效果。调整单选框的间距和对齐方式，提升用户界面的美观性和可用性。
149 lines
3.6 KiB
Vue
149 lines
3.6 KiB
Vue
<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 class="warp">
|
||
<view class="container">
|
||
<view class="title">分类：</view>
|
||
<uv-radio-group v-model="fittingRoomStore.selectClothesType">
|
||
<template v-for="(item, index) in fittingRoomStore.tabs">
|
||
<uv-radio
|
||
shape="square"
|
||
:customStyle="{margin: '12rpx'}"
|
||
v-if="index !== 0 && index !== 5"
|
||
:key="index"
|
||
:label="item"
|
||
size="26rpx"
|
||
iconSize="20rpx"
|
||
activeColor="#606060"
|
||
:name="index">
|
||
</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
|
||
v-for="(item, index) in pattern"
|
||
shape="square"
|
||
:customStyle="{margin: '12rpx'}"
|
||
:key="index"
|
||
:label="item.label"
|
||
size="26rpx"
|
||
iconSize="20rpx"
|
||
activeColor="#606060"
|
||
:name="item.value">
|
||
</uv-radio>
|
||
</uv-radio-group>
|
||
</view>
|
||
</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';
|
||
import { pattern } from '@/sheep/store/fittingRoom';
|
||
|
||
const fittingRoomStore = sheep.$store('fittingRoom');
|
||
|
||
const imageUrl = ref('https://picsum.photos/600/300?random=3')
|
||
function selectColthesType(val) {
|
||
console.log("🚀 ~ selectColthesType ~ val: ", val);
|
||
}
|
||
// 隐藏原生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>
|
||
.warp {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.title {
|
||
font-size: 28rpx;
|
||
}
|
||
.container {
|
||
width: 323*2rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
}
|
||
.selectCheckbox {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.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>
|