guigongli
f8dd924fa4
feat(fittingRoom): 替换轮播D堆叠效果 - 引图组件为3入新的 `hbxw-stack-carousel` 轮播图组件，支持3D堆叠、自动播放和手势滑动 - 更新页面结构与样式以适配新组件 - 增加点击事件处理函数 `handleItemClick` 和轮播切换事件 `handleChange` - 添加动态更新轮播数据的功能，通过 `dian` 方法测试数据变更 - 调整图片展示模式为 `aspectFill` 并设定固定宽高 -优化样式布局，设置相对定位及层级控制 docs(readme): 添加接口文档链接 - 在 README 中补充项目相关接口文档的访问地址 ```
117 lines
2.4 KiB
Vue
117 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: 50,
|
||
};
|
||
|
||
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;
|
||
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>
|