purchaser.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612
  1. <template>
  2. <view class="container resear-container">
  3. <view class="nav-bar-wrap" :style="{ height: navBarStyle.height, paddingTop: navBarStyle.paddingTop, paddingBottom: navBarStyle.paddingBottom }">
  4. <view class="content" @click="goSearch">
  5. <icon type="search" size="15" class="search_ico" />
  6. <text class="sea_ipt"> {{ searchPlaceholderList.YanXuanSearch || "" }}</text>
  7. </view>
  8. </view>
  9. <view class="notice-content" v-if="wholeShowListData.YanXuan_Explain">
  10. <view class="notice">
  11. <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/placard_icon.png"></image>
  12. <view class="notice-bar">
  13. <van-notice-bar color="#3385FF" background="#DFECFF" text="买方研选内容试行阶段,限时免费。也欢迎您向我们提宝贵建议。" />
  14. </view>
  15. </view>
  16. </view>
  17. <view class="theme">
  18. <view class="theme-top">
  19. <text class="title"> 近期更新主题: </text>
  20. <view class="" @click="goRecent">
  21. 更多
  22. <u-icon name="arrow-right" color="#BDBDBD" size="28"></u-icon>
  23. </view>
  24. </view>
  25. <view class="theme-content">
  26. <view class="theme-ul" v-for="item in themeNewList" :key="item.IndustrialManagementId">
  27. <text class="text_oneLine" @click="themeDetails(item)"> # {{ item.IndustryName }}</text>
  28. <image v-if="item.IsHot" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/hot_report.png"></image>
  29. </view>
  30. </view>
  31. </view>
  32. <view class="announcement">
  33. <view class="tab-cont">
  34. <scroll-view scroll-x="true" @scroll="scrollMove" :scroll-left="scrollLeft" scroll-with-animation class="scroll-tab" :scroll-into-view="'_' + tabIndex">
  35. <block v-for="(item, index) in tabBars" :key="index">
  36. <view class="scroll-tab-item" :class="{ active: tagActive == item.name }" @click.stop="typeChange(item)">
  37. {{ item.titel }}
  38. <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/border_act.png" mode="" class="border_act" v-if="tagActive == item.name"></image>
  39. </view>
  40. </block>
  41. </scroll-view>
  42. </view>
  43. <view class="content-ul" v-if="collectionList.length && tagActive == '用户'">
  44. <view class="user-li" v-for="(item, index) in collectionList" :key="item.ArticleId">
  45. <view class="li-item">
  46. <text class="li-serial" :style="{ background: serialBackground(index) }">
  47. {{ index + 1 }}
  48. </text>
  49. <view>
  50. <text @click="goDetail(item)" style="display: inline">{{ item.Title }}</text>
  51. <text class="li-industry" @click="themeDetails(item)"> # {{ item.IndustryName }} </text>
  52. </view>
  53. </view>
  54. <view class="li-item li-bottom" style="color: #999999">
  55. <view class="li-user text_oneLine" @click="authorDetails(item)">
  56. <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/user_report.png"></image>
  57. {{ item.NickName }}
  58. </view>
  59. <view class="li-item user-img">
  60. <view class="img-box">
  61. <image class="user-pv" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/examine_icon.png"></image>
  62. <text>
  63. {{ item.Pv }}
  64. </text>
  65. </view>
  66. <view class="img-box" @click="collectClick(item)">
  67. <image v-if="item.IsCollect" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/collect_act.png"></image>
  68. <image v-else src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/collect_ico.png"></image>
  69. <text class=""> {{ item.CollectNum }}人收藏 </text>
  70. </view>
  71. </view>
  72. </view>
  73. </view>
  74. </view>
  75. <view class="content-ul" v-if="hotList.length && tagActive == '主题'">
  76. <view class="hot-li" v-for="(item, index) in hotList" :key="item.IndustrialManagementId">
  77. <view class="li-item hot-item">
  78. <view style="display: flex" class="text_oneLine hot-new" @click="themeDetails(item)">
  79. <text class="li-serial serial-number" :style="{ background: serialBackground(index) }">
  80. {{ index + 1 }}
  81. </text>
  82. <text class="text_oneLine" style="display: inline"> # {{ item.IndustryName }} </text>
  83. <image class="new-img" v-if="item.IsNew" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/new_report.png"></image>
  84. </view>
  85. <text :class="item.IsFollw ? 'cancel-attention' : 'attention'" @click="isAttention(item, '主题')">{{ item.IsFollw ? "取消关注" : "+ 关注" }}</text>
  86. </view>
  87. <view class="li-item read-more" @click="themeDetails(item)">
  88. <text class="text-box text_oneLine" v-for="val in item.IndustrialSubjectList" :key="val.IndustrialSubjectId">
  89. {{ val.SubjectName }}
  90. </text>
  91. </view>
  92. </view>
  93. </view>
  94. <view class="content-ul" v-if="kolList.length && tagActive == '专家'">
  95. <view class="kol-li" v-for="(item, index) in kolList" :key="item.DepartmentId">
  96. <text class="li-serial serial-number" :style="{ background: serialBackground(index) }">
  97. {{ index + 1 }}
  98. </text>
  99. <image @click="authorDetails(item)" :src="item.ImgUrl" v-if="item.ImgUrl"></image>
  100. <view class="li-item kol-item">
  101. <view class="item-top">
  102. <text @click="authorDetails(item)">
  103. {{ item.NickName }}
  104. </text>
  105. <text :class="item.IsFollw ? 'cancel-attention' : 'attention'" @click="isAttention(item, '专家')">{{ item.IsFollw ? "取消关注" : "+ 关注" }}</text>
  106. </view>
  107. <text @click="themeDetails(val)" class="kol-text text_oneLine" v-for="val in item.List" :key="val.IndustrialManagementId"> # {{ val.IndustryName }} </text>
  108. </view>
  109. </view>
  110. </view>
  111. </view>
  112. <view class="content-bottom">最新榜单您已掌握,明天再刷刷看~</view>
  113. <freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
  114. <u-modal
  115. v-model="goFollowShow"
  116. :content-style="{ fontSize: '32rpx' }"
  117. @confirm="goFollowShowBtn"
  118. :show-cancel-button="isCancelBtn"
  119. :confirm-text="confirmText"
  120. @cancel="isCancelBtn = false"
  121. :show-title="false"
  122. :cancel-style="{ borderRight: '1rpx solid #EBEBEB' }"
  123. :confirm-style="{ fontWeight: '700' }"
  124. >
  125. <view class="slot-content">
  126. <rich-text :nodes="accounts"></rich-text>
  127. </view>
  128. </u-modal>
  129. </view>
  130. </template>
  131. <script>
  132. import { Reports, Research, Report } from "@/config/api.js";
  133. import freeCharge from "@/components/freeCharge";
  134. import { Throttle } from "@/config/util.js";
  135. export default {
  136. components: { freeCharge },
  137. data() {
  138. return {
  139. themeNewList: [],
  140. tagActive: "用户",
  141. collectionList: [], //用户收藏
  142. hotList: [],
  143. kolList: [],
  144. tabBars: [
  145. { titel: "月度收藏榜", name: "用户" },
  146. { titel: "主题热度榜", name: "主题" },
  147. { titel: "KOL榜", name: "专家" },
  148. ],
  149. confirmText: "知道了",
  150. accounts: "",
  151. isCancelBtn: false,
  152. goFollowShow: false,
  153. };
  154. },
  155. mounted() {
  156. uni.$on("updateFllowTheme", (data) => {
  157. this.hotList.forEach((item) => {
  158. if (item.IndustrialManagementId == data.id) {
  159. item.IsFollw = data.isFollw;
  160. }
  161. });
  162. });
  163. uni.$on("updateFllowAuthor", (data) => {
  164. this.kolList.forEach((item) => {
  165. if (item.DepartmentId == data.id) {
  166. item.IsFollw = data.isFollw;
  167. }
  168. });
  169. });
  170. },
  171. watch: {
  172. tagActive: {
  173. handler(val) {
  174. val == "用户" ? this.researchCollectionList() : val == "主题" ? this.researchHotList() : this.researchKolList();
  175. },
  176. immediate: true,
  177. },
  178. },
  179. methods: {
  180. //获取胶囊位置
  181. initNavBar() {
  182. let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
  183. this.navBarStyle = {
  184. height: menuButtonInfo.height + menuButtonInfo.top + 20 + "px",
  185. paddingTop: menuButtonInfo.top + "px",
  186. paddingBottom: "4px",
  187. };
  188. },
  189. //近期更新主题
  190. async researchNewList() {
  191. const res = await Research.researchNewList({ ChartPermissionId: 31 });
  192. if (res.Ret === 200) {
  193. this.themeNewList = res.Data.List || [];
  194. }
  195. },
  196. //用户收藏榜
  197. async researchCollectionList() {
  198. const res = await Research.researchCollectionList({ ChartPermissionId: 31 });
  199. if (res.Ret === 200) {
  200. this.collectionList = res.Data.List || [];
  201. }
  202. },
  203. //主题热度/近期更新更多
  204. async researchHotList() {
  205. const res = await Research.researchHotList({ ChartPermissionId: 31, ThemeType: 1 });
  206. if (res.Ret === 200) {
  207. this.hotList = res.Data.List || [];
  208. }
  209. },
  210. //KOL榜列表接口
  211. async researchKolList() {
  212. const res = await Research.researchKolList({ ChartPermissionId: 31 });
  213. if (res.Ret === 200) {
  214. this.kolList = res.Data.List || [];
  215. }
  216. },
  217. //tabs切换
  218. typeChange(item) {
  219. this.tagActive = item.name;
  220. },
  221. //关注
  222. async isAttention(item, val) {
  223. const res = val === "主题" ? await Reports.reportFllow({ IndustrialManagementId: item.IndustrialManagementId }) : await Reports.reportFllowDepartment({ DepartmentId: item.DepartmentId });
  224. if (res.Ret === 200) {
  225. item.IsFollw = !item.IsFollw;
  226. if (res.Data.Status == 1) {
  227. this.goFollowShow = true;
  228. this.confirmText = res.Data.GoFollow ? "去关注" : "知道了";
  229. if (res.Data.GoFollow) {
  230. this.accounts = `${val == "主题" ? "产业" : "作者"}关注成功 <br> 想要及时获取该${val === "主题" ? "产业内容的更新推送" : "作者的报告更新提示"},请关注【查研观向小助手】公众号`;
  231. this.isCancelBtn = true;
  232. } else {
  233. this.accounts = `${val == "主题" ? "产业" : "作者"}` + `关注成功<br>请关注【查研观向小助手】公众号,及时获取${val === "主题" ? "产业" : "作者"}报告更新提醒`;
  234. }
  235. } else {
  236. uni.showToast({
  237. title: "已取消关注",
  238. icon: "none",
  239. duration: 2000,
  240. });
  241. }
  242. }
  243. },
  244. //去关注
  245. goFollowShowBtn() {
  246. if (this.confirmText == "去关注") {
  247. uni.navigateTo({
  248. url: "/activityPages/accountsOfficial/accountsOfficial",
  249. });
  250. }
  251. this.goFollowShow = false;
  252. },
  253. //去往更多主题
  254. goRecent() {
  255. uni.navigateTo({
  256. url: "/reportPages/recentPages/recentPages?id=31",
  257. });
  258. },
  259. //收藏
  260. async collectClick(item) {
  261. const res = await Report.collectRpt({ ArticleId: item.ArticleId });
  262. if (res.Ret === 200) {
  263. item.IsCollect = !item.IsCollect;
  264. item.IsCollect
  265. ? (item.CollectNum += 1) &&
  266. uni.showToast({
  267. title: "收藏成功",
  268. icon: "none",
  269. duration: 2000,
  270. })
  271. : (item.CollectNum -= 1);
  272. !item.IsCollect &&
  273. uni.showToast({
  274. title: "已取消收藏",
  275. icon: "none",
  276. duration: 2000,
  277. });
  278. }
  279. },
  280. //去往作者详情
  281. authorDetails(item) {
  282. uni.navigateTo({
  283. url: "/reportPages/authorPages/authorPages?id=" + item.DepartmentId,
  284. });
  285. },
  286. //去往文章详情页面
  287. goDetail(item) {
  288. this.$store.dispatch("checkHandle", "/pageMy/reportDetail/reportDetail?id=" + item.ArticleId);
  289. },
  290. //去往主题详情
  291. themeDetails(item) {
  292. this.$store.dispatch("checkHandle", "/reportPages/researchTheme/researchTheme?id=" + item.IndustrialManagementId);
  293. },
  294. //计算遍历的颜色
  295. serialBackground(index) {
  296. index += 1;
  297. return index == 1 ? "#D7584F" : index == 2 ? "#E98033" : index == 3 ? "#FDD367" : "#D3D3D3";
  298. },
  299. /* 搜索 */
  300. async goSearch() {
  301. await this.$store.dispatch("checkHandle", "/pages-search/indedxSearch/indedxSearch?id=研选");
  302. },
  303. },
  304. onLoad() {
  305. this.researchNewList();
  306. this.initNavBar();
  307. },
  308. /* 下拉刷新 */
  309. onPullDownRefresh: Throttle(function () {
  310. wx.stopPullDownRefresh();
  311. }),
  312. /**
  313. * 用户点击分享
  314. */
  315. onShareAppMessage: function (res) {
  316. return {
  317. title: this.isHorzMobile ? "好友向您推荐此内容,上传名片享查研观向免费月卡!" : "买方研选",
  318. path: "pages/purchaser/purchaser",
  319. success: (res) => {},
  320. fail: (err) => {},
  321. };
  322. },
  323. };
  324. </script>
  325. <style lang="scss">
  326. .nav-bar-wrap {
  327. background-color: #fff;
  328. color: #fff;
  329. position: sticky;
  330. top: 0;
  331. left: 0;
  332. width: 100%;
  333. z-index: 999;
  334. padding-left: 30rpx;
  335. .content {
  336. position: relative;
  337. display: flex;
  338. align-items: center;
  339. width: 70%;
  340. height: 63rpx;
  341. font-size: 30rpx;
  342. color: #8D8D8D;
  343. background-color: #f6f6f6;
  344. padding-left: 33rpx;
  345. border-radius: 70rpx;
  346. // border: 1rpx solid #e5e5e5;
  347. .sea_ipt {
  348. padding-left: 15rpx;
  349. }
  350. }
  351. }
  352. </style>
  353. <style lang="scss">
  354. .resear-container {
  355. background-color: #f7f7f7;
  356. .notice-content {
  357. position:sticky;
  358. left: 0;
  359. top: 200rpx;
  360. z-index: 99;
  361. width: 100%;
  362. background-color: #fff;
  363. padding-bottom: 20rpx;
  364. }
  365. .notice {
  366. height: 56rpx;
  367. overflow: hidden;
  368. background-color: #dfecff;
  369. display: flex;
  370. align-items: center;
  371. padding-left: 30rpx;
  372. image {
  373. width: 30rpx;
  374. height: 30rpx;
  375. }
  376. .notice-bar {
  377. flex: 1;
  378. }
  379. .van-notice-bar {
  380. height: 56rpx;
  381. }
  382. }
  383. .theme {
  384. margin-top: 4rpx;
  385. background-color: #fff;
  386. padding: 0 30rpx 15rpx;
  387. margin-bottom: 8rpx;
  388. .theme-top {
  389. display: flex;
  390. color: #999999;
  391. align-items: center;
  392. font-size: 28rpx;
  393. height: 95rpx;
  394. justify-content: space-between;
  395. .title {
  396. color: #333;
  397. font-size: 32rpx;
  398. font-weight: 500;
  399. }
  400. }
  401. .theme-content {
  402. display: flex;
  403. flex-wrap: wrap;
  404. .theme-ul {
  405. width: 50%;
  406. display: flex;
  407. align-items: center;
  408. padding-right: 15rpx;
  409. line-height: 59rpx;
  410. image {
  411. width: 26rpx;
  412. height: 28rpx;
  413. margin-left: 8rpx;
  414. flex-shrink: 0;
  415. }
  416. }
  417. }
  418. }
  419. .content-ul {
  420. margin: 20rpx 0 0;
  421. border-top: 1px solid #f6f6f6;
  422. .user-li,
  423. .hot-li,
  424. .kol-li {
  425. padding: 30rpx 0 20rpx;
  426. border-bottom: 1px solid #f6f6f6;
  427. }
  428. .user-img {
  429. width: 40%;
  430. justify-content: space-between;
  431. .img-box {
  432. display: flex;
  433. align-items: center;
  434. }
  435. .user-pv {
  436. width: 21rpx;
  437. height: 16rpx;
  438. }
  439. }
  440. .kol-li {
  441. display: flex;
  442. align-items: center;
  443. padding-bottom: 30rpx;
  444. image {
  445. width: 120rpx;
  446. height: 120rpx;
  447. border-radius: 8rpx;
  448. margin: 0 20rpx 0 15rpx;
  449. overflow: hidden;
  450. flex-shrink: 0;
  451. }
  452. }
  453. .kol-item {
  454. display: flex;
  455. flex-wrap: wrap;
  456. width: 480rpx;
  457. height: 120rpx;
  458. align-items: baseline;
  459. margin-bottom: 20rpx;
  460. .item-top {
  461. width: 100%;
  462. display: flex;
  463. align-items: center;
  464. justify-content: space-between;
  465. font-size: 29rpx;
  466. font-weight: 700;
  467. }
  468. .kol-text {
  469. width: 50%;
  470. margin-top: 10rpx;
  471. flex-shrink: 0;
  472. }
  473. }
  474. .li-serial {
  475. width: 26rpx;
  476. height: 26rpx;
  477. line-height: 26rpx;
  478. color: #fff;
  479. font-size: 20rpx;
  480. text-align: center;
  481. border-radius: 4rpx 4rpx 4rpx 4rpx;
  482. margin: 7rpx 10rpx 0 20rpx;
  483. flex-shrink: 0;
  484. }
  485. .serial-number {
  486. margin-top: 0 !important;
  487. }
  488. .li-item {
  489. display: flex;
  490. .li-industry {
  491. color: #3385ff;
  492. margin-left: 20rpx;
  493. display: inline-block;
  494. }
  495. .li-user {
  496. margin-left: 46rpx;
  497. }
  498. .li-title {
  499. display: flex;
  500. }
  501. }
  502. .li-bottom {
  503. display: flex;
  504. justify-content: space-between;
  505. align-items: center;
  506. margin-top: 30rpx;
  507. width: 100%;
  508. image {
  509. width: 23rpx;
  510. height: 26rpx;
  511. margin-right: 10rpx;
  512. }
  513. }
  514. .read-more {
  515. margin-left: 30rpx;
  516. margin-top: 20rpx;
  517. display: flex;
  518. flex-wrap: wrap;
  519. .text-box {
  520. margin-bottom: 27rpx;
  521. margin-right: 40rpx;
  522. padding: 0;
  523. font-size: 24rpx;
  524. color: #408fff;
  525. width: 170rpx;
  526. height: 46rpx;
  527. line-height: 46rpx;
  528. text-align: center !important;
  529. background: url(~@/static/img/report_bg.png) no-repeat;
  530. background-size: 100% 100%;
  531. text-indent: 0em;
  532. }
  533. }
  534. .attention {
  535. flex-shrink: 0;
  536. padding: 5rpx 28rpx;
  537. border-radius: 37rpx 37rpx 37rpx 37rpx;
  538. color: #fff;
  539. background: #3385ff;
  540. font-weight: 400;
  541. font-size: 24rpx;
  542. }
  543. .hot-item {
  544. justify-content: space-between;
  545. align-items: center;
  546. .hot-new {
  547. align-items: center;
  548. flex: 1;
  549. padding-right: 20rpx;
  550. }
  551. .new-img {
  552. width: 60rpx;
  553. height: 30rpx;
  554. margin-left: 15rpx;
  555. flex-shrink: 0;
  556. }
  557. }
  558. }
  559. .announcement {
  560. background: #fff;
  561. padding: 0 30rpx;
  562. .tab-cont {
  563. height: 115rpx;
  564. background-color: #fff;
  565. font-size: 32rpx;
  566. .scroll-tab {
  567. position: relative;
  568. width: 100%;
  569. white-space: nowrap;
  570. display: flex;
  571. justify-content: space-around;
  572. }
  573. .scroll-tab-item {
  574. text-align: center;
  575. display: inline-block;
  576. padding: 32rpx 8rpx 30rpx 8rpx;
  577. border-bottom: 8rpx solid transparent;
  578. margin-right: 60rpx;
  579. position: relative;
  580. color: #999999;
  581. font-size: 32rpx;
  582. &:last-child {
  583. margin-right: 0;
  584. }
  585. &.active {
  586. border-bottom: none;
  587. color: #333;
  588. font-weight: 500;
  589. }
  590. .border_act {
  591. width: 80%;
  592. height: 8rpx;
  593. position: absolute;
  594. bottom: 0;
  595. left: 50%;
  596. transform: translateX(-50%);
  597. }
  598. }
  599. }
  600. }
  601. .content-bottom {
  602. background-color: #fff;
  603. text-align: center;
  604. line-height: 100rpx;
  605. color: #c4c4c4;
  606. font-size: 20rpx;
  607. }
  608. }
  609. </style>