platformFront/src/components/user/MoreService.vue

<!-- 用户更多服务 By_liucf -->
<template>
    <div class="more-container">
      <MiniTitle>
        <div slot="mini" class="miniTit">更多服务</div>
      </MiniTitle>
      <!-- 用户未认证时展示 -->
        <p v-show="userStatus==0" class="trial">账号认证通过后，可开通产品！ <span @click="authen">立即认证</span></p>
        <el-row :gutter="20">
            <el-col :span="8" v-for="(item,index) in notOpenProduct" :key="item.id">
              <!-- <div :class="['grid-content bg-purple',{'add-border':item.choose}]"> -->
              <div :class="['grid-content bg-purple',{'add-border':item.choose},{'grayCol':item.serviceStatus==0}]">
                <h2>{{item.name}}</h2>
                <h4>产品介绍</h4>
                <p>{{item.decription}}</p>
                <!-- <p>Diagbot是以智能决策引擎和医学知识库为核心，遵循疾病发生、发展的本质原理，以新一代人工智能基础理论体系为指导，采用基于本体的语义网络、人工智能、深度学习神经网络算法等前沿技术对涉及疾病诊疗本质的指南、文献、医疗病历等数据进行“学习”，自我完善知识库、规则库以及决策引擎模型，实现精准、高效地智能综合分析与判断、为医生诊疗过程中所涉及的基本检、诊、治服务提供精准的解决方案推送。http://192.168.2.164:3000/?patientNo=1600&doctorNo=0033S&deptId=N016&recordId=333&hospitalId=A001</p> -->
                <h4>接入模式</h4>
                <div v-for="i in item.accessType">
                  <p>{{i}}</p>
                  <p>{{accessDesc[i]}}</p>
                </div>
                <h4>收费模式</h4>
                <div v-for="k in item.chargeType">
                  <p>{{k}}</p>
                  <p>{{chargeDesc[k]}}</p>
                </div>
                <img v-show="item.serviceStatus==0" src="../../images/stop.png" height="54" width="54">
                <div class="btns clearfix">
                  <div :class="['btn btn-cancel',{'show':item.choose}]" @click="cancel(index,item.id)">取消</div>
                  <div v-if="item.productAudit==0 && item.serviceStatus !=0" :class="['btn',{'hide':item.choose}]" @click="selectProduct(index,item.id)">选定</div>
                  <div v-else-if="item.productAudit==2" class="btn btnIng">开通中</div>
                  <div v-else-if="item.serviceStatus==0" class="btn btnIng">停用</div>
                </div>
              </div>
            </el-col>
        </el-row>
          <div class="count">
            <span class="selec">已经选择开通产品：</span>
            <span class="selecNum">{{count}}</span>
            <div class="btn count-btn" @click="open">立即开通</div>
          </div>
        <!-- 弹窗 -->
        <div :class="[{'hide':toast},'mark']">
          <div class="toast">
            <i class="el-icon-close" @click="close"></i>
            <p>{{ text }}</p>
            <div class="btn toast-btn" @click="confirn(type)">确定</div>
          </div>
        </div>
    </div>
</template>
<script>
  import MiniTitle from '../common/MiniTile.vue'
  import api from '../../api/user.js';
    export default {
        name: 'MoreSeervice',
        data(){
          return {
            notOpenProduct:[],
            accessType:{
              '1':'嵌入式',
              '2':'数据服务模式',
              '3':'线上服务模式',
            },
            accessDesc:{
              '嵌入式':'Diagbot整体嵌入合作方软件，从合作方软件中获取主诉，既往史等信息，由Diagbot后端统一处理并推送产生的业务记录，通过接口返回给系统协同作业。',
              '数据服务模式':'始终隐匿于后台，合作方通过接口形式向Diagbot输入信息，经过Diagbot计算后将分析结果推送给合作方软件并在其界面展示，前端灵活多变',
              '线上模式':'用户在线上购买产品和服务后，通过登陆云平台使用授权的产品和服务',
            },
            chargeType:{
              '1':'按流程计费',
              '2':'按机构计费',
              '3':'按用户计费',
            },
            chargeDesc:{
              '按流程计费':'按接口成功调用次数进行计数，请求成功计一次调用次数，当超出免费限额流量后，按成功调用次数进行计费。',
              '按机构计费':'一次性给机构及其下属机构开通服务，包括用户数和年限以及其他服务，统一由顶层机构支付费用。',
              '按用户计费':'根据终端实际使用用户数量进行收费。',
            },
            count:0,
            hide:false,
            selectedId:[],
            toast:true,
            text:'',
            type:'',
            userStatus:null
          }
        },
        created(){
          this.getProduct();
        },
        components:{
          MiniTitle
        },
        methods:{
          getProduct(){
            api.getTrialProduct().then((res)=>{
              let result = res.data;
              if(+result.code == 0){ 
                let data = result.data[0];             
                let userAuStatus = result.data[1];   
                this.userStatus = userAuStatus.userAuStatus;       
                const key = "choose";
                const value = false;
                for(var i in data){
                  data[i][key] = value;
                  // 只展示未开通0 和开通中2
                  if(+data[i].productAudit==0 || +data[i].productAudit==2){
                    this.notOpenProduct.push(data[i]);
                  }
                }
              }else{
                // this.$message.error(result.msg);
                console.log(result.msg);
              }
            })
          },
          selectProduct(index,id){
            this.notOpenProduct[index].choose = true;
            this.count = this.count + 1;
            this.selectedId.push(id);
          },
          cancel(index,id){
            this.notOpenProduct[index].choose = false;
            this.count = this.count - 1;
            const idList = this.selectedId;
            for(let j=0; j<idList.length;j++ ){
              if(idList[j] == id){
                idList.splice(j,1);
              } 
            }
          },
          authen(){//立即认证
            this.$router.push({path:'YH-JGZX-ZHXX'});
          },
          open(){//立即开通
            const params = {
              'idList':this.selectedId
            }
            if(this.count == 0){
              this.$message({
                message: '请选择产品',
                type: 'warning',
              });
              return
            } else {
              //判断认证状态
              api.getUserAuthStatus().then((res)=>{
                let result = res.data;
                if(+result.code == 0){
                  if(+result.data.authStatus == 1){//已认证
                    //生成订单接口
                    api.open(params).then((res)=>{
                      let info = res.data;
                      if(+info.code == 0){
                        //显示弹窗
                        this.toast = false;
                        this.type = 1;
                        this.text = "提交成功！24小时内会有专人与您联系。若想了解更多产品信息，请致电：0571-666666";
                      }else{
                        this.$message.error(info.msg);
                      }
                    })
                  }else if(+result.data.authStatus == 0){//未认证
                    this.toast = false;
                    this.type = 2;
                    this.text = "感谢您申请开通产品，为提供优质的服务，还需完善账号信息。如想了解更多产品信息，可致电：0571-666666";
                  }else if(+result.data.authStatus == 2){//认证中
                    this.toast = false;
                    this.type = 1;
                    this.text = "感谢您申请开通产品，您的账号信息正在认证中，请耐心等候。如想了解更多产品信息，可致电：0571-666666";
                  }

                } else {
                  console.log(result.msg);
                }
              }) 
            }       
            
          },
          confirn(type){//点击确定
            if(type == 1){//已认证、认证中
              this.toast = true;
              this.$router.push({path:'YH-KZT'});//跳转控制台
            }else if(type == 2){//未认证
              this.toast = true;
              this.$router.push({path:'YH-JGZX-ZHXX'});//跳转到账号认证
            }
            
          },
          close(){
            this.toast = true;
            if(this.type == 1){//已认证、认证中-复原
              this.count = 0;
              this.notOpenProduct = [];
              this.selectedId = [];
              this.getProduct();
            }
            
          },
        }
    }
</script>
<style lang="less">
@import '../../less/base.less';
@import '../../less/user.less';
.more-container{
  .base;
  width: 100%;
  height:100%;
  box-sizing: border-box;
  position: relative;
  min-width: 840px;
  .miniTit{
    .miniTitle;
  }
  .el-row {
    .contents;
    width: 100%;
    margin: 15px 0 20px;
    height:74%;
    overflow-y: auto;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    position: relative;
    border-radius: 4px;
    min-width: 260px;
    .btns{
      width: 80%;
      height:45px;
      position: absolute;
      bottom:20px;
      /*right: 25px;*/
      text-align: right;
      background-color: #fff;
    }
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    /*background: #d3dce6;*/
    background: #fff;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    /*position: relative;*/
    border-radius: 2px;
    /*min-height: 36px;*/
    height: 460px;
    overflow-y: auto;
    padding: 20px 15px 50px;
    margin-bottom: 19px;
    border:1px solid #fff;
    box-shadow: 0 0 5px rgba(151, 149, 151, 0.44);
    img{
      position: absolute;
      top: 8px;
      right: 30px;
    }
  }
  .add-border{
    border:1px dashed #1774f0;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  
  .trial{
    margin: 15px 10px 0 20px;
    >span{
      color: red;
      cursor: pointer;
    }
  }
  h2{
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 25px;
  }
  h4{
    font-size: 14px;
    margin: 5px 0;
    padding-left: 15px;
    background: url(../../images/dot.png) no-repeat left;
  }
  p{
    word-wrap: break-word;
    /*line-height: 20px;*/
  }
  
  .btn{
    width: 80px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    background: #1774f0;
    text-align: center;   
    border-radius: 2px;
    /*position: absolute;
    bottom: 20px;
    right: 25px;*/
    cursor: pointer;
    margin-top: 8px;
    display:inline-block;
  }
  .btn-cancel{
    color: #1774f0;
    background: #fff;
    border: 1px solid #1774f0;
    display:none;
  }
  .btnIng{
    background-color:#c9c9c9;
    cursor: auto;
  }
  .show{
    display:block;
  }
  .hide{
    display:none;
  }
  .count{
    width: 100%;
    height: 60px;
    line-height: 60px;
    background: #fff;
    text-align: right;
    box-shadow: 0 0 5px rgba(151, 149, 151, 0.44);
    .selec{
      font-size: 14px;
      font-weight: bold;
    }
    .selecNum{
      display: inline-block;
      width: 50px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-bottom: 1px solid #c9c9c9;
      vertical-align: middle;
    }
    .count-btn{
      display: inline-block;
      position: static;
      margin: 0 36px 0 15px;
    }
    
  }

  .mark{
    width: 100%;
    height:100%;
    position: fixed;
    top: 0;
    left:0;
    background-color:rgba(0,0,0,0.4);
    z-index: 55;
  }
  .toast{
    width: 280px;
    height:150px;
    background:#fff;
    border-radius:2px;
    position: absolute;
    top: 50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index: 56;
    padding:35px;
    text-align: center;
    p{
      margin-top: 40px;
    }
  }
  .el-icon-close{
    font-size: 16px;
    cursor: pointer;
    position: absolute;
    top: 16px;
    right: 16px;
  }
  .toast-btn{
    width: 90px;
    bottom:35px;
    right:130px;
  }

}

</style>