hongze_yb_pc/src/layout/Index.vue

<script setup>
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();
store.dispatch('getUserInfo')//获取个人信息
const userInfo = computed(() => store.state.userInfo);
const lastTime = computed(() => {
  let timeArr = [];
  store.state.userInfo.permission_list &&
    store.state.userInfo.permission_list.forEach((item) => {
      item.permission_list.forEach((item2) => {
        timeArr.push(new Date(item2.end_date));
      });
    });

  let maxTime = Math.max(...timeArr);
  if (timeArr.length === 0) {
    return "";
  } else {
    return moment(maxTime).format("YYYY.MM.DD");
  }
});

import { apiGetPermissionList } from "@/api/common.js";
let permissionList = ref([]);
const getPermissionList = async () => {
  const res = await apiGetPermissionList();
  if (res.code === 200) {
    permissionList.value = res.data;
  }
};
getPermissionList();

let permission_list_str = computed(() => {
  let hasArr = [];
  store.state.userInfo.permission_list &&
    store.state.userInfo.permission_list.forEach((item) => {
      item.permission_list.forEach((item2) => {
        hasArr.push(item2.name);
      });
    });
  let arr = permissionList.value.filter((item) => {
    if (hasArr.find((e) => e === item.permission_name)) return item;
  });
  let arr2=arr.map(item=>item.name)

  return arr2.join('/')
});

//我的中点击去申请权限
import { ElMessageBox,ElMessage } 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 {apiApplyPermission} from '@/api/user'
const handleContact=async ()=>{
  const res=await apiApplyPermission({
    company_name:userInfo.value.company_name,
    real_name:userInfo.value.real_name,
		source:1,
    from_page:'我的',
  })
  if(res.code===200){
    console.log('主动申请成功');
  }
  const htmlStr=`<p>请联系对口销售--${userInfo.value.seal_name}：${userInfo.value.seal_mobile}</p>`
  ElMessageBox({
    title:'申请提醒',
    message:htmlStr,
    dangerouslyUseHTMLString: true,
    confirmButtonText:'知道了',
    confirmButtonClass:'self-elmessage-confirm-btn'
  })
}


// 全局返回按钮
const goBack=()=>{
  if(window.history.state.back){
    console.log('返回上一页');
    router.go(-1)
  }else{
    console.log('返回首页');
    router.push({path:'/'})
  }
}


// 音频切换
const handleAudioChange=(e)=>{
  store.commit('changeAudio',e)
}
// 关闭音频
const handleAudioClose=()=>{
  store.commit('closeAudio')
}
//音频状态改变
const handleAudioStatus=(e)=>{
  store.commit('audioStatusChange',e)
}
const globalAudioIns=ref(null)
store.state.audioData.INS=globalAudioIns

</script>

<template>
  <div class="layout-wrap">
    <el-container style="width: 100%;height:100%">
      <Aside></Aside>
      <el-main>
        <img v-if="$route.meta.hasBack" @click="goBack" class="back-icon" src="@/assets/icon-back.png" alt="">
        <!-- <router-view /> -->
        <router-view v-slot="{ Component }">
            <keep-alive>
                <component :is="Component" v-if="$route.meta.keepAlive" />
            </keep-alive>
            <component :is="Component" v-if="!$route.meta.keepAlive" />
        </router-view>
      </el-main>
      <!-- 个人信息模块 -->
      <div class="userinfo-wrap">
        <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>
            <img class="icon-scan" src="@/assets/icon-scan.png" alt="" />
          </template>
          <template #default>
            <div class="flex" style="justify-content: space-between">
              <div style="flex: 1; text-align: center">
                <img style="width: 121px" src="@/assets/xcx-img.png" alt="" />
                <p>手机扫码<br />体验更多小程序功能</p>
              </div>
              <div style="flex: 1; text-align: center">
                <img style="width: 121px" src="@/assets/gzh-img.png" alt="" />
                <p>关注弘则研报公众号<br />及时获取活动和报告通知</p>
              </div>
            </div>
          </template>
        </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="$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="$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>
              <div class="flex info-item">
                <div class="label">品种权限</div>
                <div class="con" v-if="userInfo.status=='冻结'||(userInfo.status=='试用'&&userInfo.is_suspend==1)">
                  <span>暂无权限</span>
                  <span class="btn" @click="handleContact">联系销售</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>
                <div class="con">{{ lastTime }}</div>
              </div>
            </div>
          </template>
        </el-popover>
      </div>
    </el-container>

    <!-- 全局音频模块 -->
    <div class="global-audio-box" v-if="$store.state.audioData.list.length>0" v-drag="{'zIndex':100}">
      <div style="height:10px;cursor: move;" draggable="true">
        <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>
      <h2 style="text-align:center;font-size:14px;padding:0 20px">{{$store.state.audioData.list[$store.state.audioData.index].voiceName}}</h2>
      <audio 
        controls 
        autoplay 
        @ended="handleAudioChange('auto')" 
        @pause="handleAudioStatus('paused')"
        @play="handleAudioStatus('paly')"
        :src="$store.state.audioData.list[$store.state.audioData.index].voiceUrl"
        ref="globalAudioIns"
      ></audio>
      <div style="text-align:center;margin:4px 0 10px 0">
        <img src="@/assets/audio-before-grey.png" alt="" style="width:30px;margin-right:20px;cursor: pointer;" @click="handleAudioChange('before')">
        <img src="@/assets/audio-before-grey.png" alt="" style="width:30px;transform: rotate(180deg);cursor: pointer;" @click="handleAudioChange('next')">
      </div>
    </div>
    
  </div>
</template>

<style lang="scss" scoped>
.layout-wrap {
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: relative;
}
.el-main {
  min-width: 580px;
  max-width: 1800px;
  background-color: #fff;
  padding-left: 60px;
  padding-top: 0;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  .back-icon{
    position: fixed;
    left: 180px;
    top: 23px;
    width: 30px;
    height: 30px;
    cursor: pointer;
  }
  
}
.userinfo-wrap {
  background-color: #fff;
  width: 186px;
  padding: 20px;
  text-align: center;
  flex-shrink: 0;
  .icon-scan {
    width: 26px;
    height: 26px;
    position: relative;
    margin-right: 20px;
    top: -10px;
  }
}
.userinfo-box {
  .top {
    text-align: center;
    margin-bottom: 31px;
    p {
      margin: 0;
    }
  }
  .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;
  height: 150px;
  background: #FFFFFF;
  box-shadow: 0px 3px 12px 0px rgba(81, 88, 101, 0.16);
  border-radius: 8px;
  border: 1px solid #EBEBEB;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 999;
  .icon{
    float: right;
    position: relative;
    right: 10px;
    cursor: pointer;
  }
  audio{
    width: 90%;
    height: 30px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 9px;
  }
}

</style>