im-ui-mobile 0.0.19 → 0.0.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -21,75 +21,69 @@
|
|
|
21
21
|
</view>
|
|
22
22
|
</template>
|
|
23
23
|
|
|
24
|
-
<script>
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
required: true
|
|
42
|
-
},
|
|
43
|
-
time: {
|
|
44
|
-
type: String,
|
|
45
|
-
required: true
|
|
46
|
-
},
|
|
47
|
-
lastMessage: {
|
|
48
|
-
type: String,
|
|
49
|
-
required: true
|
|
50
|
-
},
|
|
51
|
-
unreadCount: {
|
|
52
|
-
type: Number,
|
|
53
|
-
default: 0
|
|
54
|
-
}
|
|
55
|
-
},
|
|
56
|
-
computed: {
|
|
57
|
-
displayName() {
|
|
58
|
-
return this.name ? this.name.charAt(0) : ''
|
|
59
|
-
},
|
|
60
|
-
displayUnreadCount() {
|
|
61
|
-
return this.unreadCount > 99 ? '99+' : this.unreadCount
|
|
62
|
-
}
|
|
63
|
-
},
|
|
64
|
-
methods: {
|
|
65
|
-
handleClick(event) {
|
|
66
|
-
console.log('🔍 uni 对象检查:', {
|
|
67
|
-
hasUni: typeof uni !== 'undefined',
|
|
68
|
-
hasShowToast: typeof uni?.showToast === 'function',
|
|
69
|
-
hasShowModal: typeof uni?.showModal === 'function'
|
|
70
|
-
})
|
|
71
|
-
|
|
72
|
-
try {
|
|
73
|
-
// 使用 showModal 替代 showToast 进行测试
|
|
74
|
-
uni.showModal({
|
|
75
|
-
title: '提示',
|
|
76
|
-
content: `点击了 ${this.name}`,
|
|
77
|
-
showCancel: false,
|
|
78
|
-
confirmText: '知道了'
|
|
79
|
-
})
|
|
80
|
-
console.log('✅ uni.showModal 调用成功')
|
|
81
|
-
} catch (error) {
|
|
82
|
-
console.error('❌ uni API 调用失败:', error)
|
|
83
|
-
|
|
84
|
-
// 备用方案：在开发环境显示提示
|
|
85
|
-
if (typeof document !== 'undefined') {
|
|
86
|
-
alert(`点击了 ${this.name}`)
|
|
87
|
-
}
|
|
88
|
-
}
|
|
24
|
+
<script setup lang="ts">
|
|
25
|
+
import { computed, withDefaults } from 'vue'
|
|
26
|
+
|
|
27
|
+
// 定义 Props 接口
|
|
28
|
+
interface Props {
|
|
29
|
+
type?: 'default' | 'group'
|
|
30
|
+
avatar?: string
|
|
31
|
+
name: string
|
|
32
|
+
time: string
|
|
33
|
+
lastMessage: string
|
|
34
|
+
unreadCount?: number
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// 定义 Emits 接口
|
|
38
|
+
interface Emits {
|
|
39
|
+
(e: 'click', event: Event): void
|
|
40
|
+
}
|
|
89
41
|
|
|
90
|
-
|
|
42
|
+
// Props 和 Emits
|
|
43
|
+
const props = withDefaults(defineProps<Props>(), {
|
|
44
|
+
type: 'default',
|
|
45
|
+
avatar: '',
|
|
46
|
+
unreadCount: 0
|
|
47
|
+
})
|
|
48
|
+
|
|
49
|
+
const emit = defineEmits<Emits>()
|
|
50
|
+
|
|
51
|
+
// 计算属性
|
|
52
|
+
const displayName = computed(() => {
|
|
53
|
+
return props.name ? props.name.charAt(0) : ''
|
|
54
|
+
})
|
|
55
|
+
|
|
56
|
+
const displayUnreadCount = computed(() => {
|
|
57
|
+
return props.unreadCount > 99 ? '99+' : props.unreadCount.toString()
|
|
58
|
+
})
|
|
59
|
+
|
|
60
|
+
// 点击事件处理
|
|
61
|
+
const handleClick = (event: Event) => {
|
|
62
|
+
console.log('🔍 uni 对象检查:', {
|
|
63
|
+
hasUni: typeof uni !== 'undefined',
|
|
64
|
+
hasShowToast: typeof uni?.showToast === 'function',
|
|
65
|
+
hasShowModal: typeof uni?.showModal === 'function'
|
|
66
|
+
})
|
|
67
|
+
|
|
68
|
+
try {
|
|
69
|
+
// 使用 showModal 替代 showToast 进行测试
|
|
70
|
+
uni.showModal({
|
|
71
|
+
title: '提示',
|
|
72
|
+
content: `点击了 ${props.name}`,
|
|
73
|
+
showCancel: false,
|
|
74
|
+
confirmText: '知道了'
|
|
75
|
+
})
|
|
76
|
+
console.log('✅ uni.showModal 调用成功')
|
|
77
|
+
} catch (error) {
|
|
78
|
+
console.error('❌ uni API 调用失败:', error)
|
|
79
|
+
|
|
80
|
+
// 备用方案：在开发环境显示提示
|
|
81
|
+
if (typeof document !== 'undefined') {
|
|
82
|
+
alert(`点击了 ${props.name}`)
|
|
91
83
|
}
|
|
92
84
|
}
|
|
85
|
+
|
|
86
|
+
emit('click', event)
|
|
93
87
|
}
|
|
94
88
|
</script>
|
|
95
89
|
|
|
@@ -150,6 +144,11 @@ export default {
|
|
|
150
144
|
text-overflow: ellipsis;
|
|
151
145
|
white-space: nowrap;
|
|
152
146
|
flex: 1;
|
|
147
|
+
|
|
148
|
+
/* 群聊样式 */
|
|
149
|
+
.im-chat--group &::before {
|
|
150
|
+
content: "👥 ";
|
|
151
|
+
}
|
|
153
152
|
}
|
|
154
153
|
|
|
155
154
|
&__time {
|
|
@@ -191,10 +190,5 @@ export default {
|
|
|
191
190
|
padding: 0 8rpx;
|
|
192
191
|
}
|
|
193
192
|
}
|
|
194
|
-
|
|
195
|
-
/* 群聊样式 */
|
|
196
|
-
&--group &__name::before {
|
|
197
|
-
content: "👥 ";
|
|
198
|
-
}
|
|
199
193
|
}
|
|
200
194
|
</style>
|
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<view class="im-chat" :class="[`im-chat--${type}`]" @click="handleClick">
|
|
3
|
+
<view class="im-chat__avatar">
|
|
4
|
+
<view class="avatar-fallback">
|
|
5
|
+
<image v-if="avatar" :src="avatar" class="avatar-image" mode="aspectFill" />
|
|
6
|
+
<text v-else class="avatar-text">{{ displayName }}</text>
|
|
7
|
+
</view>
|
|
8
|
+
</view>
|
|
9
|
+
<view class="im-chat__content">
|
|
10
|
+
<view class="im-chat__header">
|
|
11
|
+
<text class="im-chat__name">{{ name }}</text>
|
|
12
|
+
<text class="im-chat__time">{{ time }}</text>
|
|
13
|
+
</view>
|
|
14
|
+
<view class="im-chat__message">
|
|
15
|
+
<text class="im-chat__text">{{ lastMessage }}</text>
|
|
16
|
+
<view v-if="unreadCount > 0" class="badge-fallback">
|
|
17
|
+
<text class="badge-text">{{ displayUnreadCount }}</text>
|
|
18
|
+
</view>
|
|
19
|
+
</view>
|
|
20
|
+
</view>
|
|
21
|
+
</view>
|
|
22
|
+
</template>
|
|
23
|
+
|
|
24
|
+
<script>
|
|
25
|
+
export default {
|
|
26
|
+
name: 'ImChat',
|
|
27
|
+
props: {
|
|
28
|
+
type: {
|
|
29
|
+
type: String,
|
|
30
|
+
default: 'default',
|
|
31
|
+
validator: function (value) {
|
|
32
|
+
return ['default', 'group'].includes(value)
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
avatar: {
|
|
36
|
+
type: String,
|
|
37
|
+
default: ''
|
|
38
|
+
},
|
|
39
|
+
name: {
|
|
40
|
+
type: String,
|
|
41
|
+
required: true
|
|
42
|
+
},
|
|
43
|
+
time: {
|
|
44
|
+
type: String,
|
|
45
|
+
required: true
|
|
46
|
+
},
|
|
47
|
+
lastMessage: {
|
|
48
|
+
type: String,
|
|
49
|
+
required: true
|
|
50
|
+
},
|
|
51
|
+
unreadCount: {
|
|
52
|
+
type: Number,
|
|
53
|
+
default: 0
|
|
54
|
+
}
|
|
55
|
+
},
|
|
56
|
+
computed: {
|
|
57
|
+
displayName() {
|
|
58
|
+
return this.name ? this.name.charAt(0) : ''
|
|
59
|
+
},
|
|
60
|
+
displayUnreadCount() {
|
|
61
|
+
return this.unreadCount > 99 ? '99+' : this.unreadCount
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
methods: {
|
|
65
|
+
handleClick(event) {
|
|
66
|
+
console.log('🔍 uni 对象检查:', {
|
|
67
|
+
hasUni: typeof uni !== 'undefined',
|
|
68
|
+
hasShowToast: typeof uni?.showToast === 'function',
|
|
69
|
+
hasShowModal: typeof uni?.showModal === 'function'
|
|
70
|
+
})
|
|
71
|
+
|
|
72
|
+
try {
|
|
73
|
+
// 使用 showModal 替代 showToast 进行测试
|
|
74
|
+
uni.showModal({
|
|
75
|
+
title: '提示',
|
|
76
|
+
content: `点击了 ${this.name}`,
|
|
77
|
+
showCancel: false,
|
|
78
|
+
confirmText: '知道了'
|
|
79
|
+
})
|
|
80
|
+
console.log('✅ uni.showModal 调用成功')
|
|
81
|
+
} catch (error) {
|
|
82
|
+
console.error('❌ uni API 调用失败:', error)
|
|
83
|
+
|
|
84
|
+
// 备用方案：在开发环境显示提示
|
|
85
|
+
if (typeof document !== 'undefined') {
|
|
86
|
+
alert(`点击了 ${this.name}`)
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
this.$emit('click', event)
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
</script>
|
|
95
|
+
|
|
96
|
+
<style lang="scss" scoped>
|
|
97
|
+
.im-chat {
|
|
98
|
+
display: flex;
|
|
99
|
+
padding: 24rpx 32rpx;
|
|
100
|
+
transition: background-color 0.3s;
|
|
101
|
+
border-bottom: 2rpx solid #f5f7fa;
|
|
102
|
+
|
|
103
|
+
&:active {
|
|
104
|
+
background-color: #f5f7fa;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
&__avatar {
|
|
108
|
+
margin-right: 24rpx;
|
|
109
|
+
|
|
110
|
+
.avatar-fallback {
|
|
111
|
+
width: 80rpx;
|
|
112
|
+
height: 80rpx;
|
|
113
|
+
border-radius: 50%;
|
|
114
|
+
background: linear-gradient(135deg, #409EFF, #67C23A);
|
|
115
|
+
display: flex;
|
|
116
|
+
align-items: center;
|
|
117
|
+
justify-content: center;
|
|
118
|
+
overflow: hidden;
|
|
119
|
+
|
|
120
|
+
.avatar-image {
|
|
121
|
+
width: 100%;
|
|
122
|
+
height: 100%;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.avatar-text {
|
|
126
|
+
color: white;
|
|
127
|
+
font-size: 32rpx;
|
|
128
|
+
font-weight: bold;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
&__content {
|
|
134
|
+
flex: 1;
|
|
135
|
+
min-width: 0;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
&__header {
|
|
139
|
+
display: flex;
|
|
140
|
+
justify-content: space-between;
|
|
141
|
+
align-items: center;
|
|
142
|
+
margin-bottom: 8rpx;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
&__name {
|
|
146
|
+
font-size: 32rpx;
|
|
147
|
+
font-weight: 500;
|
|
148
|
+
color: #303133;
|
|
149
|
+
overflow: hidden;
|
|
150
|
+
text-overflow: ellipsis;
|
|
151
|
+
white-space: nowrap;
|
|
152
|
+
flex: 1;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
&__time {
|
|
156
|
+
font-size: 24rpx;
|
|
157
|
+
color: #909399;
|
|
158
|
+
flex-shrink: 0;
|
|
159
|
+
margin-left: 16rpx;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
&__message {
|
|
163
|
+
display: flex;
|
|
164
|
+
justify-content: space-between;
|
|
165
|
+
align-items: center;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
&__text {
|
|
169
|
+
font-size: 28rpx;
|
|
170
|
+
color: #606266;
|
|
171
|
+
overflow: hidden;
|
|
172
|
+
text-overflow: ellipsis;
|
|
173
|
+
white-space: nowrap;
|
|
174
|
+
flex: 1;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.badge-fallback {
|
|
178
|
+
background-color: #FA3534;
|
|
179
|
+
border-radius: 40rpx;
|
|
180
|
+
min-width: 36rpx;
|
|
181
|
+
height: 36rpx;
|
|
182
|
+
display: flex;
|
|
183
|
+
align-items: center;
|
|
184
|
+
justify-content: center;
|
|
185
|
+
margin-left: 16rpx;
|
|
186
|
+
|
|
187
|
+
.badge-text {
|
|
188
|
+
color: white;
|
|
189
|
+
font-size: 20rpx;
|
|
190
|
+
font-weight: bold;
|
|
191
|
+
padding: 0 8rpx;
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
/* 群聊样式 */
|
|
196
|
+
&--group &__name::before {
|
|
197
|
+
content: "👥 ";
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
</style>
|
package/package.json
CHANGED
|
@@ -1,31 +1,12 @@
|
|
|
1
1
|
import { AllowedComponentProps, VNodeProps } from './_common'
|
|
2
2
|
|
|
3
3
|
declare interface ChatProps {
|
|
4
|
-
type:
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
type: StringConstructor;
|
|
11
|
-
default: string;
|
|
12
|
-
};
|
|
13
|
-
name: {
|
|
14
|
-
type: StringConstructor;
|
|
15
|
-
required: true;
|
|
16
|
-
};
|
|
17
|
-
time: {
|
|
18
|
-
type: StringConstructor;
|
|
19
|
-
required: true;
|
|
20
|
-
};
|
|
21
|
-
lastMessage: {
|
|
22
|
-
type: StringConstructor;
|
|
23
|
-
required: true;
|
|
24
|
-
};
|
|
25
|
-
unreadCount: {
|
|
26
|
-
type: NumberConstructor;
|
|
27
|
-
default: number;
|
|
28
|
-
};
|
|
4
|
+
type: string
|
|
5
|
+
avatar: string
|
|
6
|
+
name: string
|
|
7
|
+
time: string
|
|
8
|
+
lastMessage: string
|
|
9
|
+
unreadCount: number
|
|
29
10
|
}
|
|
30
11
|
|
|
31
12
|
declare interface _Chat {
|