No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.
 
 
 

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