question.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432
  1. <template>
  2. <view class="question-wrap">
  3. <template v-if="hasAuth">
  4. <view class="question-top" :class="{'noAuth':!(isUserResearcher||userInfo.status&&userAuth)}">
  5. <view @click="showPopup" v-if="isUserResearcher||userInfo.status&&userAuth"
  6. style="display:flex;align-items: center;margin-left:30rpx;">
  7. <image src="../../static/question/select.png" mode="widthFix" class="menu-icon"/>
  8. <text style="color:#E3B377;font-size:28rpx;">筛选</text>
  9. </view>
  10. <van-popup :show="isPopupShow" position="left" :close-on-click-overlay="true"
  11. @close="isPopupShow = false"
  12. custom-style="height: 100%;width:50%;"
  13. @touchmove.stop.prevent>
  14. <view class="pop-wrap">
  15. <view class="pop-option-list">
  16. <van-collapse :value="activeName" @change="changeSelecOption" accordion :border="false">
  17. <van-collapse-item :border="false" :title="item.research_group_name" :name="index" v-for="(item, index) in optionList"
  18. :key="index">
  19. <view class="option-btn-wrap">
  20. <view class="option-btn"
  21. v-for=" i in item.children" :key="i.research_group_id"
  22. @click="handleOptionClick(i)"
  23. :class="{'active':selectName===i.research_group_name,'full':i.research_group_name.length>4}"
  24. >
  25. {{ i.research_group_name }}
  26. </view>
  27. </view>
  28. </van-collapse-item>
  29. </van-collapse>
  30. </view>
  31. </view>
  32. </van-popup>
  33. </view>
  34. <view class="report-empty-box" v-if="questionList.length==0">
  35. <image :src="globalImgUrls.activityNoAuth" mode="widthFix" style="width:100%;"/>
  36. <view>暂无提问<text v-if="userInfo.is_inner!==1">,快试试提问功能吧</text></view>
  37. </view>
  38. <view class="question-list" :class="{'last':finished}">
  39. <view class="question-item" v-for="item in questionList" :key="item.community_question_id">
  40. <view class="question-info">
  41. <view style="flex:1;" class="question-title">
  42. <text class="item-label">{{item.research_group_second_name}}</text>
  43. <!-- <text class="item-title"> -->{{ item.question_content }}<!-- </text> -->
  44. </view>
  45. <view class="item-answer">
  46. <view class="answer" @click="handleAudio(item)">
  47. <template v-if="!item.loading">
  48. <image class="music-img" :src="item.answer.isplay?playImgSrc:pauseImgSrc" mode="widthFix"/>
  49. <template v-if="item.answer.isplay || item.answer.ispause">
  50. <text>{{
  51. item.answer.audioTime - currentAudioMsg.audioCurrentTime>0?
  52. moment(item.answer.audioTime - currentAudioMsg.audioCurrentTime).format('mm:ss')
  53. :'00:00'}}
  54. </text>
  55. </template>
  56. <template v-else>
  57. <text>{{ moment(item.answer.audioTime).format('mm:ss') }}</text>
  58. </template>
  59. </template>
  60. <template v-else>
  61. <image class="load-img" src="../../static/loading.png" mode="aspectFill" />
  62. <text>{{ moment(item.answer.audioTime).format('mm:ss') }}</text>
  63. </template>
  64. </view>
  65. </view>
  66. </view>
  67. <text class="item-time">提问时间:{{ item.create_time }}</text>
  68. </view>
  69. </view>
  70. <template v-if="isUserResearcher">
  71. <view class="btn-wrap">
  72. <view class="btn topage-button" @click="toPage('question')" v-if="userInfo.status&&userAuth">
  73. <image
  74. src="../../static/question/askquestion.png"
  75. mode="scaleToFill"
  76. style="width:34rpx;height:34rpx;"
  77. />
  78. <text>我要提问</text>
  79. </view>
  80. <view class="btn topage-button" @click="toPage('ask')" v-if="userInfo.status&&userAuth">
  81. <view>待回答<text v-if="isUserResearcher" style="margin-left:5rpx;">{{'('+waitNum+')'}}</text></view>
  82. </view>
  83. </view>
  84. </template>
  85. <template v-else>
  86. <view class="topage-btn topage-button" @click="toPage('question')" v-if="userInfo.status&&userAuth">
  87. <image
  88. src="../../static/question/askquestion.png"
  89. mode="scaleToFill"
  90. style="width:34rpx;height:34rpx;"
  91. />
  92. <text>我要提问</text>
  93. </view>
  94. </template>
  95. <!-- <view class="topage-btn" @click="toPage" v-if="isUserResearcher||userInfo.status&&userAuth">
  96. <image
  97. v-if="!isUserResearcher"
  98. src="../../static/question/askquestion.png"
  99. mode="scaleToFill"
  100. style="width:34rpx;height:34rpx;"
  101. />
  102. {{ isUserResearcher ? '待回答' : '我要提问' }} <text v-if="isUserResearcher" style="margin-left:5rpx;">{{'('+waitNum+')'}}</text>
  103. </view> -->
  104. </template>
  105. <!-- 没有权限 -->
  106. <template v-else>
  107. <view class="noAuth-wrap">
  108. <image class="img" :src="globalImgUrls.activityNoAuth" mode="widthFix"></image>
  109. <view class="auth-text">您暂无权限查看问答社区</view>
  110. <view class="auth-text" v-if="noAuthInfo.type==='contact'">若想查看可以联系对口销售</view>
  111. <view class="auth-text" v-else>若想查看可以申请开通</view>
  112. <view class="auth-text" v-if="noAuthInfo.type==='contact'">
  113. {{noAuthInfo.name||''}}:<text @click="handleCallPhone(noAuthInfo.mobile+'')">{{noAuthInfo.mobile||''}}</text>
  114. </view>
  115. <view class="apply" @click="handleGoApply" v-else>立即申请</view>
  116. </view>
  117. </template>
  118. <!-- 弹窗 -->
  119. <van-popup :show="pupData.show" round @close="pupData.show = false" closeable :close-on-click-overlay="false">
  120. <view class="global-pup">
  121. <view class="content">
  122. <rich-text style="flex:none;margin-bottom:20rpx;" :nodes="pupData.content"></rich-text>
  123. <view class="contact" v-if="pupData.type == 'contact'">
  124. {{pupData.saleName||''}}:<text @click="handleCallPhone(pupData.mobile)">{{pupData.mobile||''}}</text>
  125. </view>
  126. <view class="apply" v-else-if="pupData.type == 'apply'">
  127. <view @click="handleApply">立即申请</view>
  128. </view>
  129. </view>
  130. </view>
  131. </van-popup>
  132. </view>
  133. </template>
  134. <script>
  135. import mixin from "../../mixin/questionMixin";
  136. import {apiOptionGroupList,apiBarTotal} from '@/api/question'
  137. export default {
  138. mixins: [mixin],
  139. data() {
  140. return {
  141. questionList: [],
  142. isPopupShow: false,//弹出层是否展示
  143. optionList: [],
  144. activeNames: [],//collapse
  145. activeName:'',
  146. selectName:'',
  147. pauseImgSrc:'../../static/question/recordplay.png',
  148. playImgSrc:'../../static/question/recordpause.png',
  149. waitNum:0,
  150. /* userInfo:{
  151. is_inner:1,//0:外部客户;1内部员工
  152. status:'试用',
  153. is_suspend:0,
  154. is_researcher:0,
  155. //seal_name:'梁娜',
  156. //seal_mobile:123456,
  157. },//mock用户信息 */
  158. }
  159. },
  160. watch:{
  161. selectName(){
  162. this.getQuestionList(3)
  163. }
  164. },
  165. computed:{
  166. },
  167. onLoad() {
  168. /* this.getVistor()
  169. this.getOptionList()
  170. this.getQuestionList(3) */
  171. },
  172. onShow() {
  173. this.getWaitNum()
  174. this.getOptionList()
  175. this.getQuestionList(3)
  176. },
  177. onReachBottom() {
  178. if(this.finished) return
  179. this.page++
  180. this.getQuestionList(3)
  181. },
  182. onPullDownRefresh() {
  183. this.resetAudio()
  184. this.refreshPage()
  185. setTimeout(() => {
  186. uni.stopPullDownRefresh()
  187. }, 1500);
  188. },
  189. methods: {
  190. //获取研究员问答列表数量统计
  191. getWaitNum() {
  192. if(this.userInfo.is_inner!==1) return
  193. //如果是研究员,则请求问答列表数量统计
  194. apiBarTotal().then(res=>{
  195. if(res.code===200){
  196. this.waitNum = res.data.wait
  197. }
  198. })
  199. },
  200. //获取筛选列表
  201. async getOptionList(){
  202. const res = await apiOptionGroupList()
  203. if(res.code===200){
  204. this.optionList = res.data
  205. }
  206. },
  207. //点击筛选
  208. showPopup() {
  209. this.isPopupShow = true
  210. },
  211. //点击一级分类
  212. changeSelecOption(e) {
  213. this.activeName = e.detail
  214. },
  215. //点击二级分类
  216. handleOptionClick(item){
  217. //重复点击代表取消
  218. if(this.selectId===item.research_group_id){
  219. this.selectId=-1
  220. this.selectName=''
  221. }else{
  222. this.selectId = item.research_group_id
  223. this.selectName = item.research_group_name
  224. }
  225. this.page = 1
  226. this.isPopupShow = false
  227. },
  228. //点击'我要提问' or '待回答'
  229. toPage(type) {
  230. if(type==='question'){
  231. uni.navigateTo({ url: '/pages-question/hasQuestion' })
  232. }else{
  233. uni.navigateTo({ url: '/pages-question/answerList' })
  234. }
  235. },
  236. //转发分享
  237. onShareAppMessage(){
  238. return{
  239. title:'问答社区',
  240. path:'/pages/question/question'
  241. }
  242. },
  243. refreshPage() {
  244. this.page = 1
  245. this.selectId = -1
  246. this.questionList = []
  247. this.finished = false
  248. this.getQuestionList(3)
  249. },
  250. }
  251. }
  252. </script>
  253. <style lang="scss">
  254. .question-wrap {
  255. .van-popup--bottom{
  256. padding-bottom: 0 !important;
  257. }
  258. /deep/ .van-cell__title,
  259. .van-cell__value {
  260. flex: none !important;
  261. }
  262. .van-collapse-item{
  263. &.van-hairline--top{
  264. &::after{
  265. border: none !important;
  266. }
  267. }
  268. .van-cell{
  269. padding-left:0 !important;
  270. }
  271. }
  272. .van-collapse-item__content{
  273. padding:0;
  274. }
  275. }
  276. page {
  277. padding-bottom: env(safe-area-inset-bottom);
  278. }
  279. </style>
  280. <style lang="scss" scoped>
  281. .question-wrap {
  282. padding: 0 30rpx 80rpx 30rpx;
  283. background-color: #FFFFFF;
  284. .question-top {
  285. display: flex;
  286. flex: auto;
  287. align-items: center;
  288. height: 100rpx;
  289. background-color: white;
  290. position: sticky;
  291. top: 0;
  292. left: 0;
  293. margin:0 -30rpx;
  294. z-index: 99;
  295. &.noAuth{
  296. height:20rpx;
  297. }
  298. /* border-top: 1rpx solid rgba(0, 0, 0, 0.1); */
  299. .text{
  300. width:240rpx;
  301. height:70rpx;
  302. line-height: 70rpx;
  303. background-color: #F5F5F5;
  304. border-radius: 4rpx;
  305. color:#666666;
  306. text-align: center;
  307. &.active{
  308. color:#E3B377;
  309. background-color: #FDF8F2;
  310. }
  311. }
  312. .auth-box {
  313. flex: 1;
  314. }
  315. .menu-icon {
  316. width: 34rpx;
  317. height:34rpx;
  318. }
  319. .pop-wrap{
  320. height: 100%;
  321. padding: 50rpx 34rpx;
  322. .pop-option-list {
  323. .option-btn-wrap {
  324. display: flex;
  325. justify-content: space-between;
  326. flex-wrap: wrap;
  327. margin-bottom: 20rpx;
  328. .option-btn {
  329. min-width: 145rpx;
  330. height:76rpx;
  331. line-height: 76rpx;
  332. text-align: center;
  333. color: black;
  334. background-color: #F6F6F6;
  335. border-radius: 4rpx;
  336. margin-top: 10rpx;
  337. &.active{
  338. background-color: #FAEEDE;
  339. }
  340. &.full{
  341. width:100%;
  342. }
  343. }
  344. }
  345. }
  346. .pop-btn{
  347. height:80rpx;
  348. margin:0 -34rpx;
  349. text-align: center;
  350. line-height: 80rpx;
  351. color:#FFFFFF;
  352. background-color: #E6B77D;
  353. }
  354. }
  355. }
  356. .question-list {
  357. padding-bottom: 34rpx;
  358. &.last{
  359. padding-bottom: 260rpx;
  360. }
  361. }
  362. .topage-btn {
  363. position: fixed;
  364. left:50%;
  365. margin-left: -257rpx;
  366. bottom: 215rpx;
  367. width:514rpx;
  368. }
  369. .topage-button{
  370. height: 80rpx;
  371. text-align: center;
  372. line-height: 80rpx;
  373. border-radius: 40rpx;
  374. background-color: #333333;
  375. box-shadow: 0px 4px 20px 1px rgba(160, 126, 84, 0.25);
  376. color: #E3B377;
  377. display: flex;
  378. justify-content: center;
  379. align-items: center;
  380. image{
  381. margin-right: 10rpx;
  382. margin-top: -2rpx;
  383. }
  384. }
  385. .btn-wrap{
  386. position: fixed;
  387. width:100%;
  388. margin-left: -30rpx;
  389. display: flex;
  390. justify-content: center;
  391. bottom: 215rpx;
  392. .btn{
  393. width:300rpx;
  394. height:80rpx;
  395. &:first-child{
  396. margin-right: 30rpx;
  397. }
  398. }
  399. }
  400. .global-pup{
  401. .content{
  402. padding:90rpx 34rpx;
  403. flex-direction: column;
  404. .contact{
  405. text{
  406. margin-left: 15rpx;
  407. color:#E6B77D;
  408. }
  409. }
  410. .apply{
  411. margin-top: 40rpx;
  412. width:390rpx;
  413. height:80rpx;
  414. background-color: #E6B77D;
  415. color: #FFFFFF;
  416. text-align: center;
  417. line-height: 80rpx;
  418. border-radius: 40rpx;
  419. }
  420. }
  421. }
  422. }
  423. </style>