reportDetail.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434
  1. <template>
  2. <view class="container reportDetail-container">
  3. <block v-if="haveAuth === 1">
  4. <!-- 链接地址 -->
  5. <web-view :src="linkurl + '?id=' + id + '&fromType=mpwechat&token=' + access_token"></web-view>
  6. </block>
  7. <view class="noauth-cont" v-else-if="haveAuth === 2 || haveAuth === 3 || haveAuth === 4 || haveAuth === 5">
  8. <block v-if="!isShowAlert">
  9. <image src="https://hzstatic.hzinsights.com/cygx/czbk/noauth.png" class="noauth-ico"></image>
  10. <block v-if="haveAuth !== 3">
  11. <view class="tip">您暂无权限查看此报告内容,若想查看可以申请开通对应的试用权限</view>
  12. <view class="btn-cont" @click="applyAuth">{{ isShowAlert ? "立即上传" : "立即申请" }} </view>
  13. </block>
  14. <view class="tip" v-if="haveAuth === 3">
  15. 您暂无权限查看此报告内容
  16. <view class="contract">
  17. 若想查看可以联系对口销售
  18. <text @click="callPhone(sale_number)"
  19. >{{ sale_name }}:<text style="color: #d4bf86">{{ sale_number }}</text></text
  20. >
  21. </view>
  22. <view>申请开通对应的试用权限</view>
  23. </view>
  24. <view v-if="haveAuth === 3" class="btn-cont" @click="sellerApplyAuth"> 立即申请</view>
  25. <view class="btn-cont back-btn" @click="backIndex"> 返回 </view>
  26. </block>
  27. <block v-else>
  28. <text class="moneh-text"> 上传名片并填写简单信息,24小时内我们会为您开通一个月的免费月卡 </text>
  29. <img src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/month_card.png" class="month_card" alt="" />
  30. <view class="btn-cont btn-dl" @click="applyAuth"> 立即上传 </view>
  31. <view class="btn-cont month-back" @click="backIndex"> 返回</view>
  32. </block>
  33. </view>
  34. </view>
  35. </template>
  36. <script>
  37. import { Report, User, Reports, FreeButton } from "@/config/api.js";
  38. import { reportLinkUrl } from "@/config/config";
  39. let app = getApp({ allowDefault: true });
  40. export default {
  41. data() {
  42. return {
  43. access_token: "", //用户标识
  44. reportInfo: "",
  45. id: "",
  46. sale_name: "", //可联系销售名称
  47. sale_number: "", //可联系销售电话
  48. industry: "", //行业
  49. readTiem: 0,
  50. setIntervalTiem: null,
  51. isShowAlert: false,
  52. haveAuth: false,
  53. isShowTip: false,
  54. showNav: false,
  55. isIphoneX: false, //判断机型
  56. };
  57. },
  58. computed: {
  59. linkurl() {
  60. return reportLinkUrl;
  61. },
  62. },
  63. methods: {
  64. /* 获取详情 */
  65. getDetail() {
  66. Report.reportDtl({
  67. ArticleId: Number(this.id),
  68. }).then((res) => {
  69. if (res.Ret === 200) {
  70. uni.setNavigationBarTitle({
  71. title: res.Data.Detail.IsSummary == 1 ? "纪要详情" : "报告详情",
  72. });
  73. this.haveAuth = res.Data.HasPermission;
  74. this.isShowWriter = res.Data.IsShow;
  75. this.industry = res.Data.Detail.CategoryName;
  76. this.sale_name = res.Data.Detail.SellerName;
  77. this.sale_number = res.Data.Detail.SellerMobile;
  78. if (res.Data.HasPermission === 1) {
  79. //有访问权限
  80. if (res.Data.Detail.IsNeedJump) {
  81. uni.redirectTo({
  82. url: "/pageMy/reportPage/reportPage?id=" + this.id,
  83. });
  84. }
  85. this.reportInfo = res.Data.Detail;
  86. this.access_token = this.access_token || this.$db.get("access_token");
  87. this.$store.dispatch("statistics", { PageType: "ReportParticulars", DetailId: this.id });
  88. }
  89. }
  90. });
  91. },
  92. /* 无权限申请开通权限 */
  93. applyAuth() {
  94. /* 区分是否是潜在用户 */
  95. this.haveAuth === 2
  96. ? User.applyTry({
  97. ApplyMethod: 3,
  98. TryType: "Article",
  99. DetailId: Number(this.id),
  100. }).then((res) => {
  101. if (res.Ret === 200) {
  102. uni.navigateTo({
  103. url: "/pageMy/applyResult/applyResult",
  104. });
  105. }
  106. })
  107. : this.haveAuth === 4
  108. ? uni.navigateTo({
  109. url: "/pageMy/applyTrial/applyTrial?tryType=Article&detailId=" + this.id,
  110. })
  111. : uni.showModal({
  112. title: "",
  113. content: "您已经提交过申请了,请耐心等待",
  114. showCancel: false,
  115. confirmColor: "#365595",
  116. success: function (res) {},
  117. });
  118. },
  119. // 销售的立即申请
  120. sellerApplyAuth() {
  121. User.applyTry({
  122. TryType: "Article",
  123. DetailId: Number(this.id),
  124. }).then((res) => {
  125. if (res.Ret === 200) {
  126. uni.showModal({
  127. title: "",
  128. content: "提交申请成功,请耐心等待",
  129. showCancel: false,
  130. confirmColor: "#365595",
  131. success: function (res) {
  132. this.backIndex();
  133. },
  134. });
  135. }
  136. });
  137. },
  138. // 返回首頁
  139. backIndex() {
  140. uni.navigateBack({
  141. fail() {
  142. uni.switchTab({
  143. url: "/pages/index/index",
  144. });
  145. },
  146. });
  147. },
  148. // 拨打电话
  149. callPhone(num) {
  150. uni.makePhoneCall({
  151. phoneNumber: num,
  152. });
  153. },
  154. /* 申请访谈 */
  155. applyHandle() {
  156. // 申请访谈
  157. !this.reportInfo.IsInterviewApply &&
  158. this.$util.modal("", "专家访谈申请会提交给您的对口销售,销售会线下与您取得联系,确定申请吗?", () => {
  159. this.interviewApi();
  160. });
  161. // 取消申请访谈 区分状态 '待邀请','待访谈','已完成','已取消'
  162. if (this.reportInfo.IsInterviewApply) {
  163. // this.reportInfo.InterviewApplyStatus
  164. this.$util.modal(
  165. "",
  166. this.reportInfo.InterviewApplyStatus == "待访谈"
  167. ? "当前无法取消访谈,若有疑问,请联系对口销售"
  168. : this.reportInfo.InterviewApplyStatus == "待邀请"
  169. ? "您要取消此次访谈申请吗?"
  170. : "该访谈已完成",
  171. () => {
  172. this.reportInfo.InterviewApplyStatus == "待邀请"
  173. ? this.interviewApi()
  174. : this.reportInfo.InterviewApplyStatus == "待访谈"
  175. ? uni.makePhoneCall({
  176. phoneNumber: "18767183922",
  177. })
  178. : "";
  179. }
  180. );
  181. }
  182. },
  183. /* 访谈接口 */
  184. interviewApi() {
  185. Report.applyRpt({
  186. ArticleId: Number(this.id),
  187. }).then((res) => {
  188. this.reportInfo.IsInterviewApply = !this.reportInfo.IsInterviewApply;
  189. });
  190. },
  191. /* 收藏 */
  192. collectHandle() {
  193. Report.collectRpt({
  194. ArticleId: Number(this.id),
  195. }).then((res) => {
  196. this.reportInfo.IsCollect = !this.reportInfo.IsCollect;
  197. this.$util.toast(res.Msg);
  198. });
  199. },
  200. /* 错误 */
  201. errorDetails() {
  202. uni.showModal({
  203. confirmText: "知道了",
  204. showCancel: false,
  205. confirmColor: "#3385FF",
  206. content: "网络不好,请刷新重试",
  207. success: (res) => {
  208. uni.navigateBack({
  209. fail() {
  210. uni.switchTab({
  211. url: "/pages/index/index",
  212. });
  213. },
  214. });
  215. },
  216. });
  217. },
  218. // 获取权限弹窗是否展示免费月卡接口
  219. async userIsShowAlert() {
  220. const res = await FreeButton.userIsShowAlert();
  221. if (res.Ret === 200) {
  222. this.isShowAlert = res.Data.IsShow;
  223. }
  224. },
  225. },
  226. async onShow() {
  227. this.readTiem = 0;
  228. this.setIntervalTiem = setInterval(() => {
  229. this.readTiem++;
  230. }, 1000);
  231. let page = getCurrentPages(); //查看路径
  232. if (page.length === 1) {
  233. await this.$store.dispatch("checkHandle");
  234. if (!this.$store.state.isAuth && !this.$store.state.isBind) this.getDetail();
  235. } else {
  236. // 跳转入口
  237. this.getDetail();
  238. }
  239. },
  240. onLoad(option) {
  241. this.id = option.id ? option.id : "";
  242. if (!this.id && !+this.id > 0) {
  243. this.errorDetails();
  244. }
  245. // 免费送月卡
  246. // this.userIsShowAlert();
  247. },
  248. /**
  249. * 用户点击分享
  250. */
  251. onShareAppMessage: function (res) {
  252. if (this.id) {
  253. return {
  254. title: this.isHorzMobile ? "好友向您推荐此内容,上传名片享查研观向免费月卡!" : this.reportInfo.Title,
  255. path: "/pageMy/reportDetail/reportDetail?id=" + this.id,
  256. success: (res) => {},
  257. fail: (err) => {},
  258. };
  259. }
  260. },
  261. onHide() {
  262. //页面退出
  263. if (this.id && +this.id > 0) {
  264. clearInterval(this.setIntervalTiem);
  265. Reports.addStopTime({
  266. ArticleId: Number(this.id),
  267. StopTime: this.readTiem,
  268. OutType: 2,
  269. Source: "MOBILE",
  270. }).then((res) => {});
  271. }
  272. },
  273. onUnload() {
  274. if (this.id && +this.id > 0) {
  275. //页面返回
  276. clearInterval(this.setIntervalTiem);
  277. Reports.addStopTime({
  278. ArticleId: Number(this.id),
  279. StopTime: this.readTiem,
  280. OutType: 1,
  281. Source: "MOBILE",
  282. }).then((res) => {});
  283. }
  284. },
  285. };
  286. </script>
  287. <style lang="scss" scoped>
  288. .reportDetail-container {
  289. background-color: #fff;
  290. padding: 20rpx 34rpx 134rpx;
  291. .report-top {
  292. color: #999999;
  293. .report-title {
  294. color: #4a4a4a;
  295. font-size: 34rpx;
  296. }
  297. .report_desc {
  298. display: flex;
  299. justify-content: space-between;
  300. align-items: center;
  301. margin: 20rpx 0;
  302. }
  303. .tip {
  304. color: #586eb5;
  305. display: inline;
  306. }
  307. }
  308. .detail-report {
  309. padding: 40rpx 0;
  310. }
  311. .statement {
  312. max-width: 670rpx;
  313. max-height: 900rpx;
  314. line-height: 42rpx;
  315. overflow-y: auto;
  316. padding: 40rpx;
  317. }
  318. .fixed_cont {
  319. width: 100%;
  320. // height: 114rpx;
  321. padding: 10rpx 0;
  322. position: fixed;
  323. bottom: 0;
  324. left: 0;
  325. z-index: 99999;
  326. display: flex;
  327. justify-content: center;
  328. align-items: center;
  329. flex-direction: row;
  330. background-color: #fff;
  331. box-shadow: 0 -3rpx 6rpx rgba($color: #6a6a6a, $alpha: 0.16);
  332. .handle-item {
  333. font-size: 24rpx;
  334. color: #d0cfd5;
  335. text-align: center;
  336. margin-right: 130rpx;
  337. &:last-child {
  338. margin-right: 0;
  339. }
  340. .img_ico {
  341. width: 56rpx;
  342. height: 54rpx;
  343. margin: 0 auto;
  344. }
  345. }
  346. .button-item {
  347. background-color: transparent;
  348. line-height: normal;
  349. }
  350. }
  351. .noauth-cont {
  352. padding-top: 150rpx;
  353. text-align: center;
  354. font-size: 28rpx;
  355. .noauth-ico {
  356. width: 365rpx;
  357. height: 229rpx;
  358. margin-bottom: 70rpx;
  359. }
  360. .tip {
  361. width: 532rpx;
  362. margin: 0 auto 100rpx;
  363. .contract {
  364. padding: 40rpx 90rpx 0;
  365. line-height: 44rpx;
  366. text {
  367. display: inline-block;
  368. }
  369. }
  370. }
  371. .btn-cont {
  372. width: 368rpx;
  373. height: 80rpx;
  374. // position: relative;
  375. background: linear-gradient(268deg, #2ddbff 0%, #1599ff 49%, #005eff 100%);
  376. color: #fff;
  377. font-size: 34rpx;
  378. margin: 0 auto;
  379. text-align: center;
  380. line-height: 80rpx;
  381. &.back-btn {
  382. background: #fff !important;
  383. color: #2c83ff;
  384. border: 1px solid #2c83ff;
  385. margin-top: 30rpx;
  386. }
  387. .btn_bg {
  388. width: 100%;
  389. height: 80rpx;
  390. position: absolute;
  391. left: 0;
  392. top: 0;
  393. }
  394. .btn-txt {
  395. width: 100%;
  396. position: absolute;
  397. z-index: 1;
  398. }
  399. }
  400. }
  401. .month_card {
  402. width: 100%;
  403. height: 565rpx;
  404. padding-left: -20rpx;
  405. }
  406. .btn-dl {
  407. background: linear-gradient(253deg, #fcf3e9 0%, #eedec8 100%) !important;
  408. color: #333 !important;
  409. margin: 30rpx auto !important;
  410. }
  411. .month-back {
  412. background: #f6f6f6 !important;
  413. color: #999 !important;
  414. }
  415. .moneh-text {
  416. text-align: center;
  417. width: 632rpx;
  418. margin: 0 auto 20rpx;
  419. color: #999999;
  420. }
  421. }
  422. </style>