<template>
<view class="answerdetail-page flex-column">
<template v-if="questionItem&&hasAuth">
<template>
<view class="question-wrap">
<view class="question-item">
<view class="question-info">
<view style="flex: 1" class="question-title">
<text class="item-label">{{
questionItem.variety_tag_name
}}</text>
{{ questionItem.question_content }}
</view>
<view class="item-answer" v-if="questionItem.reply_status === 3&&!isUserResearcher">
<view class="answer" @click.stop="handlePlayAudioByBg(questionItem)">
<!-- 改为背景音频播放 -->
<image class="music-img" :src="questionItem.community_question_id==curVoiceId&&!curAudioPaused?playImgSrc:pauseImgSrc" mode="widthFix"/>
<text>{{ formatAudioTime(questionItem.audio_list[0].audio_play_seconds*1000) }}</text>
<!-- <template v-if="!questionItem.loading">
<image
class="music-img"
:src="questionItem.answer.isplay ? playImgSrc : pauseImgSrc"
mode="widthFix"
/>
<template
v-if="
questionItem.answer.isplay || questionItem.answer.ispause
"
>
<text>{{
questionItem.answer.audioTime -
currentAudioMsg.audioCurrentTime >
0
? dayjs(
(questionItem.answer.audioTime -
currentAudioMsg.audioCurrentTime) *
1000
).format("mm:ss")
: "00:00"
}}</text>
</template>
<template v-else>
<text>{{
dayjs(questionItem.answer.audioTime * 1000).format(
"mm:ss"
)
}}</text>
</template>
</template>
<template v-else>
<image
class="load-img"
src="../static/loading.png"
mode="aspectFill"
/>
<text>{{
dayjs(questionItem.answer.audioTime).format("mm:ss")
}}</text>
</template> -->
</view>
<!-- 普通用户进入的音频悬浮 -->
<audioBox v-if="showAudioPop"/>
</view>
</view>
<text class="item-time">提问时间:{{ questionItem.create_time }}</text>
</view>
</view>
<view
class="record-wrap flex-column"
v-if="questionItem.reply_status === 2&&isUserResearcher"
>
<view class="record flex-column" v-if="questionItem.recordStatus !== 4">
<view class="no-record" v-if="questionItem.recordStatus === 1">
<image
src="./static/record.png"
mode="widthFix"
style="width: 90rpx; height: 180rpx"
/>
<view>无录音（录音时长超过三分钟自动结束）</view>
<view class="black-btn" style="margin-top:100rpx" @click.stop="showRemoveQ=true">转移问题</view>
<view class="black-btn" style="margin-top:50rpx" @click.stop="stopQuestion.show=true">终止问答</view>
</view>
<!-- <view class="record-time" v-else>{{ audioTime }}</view> -->
<view class="recode-image" v-else>
<scroll-view scroll-x style="height: 100rpx" class="scroll-view" :scroll-left="scrollTop" @scrolltolower="handleScrolltolower" :show-scrollbar="false">
<view style="width:100%;height:100rpx;display:inline-block;"></view>
<image
src="./static/record-img.png"
mode="scaleToFill"
/>
<image
src="./static/record-img.png"
mode="scaleToFill"
/>
<image
src="./static/record-img.png"
mode="scaleToFill"
/>
</scroll-view>
</view>
</view>
<view
class="record-tool flex-column"
v-if="questionItem.recordStatus !== 4"
>
<view class="hint" v-if="questionItem.recordStatus === 1"
>点击开始录音</view
>
<view class="record-time" v-else>{{ audioTime }}</view>
<view
class="record-btn-wrap center"
v-if="questionItem.recordStatus === 1"
>
<view class="switch" @click="changeRecodeStatus"> </view>
</view>
<view class="record-btn-wrap" v-else>
<text
@click="questionItem.recordStatus === 3 && handleRecode('delete')"
v-if="questionItem.recordStatus >= 2"
:class="{ active: questionItem.recordStatus === 3 }"
>删除</text
>
<view class="switch" @click="changeRecodeStatus">
<image
v-if="questionItem.recordStatus >= 2"
:src="
questionItem.recordStatus === 2 ? playImgSrc : pauseImgSrc
"
:key="playIconKey"
:style="{
'margin-left': questionItem.recordStatus !== 2 ? '7rpx' : 0,
width: '36rpx',
height: '44rpx',
}"
mode="widthFix"
/>
</view>
<text
@click="handleRecode('finish')"
v-if="questionItem.recordStatus >= 2"
:class="{ active: questionItem.recordStatus >= 2 }"
>完成</text
>
</view>
</view>
<view class="record-play" v-if="questionItem.recordStatus === 4">
<view class="audio-wrap">
<view v-if="pageLoading">音频生成中...</view>
<view class="play" v-else>
<van-icon
:name="isplay ? 'pause' : 'play'"
@click="handleAudioByReplay"
color="#E6B77DFF"
size="64rpx"
style="align-items: flex-start; margin-left: -20rpx"
/>
<!-- 进度条 -->
<view class="slider-box">
<slider
:value="currentAudioMsg.audioCurrentTime"
:max="currentAudioMsg.audioTime"
@change="sliderChange($event)"
@changing="sliderChanging"
activeColor="#E6B77DFF"
backgroundColor="#EBEBEBFF"
block-color="#E6B77DFF"
block-size="12"
/>
<view class="slider-time">
<text>{{
formatAudioTime(currentAudioMsg.audioCurrentTime * 1000)
}}</text>
<text>{{
formatAudioTime(currentAudioMsg.audioTime * 1000)
}}</text>
</view>
</view>
</view>
</view>
<view class="audio-delete" @click="handleRecode('delete')">
<image
src="./static/delerecord.png"
mode="heightFix"
style="width: 32rpx; height: 35rpx"
/>
<text>删除</text></view
>
<view class="audio-pub" @click="handleRecode('pub')">发布</view>
</view>
</view>
<view
class="record-wrap flex-column"
v-if="questionItem.reply_status === 2&&!isUserResearcher"
>
<view style="text-align: center;color: #999999;font-size: 32rpx;margin-top:100rpx;">该问题暂无回答,请等待研究员回答</view>
</view>
<view class="record-wrap flex-column" v-if="questionItem.reply_status===3&&isUserResearcher">
<view class="record-play" v-if="questionItem.recordStatus === 4">
<view class="audio-wrap">
<view class="play">
<van-icon
:name="questionItem.community_question_id==curVoiceId&&!curAudioPaused ? 'pause' : 'play'"
@click="handlePlayAudioByBg(questionItem)"
color="#E6B77DFF"
size="64rpx"
style="align-items: flex-start; margin-left: -20rpx"
/>
<!-- 进度条 -->
<view class="slider-box">
<slider
:value="curTime"
:max="currentAudioMsg.audioTime"
@change="bgAudiosliderChange($event)"
@changing="sliderChanging"
activeColor="#E6B77DFF"
backgroundColor="#EBEBEBFF"
block-color="#E6B77DFF"
block-size="12"
/>
<view class="slider-time">
<text>{{
formatAudioTime(curTime*1000)
}}</text>
<text>{{
formatAudioTime(questionItem.answer.audioTime * 1000)
}}</text>
</view>
</view>
</view>
</view>
<view class="audio-pub disable">已发布</view>
<!-- 音频悬浮 -->
<view v-show="false">
<audioBox v-if="showAudioPop"/>
</view>
</view>
</view>
</template>
</template>
<!-- 没有该问题权限 -->
<template v-else-if="!hasAuth">
<view class="noAuth-wrap">
<image class="img" :src="globalImgUrls.activityNoAuth" mode="widthFix"></image>
<view class="auth-text">您暂无权限查看问答社区</view>
<view class="auth-text" v-if="noAuthInfo.type==='contact'">若想查看可以联系对口销售</view>
<view class="auth-text" v-else>若想查看可以申请开通</view>
<view class="auth-text" v-if="noAuthInfo.type==='contact'">
{{noAuthInfo.name||''}}:<text @click="handleCallPhone(noAuthInfo.mobile+'')">{{noAuthInfo.mobile||''}}</text>
</view>
<view class="global-btn-yellow-change btn" @click="handleGoApply" v-else>立即申请</view>
</view>
</template>
<!-- 终止问答弹窗 -->
<van-dialog
use-slot
title="终止问答"
:show="stopQuestion.show"
show-cancel-button
confirm-button-open-type="getUserInfo"
@close="stopQuestion.show=false;stopQuestion.reason=''"
@confirm="handleConfirmStopQuestion"
>
<view style="padding:48rpx">
<textarea
style="background: #F7F8FA;border-radius: 8px;padding: 20rpx;display:block;box-sizing:border-box;width:100%"
maxlength="-1"
cols="30"
rows="10"
placeholder="请输入终止理由"
v-model="stopQuestion.reason"
></textarea>
</view>
</van-dialog>
<!-- 转移问答弹窗 -->
<removeQuestionDig :show="showRemoveQ" :qid="qid" @close="showRemoveQ=false" ></removeQuestionDig>
</view>
</template>
<script>
import mixin from "../mixin/questionMixin";
import { apiReplayAsk, apiGetQuestion, apiSetRead,apiCountAudioClick,apiQuestionStop } from "@/api/question";
import { apiApplyPermission} from '@/api/user';
import {apiGetSceneToParams} from "../api/common.js"
import { uploadAudioToServer } from "@/utils/upload";
import audioBox from '@/components/audioBox/audioBox.vue'
import removeQuestionDig from './components/removeQuestionDig.vue'
export default {
mixins: [mixin],
components:{
audioBox,
removeQuestionDig
},
computed:{
showAudioPop(){//是否显示音频弹窗
return this.$store.state.audio.show
},
showAudioBigPop(){
return this.$store.state.audio.showBig
},
curVoiceId(){//当前正在播放的音频id
return this.$store.state.audio.questionId
},
curAudioPaused(){//当前音频是否暂停状态
return this.$store.state.audio.paused
},
curTime(){
let t=0
if(this.questionItem?.community_question_id==this.$store.state.audio.questionId){
t=this.$store.state.audio.curTime
}
return t
}
},
data() {
return {
qid:0,
questionItem: null /* {
recordStatus: 1, //1:未录音;2:正在录音;3:已暂停;4:完成录音
permission_info:{
type:'',
name:'梁娜',
mobile:'123456',
customer_info:{
has_apply:false,
company_name:'',
name:'',
status:'流失',
}
}
}, */,
pauseImgSrc: "../static/question/recordplay.png",
playImgSrc: "../static/question/recordpause.png",
innerAudio: null, //该页面的音频
audioCount: 0, //录音计时,毫秒
audioSrc:'',//tempSrc
audioTime: "00:00", //录音时间(格式化后):string
timer: null,
audioItem: null,
pageLoading: false,
playIconKey: 0,
isplay: false,
isSlider: false,
scrollTop:0,
isStart:false,//判断录音是否开始
//globalRecorder:uni.getRecorderManager(),
/* userInfo:{
is_inner:1,//0:外部客户;1内部员工
status:'正式',
is_suspend:1,
is_researcher:0,
}, *///mock用户信息
stopQuestion:{
show:false,
reason:'',
},//终止问答
showRemoveQ:false,//展示转移问题弹窗
};
},
async onLoad(options) {
this.initAudio();
let obj={}
if(options.scene){
// 小程序码进来的
let res = await apiGetSceneToParams({scene_key:options.scene})
if(res.code==200){
obj=JSON.parse(res.data)
}
}
this.qid=obj.id || options.id
this.getQuestionItem(obj.id || options.id);
},
onShow(){
uni.authorize({
scope: 'scope.record',
success() {
},
fail(e){
console.log('fail',e);
}
})
},
onUnload() {
this.resetAudio();
this.destroyAudio();
//录音时误操作退出页面的情况
if(this.questionItem.recordStatus!==4&&this.questionItem.recordStatus!==1){
this.globalRecorder.stop()
}
},
//转发分享
onShareAppMessage(){
const {community_question_id} = this.questionItem
return{
title:'问答详情',
path:`/pages-question/answerDetail?id=${community_question_id}`
}
},
methods: {
//初始化audio,onShow执行
initAudio() {
this.innerAudio = uni.createInnerAudioContext();
this.handleAudioFun();
this.handleRecorderFun();
//录音完成后，切出其他页面再切回来
if(this.questionItem?.recordStatus===4){
console.log('count',this.audioCount,'src',this.audioSrc)
this.setAudio(this.audioSrc,this.audioCount)
}
},
//录音完成or从其他app切回本页面时，初始化音频
setAudio(src,audioCount){
this.innerAudio.stop();
this.isplay = false;
this.innerAudio.src = src;
console.log('秒数',audioCount)
this.changeCurrentAudio({
id: "",
answer: {
source: src,
audioTime: audioCount/1000,
},
});
},
//麦克风被占用，初始化录音相关变量 其他状态->未录音状态
setRecorder(){
this.questionItem.recordStatus = 1;
this.innerAudio.stop();
this.isplay = false;
this.audioItem = null;
this.audioCount = 0;
this.scrollTop = 0;
this.audioTime = this.formatAudioTime(this.audioCount * 1000)
},
//onHide触发
resetAudio(){
this.innerAudio.stop();
this.isplay = false;
this.changeCurrentAudio({
id: '',
answer: {
source: '',
audioTime: 0
}
})
},
//audio事件
handleAudioFun() {
this.innerAudio.onPlay(() => {
this.isplay = true;
console.log("播放录音了");
this.questionItem.loading = false;
});
this.innerAudio.onTimeUpdate(() => {
//console.log("时间更新", this.innerAudio.currentTime);
/* this.currentAudioMsg.audioCurrentTime = parseInt(
this.innerAudio.currentTime
); */
this.currentAudioMsg.audioCurrentTime = this.innerAudio.currentTime;
});
this.innerAudio.onSeeked(() => {
//取this.innerAudio.currentTime为0
console.log("seek完成");
this.isSlider = false;
});
this.innerAudio.onPause(() => {
this.isplay = false;
console.log("暂停");
console.log(this.innerAudio.paused);
});
this.innerAudio.onEnded(() => {
console.log("音频播放完毕");
this.questionItem.answer.isplay = false;
this.questionItem.answer.ispause = false;
/* this.changeCurrentAudio({
id: "",
answer: {
source: "",
audioTime: 0,
},
}); */
this.currentAudioMsg.audioCurrentTime = 0;
this.isplay = false;
});
},
//录音事件
handleRecorderFun() {
this.globalRecorder.onStart(() => {
console.log("开始录音");
if(this.questionItem.recordStatus===1){
this.questionItem.recordStatus=2
}
uni.hideToast();
this.clockTime();
});
this.globalRecorder.onPause(() => {
console.log("暂停录音");
if(this.questionItem.recordStatus===2){
this.questionItem.recordStatus = 3
}
this.cleanTime();
});
this.globalRecorder.onStop((res) => {
console.log("录音完成");
//录音自动结束 和 暂停时点击删除 的情况
if (this.questionItem.recordStatus === 2) {
this.questionItem.recordStatus = 4;
}
console.log('status',this.questionItem.recordStatus)
console.log("res", JSON.stringify(res));
this.cleanTime();
//初始化音频播放
this.audioSrc = res.tempFilePath
this.setAudio(this.audioSrc ,this.audioCount)
this.pageLoading = false;
});
this.globalRecorder.onError((res) => {
console.log('err',res)
console.log('errMsg',res.errMsg)
/* uni.showToast({
title:res.errMsg,
icon:'none'
}) */
//开始录音失败
if(res.errMsg.includes('start')){
this.questionItem.recordStatus = 1;
}
//麦克风被占用的情况
if(res.errCode===1){
uni.showToast({
title:'麦克风被占用，已停止录音',
icon:'none'
})
this.globalRecorder.stop();
this.setRecorder()
}
});
/* this.globalRecorder.onFrameRecorded((res) => {
console.log("?", res);
}); */
},
async getQuestionItem(id) {
const res = await apiGetQuestion({
question_id: id,
});
if (res.code === 200) {
this.questionItem = {...res.data,recordStatus:1};
const { audio_list } = res.data;
let temp = {};
if (audio_list.length > 0) {
temp = {
source: res.data.audio_list[0].audio_url,
audioTime: parseInt(res.data.audio_list[0].audio_play_seconds)||0,
isplay: false,
ispause: false,
};
} else {
temp = {
source: "",
audioTime: 0,
isplay: false,
ispause: false,
};
}
let readKey = "";
//const { is_inner } = this.userInfo;
if (this.isUserResearcher) {
readKey = "replier_is_read";
} else {
readKey = "is_read";
}
console.log('readKey',readKey)
this.questionItem[readKey] !== 1 &&
(await apiSetRead({
question_ids: this.questionItem.community_question_id + "",
}));
this.questionItem.id = res.data.community_question_id;
this.questionItem.answer = temp;
this.questionItem.loading = false;
this.questionItem.recordStatus = res.data.reply_status === 3 ? 4 : 1;
//研究员查看已回复的问题,初始化音频
if(res.data.reply_status===3&&this.isUserResearcher){
this.innerAudio.src = res.data.audio_list[0].audio_url
this.audioSrc = res.data.audio_list[0].audio_url
this.audioCount = parseInt(res.data.audio_list[0].audio_play_seconds)*1000
this.changeCurrentAudio({
id: "",
answer: {
source: res.data.audio_list[0].audio_url,
audioTime: parseInt(res.data.audio_list[0].audio_play_seconds)||0,
},
});
}
}else if(res.code===403){
this.hasAuth=false
this.noAuthInfo = res.data
}else{
//问题被删除的情况,返回小程序首页
setTimeout(()=>{
uni.switchTab({ url:'/pages/report/report' });
},1000)
}
},
changeRecodeStatus() {
console.log('a',this.questionItem.recordStatus)
//根据questionItem.recordStatus
if (this.questionItem.recordStatus === 1) {
const that = this
//检查是否有权限
uni.getSetting({
success(res){
console.log('res',res)
if(res.authSetting['scope.record']){
that.startRecord()
}else{
that.getRecordAuth()
}
}
});
} else if (this.questionItem.recordStatus === 2) {
//暂停录音
this.globalRecorder.pause();
this.questionItem.recordStatus = 3;
} else if (this.questionItem.recordStatus === 3) {
//继续录音
this.globalRecorder.resume();
this.clockTime();
this.questionItem.recordStatus = 2;
} else {
//结束录音
this.globalRecorder.stop();
//this.cleanTime();
}
},
//获取录音授权
getRecordAuth(){
const {community_question_id} = this.questionItem
uni.openSetting({
success(res){
//刷新页面
if(res.authSetting['scope.record']){
uni.redirectTo({url: `/pages-question/answerDetail?id=${community_question_id}`})
}
}
})
//this.questionItem.recordStatus = 1
},
//开启录音
startRecord(){
console.log(this.globalRecorder)
this.globalRecorder.start({ duration: 180000, format: "mp3" });
uni.showToast({
title:'加载中',
icon:'loading'
})
this.questionItem.recordStatus = 2;
},
//上传音频
async uploadAudio() {
const res = await uploadAudioToServer(this.innerAudio.src);
if (res.code === 200) {
this.audioItem = res.data;
} else {
//重新录
this.setRecorder()
}
},
//录音操作:完成/删除/发布
async handleRecode(type) {
if (type==='finish') {
this.questionItem.recordStatus = 4;
this.changeRecodeStatus();
}
if (type === "finish") {
//生成音频,更改页面布局
this.pageLoading = true;
} else if (type === "delete") {
//重新录
if(this.questionItem.recordStatus===3)this.globalRecorder.stop();
this.setRecorder()
} else {
//发布
if (!this.audioItem) {
await this.uploadAudio();
}
//如果上传音频成功
if (this.questionItem.recordStatus === 4) {
//发布回答
const res = await apiReplayAsk({
question_id: this.questionItem.community_question_id,
audio_list: [{ ...this.audioItem, sort: 1 }],
});
if (res.code === 200) {
uni.showToast({
title: "发布成功",
icon: "success",
duration: 500,
});
setTimeout(() => {
//关闭当前页面,跳转到我的回答
// 返回失败 从公众号模板消息过来的，导航至我的问答
uni.navigateBack({
delta: 1 ,
fail:()=>{
uni.redirectTo({
url: '/pages-question/answerList'
})
}
});
}, 500);
}
}
}
},
//(提问者)问题已被回答,点击回答音频
handleAudio(item) {
const { source, isplay, ispause } = item.answer;
if (isplay) {
//说明是播放->暂停
this.innerAudio.pause();
this.questionItem.answer.isplay = false;
this.questionItem.answer.ispause = true;
} else if (ispause) {
//说明是暂停->播放
this.innerAudio.play();
this.questionItem.answer.isplay = true;
this.questionItem.answer.ispause = false;
} else {
//console.log("aaa", source, this.innerAudio.src);
//说明是第一次播放或播放完
this.changeCurrentAudio(item);
this.innerAudio.stop();
this.innerAudio.src = source;
this.handleAudioPlay();
this.questionItem.answer.isplay = true;
//音频点击次数+1
const audio_id = this.questionItem.audio_list[0].community_question_audio_id
apiCountAudioClick({
community_question_audio_id:audio_id,
source_agent:1
}).then((res)=>{
if(res.code===200){
console.log('音频id为'+audio_id+'点击次数+1')
}
})
}
},
//(回答者)问题被回答,点击回答音频
handleAudioByReplay() {
this.isplay = !this.isplay;
if (this.innerAudio.paused) {
this.innerAudio.play();
} else {
this.innerAudio.pause();
}
this.playIconKey++; //更新音频播放图标
},
//拖动音频进度条
sliderChange(e) {
console.log("拖动完成?");
//this.innerAudio.pause();
const value = e.detail.value;
this.innerAudio.seek(value);
this.currentAudioMsg.audioCurrentTime = value;
},
sliderChanging() {
this.isSlider = true;
},
// 背景音频播放的拖动
bgAudiosliderChange(e){
const value=e.detail.value
this.globalBgMusic.seek(value)
},
//切换当前播放音频
changeCurrentAudio(item) {
const { id } = item;
const { source, audioTime } = item.answer;
this.currentAudioMsg = {
id: id,
audioCurrentTime: 0 * 1000,
audioTime: audioTime,
audioCurrentUrl: source,
};
if (id) {
this.questionItem.loading = true;
}
},
//录音计时
clockTime() {
console.log("开始录音计时");
if(this.timer) return
this.timer = setInterval(() => {
if (this.timer) {
this.audioCount += 30;
this.audioTime = this.formatAudioTime(this.audioCount)
this.scrollTop+=1;
}
}, 30);
},
//清除录音计时
cleanTime() {
console.log("结束录音计时");
clearInterval(this.timer);
this.timer=null
this.playIconKey++; //更新录音暂停播放图标
//this.audioTime = this.dayjs(this.audioCount).format("mm:ss.SS");
},
//scroll-view滑动到最右
handleScrolltolower(){
console.log('a',this.scrollTop)
this.scrollTop-=150;
},
//权限相关
handleContact(mobile){
uni.makePhoneCall({
phoneNumber: mobile+''
});
},
async handleGoApply(){
const {customer_info} = this.questionItem.permission_info
const {community_question_id} = this.questionItem
if (customer_info.has_apply) { //已经申请过
uni.showToast({
title:'您已提交过申请，请耐心等待',
icon:'none'
})
} else {
if (!customer_info.status || customer_info.status != '流失'|| customer_info.status != '关闭') {
uni.navigateTo({
url: "/pages-applyPermission/applyPermission?source=5&form_page=问答社区"
})
} else { //主动调一次申请权限接口
const res = await apiApplyPermission({
company_name: customer_info.company_name,
real_name: customer_info.name,
source: 5,
from_page: '问答社区'
})
if (res.code === 200) {
uni.showToast({
title:'您已提交过申请，请耐心等待',
icon:'none'
})
uni.redirectTo({url: `/pages-question/answerDetail?id=${community_question_id}`})
}
}
}
},
// 终止问答
async handleConfirmStopQuestion(){
console.log('stop question');
if(!this.stopQuestion.reason){
uni.showToast({
title:"请填写终止理由",
icon:"none"
})
return
}
const res=await apiQuestionStop({
community_question_id:this.questionItem.community_question_id,
reason:this.stopQuestion.reason
})
if(res.code===200){
uni.showToast({
title:"成功终止",
icon:"success"
})
setTimeout(() => {
uni.navigateBack({
delta:1,
fail(){
uni.switchTab({
url: '/pages/question/question'
})
}
})
}, 1500);
}
}
},
};
</script>
<style scoped lang="scss">
.flex-column {
display: flex;
flex-direction: column;
}
.answerdetail-page {
padding: 50rpx 30rpx 0 30rpx;
height: calc(100vh - calc(50px + env(safe-area-inset-bottom)));
box-sizing: border-box;
.question-wrap {
.question-item::after {
height: 0;
}
}
.record-wrap {
margin: 0 -30rpx;
flex: 1;
.record {
flex: 1;
justify-content: center;
align-items: center;
.no-record {
text-align: center;
color: #999999ff;
font-size: 28rpx;
// height:130rpx;
image {
width: 94rpx;
}
.black-btn{
width: 100%;
height: 80rpx;
line-height: 80rpx;
background: #333333;
box-shadow: 0px 4rpx 20rpx rgba(160, 126, 84, 0.25);
border-radius: 40rpx;
color: #E3B377;
text-align: center;
font-size: 32rpx;
}
}
/* .record-time {
justify-self: flex-end;
font-size: 60rpx;
} */
.recode-image {
width: 100%;
height: 100%;
background-color: #fafafaff;
display: flex;
align-items: center;
.scroll-view {
width: 100%;
white-space: nowrap;
::-webkit-scrollbar{
width:0;
height:0;
display:none;
color:transparent;
}
image {
width: 421rpx;
height: 100rpx;
margin-right: 6rpx;
}
}
}
}
.record-tool {
justify-content: center;
align-items: center;
border-top: 1rpx solid #e6e6e6ff;
height: 400rpx;
position: relative;
.hint {
color: #ee3636ff;
font-size: 28rpx;
position: absolute;
top: 50rpx;
}
.record-time{
font-size: 60rpx;
}
.record-btn-wrap {
margin-top: 38rpx;
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
&.center {
justify-content: center;
}
text {
color: #999999ff;
font-size: 32rpx;
&.active {
color: #ee3636ff;
}
}
.switch {
width: 118rpx;
height: 118rpx;
padding: 12rpx;
box-sizing: border-box;
border-radius: 50%;
border: 1rpx solid #ee3636ff;
/* background-color: rgb(68, 46, 46); */
position: relative;
display: flex;
align-items: center;
justify-content: center;
image {
position: absolute;
width: 36rpx;
z-index: 5;
}
&::after {
content: "";
display: inline-block;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #ee3636ff;
}
}
}
}
.record-play {
margin: 20rpx 30rpx;
.audio-wrap {
background-color: #fdf8f2ff;
padding: 30rpx;
border-radius: 16rpx;
}
.play {
display: flex;
justify-content: space-between;
.slider-box {
margin-left: 15rpx;
flex: 1;
slider {
margin: 15rpx 0 0 0;
}
.slider-time {
display: flex;
justify-content: space-between;
text {
color: #999999ff;
font-size: 22rpx;
}
}
}
}
.audio-delete {
margin-top: 20rpx;
width: 100%;
height: 40rpx;
display: flex;
justify-content: flex-end;
align-items: center;
image {
height: 40rpx;
}
text {
margin-left: 10rpx;
color: #999999ff;
font-size: 28rpx;
}
}
.audio-pub {
margin-top: 120rpx;
background-color: #e6b77dff;
color: #fff;
height: 80rpx;
line-height: 80rpx;
border-radius: 40rpx;
text-align: center;
position: relative;
width: 390rpx;
left: 50%;
margin-left: -170rpx;
&.disable{
background-color:#999999ff;
color: #fff;
}
}
}
}
}
</style>