AI销管
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

1692 lines
37 KiB

  1. <template>
  2. <view class="translation" @click="changeEditing(false)">
  3. <view style="width: 690rpx;height: 64rpx;margin: 0 auto;margin-top: 30rpx;background: #F2F2F2;border-radius: 32rpx;
  4. display: flex;align-items: center;" @tap="toKeywordsearch()">
  5. <image style="width: 28rpx;height: 28rpx;margin-left: 30rpx;" src="/static/images/search.png" mode="">
  6. </image>
  7. <text style="margin-left: 10rpx;color: #999999;font-size: 24rpx;">请输入关键字</text>
  8. </view>
  9. <view class="top" style="margin-top: 30rpx;">
  10. <view class="title">
  11. <view class="call_record_time">{{date}}</view>
  12. <view class="hash" @click="gotoChat" v-if="commentList.length != 0">
  13. 查看全部评论
  14. </view>
  15. </view>
  16. <view class="call_record_time_one">接待时长 {{alltimeStr}}
  17. <u-icon name="list-dot" color="#333" size="48" @click="showFile"></u-icon>
  18. <view class="file-change" v-if="isshowFile">
  19. <view class="file-item" @click="filechange(item,index)"
  20. :class="csdFileindex == index ? 'fileactive' : ''" v-for="(item,index) in luyinList"
  21. :key="index">录音文件{{index+1}}</view>
  22. </view>
  23. </view>
  24. <view class="audio-container">
  25. <view class="audio-play" @tap="changePlayState">
  26. <image class="image" mode="widthFix"
  27. :src="audioPlay ? 'https://qufang.oss-cn-beijing.aliyuncs.com/upload/icon/xcx/jjycrm/pause.png' : 'https://qufang.oss-cn-beijing.aliyuncs.com/upload/icon/xcx/jjycrm/play.png'">
  28. </image>
  29. </view>
  30. <view class="audio-slider">
  31. <view class="audio-time">
  32. <text>{{currentTimeStr}}</text>
  33. </view>
  34. <slider class="slider" min="0" :max="sliderMax" @change="sliderChangeComplate" block-size="14"
  35. :value="sliderValue" activeColor="blue"></slider>
  36. <view class="audio-time">
  37. <text>{{timeStr}}</text>
  38. </view>
  39. </view>
  40. </view>
  41. </view>
  42. <scroll-view :scroll-top="scrollTop" lower-threshold='20px' @scrolltolower="ltolower()"
  43. :scroll-into-view="scrollId" scroll-y="true" class="text scroll-Y">
  44. <!-- 音频识别模块 -->
  45. <view>
  46. <!-- 聊天记录-->
  47. <view class="dialog-block" v-for="(dialog,i) in dialogList" :key="i">
  48. <view :id="'dialog'+i" class="fileName">录音文件</view>
  49. <view class="text" :id="'dialog'+csdFileindex+'text'+index"
  50. :class="{active: item.bg < playNow && item.ed > playNow && i== 0}"
  51. v-for="(item,index) in dialog.message" :key="index" :data-speaker="item.speaker">
  52. <view class="avatar">
  53. <text v-if="item.speaker == 1" style="color: #60CBEC;">A</text>
  54. <text v-if="item.speaker == 2" style="color: #EC8B47;">B</text>
  55. <text v-if="item.speaker == 3" style="color: #4F861E;">C</text>
  56. <text v-if="item.speaker == 4" style="color: #9F61C8;">D</text>
  57. <text v-if="item.speaker == 5" style="color: #4980C8;">E</text>
  58. <text v-if="item.speaker == 6" style="color: #60CBEC;">F</text>
  59. <text v-if="item.speaker == 7" style="color: #EC8B47;">G</text>
  60. <text v-if="item.speaker == 8" style="color: #4F861E;">H</text>
  61. <text v-if="item.speaker == 9" style="color: #9F61C8;">I</text>
  62. </view>
  63. <view class="content">
  64. <view v-html="item.onebest"></view>
  65. </view>
  66. </view>
  67. </view>
  68. <!-- 点赞 -->
  69. <view class="likeArea" :class="{'liked':isLiked}">
  70. <image
  71. :src="isLiked?'/static/images/recordingManagement/likeActive.png':'/static/images/recordingManagement/like_gray.png'"
  72. mode=""></image>
  73. </view>
  74. <view class="hash" id="hash">
  75. </view>
  76. <!-- 评语列表 -->
  77. <view class="chat" v-if="commentList.length != 0">
  78. <view class="total">
  79. 全部评论(共{{commentList.length}}条)
  80. </view>
  81. <view class="list">
  82. <view class="message" v-for="(item,index) in commentList" :key="index">
  83. <u-avatar class="avator" size="72"
  84. :src="item.commentPic ||'https://qufang.oss-cn-beijing.aliyuncs.com/upload/icon/xcx/jjycrm/my/headPicture.png'">
  85. </u-avatar>
  86. <view class="right">
  87. <view class="name">
  88. {{item.commentName||"未知昵称"}}
  89. </view>
  90. <view class="subtitle" v-if="item.commentAutoGraph">
  91. {{item.commentAutoGraph}}
  92. </view>
  93. <view class="answer" v-if="item.replyName">
  94. 回复@{{item.replyName}}
  95. </view>
  96. <view class="content" v-if="item.content">
  97. {{item.content}}
  98. </view>
  99. <view class="pic" v-if="item.picUrl">
  100. <image style="width: 100%;max-width: 240px;" :src="item.picUrl" mode="widthFix">
  101. </image>
  102. </view>
  103. <view class="bottom">
  104. <view class="time">
  105. {{item.createTime}}
  106. </view>
  107. <view class="button" v-if="myId != item.commentUser"
  108. @click.stop="answer(item.commentUser,item.id)">
  109. 回复
  110. </view>
  111. </view>
  112. </view>
  113. </view>
  114. </view>
  115. </view>
  116. </view>
  117. </scroll-view>
  118. <!-- 写评价 -->
  119. <view class="bottomArea">
  120. <image class="voice" @click.stop="changeVoiceShow" src="/static/images/recordingManagement/voice.png"
  121. mode=""></image>
  122. <view class="inputArea">
  123. <textarea :value="content" :focus="textareaFocus" type="text" @input="changeContent" :auto-height="true"
  124. class="editor" :class="{'active':editing}" @click.stop="changeEditing(true)" @confirm="sendComment">
  125. </textarea>
  126. <view class="placeholder" :class="{'editing':editing}" v-if="!content && !editing">写评价</view>
  127. <image class="edit" v-if="!editing && content == ''" src="/static/images/recordingManagement/edit.png"
  128. mode=""></image>
  129. </view>
  130. <image class="like" v-if="myId != createUser && !editing" @click="changeLike"
  131. src="/static/images/recordingManagement/like.png" mode=""></image>
  132. <image class="add" @click.stop="uploadImage" v-if="!editing && content == ''"
  133. src="/static/images/recordingManagement/add.png" mode=""></image>
  134. <view class="send" @click="sendComment" v-if="content!=''">
  135. 发送
  136. </view>
  137. </view>
  138. <!-- 回到顶部 -->
  139. <!-- <view class="backTop" @click="gotoTop">
  140. <image src="/static/images/backTop.png" mode=""></image>
  141. </view> -->
  142. <!-- 语音输入 -->
  143. <cover-view class="voiceContent" v-if="voiceShow" @click="changeVoiceShow">
  144. <cover-view class="box" @click.stop="" @touchstart="voiceStart" @touchend="voiceEnd">
  145. <cover-view class="center">
  146. <cover-image class="voice" src="/static/images/voice.png" mode="widthFix"></cover-image>
  147. <cover-view class="text">
  148. {{isRecording?'正在输入':'长按语音输入'}}
  149. </cover-view>
  150. </cover-view>
  151. </cover-view>
  152. </cover-view>
  153. </view>
  154. </template>
  155. <script>
  156. var app = getApp();
  157. var util = require("../../../utils/util.js");
  158. var config = require("../../../config");
  159. var plugin = requirePlugin("WechatSI")
  160. let manager = plugin.getRecordRecognitionManager();
  161. export default {
  162. data() {
  163. return {
  164. dialogList: [], // 录音对话转移列表
  165. isshowFile: false, // 录音文件默认隐藏
  166. luyinList: [], //录音文件列表
  167. id: "",
  168. customerId: '',
  169. message: "", //聊天记录表
  170. durationTimeStr: "",
  171. autoLoad: true,
  172. playNow: 0,
  173. scrollTop: 0,
  174. scrollId: "",
  175. editing: false,
  176. isLiked: null,
  177. createUser: null,
  178. commentList: [], //评论列表
  179. content: "",
  180. voiceShow: false,
  181. isRecording: false,
  182. answerUserId: null,
  183. answerId: null,
  184. textareaFocus: false,
  185. myId: uni.getStorageSync("weapp_session_userInfo_data").accountId,
  186. audioPlay: false, //当前的播放状态控制
  187. sliderValue: 0, //进度条最小值
  188. end: false,
  189. sliderMax: 0, //进度条最大值
  190. innerAudioContext: "", //播放实例
  191. currentTimeStr: "00:00", //当前进度的时间
  192. timeStr: "00:00", //总的时间
  193. recordPath: "",
  194. csdFileindex: 0,
  195. date: "", //年月日
  196. alltimeStr: "00:00",
  197. num: 0, //上拉 转写文件下标
  198. Bnum: 0, //下拉 转写文件下标
  199. status: 0,
  200. timer: null
  201. };
  202. },
  203. onLoad: function(options) {
  204. this.customerId = options.customerId,
  205. this.getdianzan()
  206. this.getCommentList();
  207. // 当进入页面时调一次接口添加浏览量
  208. this.getView()
  209. let that = this
  210. this.timer = setTimeout(function() {
  211. that.addHot()
  212. }, 30000)
  213. },
  214. onShow() {
  215. this.initRecord();
  216. let pages = getCurrentPages();
  217. let currPage = pages[pages.length - 1]; //当前页面
  218. let info = currPage.data.info
  219. this.innerAudioContext = uni.createInnerAudioContext();
  220. this.innerAudioContext.autoplay = false;
  221. this.innerAudioContext.title = '音频';
  222. this.onPlay()
  223. this.onPause()
  224. this.onCanplay()
  225. this.onEnded()
  226. this.onSeeking()
  227. this.onSeeked()
  228. this.TimeUpdate()
  229. this.getluyinList(info);
  230. },
  231. // 在组件实例被从页面节点树移除时执行
  232. destroyed: function() {
  233. clearTimeout(this.timer)
  234. //暂停
  235. // this.innerAudioContext.pause()
  236. // 销毁
  237. this.innerAudioContext.destroy();
  238. },
  239. // 销毁实例
  240. onUnload: function() {
  241. //暂停
  242. // this.innerAudioContext.pause()
  243. // 销毁
  244. this.innerAudioContext.destroy();
  245. },
  246. methods: {
  247. toKeywordsearch() {
  248. this.innerAudioContext.destroy();
  249. uni.navigateTo({
  250. url: '/pages/learning/Keywordsearch?customerId=' + this.customerId + "&status=" + this.status
  251. })
  252. },
  253. getView() {
  254. this.$u.get('/addtodigest/addPageviews', {
  255. id: this.customerId
  256. })
  257. .then(res => {
  258. // console.log(res)
  259. })
  260. },
  261. addHot() {
  262. // console.log('30')
  263. this.$u.post('/zkstudyrecord', {
  264. targetId: this.customerId
  265. })
  266. .then(res => {
  267. // console.log(res)
  268. })
  269. },
  270. onPlay() {
  271. this.innerAudioContext.onPlay(() => {
  272. // 播放监听
  273. console.log('播放!');
  274. this.audioPlay = true;
  275. });
  276. },
  277. onPause() {
  278. this.innerAudioContext.onPause(() => {
  279. // 暂停监听
  280. console.log('暂停播放!');
  281. this.audioPlay = false
  282. });
  283. },
  284. onCanplay() {
  285. this.innerAudioContext.onCanplay((callback) => {
  286. console.log("缓冲回调", this.innerAudioContext.duration);
  287. })
  288. },
  289. onEnded() {
  290. this.innerAudioContext.onEnded(() => {
  291. // 结束播放监听
  292. console.log('播放结束!');
  293. this.audioPlay = false;
  294. this.qeihuanwenjian()
  295. });
  296. },
  297. onSeeking() {
  298. this.innerAudioContext.onSeeking((res) => {
  299. console.log("进行跳转", res);
  300. })
  301. },
  302. onSeeked() {
  303. this.innerAudioContext.onSeeked((res) => {
  304. console.log("结束跳转", res);
  305. this.$forceUpdate()
  306. });
  307. },
  308. TimeUpdate() {
  309. this.innerAudioContext.onTimeUpdate(() => {
  310. const {
  311. currentTime,
  312. duration
  313. } = this.innerAudioContext;
  314. this.playNow = parseInt(currentTime * 1000)
  315. if (this.dialogList.length == 0) {
  316. } else {
  317. const message = this.dialogList[0].message
  318. for (let i = 0; i < message.length; i++) {
  319. if (Number(message[i].bg) < this.playNow && Number(message[i].ed) > this.playNow) {
  320. this.scrollId = "dialog" + this.csdFileindex + "text" + i;
  321. break;
  322. }
  323. }
  324. }
  325. const currTimeStr = this.formatTime(currentTime);
  326. this.sliderValue = parseInt(currentTime);
  327. // 变动的时间
  328. this.currentTimeStr = currTimeStr;
  329. //进度条最大值
  330. this.sliderMax = this.luyinList[this.csdFileindex].recordDuration;
  331. this.$forceUpdate()
  332. });
  333. },
  334. //下一页
  335. ltolower() {
  336. var lengthcz = this.luyinList.length - 1;
  337. if (this.num >= lengthcz) {
  338. uni.showToast({
  339. title: '到底了',
  340. duration: 2000
  341. });
  342. return
  343. } else {
  344. this.num = this.num + 1;
  345. uni.showLoading({
  346. title: '加载中'
  347. });
  348. setTimeout(function() {
  349. uni.hideLoading();
  350. }, 2000);
  351. uni.request({
  352. url: config.service.getCorpusAnalysis + '?corpusId=' + this.luyinList[this.num].id +
  353. "&customerId=" + this.customerId, //仅为示例,并非真实接口地址。
  354. method: "GET",
  355. header: {
  356. 'content-type': 'application/json',
  357. 'Authorization': 'Bearer ' + uni.getStorageSync('weapp_session_login_data').token
  358. },
  359. success: (data) => {
  360. if (data.data.code == 10000) {
  361. if (data.data.data.audioContent.length == 0) {
  362. setTimeout(function() {
  363. uni.hideLoading();
  364. }, 2000);
  365. } else {
  366. const jsonInfo = JSON.parse(data.data.data.audioContent);
  367. this.dialogList.push({
  368. message: jsonInfo
  369. });
  370. this.dialogList.forEach((asd, idx) => {
  371. asd.message.forEach((qwe, inde) => {
  372. qwe.isshow = false;
  373. })
  374. })
  375. }
  376. }
  377. },
  378. })
  379. }
  380. },
  381. //上一页
  382. rolltoupper() {
  383. if (this.csdFileindex == 0) {
  384. uni.showToast({
  385. title: '到头了',
  386. duration: 2000
  387. });
  388. return
  389. } else if (this.Bnum == 0) {
  390. uni.showToast({
  391. title: '到头了',
  392. duration: 2000
  393. });
  394. return
  395. } else {
  396. this.Bnum = this.Bnum - 1;
  397. uni.showLoading({
  398. title: '加载中'
  399. });
  400. setTimeout(function() {
  401. uni.hideLoading();
  402. }, 2000);
  403. uni.request({
  404. url: config.service.getCorpusAnalysis + '?corpusId=' + this.luyinList[this.Bnum].id +
  405. "&customerId=" + this.customerId, //仅为示例,并非真实接口地址。
  406. method: "GET",
  407. header: {
  408. 'content-type': 'application/json',
  409. 'Authorization': 'Bearer ' + uni.getStorageSync('weapp_session_login_data').token
  410. },
  411. success: (data) => {
  412. if (data.data.code == 10000) {
  413. if (data.data.data.audioContent.length == 0) {
  414. setTimeout(function() {
  415. uni.hideLoading();
  416. }, 2000);
  417. } else {
  418. const jsonInfo = JSON.parse(data.data.data.audioContent);
  419. this.dialogList.unshift({
  420. message: jsonInfo
  421. });
  422. this.dialogList.forEach((asd, idx) => {
  423. asd.message.forEach((qwe, inde) => {
  424. qwe.isshow = false;
  425. })
  426. })
  427. }
  428. }
  429. },
  430. })
  431. }
  432. },
  433. //获取点赞列表isLiked likegetLike
  434. getdianzan() {
  435. uni.request({
  436. url: config.service.likegetLike + '?targetId=' + this.customerId, //仅为示例,并非真实接口地址。
  437. method: "GET",
  438. header: {
  439. 'content-type': 'application/json',
  440. 'Authorization': 'Bearer ' + uni.getStorageSync('weapp_session_login_data').token
  441. },
  442. success: (data) => {
  443. if (data.data.code == 10000) {
  444. this.isLiked = data.data.data.like;
  445. } else {
  446. uni.hideLoading();
  447. uni.showModal({
  448. title: '提示',
  449. content: '请求数据失败,请重新尝试',
  450. showCancel: false
  451. });
  452. }
  453. },
  454. fail(error) {
  455. uni.hideLoading();
  456. uni.showModal({
  457. title: '提示',
  458. content: '网络异常,请重新尝试',
  459. showCancel: false
  460. });
  461. return false;
  462. }
  463. });
  464. },
  465. // 获取评论列表
  466. getCommentList() {
  467. const that = this;
  468. util.getRequestPromise(config.service.cmmentList + '?targetId=' + this.customerId, {}, false, "GET").then(
  469. data => {
  470. let tmp = data;
  471. tmp.reverse();
  472. that.commentList = tmp;
  473. });
  474. },
  475. // 获取录音记录列表
  476. getluyinList(info) {
  477. this.sliderMax = 0; //进度条最大值
  478. this.timeStr = "00:00"; //总的时间
  479. const parames = {
  480. pageNum: 1,
  481. pageSize: 100,
  482. query: {
  483. customerId: this.customerId
  484. }
  485. }
  486. this.$u.post("/corpus/findByPage", parames).then(res => {
  487. if (res && res.length) {
  488. let alltime = 1;
  489. res.forEach(item => {
  490. alltime = item.recordDuration
  491. })
  492. this.alltimeStr = this.getTime(alltime)
  493. if (info) {
  494. res.forEach((item, index) => {
  495. if (item.id == info.id) {
  496. this.csdFileindex = index;
  497. this.recordPath = res[index].recordPath
  498. this.sliderMax = this.getTime(res[index].recordDuration)
  499. this.timeStr = this.getTime(res[index].recordDuration)
  500. this.date = res[index].receptionTime;
  501. this.isshowFile = false;
  502. this.getCorpusAnalysis(info);
  503. this.creatAudio()
  504. var itc = parseInt(info.bg / 1000)
  505. this.adasdasdasd(itc)
  506. }
  507. })
  508. } else {
  509. this.recordPath = res[0].recordPath
  510. this.sliderMax = this.getTime(res[0].recordDuration)
  511. this.timeStr = this.getTime(res[0].recordDuration)
  512. this.date = res[0].receptionTime
  513. this.innerAudioContext.src = this.recordPath;
  514. this.changePlayState()
  515. this.luyinList = res;
  516. this.getCorpusAnalysis()
  517. }
  518. }
  519. })
  520. },
  521. //搜索跳转
  522. adasdasdasd(e) {
  523. const currTimeStr = this.formatTime(e)
  524. this.currentTimeStr = currTimeStr
  525. this.innerAudioContext.seek(e);
  526. this.innerAudioContext.play();
  527. },
  528. // 获取转义后的对话结果
  529. getCorpusAnalysis(info) {
  530. this.dialogList = [];
  531. uni.showLoading({
  532. title: '加载中'
  533. });
  534. uni.request({
  535. url: config.service.getCorpusAnalysis + '?corpusId=' + this.luyinList[this.csdFileindex].id +
  536. "&customerId=" + this.customerId, //仅为示例,并非真实接口地址。
  537. method: "GET",
  538. header: {
  539. 'content-type': 'application/json',
  540. 'Authorization': 'Bearer ' + uni.getStorageSync('weapp_session_login_data').token
  541. },
  542. success: (data) => {
  543. if (data.data.code == 10000) {
  544. if (data.data.data.audioContent.length == 0) {
  545. setTimeout(function() {
  546. uni.hideLoading();
  547. }, 2000);
  548. } else {
  549. const jsonInfo = JSON.parse(data.data.data.audioContent);
  550. this.dialogList.push({
  551. message: jsonInfo
  552. });
  553. setTimeout(function() {
  554. uni.hideLoading();
  555. }, 2000);
  556. }
  557. } else {
  558. uni.hideLoading();
  559. uni.showModal({
  560. title: '提示',
  561. content: '请求数据失败,请重新尝试',
  562. showCancel: false
  563. });
  564. }
  565. },
  566. fail(error) {
  567. uni.hideLoading();
  568. uni.showModal({
  569. title: '提示',
  570. content: '网络异常,请重新尝试',
  571. showCancel: false
  572. });
  573. return false;
  574. }
  575. });
  576. },
  577. getTime(time) {
  578. return util.formatSecond(time)
  579. },
  580. // 文件切换播放
  581. filechange(item, i) {
  582. this.num = i; //下拉起始位置
  583. this.Bnum = i;
  584. this.innerAudioContext.destroy()
  585. this.csdFileindex = i;
  586. this.recordPath = item.recordPath;
  587. this.sliderMax = this.getTime(item.recordDuration);
  588. this.timeStr = this.getTime(item.recordDuration);
  589. this.date = item.receptionTime;
  590. this.isshowFile = false;
  591. this.creatAudio()
  592. this.getCorpusAnalysis()
  593. },
  594. //录音实例
  595. creatAudio() {
  596. this.innerAudioContext = uni.createInnerAudioContext();
  597. this.innerAudioContext.autoplay = true;
  598. this.innerAudioContext.src = this.recordPath;
  599. this.innerAudioContext.title = '音频';
  600. this.onPlay()
  601. this.onPause()
  602. this.onCanplay()
  603. this.onEnded()
  604. this.onSeeking()
  605. this.onSeeked()
  606. this.TimeUpdate()
  607. },
  608. // 自动播放下一个文件
  609. qeihuanwenjian() {
  610. let index = this.csdFileindex + 1;
  611. if (index < this.luyinList.length) {
  612. this.csdFileindex = index;
  613. this.getCorpusAnalysis()
  614. let item = this.luyinList[this.csdFileindex];
  615. let i = this.csdFileindex;
  616. this.filechange(item, i)
  617. }
  618. },
  619. // 录音暂停播放
  620. changePlayState() {
  621. if (this.audioPlay == false) {
  622. this.innerAudioContext.play();
  623. } else {
  624. this.innerAudioContext.pause()
  625. }
  626. },
  627. sliderChange() {
  628. },
  629. //音频前进回退
  630. sliderChangeComplate(e) {
  631. const currTimeStr = this.formatTime(e.detail.value)
  632. this.currentTimeStr = currTimeStr
  633. this.innerAudioContext.seek(e.detail.value);
  634. this.innerAudioContext.play();
  635. },
  636. formatTime(num) {
  637. //格式化时间格式
  638. num = num.toFixed(0);
  639. let second = num % 60;
  640. if (second < 10) second = '0' + second;
  641. let min = Math.floor(num / 60);
  642. if (min < 10) min = '0' + min;
  643. return min + ":" + second;
  644. },
  645. //录音文件切换隐藏
  646. showFile() {
  647. this.isshowFile = !this.isshowFile
  648. },
  649. changeVoiceShow() {
  650. this.voiceShow = !this.voiceShow;
  651. },
  652. voiceStart: function() {
  653. manager.start({
  654. lang: "zh_CN"
  655. });
  656. },
  657. voiceEnd: function() {
  658. // uni.showToast();
  659. if (this.isRecording) {
  660. uni.showLoading({
  661. title: "识别中"
  662. })
  663. }
  664. this.voiceShow = false;
  665. this.isRecording = false;
  666. manager.stop();
  667. },
  668. // 语音初始化
  669. initRecord() {
  670. const that = this;
  671. manager.onStart = function(res) {
  672. that.isRecording = true;
  673. // this.voiceState = "onStart:" + res.msg + "正在录音"
  674. };
  675. //有新的识别内容返回,则会调用此事件
  676. manager.onRecognize = (res) => {
  677. console.log('ing' + res.result);
  678. }
  679. // 识别结束事件
  680. manager.onStop = (res) => {
  681. uni.hideLoading();
  682. let newText = that.content + res.result;
  683. if (newText.length > 140) {
  684. newText = newText.substring(0, 140)
  685. }
  686. that.content = newText;
  687. that.textareaFocus = true;
  688. }
  689. // 识别错误事件
  690. manager.onError = (res) => {
  691. uni.hideLoading();
  692. }
  693. },
  694. changeContent(e) {
  695. this.content = e.detail.value;
  696. },
  697. answer(userId, tid) {
  698. this.answerId = tid;
  699. this.answerUserId = userId;
  700. this.editing = true;
  701. this.textareaFocus = true;
  702. },
  703. // 保存评论
  704. sendComment() {
  705. if (this.content == "") {
  706. uni.showToast({
  707. icon: "none",
  708. title: "请输入标题"
  709. })
  710. return;
  711. }
  712. let parames = {
  713. targetId: this.customerId,
  714. content: this.content,
  715. commentType: 1
  716. };
  717. if (this.answerUserId) {
  718. parames.replyCommentId = this.answerId;
  719. parames.replyUser = this.answerUserId;
  720. }
  721. const that = this;
  722. util.getRequestPromise(config.service.saveCmment, parames, false).then(data => {
  723. that.getCommentList();
  724. uni.showToast({
  725. title: "评论成功",
  726. icon: "none"
  727. })
  728. that.textareaFocus = false;
  729. that.content = "";
  730. });
  731. },
  732. uploadImage() {
  733. const that = this;
  734. var parames = {
  735. targetId: that.id,
  736. commentType: 1
  737. };
  738. if (this.answerUserId) {
  739. parames.replyCommentId = this.answerId;
  740. parames.replyUser = this.answerUserId;
  741. }
  742. uni.chooseImage({
  743. count: 1, //默认9
  744. sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
  745. sourceType: ['album', 'camera'],
  746. success: function(res) {
  747. uni.showLoading({
  748. title: "上传中"
  749. })
  750. uni.uploadFile({
  751. url: config.service.saveCmmentUpload,
  752. filePath: res.tempFilePaths[0],
  753. name: 'file',
  754. header: {
  755. 'Authorization': 'Bearer ' + uni.getStorageSync(
  756. 'weapp_session_login_data').token
  757. },
  758. formData: parames,
  759. success: (uploadFileRes) => {
  760. that.getCommentList();
  761. uni.hideLoading();
  762. uni.showToast({
  763. icon: "none",
  764. title: "上传成功"
  765. })
  766. console.log(uploadFileRes.data);
  767. }
  768. });
  769. }
  770. });
  771. },
  772. uploadAudio() {
  773. },
  774. changeLike() {
  775. uni.showLoading({
  776. title: "请求中",
  777. mask: true
  778. })
  779. if (this.isLiked) {
  780. this.cancelLike();
  781. } else {
  782. this.saveLike();
  783. }
  784. },
  785. // 点赞
  786. saveLike() {
  787. const that = this;
  788. util.getRequestPromise(config.service.saveLike, {
  789. targetId: this.customerId
  790. }, false).then(data => {
  791. that.isLiked = true;
  792. uni.hideLoading();
  793. uni.showToast({
  794. icon: "none",
  795. title: "点赞成功"
  796. })
  797. });
  798. },
  799. // 取消点赞
  800. cancelLike() {
  801. const that = this;
  802. util.getRequestPromise(config.service.cancelLike, {
  803. targetId: this.customerId
  804. }, false).then(data => {
  805. that.isLiked = false;
  806. uni.hideLoading();
  807. uni.showToast({
  808. icon: "none",
  809. title: "取消点赞成功"
  810. })
  811. });
  812. },
  813. gotoChat() {
  814. this.scrollId = null;
  815. this.$nextTick(() => {
  816. this.scrollId = "hash";
  817. })
  818. },
  819. gotoTop() {
  820. this.scrollId = null;
  821. this.$nextTick(() => {
  822. this.scrollId = "top";
  823. })
  824. },
  825. changeEditing(type) {
  826. this.editing = type;
  827. this.answerId = null;
  828. this.answerUserId = null;
  829. this.textareaFocus = false;
  830. this.dialogList.forEach(res => {
  831. res.message.forEach(asd => {
  832. asd.isshow = false;
  833. })
  834. })
  835. }
  836. }
  837. };
  838. </script>
  839. <style lang="scss" scoped>
  840. .biaoqiantom {
  841. background-color: #008EF2;
  842. color: #FFFFFF;
  843. border: none;
  844. }
  845. // 表单
  846. .tian-view {
  847. width: 570upx;
  848. background-color: #FFFFFF;
  849. border-bottom: 1px solid #ededee;
  850. display: flex;
  851. min-height: 96rpx;
  852. .tian-view-t1 {
  853. width: 20rpx;
  854. font-size: 34rpx;
  855. height: 34rpx;
  856. line-height: 110rpx;
  857. letter-spacing: 0px;
  858. color: red;
  859. }
  860. .tian-view-t2 {
  861. width: 30%;
  862. min-height: 96rpx;
  863. line-height: 96rpx;
  864. font-size: 34rpx;
  865. color: #333;
  866. }
  867. .tian-view-t3 {
  868. width: 61%;
  869. padding-top: 31rpx;
  870. padding-bottom: 31rpx;
  871. display: flex;
  872. .tian-input {
  873. width: 98%;
  874. font-size: 34rpx;
  875. border: none;
  876. }
  877. }
  878. }
  879. .zhezhoa {
  880. position: fixed;
  881. top: 0;
  882. left: 0;
  883. z-index: 999;
  884. width: 100%;
  885. height: 100vh;
  886. opacity: 0.5;
  887. background-color: #666666;
  888. }
  889. .bounced {
  890. width: 570upx;
  891. background: #FFFFFF;
  892. z-index: 1000;
  893. border-radius: 10upx;
  894. position: fixed;
  895. left: 50%;
  896. top: 50%;
  897. transform: translate(-50%, -50%);
  898. /* 50%为自身尺寸的一半 */
  899. .jiajinghuatit {
  900. width: 100%;
  901. height: 68rpx;
  902. font-size: 30rpx;
  903. text-align: center;
  904. line-height: 68rpx;
  905. }
  906. .jiajinghuaview {
  907. padding: 18rpx 18rpx 18rpx 18rpx;
  908. display: flex;
  909. flex-wrap: wrap;
  910. .jiajinghuaview1 {
  911. padding: 8rpx 8rpx 8rpx 8rpx;
  912. font-size: 26rpx;
  913. border-radius: 12rpx;
  914. border: 1px solid #979797;
  915. margin-left: 8rpx;
  916. }
  917. .jighuaview2 {
  918. padding: 8rpx 8rpx 8rpx 8rpx;
  919. font-size: 26rpx;
  920. border-radius: 12rpx;
  921. border: 1px solid #979797;
  922. margin-left: 8rpx;
  923. display: flex;
  924. .view1-text {
  925. text-align: center;
  926. // border-right: 1rpx solid red;
  927. }
  928. .view1-img {
  929. width: 50rpx;
  930. }
  931. }
  932. }
  933. .bounced3 {
  934. height: 100upx;
  935. width: 100%;
  936. margin-top: 40upx;
  937. border-top: 1px solid #dddddd;
  938. display: flex;
  939. }
  940. .bounced3-1 {
  941. width: 50%;
  942. height: 100%;
  943. text-align: center;
  944. line-height: 100upx;
  945. border-right: 1px solid #dddddd;
  946. font-size: 36upx;
  947. color: #999999;
  948. }
  949. .bounced3-2 {
  950. width: 50%;
  951. height: 100%;
  952. text-align: center;
  953. line-height: 100upx;
  954. font-size: 36upx;
  955. color: #108ee9;
  956. }
  957. }
  958. .bosdttom {
  959. color: #008EF2;
  960. }
  961. .tab-box {
  962. width: 100%;
  963. display: flex;
  964. justify-content: center;
  965. align-items: center;
  966. .yinpinshibie {
  967. width: 156rpx;
  968. height: 50rpx;
  969. font-size: 36rpx;
  970. font-weight: 400;
  971. color: #333333;
  972. text-align: center;
  973. line-height: 50rpx;
  974. letter-spacing: 2rpx;
  975. margin-right: 188rpx;
  976. &.active {
  977. position: relative;
  978. &::after {
  979. position: absolute;
  980. content: '';
  981. width: 119rpx;
  982. height: 8rpx;
  983. background: #008EF2;
  984. border-radius: 4rpx;
  985. top: 50rpx;
  986. right: 0;
  987. left: 0;
  988. margin: 0 auto;
  989. }
  990. }
  991. }
  992. .rate {
  993. width: 156rpx;
  994. height: 50rpx;
  995. font-size: 36rpx;
  996. font-weight: 400;
  997. color: #333333;
  998. line-height: 50rpx;
  999. letter-spacing: 2rpx;
  1000. text-align: center;
  1001. &.active {
  1002. position: relative;
  1003. &::after {
  1004. position: absolute;
  1005. content: '';
  1006. width: 119rpx;
  1007. height: 8rpx;
  1008. background: #008EF2;
  1009. border-radius: 4rpx;
  1010. top: 50rpx;
  1011. right: 0;
  1012. left: 0;
  1013. margin: 0 auto;
  1014. }
  1015. }
  1016. }
  1017. }
  1018. .dialog-block {
  1019. margin: 20rpx 0;
  1020. border-bottom: 1px solid #ccc;
  1021. .fileName {
  1022. text-align: center;
  1023. margin: 10rpx auto;
  1024. width: 115rpx;
  1025. height: 42rpx;
  1026. line-height: 42rpx;
  1027. background: #EFEFEF;
  1028. border-radius: 4rpx;
  1029. font-size: 20rpx;
  1030. font-weight: 400;
  1031. color: #333333;
  1032. }
  1033. }
  1034. // 评分
  1035. .rate-box {
  1036. padding: 10rpx 20rpx;
  1037. .date {
  1038. width: 300rpx;
  1039. height: 33rpx;
  1040. font-size: 24rpx;
  1041. font-weight: 400;
  1042. color: #333333;
  1043. line-height: 33rpx;
  1044. letter-spacing: 1rpx;
  1045. margin-bottom: 8rpx;
  1046. }
  1047. .title {
  1048. width: 100%;
  1049. height: 42rpx;
  1050. font-size: 30rpx;
  1051. font-weight: 500;
  1052. color: #333333;
  1053. line-height: 42rpx;
  1054. letter-spacing: 2rpx;
  1055. margin-bottom: 20rpx;
  1056. }
  1057. .level1 {
  1058. display: flex;
  1059. align-items: center;
  1060. .level-name {
  1061. width: 104rpx;
  1062. height: 33rpx;
  1063. font-size: 24rpx;
  1064. font-weight: 500;
  1065. color: #333333;
  1066. line-height: 33rpx;
  1067. letter-spacing: 1rpx;
  1068. margin-right: 10rpx;
  1069. }
  1070. .level-progress {
  1071. flex: 1;
  1072. border-radius: 11rpx;
  1073. height: 21rpx;
  1074. background-color: #BEE4FF;
  1075. position: relative;
  1076. .color {
  1077. width: 0;
  1078. position: absolute;
  1079. top: 0;
  1080. left: 0;
  1081. height: 21rpx;
  1082. border-radius: 11rpx 0 0 11rpx;
  1083. background-color: #008EF2;
  1084. }
  1085. }
  1086. .level-rate {
  1087. width: 65rpx;
  1088. height: 33rpx;
  1089. font-size: 24rpx;
  1090. font-weight: 500;
  1091. color: #333333;
  1092. line-height: 33rpx;
  1093. letter-spacing: 1rpx;
  1094. margin: 0 20rpx 0 15rpx;
  1095. }
  1096. .arrow {
  1097. width: 37rpx;
  1098. height: 21rpx;
  1099. padding: 5rpx 20rpx;
  1100. }
  1101. .rotatearrow {
  1102. transform: rotate(270deg);
  1103. }
  1104. }
  1105. .level1-subbox {
  1106. display: flex;
  1107. margin-top: 20rpx;
  1108. flex-wrap: wrap;
  1109. .sub-name {
  1110. width: 50%;
  1111. display: flex;
  1112. margin-bottom: 18rpx;
  1113. .subitem-name {
  1114. width: 104rpx;
  1115. height: 33rpx;
  1116. font-size: 24rpx;
  1117. font-weight: 400;
  1118. color: #999999;
  1119. line-height: 33rpx;
  1120. letter-spacing: 1rpx;
  1121. margin-right: 12rpx;
  1122. }
  1123. .checkimg {
  1124. width: 27rpx;
  1125. height: 27rpx;
  1126. }
  1127. }
  1128. }
  1129. }
  1130. .luyin {
  1131. height: 100rpx;
  1132. width: 100%;
  1133. }
  1134. .translation {
  1135. padding-left: 30rpx;
  1136. padding-right: 30rpx;
  1137. background: #FFFFFF;
  1138. display: flex;
  1139. flex-direction: column;
  1140. height: 100vh;
  1141. }
  1142. .translation .top {
  1143. margin: 0 -30upx;
  1144. padding: 0 30upx;
  1145. background: #ffffff;
  1146. border-bottom: 1rpx solid #F2F2F2;
  1147. padding-bottom: 10rpx;
  1148. }
  1149. .translation .top .title {
  1150. display: flex;
  1151. justify-content: space-between;
  1152. .hash {
  1153. color: rgba(21, 144, 233, 1);
  1154. font-size: 24upx;
  1155. }
  1156. }
  1157. .call_record_time {
  1158. height: 44rpx;
  1159. font-size: 28rpx;
  1160. font-weight: 600;
  1161. color: #008EF2;
  1162. line-height: 44rpx;
  1163. }
  1164. .call_record_time_one {
  1165. height: 48rpx;
  1166. font-size: 24rpx;
  1167. font-weight: 500;
  1168. color: #70798d;
  1169. line-height: 48rpx;
  1170. display: flex;
  1171. justify-content: space-between;
  1172. position: relative;
  1173. .diangweitupian {
  1174. width: 46rpx;
  1175. height: 46rpx;
  1176. // border: 1px solid red;
  1177. position: absolute;
  1178. top: 0rpx;
  1179. right: 75rpx;
  1180. }
  1181. .file-change {
  1182. position: absolute;
  1183. top: 50rpx;
  1184. right: 0rpx;
  1185. width: 184rpx;
  1186. background: #FFFFFF;
  1187. box-shadow: 0rpx 0rpx 6rpx 2rpx rgba(230, 230, 230, 0.5);
  1188. border-radius: 4rpx;
  1189. z-index: 99;
  1190. height: auto;
  1191. max-height: 600rpx;
  1192. overflow: auto;
  1193. }
  1194. .file-item {
  1195. width: 184rpx;
  1196. height: 60rpx;
  1197. line-height: 60rpx;
  1198. text-align: center;
  1199. font-size: 30rpx;
  1200. font-weight: 400;
  1201. color: #333333;
  1202. border-bottom: 1rpx solid #E2E2E2;
  1203. }
  1204. .file-item:last-child {
  1205. border: 0
  1206. }
  1207. .fileactive {
  1208. color: #008EF2
  1209. }
  1210. }
  1211. .scroll-Y {
  1212. font-size: 36upx;
  1213. color: #999999;
  1214. background: #FFFFFF;
  1215. margin-top: 30upx;
  1216. flex: 1;
  1217. overflow-y: scroll;
  1218. width: 100%;
  1219. }
  1220. .scroll-Y .text {
  1221. margin: 50upx 30upx;
  1222. line-height: 80upx;
  1223. display: flex;
  1224. align-items: center;
  1225. }
  1226. .scroll-Y .text[data-speaker="2"],
  1227. .scroll-Y .text[data-speaker="4"],
  1228. .scroll-Y .text[data-speaker="6"] {
  1229. flex-direction: row-reverse;
  1230. text-align: right;
  1231. .content {
  1232. margin-left: 0;
  1233. margin-right: 30upx;
  1234. background: #F6F6F6;
  1235. color: #999999;
  1236. }
  1237. }
  1238. .scroll-Y .text .avatar {
  1239. width: 64upx;
  1240. height: 64upx;
  1241. line-height: 64upx;
  1242. text-align: center;
  1243. // border: 1rpx solid red;
  1244. font-size: 36rpx;
  1245. border-radius: 50%;
  1246. background: #F2F2F2;
  1247. color: #008EF2;
  1248. // display: flex;
  1249. // justify-content: center;
  1250. // align-items: center;
  1251. // image {
  1252. // width: 40upx;
  1253. // }
  1254. }
  1255. .scroll-Y .text .content {
  1256. margin-left: 30upx;
  1257. line-height: 60rpx;
  1258. text-align: left;
  1259. padding: 0 5px;
  1260. background: #2BC805;
  1261. border-radius: 8upx;
  1262. max-width: 442rpx;
  1263. color: #FFFFFF;
  1264. position: relative;
  1265. .tankuangcss {
  1266. position: absolute;
  1267. top: -53rpx;
  1268. left: -80rpx;
  1269. width: 318rpx;
  1270. height: 68rpx;
  1271. background-color: #333333;
  1272. font-size: 24rpx;
  1273. color: #FFFFFF;
  1274. padding-top: 4rpx;
  1275. padding-bottom: 4rpx;
  1276. display: flex;
  1277. align-items: center;
  1278. border-radius: 15rpx;
  1279. }
  1280. }
  1281. .scroll-Y .text.active .content {
  1282. color: #FF7538 !important;
  1283. position: relative;
  1284. }
  1285. .scroll-Y .text.active[data-speaker="2"] .content,
  1286. .scroll-Y .text.active[data-speaker="4"] .content,
  1287. .scroll-Y .text.active[data-speaker="6"] .content {
  1288. color: #FF7538 !important;
  1289. position: relative;
  1290. }
  1291. .likeArea {
  1292. width: 86upx;
  1293. height: 84upx;
  1294. margin: 20upx auto 38upx auto;
  1295. border-radius: 50%;
  1296. display: flex;
  1297. justify-content: center;
  1298. align-items: center;
  1299. border: 1upx solid #C1C2C1;
  1300. &.liked {
  1301. border: 1upx solid rgba(21, 144, 233, 1);
  1302. }
  1303. image {
  1304. width: 38upx;
  1305. height: 39upx;
  1306. }
  1307. }
  1308. .chat {
  1309. display: flex;
  1310. flex-direction: column;
  1311. border-top: 1upx solid rgba(151, 151, 151, 0.4);
  1312. padding-top: 20upx;
  1313. .total {
  1314. color: rgba(21, 144, 233, 1);
  1315. font-size: 24upx;
  1316. }
  1317. .list {
  1318. display: flex;
  1319. flex-direction: column;
  1320. .message {
  1321. display: flex;
  1322. margin-top: 20upx;
  1323. border-bottom: 1upx solid rgba(151, 151, 151, 0.4);
  1324. padding-bottom: 20upx;
  1325. &:last-child {
  1326. border-bottom: 0;
  1327. }
  1328. .avator {
  1329. margin-left: 120upx;
  1330. }
  1331. &:first-child {
  1332. .avator {
  1333. margin-left: 0;
  1334. }
  1335. }
  1336. .right {
  1337. display: flex;
  1338. flex-direction: column;
  1339. margin-left: 20upx;
  1340. flex: 1;
  1341. .name {
  1342. color: rgba(16, 16, 16, 1);
  1343. font-size: 30upx;
  1344. }
  1345. .subtitle {
  1346. color: rgba(120, 120, 120, 1);
  1347. font-size: 24upx;
  1348. margin-top: 16upx;
  1349. }
  1350. .answer {
  1351. font-size: 24upx;
  1352. color: #787878;
  1353. }
  1354. .content {
  1355. color: rgba(49, 48, 48, 1);
  1356. font-size: 30upx;
  1357. margin-top: 20upx;
  1358. position: relative;
  1359. }
  1360. .bottom {
  1361. margin-top: 16upx;
  1362. display: flex;
  1363. justify-content: space-between;
  1364. .time {
  1365. color: rgba(185, 185, 185, 1);
  1366. font-size: 20upx;
  1367. }
  1368. .button {
  1369. color: rgba(144, 144, 144, 1);
  1370. font-size: 30upx;
  1371. width: 111upx;
  1372. height: 44upx;
  1373. border-radius: 22upx;
  1374. border: 1upx solid rgba(151, 151, 151, 1);
  1375. text-align: center;
  1376. }
  1377. }
  1378. }
  1379. }
  1380. }
  1381. }
  1382. .bottomArea {
  1383. min-height: 90upx;
  1384. background: #F0F2F5;
  1385. width: 100vw;
  1386. margin: 0 -30rpx;
  1387. display: flex;
  1388. align-items: center;
  1389. border-top: 1upx solid rgba(151, 151, 151, 0.25);
  1390. .voice {
  1391. width: 44upx;
  1392. height: 44upx;
  1393. margin-left: 38upx;
  1394. }
  1395. .inputArea {
  1396. margin-left: 38upx;
  1397. margin-right: 38upx;
  1398. flex: 1;
  1399. display: flex;
  1400. position: relative;
  1401. .edit {
  1402. width: 30upx;
  1403. height: 28upx;
  1404. position: absolute;
  1405. top: 31upx;
  1406. left: 27upx;
  1407. }
  1408. .editor {
  1409. background: rgba(0, 139, 245, 0.17);
  1410. border-radius: 29upx;
  1411. flex: 1;
  1412. min-height: 58upx;
  1413. width: unset;
  1414. padding: 0 32upx;
  1415. font-size: 30upx;
  1416. margin: 16rpx 0;
  1417. line-height: 29px;
  1418. }
  1419. .placeholder {
  1420. position: absolute;
  1421. left: 70rpx;
  1422. top: 26rpx;
  1423. color: #26A2FF;
  1424. &.editing {
  1425. left: 36rpx;
  1426. }
  1427. }
  1428. }
  1429. .download {
  1430. width: 41upx;
  1431. height: 35upx;
  1432. margin-right: 36upx;
  1433. }
  1434. .like {
  1435. width: 38upx;
  1436. height: 39upx;
  1437. margin-right: 38upx;
  1438. }
  1439. .add {
  1440. width: 50upx;
  1441. height: 50upx;
  1442. margin-right: 38upx;
  1443. }
  1444. .send {
  1445. background: #1590e9;
  1446. color: white;
  1447. padding: 10rpx 20rpx;
  1448. margin: 5px;
  1449. border-radius: 8rpx;
  1450. }
  1451. }
  1452. .backTop {
  1453. width: 60upx;
  1454. height: 60upx;
  1455. background: rgba(211, 235, 253, 1);
  1456. box-shadow: 0upx 0upx 2upx 4upx rgba(38, 161, 255, 0.04);
  1457. border-radius: 50%;
  1458. position: fixed;
  1459. bottom: 200upx;
  1460. right: 8upx;
  1461. display: flex;
  1462. justify-content: center;
  1463. align-items: center;
  1464. image {
  1465. width: 26upx;
  1466. height: 34upx;
  1467. }
  1468. }
  1469. .voiceContent {
  1470. position: fixed;
  1471. top: 0;
  1472. bottom: 0;
  1473. left: 0;
  1474. right: 0;
  1475. width: 100vw;
  1476. height: 100vh;
  1477. display: flex;
  1478. justify-content: center;
  1479. align-items: center;
  1480. background: rgba(30, 30, 30, 0.4592);
  1481. z-index: 10001;
  1482. }
  1483. .box {
  1484. background: rgba(21, 144, 233, 0.299);
  1485. width: 524upx;
  1486. height: 524upx;
  1487. border-radius: 50%;
  1488. display: flex;
  1489. align-items: center;
  1490. justify-content: center;
  1491. .center {
  1492. width: 412upx;
  1493. height: 412upx;
  1494. background: #1590E9;
  1495. border-radius: 50%;
  1496. display: flex;
  1497. align-items: center;
  1498. justify-content: center;
  1499. flex-direction: column;
  1500. .voice {
  1501. width: 110upx;
  1502. height: 133upx;
  1503. }
  1504. .text {
  1505. color: #FFFFFF;
  1506. font-size: 36upx;
  1507. margin-top: 24upx;
  1508. }
  1509. }
  1510. }
  1511. .audio-container {
  1512. width: 100%;
  1513. display: flex;
  1514. justify-content: space-between;
  1515. align-items: center;
  1516. .audio-head {
  1517. width: 60rpx;
  1518. height: 60rpx;
  1519. flex-shrink: 0;
  1520. }
  1521. .audio-head .image {
  1522. width: 100%;
  1523. height: 100%;
  1524. }
  1525. .audio-slider {
  1526. width: 96%;
  1527. position: relative;
  1528. padding: 2px 0rpx 0px 20px;
  1529. display: flex;
  1530. justify-content: space-between;
  1531. align-items: center;
  1532. }
  1533. .audio-slider .slider {
  1534. width: 100%;
  1535. padding: 0px 15rpx;
  1536. box-sizing: border-box;
  1537. }
  1538. .audio-time {
  1539. width: 110rpx;
  1540. text-align: right;
  1541. font-size: 24rpx;
  1542. line-height: 28rpx;
  1543. color: #70798D;
  1544. display: flex;
  1545. justify-content: space-between;
  1546. }
  1547. .audio-play {
  1548. width: 40rpx;
  1549. height: 40rpx;
  1550. flex-shrink: 0;
  1551. }
  1552. .audio-play .image {
  1553. width: 100%;
  1554. height: 100%;
  1555. }
  1556. }
  1557. </style>