crowd-test-service-frontend/src/components/commons/HomeSlice.vue

<template>
  <div class="home-slice">
<!--    <el-row style="padding-top: 40px" v-loading="loading" element-loading-text="权限检查中...">-->
    <el-row style="padding-top: 40px">
      <el-col :span="14">
        <div class="slice-wrapper" style="padding-left: 20%">
          <div class="slice-title"><img src="../../assets/img/homeslice1.png" alt="slice1"></div>
          <div class="slice-info">1分钟带你玩转众测服务平台</div>
          <div class="slice-btn" @click="goToCreateProject" style="cursor: pointer">立即进入<img src="../../assets/img/home-btn1.png" style="margin-left: 5px"></div>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="slice-wrapper">
          <div class="slice-title"><img src="../../assets/img/homeslice2.png" alt="slice2"></div>
          <div class="slice-info">入住众测服务平台流程</div>
          <div class="slice-btn" @click="goToCreateTask" style="cursor: pointer">立即进入<img src="../../assets/img/home-btn2.png" style="margin-left: 5px"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import Apis from '@/js/api'
  import Http from '@/js/http'
  import {storageGet} from '@/js/index.js'
  import {notify} from "../../constants";

  export default {
        name: 'HomeSlice',
        data() {
            return {
                user: {},
                isLogin: false,
              loading:false
            }
        },
        methods: {
          showLoading() {
            this.loading = true
          },
          hideLoading() {
            this.loading = false
          },
            loadData(){
                if (storageGet('user') != null) {
                    this.isLogin = true;
                    this.user = storageGet('user').userVO;
                }
            },
            checkCreateProjectAuth() {
                if (!this.isLogin) {
                    console.log("请登录后访问");
                    notify('warning', '请登录后访问');
                }
                else if(this.isLogin){
                  this.showLoading();
                    Http.get(Apis.USER.IS_PART.replace('{userId}', this.user.id)).then((res) => {
                        console.log(res)
                      this.hideLoading()
                        this.$router.push('/project/create');
                    }).catch((error) => {
                      this.hideLoading()
                        notify('error', error.data)
                    })
                }
            },
            checkCreateTaskAuth() {
                if (!this.isLogin) {
                    console.log("请登录后访问");
                    notify('warning', '请登录后访问');
                }
                else if(this.isLogin){
                  this.showLoading();
                    Http.get(Apis.USER.IS_AGENCY.replace('{userId}', this.user.id)).then((res) => {
                        console.log(res)
                      this.hideLoading()
                        this.$router.push('/square');
                    }).catch((error) => {
                      this.hideLoading()
                        notify('error', error.data)
                    })

                }
            },
            goToCreateProject(){
              this.checkCreateProjectAuth();
            },
            goToCreateTask(){
                this.checkCreateTaskAuth();
            },
        },
        mounted() {
            this.loadData();
        }
    }
</script>

<style scoped lang="less">
  .slice-info {
    font-size: 16px;
    font-family: Source Han Sans CN;
    color: rgba(243, 224, 10, 1);
  }

  .slice-btn {
    display: flex;
    margin-top: 5px;
    line-height: 30px;
    color: white;
    font-weight: 400;
  }

</style>