UI优化，红包领取后缺少头像，名称字段

TUIKit/components/common/Transfer/index.vue

@@ -1,16 +1,16 @@
 <template>
   <div
     class="transfer"
-    :class="[!isPC ? 'transfer-h5' : '', isWeChat ? 'transfer-h5-wechat' : '']"
+    :class="[
+      !isPC ? 'transfer-h5' : '',
+      isWeChat ? 'transfer-h5-wechat' : ''
+    ]"
   >
     <header
       v-if="!isPC && transferTitle"
       class="transfer-header transfer-h5-header"
     >
-      <div
-        v-if="!props.isHiddenBackIcon"
-        @click="cancel"
-      >
+      <div v-if="!props.isHiddenBackIcon" @click="cancel">
         <Icon
           class="icon"
           :file="backIcon"
@@ -29,22 +29,22 @@
             v-if="isPC && isTransferSearch"
             type="text"
             :value="searchValue"
-            :placeholder="TUITranslateService.t('component.请输入userID')"
+            placeholder="搜素"
             enterkeyhint="search"
             :class="[isUniFrameWork ? 'left-uniapp-input' : '']"
             @keyup.enter="handleInput"
-          >
+          />
           <!-- not PC triggers blur -->
           <input
             v-if="!isPC && isTransferSearch"
             type="text"
-            :placeholder="TUITranslateService.t('component.请输入userID')"
+            placeholder="搜素"
             enterkeyhint="search"
             :value="searchValue"
             :class="[isUniFrameWork ? 'left-uniapp-input' : '']"
             @blur="handleInput"
             @confirm="handleInput"
-          >
+          />
         </header>
         <main class="transfer-left-main">
           <ul class="transfer-list">
@@ -59,13 +59,10 @@
                 :width="'18px'"
                 :height="'18px'"
               />
-              <i
-                v-else
-                class="icon-unselected"
-              />
-              <span class="select-all">{{
-                TUITranslateService.t("component.全选")
-              }}</span>
+              <i v-else class="icon-unselected" />
+              <span class="select-all">
+                {{ TUITranslateService.t('component.全选') }}
+              </span>
             </li>
             <li
               v-for="item in transferList"
@@ -82,25 +79,27 @@
               />
               <i
                 v-else
-                :class="[item.isDisabled && 'disabled', 'icon-unselected']"
+                :class="[
+                  item.isDisabled && 'disabled',
+                  'icon-unselected'
+                ]"
               />
               <template v-if="!isTransferCustomItem">
                 <img
                   class="avatar"
                   :src="
                     item.avatar ||
-                      'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
+                    'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
                   "
                   onerror="this.onerror=null;this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
-                >
+                />
                 <span class="name">{{ item.nick || item.userID }}</span>
-                <span v-if="item.isDisabled">（{{ TUITranslateService.t("component.已在群中") }}）</span>
+                <span v-if="item.isDisabled">
+                  （{{ TUITranslateService.t('component.已在群中') }}）
+                </span>
               </template>
               <template v-else>
-                <slot
-                  name="left"
-                  :data="item"
-                />
+                <slot name="left" :data="item" />
               </template>
             </li>
             <li
@@ -108,29 +107,23 @@
               class="transfer-list-item more"
               @click="getMore"
             >
-              {{ TUITranslateService.t("component.查看更多") }}
+              {{ TUITranslateService.t('component.查看更多') }}
             </li>
           </ul>
         </main>
       </div>
       <div class="right">
-        <header
-          v-if="isPC"
-          class="transfer-header"
-        >
+        <header v-if="isPC" class="transfer-header">
           {{ transferTitle }}
         </header>
-        <ul
-          v-if="resultShow"
-          class="transfer-list"
-        >
+        <ul v-if="resultShow" class="transfer-list">
           <p
             v-if="transferSelectedList.length > 0 && isPC"
             class="transfer-text"
           >
-            {{ TUITranslateService.t("component.已选中")
+            {{ TUITranslateService.t('component.已选中')
             }}{{ transferSelectedList.length
-            }}{{ TUITranslateService.t("component.人") }}
+            }}{{ TUITranslateService.t('component.人') }}
           </p>
           <li
             v-for="(item, index) in transferSelectedList"
@@ -143,54 +136,36 @@
                   class="avatar"
                   :src="
                     item.avatar ||
-                      'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
+                    'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
                   "
                   onerror="this.onerror=null;this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
-                >
-                <span
-                  v-if="isPC"
-                  class="name"
-                >{{ item.nick || item.userID }}</span>
+                />
+                <span v-if="isPC" class="name">
+                  {{ item.nick || item.userID }}
+                </span>
               </template>
               <template v-else>
-                <slot
-                  name="right"
-                  :data="item"
-                />
+                <slot name="right" :data="item" />
               </template>
             </aside>
-            <span
-              v-if="isPC"
-              @click="selected(item)"
-            >
-              <Icon
-                :file="cancelIcon"
-                :width="'18px'"
-                :height="'18px'"
-              />
+            <span v-if="isPC" @click="selected(item)">
+              <Icon :file="cancelIcon" :width="'18px'" :height="'18px'" />
             </span>
           </li>
         </ul>
         <footer class="transfer-right-footer">
-          <button
-            class="btn btn-cancel"
-            @click="cancel"
-          >
-            {{ TUITranslateService.t("component.取消") }}
+          <button class="btn btn-cancel" @click="cancel">
+            {{ TUITranslateService.t('component.取消') }}
           </button>
           <button
             v-if="transferSelectedList.length > 0"
-            class="btn"
+            class="btn btn-confirm"
             @click="submit"
           >
-            {{ TUITranslateService.t("component.完成") }}
+            {{ TUITranslateService.t('component.完成') }}
           </button>
-          <button
-            v-else
-            class="btn btn-no"
-            @click="submit"
-          >
-            {{ TUITranslateService.t("component.完成") }}
+          <button v-else class="btn btn-no" @click="submit">
+            {{ TUITranslateService.t('component.完成') }}
           </button>
         </footer>
       </div>
@@ -199,134 +174,175 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watchEffect, computed } from '../../../adapter-vue';
-import { TUITranslateService } from '@tencentcloud/chat-uikit-engine-lite';
-import { ITransferListItem } from '../../../interface';
-import Icon from '../Icon.vue';
-import selectedIcon from '../../../assets/icon/selected.svg';
-import backIcon from '../../../assets/icon/back.svg';
-import cancelIcon from '../../../assets/icon/cancel.svg';
-import { isPC, isUniFrameWork, isWeChat } from '../../../utils/env';
+  import { ref, watchEffect, computed } from '../../../adapter-vue'
+  import { TUITranslateService } from '@tencentcloud/chat-uikit-engine-lite'
+  import { ITransferListItem } from '../../../interface'
+  import Icon from '../Icon.vue'
+  import selectedIcon from '../../../assets/icon/selected.svg'
+  import backIcon from '../../../assets/icon/back.svg'
+  import cancelIcon from '../../../assets/icon/cancel.svg'
+  import searchIcon from '../../../assets/icon/search.svg'
+  import { isPC, isUniFrameWork, isWeChat } from '../../../utils/env'
 
-const props = defineProps({
-  list: {
-    type: Array,
-    default: () => [],
-  },
-  selectedList: {
-    type: Array,
-    default: () => [],
-  },
-  isSearch: {
-    type: Boolean,
-    default: true,
-  },
-  isRadio: {
-    type: Boolean,
-    default: false,
-  },
-  isCustomItem: {
-    type: Boolean,
-    default: false,
-  },
-  title: {
-    type: String,
-    default: '',
-  },
-  type: {
-    type: String,
-    default: '',
-  },
-  resultShow: {
-    type: Boolean,
-    default: true,
-  },
-  total: {
-    type: Number,
-    default: 0,
-  },
-  isHiddenBackIcon: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const transferList = ref<ITransferListItem[]>([]);
-const transferTotal = ref<number>(0);
-const transferSelectedList = ref<ITransferListItem[]>([]);
-const isTransferSearch = ref(true);
-const isTransferCustomItem = ref(false);
-const transferTitle = ref('');
-const searchValue = ref('');
-
-watchEffect(() => {
-  if (props.isCustomItem) {
-    for (let index = 0; index < props.list.length; index++) {
-      if (
-        (props.list[index] as any).conversationID.indexOf('@TIM#SYSTEM') > -1
-      ) {
-        // eslint-disable-next-line vue/no-mutating-props
-        props.list.splice(index, 1);
-      }
-      transferList.value = props.list as ITransferListItem[];
+  const props = defineProps({
+    list: {
+      type: Array,
+      default: () => []
+    },
+    selectedList: {
+      type: Array,
+      default: () => []
+    },
+    isSearch: {
+      type: Boolean,
+      default: true
+    },
+    isRadio: {
+      type: Boolean,
+      default: false
+    },
+    isCustomItem: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    type: {
+      type: String,
+      default: ''
+    },
+    resultShow: {
+      type: Boolean,
+      default: true
+    },
+    total: {
+      type: Number,
+      default: 0
+    },
+    isHiddenBackIcon: {
+      type: Boolean,
+      default: false
     }
-  } else {
-    transferList.value = props.list as ITransferListItem[];
+  })
+
+  const transferList = ref<ITransferListItem[]>([])
+  const transferTotal = ref<number>(0)
+  const transferSelectedList = ref<ITransferListItem[]>([])
+  const isTransferSearch = ref(true)
+  const isTransferCustomItem = ref(false)
+  const transferTitle = ref('')
+  const searchValue = ref('')
+
+  watchEffect(() => {
+    if (props.isCustomItem) {
+      for (let index = 0; index < props.list.length; index++) {
+        if (
+          (props.list[index] as any).conversationID.indexOf(
+            '@TIM#SYSTEM'
+          ) > -1
+        ) {
+          // eslint-disable-next-line vue/no-mutating-props
+          props.list.splice(index, 1)
+        }
+        transferList.value = props.list as ITransferListItem[]
+      }
+    } else {
+      transferList.value = props.list as ITransferListItem[]
+    }
+    transferTotal.value = props.total ? props.total : props.list.length
+    transferSelectedList.value = (
+      props.selectedList && props.selectedList.length > 0
+        ? props.selectedList
+        : transferSelectedList.value
+    ) as any
+    isTransferSearch.value = props.isSearch
+    isTransferCustomItem.value = props.isCustomItem
+    transferTitle.value = props.title
+  })
+
+  const emit = defineEmits(['search', 'submit', 'cancel', 'getMore'])
+
+  const optional = computed(() =>
+    transferList.value.filter((item: any) => !item.isDisabled)
+  )
+
+  const handleInput = (e: any) => {
+    searchValue.value = e.target.value || e.detail.value
+    emit('search', searchValue.value)
   }
-  transferTotal.value = props.total ? props.total : props.list.length;
-  transferSelectedList.value = (props.selectedList && props.selectedList.length > 0 ? props.selectedList : transferSelectedList.value) as any;
-  isTransferSearch.value = props.isSearch;
-  isTransferCustomItem.value = props.isCustomItem;
-  transferTitle.value = props.title;
-});
-
-const emit = defineEmits(['search', 'submit', 'cancel', 'getMore']);
-
-const optional = computed(() =>
-  transferList.value.filter((item: any) => !item.isDisabled),
-);
-
-const handleInput = (e: any) => {
-  searchValue.value = e.target.value || e.detail.value;
-  emit('search', searchValue.value);
-};
-const selected = (item: any) => {
-  if (item.isDisabled) {
-    return;
+  const selected = (item: any) => {
+    if (item.isDisabled) {
+      return
+    }
+    let list: ITransferListItem[] = transferSelectedList.value
+    const index: number = list.indexOf(item)
+    if (index > -1) {
+      return transferSelectedList.value.splice(index, 1)
+    }
+    if (props.isRadio) {
+      list = []
+    }
+    list.push(item)
+    transferSelectedList.value = list
   }
-  let list: ITransferListItem[] = transferSelectedList.value;
-  const index: number = list.indexOf(item);
-  if (index > -1) {
-    return transferSelectedList.value.splice(index, 1);
+
+  const selectedAll = () => {
+    if (transferSelectedList.value.length === optional.value.length) {
+      transferSelectedList.value = []
+    } else {
+      transferSelectedList.value = [...optional.value]
+    }
   }
-  if (props.isRadio) {
-    list = [];
+
+  const submit = () => {
+    emit('submit', transferSelectedList.value)
+    searchValue.value = ''
   }
-  list.push(item);
-  transferSelectedList.value = list;
-};
 
-const selectedAll = () => {
-  if (transferSelectedList.value.length === optional.value.length) {
-    transferSelectedList.value = [];
-  } else {
-    transferSelectedList.value = [...optional.value];
+  const cancel = () => {
+    emit('cancel')
+    searchValue.value = ''
   }
-};
 
-const submit = () => {
-  emit('submit', transferSelectedList.value);
-  searchValue.value = '';
-};
-
-const cancel = () => {
-  emit('cancel');
-  searchValue.value = '';
-};
-
-const getMore = () => {
-  emit('getMore');
-};
+  const getMore = () => {
+    emit('getMore')
+  }
 </script>
 
 <style lang="scss" scoped src="./style/transfer.scss"></style>
+<style lang="scss" scoped>
+  .transfer-left-main {
+    // background: #f4f4f4;
+  }
+  .transfer-header {
+    padding: 26rpx 32rpx !important;
+    box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0, 0, 0, 0.04) !important;
+    margin-bottom: 12rpx !important;
+  }
+  .left-uniapp-input {
+    border-radius: 80rpx !important;
+  }
+
+  .avatar {
+    width: 80rpx !important;
+    height: 80rpx !important;
+    border-radius: 80rpx !important;
+  }
+
+  .transfer-right-footer {
+    button {
+      height: 64rpx;
+      padding: 0 36rpx;
+      line-height: 64rpx;
+      border-radius: 64rpx;
+      &::after {
+        display: none !important;
+      }
+    }
+    .btn-confirm {
+      background: #00D993;
+    }
+  }
+</style>