reportList.vue 11 KB

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