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" />
        <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="visitor.type === 1 || 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="aspectFill"
                />
                <template v-if="item.answer.isplay || item.answer.ispause">
                  <text>{{
                    moment(
                      item.answer.audioTime - currentAudioMsg.audioCurrentTime
                    ).format("mm:ss")
                  }}</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 } from "@/api/question.js";
export default {
  mixins: [mixin],
  data() {
    return {
      questionList: [],
      barList: [],
      selectKey: "Wait",
      visitor: {
        type: 2, //1研究员,2客户
      },
      pauseImgSrc: "../static/audio-pause-2.png",
      playImgSrc: "../static/audio-doing.png",
    };
  },
  onLoad() {
    this.getVisitor();
    this.getBarList();
    this.getQuestionData();
  },
  onReachBottom() {
    if (this.finished) return;
    this.page++;
    this.getQuestionData();
  },
  methods: {
    toDetail(item) {
      //reply_status:1-待分配 2-待回答 3-已回答
      if (this.visitor.type === 1 && 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.getQuestionData();
    },
    getVisitor() {
      if(this.visitor.type===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.visitor.type === 2 ? customBar : researBar;
    },
    getQuestionData() {
      const reply_status = { Wait: 2, Replied: 3, Total: 0 };
      this.getQuestionList(reply_status[this.selectKey]);
    },
  },
};
</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;
    .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 {
      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>