hongze_yb_xcx/pages-question/answerList.vue

<template>
  <view class="answer-page">
    <view class="answer-bar">
      <view
        class="bar-item"
        :class="{ active: item.key === selectKey }"
        @click="changeBar(item)"
        v-for="item in barList"
        :key="item.key"
        >{{ item.label + "(" + item.num + ")" }}</view
      >
    </view>
    <view class="answer-list">
      <view class="report-empty-box" v-if="questionList.length == 0">
        <image :src="globalImgUrls.activityNoAuth" mode="widthFix" style="width:100%;"/>
        <view>暂无数据</view>
      </view>
      <view
        class="question-item"
        v-for="item in questionList"
        :key="item.community_question_id"
        @click="toDetail(item)"
      >
        <view class="question-info">
          <view style="flex: 1" class="question-title">
            <text
              class="item-label"
              v-if="isUserResearcher || item.reply_status === 3"
              >{{ item.chart_permission_name }}</text
            >
            {{ item.question_content }}
          </view>
          <view class="item-answer" v-if="item.reply_status === 3">
            <view class="answer" @click.stop="handleAudio(item)">
              <template v-if="!item.loading">
                <image
                  class="music-img"
                  :src="item.answer.isplay ? playImgSrc : pauseImgSrc"
                  mode="widthFix"
                />
                <template v-if="item.answer.isplay || item.answer.ispause">
									<text>{{
										item.answer.audioTime - currentAudioMsg.audioCurrentTime>0?
										moment(item.answer.audioTime - currentAudioMsg.audioCurrentTime).format('mm:ss')
										:'00:00'}}
									</text>
								</template>
                <template v-else>
                  <text>{{
                    moment(item.answer.audioTime).format("mm:ss")
                  }}</text>
                </template>
              </template>
              <template v-else>
                <image
                  class="load-img"
                  src="../static/loading.png"
                  mode="aspectFill"
                />
                <text>{{ moment(item.answer.audioTime).format("mm:ss") }}</text>
              </template>
            </view>
          </view>
        </view>
        <text class="item-time">提问时间:{{ item.create_time }}</text>
      </view>
    </view>
    <!-- 弹窗 -->
    <van-popup
      :show="pupData.show"
      round
      @close="pupData.show = false"
      closeable
      :close-on-click-overlay="false"
    >
      <view class="global-pup">
        <view class="content">
          <rich-text
            style="flex: none; margin-bottom: 20rpx"
            :nodes="pupData.content"
          ></rich-text>
          <view class="contact" v-if="pupData.type === 'contact'">
            {{ pupData.saleName || "梁娜" }}:<text
              @click="handleCallPhone(pupData.mobile)"
              >{{ pupData.mobile || "123456" }}</text
            >
          </view>
          <view class="apply" v-else-if="pupData.type === 'apply'">
            <view @click="handleApply">立即申请</view>
          </view>
        </view>
      </view>
    </van-popup>
  </view>
</template>
<script>
import mixin from "../mixin/questionMixin";
import { apiBarTotal ,apiSetRead} from "@/api/question.js";
export default {
  mixins: [mixin],
  data() {
    return {
      questionList: [],
      barList: [],
      selectKey: "Wait",
      pauseImgSrc: "../static/question/recordplay.png",
      playImgSrc: "../static/question/recordpause.png",
      /* userInfo:{
				is_inner:1,//0:外部客户;1内部员工
				status:'试用',
				is_suspend:0,
				is_researcher:0
			},//mock用户信息 */
    };
  },
  onLoad() {
    /* this.getVisitor();
    this.getBarList();
    this.getQuestionData(); */
  },
  onShow() {
    this.getSelectKey();
    this.getBarList();
    this.getQuestionData();
  },
  onReachBottom() {
    if (this.finished) return;
    this.page++;
    this.getQuestionData();
  },
  methods: {
    toDetail(item) {
      //reply_status:1-待分配 2-待回答 3-已回答
      if (this.isUserResearcher&& item.reply_status === 2) {
        uni.navigateTo({ url: "/pages-question/answerDetail?id=" + item.id });
      }
    },
    //点击bar
    changeBar({ key }) {
      if (key === this.selectKey) return;
      this.selectKey = key;
      this.questionList = [];
      this.page = 1;
      this.resetAudio();
      this.getQuestionData();
    },
    getSelectKey() {
      if(this.userInfo.is_inner === 1){
        this.selectKey = 'Wait'
      }else{
        this.selectKey = 'Replied'
      }
    },
    async getBarList() {
      const res = await apiBarTotal();
      if (res.code !== 200) return;
      const { replied, wait, total } = res.data;
      //客户: 已回答 未回答 全部
      const customBar = [
        {
          label: "已回答",
          key: "Replied",
          num: replied,
        },
        {
          label: "未回答",
          key: "Wait",
          num: wait,
        },
        {
          label: "全部",
          key: "Total",
          num: total,
        },
      ];
      //研究员: 待回答 已回答 全部
      const researBar = [
        {
          label: "待回答",
          key: "Wait",
          num: wait,
        },
        {
          label: "已回答",
          key: "Replied",
          num: replied,
        },
        {
          label: "全部",
          key: "Total",
          num: total,
        },
      ];
      this.barList = this.isUserResearcher ? researBar : customBar;
    },
    async getQuestionData() {
      const reply_status = { Wait: 2, Replied: 3, Total: 0 };
      await this.getQuestionList(reply_status[this.selectKey],1);
      this.setQuestionsRead()
    },
    async setQuestionsRead(){
      //获取未读的数据,请求未读接口变为已读
      let unReadArr = []
      this.questionList.forEach(item=>{
        let isReadKey = this.isUserResearcher?'replier_is_read':'is_read'
        if(item[isReadKey]===0){
          unReadArr.push(item.community_question_id)
        }
      })
      if(unReadArr.length===0) return
      await apiSetRead({
        question_ids:unReadArr.join(',')
      })
    }
  },
};
</script>
<style lang="scss" scoped>
.answer-page {
  padding: 30rpx;
  .answer-bar {
    display: flex;
    justify-content: space-between;
    .bar-item {
      width: 206rpx;
      color: #666666;
      background-color: #f5f5f5;
      height: 70rpx;
      line-height: 70rpx;
      text-align: center;
      &.active {
        background-color: #fdf8f2;
        color: #e3b377;
      }
    }
  }
  .answer-list {
    margin-top: 20rpx;
  }
  .global-pup {
    .content {
      padding: 90rpx 34rpx;
      flex-direction: column;
      .contact {
        text {
          margin-left: 15rpx;
          color: #e6b77d;
        }
      }
      .apply {
        margin-top: 40rpx;
        width: 390rpx;
        height: 80rpx;
        background-color: #e6b77d;
        color: #ffffff;
        text-align: center;
        line-height: 80rpx;
        border-radius: 40rpx;
      }
    }
  }
}
</style>