index.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517
  1. <template>
  2. <view class="container Index-container">
  3. <view class="index-fixed">
  4. <view class="index-header">
  5. <input type="text" placeholder="搜索您想要的纪要" placeholder-class="sea_ipt_placeholder" class="sea_ipt" v-model="searchTxt" disabled @click="goSearch" />
  6. <icon type="search" size="15" class="search_ico" />
  7. </view>
  8. <!-- 导航条 -->
  9. <view class="tab-cont">
  10. <scroll-view scroll-x="true" scroll-with-animation class="scroll-tab" @scroll="scrollMove" :scroll-left="scrollLeft" :scroll-into-view="'_' + tabIndex">
  11. <block v-for="(item, index) in tabBars" :key="item.ChartPermissionId">
  12. <view :id="'_' + index" class="scroll-tab-item" :class="{ active: tabAct_id == item.ChartPermissionId }" @click.stop="toggleTab(item, index)">
  13. {{ item.PermissionName }}
  14. <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/border_act.png" mode="" class="border_act" v-if="tabAct_id == item.ChartPermissionId"></image>
  15. </view>
  16. </block>
  17. <view class="limit-box" v-if="limitIsShow">
  18. <image class="limit-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/limit_icon.png" mode=""></image>
  19. </view>
  20. </scroll-view>
  21. </view>
  22. </view>
  23. <block v-if="haveData">
  24. <view class="data-cont">
  25. <view class="report-ul">
  26. <view class="report-item" v-for="(report, index) in dataList" :key="index" v-if="index % 2 === 0" @click="goDetail(report)">
  27. <view class="item-content-img" v-if="report.BodyHtml">
  28. <!-- <mp-html :content="report.BodyHtml" /> -->
  29. <image :src="report.BodyHtml" mode=""></image>
  30. </view>
  31. <view class="item-content" v-else>{{ report.Body }}</view>
  32. <view class="line"></view>
  33. <text class="item-title">{{ report.Title }}</text>
  34. <view class="item-abstract text_twoLine" v-if="report.ExpertBackground">
  35. <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/fenxi_ico.png" class="report_ico"></image>
  36. {{ report.ExpertBackground }}
  37. </view>
  38. <view class="item-createtime">
  39. <text>{{ report.PublishDate }}</text>
  40. <view class="item-examine" v-if="report.IsResearch">
  41. <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/examine_icon.png"></image>
  42. <text>{{ report.Pv }}</text>
  43. </view>
  44. </view>
  45. </view>
  46. </view>
  47. <view class="report-ul">
  48. <view class="report-item" v-for="(report, index) in dataList" :key="index" v-if="index % 2 !== 0" @click="goDetail(report)">
  49. <view class="item-content-img" v-if="report.BodyHtml">
  50. <!-- <mp-html :content="report.BodyHtml" /> -->
  51. <image :src="report.BodyHtml"></image>
  52. </view>
  53. <view class="item-content" v-else>{{ report.Body }}</view>
  54. <view class="line"></view>
  55. <text class="item-title">{{ report.Title }}</text>
  56. <view class="item-abstract text_twoLine" v-if="report.ExpertBackground">
  57. <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/fenxi_ico.png" class="report_ico"></image>
  58. {{ report.ExpertBackground }}
  59. </view>
  60. <view class="item-createtime">
  61. <text>{{ report.PublishDate }}</text>
  62. <view class="item-examine" v-if="report.IsResearch">
  63. <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/examine_icon.png"></image>
  64. <text>{{ report.Pv }}</text>
  65. </view>
  66. </view>
  67. </view>
  68. </view>
  69. </view>
  70. <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" />
  71. </block>
  72. <view class="nodata" v-else-if="haveData === false" style="padding-top: 400rpx">
  73. <image src="@/static/img/nodata.png" mode="" class="nodata_ico"></image>
  74. <text>暂时没有行业数据</text>
  75. </view>
  76. <view class="content-intimate" v-if="reportShow">
  77. <van-transition :show="showTransition" name="fade-right">
  78. <view class="content">
  79. <view @click="goSecretDetail('1')">
  80. <text>报告</text>
  81. <text>精选</text>
  82. </view>
  83. <view class="cont-border" @click="goSecretDetail('2')">
  84. <text>本周研</text>
  85. <text>究汇总</text>
  86. </view>
  87. <view @click="goSecretDetail('3')">
  88. <text>上周纪</text>
  89. <text>要汇总</text>
  90. </view>
  91. </view>
  92. </van-transition>
  93. <image @click="showTransition = !showTransition" src="https://hzstatic.hzinsights.com/cygx/czbk/intimate-icon.png" mode=""></image>
  94. </view>
  95. </view>
  96. </template>
  97. <script>
  98. import { Home, Reports } from "@/config/api.js";
  99. import { Throttle } from "@/config/util.js";
  100. let app = getApp();
  101. export default {
  102. data() {
  103. return {
  104. refresh: false,
  105. pageSize: 10, //条数
  106. pageNum: 1, //页码
  107. haveMore: true, //是否有更多数据
  108. haveData: null, //是否有数据
  109. tabAct_id: 0,
  110. //数据列表
  111. dataList: [],
  112. // tab
  113. tabBars: [],
  114. status: "loadmore",
  115. loadText: {
  116. loadmore: "上拉加载更多",
  117. loading: "加载中",
  118. nomore: "已经到底了",
  119. },
  120. totalPage: "",
  121. limitIsShow: false, //限免的隐现
  122. scrollLeft: 0,
  123. showTransition: false, //点击绝密后的隐现
  124. reportShow: false, //绝密标签的隐现
  125. };
  126. },
  127. watch: {
  128. tabAct_id: {
  129. handler() {
  130. this.getReportList();
  131. },
  132. immediate: true,
  133. },
  134. },
  135. onLoad(optios) {
  136. uni.getSystemInfo({
  137. success: function (res) {
  138. if (res.windowWidth > 700) {
  139. uni.reLaunch({
  140. url: "/pages/pcWebViev/pcWebViev",
  141. });
  142. }
  143. },
  144. });
  145. if (optios.tabid) {
  146. this.tabAct_id = optios.tabid;
  147. }
  148. this.getTabs();
  149. this.reportIsShow();
  150. },
  151. onShow() {
  152. this.$store.dispatch("statistics", { PageType: "Summary", ChartPermissionId: Number(this.tabAct_id) });
  153. // #ifdef MP-WEIXIN
  154. uni.hideHomeButton();
  155. // #endif
  156. },
  157. methods: {
  158. gopc(){
  159. uni.reLaunch({
  160. url: "/pages/pcWebViev/pcWebViev",
  161. });
  162. },
  163. goSecretDetail(type) {
  164. uni.navigateTo({
  165. url: "/reportPages/secretDetails/secretDetails?type=" + type,
  166. });
  167. },
  168. async reportIsShow() {
  169. const res = await Reports.reportIsShow();
  170. if (res.Ret === 200) {
  171. this.reportShow = res.Data.IsShow;
  172. }
  173. },
  174. /* 切换分类 */
  175. toggleTab(item, index) {
  176. if (this.tabAct_id !== item.ChartPermissionId) {
  177. this.tabAct_id = item.ChartPermissionId;
  178. this.pageNum = 1;
  179. uni.pageScrollTo({
  180. scrollTop: 0,
  181. duration: 0,
  182. });
  183. this.$store.dispatch("statistics", { PageType: "Summary", ChartPermissionId: Number(this.tabAct_id) });
  184. }
  185. },
  186. scrollMove(e) {
  187. this.scrollLeft = e.detail.scrollLeft;
  188. },
  189. /* 获取列表 */
  190. getReportList() {
  191. Home.getList({
  192. PageSize: this.pageSize,
  193. CurrentIndex: this.pageNum,
  194. ChartPermissionId: Number(this.tabAct_id) || 0,
  195. }).then((res) => {
  196. if (res.Ret === 200) {
  197. if (!res.Data.HaveResearch) {
  198. this.$util.modalShow("", "您暂无查看研选权限", "", () => {
  199. uni.reLaunch({
  200. url: "/pages/index/index",
  201. });
  202. });
  203. }
  204. this.status = this.pageNum < res.Data.Paging.Pages ? "loadmore" : "nomore";
  205. // this.totalPage = res.Data.Paging.Pages;//总页数
  206. if (res.Data.List && res.Data.List.length > 0) {
  207. res.Data.List.forEach((item) => {
  208. if (item.BodyHtml) {
  209. item.BodyHtml = item.BodyHtml.replace(/'\'/g, "");
  210. }
  211. });
  212. }
  213. if (this.pageNum === 1) {
  214. this.dataList = res.Data.List || [];
  215. this.haveData = this.dataList.length ? true : false;
  216. } else {
  217. this.dataList = this.dataList.concat(res.Data.List);
  218. }
  219. if (this.refresh) {
  220. uni.stopPullDownRefresh();
  221. this.refresh = false;
  222. }
  223. }
  224. });
  225. },
  226. /* 获取tab分类 */
  227. getTabs() {
  228. Home.Tab().then((res) => {
  229. if (res.Ret === 200) {
  230. let arr = res.Data.List;
  231. arr.unshift({
  232. ChartPermissionId: 0,
  233. PermissionName: "最新",
  234. });
  235. this.tabBars = arr;
  236. this.limitIsShow = this.tabBars.some((item) => item.IsShowSustainable);
  237. if (this.tabAct_id == 0) {
  238. this.getReportList();
  239. }
  240. }
  241. });
  242. },
  243. /* 进入详情 校验是否有该品种权限 */
  244. goDetail(item) {
  245. /* 无需授权且已绑定 检验是或否有权限 */
  246. this.$store.dispatch("checkHandle", "/pageMy/reportDetail/reportDetail?id=" + item.ArticleId);
  247. },
  248. /* 搜索 */
  249. goSearch() {
  250. this.$store.dispatch("checkHandle", "/pageMy/search/search");
  251. },
  252. adviceHandle() {
  253. this.$store.dispatch("checkHandle", "/pageMy/advice/advice");
  254. },
  255. },
  256. onShow() {
  257. this.$store.dispatch("statistics", { PageType: "Activit" });
  258. },
  259. /* 下拉刷新 */
  260. onPullDownRefresh: Throttle(function () {
  261. this.pageNum = 1;
  262. this.refresh = true;
  263. this.getReportList();
  264. }),
  265. // 上拉加载
  266. onReachBottom: Throttle(function () {
  267. if (this.status === "nomore") return;
  268. this.status = "loading";
  269. this.pageNum++;
  270. this.getReportList();
  271. }),
  272. /**
  273. * 用户点击分享
  274. */
  275. onShareAppMessage: function (res) {
  276. return {
  277. title: "您手边的弘则研究素材检索库",
  278. path: "/pages/index/index?tabid=" + this.tabAct_id,
  279. imageUrl: this.tabAct_id == 0 ? "https://hzstatic.hzinsights.com/cygx/czbk/home_share.png" : "",
  280. success: (res) => {},
  281. fail: (err) => {},
  282. };
  283. },
  284. onHide() {
  285. if (this.showTransition) {
  286. this.showTransition = false;
  287. }
  288. },
  289. };
  290. </script>
  291. <style lang="scss">
  292. .Index-container {
  293. background-color: #f7f7f7;
  294. font-size: 30rpx;
  295. .index-fixed {
  296. width: 750rpx;
  297. position: fixed;
  298. left: 0;
  299. top: 0;
  300. z-index: 999;
  301. .index-header {
  302. background-color: #fff;
  303. padding: 32rpx 34rpx;
  304. position: relative;
  305. .sea_ipt_placeholder {
  306. color: #8d8d8d;
  307. opacity: 0.7;
  308. }
  309. .sea_ipt {
  310. width: 100%;
  311. height: 70rpx;
  312. font-size: 30rpx;
  313. color: #707070;
  314. background-color: #f6f6f6;
  315. padding: 0 34rpx 0 70rpx;
  316. border-radius: 70rpx;
  317. border: 1rpx solid #e5e5e5;
  318. }
  319. .search_ico {
  320. display: block;
  321. position: absolute;
  322. color: #8d8d8d;
  323. left: 60rpx;
  324. top: 50%;
  325. z-index: 100;
  326. transform: translateY(-50%);
  327. }
  328. }
  329. .tab-cont {
  330. padding: 0 26rpx;
  331. background-color: #fff;
  332. font-size: 32rpx;
  333. box-shadow: 0 3rpx 6rpx rgba(187, 216, 255, 0.2);
  334. .scroll-tab {
  335. position: relative;
  336. width: 100%;
  337. white-space: nowrap;
  338. }
  339. .limit-box {
  340. position: absolute;
  341. text-align: center;
  342. display: inline-block;
  343. padding-right: 50rpx;
  344. top: -9rpx;
  345. margin-left: -38rpx;
  346. image {
  347. width: 46rpx;
  348. height: 26rpx;
  349. }
  350. }
  351. .scroll-tab-item {
  352. // flex-grow: 1;
  353. text-align: center;
  354. display: inline-block;
  355. padding: 10rpx 8rpx 20rpx 8rpx;
  356. margin-right: 35rpx;
  357. border-bottom: 8rpx solid transparent;
  358. position: relative;
  359. &:last-child {
  360. margin-right: 0;
  361. }
  362. &.active {
  363. border-bottom: none;
  364. color: #2c83ff;
  365. font-weight: 700;
  366. }
  367. .border_act {
  368. width: 100%;
  369. height: 8rpx;
  370. position: absolute;
  371. bottom: 0;
  372. left: 0;
  373. }
  374. }
  375. }
  376. }
  377. .data-cont {
  378. padding: 228rpx 20rpx 10rpx;
  379. display: flex;
  380. .report-ul {
  381. width: 50%;
  382. &:first-child {
  383. margin-right: 10rpx;
  384. }
  385. .report-item {
  386. padding: 20rpx 20rpx 24rpx 20rpx;
  387. margin-bottom: 20rpx;
  388. border-radius: 8rpx;
  389. box-shadow: 0 3rpx 6rpx rgba($color: #000000, $alpha: 0.16);
  390. background: #fff;
  391. .item-content-img {
  392. display: flex;
  393. align-items: center;
  394. image {
  395. width: 100%;
  396. height: 232rpx;
  397. vertical-align: middle;
  398. }
  399. }
  400. .item-content {
  401. height: 273rpx;
  402. font-size: 24rpx;
  403. line-height: 40rpx;
  404. color: #7f7f7f;
  405. overflow: hidden;
  406. text-overflow: ellipsis;
  407. display: -webkit-box;
  408. -webkit-line-clamp: 7;
  409. -webkit-box-orient: vertical;
  410. image {
  411. width: 100% !important;
  412. }
  413. }
  414. .line {
  415. margin: 18rpx 0;
  416. content: "";
  417. width: 100%;
  418. height: 1px;
  419. padding: 0 32rpx;
  420. box-sizing: border-box;
  421. background-color: #e5e5e5;
  422. -webkit-transform: scale(1, 0.5);
  423. transform: scale(1, 0.5);
  424. -webkit-transform-origin: center bottom;
  425. transform-origin: center bottom;
  426. }
  427. .item-title {
  428. font-size: 28rpx;
  429. color: #4a4a4a;
  430. margin-bottom: 10rpx;
  431. }
  432. .item-abstract {
  433. font-size: 26rpx;
  434. color: #6a6a6a;
  435. margin-bottom: 10rpx;
  436. .report_ico {
  437. width: 32rpx;
  438. height: 26rpx;
  439. margin-right: 20rpx;
  440. display: inline-block;
  441. }
  442. }
  443. .item-createtime {
  444. display: flex;
  445. align-items: center;
  446. justify-content: space-between;
  447. color: #acacac;
  448. font-size: 24rpx;
  449. .item-examine {
  450. display: flex;
  451. align-items: center;
  452. image {
  453. width: 30rpx;
  454. height: 24rpx;
  455. margin: 0 10rpx 0 15rpx;
  456. }
  457. }
  458. }
  459. }
  460. }
  461. }
  462. .advice_ico {
  463. width: 81rpx;
  464. height: 81rpx;
  465. position: fixed;
  466. right: 30rpx;
  467. bottom: 214rpx;
  468. }
  469. .content-intimate {
  470. position: fixed;
  471. display: flex;
  472. align-items: center;
  473. bottom: 96rpx;
  474. right: 41rpx;
  475. height: 156rpx;
  476. .content {
  477. width: 432rpx;
  478. height: 112rpx;
  479. background-color: #fff;
  480. display: flex;
  481. border-radius: 56rpx;
  482. overflow: hidden;
  483. .cont-border {
  484. margin: 0 2rpx;
  485. }
  486. view {
  487. flex: 1;
  488. background-color: #3385ff;
  489. font-size: 30rpx;
  490. color: #fff;
  491. padding-top: 15rpx;
  492. text-align: center;
  493. }
  494. }
  495. image {
  496. width: 156rpx;
  497. height: 100%;
  498. z-index: 99;
  499. }
  500. }
  501. // .rich-text {
  502. // width: 315rpx;
  503. // height: 272rpx;
  504. // image {
  505. // width: 315rpx;
  506. // height: 272rpx;
  507. // }
  508. // img {
  509. // width: 315rpx;
  510. // height: 272rpx;
  511. // }
  512. // }
  513. }
  514. </style>