uni-list-chat.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534
  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" :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" scoped>
  217. $background-color: #fff;
  218. $divide-line-color: #e5e5e5;
  219. $avatar-width: 45px;
  220. $avatar-border-radius: 5px;
  221. $avatar-border-color: #eee;
  222. $avatar-border-width: 1px;
  223. $title-size: 16px;
  224. $title-color: #3b4144;
  225. $title-weight: normal;
  226. $note-size: 12px;
  227. $note-color: #999;
  228. $note-weight: normal;
  229. $right-text-size: 12px;
  230. $right-text-color: #999;
  231. $right-text-weight: normal;
  232. $badge-left: 0px;
  233. $badge-top: 0px;
  234. $dot-width: 10px;
  235. $dot-height: 10px;
  236. $badge-size: 18px;
  237. $badge-font: 12px;
  238. $badge-color: #fff;
  239. $badge-background-color: #ff5a5f;
  240. $badge-space: 6px;
  241. $hover: #f5f5f5;
  242. .uni-list-chat {
  243. font-size: $uni-font-size-lg;
  244. position: relative;
  245. flex-direction: column;
  246. justify-content: space-between;
  247. background-color: $background-color;
  248. }
  249. // .uni-list-chat--disabled {
  250. // opacity: 0.3;
  251. // }
  252. .uni-list-chat--hover {
  253. background-color: $hover;
  254. }
  255. .uni-list--border {
  256. position: relative;
  257. margin-left: $uni-spacing-row-lg;
  258. /* #ifdef APP-PLUS */
  259. border-top-color: $divide-line-color;
  260. border-top-style: solid;
  261. border-top-width: 0.5px;
  262. /* #endif */
  263. }
  264. /* #ifndef APP-NVUE */
  265. .uni-list--border:after {
  266. position: absolute;
  267. top: 0;
  268. right: 0;
  269. left: 0;
  270. height: 1px;
  271. content: '';
  272. -webkit-transform: scaleY(0.5);
  273. transform: scaleY(0.5);
  274. background-color: $divide-line-color;
  275. }
  276. .uni-list-item--first:after {
  277. height: 0px;
  278. }
  279. /* #endif */
  280. .uni-list-chat--first {
  281. border-top-width: 0px;
  282. }
  283. .uni-ellipsis {
  284. /* #ifndef APP-NVUE */
  285. overflow: hidden;
  286. white-space: nowrap;
  287. text-overflow: ellipsis;
  288. /* #endif */
  289. /* #ifdef APP-NVUE */
  290. lines: 1;
  291. /* #endif */
  292. }
  293. .uni-ellipsis-2 {
  294. /* #ifndef APP-NVUE */
  295. overflow: hidden;
  296. text-overflow: ellipsis;
  297. display: -webkit-box;
  298. -webkit-line-clamp: 2;
  299. -webkit-box-orient: vertical;
  300. /* #endif */
  301. /* #ifdef APP-NVUE */
  302. lines: 2;
  303. /* #endif */
  304. }
  305. .uni-list-chat__container {
  306. position: relative;
  307. /* #ifndef APP-NVUE */
  308. display: flex;
  309. /* #endif */
  310. flex-direction: row;
  311. flex: 1;
  312. padding: $uni-spacing-row-base $uni-spacing-row-lg;
  313. position: relative;
  314. overflow: hidden;
  315. }
  316. .uni-list-chat__header-warp {
  317. position: relative;
  318. }
  319. .uni-list-chat__header {
  320. /* #ifndef APP-NVUE */
  321. display: flex;
  322. align-content: center;
  323. /* #endif */
  324. flex-direction: row;
  325. justify-content: center;
  326. align-items: center;
  327. flex-wrap: wrap-reverse;
  328. /* #ifdef APP-NVUE */
  329. width: 50px;
  330. height: 50px;
  331. /* #endif */
  332. /* #ifndef APP-NVUE */
  333. width: $avatar-width;
  334. height: $avatar-width;
  335. /* #endif */
  336. border-radius: $avatar-border-radius;
  337. border-color: $avatar-border-color;
  338. border-width: $avatar-border-width;
  339. border-style: solid;
  340. overflow: hidden;
  341. }
  342. .uni-list-chat__header-box {
  343. /* #ifndef APP-PLUS */
  344. box-sizing: border-box;
  345. display: flex;
  346. width: $avatar-width;
  347. height: $avatar-width;
  348. /* #endif */
  349. /* #ifdef APP-NVUE */
  350. width: 50px;
  351. height: 50px;
  352. /* #endif */
  353. overflow: hidden;
  354. border-radius: 2px;
  355. }
  356. .uni-list-chat__header-image {
  357. margin: 1px;
  358. /* #ifdef APP-NVUE */
  359. width: 50px;
  360. height: 50px;
  361. /* #endif */
  362. /* #ifndef APP-NVUE */
  363. width: $avatar-width;
  364. height: $avatar-width;
  365. /* #endif */
  366. }
  367. /* #ifndef APP-NVUE */
  368. .uni-list-chat__header-image {
  369. display: block;
  370. width: 100%;
  371. height: 100%;
  372. }
  373. .avatarItem--1 {
  374. width: 100%;
  375. height: 100%;
  376. }
  377. .avatarItem--2 {
  378. width: 47%;
  379. height: 47%;
  380. }
  381. .avatarItem--3 {
  382. width: 32%;
  383. height: 32%;
  384. }
  385. /* #endif */
  386. .header--circle {
  387. border-radius: 50%;
  388. }
  389. .uni-list-chat__content {
  390. /* #ifndef APP-NVUE */
  391. display: flex;
  392. /* #endif */
  393. flex-direction: row;
  394. flex: 1;
  395. overflow: hidden;
  396. padding: 2px 0;
  397. }
  398. .uni-list-chat__content-main {
  399. /* #ifndef APP-NVUE */
  400. display: flex;
  401. /* #endif */
  402. flex-direction: column;
  403. justify-content: space-between;
  404. padding-left: $uni-spacing-row-base;
  405. flex: 1;
  406. overflow: hidden;
  407. }
  408. .uni-list-chat__content-title {
  409. font-size: $title-size;
  410. color: $title-color;
  411. font-weight: $title-weight;
  412. overflow: hidden;
  413. }
  414. .uni-list-chat__content-note {
  415. margin-top: 3px;
  416. color: $note-color;
  417. font-size: $note-size;
  418. font-weight: $title-weight;
  419. overflow: hidden;
  420. }
  421. .uni-list-chat__content-extra {
  422. /* #ifndef APP-NVUE */
  423. flex-shrink: 0;
  424. display: flex;
  425. /* #endif */
  426. flex-direction: column;
  427. justify-content: space-between;
  428. align-items: flex-end;
  429. margin-left: 5px;
  430. }
  431. .uni-list-chat__content-extra-text {
  432. color: $right-text-color;
  433. font-size: $right-text-size;
  434. font-weight: $right-text-weight;
  435. overflow: hidden;
  436. }
  437. .uni-list-chat__badge-pos {
  438. position: absolute;
  439. /* #ifdef APP-NVUE */
  440. left: 55px;
  441. top: 3px;
  442. /* #endif */
  443. /* #ifndef APP-NVUE */
  444. left: calc(#{$avatar-width} + 10px - #{$badge-space} + #{$badge-left});
  445. top: calc(#{$uni-spacing-row-base}/ 2 + 1px + #{$badge-top});
  446. /* #endif */
  447. }
  448. .uni-list-chat__badge {
  449. /* #ifndef APP-NVUE */
  450. display: flex;
  451. /* #endif */
  452. justify-content: center;
  453. align-items: center;
  454. border-radius: 100px;
  455. background-color: $badge-background-color;
  456. }
  457. .uni-list-chat__badge-text {
  458. color: $badge-color;
  459. font-size: $badge-font;
  460. }
  461. .uni-badge--single {
  462. /* #ifndef APP-NVUE */
  463. // left: calc(#{$avatar-width} + 7px + #{$badge-left});
  464. /* #endif */
  465. width: $badge-size;
  466. height: $badge-size;
  467. }
  468. .uni-badge--complex {
  469. /* #ifdef APP-NVUE */
  470. left: 50px;
  471. /* #endif */
  472. /* #ifndef APP-NVUE */
  473. width: auto;
  474. /* #endif */
  475. height: $badge-size;
  476. padding: 0 $badge-space;
  477. }
  478. .uni-badge--dot {
  479. /* #ifdef APP-NVUE */
  480. left: 60px;
  481. top: 6px;
  482. /* #endif */
  483. /* #ifndef APP-NVUE */
  484. left: calc(#{$avatar-width} + 15px - #{$dot-width}/ 2 + 1px + #{$badge-left});
  485. /* #endif */
  486. width: $dot-width;
  487. height: $dot-height;
  488. padding: 0;
  489. }
  490. .uni-list-chat--right {
  491. /* #ifdef APP-NVUE */
  492. left: 0;
  493. /* #endif */
  494. }
  495. </style>