From 2e50cedafd87bdb3ce80ebc8fecdd80c34dfa56a Mon Sep 17 00:00:00 2001
From: whycq <913841844@qq.com>
Date: 星期二, 15 八月 2023 22:26:36 +0800
Subject: [PATCH] #
---
uni_modules/uni-list/components/uni-list-chat/uni-list-chat.vue | 538 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 538 insertions(+), 0 deletions(-)
diff --git a/uni_modules/uni-list/components/uni-list-chat/uni-list-chat.vue b/uni_modules/uni-list/components/uni-list-chat/uni-list-chat.vue
new file mode 100644
index 0000000..0c8519e
--- /dev/null
+++ b/uni_modules/uni-list/components/uni-list-chat/uni-list-chat.vue
@@ -0,0 +1,538 @@
+<template>
+ <!-- #ifdef APP-NVUE -->
+ <cell>
+ <!-- #endif -->
+ <view :hover-class="!clickable && !link ? '' : 'uni-list-chat--hover'" class="uni-list-chat" @click.stop="onClick">
+ <view :class="{ 'uni-list--border': border, 'uni-list-chat--first': isFirstChild }"></view>
+ <view class="uni-list-chat__container">
+ <view class="uni-list-chat__header-warp">
+ <view v-if="avatarCircle || avatarList.length === 0" class="uni-list-chat__header" :class="{ 'header--circle': avatarCircle }">
+ <image class="uni-list-chat__header-image" :src="avatar" mode="aspectFill"></image>
+ </view>
+ <!-- 澶村儚缁� -->
+ <view v-else class="uni-list-chat__header">
+ <view v-for="(item, index) in avatarList" :key="index" class="uni-list-chat__header-box" :class="computedAvatar"
+ :style="{ width: imageWidth + 'px', height: imageWidth + 'px' }">
+ <image class="uni-list-chat__header-image" :style="{ width: imageWidth + 'px', height: imageWidth + 'px' }" :src="item.url"
+ mode="aspectFill"></image>
+ </view>
+ </view>
+ </view>
+ <view v-if="badgeText && badgePositon === 'left'" class="uni-list-chat__badge uni-list-chat__badge-pos" :class="[isSingle]">
+ <text class="uni-list-chat__badge-text">{{ badgeText === 'dot' ? '' : badgeText }}</text>
+ </view>
+ <view class="uni-list-chat__content">
+ <view class="uni-list-chat__content-main">
+ <text class="uni-list-chat__content-title uni-ellipsis">{{ title }}</text>
+ <text class="uni-list-chat__content-note uni-ellipsis">{{ note }}</text>
+ </view>
+ <view class="uni-list-chat__content-extra">
+ <slot>
+ <text class="uni-list-chat__content-extra-text">{{ time }}</text>
+ <view v-if="badgeText && badgePositon === 'right'" class="uni-list-chat__badge" :class="[isSingle, badgePositon === 'right' ? 'uni-list-chat--right' : '']">
+ <text class="uni-list-chat__badge-text">{{ badgeText === 'dot' ? '' : badgeText }}</text>
+ </view>
+ </slot>
+ </view>
+ </view>
+ </view>
+ </view>
+ <!-- #ifdef APP-NVUE -->
+ </cell>
+ <!-- #endif -->
+</template>
+
+<script>
+ // 澶村儚澶у皬
+ const avatarWidth = 45;
+
+ /**
+ * ListChat 鑱婂ぉ鍒楄〃
+ * @description 鑱婂ぉ鍒楄〃,鐢ㄤ簬鍒涘缓鑱婂ぉ绫诲垪琛�
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=24
+ * @property {String} title 鏍囬
+ * @property {String} note 鎻忚堪
+ * @property {Boolean} clickable = [true|false] 鏄惁寮�鍚偣鍑诲弽棣堬紝榛樿涓篺alse
+ * @property {String} badgeText 鏁板瓧瑙掓爣鍐呭
+ * @property {String} badgePositon = [left|right] 瑙掓爣浣嶇疆锛岄粯璁や负 right
+ * @property {String} link = [false锝渘avigateTo|redirectTo|reLaunch|switchTab] 鏄惁灞曠ず鍙充晶绠ご骞跺紑鍚偣鍑诲弽棣堬紝榛樿涓篺alse
+ * @value false 涓嶅紑鍚�
+ * @value navigateTo 鍚� uni.navigateTo()
+ * @value redirectTo 鍚� uni.redirectTo()
+ * @value reLaunch 鍚� uni.reLaunch()
+ * @value switchTab 鍚� uni.switchTab()
+ * @property {String | PageURIString} to 璺宠浆鐩爣椤甸潰
+ * @property {String} time 鍙充晶鏃堕棿鏄剧ず
+ * @property {Boolean} avatarCircle = [true|false] 鏄惁鏄剧ず鍦嗗舰澶村儚锛岄粯璁や负false
+ * @property {String} avatar 澶村儚鍦板潃锛宎vatarCircle 涓嶅～鏃剁敓鏁�
+ * @property {Array} avatarList 澶村儚缁勶紝鏍煎紡涓� [{url:''}]
+ * @event {Function} click 鐐瑰嚮 uniListChat 瑙﹀彂浜嬩欢
+ */
+ export default {
+ name: 'UniListChat',
+ emits:['click'],
+ props: {
+ title: {
+ type: String,
+ default: ''
+ },
+ note: {
+ type: String,
+ default: ''
+ },
+ clickable: {
+ type: Boolean,
+ default: false
+ },
+ link: {
+ type: [Boolean, String],
+ default: false
+ },
+ to: {
+ type: String,
+ default: ''
+ },
+ badgeText: {
+ type: [String, Number],
+ default: ''
+ },
+ badgePositon: {
+ type: String,
+ default: 'right'
+ },
+ time: {
+ type: String,
+ default: ''
+ },
+ avatarCircle: {
+ type: Boolean,
+ default: false
+ },
+ avatar: {
+ type: String,
+ default: ''
+ },
+ avatarList: {
+ type: Array,
+ default () {
+ return [];
+ }
+ }
+ },
+ // inject: ['list'],
+ computed: {
+ isSingle() {
+ if (this.badgeText === 'dot') {
+ return 'uni-badge--dot';
+ } else {
+ const badgeText = this.badgeText.toString();
+ if (badgeText.length > 1) {
+ return 'uni-badge--complex';
+ } else {
+ return 'uni-badge--single';
+ }
+ }
+ },
+ computedAvatar() {
+ if (this.avatarList.length > 4) {
+ this.imageWidth = avatarWidth * 0.31;
+ return 'avatarItem--3';
+ } else if (this.avatarList.length > 1) {
+ this.imageWidth = avatarWidth * 0.47;
+ return 'avatarItem--2';
+ } else {
+ this.imageWidth = avatarWidth;
+ return 'avatarItem--1';
+ }
+ }
+ },
+ data() {
+ return {
+ isFirstChild: false,
+ border: true,
+ // avatarList: 3,
+ imageWidth: 50
+ };
+ },
+ mounted() {
+ this.list = this.getForm()
+ if (this.list) {
+ if (!this.list.firstChildAppend) {
+ this.list.firstChildAppend = true;
+ this.isFirstChild = true;
+ }
+ this.border = this.list.border;
+ }
+ },
+ methods: {
+ /**
+ * 鑾峰彇鐖跺厓绱犲疄渚�
+ */
+ getForm(name = 'uniList') {
+ let parent = this.$parent;
+ let parentName = parent.$options.name;
+ while (parentName !== name) {
+ parent = parent.$parent;
+ if (!parent) return false
+ parentName = parent.$options.name;
+ }
+ return parent;
+ },
+ onClick() {
+ if (this.to !== '') {
+ this.openPage();
+ return;
+ }
+
+ if (this.clickable || this.link) {
+ this.$emit('click', {
+ data: {}
+ });
+ }
+ },
+ openPage() {
+ if (['navigateTo', 'redirectTo', 'reLaunch', 'switchTab'].indexOf(this.link) !== -1) {
+ this.pageApi(this.link);
+ } else {
+ this.pageApi('navigateTo');
+ }
+ },
+ pageApi(api) {
+ uni[api]({
+ url: this.to,
+ success: res => {
+ this.$emit('click', {
+ data: res
+ });
+ },
+ fail: err => {
+ this.$emit('click', {
+ data: err
+ });
+ console.error(err.errMsg);
+ }
+ });
+ }
+ }
+ };
+</script>
+
+<style lang="scss" scoped>
+ $uni-font-size-lg:16px;
+ $uni-spacing-row-sm: 5px;
+ $uni-spacing-row-base: 10px;
+ $uni-spacing-row-lg: 15px;
+ $background-color: #fff;
+ $divide-line-color: #e5e5e5;
+ $avatar-width: 45px;
+ $avatar-border-radius: 5px;
+ $avatar-border-color: #eee;
+ $avatar-border-width: 1px;
+ $title-size: 16px;
+ $title-color: #3b4144;
+ $title-weight: normal;
+ $note-size: 12px;
+ $note-color: #999;
+ $note-weight: normal;
+ $right-text-size: 12px;
+ $right-text-color: #999;
+ $right-text-weight: normal;
+ $badge-left: 0px;
+ $badge-top: 0px;
+ $dot-width: 10px;
+ $dot-height: 10px;
+ $badge-size: 18px;
+ $badge-font: 12px;
+ $badge-color: #fff;
+ $badge-background-color: #ff5a5f;
+ $badge-space: 6px;
+ $hover: #f5f5f5;
+
+ .uni-list-chat {
+ font-size: $uni-font-size-lg;
+ position: relative;
+ flex-direction: column;
+ justify-content: space-between;
+ background-color: $background-color;
+ }
+
+ // .uni-list-chat--disabled {
+ // opacity: 0.3;
+ // }
+
+ .uni-list-chat--hover {
+ background-color: $hover;
+ }
+
+ .uni-list--border {
+ position: relative;
+ margin-left: $uni-spacing-row-lg;
+ /* #ifdef APP-PLUS */
+ border-top-color: $divide-line-color;
+ border-top-style: solid;
+ border-top-width: 0.5px;
+ /* #endif */
+ }
+
+ /* #ifndef APP-NVUE */
+ .uni-list--border:after {
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 0;
+ height: 1px;
+ content: '';
+ -webkit-transform: scaleY(0.5);
+ transform: scaleY(0.5);
+ background-color: $divide-line-color;
+ }
+
+ .uni-list-item--first:after {
+ height: 0px;
+ }
+
+ /* #endif */
+
+ .uni-list-chat--first {
+ border-top-width: 0px;
+ }
+
+ .uni-ellipsis {
+ /* #ifndef APP-NVUE */
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ /* #endif */
+ /* #ifdef APP-NVUE */
+ lines: 1;
+ /* #endif */
+ }
+
+ .uni-ellipsis-2 {
+ /* #ifndef APP-NVUE */
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ /* #endif */
+
+ /* #ifdef APP-NVUE */
+ lines: 2;
+ /* #endif */
+ }
+
+ .uni-list-chat__container {
+ position: relative;
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ flex-direction: row;
+ flex: 1;
+ padding: $uni-spacing-row-base $uni-spacing-row-lg;
+ position: relative;
+ overflow: hidden;
+ }
+
+ .uni-list-chat__header-warp {
+ position: relative;
+ }
+
+ .uni-list-chat__header {
+ /* #ifndef APP-NVUE */
+ display: flex;
+ align-content: center;
+ /* #endif */
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ flex-wrap: wrap-reverse;
+ /* #ifdef APP-NVUE */
+ width: 50px;
+ height: 50px;
+ /* #endif */
+ /* #ifndef APP-NVUE */
+ width: $avatar-width;
+ height: $avatar-width;
+ /* #endif */
+
+ border-radius: $avatar-border-radius;
+ border-color: $avatar-border-color;
+ border-width: $avatar-border-width;
+ border-style: solid;
+ overflow: hidden;
+ }
+
+ .uni-list-chat__header-box {
+ /* #ifndef APP-PLUS */
+ box-sizing: border-box;
+ display: flex;
+ width: $avatar-width;
+ height: $avatar-width;
+ /* #endif */
+ /* #ifdef APP-NVUE */
+ width: 50px;
+ height: 50px;
+ /* #endif */
+ overflow: hidden;
+ border-radius: 2px;
+ }
+
+ .uni-list-chat__header-image {
+ margin: 1px;
+ /* #ifdef APP-NVUE */
+ width: 50px;
+ height: 50px;
+ /* #endif */
+ /* #ifndef APP-NVUE */
+ width: $avatar-width;
+ height: $avatar-width;
+ /* #endif */
+ }
+
+ /* #ifndef APP-NVUE */
+ .uni-list-chat__header-image {
+ display: block;
+ width: 100%;
+ height: 100%;
+ }
+
+ .avatarItem--1 {
+ width: 100%;
+ height: 100%;
+ }
+
+ .avatarItem--2 {
+ width: 47%;
+ height: 47%;
+ }
+
+ .avatarItem--3 {
+ width: 32%;
+ height: 32%;
+ }
+
+ /* #endif */
+ .header--circle {
+ border-radius: 50%;
+ }
+
+ .uni-list-chat__content {
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ flex-direction: row;
+ flex: 1;
+ overflow: hidden;
+ padding: 2px 0;
+ }
+
+ .uni-list-chat__content-main {
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ flex-direction: column;
+ justify-content: space-between;
+ padding-left: $uni-spacing-row-base;
+ flex: 1;
+ overflow: hidden;
+ }
+
+ .uni-list-chat__content-title {
+ font-size: $title-size;
+ color: $title-color;
+ font-weight: $title-weight;
+ overflow: hidden;
+ }
+
+ .uni-list-chat__content-note {
+ margin-top: 3px;
+ color: $note-color;
+ font-size: $note-size;
+ font-weight: $title-weight;
+ overflow: hidden;
+ }
+
+ .uni-list-chat__content-extra {
+ /* #ifndef APP-NVUE */
+ flex-shrink: 0;
+ display: flex;
+ /* #endif */
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: flex-end;
+ margin-left: 5px;
+ }
+
+ .uni-list-chat__content-extra-text {
+ color: $right-text-color;
+ font-size: $right-text-size;
+ font-weight: $right-text-weight;
+ overflow: hidden;
+ }
+
+ .uni-list-chat__badge-pos {
+ position: absolute;
+ /* #ifdef APP-NVUE */
+ left: 55px;
+ top: 3px;
+ /* #endif */
+ /* #ifndef APP-NVUE */
+ left: calc(#{$avatar-width} + 10px - #{$badge-space} + #{$badge-left});
+ top: calc(#{$uni-spacing-row-base}/ 2 + 1px + #{$badge-top});
+ /* #endif */
+ }
+
+ .uni-list-chat__badge {
+ /* #ifndef APP-NVUE */
+ display: flex;
+ /* #endif */
+ justify-content: center;
+ align-items: center;
+ border-radius: 100px;
+ background-color: $badge-background-color;
+ }
+
+ .uni-list-chat__badge-text {
+ color: $badge-color;
+ font-size: $badge-font;
+ }
+
+ .uni-badge--single {
+ /* #ifndef APP-NVUE */
+ // left: calc(#{$avatar-width} + 7px + #{$badge-left});
+ /* #endif */
+ width: $badge-size;
+ height: $badge-size;
+ }
+
+ .uni-badge--complex {
+ /* #ifdef APP-NVUE */
+ left: 50px;
+ /* #endif */
+ /* #ifndef APP-NVUE */
+ width: auto;
+ /* #endif */
+ height: $badge-size;
+ padding: 0 $badge-space;
+ }
+
+ .uni-badge--dot {
+ /* #ifdef APP-NVUE */
+ left: 60px;
+ top: 6px;
+ /* #endif */
+ /* #ifndef APP-NVUE */
+ left: calc(#{$avatar-width} + 15px - #{$dot-width}/ 2 + 1px + #{$badge-left});
+ /* #endif */
+ width: $dot-width;
+ height: $dot-height;
+ padding: 0;
+ }
+
+ .uni-list-chat--right {
+ /* #ifdef APP-NVUE */
+ left: 0;
+ /* #endif */
+ }
+</style>
--
Gitblit v1.9.1