hi-ucs/front/src/views/detailsAll/components/Application/ApplicationAbilityTrial.vue

<!--
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-09 09:29:29
 * @LastEditors: hisense.liangjunhua
 * @LastEditTime: 2022-06-13 15:21:26
 * @Description: 应用详情
-->
<template>
  <div class="algorithm-on-trial" v-if="flag && whoShow1.itShowQingDao">
    <detals-title title="应用详情" type="PROBATION"></detals-title>
    <div class="main">
      <div class="main-left">
        <p>{{ dataFrom.linkName }}</p>
        <p style="cursor: pointer" @click="clickLink(dataFrom.link)">
          {{ dataFrom.link }}
        </p>
      </div>
      <div class="main-center">
        <p>{{ dataFrom.numberName }}</p>
        <p>{{ dataFrom.number }}</p>
        <div
          @click="copyFunction(dataFrom.number, '复制账号')"
          v-if="dataFrom.number != ''"
        >
          复制账号
        </div>
        <div v-else id="zanwu">暂无</div>
      </div>
      <div class="main-right">
        <p>{{ dataFrom.passwordName }}</p>
        <p>{{ dataFrom.password }}</p>
        <div
          @click="copyFunction(dataFrom.password2, '复制密码')"
          v-if="dataFrom.password != ''"
        >
          复制密码
        </div>
        <div v-else id="zanwu">暂无</div>
      </div>
    </div>
  </div>
</template>
<script setup>
  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
  import { ref, defineProps, watch } from 'vue'
  import { message } from 'ant-design-vue'
  let flag = ref(true)
  const whoShow1 = ref(whoShow)
  console.log('whoShow1', whoShow1.value.itShowQingDao)
  const props = defineProps({
    dataList: { type: Object, default: null },
  })
  const dataFrom = ref({
    linkName: '访问地址',
    link: '',
    numberName: '试用账号',
    number: '',
    passwordName: '试用密码',
    password: '**************************',
    password2: '',
  })
  if (props.dataList.infoList) {
    let obj = props.dataList.applyState
    if (obj !== '已申请') {
      flag.value = false
    } else {
      dataFrom.value.link = props.dataList.link
      props.dataList.infoList.map((item) => {
        if (item.attrType == '试用用户名') {
          dataFrom.value.number = item.attrValue
        } else if (item.attrType == '试用密码') {
          dataFrom.value.password2 = item.attrValue
        }
      })
      if (dataFrom.value.password2 === '') {
        dataFrom.value.password = ''
      }
    }
  }
  const clickLink = (link) => {
    window.open(link)
  }
  //复制方法
  const copyFunction = (data, name) => {
    if (data !== '') {
      let url = data
      let oInput = document.createElement('input')
      oInput.value = url
      document.body.appendChild(oInput)
      oInput.select() // 选择对象;
      console.log(oInput.value)
      document.execCommand('Copy') // 执行浏览器复制命令
      oInput.remove() // 执行浏览器复制命令
      message.success(name + '成功')
    } else {
      message.error('复制为空')
    }
  }
  message.config({
    top: '100px', // 距离顶部的位置
  })
  // const success = () => {
  //   message.success({
  //     // content: 'This is a prompt message with custom className and style',
  //     className: 'custom-class',
  //     style: {},
  //   })
  // }
  watch(
    () => props.dataList,
    (val) => {
      if (val) {
        let obj = props.dataList.applyState
        if (obj !== '已申请') {
          flag.value = false
        } else {
          dataFrom.value.link = props.dataList.link
          props.dataList.infoList.map((item) => {
            if (item.attrType == '试用用户名') {
              dataFrom.value.number = item.attrValue
            } else if (item.attrType == '试用密码') {
              dataFrom.value.password2 = item.attrValue
            }
          })
          if (dataFrom.value.password2 === '') {
            dataFrom.value.password = ''
          }
        }
      }
    }
  )
</script>
<style lang="less" scoped>
  .algorithm-on-trial {
    padding: 0.8rem 0px 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    .main {
      margin-top: 0.3rem;
      width: 13rem;
      height: 2.5rem;
      background: url('~@/assets/detailsAll/kfzj_sybg.png') no-repeat;
      display: grid;
      grid-template-columns: 33.33% 33.33% 33.33%;
      align-items: center;
      .main-left {
        border-right: 0.01rem #ffffff solid;
        padding-left: 0.7rem;
        padding-right: 1rem;
        & > p {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
      .main-center {
        padding-left: 1rem;
        padding-right: 1rem;
      }
      .main-right {
        padding-right: 0.7rem;
      }
      & > div > p:first-child {
        font-size: 0.26rem;
        color: #ffffff;
        font-weight: bold;
      }
      & > div > p:nth-child(2) {
        font-size: 0.22rem;
        color: #ffffff;
        line-height: 0.34rem;
      }
      & > div:first-child > p:last-child {
        text-decoration: underline;
        word-wrap: break-word;
        word-break: normal;
      }
      & > div > div:last-child {
        height: 0.34rem;
        width: 1.1rem;
        border: 0.01rem solid #ffffff;
        border-radius: 0.06rem;
        font-size: 0.18rem;
        color: #ffffff;
        cursor: pointer;
        text-align: center;
        line-height: 0.34rem;
      }
    }
    #zanwu {
      height: 0.34rem;
      width: 1.1rem;
      font-size: 0.24rem;
      color: #ffffff;
      border: 0;
    }
  }
</style>
<style>
  .custom-class {
    /* top: 100px; */
  }
</style>