Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
 
 
 

1593 Zeilen
36 KiB

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