gdy_pc_8/src/components/LoadingAll.vue

<template>
  <div style="width: 100%;">
    <div class="boxMinHeight flex-box-v flex-center-center" style="background-color: #fff;" v-show="status==0">
      <div class="data-all">
        <img src="static/images/init.gif" style="width: 200px;"/>
        <div>{{content}}</div>
      </div>
    </div>
    <div class="boxMinHeight" v-show="status==1||status==2">
      <div class="data-all">
        <img :src="returnImg()" class="appImg"/>
        <div class="flex-box-ce footer">
            <img src="static/images/logo3.png" alt="" style="width: 60px;" />
            <div class="flex-1" style="margin-left: 10px;">
              <div style="font-size: 22px;font-weight: 600;margin-bottom: 4px;">{{strArr[isType-1]}}管理软件</div>
              <div style="font-size: 16px;" v-if="isType==1">聚焦公司目标达成，提高人效降低成本</div>
              <div style="font-size: 16px;" v-if="isType==2">赋能员工，激活组织，即时认可，文化落地</div>
              <div style="font-size: 16px;" v-if="isType==3">解决评分无依据，绩效走过场，让绩效考核有效落地</div>
              <div style="font-size: 16px;" v-if="isType==4">现场管理标准化，整顿改善现场环境、服务、安全等问题</div>
            </div>
            <el-button type="primary" plain @click="innerVisible=true" style="background-color: #FFC910;border-color:#FFC910;color: #000;">立即咨询</el-button>
            <!-- <el-button type="success" plain @click="innerVisible2=true" >预约演示</el-button> -->
        </div>
        <!-- <div style="text-align: center;margin-top: 30px;font-size: 16px;">{{strArr[isType-1]}}系统{{status==1? '未开启':'已过期'}},请<span @click="innerVisible=true" class="blue cursor">联系客服</span>{{status==1? '开启':'续费'}}</div> -->
      </div>
    </div>
    <template v-if="status==3"><slot></slot></template>
    <el-dialog :close-on-click-modal="false" title="客服" :visible.sync="innerVisible" width="400px" append-to-body class="innerVisible">
      <p style="margin:0;font-size:18px;">微信扫码添加功道云客服进行咨询</p>
      <img src="static/images/code2.png" style="width:100%" />
      <p style="font-size:20px;">电话咨询：400-6877-880</p>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" title="预约演示" :visible.sync="innerVisible2" width="400px" append-to-body class="innerVisible">
      <div class="buyPopupTxt">欢迎使用功道云，我们有专属顾问免费给您一对一同屏讲解系统软件，如需演示请拨打电话预约</div>
      <p style="font-size:20px;">电话咨询：<a class="buyPopupTel" href="tel:400-6877-880">400-6877-880</a></p>
    </el-dialog>
  </div>
</template>
<script>
import {mapState} from 'vuex';
export default {
  name: 'LoadingAll',
  props: {
    content: {
      type: String,
      default: '加载中...'
    },
    isType:{ //1目标，2积分，3绩效，4现场
      type:Number,
      default:0,
    }
  },
  data() {
    return {
      text:'',
      status:0,// 1未开启  2过期  3已开启
      strArr:['目标','积分','绩效','巡检'],
      innerVisible: false,
      innerVisible2:false,
    };
  },
  computed: {
    ...mapState({
      site_info: state => state.user.site_info
    })
  },
  created(){
    setTimeout(()=>{
      this.init();
    },1000);
  },
  methods: {
    returnImg(){
      let arr=['static/images/pc-mubiao.jpg','static/images/pc-jifen.jpg','static/images/pc-jixiao.jpg','static/images/pc-xunjian.jpg']
      return arr[this.isType - 1]
    },
    init(){
      let arr=['okr','integral','performance','sm'];
      let obj=this.site_info[arr[this.isType-1]];
      if(obj&&obj.global_status&&obj.status){
        if(obj.expire_status===0){
          this.status=2
        }else{
          this.status=3
        }
      }else{
        this.status=1
      }
    }
  }
};
</script>
<style scoped>
.buyPopupTxt {
  font-size: 26px;
}
.buyPopupTel {
  color: #1a89fa;
  font-weight: bold;
}
.appImg {
  width: 100%;
  /* height: 600px; */
}
.data-all {
  margin-bottom: 10%;
  color: #595959;
  text-align: center;
  position: relative;
}
.boxMinHeight{
  /* background-color: #fff; */
  width: 100%;
}
.footer{
  position: fixed;
  bottom: 0;
  left: 80px;
  right: 20px;
  background-color: #fff;
  padding: 20px;
  border-top: 1px solid #f1f1f1;
  text-align: left;
}
</style>