uni-list-chat.vue 10 KB

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