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

321 lines
8.5 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!--
* @Author: hisense.liangjunhua
* @Date: 2022-06-08 11:56:28
* @LastEditors: hisense.wuhongjian
* @LastEditTime: 2022-07-16 16:43:11
* @Description: 算法详情页头部
-->
<template>
<div class="algorithm-top-details">
<div class="left">
<div class="top">
<a-tooltip placement="top">
<template #title>{{ props.dataList.name }}</template>
<span class="name">
{{ props.dataList.name }}
</span>
</a-tooltip>
<!-- <span class="name">{{ props.dataList.name }}</span> -->
<div class="label-content">
<p class="lable-father">
<span class="label" v-if="props.dataList.type">
{{ props.dataList.type }}
</span>
<span class="label" v-if="props.dataList.shareType">
{{ props.dataList.shareType }}
</span>
<span class="label" v-if="props.dataList.shareCondition">
{{ props.dataList.shareCondition }}
</span>
</p>
</div>
<!-- <span class="label">免费</span> -->
</div>
<div class="main">
<a-tooltip placement="top">
<template #title>应用领域{{ applicationArea }}</template>
<div>应用领域{{ applicationArea }}</div>
</a-tooltip>
<a-tooltip placement="top">
<template #title>{{ props.dataList.description }}</template>
<div>
{{ props.dataList.description }}
</div>
</a-tooltip>
</div>
<div class="bottom" v-if="props.dataList.id">
<!-- <a-button type="primary" @click="toView()">
<template #icon><form-outlined /></template>
申请使用
</a-button>
<a-button type="primary" @click="addShoppingCart()">
<template #icon><shopping-cart-outlined /></template>
加入购物车
</a-button> -->
<!-- 融合服务 存在fuseResourceList -->
<a-button
type="primary"
@click="handleAKeyApplication()"
v-if="dataList.fuseResourceList"
>
<template #icon>
<form-outlined />
</template>
申请使用
</a-button>
<a-button type="primary" @click="goTOCollection()">
{{ scFlag ? '已' : '' }}收藏
</a-button>
</div>
</div>
<div class="right"></div>
</div>
</template>
<script setup>
// import { ShoppingCartOutlined } from '@ant-design/icons-vue'
import { defineProps, ref, watch } from 'vue'
import { scInsert, scDel } from '@/api/personalCenter'
// import { sgcInsert } from '@/api/home'
// import { useRouter } from 'vue-router'
// import mybus from '@/myplugins/mybus'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
// 获取当前路由地址
const router = useRouter()
const props = defineProps({
dataList: { type: Object, default: null },
})
console.log('dataList------------>', props.dataList)
// const router = useRouter()
const applicationArea = ref('')
// // 加入申购车
// const addShoppingCart = () => {
// console.log('加入申购车==================>', props.dataList)
// sgcInsert({
// delFlag: '0',
// resourceId: props.dataList.id,
// // userId: userId.value,
// }).then((res) => {
// console.log(res)
// message.success('添加申购车成功!')
// mybus.emit('getSgcNum')
// })
// }
// // 立即申请
// function toView() {
// // window.open(newpage.href, '_blank')
// router.push({
// path: '/apply',
// query: {
// name: props.dataList.name,
// resourceId: [props.dataList.id],
// },
// })
// }
// 融合服务--一键申请
const handleAKeyApplication = () => {
let _applyList = []
;(props.dataList.fuseResourceList || []).map((v) => {
let resource = v.resource || {}
let obj = {
arr: [
{
delFlag: resource.delFlag,
description: resource.description,
resourceId: resource.id,
resourceName: resource.name,
time: resource.createDate,
type: resource.type,
},
],
deptId: resource.deptId,
deptName: resource.deptName,
}
_applyList.push(obj)
})
localStorage.setItem('applyList', JSON.stringify(_applyList))
router.push({
path: '/apply',
})
}
// 收藏
const scFlag = ref(props.dataList.isCollect)
const scFlag2 = ref(true)
const goTOCollection = () => {
console.log('收藏===================》', props.dataList)
if (scFlag2.value) {
scFlag2.value = false
if (scFlag.value) {
scDel([props.dataList.id]).then((res) => {
if (res.data.msg === 'success') {
message.success('取消成功')
scFlag.value = false
scFlag2.value = true
}
})
} else {
scInsert([
{
resourceId: props.dataList.id,
},
]).then((res) => {
if (res.data.msg === 'success') {
message.success('添加收藏成功!')
scFlag.value = true
scFlag2.value = true
}
})
}
}
// scInsert([{ resourceId: props.dataList.id }]).then((res) => {
// console.log(res)
// message.success('收藏成功')
// })
}
if (props.dataList.infoList) {
applicationArea.value = props.dataList.infoList.filter(
(val) => val.attrType === '应用领域'
)[0].attrValue
}
watch(
() => props.dataList,
(val) => {
if (val) {
console.log('props.dataList-----watch------->', val)
applicationArea.value = props.dataList.infoList.filter(
(val) => val.attrType === '应用领域'
)[0].attrValue
if (val.isCollect) {
scFlag.value = true
}
}
}
)
</script>
<style lang="less" scoped>
.algorithm-top-details {
height: 6rem;
padding: 1.8rem 0 0;
background: url('~@/assets/detailsAll/sf_top_bg.png') no-repeat;
background-size: 100%;
display: flex;
justify-content: center;
.left {
max-width: 7.2rem;
color: #fff;
margin-right: 0.8rem;
.top {
display: flex;
align-items: center;
span {
font-size: 0.14rem;
}
.name {
// max-width: 3.3rem;
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
font-size: 0.4rem;
margin-right: 0.2rem;
font-size: 0.4rem;
margin-right: 0.2rem;
max-width: 7rem;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-break: break-all;
}
.label-content {
position: relative;
}
.lable-father {
position: absolute;
min-width: 3.5rem;
right: -3.5rem;
top: 0;
}
.label {
padding: 0.01rem 0.1rem;
margin-right: 0.1rem;
border-radius: 0.13rem;
background: rgba(255, 255, 255, 0.4);
}
}
.main {
margin-top: 0.2rem;
font-size: 0.18rem;
line-height: 0.34rem;
& > div:nth-of-type(1) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
& > div:nth-of-type(2) {
max-height: 1rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
word-break: break-all;
}
}
.bottom {
margin-top: 0.4rem;
display: flex;
.ant-btn {
height: 0.5rem;
margin-right: 0.2rem;
background: #ff8b55;
border-radius: 0.06rem;
font-size: 0.2rem;
display: flex;
justify-content: center;
align-items: center;
}
.ant-btn:nth-of-type(1) {
width: 1.8rem;
}
.ant-btn:nth-of-type(2) {
width: 2.2rem;
}
.ant-btn:nth-of-type(3) {
width: 1.45rem;
}
}
}
.right {
width: 5.8rem;
height: 4rem;
background: url('~@/assets/detailsAll/sf_right_bg.png') no-repeat;
background-size: 100%;
margin-top: -0.4rem;
}
}
</style>