reportPage.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583
  1. <template>
  2. <block>
  3. <view class="container reportDetail-container" v-if="isUserBindingPhoneNumber">
  4. <block v-if="haveAuth === 1">
  5. <web-view :src="strategyUrl + '?url=' + linkurl" v-if="linkurl">
  6. <cover-view class="search-view">
  7. <cover-view class="search-view-box" v-if="reportInfo.IsShowFollowButton">
  8. <cover-view>若无需此赛道更新推送,请点击</cover-view>
  9. <cover-image
  10. class="search-icon"
  11. @click="isFollowHandler"
  12. :src="reportInfo.IsFollowButton ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/close_follow.png' : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/follow_.png'"
  13. ></cover-image>
  14. </cover-view>
  15. </cover-view>
  16. <cover-view class="footer-con">
  17. <cover-view class="handle-item" @click="goRevolvePage">
  18. <cover-image class="download-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/report-revolve.png"></cover-image>
  19. <cover-view>全屏</cover-view>
  20. </cover-view>
  21. <cover-view class="handle-item" @click="leavingMessage">
  22. <cover-image class="download-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/leaving_message.png"></cover-image>
  23. <cover-view>留言</cover-view>
  24. </cover-view>
  25. <cover-view class="handle-item" @click="collectHandle">
  26. <cover-image
  27. class="download-img"
  28. :src="isCollection ? 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/collect_act.png' : 'https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/collect_ico.png'"
  29. ></cover-image>
  30. <cover-view>收藏</cover-view>
  31. </cover-view>
  32. <cover-view class="handle-item" v-if="fileLink" @click="downloadFile">
  33. <cover-image class="download-img" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/down_ico.png"></cover-image>
  34. <cover-view>下载</cover-view>
  35. </cover-view>
  36. </cover-view>
  37. <cover-view class="footer-free-charge free-charge" v-if="isShowFree">
  38. <cover-image class="img" @click="toggle" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/free_icon.png"></cover-image>
  39. <cover-image @click="removeBton" class="remove-icon" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/free_%20remove.png"></cover-image>
  40. </cover-view>
  41. </web-view>
  42. </block>
  43. <view class="noauth-cont" v-else-if="haveAuth === 2 || haveAuth === 3 || haveAuth === 4 || haveAuth === 5">
  44. <block v-if="!isShowAlert">
  45. <image src="https://hzstatic.hzinsights.com/cygx/czbk/noauth.png" class="noauth-ico"></image>
  46. <block v-if="haveAuth !== 3">
  47. <view v-if="reportInfo.IsResearch" class="research-noauth">
  48. 暂无 <text class="strong-text">买方研选</text> 权限
  49. <text style="margin-bottom: 30rpx"> 您可申请开通试用 </text>
  50. </view>
  51. <view class="tip" v-else>您暂无权限查看此报告内容,若想查看可以申请开通对应的试用权限</view>
  52. <view class="btn-cont" @click="applyAuth">{{ isShowAlert ? "立即上传" : "立即申请" }} </view>
  53. </block>
  54. <view class="tip" v-if="haveAuth === 3">
  55. <view v-if="reportInfo.IsResearch" class="research-noauth">
  56. 暂无 <text class="strong-text">买方研选</text> 权限
  57. <text> 点击提交申请,提醒对口销售为你开通试用 </text>
  58. </view>
  59. <block v-else>
  60. 您暂无权限查看此报告内容
  61. <view class="contract">
  62. 若想查看可以联系对口销售
  63. <text @click="callPhone(reportInfo.SellerMobile)">
  64. {{ reportInfo.SellerName }}:<text style="color: #d4bf86">{{ reportInfo.SellerMobile }}</text>
  65. </text>
  66. </view>
  67. <view>申请开通对应的试用权限</view>
  68. </block>
  69. </view>
  70. <view v-if="haveAuth === 3" class="btn-cont" @click="sellerApplyAuth"> {{ isShowText ? "提交申请" : "立即申请" }}</view>
  71. <view class="btn-cont back-btn" @click="backIndex"> 返回 </view>
  72. <view style="margin-top: 100rpx" v-if="reportInfo.IsResearch">
  73. <view class="research-btn" @click="goRouterResearch('介绍')">
  74. <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/report_Yx.png"></image>
  75. 点击查看买方研选产品介绍
  76. </view>
  77. <view class="research-btn" @click="goRouterResearch('报价')">
  78. <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/quotation_icon.png"></image>
  79. 点击查看买方研选服务报价单
  80. </view>
  81. </view>
  82. </block>
  83. <block v-else>
  84. <text class="moneh-text"> 上传名片并填写简单信息,24小时内我们会为您开通一个月的免费月卡 </text>
  85. <img src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/month_card.png" class="month_card" alt="" />
  86. <view class="btn-cont btn-dl" @click="applyAuth"> 立即上传 </view>
  87. <view class="btn-cont month-back" @click="backIndex"> 返回</view>
  88. </block>
  89. </view>
  90. </view>
  91. <not-have-login v-else />
  92. </block>
  93. </template>
  94. <script>
  95. import { Report, User, Reports, FreeButton } from "@/config/api.js";
  96. import freeCharge from "@/components/freeCharge";
  97. import { reportStrategyUrl } from "@/config/config";
  98. import NotHaveLogin from "@/components/notHaveLogin.vue";
  99. let app = getApp({ allowDefault: true });
  100. export default {
  101. data() {
  102. return {
  103. readTiem: 0,
  104. access_token: "", //用户标识
  105. reportInfo: "",
  106. id: "",
  107. linkurl: "",
  108. setIntervalTiem: null,
  109. fileLink: false,
  110. isCollection: false,
  111. isInterviewApply: false,
  112. isShowTip: false,
  113. showNav: false,
  114. haveAuth: false,
  115. isSendWx: "",
  116. };
  117. },
  118. components: {
  119. freeCharge,
  120. NotHaveLogin,
  121. },
  122. computed: {
  123. shareTitle() {
  124. let title = this.reportInfo.Abstract ? this.reportInfo.Title + "--" + this.reportInfo.Abstract : this.reportInfo.Title;
  125. return title;
  126. },
  127. strategyUrl() {
  128. return reportStrategyUrl;
  129. },
  130. isShowText() {
  131. return this.haveAuth === 3 && this.reportInfo.IsResearch;
  132. },
  133. },
  134. methods: {
  135. // 关注或者取消关注产业
  136. async isFollowHandler() {
  137. const res = await User.userIndustryFollow({
  138. SourceId: this.id,
  139. Source: "article",
  140. DoType: this.reportInfo.IsFollowButton ? "cancel" : "add",
  141. });
  142. if (res.Ret === 200) {
  143. this.reportInfo.IsFollowButton = !this.reportInfo.IsFollowButton;
  144. uni.showToast({
  145. title: res.Msg,
  146. duration: 2000,
  147. });
  148. }
  149. },
  150. /* 获取详情 */
  151. getDetail() {
  152. Report.reportDtl({
  153. ArticleId: this.id,
  154. PageRouter: this.$store.state.pageRouterReport,
  155. IsSendWx: this.isSendWx,
  156. }).then((res) => {
  157. if (res.Ret === 200) {
  158. uni.setNavigationBarTitle({
  159. title: res.Data.Detail.IsSummary == 1 ? "纪要详情" : "报告详情",
  160. });
  161. this.haveAuth = res.Data.HasPermission;
  162. this.isShowWriter = res.Data.IsShow;
  163. this.reportInfo = res.Data.Detail;
  164. if (res.Data.HasPermission === 1) {
  165. //有访问权限
  166. this.isCollection = this.reportInfo.IsCollect;
  167. this.isInterviewApply = this.reportInfo.IsInterviewApply;
  168. this.linkurl = encodeURIComponent(res.Data.Detail.HttpUrl);
  169. this.fileLink = res.Data.Detail.FileLink;
  170. this.access_token = this.access_token || this.$db.get("access_token");
  171. this.$store.dispatch("statistics", { PageType: "ReportParticulars", DetailId: this.id + "" });
  172. }
  173. }
  174. });
  175. },
  176. /* 无权限申请开通权限 */
  177. applyAuth() {
  178. /* 区分是否是潜在用户 */
  179. this.haveAuth === 2
  180. ? User.applyTry({
  181. ApplyMethod: 3,
  182. TryType: "Article",
  183. DetailId: this.id,
  184. }).then((res) => {
  185. if (res.Ret === 200) {
  186. uni.navigateTo({
  187. url: "/pageMy/applyResult/applyResult",
  188. });
  189. }
  190. })
  191. : this.haveAuth === 4
  192. ? uni.navigateTo({
  193. url: "/pageMy/applyTrial/applyTrial?tryType=Article&detailId=" + this.id,
  194. })
  195. : uni.showModal({
  196. title: "",
  197. content: "您已经提交过申请了,请耐心等待",
  198. showCancel: false,
  199. confirmColor: "#365595",
  200. success: function (res) {},
  201. });
  202. },
  203. //销售的立即申请
  204. sellerApplyAuth() {
  205. User.applyTry({
  206. TryType: "Article",
  207. DetailId: this.id,
  208. }).then((res) => {
  209. if (res.Ret === 200) {
  210. uni.showModal({
  211. title: "",
  212. content: "提交申请成功,请耐心等待",
  213. showCancel: false,
  214. confirmColor: "#365595",
  215. success: function (res) {
  216. this.backIndex();
  217. },
  218. });
  219. }
  220. });
  221. },
  222. // 返回首頁
  223. backIndex() {
  224. uni.navigateBack({
  225. fail() {
  226. uni.switchTab({
  227. url: "/pages/index/index",
  228. });
  229. },
  230. });
  231. },
  232. callPhone(num) {
  233. uni.makePhoneCall({
  234. phoneNumber: num,
  235. });
  236. },
  237. /* 申请访谈 */
  238. applyHandle() {
  239. // 申请访谈
  240. !this.isInterviewApply &&
  241. this.$util.modal("", "专家访谈申请会提交给您的对口销售,销售会线下与您取得联系,确定申请吗?", () => {
  242. this.interviewApi();
  243. });
  244. // 取消申请访谈 区分状态 '待邀请','待访谈','已完成','已取消'
  245. if (this.isInterviewApply) {
  246. this.$util.modal(
  247. "",
  248. this.reportInfo.InterviewApplyStatus == "待访谈"
  249. ? "当前无法取消访谈,若有疑问,请联系对口销售"
  250. : this.reportInfo.InterviewApplyStatus == "待邀请"
  251. ? "您要取消此次访谈申请吗?"
  252. : "该访谈已完成",
  253. () => {
  254. this.reportInfo.InterviewApplyStatus == "待邀请"
  255. ? this.interviewApi()
  256. : this.reportInfo.InterviewApplyStatus == "待访谈"
  257. ? uni.makePhoneCall({
  258. phoneNumber: "18767183922",
  259. })
  260. : "";
  261. }
  262. );
  263. }
  264. },
  265. /* 访谈接口 */
  266. interviewApi() {
  267. Report.applyRpt({
  268. ArticleId: this.id,
  269. }).then((res) => {
  270. this.isInterviewApply = !this.isInterviewApply;
  271. });
  272. },
  273. /* 收藏 */
  274. collectHandle() {
  275. Report.collectRpt({
  276. ArticleId: this.id,
  277. PageRouter: this.$store.state.pageRouterReport,
  278. }).then((res) => {
  279. this.isCollection = !this.isCollection;
  280. this.$util.toast(res.Msg);
  281. });
  282. },
  283. /* 错误 */
  284. errorDetails() {
  285. uni.showModal({
  286. confirmText: "知道了",
  287. showCancel: false,
  288. confirmColor: "#3385FF",
  289. content: "网络不好,请刷新重试",
  290. success: (res) => {
  291. uni.navigateBack({
  292. fail() {
  293. uni.switchTab({
  294. url: "/pages/index/index",
  295. });
  296. },
  297. });
  298. },
  299. });
  300. },
  301. async downloadFile() {
  302. const res = await Report.articlePdfwatermark({
  303. ArticleId: this.id,
  304. });
  305. if (res.Ret === 200) {
  306. uni.navigateTo({
  307. url: "/pageMy/downloadFile/downloadFile?url=" + res.Data.FileLink,
  308. });
  309. }
  310. },
  311. btnSearch() {
  312. uni.navigateTo({ url: "/pages-search/indedxSearch/indedxSearch?source=报告详情页面" });
  313. },
  314. //跳转到免费送月卡页面
  315. toggle() {
  316. uni.navigateTo({
  317. url: "/pageMy/freeTrial/freeTrial",
  318. });
  319. },
  320. //隐藏当天的按钮
  321. async removeBton() {
  322. const res = await FreeButton.userFreeButtonUpdate();
  323. },
  324. leavingMessage() {
  325. uni.navigateTo({
  326. url: "/activityPages/generationAsk/generationAsk?id=" + this.id + "&type=文章",
  327. });
  328. },
  329. // 去往横屏页面
  330. goRevolvePage() {
  331. let token = this.reportInfo.HttpUrl;
  332. uni.navigateTo({
  333. url: "/pageMy/reportRevolve/reportRevolve",
  334. events: {
  335. // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
  336. acceptDataFromOpenedPage: function (data) {
  337. console.log(data);
  338. },
  339. },
  340. success: function (res) {
  341. // 通过eventChannel向被打开页面传送数据
  342. res.eventChannel.emit("acceptDataFromOpenerPage", { url: JSON.stringify(token) });
  343. },
  344. });
  345. },
  346. },
  347. async onShow() {
  348. this.readTiem = 0;
  349. this.setIntervalTiem = setInterval(() => {
  350. this.readTiem++;
  351. }, 1000);
  352. let page = getCurrentPages(); //查看路径
  353. if (page.length === 1) {
  354. if (!this.$store.state.isAuth && !this.$store.state.isBind && this.id > 0) this.getDetail();
  355. } else {
  356. // 跳转入口
  357. this.id > 0 && this.getDetail();
  358. }
  359. },
  360. onLoad(option) {
  361. this.id = option.id ? +option.id : "";
  362. this.isSendWx = option.IsSendWx || "";
  363. if (!this.id && !this.id > 0) {
  364. this.errorDetails();
  365. }
  366. },
  367. /**
  368. * 用户点击分享
  369. */
  370. onShareAppMessage: function (res) {
  371. if (this.id) {
  372. return {
  373. title: this.isHorzMobile ? "好友向您推荐此内容,上传名片享查研观向免费月卡!" : this.shareTitle,
  374. path: "/pageMy/reportDetail/reportDetail?id=" + this.id,
  375. success: (res) => {},
  376. fail: (err) => {},
  377. };
  378. }
  379. },
  380. onHide() {
  381. //页面退出
  382. if (this.id && this.id > 0) {
  383. clearInterval(this.setIntervalTiem);
  384. Reports.addStopTime({
  385. ArticleId: this.id,
  386. StopTime: this.readTiem,
  387. OutType: 2,
  388. Source: "MOBILE",
  389. }).then((res) => {});
  390. }
  391. },
  392. onUnload() {
  393. if (this.id && this.id > 0) {
  394. //页面返回
  395. clearInterval(this.setIntervalTiem);
  396. Reports.addStopTime({
  397. ArticleId: this.id,
  398. StopTime: this.readTiem,
  399. OutType: 1,
  400. Source: "MOBILE",
  401. }).then((res) => {});
  402. }
  403. },
  404. };
  405. </script>
  406. <style lang="scss" scoped>
  407. .reportDetail-container {
  408. background-color: #fff;
  409. padding-bottom: 200rpx;
  410. padding-bottom: calc(200rpx + constant(safe-area-inset-bottom));
  411. padding-bottom: calc(200rpx + env(safe-area-inset-bottom));
  412. .search-view {
  413. position: fixed;
  414. width: 100%;
  415. height: 60rpx;
  416. background: #fff;
  417. z-index: 99999;
  418. font-size: 24rpx;
  419. box-sizing: border-box;
  420. .search-view-box {
  421. display: flex;
  422. align-items: center;
  423. justify-content: center;
  424. background: #3385ff;
  425. color: #fff;
  426. height: 60rpx;
  427. z-index: 99999;
  428. }
  429. .search-icon {
  430. width: 147rpx;
  431. height: 40rpx;
  432. margin: 0 15rpx;
  433. z-index: 99999;
  434. }
  435. }
  436. .footer-con {
  437. position: fixed;
  438. z-index: 99999;
  439. bottom: 0;
  440. padding-bottom: constant(safe-area-inset-bottom);
  441. padding-bottom: env(safe-area-inset-bottom);
  442. left: 0;
  443. width: 100%;
  444. background-color: #ffffff;
  445. display: flex;
  446. justify-content: space-around;
  447. height: 100rpx;
  448. border-top: 1px solid #dddddd;
  449. .handle-item {
  450. align-items: center;
  451. display: flex;
  452. flex-direction: column;
  453. justify-content: center;
  454. position: relative;
  455. z-index: 99999;
  456. .download-img {
  457. width: 44rpx;
  458. height: 44rpx;
  459. margin-bottom: 4rpx;
  460. }
  461. }
  462. }
  463. .footer-free-charge {
  464. .img {
  465. width: 156rpx;
  466. height: 156rpx;
  467. }
  468. .remove-icon {
  469. width: 31rpx;
  470. height: 31rpx;
  471. position: absolute;
  472. right: 0;
  473. top: 0;
  474. }
  475. }
  476. .noauth-cont {
  477. padding-top: 150rpx;
  478. text-align: center;
  479. font-size: 28rpx;
  480. .noauth-ico {
  481. width: 365rpx;
  482. height: 229rpx;
  483. margin-bottom: 70rpx;
  484. }
  485. .tip {
  486. width: 532rpx;
  487. margin: 0 auto 100rpx;
  488. .contract {
  489. padding: 40rpx 90rpx 0;
  490. line-height: 44rpx;
  491. text {
  492. display: inline-block;
  493. }
  494. }
  495. }
  496. .btn-cont {
  497. width: 368rpx;
  498. height: 80rpx;
  499. // position: relative;
  500. background: linear-gradient(268deg, #2ddbff 0%, #1599ff 49%, #005eff 100%);
  501. color: #fff;
  502. font-size: 34rpx;
  503. margin: 0 auto;
  504. text-align: center;
  505. line-height: 80rpx;
  506. &.back-btn {
  507. background: #fff !important;
  508. color: #2c83ff;
  509. border: 1px solid #2c83ff;
  510. margin-top: 30rpx;
  511. }
  512. .btn_bg {
  513. width: 100%;
  514. height: 80rpx;
  515. position: absolute;
  516. left: 0;
  517. top: 0;
  518. }
  519. .btn-txt {
  520. width: 100%;
  521. position: absolute;
  522. z-index: 1;
  523. }
  524. }
  525. }
  526. .month_card {
  527. width: 100%;
  528. height: 565rpx;
  529. padding-left: -20rpx;
  530. }
  531. .btn-dl {
  532. background: linear-gradient(253deg, #fcf3e9 0%, #eedec8 100%) !important;
  533. color: #333 !important;
  534. margin: 30rpx auto !important;
  535. }
  536. .month-back {
  537. background: #f6f6f6 !important;
  538. color: #999 !important;
  539. }
  540. .moneh-text {
  541. text-align: center;
  542. width: 632rpx;
  543. margin: 0 auto 20rpx;
  544. color: #999999;
  545. }
  546. .research-noauth {
  547. color: #333;
  548. font-size: 36rpx;
  549. width: calc(100% + 80rpx);
  550. margin-left: -40rpx;
  551. .strong-text {
  552. display: inline-block;
  553. padding: 0 10rpx;
  554. font-weight: 500;
  555. }
  556. text:last-child {
  557. font-size: 32rpx;
  558. font-size: 34rpx;
  559. color: #999999;
  560. margin-top: 10rpx;
  561. }
  562. }
  563. .research-btn {
  564. display: flex;
  565. align-items: center;
  566. font-size: 32rpx;
  567. width: 546rpx;
  568. height: 78rpx;
  569. margin: 30rpx auto;
  570. background: #f8f8fa;
  571. border-radius: 4rpx;
  572. padding-left: 40rpx;
  573. image {
  574. width: 40rpx;
  575. height: 40rpx;
  576. margin-right: 10rpx;
  577. }
  578. }
  579. }
  580. </style>