Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.

index.vue 33 KiB

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