platformFront/src/components/user/OpenedProduct.vue

<!-- 用户已开通产品 By_liucf -->
<template>
  <div class="opened">
    <MiniTitle>
      <div slot="mini" class="miniTit">
        <span>机构中心——已经开通的产品</span>
      </div>
    </MiniTitle>
    <div class="main-box">
      <!-- <div class="box" v-for="(item,index) in product" :key="item.id"> -->
      <div v-for="(item,index) in product" :key="item.id" :class="['box',{'grayCol':item.isExpired || item.serviceStatus ==0 || item.openedServiceStatus==0}]">
        <h3>{{item.name}}</h3>
        <p class="expired">产品服务有效期：
          <span v-if="item.isExpired" class="red">{{item.startTime|dataFormat}} ~ {{item.endTime|dataFormat}} (已过期)</span>
          <span v-else>{{item.startTime|dataFormat}} ~ {{item.endTime|dataFormat}}</span>
        </p>
        <p>产品申请时间：{{item.gmtCreate|dataFormat}}</p>
        <p>产品申请机构名称：{{item.organizationName}}</p>
        <p>服务模式：<span v-for="acc in item.accessTypeArray" class="accType">{{acc}}</span></p>
        <p class="chooseService">选择建立的服务端：
          <span v-if="!!item.serviceInfos && item.serviceInfos.length != 0" :class="{'hide':item.isExpired || item.onlyOnline || item.serviceStatus ==0 || item.openedServiceStatus==0}">
            <el-radio v-for="i in item.serviceInfos" v-model="radio" :label="i.id+','+i.name+','+index">{{i.name}}</el-radio>
          </span>
          <!-- 产品未到开通时间 以及已过期 或被停用 或产品自身停用 或单独线上模式 都不显示！ -->
          <!-- <span v-show="!item.isExpired && !item.unStarted && !item.onlyOnline && item.openedServiceStatus!=0 && item.serviceStatus !=0" class="btn addBtn" @click="addProductInfo">添加</span> -->
          <span v-show="!item.isExpired && !item.onlyOnline && item.openedServiceStatus!=0 && item.serviceStatus !=0" class="btn addBtn" @click="addProductInfo">添加</span>
        </p>
        <p class="tokenInfo">产品令牌</p>
        <p>用户请求接口时用户验证是否符合身份信息，请妥善保存</p> 
        <!-- <div v-show="(new Date(item.endTime))>time && item.openedServiceStatus!=0 && item.serviceStatus !=0"> -->
        <!-- <div v-show="!item.isExpired && !item.unStarted && !item.onlyOnline && item.openedServiceStatus!=0 && item.serviceStatus !=0"> -->
        <div v-show="!item.isExpired && !item.onlyOnline && item.openedServiceStatus!=0 && item.serviceStatus !=0">
          <div v-if="item.selectFlag" class="btn blueBtn" @click="creatService(item.id,index)">点击生成</div>
          <div v-else class="btn createBtn">点击生成</div>
        </div>
        <img src="../../images/stop.png" height="54" width="54" class="overTime" v-if="item.openedServiceStatus==0 || item.serviceStatus ==0">
        <img src="../../images/overTime.png" height="54" width="54" class="overTime" v-else-if="item.isExpired">
      </div>
      <div v-show="noProduct" class="box">
        <h4>您尚未开通任何产品！</h4>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  import MiniTitle from '../common/MiniTile.vue'
  import api from '../../api/user.js'
  export default {
    name:'OpenedProduct',
    data(){
      return {
        product:[],
        noProduct:false,
        accType:{
          '1':'线上模式',
          '2':'接口方式',
          '3':'嵌入式',
        },
        radio:'',//对应服务id和name
        radioName:'',
        serviceData:[],
        flag:false,
        keyId:'',
        keySecret:'',
        // time:new Date(),
      }
    },
    created(){
      this.getProduct();
    },
    methods:{
      getProduct(){//获取已开通的产品
        const key = 'selectFlag';//服务端选中标识
        const value = false;
        const showKey = 'showKey';//令牌展示标识
        const keyValue = false;
        api.opendedProduct().then((res)=>{
          let result = res.data;
          if(+result.code == 0){ 
            let productData = result.data;                
            if(productData.length != 0){
              for(var k in productData){
                productData[k][key] = value;
                productData[k][showKey] = keyValue;
                this.product.push(productData[k]);
              }
            } else{//没有开通产品
              this.noProduct = true;
            } 
          }
        })
      },
      addProductInfo(){
        this.$router.push({path:'TJFWD'});//跳转到添加服务端
      },
      creatService(id,index){//点击生成
        this.radioName = this.radio.split(',')[1];
        const params = {
          'productId':id,
          'serviceId':this.radio.split(',')[0]
        }
        api.createServiceToken(params).then((res)=>{
          let result = res.data;
          if(+result.code == 0){//生成成功后直接跳转到已生成令牌详情 10-16-shenqiang
            const tokenMsg = result.data.serviceToken;
            const tokenId = tokenMsg.productServiceId;
            this.$router.push({path:'CKLPXQ',query:{id:tokenId}});

          }else{
            this.$message({
              message: result.msg,
              type: 'warning'
            });
          }
        })
      },
      copy(id){//点击复制
        let keyDom = document.getElementById(id);
        keyDom.select();
        document.execCommand("Copy");
        this.$message({
          message: '复制成功',
          type: 'success'
        });
      }
    },
    components:{
      MiniTitle
    },
    filters:{
      dataFormat(val){
        let time = val;
        let date = new Date(time);
        let year = date.getFullYear();
        let month = (date.getMonth()+1).toString().padStart(2,'0');
        let day = date.getDate().toString().padStart(2,'0');
        let hour = date.getHours().toString().padStart(2,'0');
        let minute = date.getMinutes().toString().padStart(2,'0');
        let times = year+'.'+month+'.'+day+' '+hour+':'+minute;
        return times;
      }
    },
    computed:{},
    watch:{//监听生成按钮
      radio:function(val){
        if(val){
          const index = this.radio.split(',')[2];
          for(let i in this.product){
            this.product[i].selectFlag = false
          }
          return this.product[index].selectFlag = true;
        } 
      }
    }
  }
</script>
<style lang="less" scoped>
  @import '../../less/user.less';
  .opened{
    width: 100%;
    height: 95%;
    box-sizing: border-box;
    .base; 
    .main-box{
      height:100%;
      overflow-y: scroll;
    } 
    
    .btn{
        .button;
        .border;
      }
    .miniTit{
      .miniTitle;
    }
    .btnBox{
      margin-right: 20px;
      .lingpai{
        width: 90px;
        height:24px;
        line-height: 24px;
        margin-left: 10px;
        border-color: #1774f0;
        color: #1774f0; 
      }
    }
    .box{
      position: relative;
      padding: 20px;
      margin: 20px;
      background: #fff;
      border-radius: 2px;
      min-width: 575px;
      h3{
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      >p{
        margin-top: 24px;
      }
      .chooseService{
        line-height: 30px;
        margin-top: 19px;
        .el-radio__inner{
          border: 1px solid #9b9b9b!important;
        }
      }
      .overTime{
        position: absolute;
        top: 6px;
        right: 395px;
      }
      .accType{
        margin-right: 10px;
      }
      .expired{
        position: absolute;
        top: 20px;
        right: 20px;
        margin-top: 0;
      }
      .tokenInfo{
        margin-top: 30px;
        margin-bottom: -9px;
      }
      
      .addBtn{ 
        border-color: #1774f0;
        color: #1774f0;
        margin: -8px 0 0 15px;
      }
      .createBtn{
        color:#fff;
        background:#c9c9c9;
        margin-top: 34px;
        border: none;
      }
      .blueBtn{
        color:#fff;
        background:#1774f0;
        margin-top: 34px;
        border: none;
      }
      .copyBtn{
        border-color: #1774f0;
        color: #1774f0;
        margin-left: 30px;
      }
      .key{
        margin-top: 30px;
        padding-top: 25px;
        border-top: 1px dashed #c9c9c9;
        .keyText{
          width: 100%;
          input{
            height: 30px;
            width: 99%;
            margin-left: 15px;
            padding-left: 10px;
          }
          .tr{
            height:50px;
          }
        }
        .info{
          width: 10%;
          text-align: right;  
        }
        .info1{
          width: 10%;
          text-align: left;  
        }
      }
      .red{
        color:red;
      }
      .hide{
        display: none;
      }

    }
  }
</style>