|
@@ -11,173 +11,189 @@
|
|
|
>
|
|
|
</view>
|
|
|
<view class="answer-list">
|
|
|
- <view class="answer-item" v-for="item in questionList" :key="item.id">
|
|
|
- <view style="display: flex">
|
|
|
- <text class="item-label" v-if="vistor.type===1||item.status===2">{{ item.label }}</text>
|
|
|
- <text class="item-title">{{ item.text }}</text>
|
|
|
- </view>
|
|
|
- <text class="item-time"> 提问时间:{{ item.time }} </text>
|
|
|
- <view class="item-answer">
|
|
|
- <template v-if="item.status === 2">
|
|
|
- <view class="answer" @click="handleAudio(item)">
|
|
|
- <text>{{ item.answer.isplay ? "暂停" : "播放" }}</text>
|
|
|
- <template v-if="item.answer.isplay || item.answer.ispause">
|
|
|
- <text
|
|
|
- >{{ currentAudioMsg.audioCurrentTime }}/{{
|
|
|
- item.answer.audioTime
|
|
|
- }}</text
|
|
|
- >
|
|
|
+ <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>
|
|
|
- <text>{{ item.answer.audioTime }}</text>
|
|
|
+ <image
|
|
|
+ class="load-img"
|
|
|
+ src="../static/loading.png"
|
|
|
+ mode="aspectFill"
|
|
|
+ />
|
|
|
+ <text>{{ moment(item.answer.audioTime).format("mm:ss") }}</text>
|
|
|
</template>
|
|
|
</view>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <view class="noanswer">
|
|
|
- <!-- 提问者 -->
|
|
|
- <text v-if="vistor.type === 2"
|
|
|
- >暂无回复,研究员正在快马加鞭的赶来</text
|
|
|
- >
|
|
|
- <!-- 回答者 -->
|
|
|
- <view v-else
|
|
|
- >暂无回复,<text class="url" @click="toDetail(item)">立即回复</text></view>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <!-- <view class="item-type" @click="toDetail(item)">
|
|
|
- {{item.type===1?'去回答':'查看'}}
|
|
|
- </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";
|
|
|
-const moment = require("@/utils/moment-with-locales.min");
|
|
|
-moment.locale("zh-cn");
|
|
|
+import { apiBarTotal } from "@/api/question.js";
|
|
|
export default {
|
|
|
mixins: [mixin],
|
|
|
data() {
|
|
|
return {
|
|
|
questionList: [],
|
|
|
- mockwaitList: [
|
|
|
- {
|
|
|
- id: 1, //问题id
|
|
|
- text: "疫情下全球苯乙烯市场有什么动荡和影响?", //问题描述
|
|
|
- time: "2022.5.23 14:40", //提问时间
|
|
|
- status: 1, //问题状态:1待回答,2已回答
|
|
|
- answer: {
|
|
|
- source: "", // 回答音频
|
|
|
- time: "", //回答时间
|
|
|
- audioTime: 0, //音频长度,单位秒
|
|
|
- isplay: false,
|
|
|
- ispause: false,
|
|
|
- },
|
|
|
- label: "苯乙烯", // 问题分类
|
|
|
- },
|
|
|
- ], //待回答的问题
|
|
|
- mockrepliedList: [
|
|
|
- {
|
|
|
- id: 1, //问题id
|
|
|
- text: "疫情下全球苯乙烯市场有什么动荡和影响?", //问题描述
|
|
|
- time: "2022.5.23 14:40", //提问时间
|
|
|
- status: 2, //问题状态:1待回答,2已回答
|
|
|
- answer: {
|
|
|
- source:
|
|
|
- "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3", // 回答音频
|
|
|
- time: "2022.5.23 15:40", //回答时间
|
|
|
- audioTime: moment(21 * 1000).format("mm:ss"), //音频长度,单位秒
|
|
|
- isplay: false,
|
|
|
- ispause: false,
|
|
|
- },
|
|
|
- label: "苯乙烯", // 问题分类
|
|
|
- },
|
|
|
- ], //已回答的问题
|
|
|
- barList: [
|
|
|
- {
|
|
|
- label: "待回答",
|
|
|
- key: "Wait",
|
|
|
- num: 1,
|
|
|
- },
|
|
|
- {
|
|
|
- label: "已回答",
|
|
|
- key: "Replied",
|
|
|
- num: 1,
|
|
|
- },
|
|
|
- {
|
|
|
- label: "全部",
|
|
|
- key: "Total",
|
|
|
- num: 2,
|
|
|
- },
|
|
|
- ],
|
|
|
+ barList: [],
|
|
|
selectKey: "Wait",
|
|
|
- Wait: 1,
|
|
|
- Replied: 1,
|
|
|
- Total: 2,
|
|
|
- vistor: {
|
|
|
- type: 1, //1研究员,2客户
|
|
|
+ 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) {
|
|
|
- uni.navigateTo({ url: "/pages-question/answerDetail" });
|
|
|
+ //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();
|
|
|
},
|
|
|
- getQuestionData() {
|
|
|
- if (this.selectKey === "Wait") {
|
|
|
- this.questionList = this.mockwaitList;
|
|
|
- } else if (this.selectKey === "Replied") {
|
|
|
- this.questionList = this.mockrepliedList;
|
|
|
- } else {
|
|
|
- this.questionList = this.mockwaitList.concat(this.mockrepliedList);
|
|
|
+ getVisitor() {
|
|
|
+ if(this.visitor.type===1){
|
|
|
+ this.selectKey = 'Wait'
|
|
|
+ }else{
|
|
|
+ this.selectKey = 'Replied'
|
|
|
}
|
|
|
},
|
|
|
- //点击某条音频
|
|
|
- handleAudio(item) {
|
|
|
- const { source, isplay } = item.answer;
|
|
|
- if (isplay) {
|
|
|
- //说明是播放->暂停
|
|
|
- this.innerAudio.pause();
|
|
|
- } else if (item.id === this.currentAudioMsg.id) {
|
|
|
- //说明是暂停->播放
|
|
|
- this.innerAudio.play();
|
|
|
- } else {
|
|
|
- console.log("aaa", source, this.innerAudio.src);
|
|
|
- //说明是第一次播放或点击其他播放项
|
|
|
- this.changeCurrentAudio(item);
|
|
|
- this.innerAudio.stop();
|
|
|
- this.innerAudio.src = source;
|
|
|
- /* this.innerAudio.play() */
|
|
|
- this.handleAudioPlay();
|
|
|
- }
|
|
|
- this.quesionList.map((i) => {
|
|
|
- if (i.id === item.id) {
|
|
|
- if (i.answer.isplay) {
|
|
|
- i.answer.ispause = true;
|
|
|
- }
|
|
|
- i.answer.isplay = !i.answer.isplay;
|
|
|
- } else {
|
|
|
- i.answer.isplay = false;
|
|
|
- i.answer.ispause = false;
|
|
|
- }
|
|
|
- });
|
|
|
+ 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: 35rpx;
|
|
|
+ padding: 30rpx;
|
|
|
.answer-bar {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
@@ -196,21 +212,71 @@ export default {
|
|
|
}
|
|
|
.answer-list {
|
|
|
margin-top: 20rpx;
|
|
|
- .answer-item {
|
|
|
+ .question-item {
|
|
|
margin-bottom: 20rpx;
|
|
|
- .item-label {
|
|
|
- width: 90rpx;
|
|
|
- height: 41rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- text-align: center;
|
|
|
- line-height: 41rpx;
|
|
|
- background-color: #333333;
|
|
|
- color: #e4b478;
|
|
|
- }
|
|
|
- .item-title {
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
display: block;
|
|
|
- font-size: 32rpx;
|
|
|
- color: #333333;
|
|
|
+ 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;
|
|
@@ -218,35 +284,28 @@ export default {
|
|
|
margin: 20rpx 0;
|
|
|
display: block;
|
|
|
}
|
|
|
- .item-answer {
|
|
|
- display: flex;
|
|
|
- width: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 20rpx;
|
|
|
- align-items: center;
|
|
|
- .answer {
|
|
|
- width: 340rpx;
|
|
|
- height: 74rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 20rpx 30rpx;
|
|
|
- border-radius: 37rpx;
|
|
|
- background: linear-gradient(253deg, #e3b377 0%, #fbca8e 100%);
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- .noanswer{
|
|
|
- width:100%;
|
|
|
- height:145rpx;
|
|
|
- text-align: center;
|
|
|
- line-height: 145rpx;
|
|
|
- background-color: #F5F5F5;
|
|
|
- color: #666666;
|
|
|
- .url{
|
|
|
- color: #E3B377;
|
|
|
- }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|