<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>