feat(fittingRoom): 更新试衣间图片展示逻辑并添加自定义指示器样式
- 将试衣结果图片URL从thumbnailFileUrl改为fileUrl以获取高清图- 新增自定义轮播图指示器组件及样式 - 添加指示器点击事件处理函数 - 设置激活状态下的指示器宽度和颜色变化- 调整指示器布局为水平居中对齐- 优化指示器元素间的间距与透明度设置
This commit is contained in:
@@ -23,6 +23,17 @@
|
|||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
<template #indicator="{ currentIndex, total, handleClick }">
|
||||||
|
<view class="custom-indicators">
|
||||||
|
<view
|
||||||
|
v-for="i in total"
|
||||||
|
:key="i"
|
||||||
|
:class="{ active: currentIndex === i - 1 }"
|
||||||
|
class="custom-indicator"
|
||||||
|
@click="handleClick(i - 1)"
|
||||||
|
></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
</hbxw-stack-carousel>
|
</hbxw-stack-carousel>
|
||||||
<s-select-mote />
|
<s-select-mote />
|
||||||
<Clothespic />
|
<Clothespic />
|
||||||
@@ -179,4 +190,21 @@
|
|||||||
width: 550rpx;
|
width: 550rpx;
|
||||||
padding: 0 100rpx;
|
padding: 0 100rpx;
|
||||||
}
|
}
|
||||||
|
.custom-indicators {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.custom-indicator {
|
||||||
|
width: 10rpx;
|
||||||
|
height: 1px;
|
||||||
|
opacity: 0.5;
|
||||||
|
background: #fff;
|
||||||
|
margin: 0 5rpx;
|
||||||
|
}
|
||||||
|
.active {
|
||||||
|
width: 30rpx;
|
||||||
|
height: 1px;
|
||||||
|
background: #171717;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -70,7 +70,7 @@ const fittingRoom = defineStore({
|
|||||||
'https://tupian05.oss-cn-beijing.aliyuncs.com/digital_cloth/1758853865858.png',
|
'https://tupian05.oss-cn-beijing.aliyuncs.com/digital_cloth/1758853865858.png',
|
||||||
clothingImageUrl:
|
clothingImageUrl:
|
||||||
'https://tupian05.oss-cn-beijing.aliyuncs.com/digital_cloth/1758795488865.jpg',
|
'https://tupian05.oss-cn-beijing.aliyuncs.com/digital_cloth/1758795488865.jpg',
|
||||||
tryOnResultUrl: this.currentModel.thumbnailFileUrl,
|
tryOnResultUrl: this.currentModel.fileUrl,
|
||||||
// "userId": 284,
|
// "userId": 284,
|
||||||
// "createTime": 1758857790000
|
// "createTime": 1758857790000
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user