UI优化，红包领取后缺少头像，名称字段
This commit is contained in:
bobobobo
@@ -4,7 +4,7 @@
|
||||
:style="{
|
||||
width: avatarSize,
|
||||
height: avatarSize,
|
||||
borderRadius: avatarBorderRadius,
|
||||
borderRadius: '80rpx'
|
||||
}"
|
||||
>
|
||||
<template v-if="isUniFrameWork">
|
||||
@@ -29,7 +29,7 @@
|
||||
:src="avatarImageUrl || defaultAvatarUrl"
|
||||
@load="avatarLoadSuccess"
|
||||
@error="avatarLoadFailed"
|
||||
>
|
||||
/>
|
||||
<div
|
||||
v-if="useAvatarSkeletonAnimation && !isImgLoaded"
|
||||
:class="{
|
||||
@@ -42,106 +42,107 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, toRefs } from '../../../adapter-vue';
|
||||
import { isUniFrameWork } from '../../../utils/env';
|
||||
import { ref, toRefs } from '../../../adapter-vue'
|
||||
import { isUniFrameWork } from '../../../utils/env'
|
||||
|
||||
interface IProps {
|
||||
url: string;
|
||||
size?: string;
|
||||
borderRadius?: string;
|
||||
useSkeletonAnimation?: boolean;
|
||||
}
|
||||
|
||||
interface IEmits {
|
||||
(key: 'onLoad', e: Event): void;
|
||||
(key: 'onError', e: Event): void;
|
||||
}
|
||||
|
||||
const defaultAvatarUrl = ref('https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png');
|
||||
const emits = defineEmits<IEmits>();
|
||||
const props = withDefaults(defineProps<IProps>(), {
|
||||
// uniapp vue2 does not support constants in defineProps
|
||||
url: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png',
|
||||
size: '36px',
|
||||
borderRadius: '5px',
|
||||
useSkeletonAnimation: false,
|
||||
});
|
||||
|
||||
const {
|
||||
size: avatarSize,
|
||||
url: avatarImageUrl,
|
||||
borderRadius: avatarBorderRadius,
|
||||
useSkeletonAnimation: useAvatarSkeletonAnimation,
|
||||
} = toRefs(props);
|
||||
|
||||
let reloadAvatarTime = 0;
|
||||
const isImgLoaded = ref<boolean>(false);
|
||||
const loadErrorInUniapp = ref<boolean>(false);
|
||||
|
||||
function avatarLoadSuccess(e: Event) {
|
||||
isImgLoaded.value = true;
|
||||
emits('onLoad', e);
|
||||
}
|
||||
|
||||
function avatarLoadFailed(e: Event) {
|
||||
reloadAvatarTime += 1;
|
||||
if (reloadAvatarTime > 3) {
|
||||
return;
|
||||
interface IProps {
|
||||
url: string
|
||||
size?: string
|
||||
borderRadius?: string
|
||||
useSkeletonAnimation?: boolean
|
||||
}
|
||||
if (isUniFrameWork) {
|
||||
loadErrorInUniapp.value = true;
|
||||
} else {
|
||||
(e.currentTarget as HTMLImageElement).src = defaultAvatarUrl.value;
|
||||
|
||||
interface IEmits {
|
||||
(key: 'onLoad', e: Event): void
|
||||
(key: 'onError', e: Event): void
|
||||
}
|
||||
|
||||
const defaultAvatarUrl = ref(
|
||||
'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
|
||||
)
|
||||
const emits = defineEmits<IEmits>()
|
||||
const props = withDefaults(defineProps<IProps>(), {
|
||||
// uniapp vue2 does not support constants in defineProps
|
||||
url: 'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png',
|
||||
size: '36px',
|
||||
borderRadius: '5px',
|
||||
useSkeletonAnimation: false
|
||||
})
|
||||
|
||||
const {
|
||||
size: avatarSize,
|
||||
url: avatarImageUrl,
|
||||
borderRadius: avatarBorderRadius,
|
||||
useSkeletonAnimation: useAvatarSkeletonAnimation
|
||||
} = toRefs(props)
|
||||
|
||||
let reloadAvatarTime = 0
|
||||
const isImgLoaded = ref<boolean>(false)
|
||||
const loadErrorInUniapp = ref<boolean>(false)
|
||||
|
||||
function avatarLoadSuccess(e: Event) {
|
||||
isImgLoaded.value = true
|
||||
emits('onLoad', e)
|
||||
}
|
||||
|
||||
function avatarLoadFailed(e: Event) {
|
||||
reloadAvatarTime += 1
|
||||
if (reloadAvatarTime > 3) {
|
||||
return
|
||||
}
|
||||
if (isUniFrameWork) {
|
||||
loadErrorInUniapp.value = true
|
||||
} else {
|
||||
;(e.currentTarget as HTMLImageElement).src = defaultAvatarUrl.value
|
||||
}
|
||||
emits('onError', e)
|
||||
}
|
||||
emits('onError', e);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:not(not) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
}
|
||||
:not(not) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
flex: 0 0 auto;
|
||||
.avatar-container {
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
flex: 0 0 auto;
|
||||
|
||||
.placeholder {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #ececec;
|
||||
transition:
|
||||
opacity 0.3s,
|
||||
background-color 0.1s ease-out;
|
||||
.placeholder {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #ececec;
|
||||
transition: opacity 0.3s, background-color 0.1s ease-out;
|
||||
|
||||
&.skeleton-animation {
|
||||
animation: breath 2s linear 0.3s infinite;
|
||||
}
|
||||
&.skeleton-animation {
|
||||
animation: breath 2s linear 0.3s infinite;
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
opacity: 0;
|
||||
&.hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 80rpx !important;
|
||||
height: 80rpx !important;
|
||||
border-radius: 80rpx !important;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes breath {
|
||||
50% {
|
||||
/* stylelint-disable-next-line scss/no-global-function-names */
|
||||
background-color: darken(#ececec, 10%);
|
||||
@keyframes breath {
|
||||
50% {
|
||||
/* stylelint-disable-next-line scss/no-global-function-names */
|
||||
background-color: darken(#ececec, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -9,10 +9,7 @@
|
||||
<slot name="left" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="title"
|
||||
class="tui-navigation-title"
|
||||
>
|
||||
<div v-if="title" class="tui-navigation-title">
|
||||
<h1 class="tui-navigation-title-text">
|
||||
{{ title }}
|
||||
</h1>
|
||||
@@ -25,82 +22,85 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from '../../../adapter-vue';
|
||||
import { isH5 } from '../../../utils/env';
|
||||
import { ref, onMounted } from '../../../adapter-vue'
|
||||
import { isH5 } from '../../../utils/env'
|
||||
|
||||
interface Props {
|
||||
title?: string;
|
||||
customStyle?: string;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
title: '',
|
||||
customStyle: '',
|
||||
});
|
||||
|
||||
const statusBarHeight = ref<number>(0);
|
||||
|
||||
onMounted(() => {
|
||||
if (isH5) {
|
||||
statusBarHeight.value = 0;
|
||||
} else {
|
||||
const sysInfo = uni.getSystemInfoSync();
|
||||
statusBarHeight.value = sysInfo.statusBarHeight;
|
||||
interface Props {
|
||||
title?: string
|
||||
customStyle?: string
|
||||
}
|
||||
});
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
title: '',
|
||||
customStyle: ''
|
||||
})
|
||||
|
||||
const statusBarHeight = ref<number>(0)
|
||||
|
||||
onMounted(() => {
|
||||
if (isH5) {
|
||||
statusBarHeight.value = 0
|
||||
} else {
|
||||
const sysInfo = uni.getSystemInfoSync()
|
||||
statusBarHeight.value = sysInfo.statusBarHeight
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tui-navigation {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
background: #EBF0F6;
|
||||
min-height: 44px;
|
||||
padding: 0 12px;
|
||||
|
||||
&-left {
|
||||
.tui-navigation {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
}
|
||||
// background: #ebf0f6;
|
||||
background: #fff;
|
||||
min-height: 44px;
|
||||
padding: 0 12px;
|
||||
border-bottom: 2rpx solid #0000000a;
|
||||
box-sizing: border-box;
|
||||
|
||||
&-title {
|
||||
flex: 10;
|
||||
text-align: center;
|
||||
min-width: 0;
|
||||
&-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&-text {
|
||||
overflow: hidden;
|
||||
word-break: keep-all;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
&-title {
|
||||
flex: 10;
|
||||
text-align: center;
|
||||
min-width: 0;
|
||||
|
||||
&-text {
|
||||
overflow: hidden;
|
||||
word-break: keep-all;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&-back-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&-back-text {
|
||||
font-size: 16px;
|
||||
color: #007aff;
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&-back-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&-back-text {
|
||||
font-size: 16px;
|
||||
color: #007AFF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user