guigongli
657631f5bf
- 在 fittingRoom.js 中添加 disableTabs 数组，用于控制不允许上传的分类- 修改 canUpload getter，使用 disableTabs 判断是否允许上传 - 更新 s-grid-clothes.vue 和 s-select-mote.vue 组件，增加上传功能 - 调整上传按钮样式和布局
115 lines
2.4 KiB
Vue
115 lines
2.4 KiB
Vue
<!-- 商品信息：满减送等营销活动的弹窗 -->
|
||
<template>
|
||
<view :class="['mote', { unfold: fittingRoom.visable }]">
|
||
<view class="item" @click="expansion">
|
||
<view class="item-text">模特</view>
|
||
<image class="item-image" mode="widthFix" src="/static/mote.png"></image>
|
||
</view>
|
||
<view class="item">
|
||
<image class="shangchuan" mode="heightFix" src="/static/shangchuan.png"></image>
|
||
<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>
|
||
<view class="item" @click="switchModels">
|
||
<view class="item-text"></view>
|
||
<image class="item-image" mode="widthFix" src="/static/mote.png"></image>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script setup>
|
||
import sheep from '../../../sheep';
|
||
const sizeType = ['original'];
|
||
const imageStyle = {
|
||
width: 200,
|
||
height: 200,
|
||
};
|
||
|
||
const fittingRoom = sheep.$store('fittingRoom');
|
||
|
||
function selectPic(...data) {
|
||
console.log(fittingRoom.tab);
|
||
console.log('🚀 ~ selectPic 🐶47 ~ data: ', data);
|
||
}
|
||
|
||
|
||
function switchModels() {
|
||
console.log("🚀 ~ ~ fittingRoom: ", 12);
|
||
}
|
||
|
||
console.log('🚀 ~ 🐶9 ~ fittingRoom: ', fittingRoom);
|
||
|
||
function expansion(e) {
|
||
fittingRoom.setVisable();
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.mote {
|
||
position: absolute;
|
||
top: 50rpx;
|
||
left: 20rpx;
|
||
overflow: hidden;
|
||
height: 76rpx;
|
||
transition: height 0.3s ease-in-out;
|
||
}
|
||
.unfold {
|
||
height: 700rpx;
|
||
}
|
||
|
||
.item {
|
||
width: 86rpx;
|
||
height: 76rpx;
|
||
margin-bottom: 16rpx;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.item-text {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
color: #fff;
|
||
text-align: center;
|
||
//font-family: Molengo;
|
||
font-size: 20rpx;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
line-height: 76rpx;
|
||
text-transform: uppercase;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
z-index: 3;
|
||
}
|
||
|
||
.shangchuan {
|
||
width: 86rpx;
|
||
height: 76rpx;
|
||
}
|
||
|
||
.upload {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.item-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
</style>
|