AI销管
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.
 
 
 
 

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