加弹窗

src/components/AlertPopup.vue

@@ -0,0 +1,108 @@
+<template>
+  <!--弹出窗口设置-->
+  <div>
+    <el-dialog :close-on-press-escape="false" :close-on-click-modal="false"  class="medalbox"  :visible.sync="showGonggao"  :append-to-body="true" >
+        <div class="dlg-box" :style="`width:${config.width};height:${config.height}; background: url(${webBaseUrl}/images/gonggao/${config.bgImage}.png) no-repeat;`">
+            <div style="text-align:left;">
+              <div class="dlg-title" v-html="config.title"></div>
+              <div class="dlg-content" v-html="config.content"></div>
+            </div>
+            <div v-if="config.btnText"><a :href="config.pcUrl" :style="{'background-color':config.btnColor}" class="dlg-button">{{config.btnText}}</a> </div>
+            <div v-if="config.author" style="text-align: right;padding-top: 20px;"><span>{{config.author}}</span> </div>
+        </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  export default{
+    props:{
+      config: {
+        type:Object,
+        default(){
+          return{
+              id:'',//数据id
+              closeable:false,//不可以关闭
+              width:'500px',//宽度
+              height:'500px',
+              title:'公告',//标题
+              content:'',//文字内容
+              bgImage:'dlg_bg',//背景图
+              pcUrl:'',//点击后打开的地址,最好是使用相对地址
+              h5Url:'',
+              btnText:'立即参与',//
+              btnColor:'#008BFF',
+              author:'',
+              type:0,//0表不控制，
+            }
+        }
+      },
+    },
+    data() {
+      return {
+        showGonggao:false,
+        sessionKey:'alertpopup',
+      };
+    },
+    mounted() {
+       let hasFlag = sessionStorage.getItem(this.sessionKey);
+       if(!hasFlag){
+         let now=new Date();
+         let min=new Date(2022,10,9,0,0,0);
+         let max=new Date(2022,11,1,0,0,0);
+         //console.log(now,min,max);
+         //console.log(now.getTime(),min.getTime(),max.getTime());
+         if(now.getTime()>min.getTime() && now.getTime()<max.getTime()){
+           //console.log('open')
+           this.showGonggao=true;
+            sessionStorage.setItem(this.sessionKey,1);
+         }
+       }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+
+  .dlg-box{
+    text-align: center;
+    //background: transparent !important;
+    padding:120px 60px 20px 50px;
+  }
+  .dlg-title{
+    color: #333333;
+    font-size: 26px;
+    padding: 30px 0px;
+    text-align: center;
+    font-weight: 600;
+  }
+  .dlg-content{
+    color: #333333;font-size: 18px;height: 150px;
+  }
+  .dlg-button{
+      border-radius: 22px;
+      display: inline-block;
+      font-size: 18px;
+      padding: 10px;
+      width: 300px;
+      height: 46px;
+      text-align: center;
+      color: #fff;
+
+  }
+  .medalbox {
+
+    ::v-deep .el-dialog{
+      background: transparent !important;
+      box-shadow:none !important;
+      .el-dialog__header{
+         display: none !important;
+      }
+      .el-dialog__body{
+        //  width: 320px !important;
+        //  height: 420px !important;
+        background: transparent !important;
+      }
+    }
+  }
+</style>

src/components/PortalHeader.vue

@@ -124,13 +124,13 @@
           </div>
         </div>
     </div>
-    <gonggao></gonggao>
+    <popup v-if="popupConfig.id" :config="popupConfig"></popup>
   </div>
 </template>
 <script>
 import { mapGetters, mapActions } from 'vuex';
 import apiMessage from '@/api/system/message.js';
-import gonggao from '@/components/Gonggao.vue';
+import popup from '@/components/AlertPopup.vue';
 import apiBoeCourse from '@/api/boe/course.js';
 import {userAvatarText} from "@/utils/tools.js";
 export default {
@@ -153,7 +153,7 @@ export default {
     }
   },
 
-  components:{gonggao},
+  components:{popup},
   computed: {
     ...mapGetters(['userInfo', 'userMsg','identity','studyTaskCount']),
 
@@ -169,7 +169,7 @@ export default {
   },
   data() {
     return {
-      showGonggao:true,
+      popupConfig:{},
       fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
       findType: '1',
       keyword: '',
@@ -181,8 +181,26 @@ export default {
     this.sex = this.userInfo.sex;
     this.$store.dispatch('refrashMsg');
     this.loadBoeData();
+    this.loadPopupConfig();
   },
   methods: {
+    loadPopupConfig(){
+      this.popupConfig={
+          id:'123',//数据id
+          closeable:false,//不可以关闭
+          width:'500px',//宽度
+          height:'500px',
+          title:'用户体验调研',//标题
+          content:'<div style="font-size:20px;font-weight: 600;padding-bottom:10px">亲爱的校友:</div><div> 诚邀您对11月4日上线的学习平台V2.0的使用体验进行测评，我们将以您的意见反馈为输入，不断的优化和改进。</div>',//文字内容
+          bgImage:'dlg_bg_pen',//背景图
+          pcUrl:'/pc/user/research',//点击后打开的地址,最好是使用相对地址
+          h5Url:'',
+          btnText:'立即参与',//
+          btnColor:'#008BFF',
+          author:'BOEU学习平台产品团队',
+          type:0,//0表不控制，
+      }
+    },
     setCurIdentity(iden){
         this.$store.dispatch('SetCurIdentity',iden);
       },

src/views/user/Myresearch.vue

@@ -4,7 +4,7 @@
         <div style="margin-bottom:20px;">亲爱的校友，您好：</div>
         <div class="content">学习平台V2.0已于11月4日上线，V2.0 围绕学习激励、学习社交、学习偏好等用户关注的学习体验进行了改进优化。现诚邀您对本次升级后的使用体验进行测评，我们将以您的意见反馈为输入，不断优化和改进！</div>
         <div class="button-box">
-            <el-button type="primary" round>立即参与</el-button>
+            <a href="https://boehrsurvey.wjx.cn/vm/O5XcWrk.aspx" target="_blank"><el-button type="primary" round>立即参与</el-button></a>
         </div>
     </div>
 </template>