question.vue 9.0 KB

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