liguigong
757b562aee
- 修改 getModelList 方法支持根据 modelId 初始化当前模型 -优化试穿逻辑，根据 tab 切换调用不同试穿接口- 页面加载时根据 URL 参数初始化模型和测试结果 -修复 swiper 组件当前索引绑定问题 -限制模型列表显示数量为 4个 - 更新 README 文档，添加发型试穿链接和测试地址
128 lines
2.8 KiB
Vue
128 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.slice(0, 4)"
|
||
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>
|