无权限页面，事项详情页面标题

src/views/hzyb/forexCalendar/Detail.vue

@@ -79,7 +79,8 @@ const pageTouchmove=(e)=>{
 
 //获取当月指标列表
 async function getEdbList(){
-    const {startDate,endDate,edbInfoId,permissionId} = route.query
+    const {startDate,endDate,edbInfoId,permissionId,permissionName} = route.query
+    document.title = startDate.slice(0,-3)+permissionName+'事项详情'
     await apiGetCalendarEventList({
         chart_permission_id:Number(permissionId),
         start_date:startDate,

src/views/hzyb/forexCalendar/Index.vue

@@ -95,6 +95,7 @@ function getPermissionList(){
         if(res.code===200){
             hasAuth.value = true
             permissonList.value = res.data||[]
+            //将品种列表转换成vant-TreeSelect支持的格式
             items.value = permissonList.value.map(p=>{
                 p.text = p.chart_permission_name
                 if(p.children.length){
@@ -109,6 +110,13 @@ function getPermissionList(){
         }else{
             hasAuth.value = false
             noAuth.value = res.data
+            //将无权限信息传到transIndex，transIndex显示无权限
+            window.parent.postMessage({
+                path:'/hzyb/forex/noauth',
+                query:{
+                    noAuth:noAuth.value
+                }
+            },'*')
         }
     })
 }
@@ -158,6 +166,7 @@ function handleClickEvent(item){
             endDate:moment(activeEnd).subtract(1, 'days').format('YYYY-MM-DD'),
             edbInfoId:item.edb_info_id,
             permissionId:permissionValue.value,
+            permissionName:permissionName.value,
             token:localStorage.getItem('hzyb-token')||''
         }
     },'*')

src/views/hzyb/forexCalendar/components/NoAuth.vue

@@ -0,0 +1,150 @@
+<script setup>
+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,
+});
+
+const authType = computed(() => {
+    if(!props.data) return
+    if (props.data.type === "contact") {
+        handleAutoApply()
+        return 1;
+    }
+    if (props.data.type === "expired") {
+        return 2;
+    }
+    if (props.data.type === "apply" && !props.data.customer_info.has_apply) {
+        return 3;
+    }
+    if (props.data.type === "apply" && props.data.customer_info.has_apply) {
+        return 4;
+    }
+});
+
+const handleAutoApply=()=>{
+  if(!props.data.customer_info.has_apply){
+    if(props.data.customer_info.status=='冻结'||(props.data.customer_info.status=='试用'&&props.data.customer_info.is_suspend==1)){
+        apiApplyPermission({
+            company_name:props.data.customer_info.company_name,
+            real_name:props.data.customer_info.name,
+            source:11,
+            from_page:'事件日历'
+        }).then(res=>{
+            if(res.code===200){
+                console.log('主动申请成功');
+            }
+        }) 
+    }
+  }
+}
+
+// 点击申请
+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=='流失'||props.data.customer_info.status=='关闭'){
+        apiApplyPermission({
+            company_name:props.data.customer_info.company_name,
+            real_name:props.data.customer_info.name,
+            source:11,
+            from_page:'事件日历'
+        }).then(res=>{
+            wx.miniProgram.navigateTo({url:'/pages-applyPermission/applyResult'})
+        })
+        return
+    }
+    wx.miniProgram.navigateTo({ url: '/pages-applyPermission/applyPermission?source=11&from_page=事件日历' })
+}
+
+const goBack=()=>{
+  wx.miniProgram.switchTab({url:'/pages/report'})
+}
+</script>
+
+<template>
+  <div class="chart-noauth-wrap">
+    <img class="img" src="https://hzstatic.hzinsights.com/static/icon/hzyb/activity_no_auth.png" alt="" v-if="authType!=4" />
+    <img class="img-wait" src="https://hzstatic.hzinsights.com/static/icon/hzyb/chart_wait.png" alt="" v-else />
+    <block v-if="authType == 1">
+      <div style="margin-bottom: 15px">您暂无权限查看事件日历</div>
+      <div>若想查看请联系对口销售</div>
+      <a :href="'tel:'+props.data.mobile" tag="div" class="global-btn-yellow-change btn" style="margin-top: 30px">联系销售</a>
+    </block>
+
+    <block v-if="authType == 2">
+      <div style="margin-bottom: 15px">您的权限已到期，暂时无法查看事件日历</div>
+      <div>若想继续查看请联系对口销售</div>
+      <!-- <div>{{info.name}}:{{info.mobile}}</div> -->
+      <a :href="'tel:'+props.data.mobile" tag="div" class="global-btn-yellow-change btn" style="margin-top: 30px">联系销售</a>
+    </block>
+
+    <block v-if="authType == 3">
+      <div style="margin-bottom: 15px">您暂无权限查看图库</div>
+      <div>若想查看可以申请开通</div>
+      <div class="global-btn-yellow-change btn" style="margin-top: 30px" @click="handleApply">立即申请</div>
+    </block>
+
+    <block v-if="authType == 4">
+      <div style="margin-bottom: 15px">您已提交申请</div>
+      <div>请等待销售人员与您联系</div>
+      <div class="global-btn-yellow-change btn" style="margin-top: 30px" @click="goBack">返回</div>
+    </block>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.chart-noauth-wrap {
+  padding-top: 50px;
+  text-align: center;
+  font-size: 32px;
+  .img {
+    width: 100%;
+    margin-bottom: 50px;
+  }
+  .img-wait {
+    margin-top: 200px;
+    width: 186px;
+    margin-bottom: 50px;
+  }
+  .global-btn-yellow-change{
+    background: linear-gradient(270deg, #EEC795 0%, #D9A360 100%);
+    border-radius: 35px;
+    color: #fff;
+    text-align: center;
+    line-height: 70px;
+  }
+  .btn{
+    width: 380px;
+    line-height: 7rpx;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 40px;
+    display: block;
+  }
+}
+</style>

src/views/hzyb/forexCalendar/transIndex.vue

@@ -1,6 +1,7 @@
 <script setup>
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted,watch,nextTick } from 'vue'
 import {useRoute,useRouter} from 'vue-router'
+import NoAuth from './components/NoAuth.vue'
 //强制横屏
 const forceLandscape = (id = '.iframe-class') => {
   const handler = () => {
@@ -41,12 +42,41 @@ const forceLandscape = (id = '.iframe-class') => {
 const router = useRouter()
 function changeRoute(msg){
     const {path,query} = msg.data
+    if(!path||!query) return //vue-devtools也会发message
+    if(path.includes('noauth')){
+        noAuth.value = query.noAuth
+        hasAuth.value = false
+        return
+    }
     router.push({
         path,
         query
     })
 
 }
+let hasAuth = ref(true)
+let noAuth = ref({
+    "name": "俞梦涯", //销售名称
+    "mobile": "15988911628", //销售电话
+    "type": "contact", //类型：
+    "hz_phone": "", //弘则公司电话
+    "customer_info": {
+    "company_name": "江苏智谋科技有限公司", //客户公司名称
+    "name": "孙浩", //用户姓名
+    "mobile": "18883968626", //用户手机号
+    "status": "冻结", //客户状态
+    "is_suspend": 0, //是否暂停：0-否；1-是
+    "has_apply": false //是否有申请过
+    }
+})
+watch(hasAuth,(newVal,oldVal)=>{
+    if(newVal){
+        nextTick(()=>{
+            window.dispatchEvent(new Event('resize'))
+        })
+        
+    }
+})
 const route = useRoute()
 onMounted(()=>{
     localStorage.setItem('hzyb-token',route.query.token)
@@ -58,7 +88,8 @@ onMounted(()=>{
 <template>
     <!-- 直接将旋转作用在Index.vue上会导致日历插件dateClick不触发,vant组件滑动手势x,y轴相反 -->
     <!-- 包一层,iframe为可替换元素,内部元素不受父级样式影响,但overflow-x,overflow-y判断会对调 -->
-    <iframe src="/xcx_h5/hzyb/forex/index" class="iframe-class"></iframe>
+    <iframe src="/xcx_h5/hzyb/forex/index" class="iframe-class" v-if="hasAuth"></iframe>
+    <NoAuth v-else :data="noAuth"></NoAuth>
 </template>
 
 <style scoped lang="scss">