uni-list-chat.vue 12 KB

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