Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.
 
 
 

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