Эх сурвалжийг харах

Merge branch 'master' of http://8.136.199.33:3000/Karsa/raiwechat_link_h5

Karsa 2 жил өмнө
parent
commit
885362d025

+ 14 - 0
src/views/cygx/index.scss

@@ -14,6 +14,20 @@
   .z-index-content {
     position: relative;
     z-index: 5;
+    .deeperReport {
+      width: 280px;
+      height: 70px;
+      background: #1890ff;
+      box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.04);
+      border-radius: 6px;
+      font-size: 30px;
+      color: #ffffff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 50px auto 0 auto;
+      cursor: pointer;
+    }
   }
   .host-collect {
     margin-top: 20px;

+ 12 - 0
src/views/cygx/raiReportDtl.vue

@@ -46,6 +46,7 @@
       <div class="detail-report" :class="reportInfo.IsResearch ? '' : 'detail-bottom'">
         <div id="report-content" v-html="reportInfo.Body"></div>
       </div>
+      <div class="deeperReport" @click="lookDeeperReport" v-if="reportInfo.ReportLink">查看报告链接</div>
       <div class="host-collect" v-if="reportInfo.IsResearch && reportResearch.length">
         <h4>相关热门收藏:</h4>
         <div class="host-content" v-for="item in reportResearch" :key="item.ArticleId">
@@ -378,6 +379,16 @@ const getReport = (id, token, type) => {
     });
   }
 };
+
+const lookDeeperReport = () => {
+  router.push({
+    path: "/strategyReport",
+    query: {
+      url: state.reportInfo.ReportLink,
+    },
+  });
+};
+
 onMounted(() => {
   if (route.query.id) {
     rerportId.value = route.query.id;
@@ -403,6 +414,7 @@ onMounted(() => {
   }
 });
 const { reportInfo, reportResearch } = toRefs(state);
+// url: raiReportDtl?id=3001&token=20ec44c7fe0e02ff597c324406ce49ca6d949c0acd34f8f3775e5b5edbf8c44e&fromType=mpwechat
 </script>
 
 <style lang="scss">

+ 12 - 2
src/views/cygx/strategyReport.vue

@@ -3,13 +3,15 @@ import { onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
 const route = useRoute();
 const srcUrl = ref("");
+const pc = ref("");
 onMounted(() => {
-  srcUrl.value = decodeURIComponent(route.query.url) 
+  srcUrl.value = decodeURIComponent(route.query.url);
+  pc.value = route.query.pc || "";
 });
 </script>
 
 <template>
-  <div class="container-strategy">
+  <div :class="[pc ? 'container-strategy-pc' : 'container-strategy']">
     <iframe :src="srcUrl" class="strategy-iframe" frameborder="0" />
   </div>
 </template>
@@ -25,4 +27,12 @@ onMounted(() => {
     height: 100%;
   }
 }
+.container-strategy-pc {
+  height: 100vh;
+  padding-bottom: 10px;
+  .strategy-iframe {
+    width: 100%;
+    height: 100%;
+  }
+}
 </style>

+ 30 - 4
src/views/cygxPc/report.vue

@@ -24,7 +24,7 @@ const getReport = (id) => {
   }).then((res) => {
     if (res.Ret === 200) {
       haveData.value = res.Data.HasPermission === 1 ? true : false;
-      mobile.value = res.Data.Mobile
+      mobile.value = res.Data.Mobile;
       if (res.Data.HasPermission === 1) {
         //有访问权限
         state.reportInfo = res.Data.Detail;
@@ -44,6 +44,16 @@ const getReport = (id) => {
     }
   });
 };
+const lookDeeperReport = () => {
+  router.push({
+    path: "/strategyReport",
+    query: {
+      url: state.reportInfo.ReportLink,
+      pc: "true",
+    },
+  });
+};
+
 onMounted(() => {
   if (localStorage.getItem("cygx_token")) {
     rerportId.value = route.query.id;
@@ -57,7 +67,7 @@ const { reportInfo, reportResearch } = toRefs(state);
 
 <template>
   <div class="container-cygx-pc" v-if="haveData" :class="reportInfo.IsResearch ? 'no-cv' : ''">
-     <div class="z-index-content" v-if="reportInfo.ArticleId">
+    <div class="z-index-content" v-if="reportInfo.ArticleId">
       <div class="content-top">
         <div class="report-title">{{ reportInfo.Title }}</div>
         <div class="report-text">
@@ -67,14 +77,14 @@ const { reportInfo, reportResearch } = toRefs(state);
               <span>{{ reportInfo.PublishDate }}</span>
             </div> -->
             <!-- <div class="seller-list"> -->
-              <!-- <span>联系人:</span>
+            <!-- <span>联系人:</span>
               <span v-for="(item, index) in reportInfo.SellerList" :key="index"> {{ item.SellerName }}({{ item.SellerMobile }})&nbsp;&nbsp; </span> -->
             <!-- </div> -->
             <div class="report-research">
               <div style="display: flex">
                 <img :src="reportInfo.DepartmentImgUrl" v-if="reportInfo.DepartmentImgUrl" />
                 <div class="research-author">
-                  <p >{{ reportInfo.NickName }}</p> 
+                  <p>{{ reportInfo.NickName }}</p>
                   <p class="time">{{ reportInfo.PublishDate }}</p>
                 </div>
               </div>
@@ -101,6 +111,7 @@ const { reportInfo, reportResearch } = toRefs(state);
       <div class="detail-report" :class="reportInfo.IsResearch ? '' : 'detail-bottom'">
         <div id="report-content" v-html="reportInfo.Body"></div>
       </div>
+      <div class="deeperReport" @click="lookDeeperReport" v-if="reportInfo.ReportLink">查看报告链接</div>
     </div>
     <div class="btn-returntop" v-if="reportInfo.ArticleId">
       <img src="~@/assets/cygx/returntop.png" @click="scrolltop" style="width: 40px" />
@@ -267,6 +278,21 @@ const { reportInfo, reportResearch } = toRefs(state);
       }
     }
   }
+  .deeperReport {
+    width: 128px;
+    height: 40px;
+    background: #1890ff;
+    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.04);
+    border-radius: 2px 2px 2px 2px;
+    font-size: 16px;
+    font-weight: 400;
+    color: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 80px auto 0 auto;
+    cursor: pointer;
+  }
   .report-link {
     font-size: 14px;
     line-height: 40px;

+ 24 - 5
src/views/hzyb/activity/reportDetail.vue

@@ -1,10 +1,11 @@
 <script setup>
-import { computed, ref, onMounted } from "vue";
+import { computed, ref, onMounted,nextTick } from "vue";
 import { apiGetReportDetail } from "@/api/hzyb/report.js";
 import { getWxConfig } from '@/api/hzyb/common.js'
 import { useRoute, useRouter } from "vue-router";
 import {ImagePreview } from 'vant'
 import LeaveMessage from '../components/leaveMessage/index.vue'
+import {useWaterMark} from '../hooks/watermark'
 const route = useRoute();
 const router=useRouter()
 document.title = "报告详情";
@@ -32,6 +33,20 @@ localStorage.setItem('hzyb-userId',route.query.userId)
 // }
 // setWxConfig()
 
+//水印盒子
+let waterMarkBox=ref('')
+
+// 获取用户信息
+import {apiUserInfo} from '@/api/hzyb/user'
+const getUserInfo=async ()=>{
+    const { code,data }=await apiUserInfo({Authorization: localStorage.getItem('hzyb-token')})
+    if(code===200){
+        nextTick(()=>{
+            useWaterMark(data.mobile,waterMarkBox)
+        })
+    }
+}
+
 let info = ref(null);
 let topBg=ref(null)
 let noAuth = ref(false);
@@ -66,6 +81,7 @@ const getDetail = async () => {
         topBg.value=temTopBg.default
 
         noAuth.value = false;
+        getUserInfo()
     } else if (res.code == 400) {
         noAuth.value = true;
     }
@@ -166,10 +182,11 @@ const goDetail=(e)=>{
 
         <template v-else>
             <div class="content-wrap" >
-                <div v-for="item in info.ResearchReportTypeContentList" :key="item.sort">
-                <h2 class="content-title">{{item.content_type?item.content_type:'核心观点'}}</h2>
-                <div v-html="item.content" class="content-text"></div>
-            </div>
+                <div class="water-mark-box" ref="waterMarkBox" style="position: absolute;width:100%;height:100%;z-index: 1"></div>
+                <div v-for="item in info.ResearchReportTypeContentList" :key="item.sort" style="position: relative;z-index: 5;">
+                    <h2 class="content-title">{{item.content_type?item.content_type:'核心观点'}}</h2>
+                    <div v-html="item.content" class="content-text"></div>
+                </div>
             </div>
 
             <!-- 留言点赞模块 -->
@@ -296,6 +313,7 @@ const goDetail=(e)=>{
     z-index: 2;
     padding: 40px 30px;
     line-height: 1.7;
+    overflow: hidden;
     :deep(a){
        word-wrap: break-word;
     }
@@ -315,6 +333,7 @@ const goDetail=(e)=>{
     :deep(p){
         margin: 0;
         padding: 0;
+        background-color: rgba(255, 255, 255, 0) !important;
     }
 }
 .list-content{

+ 22 - 3
src/views/hzyb/activity/reportWeekDetail.vue

@@ -1,15 +1,29 @@
 <script setup>
-import { computed, ref, onMounted,watch } from "vue";
+import { computed, ref, onMounted,watch,nextTick } from "vue";
 import { apiGetReportDetail, apiGetWeekReportDetail } from "@/api/hzyb/report.js";
 import { useRoute, useRouter,onBeforeRouteUpdate  } from "vue-router";
 import {ImagePreview } from 'vant'
 import LeaveMessage from '../components/leaveMessage/index.vue'
+import {useWaterMark} from '../hooks/watermark'
 const route = useRoute();
 const router=useRouter()
 document.title = "报告详情";
 localStorage.setItem('hzyb-token',route.query.token)
 localStorage.setItem('hzyb-userId',route.query.userId)
 
+//水印盒子
+let waterMarkBox=ref('')
+
+// 获取用户信息
+import {apiUserInfo} from '@/api/hzyb/user'
+const getUserInfo=async ()=>{
+    const { code,data }=await apiUserInfo({Authorization: localStorage.getItem('hzyb-token')})
+    if(code===200){
+        nextTick(()=>{
+            useWaterMark(data.mobile,waterMarkBox)
+        })
+    }
+}
 
 let info = ref(null);
 let topBg = ref(null)
@@ -32,6 +46,7 @@ const getDetail = async () => {
         topBg.value = temTopBg.default
         getList(res.data.research_report_type_info.research_report_id)
         noAuth.value = false;
+        getUserInfo()
     } else if (res.code == 400) {
         noAuth.value = true;
     }
@@ -122,6 +137,7 @@ onBeforeRouteUpdate(to => {
             <div class="box" @click="showTips"></div>
         </div>
         <div class="content-wrap">
+            <div class="water-mark-box" ref="waterMarkBox" style="position: absolute;width:100%;height:100%;z-index: 1;"></div>
             <div class="top-box">
                 <h2>{{info.research_report_type_info.research_report_type_title}}</h2>
                 <span class="classify-box">
@@ -133,10 +149,10 @@ onBeforeRouteUpdate(to => {
                 v-for="item in info.research_report_type_content_list"
                 :key="item.sort"
             >
-                <h2 class="content-title">
+                <h2 class="content-title" style="position: relative;z-index: 5;">
                     {{ item.content_type ? item.content_type : "核心观点" }}
                 </h2>
-                <div v-html="item.content" class="content-text"></div>
+                <div v-html="item.content" class="content-text" style="position: relative;z-index: 5;"></div>
             </div>
         </div>
         <div class="footer-wrap">
@@ -169,6 +185,7 @@ onBeforeRouteUpdate(to => {
     <LeaveMessage
         :info="info"
         @like_change="giveOrCancelLike"
+        v-if="info"
     />
 
     <!-- 弹窗 -->
@@ -289,6 +306,7 @@ onBeforeRouteUpdate(to => {
     z-index: 2;
     padding: 40px 30px;
     line-height: 1.7;
+    overflow: hidden;
     :deep(a){
        word-wrap: break-word;
     }
@@ -308,6 +326,7 @@ onBeforeRouteUpdate(to => {
     :deep(p) {
         margin: 0;
         padding: 0;
+        background-color: rgba(255, 255, 255, 0) !important;
     }
     .top-box{
         margin-bottom: 30px;

+ 27 - 2
src/views/hzyb/chart/component/noAuth.vue

@@ -1,6 +1,17 @@
 <script setup>
-import { computed } from "vue";
-import {apiApplyPermission} from '@/api/hzyb/user'
+import { computed,ref } from "vue";
+import { Dialog } from "vant";
+import {apiApplyPermission,apiUserInfo} from '@/api/hzyb/user'
+
+let userInfo=ref(null)
+const getUserInfo=async ()=>{
+  const res=await apiUserInfo()
+  if(res.code===200){
+    userInfo.value=res.data
+  }
+}
+getUserInfo()
+
 
 const props = defineProps({
   data: Object,
@@ -42,6 +53,20 @@ const handleAutoApply=()=>{
 
 // 点击申请
 const handleApply=()=>{
+    if(userInfo.value.is_bind===0){
+      Dialog.confirm({
+        title:'温馨提示',
+        message:'为了优化您的用户体验,\n 请登录后查看更多信息!',
+        confirmButtonText:'去登录',
+        confirmButtonColor:'#E6B77D',
+        cancelButtonColor:'#666'
+      }).then(res=>{
+        wx.miniProgram.reLaunch({url:'/pages/login'})
+      })
+      return
+    }
+
+
     if(props.data.customer_info.status=='流失'){
         apiApplyPermission({
             company_name:props.data.customer_info.company_name,

+ 110 - 52
src/views/hzyb/components/leaveMessage/index.vue

@@ -78,6 +78,7 @@ const publishMessageHandle = async() => {
 	isShowMessagebox.value = false
 	setTimeout(() => {
 		getMyMsgList();
+		getHotMsgList();
 	},300)
 }
 
@@ -87,6 +88,10 @@ const myMessageList = ref([]);
 const realMyList = ref([]);
 //精选留言列表
 const hotMessageList = ref([]);
+
+// 当前选中哪种留言
+let msgType=ref('全部留言')
+
 /* 我的留言 */
 const getMyMsgList = async () => {
 
@@ -101,7 +106,7 @@ const getMyMsgList = async () => {
 
 	myMessageList.value = data.list || [];
 	isHideRealName.value = data.is_show_name ? false :  true;
-	realMyList.value = myMessageList.value.length > 3  ? myMessageList.value.slice(0,3) : myMessageList.value;
+	// realMyList.value = myMessageList.value.length > 3  ? myMessageList.value.slice(0,3) : myMessageList.value;
 }
 /* 精选留言 */
 const getHotMsgList = async () => {
@@ -124,13 +129,23 @@ const getHotMsgList = async () => {
 getMyMsgList();
 getHotMsgList();
 //是否收起我的留言
-const isSlideMyMsg = ref(false);
-const slideMymessageHandle = () => {
-	isSlideMyMsg.value = !isSlideMyMsg.value
-	realMyList.value = isSlideMyMsg.value ? myMessageList.value : myMessageList.value.slice(0,3);
+// const isSlideMyMsg = ref(false);
+// const slideMymessageHandle = () => {
+// 	isSlideMyMsg.value = !isSlideMyMsg.value
+// 	realMyList.value = isSlideMyMsg.value ? myMessageList.value : myMessageList.value.slice(0,3);
+// }
+// 留言类型切换
+const msgTypeChange=(e)=>{
+	msgType.value=e
+	if(e==='全部留言'){
+		getHotMsgList();
+	}else{
+		getMyMsgList();
+	}
 }
 
 
+
 /* 点赞 */
 const giveLikeHandle = async() => {
 	const { code,data } = await setLike({
@@ -161,16 +176,16 @@ const delMessageHandle = ({ comment_id }) => {
 
 	/* 删除页面上的留言 */
 	const removeMessageByView = (comment_id) => {
-			let index_my = myMessageList.value.findIndex(_ => _.comment_id === comment_id);
-			let index_hot = hotMessageList.value.findIndex(_ => _.comment_id === comment_id);
+		let index_my = myMessageList.value.findIndex(_ => _.comment_id === comment_id);
+		let index_hot = hotMessageList.value.findIndex(_ => _.comment_id === comment_id);
 
 		console.log(comment_id,index_my,index_hot)
 
-			index_my !== -1 && myMessageList.value.splice(index_my, 1)
-			index_hot !== -1 && hotMessageList.value.splice(index_hot, 1)
-			realMyList.value = isSlideMyMsg.value ? myMessageList.value : myMessageList.value.slice(0,3);
-		}
+		index_my !== -1 && myMessageList.value.splice(index_my, 1)
+		index_hot !== -1 && hotMessageList.value.splice(index_hot, 1)
+		// realMyList.value = isSlideMyMsg.value ? myMessageList.value : myMessageList.value.slice(0,3);
 	}
+}
 
 	// 跳转到问答首页
 	const linkToQuestionHandle = () => {
@@ -194,7 +209,7 @@ const delMessageHandle = ({ comment_id }) => {
 					v-model="message_content"
 					label=""
 					type="textarea"
-					placeholder="留言精选后,将对所有人可见"
+					placeholder="发布一条留言"
 					autosize
 				/>
 				<div class="write-bottom">
@@ -209,22 +224,31 @@ const delMessageHandle = ({ comment_id }) => {
 		</div>
 
 		<div class="message-list-cont">
-			<template v-if="myMessageList.length">
+			<div class="tabs-box">
+				<span 
+					:class="msgType==='全部留言'?'active':''" 
+					@click="msgTypeChange('全部留言')"
+				>全部留言</span>
+				<span 
+					:class="msgType==='我的留言'?'active':''"
+					@click="msgTypeChange('我的留言')"
+				>我的留言</span>
+			</div>
+			<template v-if="msgType==='我的留言'">
 				<div class="my-message message-section">
-					<h4 class="section-label">我的留言</h4>
 					<ul class="mesage-ul">
-						<li class="message-item" v-for="item in realMyList" :key="item.comment_id">
+						<li class="message-item" v-for="item in myMessageList" :key="item.comment_id">
 							<div class="message-cont">
 								<img :src="item.user_img_url" alt="" class="avatar">
 								<div class="info">
 									<div class="info-top">
 										<span class="name">
 											{{item.user_name}}
-											<Tag color="#DEDFE5" text-color="#fff" v-if="item.IsTop">置顶</Tag>
+											<Tag color="#DEDFE5" text-color="#fff" v-if="item.is_top==1">置顶</Tag>
 										</span>
 										<div class="right-tag">
-											<span>{{item.IsHot ? '已精选' : '未精选'}}</span>
-											<span class="divider">|</span>
+											<!-- <span>{{item.IsHot ? '已精选' : '未精选'}}</span>
+											<span class="divider">|</span> -->
 											<span class="del" @click="delMessageHandle(item)">删除</span>
 										</div>
 									</div>
@@ -241,46 +265,54 @@ const delMessageHandle = ({ comment_id }) => {
 								</li>
 							</ul>
 						</li>
-						<li class="control" @click="slideMymessageHandle" v-if="myMessageList.length > 3">
+						<!-- <li class="control" @click="slideMymessageHandle" v-if="myMessageList.length > 3">
 							<span>{{isSlideMyMsg ? '收起' : '展开'}} <Icon :name="isSlideMyMsg ? 'arrow-up' : 'arrow-down'"/></span>
-						</li>
+						</li> -->
 					</ul>
 				</div>
-				<Divider style="border-color: #999;">以上留言被精选后,将所有人可见</Divider>
+				<div 
+					v-if="myMessageList.length==0" 
+					style="text-align:center;font-size:14px;color:#999;line-height:100px"
+				>
+					暂无留言
+				</div>
 			</template>
-			<div class="wonder-message message-section" v-if="hotMessageList.length">
-				<h4 class="section-label">精选留言</h4>
-				<ul class="mesage-ul">
-					<li class="message-item" v-for="item in hotMessageList" :key="item.comment_id">
-						<div class="message-cont">
-							<img :src="item.user_img_url" alt="" class="avatar">
-							<div class="info">
-								<div class="info-top">
-									<span>
-										{{item.user_name}}
-										<Tag color="#DEDFE5" text-color="#fff" v-if="item.IsTop">置顶</Tag>
-									</span>
-									<span class="del" @click="delMessageHandle(item)" v-if="item.user_id === Number(userId)">删除</span>
-								</div>
-								<p class="content">{{item.content}}</p>
-							</div>
-						</div>	
-						<ul class="reply-list" v-if="item.ReplyList">
-							<li class="message-cont" v-for="sub_item in item.ReplyList" :key="sub_item.comment_id">
-								<img :src="sub_item.admin_img_url" alt="" class="reply-avatar">
+			<template v-if="msgType==='全部留言'">
+				<div class="wonder-message message-section" v-if="hotMessageList.length">
+					<ul class="mesage-ul">
+						<li class="message-item" v-for="item in hotMessageList" :key="item.comment_id">
+							<div class="message-cont">
+								<img :src="item.user_img_url" alt="" class="avatar">
 								<div class="info">
-									<span class="name">{{sub_item.admin_name}}</span>
-									<p class="content">{{sub_item.content}}</p>
+									<div class="info-top">
+										<span>
+											{{item.user_name}}
+											<Tag color="#DEDFE5" text-color="#fff" v-if="item.IsTop">置顶</Tag>
+										</span>
+										<span class="del" @click="delMessageHandle(item)" v-if="item.user_id === Number(userId)">删除</span>
+									</div>
+									<p class="content">{{item.content}}</p>
 								</div>
-							</li>
-						</ul>
-					</li>
-				</ul>
-			</div>
-			<div v-if="myMessageList.length==0&&hotMessageList.length==0" style="text-align:center;font-size:14px;color:#999;line-height:100px">
-				暂无留言
-			</div>
-
+							</div>	
+							<ul class="reply-list" v-if="item.ReplyList">
+								<li class="message-cont" v-for="sub_item in item.ReplyList" :key="sub_item.comment_id">
+									<img :src="sub_item.admin_img_url" alt="" class="reply-avatar">
+									<div class="info">
+										<span class="name">{{sub_item.admin_name}}</span>
+										<p class="content">{{sub_item.content}}</p>
+									</div>
+								</li>
+							</ul>
+						</li>
+					</ul>
+				</div>
+				<div 
+					v-if="hotMessageList.length==0" 
+					style="text-align:center;font-size:14px;color:#999;line-height:100px"
+				>
+					暂无留言
+				</div>
+			</template>
 			<!-- 跳转问答区域 -->
 			<div class="link-to-question" @click="linkToQuestionHandle">
 				想要一对一回复吗?去问答社区提问
@@ -342,6 +374,32 @@ const delMessageHandle = ({ comment_id }) => {
 	.message-list-cont {
 		padding: 70px 30px;
 		background: #F5F6FA;
+		.tabs-box{
+			margin-bottom: 50px;
+			span{
+				font-size: 30px;
+				display: inline-block;
+				margin-right: 60px;
+				color: #999;
+			}
+			.active{
+				font-size: 32px;
+				color: #333;
+				position: relative;
+				&::after{
+					content: '';
+					position: absolute;
+					top: 105%;
+					left: 50%;
+					transform: translateX(-50%);
+					width: 48px;
+					height: 6px;
+					background: #E3B377;
+					border-radius: 4px;
+				}
+			}
+			
+		}
 		.message-section {
 			.section-label {
 				color: #999;

+ 24 - 0
src/views/hzyb/hooks/watermark.js

@@ -0,0 +1,24 @@
+/**
+ * 添加水印钩子
+ * @param text  水印文本
+ * @param target    要设置水印的元素
+ */
+
+
+export function useWaterMark(text,target) {
+    if(!target) return
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    ctx.font = "18px Arial";
+    ctx.rotate((-45 * Math.PI) / 200);
+    ctx.fillStyle='#F1F1F1'
+    ctx.fillText(text, 30, 200);
+    ctx.fillText(text, -40, 100);
+    // 将canvas的内容转换为base64编码
+    const data = canvas.toDataURL("image/png");
+
+    console.log('水印背景图',data);
+
+    // 将容器的的背景图片设置为生成的base64图片,并平铺
+    target.value.style.background = "url(" + data + ") repeat";
+}

+ 25 - 2
src/views/hzyb/pricedriven/detail.vue

@@ -1,13 +1,13 @@
 <script setup>
 import { ref, onMounted, onUnmounted, computed } from "vue";
 import { useRoute } from "vue-router";
-import { Sticky, Icon, ImagePreview,Popup,Toast } from "vant";
+import { Sticky, Icon, ImagePreview,Popup,Toast,Dialog } from "vant";
 import moment from "moment";
 import 'moment/dist/locale/zh-cn';
 moment.locale('zh-cn');
 import _ from "lodash";
 import * as priceApi from "@/api/hzyb/pricedriven.js";
-import {apiApplyPermission} from '@/api/hzyb/user';
+import {apiApplyPermission,apiUserInfo} from '@/api/hzyb/user';
 import SharePoster from "../components/SharePoster.vue";
 
 document.title = "价格驱动";
@@ -15,6 +15,17 @@ document.title = "价格驱动";
 const route = useRoute();
 localStorage.setItem("hzyb-token", route.query.token);
 
+let userInfo=ref(null)
+const getUserInfo=async ()=>{
+  const res=await apiUserInfo()
+  if(res.code===200){
+    userInfo.value=res.data
+  }
+}
+getUserInfo()
+
+
+
 const noAuthInfo = ref(null); //无权限信息
 /* 分类 */
 const varietiesList = ref([]);
@@ -132,6 +143,18 @@ const pupData = ref({
 })
 //点击申请
 const handleGoApply = async () => {
+  if(userInfo.value.is_bind===0){
+    Dialog.confirm({
+      title:'温馨提示',
+      message:'为了优化您的用户体验,\n 请登录后查看更多信息!',
+      confirmButtonText:'去登录',
+      confirmButtonColor:'#E6B77D',
+      cancelButtonColor:'#666'
+    }).then(res=>{
+      wx.miniProgram.reLaunch({url:'/pages/login'})
+    })
+    return
+  }
   if (noAuthInfo.value.customer_info.has_apply) {
     // 已经申请过
     pupData.value.show = true;

+ 49 - 4
src/views/hzyb/report/ChapterDetail.vue

@@ -20,8 +20,7 @@
         </div>
         <img class="ppt-icon" v-if="hasPPt" @click="goPPtDetail" src="@/assets/hzyb/report/ppt-icon.png" alt="">
       </div>
-      <div class="rich-content">
-        <!-- <div v-html="info.report_chapter_item.content" v-if="info.auth_ok"></div> -->
+      <div class="rich-content" ref="richConBox">
         <div v-if="info.auth_ok">
           <ul>
               <li v-for="item in realContent" :key="item" v-html="item"></li>
@@ -131,8 +130,8 @@ import 'moment/dist/locale/zh-cn'
 moment.locale('zh-cn')
 
 import {apiChapterDetail,apiChapterTickerValue,apiRddpShareImg,apiReportPPtImgs} from '@/api/hzyb/report'
-import {apiApplyPermission} from '@/api/hzyb/user'
-import {Popup,Image as VanImage,PullRefresh,Col, Row} from 'vant'
+import {apiApplyPermission,apiUserInfo} from '@/api/hzyb/user'
+import {Popup,Image as VanImage,PullRefresh,Col, Row,Dialog} from 'vant'
 import AudioBox from './components/AudioBox.vue'
 import SharePoster from '../components/SharePoster.vue'
 import _ from 'lodash';
@@ -145,6 +144,7 @@ export default {
     [Col.name]:Col,
     [Row.name]:Row,
     [PullRefresh.name]:PullRefresh,
+    [Dialog.name]:Dialog,
     AudioBox,
     SharePoster,
     LeaveMessage
@@ -193,6 +193,8 @@ export default {
       total_page: 0,
 
       hasPPt:false,
+
+      userInfo:null,
     };
   },
   beforeCreate(){
@@ -225,6 +227,16 @@ export default {
     window.removeEventListener('scroll',this.loadMoreHandle)
   },
   methods: {
+    async getUserInfo(iswatermark){
+      const res=await apiUserInfo()
+      if(res.code===200){
+        this.userInfo=res.data
+        if(!iswatermark) return
+        this.$nextTick(()=>{
+          this.waterMark(res.data.mobile,this.$refs.richConBox)
+        })
+      }
+    },
     // handelPageScroll(){
     //   const top=document.documentElement.scrollTop||document.body.scrollTop
     //   if(top>window.outerHeight){
@@ -292,6 +304,9 @@ export default {
           this.getReportPPtImg()
         }
 
+        //水印
+        this.getUserInfo(res.data.auth_ok)
+
         // 处理标题数据
         //【第{{info.report_chapter_item.stage}}期 | {{info.report_chapter_item.classify_name_first}}  | {{info.report_chapter_item.type_name}}】{{info.report_chapter_item.title}}({{moment(info.report_chapter_item.publish_time).format('MMDD')}})
         this.title=`【第${res.data.report_chapter_item.stage}期 | ${res.data.report_chapter_item.classify_name_first} | ${res.data.report_chapter_item.type_name}】${res.data.report_chapter_item.title}(${moment(res.data.report_chapter_item.publish_time).format('MMDD')})`
@@ -326,6 +341,22 @@ export default {
       }
     },
 
+    //添加水印
+    waterMark(text,target){
+      if(!target) return
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      ctx.font = "18px Arial";
+      ctx.rotate((-45 * Math.PI) / 200);
+      ctx.fillStyle='#F1F1F1'
+      ctx.fillText(text, 30, 200);
+      ctx.fillText(text, -40, 100);
+
+      // 将canvas的内容转换为base64编码
+      const data = canvas.toDataURL("image/png");
+      target.style.background = "url(" + data + ") repeat";
+    },
+
     /*内容分割*/
     splitContentHandle(content) {
         const arr = content.split('</p>');
@@ -446,6 +477,18 @@ export default {
 
     //点击申请
     async handleGoApply(){
+      if(this.userInfo.is_bind===0){
+          Dialog.confirm({
+              title:'温馨提示',
+              message:'为了优化您的用户体验,\n 请登录后查看更多信息!',
+              confirmButtonText:'去登录',
+              confirmButtonColor:'#E6B77D',
+              cancelButtonColor:'#666'
+          }).then(res=>{
+              wx.miniProgram.reLaunch({url:'/pages/login'})
+          })
+          return
+      }
       if(this.info.permission_check.type=='apply'){
         if(this.info.permission_check.customer_info.has_apply){// 已经申请过
           this.pupData.show=true
@@ -590,10 +633,12 @@ export default {
         :deep(span){
             font-size: 36px !important;
             line-height: 1.8 !important;
+            background-color: rgba(255, 255, 255, 0) !important;
         }
         :deep(p){
             font-size: 36px !important;
             line-height: 1.8 !important;
+            background-color: rgba(255, 255, 255, 0) !important;
         }
         :deep(iframe){
             width: 100% !important;

+ 48 - 4
src/views/hzyb/report/Detail.vue

@@ -66,8 +66,7 @@
                 <img class="ppt-icon" v-if="hasPPt" @click="goPPtDetail" src="@/assets/hzyb/report/ppt-icon.png" alt="">
             </div>
 
-            <div class="rich-content">
-                <!-- <div v-html="info.report_info.content" v-if="info.auth_ok"></div> -->
+            <div class="rich-content" style="position: relative;" ref="richConBox">
                 <div v-if="info.auth_ok">
                     <ul>
                         <li v-for="item in realContent" :key="item" v-html="item"></li>
@@ -149,8 +148,8 @@ import 'moment/dist/locale/zh-cn'
 moment.locale('zh-cn')
 
 import {apiReportDetail,apiRddpShareImg,apiReportPPtImgs} from '@/api/hzyb/report'
-import {apiApplyPermission} from '@/api/hzyb/user'
-import {Popup,Image as VanImage,PullRefresh} from 'vant'
+import {apiApplyPermission,apiUserInfo} from '@/api/hzyb/user'
+import {Popup,Image as VanImage,PullRefresh,Dialog} from 'vant'
 import AudioBox from './components/AudioBox.vue'
 import SharePoster from '../components/SharePoster.vue'
 import _ from 'lodash';
@@ -160,6 +159,7 @@ export default {
         [Popup.name]:Popup,
         [VanImage.name]:VanImage,
         [PullRefresh.name]:PullRefresh,
+        [Dialog.name]:Dialog,
         AudioBox,
         SharePoster,
         LeaveMessage
@@ -202,6 +202,8 @@ export default {
             fromPage: '', // message定位到留言板
 
             hasPPt:false,//是否有ppt
+
+            userInfo:null,
         }
     },
     beforeCreate(){
@@ -214,6 +216,7 @@ export default {
         this.reportId=this.$route.query.reportId
         this.fromPage = this.$route.query.fromPage || ''
         this.getDetail()
+        this.getUserInfo()
     },
     mounted(){
         $(document).on('click', '.rich-content img',function(event) {
@@ -234,6 +237,13 @@ export default {
         window.removeEventListener('scroll',this.loadMoreHandle)
     },
     methods: {
+        async getUserInfo(){
+            const res=await apiUserInfo()
+            if(res.code===200){
+                this.userInfo=res.data
+            }
+        },
+
         // 页面滚动
         // handelPageScroll(){
         //     const top=document.documentElement.scrollTop||document.body.scrollTop
@@ -298,6 +308,9 @@ export default {
 
                 if(res.data.auth_ok){
                     this.getReportPPtImg()
+                    this.$nextTick(()=>{
+                        this.waterMark(res.data.permission_check.customer_info.mobile,this.$refs.richConBox)
+                    })
                 }
 
                 // 处理报告标题数据
@@ -376,6 +389,23 @@ export default {
             }
         },
 
+        //添加水印
+        waterMark(text,target){
+            if(!target) return
+            const canvas = document.createElement("canvas");
+            const ctx = canvas.getContext("2d");
+            ctx.font = "18px Arial";
+            ctx.rotate((-45 * Math.PI) / 200);
+            ctx.fillStyle='#F1F1F1'
+            ctx.fillText(text, 30, 200);
+            ctx.fillText(text, -40, 100);
+
+            // 将canvas的内容转换为base64编码
+            const data = canvas.toDataURL("image/png");
+
+            target.style.background = "url(" + data + ") repeat";
+        },
+
         /*内容分割*/
         splitContentHandle(content) {
             const arr = content.split('</p>');
@@ -466,6 +496,18 @@ export default {
 
         //点击申请
         async handleGoApply(){
+            if(this.userInfo.is_bind===0){
+                Dialog.confirm({
+                    title:'温馨提示',
+                    message:'为了优化您的用户体验,\n 请登录后查看更多信息!',
+                    confirmButtonText:'去登录',
+                    confirmButtonColor:'#E6B77D',
+                    cancelButtonColor:'#666'
+                }).then(res=>{
+                    wx.miniProgram.reLaunch({url:'/pages/login'})
+                })
+                return
+            }
             if(this.info.permission_check.type=='apply'){
                 if(this.info.permission_check.customer_info.has_apply){// 已经申请过
                     this.pupData.show=true
@@ -636,10 +678,12 @@ export default {
         :deep(span){
             font-size: 36px !important;
             line-height: 1.8 !important;
+            background-color: rgba(255, 255, 255, 0) !important;
         }
         :deep(p){
             font-size: 36px !important;
             line-height: 1.8 !important;
+            background-color: rgba(255, 255, 255, 0) !important;
         }
         :deep(iframe){
             width: 100% !important;