index.vue 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825
  1. <!-- 聊天 -->
  2. <template>
  3. <view class="page page--divider">
  4. <headerline navstyle="left:18%;width:60%;" :reditem="unreadnum" issearch="true" :showsearch="showsearch"
  5. searchtips="请输入搜索内容" @clicksearch='clicksearch' :shownav="false" :title="navtitle" :menuitem="menuitem"
  6. :navselect="navselect" :statusbarheight='statusBarHeight' :islogo="false" @tapnav="tapnav"
  7. @tapmenu="tapmenu" rightmenu="true"></headerline>
  8. <view class="widget" v-if="navselect==0 && !showsearch">
  9. <scroll-view v-if="chats.length>0" refresher-enabled='true' :refresher-threshold='60'
  10. :refresher-triggered="isfresh" :refresher-default-style='refreshstyle'
  11. @refresherpulling='refresherpulling' @refresherrefresh='refresherrefresh'>
  12. <view class="fresh" v-if="isfresh==true">
  13. {{fresh_tip}}
  14. </view>
  15. <view :class="{'item':true,'istop':item.istop}" v-for="(item, index) in chats" :key="item.key"
  16. @tap="handleClick(item)" @longtap="msgAction(item)">
  17. <image :src="image_cache(item.avatar)" class="leftImg" />
  18. <view class="rightContent">
  19. <view class="topCont">
  20. <view class="userName">{{item.nickname||'匿名'}}</view>
  21. <view class="time">{{ timestamp(item.timestamp) || '--:--' }}</view>
  22. </view>
  23. <view class="bottomCont">
  24. <view class="content" v-if="item.message.type!='tips'">
  25. <block v-if="item.self || item.sender.nickname!=undefined">
  26. {{item.self? '[我]': item.sender.nickname+':'}}
  27. </block>
  28. <text style='color: #666666;font-size: 28upx'
  29. v-if="item.message.type=='voice'">[语音]</text>
  30. <text style='color: #666666;font-size: 28upx'
  31. v-else-if="item.message.type=='redpacket'">[红包]</text>
  32. <text style='color: #666666;font-size: 28upx'
  33. v-else-if="item.message.type=='image'">[图片]</text>
  34. <text style='color: #666666;font-size: 28upx'
  35. v-else-if="item.message.type=='vedio'">[视频]</text>
  36. <text style='color: #666666;font-size: 28upx'
  37. v-else-if="item.message.type=='emotion'">[表情]</text>
  38. <text style='color: #666666;font-size: 28upx'
  39. v-else-if="item.message.type=='apply'">{{item.message.content.text}}</text>
  40. <text style='color: #666666;font-size: 28upx' v-else-if="item.message.type=='tips'">
  41. <block v-if="item.message.content.type=='time'">
  42. {{item.message.content.text}}
  43. </block>
  44. <block v-else>
  45. {{item.message.content}}
  46. </block>
  47. </text>
  48. <text style='color: #666666;font-size: 28upx' v-else-if="item.message.type=='text'">
  49. <text v-if="item.message.content.type!='emotion' ">
  50. <block
  51. v-if="item.message.content.type=='remind' && toText(item.message.content.content).indexOf('@我')>-1 ">
  52. <text style="color:#1d830a">
  53. {{item.message.content.type=="remind"?toText(item.message.content.content):toText(item.message.content) }}</text>
  54. </block>
  55. <block v-else>
  56. {{item.message.content.type=="remind"?toText(item.message.content.content):toText(item.message.content) }}
  57. </block>
  58. </text>
  59. <text v-if="item.message.content.type=='emotion' ">
  60. {{item.message.content.content}}
  61. </text>
  62. </text>
  63. <text style='color: #999999;font-size: 28upx' v-else-if="item.message.msg_type=='show'">
  64. {{item.message.content.text}}
  65. </text>
  66. </view>
  67. <view class="content" v-else>
  68. <text style='color: #999999;font-size: 28upx'>
  69. <block v-if="item.message.content.type=='time'">
  70. {{item.message.content.text}}
  71. </block>
  72. <block v-else>
  73. {{item.message.content}}
  74. </block>
  75. </text>
  76. </view>
  77. <view class="badge" v-if="item.unread && item.unread>99"
  78. style="width: auto;padding: 0 5px;">99+</view>
  79. <view class="badge" v-if="item.unread && item.unread<=99">{{item.unread}}</view>
  80. </view>
  81. </view>
  82. </view>
  83. </scroll-view>
  84. <view v-else class="nodata">
  85. 您还没有任何消息
  86. </view>
  87. </view>
  88. <yk-authpup ref="authpupCAMERA" type="top" @changeAuth="changeAuth"
  89. permissionID="CAMERA"></yk-authpup>
  90. </view>
  91. </template>
  92. <script>
  93. import ykAuthpup from "@/components/yk-authpup/yk-authpup";
  94. import scode from "../../library/scode.js"
  95. import api from "../../library/index.js"
  96. import chat from "../../library/chat.js"
  97. import http from "../../library/http.js"
  98. import message from "../../library/message.js"
  99. import action from "../../library/action.js"
  100. import headerline from '../../components/header.vue'
  101. var windowHeight = uni.getSystemInfoSync().windowHeight;
  102. var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
  103. console.log(statusBarHeight,'statusBarHeight')
  104. var contenttop = statusBarHeight + 45;
  105. var conentheight = windowHeight - contenttop;
  106. var lottHeight = conentheight - 30;
  107. var lottTop = contenttop + 30;
  108. export default {
  109. components: {
  110. headerline,
  111. ykAuthpup
  112. },
  113. data() {
  114. return {
  115. statusBarHeight: statusBarHeight + 'px',
  116. contenttop: contenttop + 'px',
  117. contentheight: conentheight + 'px',
  118. lottHeight: lottHeight + 'px',
  119. lottTop: lottTop + 'px',
  120. shownav: false,
  121. // navtitle:'消息',
  122. navselect: 0,
  123. menuitem: [],
  124. newfriendNotify: false,
  125. showMenu: false,
  126. newfriendnum: 0,
  127. clickkey: false,
  128. reading_id: -1,
  129. actions: [],
  130. user: uni.getStorageSync('userInfo'),
  131. showsearch: false,
  132. friends: uni.getStorageSync(uni.getStorageSync('access_token') + '_frienddata'),
  133. pinyin: [],
  134. char_select: false,
  135. kefunum: 0,
  136. unreadnum: [0, 0, 0],
  137. refreshstyle: 'none',
  138. isfresh: false,
  139. fresh_tip: '下拉刷新'
  140. }
  141. },
  142. computed: {
  143. chats() {
  144. var res = this.$store.getters['chat/msglist'];
  145. return res;
  146. },
  147. navtitle() {
  148. var num = 0;
  149. var msg_list = this.$store.getters['chat/msglist'];
  150. msg_list.map(item => {
  151. num += parseInt(item.unread)
  152. })
  153. if (num == 0) return '消息';
  154. else return '消息(' + num + ')'
  155. }
  156. },
  157. watch: {
  158. chats(val) {
  159. var num = 0;
  160. for (var i = 0; i < val.length; i++) {
  161. num += val[i].unread;
  162. }
  163. this.unreadnum.splice(0, 3);
  164. this.unreadnum.push(num);
  165. this.unreadnum.push(0);
  166. this.unreadnum.push(0);
  167. this.$forceUpdate();
  168. }
  169. },
  170. methods: {
  171. check_update() {
  172. /** 检测升级 */
  173. // #ifdef APP-PLUS
  174. let _this = this;
  175. plus.runtime.getProperty(plus.runtime.appid, function(info) {
  176. api.update({
  177. version: info.version,
  178. osname: plus.os.name
  179. }).then(res => {
  180. console.log(res);
  181. if (res.data.status == 1) {
  182. uni.navigateTo({
  183. url:'/pages/index/upApp'
  184. })
  185. }
  186. })
  187. });
  188. // #endif
  189. },
  190. refresherpulling() {
  191. this.refreshstyle = 'none';
  192. this.isfresh = true;
  193. this.fresh_tip = '下拉刷新...';
  194. },
  195. refresherrefresh() {
  196. this.refreshstyle = 'black';
  197. this.fresh_tip = '正在刷新...';
  198. this.lastchat();
  199. },
  200. href(path, opts) {
  201. if (!opts || opts == undefined || opts == null) opts = {};
  202. this.$jump(path, opts);
  203. },
  204. open_detail(item) {
  205. this.$jump('friend.detail', {
  206. id: item.id
  207. });
  208. },
  209. toText(str) {
  210. str = str.toString()
  211. str = str.split('-qute-')[0]
  212. str = str.replace(/&nbsp;/g, " ");
  213. str = str.replace(/<br>/g, " ");
  214. str = str.replace(/<[^<>]+>/g, '')
  215. return str;
  216. },
  217. timestamp(time) {
  218. // return action.timestampFormat(new Date(time.replace(/(-|年|月)/g, '/').replace('日', '')).getTime()/1000)
  219. return action.timestampFormat(time)
  220. },
  221. tapnav(num) {
  222. this.navselect = num;
  223. if (num == 1) this.friendlist();
  224. else this.lastchat();
  225. },
  226. clicksearch(e) {
  227. this.showsearch = e;
  228. },
  229. go_search(e) {
  230. http.setWait(true).get('user.php?act=searchUser', {
  231. keywords: e
  232. }).then(res => {
  233. if (res.data.length > 0) {
  234. var id = res.data[0].id;
  235. uni.navigateTo({
  236. url: '../friend/detail?id=' + id + '&from=' + res.data[0].from
  237. })
  238. } else {
  239. uni.showToast({
  240. icon: 'none',
  241. title: '没有搜索到相关用户',
  242. duration: 1500
  243. })
  244. }
  245. })
  246. },
  247. tapmenu(num) {
  248. if (this.$action.loginTips('未登录用户,无法完成此操作', '/pages/game/index') == false) return false;
  249. if (this.$action.check_userlock() == false) return false;
  250. if (num == 0) {
  251. if (this.user.nickname == '' || this.user.nickname == this.user.name) {
  252. this.$action.profileTips('未设置昵称,不能创建群', '/pages/group/create');
  253. return false;
  254. } else
  255. this.$jump('group.create');
  256. } else if (num == 1) {
  257. this.$jump('group.list', {
  258. method: 0
  259. });
  260. } else if (num == 2) {
  261. this.$jump('group.list', {
  262. method: 1
  263. });
  264. } else if (num == 3) {
  265. this.$jump('mine.note');
  266. } else if (num == 4) {
  267. if(plus.os.name == 'Android') {
  268. return this.$refs['authpupCAMERA'].open()
  269. }else {
  270. return uni.scanCode({
  271. success(res) {
  272. scode.getScode(res)
  273. },
  274. fail(e) {
  275. console.log(JSON.stringify(e));
  276. console.log('扫码失败')
  277. }
  278. });
  279. }
  280. // return uni.scanCode({
  281. // success(res) {
  282. // scode.getScode(res)
  283. // },
  284. // fail(e) {
  285. // console.log(JSON.stringify(e));
  286. // console.log('扫码失败')
  287. // }
  288. // });
  289. }
  290. },
  291. changeAuth() {
  292. uni.scanCode({
  293. success(res) {
  294. scode.getScode(res)
  295. },
  296. fail(e) {
  297. console.log(JSON.stringify(e));
  298. console.log('扫码失败')
  299. }
  300. });
  301. },
  302. group_read(group_id) {
  303. http.setWait(false).post('group.php?act=setReadTime', {
  304. group_id: group_id,
  305. userid: this.user.id
  306. }).then(res => {
  307. this.lastchat();
  308. })
  309. },
  310. user_read(userid) {
  311. http.setWait(false).post('group.php?act=setReadTime', {
  312. group_id: 0,
  313. userid: this.userid,
  314. sendid: this.user.id
  315. }).then(res => {
  316. this.lastchat();
  317. })
  318. },
  319. handleClick(info) {
  320. if (info.unread > 0) this.$store.commit('chat/clearunread', info.cache_key);
  321. if (this.clickkey == info.cache_key) return false;
  322. this.clickkey = info.cache_key;
  323. if (info.cache_key == "U1") {
  324. return this.$jump('friend.request?type=' + info.sender.id);
  325. } else {
  326. if (info.cache_key.indexOf('U') > -1) {
  327. let friend = {
  328. id: info.id,
  329. nickname: info.nickname
  330. }
  331. //this.user_read(info.id);
  332. return this.$jump('friend.chat', friend);
  333. } else {
  334. if (info.message.content.type == 'remind' && this.toText(info.message.content.content).indexOf(
  335. '@我') > -1)
  336. var atme = 1;
  337. else var atme = 0;
  338. // this.group_read(info.id);
  339. this.$jump('group.chat', {
  340. id: info.id,
  341. nickname: info.nickname,
  342. atme: atme,
  343. msg_id: info.msg_id
  344. });
  345. }
  346. }
  347. },
  348. msgtopChanage(istop, cache_key) {
  349. istop = !istop
  350. var msgtop = uni.getStorageSync('msgtop') ? uni.getStorageSync('msgtop') : [];
  351. if (istop) {
  352. msgtop.push(cache_key)
  353. } else {
  354. for (var i = 0; i < msgtop.length; i++) {
  355. if (msgtop[i] == cache_key) {
  356. msgtop.splice(i, 1)
  357. }
  358. }
  359. }
  360. uni.setStorageSync('msgtop', msgtop);
  361. this.$store.commit('chat/set_istop');
  362. var data = {
  363. cache_key: cache_key,
  364. userid: this.user.id,
  365. istop: istop
  366. };
  367. http.setWait(false).get('group.php?act=set_msgtop', data).then(res => {
  368. })
  369. },
  370. msgAction(msg) {
  371. var user_id = uni.getStorageSync('access_token');
  372. // console.log(msg);
  373. let that = this;
  374. var itemList = [];
  375. if (msg.istop < 1) itemList.push('置顶');
  376. else itemList.push('取消置顶');
  377. if (msg.unread > 0) itemList.push('标记已读');
  378. else itemList.push('标记未读');
  379. itemList.push('删除会话')
  380. uni.showActionSheet({
  381. itemList: itemList,
  382. success: function(res) {
  383. switch (res.tapIndex) {
  384. case 2:
  385. that.delete_msg(msg.cache_key)
  386. break;
  387. case 0:
  388. that.msgtopChanage(msg.istop, msg.cache_key)
  389. // console.log(msg.cache_key)
  390. break;
  391. case 1:
  392. that.$store.commit('chat/set_read', msg);
  393. break;
  394. default:
  395. break;
  396. }
  397. },
  398. fail: function(res) {
  399. //console.log(res.errMsg);
  400. }
  401. });
  402. },
  403. lastchat() {
  404. var userid = parseInt(uni.getStorageSync('access_token'));
  405. var postdata = {
  406. userid: userid,
  407. reading_id: this.reading_id
  408. };
  409. var msg_list_key = userid + '_chat_msglist';
  410. var temp1 = [];
  411. var temp2 = [];
  412. http.setWait(false).get('group.php?act=lastchat', postdata).then(res => {
  413. var data = res.data;
  414. var msglist = [];
  415. for (var i = 0; i < data.length; i++) {
  416. var item = data[i];
  417. // console.log(item)
  418. // console.log(item.cache_key,item.unread,this.timestamp(item.readtime))
  419. var result = {};
  420. result['key'] = userid + '_chat_' + item['cache_key'];
  421. var msg = {};
  422. msg['id'] = item.group.id;
  423. msg['cache_key'] = item['cache_key'];
  424. msg['group_id'] = item.group.id;
  425. msg['nickname'] = item.group['nickname'];
  426. // msg['kefu']=item.group.kefu
  427. msg['avatar'] = item.group['avatar'];
  428. msg['isloading'] = 1;
  429. msg['istop'] = item.istop;
  430. msg['msg_id'] = item.id;
  431. msg['timestamp'] = item.addtime;
  432. if (parseInt(item.userid) == userid) msg['self'] = 1;
  433. else msg['self'] = 0;
  434. msg['none'] = false;
  435. msg['sender_id'] = item.userid;
  436. msg['message'] = {
  437. 'type': item.type,
  438. 'content': item.content
  439. };
  440. msg['unread'] = parseInt(item.unread);
  441. msg['readtime'] = item.readtime;
  442. if (item.groupid == 1) {
  443. msg['sender'] = {
  444. 'nickname': item.sender_name,
  445. id: item.reqtype
  446. }
  447. } else msg['sender'] = {
  448. 'nickname': item.sender_name
  449. };
  450. result['msg'] = msg;
  451. if (msg.istop) temp1.push(result)
  452. else temp2.push(result)
  453. }
  454. temp1.sort((a, b) => b.timestamp - a.timestamp);
  455. temp2.sort((a, b) => b.timestamp - a.timestamp);
  456. msglist = temp1.concat(temp2);
  457. this.update_msglist(msglist);
  458. var that = this;
  459. this.fresh_tip = '刷新成功'
  460. this.refreshstyle = 'none';
  461. setTimeout(function() {
  462. that.isfresh = false;
  463. }, 500)
  464. })
  465. },
  466. setrightmenu() {
  467. var action = [
  468. {
  469. title: '新建群',
  470. icon: 'plus'
  471. },
  472. {
  473. title: '我的创建',
  474. icon: 'personadd'
  475. },
  476. {
  477. title: '加入的群',
  478. icon: 'person'
  479. },
  480. // #ifdef APP-PLUS
  481. {
  482. title: '通知设置',
  483. icon: 'gear'
  484. },
  485. {
  486. title: '扫一扫',
  487. icon: 'scan'
  488. },
  489. // #endif
  490. ]
  491. this.menuitem = action;
  492. },
  493. fresh_msg() {
  494. var msglist = uni.getStorageSync(uni.getStorageSync('access_token') + '_chat_msglist');
  495. this.update_msglist(msglist);
  496. this.$action.setStatusTips();
  497. },
  498. },
  499. created() {
  500. uni.$on('toChat', message => {
  501. //console.log('index')
  502. this.$action.toChat(message);
  503. })
  504. },
  505. onShow() {
  506. this.unreadnum[0] = this.$action.setStatusTips()
  507. this.clickkey = false
  508. uni.setStorageSync('cache_key', '');
  509. uni.hideKeyboard();
  510. var userid = parseInt(uni.getStorageSync('access_token'));
  511. if (userid > 0) {
  512. this.lastchat();
  513. this.$action.setStatusTips();
  514. if (uni.getStorageSync('ispush') == true) {
  515. var message = uni.getStorageSync('pushmessage');
  516. this.$action.toChat(message);
  517. uni.setStorageSync('ispush', false)
  518. }
  519. } else {
  520. uni.setStorageSync('gourl', '/pages/index/index');
  521. this.$jump('login.index');
  522. }
  523. },
  524. onLoad() {
  525. var userid = parseInt(uni.getStorageSync('access_token'));
  526. if (userid > 0) {
  527. var that = this;
  528. this.$socket.on('chat', (res) => {
  529. setTimeout(function() {
  530. that.fresh_msg();
  531. }, 100)
  532. })
  533. that.setrightmenu();
  534. setTimeout(function() {
  535. api.getMyGroup({
  536. userid: userid
  537. }).then(res => {
  538. // console.log(res.data)
  539. uni.setStorageSync(userid + '_groups', res.data)
  540. })
  541. api.getMyFriend({
  542. userid: userid
  543. }).then(resss => {
  544. uni.setStorageSync(userid + '_frienddata', resss.data);
  545. })
  546. }, 3000)
  547. }
  548. // #ifdef APP-PLUS
  549. this.check_update()
  550. // #endif
  551. }
  552. }
  553. </script>
  554. <style lang="scss">
  555. .fresh {
  556. height: 30px;
  557. line-height: 30px;
  558. font-size: 14px;
  559. text-align: center;
  560. color: #666;
  561. }
  562. .btn_yellow {
  563. background-color: yellow;
  564. color: #000;
  565. font-size: 12px;
  566. display: inline-block;
  567. height: 18px;
  568. line-height: 18px;
  569. padding: 0px 5px;
  570. border-radius: 5px;
  571. text-align: center;
  572. margin: 0px 2px;
  573. }
  574. .btn_green {
  575. background-color: #0aad6c;
  576. color: #fff;
  577. font-size: 12px;
  578. display: inline-block;
  579. height: 18px;
  580. line-height: 18px;
  581. padding: 0px 5px;
  582. border-radius: 5px;
  583. text-align: center;
  584. margin: 0px 2px;
  585. }
  586. .btn_blue {
  587. background-color: $uni-color-primary;
  588. color: #fff;
  589. font-size: 12px;
  590. display: inline-block;
  591. height: 18px;
  592. line-height: 18px;
  593. padding: 0px 5px;
  594. border-radius: 5px;
  595. text-align: center;
  596. margin: 0px 2px;
  597. }
  598. .btn_grey {
  599. background-color: #ddd;
  600. color: #000;
  601. font-size: 12px;
  602. display: inline-block;
  603. height: 18px;
  604. line-height: 18px;
  605. padding: 0px 5px;
  606. border-radius: 5px;
  607. text-align: center;
  608. margin: 0px 2px;
  609. }
  610. .nodata {
  611. height: 35px;
  612. line-height: 35px;
  613. color: #666;
  614. font-size: 12px;
  615. text-align: center;
  616. }
  617. .item {
  618. height: 120upx;
  619. overflow: hidden;
  620. padding: 0px 30upx;
  621. display: flex;
  622. flex-direction: row;
  623. justify-content: flex-start;
  624. align-items: center;
  625. margin-top: 5px;
  626. }
  627. .item:hover {
  628. background-color: #eee;
  629. }
  630. .leftImg {
  631. width: 100upx;
  632. height: 100upx;
  633. margin-right: $uni-spacing-row-base;
  634. border-radius: $uni-border-radius-base;
  635. display: flex;
  636. flex-flow: wrap;
  637. justify-content: center;
  638. background-color: #eee;
  639. align-items: center;
  640. &:not(image) {
  641. padding: 1upx;
  642. }
  643. view,
  644. image {
  645. width: (76upx-2upx*4)/3;
  646. height: (76upx-2upx*4)/3;
  647. margin: 1upx;
  648. }
  649. }
  650. .rightContent {
  651. flex: 1;
  652. border-bottom: 1px solid #fbfbfb;
  653. }
  654. .rightContent,
  655. .topCont {
  656. overflow: hidden;
  657. line-height: 50upx;
  658. }
  659. .topCont {
  660. display: flex;
  661. flex-direction: row;
  662. justify-content: space-between;
  663. align-items: center;
  664. vertical-align: top;
  665. }
  666. .userName {
  667. color: $uni-text-color;
  668. font-size: 32upx;
  669. }
  670. .time {
  671. color: #999999;
  672. font-size: 24upx;
  673. }
  674. .bottomCont {
  675. width: 100%;
  676. font-size: 24upx;
  677. color: #999999;
  678. display: flex;
  679. align-items: center;
  680. justify-content: space-between;
  681. flex-direction: row;
  682. }
  683. .content {
  684. font-size: 28upx;
  685. white-space: nowrap;
  686. text-overflow: ellipsis;
  687. overflow: hidden;
  688. word-break: break-all;
  689. height: 30px;
  690. line-height: 30px;
  691. display: flex;
  692. flex-direction: row;
  693. max-width: 100%;
  694. }
  695. .content text {
  696. white-space: nowrap;
  697. text-overflow: ellipsis;
  698. overflow: hidden;
  699. word-break: break-all;
  700. max-width: 100%;
  701. }
  702. .badge {
  703. background-color: red;
  704. color: #fff;
  705. border-radius: 40upx;
  706. line-height: 40upx;
  707. width: 40upx;
  708. height: 40upx;
  709. font-size: 24upx;
  710. text-align: center;
  711. flex-shrink: 0;
  712. }
  713. </style>