问答详情

api/question.js

@@ -28,3 +28,18 @@ import { httpGet, httpPost } from "@/utils/request.js";
  export const apiBarTotal=params=>{
     return httpGet('/community/question/list/total',params)
 }
+/**
+ * 上传回复音频 
+ * @param file mp3格式的文件
+ */
+ export const apiUploadAudio=params=>{
+    return httpPost('/community/question/reply/upload_audio',params)
+}
+/**
+ * 发布回答
+ * @param question_id 
+ * @param audio_list 
+ */
+ export const apiReplayAsk=params=>{
+    return httpPost('/community/question/reply',params)
+}

mixin/questionMixin.js

@@ -159,10 +159,10 @@ export default {
         //点击某条音频
         handleAudio(item) {
             //如果没有权限,弹窗并return
-            if (!item.auth_ok) {
+           /*  if (!item.auth_ok) {
             	this.initPupData(item)
             	return
-            }
+            } */
             const {
                 source,
                 isplay

pages-question/answerDetail.vue

@@ -1,115 +1,531 @@
 <template>
-    <view class="answerdetail-page">
-        <view class="detail-title">
-            <text>{{ questionItem.text }}</text>
-            <text>{{ questionItem.time }}</text>
+  <view class="answerdetail-page flex-column">
+    <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
+                        ).format("mm:ss")
+                      : "00:00"
+                  }}</text>
+                </template>
+                <template v-else>
+                  <text>{{
+                    moment(questionItem.answer.audioTime).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>
-        <view class="recode">
-            麦克风
-            {{audioTime}}
+        <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" />
+          <view>无录音（录音时长超过三分钟自动结束）</view>
+        </view>
+        <view class="record-time" v-else>{{ audioTime }}</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-btn-wrap">
+          <text @click="handleRecode('delete')">删除</text>
+          <view class="switch" @click="changeRecodeStatus">
+            <image
+              v-if="questionItem.recordStatus >= 2"
+              :src="questionItem.recordStatus === 2 ? playImgSrc : pauseImgSrc"
+              :style="{
+                'margin-left': questionItem.recordStatus !== 2 ? '7rpx' : 0,
+              }"
+              mode="widthFix"
+            />
+          </view>
+          <text @click="handleRecode('finish')">完成</text>
         </view>
-        <view class="recode-btn">
-            <view @click="handleAudio(1)">开始录音</view>
-            <view @click="handleAudio(2)">暂停录音</view>
-            <view @click="handleAudio(3)">停止录音</view>
-            <view @click="handleAudio(4)">播放录音</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($event)"
+                activeColor="#E6B77DFF"
+                backgroundColor="#EBEBEBFF"
+                block-color="#E6B77DFF"
+                block-size="12"
+              />
+              <view class="slider-time">
+                <text>{{
+                  moment(currentAudioMsg.audioCurrentTime).format("mm:ss")
+                }}</text>
+                <text>{{
+                  moment(currentAudioMsg.audioTime).format("mm:ss")
+                }}</text>
+              </view>
+            </view>
+          </view>
         </view>
+        <view class="audio-delete" @click="handleRecode('delete')">
+          <image src="../static/question/delerecord.png" mode="heightFix" />
+          <text>删除</text></view
+        >
+        <view class="audio-pub" @click="handleRecode('pub')">发布</view>
+      </view>
     </view>
+  </view>
 </template>
 
 <script>
-const moment=require('@/utils/moment-with-locales.min')
-moment.locale('zh-cn');
+import mixin from "../mixin/questionMixin";
+import { apiUploadAudio } from "@/api/question";
 export default {
-    data() {
-        return {
-            questionItem: {
-                id: 1,
-                text: '疫情下全球苯乙烯市场有什么动荡和影响',
-                time: '2022.5.23 14:40',
-                source: 'xxx.mp3',
-                isAnswer: 1,//1未回答,2已回答
-                status: 1,//1:未录音;2:正在录音;3:已暂停;4:完成录音
-            },
-            innerAudio: null,//该页面的音频
-            audioCount:0,
-            audioTime:'00:00',
-            timer:null
-        };
-    },
-    onLoad() {
-		this.initAudio()
-	},
-	onUnload(){
-		this.destoryAudio()
-	},
-    methods: {
-        //初始化audio
-		initAudio() {
-			this.innerAudio = uni.createInnerAudioContext()
-			this.handleAudioFun()
-            this.handleRecorderFun()
-		},
-		//销毁audio
-		destoryAudio() {
-			if (this.innerAudio) {
-				this.innerAudio.destroy()
-			}
-		},
-        handleAudioFun(){
-            this.innerAudio.onPlay(()=>{
-                console.log('播放录音了')
-            })
-        },
-        handleRecorderFun(){
-            this.globalRecorder.onStart(()=>{
-                console.log('开始录音')
-            })
-            this.globalRecorder.onPause(()=>{
-                console.log('暂停录音')
-                this.cleanTime()
-            })
-            this.globalRecorder.onStop((res)=>{
-                console.log('录音完成')
-                console.log('res',JSON.stringify(res))
-                this.innerAudio.src = res.tempFilePath
-                this.cleanTime()
-            })
-            this.globalRecorder.onFrameRecorded((res)=>{
-                console.log('?',res)
-            })
-        },
-        handleAudio(type) {
-            //根据questionItem.status
-            if (type === 1) {
-                this.globalRecorder.start({ duration: 180000,frameSize:'1' })
-                this.clockTime()
-            } else if (type === 2) {
-                this.globalRecorder.pause()
-            } else if (type === 3) {
-                this.globalRecorder.stop()
-                this.cleanTime()
-            }else{
-                this.innerAudio.play()
-            }
-
+  mixins: [mixin],
+  data() {
+    return {
+      questionItem: {
+        id: 1,
+        chart_permission_id: 1,
+        question_content: "疫情下全球苯乙烯市场有什么动荡和影响",
+        create_time: "2022.5.23 14:40",
+        answer: {
+          source:
+            "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3",
+          audioTime: 21 * 1000,
+          isplay: false,
+          ispause: false,
         },
-        clockTime(){
-            console.log('开始计时')
-            this.timer = setInterval(()=>{
-                if(this.timer){
-                    this.audioCount++
-                    this.audioTime = moment(this.audioCount*1000).format('mm:ss')
-                }
-            },1000)
+        loading: false,
+        reply_status: 2,
+        chart_permission_name: "苯乙烯",
+        recordStatus: 4, //1:未录音;2:正在录音;3:已暂停;4:完成录音
+      },
+      pauseImgSrc: "../static/question/recordplay.png",
+      playImgSrc: "../static/question/recordpause.png",
+      innerAudio: null, //该页面的音频
+      audioCount: 0, //录音计时
+      audioTime: "00:00", //录音时间
+      timer: null,
+      audioItem: {},
+      pageLoading: false,
+      isPlayed: false, //拖动进度条前音频是否为播放状态
+      playIconKey: 0,
+      isplay: false,
+    };
+  },
+  onLoad() {
+    this.initAudio();
+    this.uploadAudio();
+  },
+  methods: {
+    //初始化audio
+    initAudio() {
+      this.innerAudio = uni.createInnerAudioContext();
+      this.handleAudioFun();
+      this.handleRecorderFun();
+    },
+    //audio事件
+    handleAudioFun() {
+      this.innerAudio.onPlay(() => {
+        console.log("播放录音了");
+        this.questionItem.loading = false;
+      });
+      this.innerAudio.onTimeUpdate(() => {
+        this.currentAudioMsg.audioCurrentTime = parseInt(
+          this.innerAudio.currentTime * 1000
+        );
+      });
+      this.innerAudio.onSeeked(() => {
+        //取this.innerAudio.currentTime为0
+        if (this.isPlayed) {
+          this.innerAudio.play();
+        }
+      });
+      this.innerAudio.onPause(() => {
+        console.log("暂停");
+      });
+      this.innerAudio.onEnded(() => {
+        console.log("音频播放完毕");
+        this.questionItem.answer.isplay = false;
+        this.questionItem.answer.ispause = false;
+        this.changeCurrentAudio({
+          id: "",
+          answer: {
+            source: "",
+            audioTime: 0,
+          },
+        });
+      });
+    },
+    //录音事件
+    handleRecorderFun() {
+      this.globalRecorder.onStart(() => {
+        console.log("开始录音");
+      });
+      this.globalRecorder.onPause(() => {
+        console.log("暂停录音");
+        /* this.cleanTime(); */
+      });
+      this.globalRecorder.onStop((res) => {
+        console.log("录音完成");
+        console.log("res", JSON.stringify(res));
+        //this.innerAudio.src = res.tempFilePath;
+        this.cleanTime();
+        //上传录制音频
+        this.uploadAudio();
+      });
+      this.globalRecorder.onError((res) => {
+        console.log("err", res);
+      });
+      /* this.globalRecorder.onFrameRecorded((res) => {
+        console.log("?", res);
+      }); */
+    },
+    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 apiUploadAudio({
+        file: this.innerAudio.src,
+      }); */
+      /* if (res.code === 200) {
+        this.audioItem = res.data;
+      }else{
+        //重新录
+        this.questionItem.recordStatus=1
+      } */
+      //mock上传的结果
+      this.audioItem = {
+        audio_url:
+          "https://hzstatic.hzinsights.com/static/yb_wx/community_question_audio/ctlwQOKUPTtQ43cLjx8khCmjPqkV.mp3", //音频地址
+        audio_play_seconds: "492", //音频时长，单位s
+        audio_size: "2.82", //音频大小，单位MB
+      };
+      this.changeCurrentAudio({
+        id: "",
+        answer: {
+          source: this.audioItem.audio_url,
+          audioTime: parseInt(this.audioItem.audio_play_seconds) * 1000,
         },
-        cleanTime(){
-            this.timer = null
-            this.audioTime = moment(this.audioCount*1000).format('mm:ss')
+      });
+      this.innerAudio.src = this.audioItem.audio_url;
+      this.pageLoading = false;
+    },
+    handleRecode(type) {
+      this.questionItem.recordStatus = 4;
+      this.changeRecodeStatus();
+      if (type === "finish") {
+        //生成音频,更改页面布局
+        //console.log("aaa");
+        this.pageLoading = true;
+        //this.handleAudioPlay();
+      } else if(type==='delete'){
+        this.questionItem.recordStatus = 1;
+        this.audioCount = 0;
+        this.audioTime = this.moment(this.audioCount * 1000).format("mm:ss");
+      }else{
+        //关闭当前页面,跳转到我的回答
+        uni.navigateBack({ delta: 1 })
+      }
+    },
+    //(提问者)问题已被回答,点击回答音频
+    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.isPlayed = true;
+      if (this.innerAudio.paused) {
+        this.innerAudio.play();
+        this.isplay = true;
+      } else {
+        this.innerAudio.pause();
+        this.isplay = false;
+      }
+      this.playIconKey++;
+    },
+    //拖动音频进度条
+    sliderChange(e) {
+      const value = e.detail.value;
+      this.innerAudio.seek(value / 1000);
+      this.currentAudioMsg.audioCurrentTime = value;
+    },
+    sliderChanging(e) {
+      //拖动时先暂停播放
+      this.innerAudio.pause();
+    },
+    //切换当前播放音频
+    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("开始计时");
+      this.timer = setInterval(() => {
+        if (this.timer) {
+          this.audioCount++;
+          this.audioTime = this.moment(this.audioCount * 1000).format("mm:ss");
         }
+      }, 1000);
+    },
+    cleanTime() {
+      this.timer = null;
+      this.audioTime = this.moment(this.audioCount * 1000).format("mm:ss");
     },
+  },
 };
 </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;
+      }
+    }
+    .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-btn-wrap {
+        margin-top: 38rpx;
+        display: flex;
+        width: 100%;
+        justify-content: space-around;
+        align-items: 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>

pages-question/answerList.vue

@@ -36,7 +36,7 @@
                 <image
                   class="music-img"
                   :src="item.answer.isplay ? playImgSrc : pauseImgSrc"
-                  mode="aspectFill"
+                  mode="widthFix"
                 />
                 <template v-if="item.answer.isplay || item.answer.ispause">
                   <text>{{
@@ -104,10 +104,10 @@ export default {
       barList: [],
       selectKey: "Wait",
       visitor: {
-        type: 2, //1研究员,2客户
+        type: 1, //1研究员,2客户
       },
-      pauseImgSrc: "../static/audio-pause-2.png",
-      playImgSrc: "../static/audio-doing.png",
+      pauseImgSrc: "../static/question/recordplay.png",
+      playImgSrc: "../static/question/recordpause.png",
     };
   },
   onLoad() {
@@ -212,79 +212,6 @@ export default {
   }
   .answer-list {
     margin-top: 20rpx;
-    .question-item {
-      margin-bottom: 20rpx;
-      &::after {
-        content: "";
-        display: block;
-        height: 10rpx;
-        margin: 0 -30rpx;
-        background-color: #f9f9f9;
-      }
-      &:last-child {
-        &::after {
-          background-color: #ffffff;
-        }
-      }
-      .question-info {
-        display: flex;
-        padding: 10rpx 0;
-        .question-title {
-          font-size: 32rpx;
-          color: #333333;
-          .item-label {
-            padding: 7rpx 12rpx;
-            font-size: 22rpx;
-            text-align: center;
-            background-color: #333333;
-            color: #e4b478;
-            border-radius: 21rpx;
-            margin-right: 15rpx;
-          }
-        }
-        .item-answer {
-          display: flex;
-          align-items: center;
-          .answer {
-            width: 150rpx;
-            height: 97rpx;
-            box-sizing: border-box;
-            padding: 30rpx 15rpx;
-            border-radius: 18rpx;
-            background: linear-gradient(253deg, #e3b377 0%, #fbca8e 100%);
-            display: flex;
-            justify-content: space-between;
-            color: #ffffff;
-            font-size: 24rpx;
-            .load-img {
-              width: 34rpx;
-              height: 34rpx;
-              margin-right: 10rpx;
-              animation: circle 1s linear infinite;
-            }
-            .music-img {
-              width: 34rpx;
-              height: 34rpx;
-              margin-right: 10rpx;
-            }
-            @keyframes circle {
-              0% {
-                transform: rotateZ(0);
-              }
-              100% {
-                transform: rotateZ(360deg);
-              }
-            }
-          }
-        }
-      }
-      .item-time {
-        color: #999999;
-        font-size: 24rpx;
-        margin: 20rpx 0;
-        display: block;
-      }
-    }
   }
   .global-pup {
     .content {

pages/question/question.vue

@@ -45,7 +45,7 @@
 						<view class="answer" @click="handleAudio(item)">
 							<template v-if="!item.loading">
 								<!-- <text>{{ item.answer.isplay ? '暂停' : '播放' }}</text> -->
-								<image class="music-img" :src="item.answer.isplay?playImgSrc:pauseImgSrc" mode="aspectFill"/>
+								<image class="music-img" :src="item.answer.isplay?playImgSrc:pauseImgSrc" mode="widthFix"/>
 								<template v-if="item.answer.isplay || item.answer.ispause">
 									<!-- <text>{{ currentAudioMsg.audioCurrentTime }}/{{ item.answer.audioTime }}</text> -->
 									<text>{{moment(item.answer.audioTime - currentAudioMsg.audioCurrentTime).format('mm:ss')}}</text>
@@ -101,8 +101,8 @@ export default {
 				status: '正式',//type为2的时候才判断
 			},
 			selectName:'',
-			pauseImgSrc:'../../static/audio-pause-2.png',
-			playImgSrc:'../../static/audio-doing.png',
+			pauseImgSrc:'../../static/question/recordplay.png',
+			playImgSrc:'../../static/question/recordpause.png',
 			noAuth:['潜在','流失','冻结客户','暂停试用']
 		}
 	},
@@ -281,82 +281,9 @@ page {
 		
 	}
 
-	.question-list {
-		.question-item {
-			margin-bottom: 20rpx;
-			&::after{
-				content: '';
-				display: block;
-				height:10rpx;
-				margin:0 -30rpx;
-				background-color: #F9F9F9;
-			}
-			&:last-child{
-				&::after{
-					background-color: #FFFFFF;
-				}
-			}
-			.question-info{
-				display: flex;
-				padding: 10rpx 0;
-				.question-title{
-					font-size: 32rpx;
-					color:#333333;
-					.item-label{
-						padding:7rpx 12rpx;
-						font-size: 22rpx;
-						text-align: center;
-						background-color: #333333;
-						color: #E4B478;	
-						border-radius: 21rpx;
-						margin-right:15rpx ;		
-					}
-				}
-				.item-answer {
-					display: flex;
-					align-items: center;
-					.answer {
-						width:150rpx;
-						height: 97rpx;
-						box-sizing: border-box;
-						padding:30rpx 15rpx;
-						border-radius: 18rpx;
-						background:linear-gradient(253deg, #E3B377 0%, #FBCA8E 100%);
-						display: flex;
-						justify-content: space-between;
-						color: #FFFFFF;
-						font-size: 24rpx;
-						.load-img{
-							width: 34rpx;
-							height: 34rpx;
-							margin-right: 10rpx;
-							animation: circle 1s linear infinite;
-						}
-						.music-img{
-							width: 34rpx;
-							height: 34rpx;
-							margin-right: 10rpx;
-						}
-						@keyframes circle {
-							0%{
-								transform: rotateZ(0);
-							}
-							100%{
-								transform: rotateZ(360deg);
-							}
-						}
-					}
-				}
-			}
-			.item-time {
-				color: #999999;
-				font-size: 24rpx;
-				margin:20rpx 0;
-				display: block;
-			}
-			
-		}
-	}
+	/* .question-list {
+	
+	} */
 
 	.topage-btn {
 		position: fixed;

pages/report/report.vue

@@ -10,6 +10,18 @@
     </view>
     <!-- 分类 -->
     <view class="type-wrap">
+      <view style="display:flex;">头像
+        <van-search
+                shape="round"
+                :value="searchVal"
+                placeholder="请输入报告标题或关键字"
+                @change="searchValChange"
+                @search="onSearch"
+                @clear="onClearSearch"
+                clear-trigger="always"
+                style="flex:1"
+            />
+      </view>
       <view class="flex first-type-box">
         <view class="item" v-for="(item,index) in topFirstList" :key="item.classify_name" @click="handleClickTopFirst(item,index)">
           <image :src="selectTopFirstId==item.classify_name?item.select_icon_url:item.icon_url" mode="aspectFill"/>

style/common.scss

@@ -91,4 +91,81 @@ view{
         width: 346rpx;
         margin-bottom: 57rpx;
     }
+}
+
+/* 问答模块单个问答样式*/
+.question-item {
+    margin-bottom: 20rpx;
+    &::after{
+        content: '';
+        display: block;
+        height:10rpx;
+        margin:0 -30rpx;
+        background-color: #F9F9F9;
+    }
+    &:last-child{
+        &::after{
+            background-color: #FFFFFF;
+        }
+    }
+    .question-info{
+        display: flex;
+        padding: 10rpx 0;
+        .question-title{
+            font-size: 32rpx;
+            color:#333333;
+            .item-label{
+                padding:7rpx 12rpx;
+                font-size: 22rpx;
+                text-align: center;
+                background-color: #333333;
+                color: #E4B478;	
+                border-radius: 21rpx;
+                margin-right:15rpx ;		
+            }
+        }
+        .item-answer {
+            display: flex;
+            align-items: center;
+            .answer {
+                width:150rpx;
+                height: 97rpx;
+                box-sizing: border-box;
+                padding:30rpx 15rpx;
+                border-radius: 18rpx;
+                background:linear-gradient(253deg, #E3B377 0%, #FBCA8E 100%);
+                display: flex;
+                justify-content: space-around;
+                align-items: center;
+                color: #FFFFFF;
+                font-size: 24rpx;
+                .load-img{
+                    width: 34rpx;
+                    height: 34rpx;
+                    margin-right: 10rpx;
+                    animation: circle 1s linear infinite;
+                }
+                .music-img{
+                    width: 25rpx;
+                   /*  height: 34rpx; */
+                    margin-right: 10rpx;
+                }
+                @keyframes circle {
+                    0%{
+                        transform: rotateZ(0);
+                    }
+                    100%{
+                        transform: rotateZ(360deg);
+                    }
+                }
+            }
+        }
+    }
+    .item-time {
+        color: #999999;
+        font-size: 24rpx;
+        margin:20rpx 0;
+        display: block;
+    }
+    
 }