uni-list-chat.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538
  1. <template>
  2. <!-- #ifdef APP-NVUE -->
  3. <cell>
  4. <!-- #endif -->
  5. <view :hover-class="!clickable && !link ? '' : 'uni-list-chat--hover'" class="uni-list-chat" @click.stop="onClick">
  6. <view :class="{ 'uni-list--border': border, 'uni-list-chat--first': isFirstChild }"></view>
  7. <view class="uni-list-chat__container">
  8. <view class="uni-list-chat__header-warp">
  9. <view v-if="avatarCircle || avatarList.length === 0" class="uni-list-chat__header" :class="{ 'header--circle': avatarCircle }">
  10. <image class="uni-list-chat__header-image" :class="{ 'header--circle': avatarCircle }" :src="avatar" mode="aspectFill"></image>
  11. </view>
  12. <!-- 头像组 -->
  13. <view v-else class="uni-list-chat__header">
  14. <view v-for="(item, index) in avatarList" :key="index" class="uni-list-chat__header-box" :class="computedAvatar"
  15. :style="{ width: imageWidth + 'px', height: imageWidth + 'px' }">
  16. <image class="uni-list-chat__header-image" :style="{ width: imageWidth + 'px', height: imageWidth + 'px' }" :src="item.url"
  17. mode="aspectFill"></image>
  18. </view>
  19. </view>
  20. </view>
  21. <view v-if="badgeText && badgePositon === 'left'" class="uni-list-chat__badge uni-list-chat__badge-pos" :class="[isSingle]">
  22. <text class="uni-list-chat__badge-text">{{ badgeText === 'dot' ? '' : badgeText }}</text>
  23. </view>
  24. <view class="uni-list-chat__content">
  25. <view class="uni-list-chat__content-main">
  26. <text class="uni-list-chat__content-title uni-ellipsis">{{ title }}</text>
  27. <text class="uni-list-chat__content-note uni-ellipsis">{{ note }}</text>
  28. </view>
  29. <view class="uni-list-chat__content-extra">
  30. <slot>
  31. <text class="uni-list-chat__content-extra-text">{{ time }}</text>
  32. <view v-if="badgeText && badgePositon === 'right'" class="uni-list-chat__badge" :class="[isSingle, badgePositon === 'right' ? 'uni-list-chat--right' : '']">
  33. <text class="uni-list-chat__badge-text">{{ badgeText === 'dot' ? '' : badgeText }}</text>
  34. </view>
  35. </slot>
  36. </view>
  37. </view>
  38. </view>
  39. </view>
  40. <!-- #ifdef APP-NVUE -->
  41. </cell>
  42. <!-- #endif -->
  43. </template>
  44. <script>
  45. // 头像大小
  46. const avatarWidth = 45;
  47. /**
  48. * ListChat 聊天列表
  49. * @description 聊天列表,用于创建聊天类列表
  50. * @tutorial https://ext.dcloud.net.cn/plugin?id=24
  51. * @property {String} title 标题
  52. * @property {String} note 描述
  53. * @property {Boolean} clickable = [true|false] 是否开启点击反馈,默认为false
  54. * @property {String} badgeText 数字角标内容
  55. * @property {String} badgePositon = [left|right] 角标位置,默认为 right
  56. * @property {String} link = [false|navigateTo|redirectTo|reLaunch|switchTab] 是否展示右侧箭头并开启点击反馈,默认为false
  57. * @value false 不开启
  58. * @value navigateTo 同 uni.navigateTo()
  59. * @value redirectTo 同 uni.redirectTo()
  60. * @value reLaunch 同 uni.reLaunch()
  61. * @value switchTab 同 uni.switchTab()
  62. * @property {String | PageURIString} to 跳转目标页面
  63. * @property {String} time 右侧时间显示
  64. * @property {Boolean} avatarCircle = [true|false] 是否显示圆形头像,默认为false
  65. * @property {String} avatar 头像地址,avatarCircle 不填时生效
  66. * @property {Array} avatarList 头像组,格式为 [{url:''}]
  67. * @event {Function} click 点击 uniListChat 触发事件
  68. */
  69. export default {
  70. name: 'UniListChat',
  71. emits:['click'],
  72. props: {
  73. title: {
  74. type: String,
  75. default: ''
  76. },
  77. note: {
  78. type: String,
  79. default: ''
  80. },
  81. clickable: {
  82. type: Boolean,
  83. default: false
  84. },
  85. link: {
  86. type: [Boolean, String],
  87. default: false
  88. },
  89. to: {
  90. type: String,
  91. default: ''
  92. },
  93. badgeText: {
  94. type: [String, Number],
  95. default: ''
  96. },
  97. badgePositon: {
  98. type: String,
  99. default: 'right'
  100. },
  101. time: {
  102. type: String,
  103. default: ''
  104. },
  105. avatarCircle: {
  106. type: Boolean,
  107. default: false
  108. },
  109. avatar: {
  110. type: String,
  111. default: ''
  112. },
  113. avatarList: {
  114. type: Array,
  115. default () {
  116. return [];
  117. }
  118. }
  119. },
  120. // inject: ['list'],
  121. computed: {
  122. isSingle() {
  123. if (this.badgeText === 'dot') {
  124. return 'uni-badge--dot';
  125. } else {
  126. const badgeText = this.badgeText.toString();
  127. if (badgeText.length > 1) {
  128. return 'uni-badge--complex';
  129. } else {
  130. return 'uni-badge--single';
  131. }
  132. }
  133. },
  134. computedAvatar() {
  135. if (this.avatarList.length > 4) {
  136. this.imageWidth = avatarWidth * 0.31;
  137. return 'avatarItem--3';
  138. } else if (this.avatarList.length > 1) {
  139. this.imageWidth = avatarWidth * 0.47;
  140. return 'avatarItem--2';
  141. } else {
  142. this.imageWidth = avatarWidth;
  143. return 'avatarItem--1';
  144. }
  145. }
  146. },
  147. data() {
  148. return {
  149. isFirstChild: false,
  150. border: true,
  151. // avatarList: 3,
  152. imageWidth: 50
  153. };
  154. },
  155. mounted() {
  156. this.list = this.getForm()
  157. if (this.list) {
  158. if (!this.list.firstChildAppend) {
  159. this.list.firstChildAppend = true;
  160. this.isFirstChild = true;
  161. }
  162. this.border = this.list.border;
  163. }
  164. },
  165. methods: {
  166. /**
  167. * 获取父元素实例
  168. */
  169. getForm(name = 'uniList') {
  170. let parent = this.$parent;
  171. let parentName = parent.$options.name;
  172. while (parentName !== name) {
  173. parent = parent.$parent;
  174. if (!parent) return false
  175. parentName = parent.$options.name;
  176. }
  177. return parent;
  178. },
  179. onClick() {
  180. if (this.to !== '') {
  181. this.openPage();
  182. return;
  183. }
  184. if (this.clickable || this.link) {
  185. this.$emit('click', {
  186. data: {}
  187. });
  188. }
  189. },
  190. openPage() {
  191. if (['navigateTo', 'redirectTo', 'reLaunch', 'switchTab'].indexOf(this.link) !== -1) {
  192. this.pageApi(this.link);
  193. } else {
  194. this.pageApi('navigateTo');
  195. }
  196. },
  197. pageApi(api) {
  198. uni[api]({
  199. url: this.to,
  200. success: res => {
  201. this.$emit('click', {
  202. data: res
  203. });
  204. },
  205. fail: err => {
  206. this.$emit('click', {
  207. data: err
  208. });
  209. console.error(err.errMsg);
  210. }
  211. });
  212. }
  213. }
  214. };
  215. </script>
  216. <style lang="scss" >
  217. $uni-font-size-lg:16px;
  218. $uni-spacing-row-sm: 5px;
  219. $uni-spacing-row-base: 10px;
  220. $uni-spacing-row-lg: 15px;
  221. $background-color: #fff;
  222. $divide-line-color: #e5e5e5;
  223. $avatar-width: 45px;
  224. $avatar-border-radius: 5px;
  225. $avatar-border-color: #eee;
  226. $avatar-border-width: 1px;
  227. $title-size: 16px;
  228. $title-color: #3b4144;
  229. $title-weight: normal;
  230. $note-size: 12px;
  231. $note-color: #999;
  232. $note-weight: normal;
  233. $right-text-size: 12px;
  234. $right-text-color: #999;
  235. $right-text-weight: normal;
  236. $badge-left: 0px;
  237. $badge-top: 0px;
  238. $dot-width: 10px;
  239. $dot-height: 10px;
  240. $badge-size: 18px;
  241. $badge-font: 12px;
  242. $badge-color: #fff;
  243. $badge-background-color: #ff5a5f;
  244. $badge-space: 6px;
  245. $hover: #f5f5f5;
  246. .uni-list-chat {
  247. font-size: $uni-font-size-lg;
  248. position: relative;
  249. flex-direction: column;
  250. justify-content: space-between;
  251. background-color: $background-color;
  252. }
  253. // .uni-list-chat--disabled {
  254. // opacity: 0.3;
  255. // }
  256. .uni-list-chat--hover {
  257. background-color: $hover;
  258. }
  259. .uni-list--border {
  260. position: relative;
  261. margin-left: $uni-spacing-row-lg;
  262. /* #ifdef APP-PLUS */
  263. border-top-color: $divide-line-color;
  264. border-top-style: solid;
  265. border-top-width: 0.5px;
  266. /* #endif */
  267. }
  268. /* #ifndef APP-NVUE */
  269. .uni-list--border:after {
  270. position: absolute;
  271. top: 0;
  272. right: 0;
  273. left: 0;
  274. height: 1px;
  275. content: '';
  276. -webkit-transform: scaleY(0.5);
  277. transform: scaleY(0.5);
  278. background-color: $divide-line-color;
  279. }
  280. .uni-list-item--first:after {
  281. height: 0px;
  282. }
  283. /* #endif */
  284. .uni-list-chat--first {
  285. border-top-width: 0px;
  286. }
  287. .uni-ellipsis {
  288. /* #ifndef APP-NVUE */
  289. overflow: hidden;
  290. white-space: nowrap;
  291. text-overflow: ellipsis;
  292. /* #endif */
  293. /* #ifdef APP-NVUE */
  294. lines: 1;
  295. /* #endif */
  296. }
  297. .uni-ellipsis-2 {
  298. /* #ifndef APP-NVUE */
  299. overflow: hidden;
  300. text-overflow: ellipsis;
  301. display: -webkit-box;
  302. -webkit-line-clamp: 2;
  303. -webkit-box-orient: vertical;
  304. /* #endif */
  305. /* #ifdef APP-NVUE */
  306. lines: 2;
  307. /* #endif */
  308. }
  309. .uni-list-chat__container {
  310. position: relative;
  311. /* #ifndef APP-NVUE */
  312. display: flex;
  313. /* #endif */
  314. flex-direction: row;
  315. flex: 1;
  316. padding: $uni-spacing-row-base $uni-spacing-row-lg;
  317. position: relative;
  318. overflow: hidden;
  319. }
  320. .uni-list-chat__header-warp {
  321. position: relative;
  322. }
  323. .uni-list-chat__header {
  324. /* #ifndef APP-NVUE */
  325. display: flex;
  326. align-content: center;
  327. /* #endif */
  328. flex-direction: row;
  329. justify-content: center;
  330. align-items: center;
  331. flex-wrap: wrap-reverse;
  332. /* #ifdef APP-NVUE */
  333. width: 50px;
  334. height: 50px;
  335. /* #endif */
  336. /* #ifndef APP-NVUE */
  337. width: $avatar-width;
  338. height: $avatar-width;
  339. /* #endif */
  340. border-radius: $avatar-border-radius;
  341. border-color: $avatar-border-color;
  342. border-width: $avatar-border-width;
  343. border-style: solid;
  344. overflow: hidden;
  345. }
  346. .uni-list-chat__header-box {
  347. /* #ifndef APP-PLUS */
  348. box-sizing: border-box;
  349. display: flex;
  350. width: $avatar-width;
  351. height: $avatar-width;
  352. /* #endif */
  353. /* #ifdef APP-NVUE */
  354. width: 50px;
  355. height: 50px;
  356. /* #endif */
  357. overflow: hidden;
  358. border-radius: 2px;
  359. }
  360. .uni-list-chat__header-image {
  361. margin: 1px;
  362. /* #ifdef APP-NVUE */
  363. width: 50px;
  364. height: 50px;
  365. /* #endif */
  366. /* #ifndef APP-NVUE */
  367. width: $avatar-width;
  368. height: $avatar-width;
  369. /* #endif */
  370. }
  371. /* #ifndef APP-NVUE */
  372. .uni-list-chat__header-image {
  373. display: block;
  374. width: 100%;
  375. height: 100%;
  376. }
  377. .avatarItem--1 {
  378. width: 100%;
  379. height: 100%;
  380. }
  381. .avatarItem--2 {
  382. width: 47%;
  383. height: 47%;
  384. }
  385. .avatarItem--3 {
  386. width: 32%;
  387. height: 32%;
  388. }
  389. /* #endif */
  390. .header--circle {
  391. border-radius: 50%;
  392. }
  393. .uni-list-chat__content {
  394. /* #ifndef APP-NVUE */
  395. display: flex;
  396. /* #endif */
  397. flex-direction: row;
  398. flex: 1;
  399. overflow: hidden;
  400. padding: 2px 0;
  401. }
  402. .uni-list-chat__content-main {
  403. /* #ifndef APP-NVUE */
  404. display: flex;
  405. /* #endif */
  406. flex-direction: column;
  407. justify-content: space-between;
  408. padding-left: $uni-spacing-row-base;
  409. flex: 1;
  410. overflow: hidden;
  411. }
  412. .uni-list-chat__content-title {
  413. font-size: $title-size;
  414. color: $title-color;
  415. font-weight: $title-weight;
  416. overflow: hidden;
  417. }
  418. .uni-list-chat__content-note {
  419. margin-top: 3px;
  420. color: $note-color;
  421. font-size: $note-size;
  422. font-weight: $title-weight;
  423. overflow: hidden;
  424. }
  425. .uni-list-chat__content-extra {
  426. /* #ifndef APP-NVUE */
  427. flex-shrink: 0;
  428. display: flex;
  429. /* #endif */
  430. flex-direction: column;
  431. justify-content: space-between;
  432. align-items: flex-end;
  433. margin-left: 5px;
  434. }
  435. .uni-list-chat__content-extra-text {
  436. color: $right-text-color;
  437. font-size: $right-text-size;
  438. font-weight: $right-text-weight;
  439. overflow: hidden;
  440. }
  441. .uni-list-chat__badge-pos {
  442. position: absolute;
  443. /* #ifdef APP-NVUE */
  444. left: 55px;
  445. top: 3px;
  446. /* #endif */
  447. /* #ifndef APP-NVUE */
  448. left: calc(#{$avatar-width} + 10px - #{$badge-space} + #{$badge-left});
  449. top: calc(#{$uni-spacing-row-base}/ 2 + 1px + #{$badge-top});
  450. /* #endif */
  451. }
  452. .uni-list-chat__badge {
  453. /* #ifndef APP-NVUE */
  454. display: flex;
  455. /* #endif */
  456. justify-content: center;
  457. align-items: center;
  458. border-radius: 100px;
  459. background-color: $badge-background-color;
  460. }
  461. .uni-list-chat__badge-text {
  462. color: $badge-color;
  463. font-size: $badge-font;
  464. }
  465. .uni-badge--single {
  466. /* #ifndef APP-NVUE */
  467. // left: calc(#{$avatar-width} + 7px + #{$badge-left});
  468. /* #endif */
  469. width: $badge-size;
  470. height: $badge-size;
  471. }
  472. .uni-badge--complex {
  473. /* #ifdef APP-NVUE */
  474. left: 50px;
  475. /* #endif */
  476. /* #ifndef APP-NVUE */
  477. width: auto;
  478. /* #endif */
  479. height: $badge-size;
  480. padding: 0 $badge-space;
  481. }
  482. .uni-badge--dot {
  483. /* #ifdef APP-NVUE */
  484. left: 60px;
  485. top: 6px;
  486. /* #endif */
  487. /* #ifndef APP-NVUE */
  488. left: calc(#{$avatar-width} + 15px - #{$dot-width}/ 2 + 1px + #{$badge-left});
  489. /* #endif */
  490. width: $dot-width;
  491. height: $dot-height;
  492. padding: 0;
  493. }
  494. .uni-list-chat--right {
  495. /* #ifdef APP-NVUE */
  496. left: 0;
  497. /* #endif */
  498. }
  499. </style>