reportList.vue 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313
  1. <template>
  2. <view class="report-list-page">
  3. <van-sticky style="background: #fff">
  4. <view class="flex search-wrap">
  5. <searchBox style="flex: 1" :focus="focus" placeholder="请输入报告标题或关键字" :hasRightBtn="false" @change="onChange" @search="onSearch"></searchBox>
  6. <view class="filter-box" @click="showFilter=true" v-if="classifyList.length>0">
  7. <image src="./static/filter-icon.png" mode="aspectFill"></image>
  8. <text>筛选</text>
  9. </view>
  10. </view>
  11. </van-sticky>
  12. <view class="report-empty-box" v-if="finished&&list.length==0">
  13. <image :src="globalImgUrls.chartEmpty" mode="widthFix" />
  14. <view>{{searchVal?'找不到对应报告,试试别的搜索词吧':'暂无报告'}}</view>
  15. </view>
  16. <view class="report-list-wrap" :style="{paddingBottom:showAudioPop&&'90px'}" v-else>
  17. <view class="flex item" v-for="item in list" :key="item.report_id" @click="goReportDetail(item)">
  18. <image class="img" :src="item.report_img_url" mode="aspectFill" />
  19. <view class="con">
  20. <view class="title" v-html="item.title"></view>
  21. <view class="info" v-html="item.classify_name_second"></view>
  22. <view class="time">{{item.stage}}期 | {{item.publish_time|formatReportTime}}</view>
  23. <view :class="['audio-box',!item.auth_ok&&'grey-audio-box']" @click.stop="handleClickAudio(item)" v-if="item.auth_ok">
  24. <image :src="curAudioReportId==item.report_id&&!curAudioPaused?'./static/audio-s.png':'./static/audio.png'" mode="aspectFill"/>
  25. <text>{{curAudioReportId==item.report_id&&!curAudioPaused?'暂停':'播放'}}</text>
  26. </view>
  27. </view>
  28. </view>
  29. </view>
  30. <!-- 筛选 -->
  31. <van-popup :show="showFilter" position="bottom" :safe-area-inset-bottom="false" round @close="showFilter=false">
  32. <view class="filter-wrap">
  33. <view class="flex top">
  34. <text style="color:#000">筛选</text>
  35. <text style="color:#E3B377" @click="showFilter=false">取消</text>
  36. </view>
  37. <view class="list-box">
  38. <van-row gutter="10">
  39. <van-col span="8" v-for="item in classifyList" :key="item.classify_id_second">
  40. <view
  41. :class="['item',item.classify_id_second==selectSecClassifyId&&'active']"
  42. @click="handleSelectSecClassifyId(item)"
  43. >{{item.classify_second_simple}}</view>
  44. </van-col>
  45. </van-row>
  46. </view>
  47. </view>
  48. </van-popup>
  49. <!-- 音频弹窗 -->
  50. <audioBox v-if="showAudioPop"></audioBox>
  51. </view>
  52. </template>
  53. <script>
  54. import searchBox from "./components/searchBox.vue";
  55. import audioBox from './components/audioBox.vue'
  56. import {apiReportList,apiSubClassifyList} from '@/api/report'
  57. export default {
  58. computed: {
  59. showAudioPop(){//是否显示音频弹窗
  60. return this.$store.state.report.audioData.show
  61. },
  62. curAudioReportId(){//当前播放的音频所属报告
  63. return this.$store.state.report.audioData.reportId
  64. },
  65. curAudioPaused(){//当前音频是否暂停状态
  66. return this.$store.state.report.audioData.paused
  67. }
  68. },
  69. components: {
  70. searchBox,
  71. audioBox
  72. },
  73. data() {
  74. return {
  75. classifyId:0,
  76. classifyName:'',
  77. classifyList:[],
  78. selectSecClassifyId:0,
  79. searchVal: "",
  80. showFilter:false,
  81. list:[],
  82. finished:false,
  83. page:1,
  84. pageSize:20
  85. };
  86. },
  87. onLoad(options) {
  88. this.classifyId=options.classifyId
  89. this.classifyName=decodeURIComponent(options.classifyName)
  90. // 设置title
  91. uni.setNavigationBarTitle({ title: decodeURIComponent(options.classifyName) })
  92. this.getList()
  93. this.getClassifyList()
  94. },
  95. onPullDownRefresh() {
  96. this.page=1
  97. this.list=[]
  98. this.finished=false
  99. this.getList()
  100. this.getClassifyList()
  101. setTimeout(() => {
  102. uni.stopPullDownRefresh()
  103. }, 1500);
  104. },
  105. onReachBottom() {
  106. if(this.finished) return
  107. this.page++
  108. this.getList()
  109. },
  110. onShareAppMessage() {
  111. return {
  112. title:`FICC【${this.classifyName}】`
  113. }
  114. },
  115. methods: {
  116. //获取研报列表
  117. async getList(){
  118. const res=await apiReportList({
  119. classify_id_first:Number(this.classifyId),
  120. classify_id_second:Number(this.selectSecClassifyId),
  121. key_word:this.searchVal,
  122. current_index:this.page,
  123. page_size:this.pageSize
  124. })
  125. if(res.code===200){
  126. let arr=res.data.list||[]
  127. this.list=[...this.list,...arr]
  128. if(res.data.paging.is_end){
  129. this.finished=true
  130. }
  131. }
  132. },
  133. //分类数据
  134. async getClassifyList(){
  135. const res=await apiSubClassifyList({classify_id_first:Number(this.classifyId)})
  136. if(res.code===200){
  137. this.classifyList=res.data
  138. }
  139. },
  140. handleSelectSecClassifyId(item){
  141. if(this.selectSecClassifyId==item.classify_id_second){
  142. this.selectSecClassifyId=''
  143. }else{
  144. this.selectSecClassifyId=item.classify_id_second
  145. }
  146. this.showFilter=false
  147. this.page=1
  148. this.finished=false
  149. this.list=[]
  150. this.getList()
  151. },
  152. onChange(e) {
  153. this.searchVal = e;
  154. },
  155. onSearch() {
  156. console.log("搜索", this.searchVal);
  157. this.page=1
  158. this.finished=false
  159. this.list=[]
  160. this.getList()
  161. },
  162. goReportDetail(item){
  163. uni.navigateTo({ url: '/pages-report/reportDetail?reportId='+item.report_id })
  164. },
  165. handleClickAudio(item){
  166. if(!item.auth_ok) return
  167. if(!item.video_list||item.video_list.length==0){
  168. uni.showToast({
  169. title: '暂无音频',
  170. icon: 'none'
  171. })
  172. return
  173. }
  174. // 判断是否为同一个音频
  175. if(this.$store.state.report.audioData.reportId==item.report_id){
  176. if(this.globalBgMusic.paused){
  177. this.globalBgMusic.play()
  178. }else{
  179. this.globalBgMusic.pause()
  180. }
  181. }else{
  182. this.$store.commit('addAudio', {list:item.video_list,reportId:item.report_id})
  183. }
  184. }
  185. },
  186. };
  187. </script>
  188. <style>
  189. page{
  190. padding-bottom: 0;
  191. }
  192. </style>
  193. <style lang="scss" scoped>
  194. .search-wrap {
  195. background-color: #fff;
  196. padding: 30rpx 34rpx;
  197. align-items: center;
  198. .filter-box {
  199. margin-left: 20rpx;
  200. image {
  201. width: 52rpx;
  202. height: 52rpx;
  203. vertical-align: middle;
  204. }
  205. text {
  206. vertical-align: middle;
  207. color: #e3b377;
  208. font-size: 32rpx;
  209. }
  210. }
  211. }
  212. .report-list-wrap {
  213. padding: 0 34rpx;
  214. .item {
  215. padding-bottom: 30rpx;
  216. margin-bottom: 30rpx;
  217. border-bottom: 1px solid #EDEDED;
  218. .img {
  219. width: 120rpx;
  220. height: 160rpx;
  221. background-color: #f5f5f5;
  222. flex-shrink: 0;
  223. margin-right: 20rpx;
  224. border-radius: 16rpx;
  225. }
  226. .con {
  227. flex: 1;
  228. position: relative;
  229. overflow: hidden;
  230. .title {
  231. font-size: 32rpx;
  232. font-weight: bold;
  233. margin-bottom: 8rpx;
  234. }
  235. .time {
  236. position: absolute;
  237. color: #666666;
  238. bottom: 0;
  239. left: 0;
  240. font-size: 28rpx;
  241. }
  242. .audio-box {
  243. position: absolute;
  244. bottom: 0;
  245. right: 0;
  246. width: 99rpx;
  247. height: 39rpx;
  248. background: #E3B377;
  249. border-radius: 20rpx;
  250. color: #fff;
  251. font-size: 24rpx;
  252. display: flex;
  253. justify-content: center;
  254. align-items: center;
  255. image{
  256. width: 30rpx;
  257. height: 30rpx;
  258. margin-right: 4rpx;
  259. }
  260. }
  261. .grey-audio-box {
  262. background: linear-gradient(114deg, #b0b0b0 0%, #e5e2e2 100%);
  263. }
  264. }
  265. }
  266. }
  267. .filter-wrap{
  268. background-color: #fff;
  269. padding-top: 53rpx;
  270. .top{
  271. font-size: 32rpx;
  272. justify-content: space-between;
  273. margin-bottom: 40rpx;
  274. padding: 0 34rpx;
  275. }
  276. .list-box{
  277. min-height: 30vh;
  278. max-height: 60vh;
  279. overflow-y: auto;
  280. padding: 0 34rpx;
  281. .item{
  282. background-color: #F6F6F6;
  283. color: #000000;
  284. // text-align: center;
  285. height: 76rpx;
  286. overflow: hidden;
  287. display: flex;
  288. align-items: center;
  289. justify-content: center;
  290. // line-height: 76rpx;
  291. margin-bottom: 20rpx;
  292. }
  293. .active{
  294. background-color: #FAEEDE;
  295. }
  296. }
  297. }
  298. </style>