hi-ucs/front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue

199 lines
5.3 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.liangjunhua
* @LastEditTime: 2022-06-13 15:29:27
* @Description: 算法详情页头部
-->
<template>
<div class="algorithm-top-details">
<div class="left">
<div class="top">
<span class="name">{{ props.dataList.name }}</span>
<div class="label-content">
<p class="lable-father">
<span class="label">{{ props.dataList.type }}</span>
<span class="label">{{ props.dataList.shareType }}</span>
<span class="label">{{ props.dataList.shareCondition }}</span>
</p>
</div>
<!-- <span class="label">免费</span> -->
</div>
<div class="main">
<div>应用领域{{ applicationArea }}</div>
<div>
{{ props.dataList.description }}
</div>
</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>
<a-button type="primary" @click="goTOCollection()">收藏</a-button>
</div>
</div>
<div class="right"></div>
</div>
</template>
<script setup>
import { FormOutlined, ShoppingCartOutlined } from '@ant-design/icons-vue'
import { defineProps, ref, watch } from 'vue'
import { scInsert } from '@/api/personalCenter'
import { sgcInsert } from '@/api/home'
import { useRouter } from 'vue-router'
import mybus from '@/myplugins/mybus'
import { message } from 'ant-design-vue'
const props = defineProps({
dataList: { type: Object, default: null },
})
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 goTOCollection = () => {
console.log('收藏===================》', props.dataList)
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) {
applicationArea.value = props.dataList.infoList.filter(
(val) => val.attrType === '应用领域'
)[0].attrValue
}
}
)
</script>
<style lang="less" scoped>
.algorithm-top-details {
height: 600px;
padding: 180px 0 0;
background: url('~@/assets/detailsAll/sf_top_bg.png') no-repeat;
background-size: 100%;
display: flex;
justify-content: center;
.left {
width: 7.2rem;
color: #fff;
margin-right: 0.8rem;
.top {
display: flex;
align-items: center;
span {
font-size: 14px;
}
.name {
// max-width: 330px;
// overflow: hidden;
// text-overflow: ellipsis;
white-space: nowrap;
font-size: 40px;
margin-right: 20px;
}
.label-content {
position: relative;
}
.lable-father {
position: absolute;
min-width: 2.5rem;
right: -2.5rem;
top: 0;
}
.label {
padding: 1px 10px;
margin-right: 10px;
border-radius: 13px;
background: rgba(255, 255, 255, 0.4);
}
}
.main {
margin-top: 20px;
font-size: 18px;
line-height: 34px;
& > div:nth-of-type(1) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
& > div:nth-of-type(2) {
max-height: 100px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
}
.bottom {
margin-top: 40px;
display: flex;
.ant-btn {
height: 50px;
margin-right: 20px;
background: #ff8b55;
border-radius: 6px;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.ant-btn:nth-of-type(1) {
width: 180px;
}
.ant-btn:nth-of-type(2) {
width: 220px;
}
.ant-btn:nth-of-type(3) {
width: 145px;
background: #fff;
color: #526aff;
}
}
}
.right {
width: 580px;
height: 400px;
background: url('~@/assets/detailsAll/sf_right_bg.png') no-repeat;
background-size: 100%;
margin-top: -40px;
}
}
</style>