完成权限

package.json

@@ -3,7 +3,7 @@
   "private": true,
   "version": "0.0.0",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port 8088",
     "build": "vite build --mode product",
     "build.test": "vite build --mode test",
     "preview": "vite preview --port 3001"

src/api/user.js

@@ -6,7 +6,7 @@ import {get,post} from './http'
 /**
  * 获取个人信息
  */
- export const apiUserInfo=()=>{
+export const apiUserInfo=()=>{
 	return get('/user/info',{})
 }
 
@@ -17,11 +17,11 @@ import {get,post} from './http'
  * @param permission 选择的权限
  * @param real_name 姓名
  * @param source 来源：我的1、活动2、图库3、研报4
- * @param from 来源平台：小程序、pc
- * @param fromPage 来源: '活动列表'、'活动详情'
+ * @param source_agent 来源平台：1:小程序、2:pc
+ * @param fromPage 来源页面: '活动列表'、'活动详情'等
  */
 export const apiApplyPermission=params=>{
-	return post('/user/apply',{...params,from:'pc'})
+	return post('/user/apply',{...params,source_agent:2})
 }
 
 /**

src/directive/drag.js

@@ -0,0 +1,69 @@
+class Drap{
+    static zIndex = 1;
+    constructor(el,option={}){
+        this.el = el;
+        this.x=0;
+        this.y=0;
+        this.option = option;
+        this.init();
+    }
+    init(){
+        this.setEleStyle(this.option||{});
+        this.el.onmousedown =(e)=>{
+            this.onMouseDown(e)
+            this.el.setCapture&&this.el.setCapture() //全局捕获
+            return false
+        }
+
+    }
+    //样式设置
+    setEleStyle(option){
+        for (const key in option) {
+            this.el.style[key] = option[key]
+        }
+    }
+
+    //按下ele
+    onMouseDown(e){
+        let zIndex = getComputedStyle(this.el).getPropertyValue('z-index');
+        zIndex=isNaN(zIndex)?1:zIndex
+        Drap.zIndex =Drap.zIndex>zIndex?Number(Drap.zIndex)+1:Number(zIndex)+1
+        this.setEleStyle({"zIndex":Drap.zIndex,position:'fixed','cursor': 'move'})
+        this.x = e.clientX-this.el.offsetLeft;
+        this.y= e.clientY-this.el.offsetTop;
+        document.onmousemove=(e)=>this.onMouseMove(e);
+        document.onmouseup = (e)=>this.onMouseUp(e)
+    }
+    //移动move
+    onMouseMove(e){
+        let X = e.clientX-this.x
+        let Y = e.clientY-this.y;
+        if(X<10-this.el.offsetWidth){
+            X=10-this.el.offsetWidth
+        }else if(X>document.documentElement.clientWidth-10){
+            X =document.documentElement.clientWidth-10
+        }
+        if(Y<10-this.el.clientHeight){
+            Y=10-this.el.clientHeight
+        }else if(Y>document.documentElement.clientHeight-10){
+            Y =document.documentElement.clientHeight-10
+        }
+        this.el.style.left = X+'px'
+        this.el.style.top = Y+'px'
+    }
+    //释放
+    onMouseUp(e){
+        document.onmousemove = null
+        document.onmouseup =null
+        this.setEleStyle({'cursor': 'pointer'})
+        this.el.setCapture&&this.el.setCapture() //释放全局捕获
+
+    }
+}
+
+
+export const  drag = {
+    mounted(el, binding) { 
+        new Drap(el,binding.value||{})
+    }
+}

src/layout/Index.vue

@@ -3,6 +3,8 @@ import Aside from "./component/Aside.vue";
 import { useStore } from "vuex";
 import { computed, ref,watch } from "vue";
 import moment from "moment";
+import { useRouter } from "vue-router";
+const router=useRouter()
 
 const store = useStore();
 const userInfo = computed(() => store.state.userInfo);
@@ -24,7 +26,6 @@ const lastTime = computed(() => {
 });
 
 import { apiGetPermissionList } from "@/api/common.js";
-
 let permissionList = ref([]);
 const getPermissionList = async () => {
   const res = await apiGetPermissionList();
@@ -50,9 +51,35 @@ let permission_list_str = computed(() => {
   return arr2.join('/')
 });
 
+//我的中点击去申请权限
+import { ElMessageBox } from 'element-plus'
+import {apiLastApplyRecord} from '@/api/user'
+const handleGoApplyPermission=async ()=>{
+  const res=await apiLastApplyRecord()
+  if(res.code===200){
+    if(res.data){
+      const htmlStr=`<p style="text-align:center;">您已提交过申请，请耐心等待</p>`
+      ElMessageBox({
+        title:'申请提醒',
+        message:htmlStr,
+        dangerouslyUseHTMLString: true,
+        confirmButtonText:'知道了',
+        confirmButtonClass:'self-elmessage-confirm-btn'
+      })
+    }else{
+      router.push({
+        path:'/apply/permission',
+        query:{
+          source:1,
+          fromPage:'我的'
+        }
+      })
+    } 
+  }
+}
+
+
 // 全局返回按钮
-import { useRouter } from "vue-router";
-const router=useRouter()
 const goBack=()=>{
   router.go(-1)
 }
@@ -110,22 +137,30 @@ store.state.audioData.INS=globalAudioIns
         </el-popover>
         <el-popover :width="400" popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;">
           <template #reference>
-            <el-avatar shape="square" :size="50" src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"></el-avatar>
+            <el-avatar shape="square" :size="50" :src="$store.state.globalImgUrls.defaultAvatar"></el-avatar>
           </template>
           <template #default>
             <div class="userinfo-box" v-if="userInfo">
               <div class="top">
-                <el-avatar shape="square" :size="50" src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"></el-avatar>
-                <p style="font-size: 20px">{{ userInfo.real_name }}</p>
-                <p>{{ userInfo.mobile }}</p>
+                <el-avatar shape="square" :size="50" :src="$store.state.globalImgUrls.defaultAvatar"></el-avatar>
+                <p style="font-size: 20px">{{ userInfo.real_name||'--' }}</p>
+                <p>{{ userInfo.mobile||userInfo.email }}</p>
               </div>
               <div class="flex info-item">
                 <div class="label">公司</div>
-                <div class="con">{{ userInfo.company_name }}</div>
+                <div class="con">{{ userInfo.company_name||'--' }}</div>
               </div>
               <div class="flex info-item">
                 <div class="label">品种权限</div>
-                <div class="con">{{ permission_list_str }}</div>
+                <div class="con" v-if="userInfo.status=='冻结'||(userInfo.status=='试用'&&userInfo.is_suspend==1)">
+                  <span>暂无权限</span>
+                  <span class="btn">联系销售</span>
+                </div>
+                <div class="con" v-else-if="userInfo.permission_list.length==0">
+                  <span>暂无权限</span>
+                  <span class="btn" @click="handleGoApplyPermission">立即申请</span>
+                </div>
+                <div class="con" v-else>{{permission_list_str}}</div>
               </div>
               <div class="flex info-item">
                 <div class="label">服务截至日期</div>
@@ -138,7 +173,7 @@ store.state.audioData.INS=globalAudioIns
     </el-container>
 
     <!-- 全局音频模块 -->
-    <div class="global-audio-box" v-if="$store.state.audioData.list.length>0">
+    <div class="global-audio-box" v-if="$store.state.audioData.list.length>0" v-drag="{'zIndex':100}">
       <div style="height:10px;cursor: move;">
         <svg @click="handleAudioClose" class="icon" width="20" height="20" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-042ca774=""><path fill="currentColor" d="M764.288 214.592L512 466.88 259.712 214.592a31.936 31.936 0 00-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1045.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0045.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 10-45.12-45.184z"></path></svg>
       </div>
@@ -211,18 +246,37 @@ store.state.audioData.INS=globalAudioIns
   .info-item {
     padding: 20px 26px 20px 20px;
     border-top: 1px solid #ebebeb;
+    position: relative;
     .label {
       width: 90px;
       margin-right: 19px;
       flex-shrink: 0;
     }
+    .con{
+      .btn{
+        width: 97px;
+        height: 30px;
+        border-radius: 8px;
+        border: 1px solid #DAB37C;
+        font-size: 16px;
+        color: #DAB37C;
+        display: inline-block;
+        text-align: center;
+        line-height: 30px;
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        cursor: pointer;
+      }
+    }
   }
 }
 
 .global-audio-box{
   position: fixed;
   width: 485px;
-  min-height: 59px;
+  height: 150px;
   background: #FFFFFF;
   box-shadow: 0px 3px 12px 0px rgba(81, 88, 101, 0.16);
   border-radius: 8px;

src/main.js

@@ -6,10 +6,13 @@ import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import "@/style/global.scss";//全局样式
 import 'normalize.css'
+import {drag} from  "./directive/drag"
+
 
 
 
 const app = createApp(App)
+app.directive('drag', drag)
 
 app.use(ElementPlus)
 app.use(router)

src/router/index.js

@@ -66,6 +66,34 @@ const routes=[
         }
       }
     ]
+  },
+  {
+    path: "/apply",
+    name: "Apply",
+    component: () => import("@/layout/Index.vue"),
+    meta: {
+      title:"申请试用"
+    },
+    children: [
+      {
+        path: "permission",// source来源(如：2) fromPage=来源页面(如:活动列表)
+        name: "ApplyPermission",
+        component: () => import("@/views/applyPermission/Apply.vue"),
+        meta: {
+          title: "申请试用",
+          hasBack:true
+        }
+      },
+      {
+        path: "result",
+        name: "ApplyPermissionResult",
+        component: () => import("@/views/applyPermission/Result.vue"),
+        meta: {
+          title: "申请结果",
+          hasBack:true
+        }
+      }
+    ]
   }
 
 ]

src/store/index.js

@@ -4,6 +4,15 @@ import {apiUserInfo} from '@/api/user.js'
 const token=localStorage.getItem('token')||''
 export default createStore({
   state: {
+    globalImgUrls:{//图片配置资源
+      chartWait:'https://hzstatic.hzinsights.com/static/icon/hzyb/chart_wait.png',
+      chartEmpty:'https://hzstatic.hzinsights.com/static/icon/hzyb/chart_empty.png',
+      activityNoAuth:'https://hzstatic.hzinsights.com/static/icon/hzyb/activity_no_auth.png',
+      imgSuccess:'https://hzstatic.hzinsights.com/static/icon/hzyb/success_icon.png',
+      loginTop:'https://hzstatic.hzinsights.com/static/icon/hzyb/login_top_img.png',
+      idCardExp:'https://hzstatic.hzinsights.com/static/icon/hzyb/idcard_exp.jpg',
+      defaultAvatar:'https://hzstatic.hzinsights.com/static/icon/hzyb/default_avatar.png',
+    },
     token:token,
     userInfo:null,
     audioData:{

src/views/activity/Detail.vue

@@ -1,13 +1,18 @@
 <script setup>
-import { computed, ref } from "vue";
+import { computed, reactive, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { formatActivityTime } from "./utils";
+import { ElMessage } from 'element-plus'
 
 const route = useRoute();
 const router=useRouter()
 
 // 获取详情
 import { apiActivityDetail } from "@/api/activity.js";
+let noAuth=reactive({
+    show:false,
+    data:null
+})
 let info = ref(null);
 let infoList = ref(null)
 const getDetail = async () => {
@@ -61,6 +66,9 @@ const getDetail = async () => {
                 infoList.value.push({ label: "网络参会", text: res.data.linkParticipants, color: "yellow", type: "copy" });
             }
         }
+    }else if(res.code===403){//无权限
+        noAuth.show=true
+        noAuth.data=res.data
     }
 };
 getDetail();
@@ -114,6 +122,58 @@ const handlePlayAudio=(index)=>{
     }
     
 }
+
+
+// 复制号码
+const handleCopyTel=(e)=>{
+    navigator.clipboard.writeText(e)
+    ElMessage('复制成功')
+}
+
+//返回
+const goBack=()=>{
+    router.go(-1)
+}
+
+// 申请
+const handleApply=()=>{
+    if(noAuth.data.type=='apply'){
+        if(noAuth.data.customer_info.has_apply){//已经申请过
+            const htmlStr=`<p>您已提交过申请，请耐心等待</p>`
+            ElMessageBox({
+                title:`会议提醒`,
+                message:htmlStr,
+                dangerouslyUseHTMLString: true,
+                confirmButtonText:'知道了',
+                confirmButtonClass:'self-elmessage-confirm-btn'
+            })
+        }else{
+            if(!noAuth.data.customer_info.status||noAuth.data.customer_info.status!='流失'){
+                console.log('跳转申请页');
+                router.push('/apply/permission?source=2&fromPage=活动详情')
+            }else{//主动调一次申请权限接口 
+                apiApplyPermission({
+                    company_name:noAuth.data.customer_info.company_name,
+                    real_name:noAuth.data.customer_info.name,
+                    source:2,
+                    fromPage:'活动详情'
+                }).then((res)=>{
+                    if(res.code===200){
+                        console.log('主动申请成功');
+                        const htmlStr=`<p>申请已提交</p><p>请等待销售人员与您联系</p>`
+                        ElMessageBox({
+                            title:`会议提醒`,
+                            message:htmlStr,
+                            dangerouslyUseHTMLString: true,
+                            confirmButtonText:'知道了',
+                            confirmButtonClass:'self-elmessage-confirm-btn'
+                        })
+                    }
+                })
+            }
+        }
+    }
+}
 </script>
 
 <template>
@@ -176,6 +236,20 @@ const handlePlayAudio=(index)=>{
                 </div>
             </div>
         </div>
+        <!-- 无权限展示页面 -->
+        <div class="no-auth-wrap" v-if="noAuth.show">
+            <img :src="$store.state.globalImgUrls.activityNoAuth" alt="">
+            <p style="font-size:16px">您暂无权限参加此活动</p>
+            <block v-if="noAuth.data.type=='contact'">
+                <p style="font-size:16px">若想参加，可以联系对口销售--{{noAuth.data.name}}：{{noAuth.data.mobile}}</p>
+                <div class="btn" @click="handleCopyTel(noAuth.data.mobile)">复制号码</div>
+            </block>
+            <block v-else>
+                <p style="font-size:16px">若想参加可以申请开通</p>
+                <div class="btn" @click="handleApply">立即申请</div>
+            </block>
+            <div class="back-btn" @click="goBack">返回</div>
+        </div>
     </div>
 </template>
 
@@ -285,5 +359,39 @@ const handlePlayAudio=(index)=>{
             }
         }
     }
+
+    .no-auth-wrap{
+        text-align: center;
+        img{
+            width: 400px;
+        }
+        .back-btn{
+            text-align: center;
+            line-height: 36px;
+            color: #DAB37C;
+            width: 180px;
+            height: 36px;
+            border-radius: 4px;
+            border: 1px solid #DAB37C;
+            cursor: pointer;
+            margin-left: auto;
+            margin-right: auto;
+            font-size: 16px;
+            margin-top: 10px;
+        }
+        .btn{
+            text-align: center;
+            line-height: 36px;
+            color: #fff;
+            width: 180px;
+            height: 36px;
+            border-radius: 4px;
+            background-color: #DAB37C;
+            cursor: pointer;
+            margin-left: auto;
+            margin-right: auto;
+            font-size: 16px;
+        }
+    }
 }
 </style>

src/views/activity/List.vue

@@ -90,7 +90,7 @@ const goDetail=(id)=>{
     })
 }
 import { ElMessage,ElMessageBox } from 'element-plus'
-import {apiActivityAddRemind,apiActivityCancelRemind} from '@/api/activity.js'
+import {apiActivityAddRemind,apiActivityCancelRemind,apiActivityRegister,apiActivityCancelRegister} from '@/api/activity.js'
 import {applyAuth} from './applyAuth'
 // 添加/取消提醒
 const handleRemind=(item)=>{
@@ -100,37 +100,14 @@ const handleRemind=(item)=>{
         cancelRemind(item)
     }
 }
-
 // 添加提醒
 const addRemind=async (item)=>{
     const res=await apiActivityAddRemind({activity_id:Number(item.activityId)})
     if(res.code===200){
-        const htmlStr=`<h4 style="text-align:center;margin-bottom:5px;font-size:16px;margin-top:0">设置成功</h4>
-                    <p style="text-align:center;">关注【弘则研究】公众号，接收会前15分钟微信提醒，并及时获取活动信息变更通知</p>`
-        ElMessageBox({
-            title:'会议提醒',
-            message:htmlStr,
-            dangerouslyUseHTMLString: true,
-            confirmButtonText:'知道了',
-            confirmButtonClass:'self-elmessage-confirm-btn'
-        })
         item.hasRemind=1
-    }else if(res.code===4001){
-        if(res.data.type=='time'){
-            const htmlStr=`<p style="text-align:center;">会议开始前15分钟内无法设置会议提醒</p>`
-            ElMessageBox({
-                title:'会议提醒',
-                message:htmlStr,
-                dangerouslyUseHTMLString: true,
-                confirmButtonText:'知道了',
-                confirmButtonClass:'self-elmessage-confirm-btn'
-            })
-        }
-    }else if(res.code===403){
-        applyAuth(res.data,'会议',2,'活动列表')
     }
+    applyAuth(res,'会议',2,'活动列表')
 }
-
 //取消提醒
 const cancelRemind=async (item)=>{
     const res=await apiActivityCancelRemind({activity_id:Number(item.activityId)})
@@ -142,6 +119,33 @@ const cancelRemind=async (item)=>{
     }
 }
 
+// 报名/取消报名 线下参会
+const handleRegister=(item)=>{
+    if(item.registerState===0){
+        addRegister(item)
+    }else{
+        cancelRegister(item)
+    }
+}
+// 报名
+const addRegister=async (item)=>{
+    const res=await apiActivityRegister({activity_id:Number(item.activityId)})
+    if(res.code===200){
+        item.registerState=1
+    }
+    applyAuth(res,'活动',2,'活动列表')
+}
+//取消报名
+const cancelRegister=async (item)=>{
+    const res=await apiActivityCancelRegister({activity_id:Number(item.activityId)})
+    if(res.code===200){
+        ElMessage('取消报名成功')
+        item.registerState=0
+    }else if(res.code===403){
+        ElMessage.warning(res.msg)
+    }
+}
+
 
 // 获取音频
 import { useStore } from "vuex";
@@ -156,9 +160,12 @@ const handleGetAudio=async (item)=>{
         }
         return
     }
+    if(!(item.firstActivityTypeId===1&&item.activityState===3&&item.hasPlayBack)) return
     const res=await apiActivityAudios({activity_id:Number(item.activityId)})
     if(res.code===200){
         store.commit('addAudio',{list:res.data,activityId:item.activityId,index:0})
+    }else if(res.code===403){
+        applyAuth(res,'会议',2,'活动列表')
     }
 }
 
@@ -223,8 +230,9 @@ const aduioIconDefault=new URL('../../assets/audio-pause-3.png', import.meta.url
                             <block v-if="item.activityState===1">
                                 <span :class="['btn',!item.hasRemind&&'active']" @click.stop="handleRemind(item)">{{item.hasRemind?'取消提醒':'会议提醒'}}</span>
                                 <span 
-                                    :class="['btn',!item.registerState&&'active']"
+                                    :class="['btn',!item.registerState&&'active-2']"
                                     v-if="item.firstActivityTypeId===3"
+                                    @click.stop="handleRegister(item)"
                                 >{{item.registerState?'取消线下报名':'报名线下参会'}}</span>
                             </block>
                             <!-- 音频播放 -->
@@ -246,11 +254,12 @@ const aduioIconDefault=new URL('../../assets/audio-pause-3.png', import.meta.url
                 </div>
             </li>
         </ul>
+         <p style="text-align:center;color:#666" v-if="listData.list.length>0&&listData.finished">没有更多了~</p>
     </div>
 </template>
 
 <style lang="scss" scoped>
-.activity-list-page{
+ .activity-list-page{
     height: 100%;
     overflow-y: auto;
     .top-nav-wrap{
@@ -364,6 +373,11 @@ const aduioIconDefault=new URL('../../assets/audio-pause-3.png', import.meta.url
                         background: #DAB37C;
                         color: #fff;
                     }
+                    .active-2{
+                        border: 1px solid #DAB37C;
+                        background-color: #fff;
+                        color: #DAB37C;
+                    }
                     .btn-audio{
                         border: 1px solid #DAB37C;
                         color: #DAB37C;

src/views/activity/applyAuth.js

@@ -1,86 +1,122 @@
 /**
  * 活动模块 公共申请权限
- * @parms data 接口返回数据
+ * @parms res 接口返回数据
  * @param type 活动\会议
+ * @param source 来源：我的1、活动2、图库3、研报4
+ * @param fromPage 来源: '活动列表'、'活动详情'等
  */
 import {apiApplyPermission} from '@/api/user'
 import { ElMessage,ElMessageBox } from 'element-plus'
-export const applyAuth=(data,type,source,fromPage)=>{
-    if(data.type=='contact'){
-        const htmlStr=`<p>您暂无权限参加此${type}，若想参加请联系对口销售--${data.name}：${data.mobile}</p>`
+import router from "@/router";
+export const applyAuth=(res,type,source,fromPage)=>{
+    if(res.code===200){
+        const htmlStr=`<h4 style="text-align:center;margin-bottom:5px;font-size:16px;margin-top:0">设置成功</h4>
+                    <p style="text-align:center;">关注【弘则研究】公众号，接收会前15分钟微信提醒，并及时获取活动信息变更通知</p>`
         ElMessageBox({
-            title:`${type}提醒`,
+            title:'会议提醒',
             message:htmlStr,
             dangerouslyUseHTMLString: true,
-            confirmButtonText:'复制号码',
-            confirmButtonClass:'self-elmessage-confirm-btn',
-            showCancelButton:true,
-            cancelButtonText:'取消',
-            cancelButtonClass:'self-elmessage-cancel-btn'
-        }).then(()=>{
-            navigator.clipboard.writeText(data.mobile)
-            ElMessage('复制成功')
+            confirmButtonText:'知道了',
+            confirmButtonClass:'self-elmessage-confirm-btn'
         })
-        if(!data.customer_info.has_apply){
-            if(data.customer_info.status=='冻结'||(data.customer_info.status=='试用'&&data.customer_info.is_suspend==1)){
-                apiApplyPermission({
-                    company_name:data.customer_info.company_name,
-                    real_name:data.customer_info.name,
-                    source:source,
-                    fromPage:fromPage
-                }).then((res)=>{
-                    if(res.code===200){
-                        console.log('主动申请成功');
-                    }
-                })
-            }
+    }else if(res.code===4001){
+        if(res.data.type=='time'){
+            const htmlStr=`<p style="text-align:center;">会议开始前15分钟内无法设置会议提醒</p>`
+            ElMessageBox({
+                title:'会议提醒',
+                message:htmlStr,
+                dangerouslyUseHTMLString: true,
+                confirmButtonText:'知道了',
+                confirmButtonClass:'self-elmessage-confirm-btn'
+            })
+        }else if(res.data.type=='full'){
+            const htmlStr=`<p style="text-align:center;">此活动报名人数已满，请留意下期活动</p>`
+            ElMessageBox({
+                title:`${type}提醒`,
+                message:htmlStr,
+                dangerouslyUseHTMLString: true,
+                confirmButtonText:'知道了',
+                confirmButtonClass:'self-elmessage-confirm-btn'
+            })
         }
-
-    }else if(data.type=='apply'){//需要申请
-        const htmlStr=`<p>您暂无权限参加此${type}，若想参加可以申请开通哦</p>`
-        ElMessageBox({
-            title:`${type}提醒`,
-            message:htmlStr,
-            dangerouslyUseHTMLString: true,
-            confirmButtonText:'立即申请',
-            confirmButtonClass:'self-elmessage-confirm-btn',
-            showCancelButton:true,
-            cancelButtonText:'取消',
-            cancelButtonClass:'self-elmessage-cancel-btn'
-        }).then(()=>{
-            if(data.customer_info.has_apply){//已经申请过
-                const htmlStr=`<p>您已提交过申请，请耐心等待</p>`
-                ElMessageBox({
-                    title:`${type}提醒`,
-                    message:htmlStr,
-                    dangerouslyUseHTMLString: true,
-                    confirmButtonText:'知道了',
-                    confirmButtonClass:'self-elmessage-confirm-btn'
-                })
-            }else{
-                if(!data.customer_info.status||data.customer_info.status!='流失'){
-                    console.log('跳转申请页');
-                }else{//主动调一次申请权限接口 
+    }else if(res.code===403){
+        if(res.data.type=='contact'){
+            const htmlStr=`<p>您暂无权限参加此${type}，若想参加请联系对口销售--${res.data.name}：${res.data.mobile}</p>`
+            ElMessageBox({
+                title:`${type}提醒`,
+                message:htmlStr,
+                dangerouslyUseHTMLString: true,
+                confirmButtonText:'复制号码',
+                confirmButtonClass:'self-elmessage-confirm-btn',
+                showCancelButton:true,
+                cancelButtonText:'取消',
+                cancelButtonClass:'self-elmessage-cancel-btn'
+            }).then(()=>{
+                navigator.clipboard.writeText(res.data.mobile)
+                ElMessage('复制成功')
+            })
+            if(!res.data.customer_info.has_apply){
+                if(res.data.customer_info.status=='冻结'||(res.data.customer_info.status=='试用'&&res.data.customer_info.is_suspend==1)){
                     apiApplyPermission({
-                        company_name:data.customer_info.company_name,
-                        real_name:data.customer_info.name,
+                        company_name:res.data.customer_info.company_name,
+                        real_name:res.data.customer_info.name,
                         source:source,
                         fromPage:fromPage
                     }).then((res)=>{
                         if(res.code===200){
                             console.log('主动申请成功');
-                            const htmlStr=`<p>申请已提交</p><p>请等待销售人员与您联系</p>`
-                            ElMessageBox({
-                                title:`${type}提醒`,
-                                message:htmlStr,
-                                dangerouslyUseHTMLString: true,
-                                confirmButtonText:'知道了',
-                                confirmButtonClass:'self-elmessage-confirm-btn'
-                            })
                         }
                     })
                 }
             }
-        })
+    
+        }else if(res.data.type=='apply'){//需要申请
+            const htmlStr=`<p>您暂无权限参加此${type}，若想参加可以申请开通哦</p>`
+            ElMessageBox({
+                title:`${type}提醒`,
+                message:htmlStr,
+                dangerouslyUseHTMLString: true,
+                confirmButtonText:'立即申请',
+                confirmButtonClass:'self-elmessage-confirm-btn',
+                showCancelButton:true,
+                cancelButtonText:'取消',
+                cancelButtonClass:'self-elmessage-cancel-btn'
+            }).then(()=>{
+                if(res.data.customer_info.has_apply){//已经申请过
+                    const htmlStr=`<p>您已提交过申请，请耐心等待</p>`
+                    ElMessageBox({
+                        title:`${type}提醒`,
+                        message:htmlStr,
+                        dangerouslyUseHTMLString: true,
+                        confirmButtonText:'知道了',
+                        confirmButtonClass:'self-elmessage-confirm-btn'
+                    })
+                }else{
+                    if(!res.data.customer_info.status||res.data.customer_info.status!='流失'){
+                        console.log('跳转申请页');
+                        router.push('/apply/permission?source=2&fromPage=活动列表')
+                    }else{//主动调一次申请权限接口 
+                        apiApplyPermission({
+                            company_name:res.data.customer_info.company_name,
+                            real_name:res.data.customer_info.name,
+                            source:source,
+                            fromPage:fromPage
+                        }).then((res)=>{
+                            if(res.code===200){
+                                console.log('主动申请成功');
+                                const htmlStr=`<p>申请已提交</p><p>请等待销售人员与您联系</p>`
+                                ElMessageBox({
+                                    title:`${type}提醒`,
+                                    message:htmlStr,
+                                    dangerouslyUseHTMLString: true,
+                                    confirmButtonText:'知道了',
+                                    confirmButtonClass:'self-elmessage-confirm-btn'
+                                })
+                            }
+                        })
+                    }
+                }
+            })
+        }
     }
 }

src/views/applyPermission/Apply.vue

@@ -0,0 +1,192 @@
+<script setup>
+import {reactive, ref} from 'vue'
+import { useStore } from "vuex";
+const store = useStore();
+const apiUploadUrl=import.meta.env.VITE_APP_API_URL+'/public/upload'
+const headers={Authorization:store.state.token}
+let idCardImg=ref('')
+const handleIdCardExpSuccess=(e)=>{
+    if(e.code===200){
+        idCardImg.value=e.data
+    }
+}
+
+let formRef=ref(null)
+const rules=reactive({
+    name:[{
+      required: true,
+      message: '请填写姓名',
+      trigger: 'blur',
+    }],
+    companyName:[{
+      required: true,
+      message: '请填写公司名称',
+      trigger: 'blur',
+    }],
+    tel:[{
+      required: true,
+      message: '请填写手机号',
+      trigger: 'blur',
+    }],
+    permission:[{
+      required: true,
+      message: '请选择品种',
+      trigger: 'change',
+    }],
+
+})
+let formData=reactive({
+    form:null,
+    name: "",
+    tel:store.state.userInfo.mobile,
+    companyName: '',
+    permission: [],
+})
+
+// 获取可以选择的权限列表数据
+import {apiGetPermissionList} from '@/api/common'
+let varietyList=ref([])
+const getVarietyList=async ()=>{
+    const res=await apiGetPermissionList()
+    if(res.code===200){
+        varietyList.value=res.data
+    }
+}
+getVarietyList()
+
+import {apiApplyPermission} from '@/api/user'
+import { ElMessage } from 'element-plus'
+import { useRoute, useRouter } from 'vue-router';
+const route=useRoute()
+const router=useRouter()
+const handleApply=(formEl)=>{
+    formEl.validate((valid) => {
+    if (valid) {
+        console.log('submit!')
+        apiApplyPermission({
+            business_card_url:idCardImg.value,
+            company_name:formData.companyName,
+            permission:formData.permission.join(','),
+            real_name:formData.name,
+            source:Number(route.query.source)||0,
+            fromPage:route.query.fromPage
+        }).then(res=>{
+            if(res.code===200){
+                ElMessage('申请成功')
+                router.replace('/apply/result')
+            }
+        })
+    } else {
+      console.log('error submit!')
+      return false
+    }
+  })
+}
+</script>
+
+<template>
+    <div class="apply-permission-page">
+        <p class="tips" style="margin-bottom:36px">请上传您的名片信息，以便工作人员更好地为您服务</p>
+        <div class="flex img-wrap">
+            <el-upload
+                :headers="headers"
+                :action="apiUploadUrl"
+                :show-file-list="false"
+                :on-success="handleIdCardExpSuccess"
+                :before-upload="beforeAvatarUpload"
+            >
+                <div class="img-box">
+                    <img style="width:100%;height:100%" :src="idCardImg" alt="" v-if="idCardImg">
+                    <div style="text-align:center" v-else>
+                        <img style="width:35px" src="@/assets/add.png" alt="">
+                        <span class="exp-text">上传名片</span>
+                    </div>
+                </div>
+            </el-upload>
+            <div class="img-box" style="margin-left:20px">
+                <img style="width:100%;height:100%" :src="$store.state.globalImgUrls.idCardExp" alt="">
+                <span class="exp-text">名片示例</span>
+            </div>
+        </div>
+        <el-form
+            label-position="left"
+            label-width="80px"
+            :model="formData"
+            :rules="rules"
+            ref="formRef"
+            style="max-width: 460px"
+        >
+            <el-form-item label="姓名" prop="name">
+                <el-input v-model="formData.name" style="width:350px"></el-input>
+            </el-form-item>
+            <el-form-item label="公司名称" prop="companyName">
+                <el-input v-model="formData.companyName" style="width:350px"></el-input>
+            </el-form-item>
+            <el-form-item label="手机号码" prop="tel">
+                <el-input v-model="formData.tel" disabled style="width:350px"></el-input>
+            </el-form-item>
+            <el-form-item label="关注品种" prop="permission">
+                <el-select v-model="formData.permission" multiple collapse-tags placeholder="请选择您的关注品种" style="width:350px">
+                    <el-option 
+                        v-for="item in varietyList"
+                        :key="item.name"
+                        :label="item.name" 
+                        :value="item.name"
+                    ></el-option>
+                </el-select>
+            </el-form-item>
+        </el-form>
+        <div class="btn" @click="handleApply(formRef)">立即申请</div>
+
+    </div>
+</template>
+<style lang="scss" scoped>
+.apply-permission-page{
+    padding: 30px;
+    border: 1px solid #EBEBEB;
+    border-radius: 4px;
+    margin-top: 40px;
+    .tips{
+        font-size: 16px;
+        text-align: center;
+    }
+    .img-wrap{
+        justify-content: center;
+        .img-box{
+            width: 200px;
+            height: 140px;
+            border-radius: 4px;
+            border: 1px solid #EBEBEB;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+            .exp-text{
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                bottom: 31px;
+                font-size: 16px;
+            }
+        }
+    }
+    .el-form{
+        margin-left: auto;
+        margin-right: auto;
+        margin-top: 30px;
+    }
+    .btn{
+        width: 180px;
+        height: 36px;
+        background: #DAB37C;
+        border-radius: 4px;
+        margin-left: auto;
+        margin-right: auto;
+        text-align: center;
+        line-height: 36px;
+        color: #fff;
+        font-size: 16px;
+        cursor: pointer;
+    }
+}
+</style>

src/views/applyPermission/Result.vue

@@ -0,0 +1,38 @@
+<script setup>
+
+</script>
+
+<template>
+    <div class="apply-result-page">
+        <img style="width:96px" :src="$store.state.globalImgUrls.imgSuccess" alt="">
+        <p>申请已提交</p>
+        <p>请等待销售人员与您联系</p>
+        <div class="btn" @click="$router.go(-1)">返回</div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.apply-result-page{
+    padding: 30px;
+    border: 1px solid #EBEBEB;
+    border-radius: 4px;
+    margin-top: 40px;
+    text-align: center;
+    padding-top: 76px;
+    font-size: 16px;
+    .btn{
+        width: 180px;
+        height: 36px;
+        border-radius: 4px;
+        border: 1px solid #DAB37C;
+        text-align: center;
+        line-height: 36px;
+        color: #DAB37C;
+        margin-top: 100px;
+        margin-left: auto;
+        margin-right: auto;
+        margin-bottom: 80px;
+        cursor: pointer;
+    }
+}
+</style>