文件传输助手

pages/chat/chat.vue

@@ -35,7 +35,8 @@
         >
           <view v-if="selecting" class="ck" :class="{ on: isPicked(m) }" />
           <view v-if="!m.mine" class="av" @click.stop="openSender(m)">
-            <image v-if="avatarOf(m)" :src="avatarOf(m)" mode="aspectFill" />
+            <fy-file-mark v-if="isFiles" />
+            <image v-else-if="avatarOf(m)" :src="avatarOf(m)" mode="aspectFill" />
             <text v-else>{{ initialOf(m) }}</text>
           </view>
           <view class="col" :class="{ mine: m.mine }">
@@ -155,6 +156,7 @@
 
 <script>
 import FyHeader from '../../components/fy-header.vue'
+import FyFileMark from '../../components/fy-file-mark.vue'
 import { store, previewOf } from '../../utils/store.js'
 import { fmtTime, toast } from '../../utils/format.js'
 import { uploadLocal, fileTicket, openFile } from '../../utils/files.js'
@@ -163,7 +165,7 @@ import { mobileUrl } from '../../utils/nav.js'
 const EMOS = ['😀','😁','😂','😅','😊','😍','😘','😜','🤗','🤔','🙄','😴','😭','😡','👍','👎','👌','🙏','👏','💪','🔥','⭐','🎉','❤️','💕','✅','❌','💯','🤝','👀']
 
 export default {
-  components: { FyHeader },
+  components: { FyHeader, FyFileMark },
   data() {
     return {
       sid: '',
@@ -174,6 +176,7 @@ export default {
       title: '聊天',
       isGroup: false,
       isWork: false,
+      isFiles: false,
       peerId: '',
       myAvatar: '',
       myInitial: '我',
@@ -289,6 +292,7 @@ export default {
       this.title = (c && c.name) || '聊天'
       this.isGroup = !!(c && c.type === 'group')
       this.isWork = !!(c && c.type === 'work')
+      this.isFiles = !!(c && c.type === 'files')
       this.peerId = (c && c.peerId) || ''
       this.memberCount = c && c.memberIds ? c.memberIds.length : 0
       this.myAvatar = (store.me && store.me.avatar) || ''

pages/search/search.vue

@@ -17,7 +17,8 @@
       </view>
       <view v-if="convs.length" class="sec">会话</view>
       <view v-for="c in convs" :key="'c' + c.id" class="item" @click="openConv(c)">
-        <view class="av">{{ (c.name || '?').slice(0, 1) }}</view>
+        <view v-if="c.type === 'files'" class="av"><fy-file-mark /></view>
+        <view v-else class="av">{{ (c.name || '?').slice(0, 1) }}</view>
         <view class="meta">
           <text class="n">{{ c.name }}</text>
           <text class="s">{{ c.lastMessage }}</text>
@@ -25,7 +26,8 @@
       </view>
       <view v-if="hits.length" class="sec">聊天记录</view>
       <view v-for="h in hits" :key="h.id" class="item" @click="openConv(h.conv)">
-        <view class="av">{{ (h.conv.name || '?').slice(0, 1) }}</view>
+        <view v-if="h.conv.type === 'files'" class="av"><fy-file-mark /></view>
+        <view v-else class="av">{{ (h.conv.name || '?').slice(0, 1) }}</view>
         <view class="meta">
           <text class="n">{{ h.conv.name }}</text>
           <text class="s">{{ h.text }}</text>
@@ -45,10 +47,11 @@
 
 <script>
 import FyHeader from '../../components/fy-header.vue'
+import FyFileMark from '../../components/fy-file-mark.vue'
 import { store, previewOf } from '../../utils/store.js'
 
 export default {
-  components: { FyHeader },
+  components: { FyHeader, FyFileMark },
   data() { return { q: '' } },
   computed: {
     people() {

pages/tabs/messages.vue

@@ -17,7 +17,8 @@
         @longpress="act(c)"
       >
         <view class="av-wrap">
-          <image v-if="c.avatar" class="av" :src="c.avatar" mode="aspectFill" />
+          <image v-if="c.avatar && c.type !== 'files'" class="av" :src="c.avatar" mode="aspectFill" />
+          <view v-else-if="c.type === 'files'" class="av"><fy-file-mark /></view>
           <view v-else class="av txt" :class="avClass(c)">{{ avText(c) }}</view>
           <text v-if="c.unread && !c.muted" class="badge abs">{{ c.unread > 99 ? '99+' : c.unread }}</text>
           <text v-else-if="c.unread && c.muted" class="dotu" />
@@ -39,10 +40,11 @@
 
 <script>
 import FyHeader from '../../components/fy-header.vue'
+import FyFileMark from '../../components/fy-file-mark.vue'
 import { store } from '../../utils/store.js'
 
 export default {
-  components: { FyHeader },
+  components: { FyHeader, FyFileMark },
   data() {
     return { rows: [], unread: 0, off: null }
   },
@@ -68,13 +70,11 @@ export default {
     },
     avText(c) {
       if (c.type === 'work') return '工'
-      if (c.type === 'files') return '文'
       if (c.type === 'group') return '群'
       return (c.name || '?').slice(0, 1)
     },
     avClass(c) {
       if (c.type === 'work') return 'work'
-      if (c.type === 'files') return 'file'
       return 'plain'
     },
     open(c) {
@@ -132,7 +132,7 @@ export default {
 .item { display: flex; align-items: center; padding: 22rpx 28rpx; background: #fff; }
 .item.pin { background: #F7F8FA; }
 .av-wrap { position: relative; width: 92rpx; height: 92rpx; flex-shrink: 0; }
-.av { width: 92rpx; height: 92rpx; border-radius: 20rpx; }
+.av { width: 92rpx; height: 92rpx; border-radius: 20rpx; overflow: hidden; }
 .av.txt { display: flex; align-items: center; justify-content: center; font-size: 32rpx; font-weight: 600; }
 .av.work { background: #1677FF; color: #fff; }
 .av.file { background: #F3F6FB; color: #4B5563; }