hongze_yb_xcx/pages-question/answerDetail.vue

<template>
  <view class="answerdetail-page flex-column">
    <template v-if="questionItem">
      <view class="question-wrap">
        <view class="question-item">
          <view class="question-info">
            <view style="flex: 1" class="question-title">
              <text class="item-label">{{
                questionItem.chart_permission_name
              }}</text>
              {{ questionItem.question_content }}
            </view>
            <view class="item-answer" v-if="questionItem.reply_status === 3">
              <view class="answer" @click.stop="handleAudio(questionItem)">
                <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
                        ? moment(
                            (questionItem.answer.audioTime -
                              currentAudioMsg.audioCurrentTime) *
                              1000
                          ).format("mm:ss")
                        : "00:00"
                    }}</text>
                  </template>
                  <template v-else>
                    <text>{{
                      moment(questionItem.answer.audioTime * 1000).format(
                        "mm:ss"
                      )
                    }}</text>
                  </template>
                </template>
                <template v-else>
                  <image
                    class="load-img"
                    src="../static/loading.png"
                    mode="aspectFill"
                  />
                  <text>{{
                    moment(questionItem.answer.audioTime).format("mm:ss")
                  }}</text>
                </template>
              </view>
            </view>
          </view>
          <text class="item-time">提问时间:{{ questionItem.create_time }}</text>
        </view>
      </view>
      <view
        class="record-wrap flex-column"
        v-if="questionItem.reply_status === 2"
      >
        <view class="record flex-column" v-if="questionItem.recordStatus !== 4">
          <!-- <view class="no-record" v-if="questionItem.recordStatus === 1">
            <image
              src="../static/question/record.png"
              mode="widthFix"
              style="width: 90rpx; height: 180rpx"
            />
            <view>无录音（录音时长超过三分钟自动结束）</view>
          </view>
          <view class="record-time" v-else>{{ audioTime }}</view> -->
          <view class="recode-image">
            <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/question/record-img.png"
                mode="scaleToFill"
              />
              <image
                src="../static/question/record-img.png"
                mode="scaleToFill"
              />
              <image
                src="../static/question/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>{{
                    moment(currentAudioMsg.audioCurrentTime * 1000).format(
                      "mm:ss.SS"
                    )
                  }}</text>
                  <text>{{
                    moment(currentAudioMsg.audioTime * 1000).format("mm:ss.SS")
                  }}</text>
                </view>
              </view>
            </view>
          </view>
          <view class="audio-delete" @click="handleRecode('delete')">
            <image
              src="../static/question/delerecord.png"
              mode="heightFix"
              style="width: 32rpx; height: 35rpx"
            />
            <text>删除</text></view
          >
          <view class="audio-pub" @click="handleRecode('pub')">发布</view>
        </view>
      </view>
    </template>
  </view>
</template>

<script>
import mixin from "../mixin/questionMixin";
import { apiReplayAsk, apiGetQuestion, apiSetRead } from "@/api/question";
import { uploadAudioToServer } from "@/utils/upload";
export default {
  mixins: [mixin],
  data() {
    return {
      questionItem: null /* {
        recordStatus: 1, //1:未录音;2:正在录音;3:已暂停;4:完成录音
      }, */,
      pauseImgSrc: "../static/question/recordplay.png",
      playImgSrc: "../static/question/recordpause.png",
      innerAudio: null, //该页面的音频
      audioCount: 0, //录音计时,毫秒
      recordStartTime: null, //录音开始时间
      recordStopTime: null, //录音停止的时间
      audioTime: "00:00", //录音时间(格式化后):string
      timer: null,
      audioItem: null,
      pageLoading: false,
      isPlayed: false, //拖动进度条前音频是否为播放状态
      playIconKey: 0,
      isplay: false,
      isSlider: false,
      scrollTop:0,
    };
  },
  onLoad(options) {
    this.initAudio();
    this.getQuestionItem(options.id);
  },
  methods: {
    //初始化audio
    initAudio() {
      this.innerAudio = uni.createInnerAudioContext();
      this.handleAudioFun();
      this.handleRecorderFun();
    },
    //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("开始录音");
        this.clockTime();
      });
      this.globalRecorder.onPause(() => {
        console.log("暂停录音");
        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.innerAudio.src = res.tempFilePath;
        this.changeCurrentAudio({
          id: "",
          answer: {
            source: res.tempFilePath,
            audioTime: res.duration / 1000,
          },
        });
        this.pageLoading = false;
      });
      this.globalRecorder.onError((res) => {
        console.log("err", res);
      });
      /* 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;
        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),
            isplay: false,
            ispause: false,
          };
        } else {
          temp = {
            source: "",
            audioTime: 0,
            isplay: false,
            ispause: false,
          };
        }
        let readKey = "";
        const { is_inner } = this.userInfo;
        if (is_inner === 1) {
          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 > 2 ? 4 : 1;
      }
    },
    changeRecodeStatus() {
      //根据questionItem.recordStatus
      if (this.questionItem.recordStatus === 1) {
        //开始录音
        this.globalRecorder.start({ duration: 180000, format: "mp3" });
        //this.clockTime();
        this.questionItem.recordStatus = 2;
      } else if (this.questionItem.recordStatus === 2) {
        //暂停录音
        this.globalRecorder.pause();
        //this.cleanTime();
        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();
      }
    },
    //上传音频
    async uploadAudio() {
      const res = await uploadAudioToServer(this.innerAudio.src);
      if (res.code === 200) {
        this.audioItem = res.data;
      } else {
        //重新录
        this.questionItem.recordStatus = 1;
        this.audioCount = 0;
        this.audioTime = this.moment(this.audioCount * 1000).format("mm:ss");
      }
    },
    //录音操作:完成/删除/发布
    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.questionItem.recordStatus = 1;
        this.audioItem = null;
        this.audioCount = 0;
        this.scrollTop = 0;
        this.recordStartTime = null;
        this.audioTime = this.moment(this.audioCount * 1000).format("mm:ss");
      } 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 });
            }, 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;
      }
    },
    //(回答者)问题被回答,点击回答音频
    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;
    },
    //切换当前播放音频
    changeCurrentAudio(item) {
      const { id } = item;
      const { source, audioTime } = item.answer;
      this.currentAudioMsg = {
        id: id,
        audioCurrentTime: 0 * 1000,
        audioTime: audioTime,
        audioCurrentUrl: source,
      };
      if (id) {
        console.log("?");
        this.questionItem.loading = true;
      }
    },
    //录音计时
    clockTime() {
      console.log("开始录音计时");
      if (!this.recordStartTime) {
        this.recordStartTime = Date.now();
      }
      //console.log(this.recordStartTime);
      this.timer = setInterval(() => {
        if (this.timer) {
          this.audioCount += 30;
          this.audioTime = this.moment(this.audioCount).format("mm:ss.SS");
          //this.audioTime = this.moment(Date.now() - this.recordStartTime).format("mm:ss.SS");
          this.scrollTop+=1;
        }
      }, 30);
    },
    //清除录音计时
    cleanTime() {
      console.log("结束录音计时");
      //console.log('aa',this.recordStopTime)
      clearTimeout(this.timer);
      this.playIconKey++; //更新录音暂停播放图标
      //this.audioTime = this.moment(this.audioCount).format("mm:ss.SS");
    },
    //scroll-view滑动到最右
    handleScrolltolower(){
      console.log('a',this.scrollTop)
      this.scrollTop-=150;
    }
  },
};
</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;
        image {
          width: 94rpx;
        }
      }
    /*   .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;
      }
    }
  }
}
</style>