learning-system-portal/src/components/Portal/interestCollection.vue

<template>
	<el-dialog
      :close-on-click-modal="false"
      :visible.sync="interestCollection"
      :append-to-body="true"  top="7vh" @close="closeDialog" custom-class="hobby-dialog">
      <div class="interest_title">
        <span class="text_84">请选择您的</span>
        <span class="text_85">学习兴趣</span>
        <span class="text_86">，至少三个，可随时调整</span>
      </div>
      <div style="margin-top:0px;min-width: 770px;max-width:950px;">

        <div class="interest" v-for="(sys,index) in sysTypeListMap" :key="sys.id">
           <p class="portal-title-tow interest-title">{{sys.name}}</p>
           <el-checkbox-group v-model="checkboxGroup" v-if="sys.children.length > 0">
            <el-checkbox size="medium" border v-for="ch in sys.children" :label="ch.id" :key="ch.id">{{ch.name}}</el-checkbox>
          </el-checkbox-group>
         </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <div><el-button type="primary" class="btn-one" @click="saveInterest()">生成我的兴趣偏好</el-button></div>
        <div><el-button @click="notYet()" class="btn-tow" type="text">暂不选择</el-button></div>
      </div>
    </el-dialog>
</template>
<script>
    import { mapGetters, mapActions } from 'vuex';
    import apiUserhobby from "@/api/phase2/userhobby.js"
	export default {
		props:{
          // show:{
          //   type:Boolean,
          //   default:false
          // }
		},
    data(){
    	return {
            checkboxGroup:[],
            interestCollection:false,// 兴趣采集 false - 不显示弹框;  true - 显示弹框
            sysTypeListMap:[],
            btn_insterest_status:0,
            dialog_session_show:0
    	}
    },
    created() {
          // this.userAvatar=require("@/assets/images/user/default.png");
          // apiUserhobby.has().then(res=>{
          //   if(res.status != 200) {return;}
          //   // 1. 判断用户是否选择过兴趣偏好
          //   if(res.result == false){
          //     this.interestCollection = true;
          //   }
          //   if(res.result == true){this.interestCollection = false;return;}
          //   // 2. 判断用户是否点击过"暂不选择"按钮，如果用户点击过"暂不选择"按钮则判断点击"暂不选择"按钮天数是否大于15天，如果大于则弹出兴趣偏好框，否则不弹
          //   let time = localStorage.getItem('notYet'+this.userInfo.aid);
          //   if(!time == '' || time != null) {
          //       let day = (new Date() - new Date(time))/(1000*60*60*24);
          //       if(day > 15){
          //         this.interestCollection = true;
          //         return;
          //       }
          //   }
          //   // 3. 判断用户是否点击"关闭"按钮，如果点击"关闭"按钮则在当前session不在弹窗
          //   let current_session = sessionStorage.getItem('dialog_session_show'+this.userInfo.aid);
          //   if(current_session == 1){
          //     this.interestCollection = false;
          //   }else {
          //     this.interestCollection = true;
          //   }
          // })
        },
    mounted() {
      this.getSysTypeTree().then(rs => {
        this.sysTypeListMap = rs;
      });
    },
    methods:{
        show(){
          this.interestCollection=true;
        },
        notYet() {
            //15天控制
            this.interestCollection = false;
            localStorage.setItem('notYet'+this.userInfo.aid,new Date());
            this.$emit('close');
        },
        ...mapActions({
            getSysTypeTree: 'sysType/getSysTypeTree',
        }),
        // 关闭兴趣偏好弹窗
        closeDialog() {
          //本地登录的设置
          sessionStorage.setItem('user-hobby-'+this.userInfo.aid,1);
          this.$emit('close');
        },
        saveInterest() {
            let data = []
            if(this.checkboxGroup.length  < 3) {
                this.$message({
                        type:'error',
                        dangerouslyUseHTMLString:true,
                        message: '<span style="color:red">至少选择三个兴趣偏好！</span>',
                        iconClass:'error-text',
                        center: true
                      });
                //this.$message.error('至少选择三个兴趣偏好！')
                return
            }
            this.checkboxGroup.forEach(item=>{
                data.push({ type:1,  refId:item });
            })
            apiUserhobby.save(data).then(res=>{
               if(res.status == 200) {
                 this.interestCollection = false;
                 const h = this.$createElement;
                 let event = {
                   key: "FinishHobby",//分享
                   title: "设置兴趣爱好",//分享
                   parameters:"",//内容的作者
                   content: '设置兴趣爱好',//事件的内容
                   objId: '1234567890123456789',//此项关联的id是没有的，需要写成固定的值
                   objType: '70',//关联的类型
                   objInfo: '设置兴趣爱好',
                   aid: this.userInfo.aid, //当前登录人的id
                   aname: this.userInfo.name,//当前人的姓名
                   status: 1 //状态，直接写1
                 }
                 this.$store.dispatch("userTrigger", event);
                 this.$message({
                    type: 'success',
                    dangerouslyUseHTMLString: true,
                    message: `<span class="u-message">
                       选择个人偏好成功，U币+5
                        <span class="text"><a href="${this.webBaseUrl}/user/ucurrency">查看详情</a></span>
                    </span>`
                 });
               }
            })
            this.$emit('close');
        }
    },
    watch:{

    },
    computed:{
        ...mapGetters(['userInfo','studyTaskCount']),
		},

	}
</script>
<style>
  .el-dialog.hobby-dialog{
     min-width: 760px;
     max-width: 960px;
  }
  .error-text{
    color:red
  }
</style>
<style scoped lang="scss">


 ::v-deep .el-dialog__close{
    font-size: 26px;
    color: #333333 !important;
    margin-right: 44px;
    margin-top: 30px;
 }
::v-deep .el-button+.el-button, .el-checkbox.is-bordered+.el-checkbox.is-bordered{
  margin-left: 0 !important;
}
	::v-deep .el-dialog{
        background: #fff url('../../../public/images/homeWu/interest.png') no-repeat;
        border-radius: 8px;
        // height: 840px;
    }
.el-checkbox.is-bordered.el-checkbox--medium{
   width: 146px;
   height: 44px;
   line-height: 30px;
   text-align: center;
   margin-bottom: 20px;
   margin-left: 0px;
   margin-right: 23px;
}
.el-checkbox.is-bordered.is-checked{
    border-color: #4677F4;
}
::v-deep .el-checkbox__input.is-checked+.el-checkbox__label{
    color: #4677F4;
}
.el-checkbox{
    font-size: 14px;
    color: #333333;
}

.interest_title{
  margin-left: 40px;
  margin-top: -15px;
  margin-bottom: 15px;
  .text_84 {
    width: 316px;
    height: 22px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 0.65);
    font-size: 18px;
    font-family: PingFangSC-Semibold;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
  }
  .text_85 {
    width: 316px;
    height: 22px;
    overflow-wrap: break-word;
    color: rgba(47, 101, 236, 1);
    font-size: 18px;
    font-family: PingFangSC-Semibold;
    text-align: left;
    white-space: nowrap;
    line-height: 22px;
  }
  .text_86 {
      width: 316px;
      height: 22px;
      overflow-wrap: break-word;
      color: rgba(0, 0, 0, 0.65);
      font-size: 14px;
      font-family: PingFangSC-Regular;
      text-align: left;
      white-space: nowrap;
      line-height: 22px;
    }
}


.interest{
    margin-left: 40px;
    .interest-title{
       margin-bottom: 15px;
       margin-top: 10px;
    }
    ::v-deep .el-checkbox__input{
        display: none;
    }
}
.dialog-footer{
    text-align: center;
    .btn-one{
        width: 473px;
        height: 59px;
        background: linear-gradient(146deg, #4D7BF6 0%, #2F65EC 100%);
        border-radius: 30px;
    }
    .btn-tow{
        font-size: 14px;
        color: #333333;
    }
}
</style>