兴趣采集弹框

src/components/Portal/interestCollection.vue

@@ -0,0 +1,141 @@
+<template>
+	<el-dialog
+      :close-on-click-modal="false"
+      :visible.sync="interestCollection"
+      width="967px">
+      <div style="margin-top:65px">
+        <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="interestCollection = false" 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:true,// 兴趣采集
+            sysTypeListMap:[]
+    	}
+    },
+    created() {
+      // this.userAvatar=require("@/assets/images/user/default.png");
+      apiUserhobby.has().then(res=>{
+        if(res.status == 200) {
+          this.interestCollection = true;
+        }
+      })
+    },
+    mounted() {
+      this.getSysTypeTree().then(rs => {
+        this.sysTypeListMap = rs;
+      });
+    },
+    methods:{
+        ...mapActions({
+            getSysTypeTree: 'sysType/getSysTypeTree',
+        }),
+        saveInterest() {
+            let data = []
+            if(this.checkboxGroup.length  < 3) {
+                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;
+                 this.$message({
+                    duration:0,
+                    type: 'success',
+                    dangerouslyUseHTMLString: true,
+                    message: `<span class="u-message">
+                       选择个人偏好成功，U币+5
+                        <span class="text"><router-link class="routerLink" to="/user/ucurrency">查看详情</router-link></span>
+                    </span>`
+                 });
+               }
+            })
+        }
+    },
+    watch:{
+    
+    },
+    computed:{
+	
+		},
+
+	}
+</script>
+
+<style scoped lang="scss">
+	::v-deep .el-dialog{
+        background: #fff url('/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{
+    margin-left: 50px;
+    .interest-title{
+       margin-bottom: 18px;
+       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>