You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

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