155 lines
4.4 KiB
Vue
155 lines
4.4 KiB
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">
|
|
<detals-title title="组件试用" type="PROBATION"></detals-title>
|
|
<div class="main">
|
|
<div class="main-left">
|
|
<p>{{ dataFrom.linkName }}</p>
|
|
<p>{{ dataFrom.link }}</p>
|
|
</div>
|
|
<div class="main-center">
|
|
<p>{{ dataFrom.numberName }}</p>
|
|
<p>{{ dataFrom.number }}</p>
|
|
<div @click="copyFunction(dataFrom.number, '复制账号')">复制账号</div>
|
|
</div>
|
|
<div class="main-right">
|
|
<p>{{ dataFrom.passwordName }}</p>
|
|
<p>{{ dataFrom.password }}</p>
|
|
<div @click="copyFunction(dataFrom.password2, '复制密码')">
|
|
复制密码
|
|
</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 props = defineProps({
|
|
dataList: { type: Object, default: null },
|
|
})
|
|
const dataFrom = ref({
|
|
linkName: '试用地址',
|
|
link: 'http://localhost:8080/#/detailsfdddffffffffffffffdfgdfgdfdgdfgdfg',
|
|
numberName: '试用账号',
|
|
number: 'zhangfeihu',
|
|
passwordName: '试用密码',
|
|
password: '**************************',
|
|
password2: '',
|
|
})
|
|
if (props.dataList.infoList) {
|
|
let obj = props.dataList.infoList.filter(
|
|
(item) => item.attrType === '试用地址'
|
|
)[0]
|
|
if (!obj) {
|
|
flag.value = false
|
|
} else {
|
|
props.dataList.infoList.map((item) => {
|
|
if (item.attrType == '试用地址') {
|
|
dataFrom.value.link = item.attrValue
|
|
} else if (item.attrType == '试用用户名') {
|
|
dataFrom.value.number = item.attrValue
|
|
} else if (item.attrType == '试用密码') {
|
|
dataFrom.value.password2 = item.attrValue
|
|
}
|
|
})
|
|
}
|
|
}
|
|
//复制方法
|
|
const copyFunction = (data, name) => {
|
|
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 + '成功')
|
|
}
|
|
watch(
|
|
() => props.dataList,
|
|
(val) => {
|
|
if (val) {
|
|
let obj = val.infoList.filter((item) => item.attrType === '试用地址')[0]
|
|
if (!obj) {
|
|
flag.value = false
|
|
} else {
|
|
props.dataList.infoList.map((item) => {
|
|
if (item.attrType == '试用地址') {
|
|
dataFrom.value.link = item.attrValue
|
|
} else if (item.attrType == '试用用户名') {
|
|
dataFrom.value.number = item.attrValue
|
|
} else if (item.attrType == '试用密码') {
|
|
dataFrom.value.password2 = item.attrValue
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
)
|
|
</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;
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
</style>
|