Merge branch 'main' of https://git.nianxx.cn/zoujing/YGChatCS into fix-109
This commit is contained in:
103
src/pages/goods/album/index.vue
Normal file
103
src/pages/goods/album/index.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<view class="bg-F5F7FA flex flex-col h-screen overflow-hidden">
|
||||
<TopNavBar title="房间相册" backgroundColor="transparent" />
|
||||
<view class="p-8">
|
||||
<text class="ml-4 font-size-18 color-171717 font-500"
|
||||
>全部({{ albumList.length }})</text
|
||||
>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y class="scroll-container overflow-auto">
|
||||
<view class="pl-4 pr-4 pb-24">
|
||||
<view class="grid-container">
|
||||
<view
|
||||
class="album-item"
|
||||
v-for="(item, index) in albumList"
|
||||
:key="index"
|
||||
>
|
||||
<view class="album-image-wrapper">
|
||||
<image
|
||||
class="album-image"
|
||||
:src="item.photoUrl"
|
||||
mode="aspectFill"
|
||||
@click="handlePreview(item.photoUrl)"
|
||||
></image>
|
||||
<view class="album-title">{{ item.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import TopNavBar from "@/components/TopNavBar/index.vue";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import { useAppStore } from "@/store";
|
||||
const appStore = useAppStore();
|
||||
|
||||
const albumList = ref([]);
|
||||
|
||||
onLoad(() => {
|
||||
albumList.value = appStore.previewImageData;
|
||||
appStore.setPreviewImageData([]);
|
||||
});
|
||||
|
||||
// 处理图片预览
|
||||
const handlePreview = (photoUrl) => {
|
||||
uni.previewImage({
|
||||
current: photoUrl,
|
||||
urls: albumList.value.map((item) => item.photoUrl),
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr); // 每行2列
|
||||
grid-gap: 8px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.album-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.album-image-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 1 / 1; // 保持宽高1:1
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.album-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.album-title {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 8px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 0, 0, 0) 0%,
|
||||
rgba(0, 0, 0, 0.6) 100%
|
||||
);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
border-radius: 0 0 8px 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -540,7 +540,7 @@ const initTypewriterManager = () => {
|
||||
}
|
||||
|
||||
typewriterManager = new TypewriterManager({
|
||||
typingSpeed: 30,
|
||||
typingSpeed: 10,
|
||||
cursorText: "",
|
||||
});
|
||||
|
||||
|
||||
@@ -16,6 +16,6 @@
|
||||
}
|
||||
|
||||
.tag-text {
|
||||
color: #00a6ff; /* 蓝色文字,可根据设计调整 */
|
||||
color: #2d91ff; /* 蓝色文字,可根据设计调整 */
|
||||
font-size: $uni-font-size-base;
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<view class="w-full">
|
||||
<template v-if="toolCall.picture && toolCall.picture.length > 0">
|
||||
<ModuleTitle :title="图片详情" />
|
||||
<ImageSwiper :images="toolCall.picture" />
|
||||
<ImageSwiper :images="toolCall.picture" thumbnailBottom="12px" />
|
||||
</template>
|
||||
|
||||
<template v-if="toolCall.commodityList">
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
</view>
|
||||
|
||||
<view class="card-text border-box">
|
||||
<view class="color-171717 font-size-14 line-height-20">
|
||||
<view class="color-171717 font-size-14 line-height-20 ellipsis-1">
|
||||
{{ item.topic }}
|
||||
</view>
|
||||
<view class="font-size-11 color-99A0AE">
|
||||
|
||||
Reference in New Issue
Block a user