liguigong
cad438514d
- 新增上传模特图片接口及调用逻辑- 更新模特展示组件，支持动态显示模特缩略图 - 添加获取衣服分类接口及初始化调用- 配置.editorconfig统一代码风格 - 移除调试用的console.log及token写死逻辑 - 修复部分组件引用及生命周期调用问题
124 lines
2.8 KiB
Vue
124 lines
2.8 KiB
Vue
<!-- 商品信息：满减送等营销活动的弹窗 -->
|
||
<template>
|
||
<view :class="['mote', { unfold: fittingRoom.visable }]">
|
||
<view class="item" @click="expansion">
|
||
<view class="item-text">模特</view>
|
||
<image
|
||
:src="fittingRoom.currentModel.thumbnailFileUrl"
|
||
class="item-image"
|
||
mode="aspectFill"
|
||
></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 v-for="item of fittingRoom.modelList" class="item" @click="switchModels(item)">
|
||
<view class="item-text"></view>
|
||
<image :src="item.thumbnailFileUrl" class="item-image" mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script setup>
|
||
import { onMounted, reactive, ref } from 'vue';
|
||
import sheep from '../../../sheep';
|
||
import FittingRoomApi from '../../../sheep/api/fittingRoom'; // 隐藏
|
||
const sizeType = ['original'];
|
||
const imageStyle = {
|
||
width: 200,
|
||
height: 50,
|
||
};
|
||
const fittingRoom = sheep.$store('fittingRoom');
|
||
console.log(fittingRoom.currentModel);
|
||
|
||
function selectPic(...data) {
|
||
FittingRoomApi.uploadModel(data[0].tempFiles[0].path, { sex: fittingRoom.sex }).then(() =>
|
||
fittingRoom.getModelList(),
|
||
);
|
||
}
|
||
|
||
function switchModels(item) {
|
||
fittingRoom.switchModels(item);
|
||
console.log('🚀 ~ ~ fittingRoom: ', item);
|
||
}
|
||
|
||
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;
|
||
z-index: 200;
|
||
}
|
||
.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%;
|
||
opacity: 0;
|
||
}
|
||
|
||
.item-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
</style>
|