Skip to content

Commit 29a5844

Browse files
zydemailzydemail
committed
fix: 对话里的图片是横向，附件是纵向
1 parent 8c2e411 commit 29a5844

2 files changed

Lines changed: 109 additions & 66 deletions

File tree

‎packages/pro-components/chat/attachments/attachments.wxml‎

Lines changed: 92 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,102 @@
11
<wxs src="./attachments.wxs" module="_this" />
22
<wxs src="../../../components/common/utils.wxs" module="_" />
33

4+
<!-- 图片文件模板 -->
5+
<template name="image-item">
6+
<view class="file-image {{classPrefix}}__file {{removable ? classPrefix + '__file--removable' : ''}}">
7+
<block wx:if="{{item.status==='pending' || item.status==='fail' || item.status==='error'}}">
8+
<view class="{{item.status}} {{classPrefix}}__file--{{item.status}}">
9+
<t-loading theme="circular" size="48rpx" />
10+
</view>
11+
</block>
12+
<block wx:else>
13+
<image
14+
class="image"
15+
src="{{item.url}}"
16+
mode="{{_this.getImageMode(item)}}"
17+
lazy-load="false"
18+
style="{{inChat ? _this.imageStyle(item) : ''}}"
19+
bindload="onImageLoad"
20+
></image>
21+
</block>
22+
<view wx:if="{{removable}}" class="{{classPrefix}}__remove">
23+
<t-icon data-index="{{index}}" name="multiply" size="16px" catchtap="onRemoveTap" />
24+
</view>
25+
</view>
26+
</template>
27+
28+
<!-- 普通文件模板 -->
29+
<template name="file-item">
30+
<view class="file {{classPrefix}}__file {{removable ? classPrefix + '__file--removable' : ''}}">
31+
<view class="image">
32+
<block wx:if="{{item.status==='pending'}}">
33+
<view class="loading {{classPrefix}}__file--pending">
34+
<t-loading theme="circular" size="48rpx" />
35+
</view>
36+
</block>
37+
<block wx:elif="{{item.status==='fail'}}">
38+
<view class="fail {{classPrefix}}__file--fail">
39+
<t-loading theme="circular" size="48rpx" />
40+
</view>
41+
</block>
42+
<block wx:elif="{{item.status==='error'}}">
43+
<view class="error {{classPrefix}}__file--error">
44+
<t-loading theme="circular" size="48rpx" />
45+
</view>
46+
</block>
47+
<block wx:else>
48+
<t-icon name="{{item.fileIcon.name}}" color="{{item.fileIcon.color}}" size="48rpx"></t-icon>
49+
</block>
50+
</view>
51+
<view class="{{classPrefix}}__content">
52+
<view class="{{classPrefix}}__title">{{item.name}}</view>
53+
<view wx:if="{{item.status==='pending'}}" class="{{classPrefix}}__desc">上传中...{{item.progress || 0+"%"}}</view>
54+
<view wx:elif="{{item.status==='fail'}}" class="{{classPrefix}}__desc">上传失败</view>
55+
<view wx:elif="{{item.status==='error'}}" class="{{classPrefix}}__desc">{{item.errorMessage}}</view>
56+
<view wx:else class="{{classPrefix}}__desc">{{item.desc}}</view>
57+
</view>
58+
<view wx:if="{{removable}}" class="{{classPrefix}}__remove">
59+
<t-icon data-index="{{index}}" name="multiply" size="16px" catchtap="onRemoveTap" />
60+
</view>
61+
</view>
62+
</template>
63+
464
<view
565
class="{{classPrefix}} {{[inChat ? classPrefix + '--chatting' : '', _this.getFileTypeClass(inChat, files)]}}"
666
style="{{_._style([style, customStyle])}}"
767
>
868
<view class="{{classPrefix}}__left">
9-
<scroll-view class="{{classPrefix}}__scrollable scroll-x" scroll-x style="height: {{scrollViewHeight}}px">
10-
<block wx:for="{{files}}" wx:for-item="item" wx:for-index="index" wx:key="index">
11-
<view class="{{classPrefix}}__files" bindtap="onFileWrapTap" data-index="{{index}}">
12-
<block wx:if="{{item.fileType==='image'}}">
13-
<view class="file-image {{classPrefix}}__file {{removable ? classPrefix + '__file--removable' : ''}}">
14-
<block wx:if="{{item.status==='pending' || item.status==='fail' || item.status==='error'}}">
15-
<view class="{{item.status}} {{classPrefix}}__file--{{item.status}}">
16-
<t-loading theme="{{isSkyline ? 'spinner' : 'circular'}}" size="48rpx" />
17-
</view>
18-
</block>
19-
<block wx:else>
20-
<image
21-
class="image"
22-
src="{{item.url}}"
23-
mode="{{_this.getImageMode(item)}}"
24-
lazy-load="false"
25-
style="{{inChat ? _this.imageStyle(item) : ''}}"
26-
bindload="onImageLoad"
27-
></image>
28-
</block>
29-
<view wx:if="{{removable}}" class="{{classPrefix}}__remove">
30-
<t-icon data-index="{{index}}" name="multiply" size="16px" catchtap="onRemoveTap" />
31-
</view>
32-
</view>
33-
</block>
34-
<block wx:else>
35-
<view class="file {{classPrefix}}__file {{removable ? classPrefix + '__file--removable' : ''}}">
36-
<view class="image">
37-
<block wx:if="{{item.status==='pending'}}">
38-
<view class="loading {{classPrefix}}__file--pending">
39-
<t-loading theme="{{isSkyline ? 'spinner' : 'circular'}}" size="48rpx" />
40-
</view>
41-
</block>
42-
<block wx:elif="{{item.status==='fail'}}">
43-
<view class="fail {{classPrefix}}__file--fail">
44-
<t-loading theme="{{isSkyline ? 'spinner' : 'circular'}}" size="48rpx" />
45-
</view>
46-
</block>
47-
<block wx:elif="{{item.status==='error'}}">
48-
<view class="error {{classPrefix}}__file--error">
49-
<t-loading theme="{{isSkyline ? 'spinner' : 'circular'}}" size="48rpx" />
50-
</view>
51-
</block>
52-
<block wx:else>
53-
<t-icon name="{{item.fileIcon.name}}" color="{{item.fileIcon.color}}" size="48rpx"></t-icon>
54-
</block>
55-
</view>
56-
<view class="{{classPrefix}}__content">
57-
<view class="{{classPrefix}}__title">{{item.name}}</view>
58-
<block>
59-
<view wx:if="{{item.status==='pending'}}" class="{{classPrefix}}__desc"
60-
>上传中...{{item.progress || 0+"%"}}</view
61-
>
62-
<view wx:elif="{{item.status==='fail'}}" class="{{classPrefix}}__desc">上传失败</view>
63-
<view wx:elif="{{item.status==='error'}}" class="{{classPrefix}}__desc">{{item.errorMessage}}</view>
64-
<view wx:else class="{{classPrefix}}__desc">{{item.desc}}</view>
65-
</block>
66-
</view>
67-
<view wx:if="{{removable}}" class="{{classPrefix}}__remove">
68-
<t-icon data-index="{{index}}" name="multiply" size="16px" catchtap="onRemoveTap" />
69-
</view>
70-
</view>
71-
</block>
72-
</view>
73-
</block>
74-
</scroll-view>
69+
<!-- 对话模式：图片横向滚动，文件纵向排列 -->
70+
<block wx:if="{{inChat}}">
71+
<!-- 图片横向滚动区域 -->
72+
<scroll-view wx:if="{{_this.hasImageFile(files)}}" class="{{classPrefix}}__scrollable scroll-x" scroll-x style="height: {{scrollViewHeight}}px">
73+
<block wx:for="{{files}}" wx:for-item="item" wx:for-index="index" wx:key="index">
74+
<view wx:if="{{item.fileType==='image'}}" class="{{classPrefix}}__files" bindtap="onFileWrapTap" data-index="{{index}}">
75+
<template is="image-item" data="{{item, index, classPrefix, removable, isSkyline, inChat}}" />
76+
</view>
77+
</block>
78+
</scroll-view>
79+
80+
<!-- 非图片文件纵向排列 -->
81+
<view class="{{classPrefix}}__files-container">
82+
<block wx:for="{{files}}" wx:for-item="item" wx:for-index="index" wx:key="index">
83+
<view wx:if="{{item.fileType!=='image'}}" class="{{classPrefix}}__files" bindtap="onFileWrapTap" data-index="{{index}}">
84+
<template is="file-item" data="{{item, index, classPrefix, removable, isSkyline}}" />
85+
</view>
86+
</block>
87+
</view>
88+
</block>
89+
90+
<!-- 非对话模式：所有文件横向滚动 -->
91+
<block wx:else>
92+
<scroll-view class="{{classPrefix}}__scrollable scroll-x" scroll-x style="height: {{scrollViewHeight}}px">
93+
<block wx:for="{{files}}" wx:for-item="item" wx:for-index="index" wx:key="index">
94+
<view class="{{classPrefix}}__files" bindtap="onFileWrapTap" data-index="{{index}}">
95+
<template wx:if="{{item.fileType==='image'}}" is="image-item" data="{{item, index, classPrefix, removable, isSkyline, inChat}}" />
96+
<template wx:else is="file-item" data="{{item, index, classPrefix, removable, isSkyline}}" />
97+
</view>
98+
</block>
99+
</scroll-view>
100+
</block>
75101
</view>
76102
</view>

‎packages/pro-components/chat/attachments/attachments.wxs‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,25 @@ function getFileTypeClass(inChat, files) {
4646
return allImages ? 'all_images' : 'all_files';
4747
}
4848

49+
function hasImageFile(files) {
50+
// 如果 files 为空或不存在，返回 false
51+
if (!files || files.length === 0) {
52+
return false;
53+
}
54+
55+
// 检查是否存在至少一个图片文件
56+
for (var i = 0; i < files.length; i++) {
57+
if (files[i].fileType === 'image') {
58+
return true;
59+
}
60+
}
61+
62+
return false;
63+
}
64+
4965
module.exports = {
5066
imageStyle: imageStyle,
5167
getImageMode: getImageMode,
5268
getFileTypeClass: getFileTypeClass,
69+
hasImageFile: hasImageFile,
5370
};

0 commit comments

Comments
 (0)