问答
<p>[TOC]</p>
<h4>使用</h4>
<p>基础功能: 问答分类列表、问答进行操作、提问、回答、开启/关闭问答</p>
<p>提问者组件(vhQaQuestioner):提问,提问列表(pc + wap)
回答者组件(vhQaAnswer):文字回答、开启/关闭问答、公开此问答等功能(pc)</p>
<pre><code class="language-html"><vhQaAnswer
:roomId="roomInfo.room_id"
:accountId="roomInfo.third_party_user_id"
:isQa="isQa"
avatarType="nickname"
ref="qa"
></vhQaAnswer></code></pre>
<h4>props</h4>
<table>
<thead>
<tr>
<th style="text-align: left;">参数</th>
<th style="text-align: left;">说明</th>
<th style="text-align: left;">类型</th>
<th style="text-align: left;">可选值</th>
<th style="text-align: left;">默认值</th>
<th style="text-align: left;">必填</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">roomId</td>
<td style="text-align: left;">房间 id</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">accountId</td>
<td style="text-align: left;">用户 id</td>
<td style="text-align: left;">string</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">avatarType</td>
<td style="text-align: left;">头像类型</td>
<td style="text-align: left;">string</td>
<td style="text-align: left;">img 显示图片(未上传显示默认图)nickName 显示昵称首字母</td>
<td style="text-align: left;">img</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">isQa</td>
<td style="text-align: left;">问答是否打开</td>
<td style="text-align: left;">boolean</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">false</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">isBack</td>
<td style="text-align: left;">弹框背景</td>
<td style="text-align: left;">boolean</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">false</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">faceArr</td>
<td style="text-align: left;">自定义表情</td>
<td style="text-align: left;">数组</td>
<td style="text-align: left;">数组[{ name: '',src: ''}]</td>
<td style="text-align: left;">提供默认</td>
<td style="text-align: left;">否</td>
</tr>
</tbody>
</table>
<h4>EventBus</h4>
<ul>
<li>
<p>新消息 components_qa_new_content
触发时机:当前用户的问答区域展示内容区发生变化时
参数说明:(参照下面示例)
示例:</p>
<pre><code class="language-javascript">this.$vhallEvent.$on('components_qa_new_content', data => {
let permission = data.qaPermission // 参数 prop - qaPermission的值
let type = data.type // 变更内容的类型 create新的提问 answer新的文字回答 answerDeal提问处理 recall 撤回回答
let status = data.status // 类型的具体分类,type为answerDeal时才有值 '语音回复'/'不处理'
if(permission) {
if(type=='create') {
// 新的提问
} else if(type == 'answer') {
// 新的文文字回答
} else if(type == 'answerDeal' && status == '语音回复') {
// 提问被标记为语音回复
} else if(type == 'answerDeal' && status == '不处理') {
// 提问不做处理
} else if(type == 'recall') {
// 文字回复被撤回
}
} else {
if(type=='create') {
// 新的提问
} else if(type == 'answer') {
// 新的文文字回答
} else if(type == 'answerDeal' && status == '语音回复') {
// 提问被标记为语音回复
} else if(type == 'recall') {
// 文字回复被撤回
}
}
})</code></pre>
<pre><code class="language-html"><vhQaQuestioner
:roomId="roomInfo.room_id"
:accountId="roomInfo.third_party_user_id"
:qaPermission="false"
:isQa="isQa"
:banChatAll="banChatAll"
:banChat="banChat"
ref="qa"
></vhQaQuestioner></code></pre>
</li>
</ul>
<h4>props</h4>
<table>
<thead>
<tr>
<th style="text-align: left;">参数</th>
<th style="text-align: left;">说明</th>
<th style="text-align: left;">类型</th>
<th style="text-align: left;">可选值</th>
<th style="text-align: left;">默认值</th>
<th style="text-align: left;">必填</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">roomId</td>
<td style="text-align: left;">房间 id</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">accountId</td>
<td style="text-align: left;">用户 id</td>
<td style="text-align: left;">string</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">banChatAll</td>
<td style="text-align: left;">是否全体禁言</td>
<td style="text-align: left;">boolean</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">false</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">banChat</td>
<td style="text-align: left;">是否被禁言</td>
<td style="text-align: left;">boolean</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">false</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">isPrivate</td>
<td style="text-align: left;">当qaType=‘all’是生效,默认的提问的类型是否为私密</td>
<td style="text-align: left;">Boolean</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">true</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">avatarType</td>
<td style="text-align: left;">头像类型</td>
<td style="text-align: left;">string</td>
<td style="text-align: left;">img 显示图片(未上传显示默认图)nickName 显示昵称首字母</td>
<td style="text-align: left;">img</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">faceArr</td>
<td style="text-align: left;">自定义表情</td>
<td style="text-align: left;">数组</td>
<td style="text-align: left;">数组[{ name: '',src: ''}]</td>
<td style="text-align: left;">提供默认</td>
<td style="text-align: left;">否</td>
</tr>
</tbody>
</table>
<h4>方法</h4>
<ul>
<li>
<p>openQa(value)
参数:
value: true/false
说明:打开房间的 问答功能</p>
<pre><code class="language-javascript">this.$refs.qa.openQa(true) // 打开问答功能
this.$refs.qa.openQa(false) // 关闭问答功能</code></pre>
</li>
<li>open()
说明:展示问答面板
<pre><code class="language-javascript">this.$refs.qa.open()</code></pre></li>
</ul>
<h4>EventBus</h4>
<ul>
<li>
<p>新消息 components_qa_new_content
触发时机:当前用户的问答区域展示内容区发生变化时
参数说明:(参照下面示例)
示例:</p>
<pre><code class="language-javascript">this.$vhallEvent.$on('components_qa_new_content', data => {
let permission = data.qaPermission // 参数 prop - qaPermission的值
let type = data.type // 变更内容的类型 create新的提问 answer新的文字回答 answerDeal提问处理 recall 撤回回答
let status = data.status // 类型的具体分类,type为answerDeal时才有值 '语音回复'/'不处理'
if(permission) {
if(type=='create') {
// 新的提问
} else if(type == 'answer') {
// 新的文文字回答
} else if(type == 'answerDeal' && status == '语音回复') {
// 提问被标记为语音回复
} else if(type == 'answerDeal' && status == '不处理') {
// 提问不做处理
} else if(type == 'recall') {
// 文字回复被撤回
}
} else {
if(type=='create') {
// 新的提问
} else if(type == 'answer') {
// 新的文文字回答
} else if(type == 'answerDeal' && status == '语音回复') {
// 提问被标记为语音回复
} else if(type == 'recall') {
// 文字回复被撤回
}
}
})</code></pre>
</li>
</ul>