812 lines
24 KiB
Vue
812 lines
24 KiB
Vue
<script setup>
|
|
import { commonApi } from '@/api/common'
|
|
//
|
|
import { formatFileSize } from '@/utils/index.ts'
|
|
import { Close, DiamondSharp, PersonAddOutline } from '@vicons/ionicons5'
|
|
import {
|
|
CircleUser,
|
|
Download,
|
|
EllipsisVertical,
|
|
Heart,
|
|
Play,
|
|
SquareCheck,
|
|
SquarePlus,
|
|
} from 'lucide-vue-next'
|
|
import { NConfigProvider, NMessageProvider } from 'naive-ui'
|
|
import { ref } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
|
|
const userStore = useUserStore()
|
|
const message = useMessage()
|
|
|
|
const router = useRouter()
|
|
// 用于版本tabs当前选中的选项卡
|
|
definePageMeta({
|
|
layout: 'default',
|
|
})
|
|
// const userStore = useUserStore()
|
|
const isBuy = ref(false)
|
|
const route = useRoute()
|
|
const { id } = route.params
|
|
const activeTab = ref(null)
|
|
const commentHeight = ref(800)
|
|
const detailsInfo = ref({})
|
|
const currentUserInfo = ref({})
|
|
const isVisibleReport = ref(false)
|
|
// 先获取用户信息 再获取版本信息
|
|
const versionByWorkInfo = ref([])
|
|
async function getInfo() {
|
|
try {
|
|
const res = await request.get(`/model/selectModelById?id=${id}`)
|
|
if (res.code === 200) {
|
|
detailsInfo.value = res.data
|
|
if (res.data.tags) {
|
|
detailsInfo.value.tagsList = JSON.parse(res.data.tags)
|
|
}
|
|
// detailsInfo.value.styleList =JSON.parse(res.data.styleList)
|
|
// // 1翻译
|
|
try {
|
|
const res1 = await request.get(`/ModelVersion/finbyid?id=${res.data.id}`) // 获取版本
|
|
if (res1.code === 200 && res1.data.length > 0) {
|
|
versionByWorkInfo.value = res1.data
|
|
versionByWorkInfo.value.forEach((item) => {
|
|
item.sampleImagePaths = item.sampleImagePaths.split(',')
|
|
})
|
|
nextTick(() => {
|
|
activeTab.value = versionByWorkInfo.value[0].id
|
|
})
|
|
// const commentRes = await request.get(`/WorkFlowComment/comment/${res.data.id}`)
|
|
}
|
|
}
|
|
catch (error) {
|
|
console.log(error)
|
|
}
|
|
|
|
// // 获取当前作品的用户信息
|
|
try {
|
|
const res = await request.get(
|
|
`/system/user/selectUserById?id=${detailsInfo.value.userId}`,
|
|
)
|
|
if (res.code === 200) {
|
|
currentUserInfo.value = res.data
|
|
}
|
|
}
|
|
catch (error) {
|
|
console.log(error)
|
|
}
|
|
getAttention()
|
|
}
|
|
}
|
|
catch (error) {
|
|
console.log(error)
|
|
}
|
|
}
|
|
getInfo()
|
|
|
|
// 获取用户点赞/粉丝/关注数量
|
|
// interface SelectUserInfo {
|
|
// attention: number;
|
|
// bean: number;
|
|
// imageLikeNum: number;
|
|
// modelDownLoadNum: number;
|
|
// modelLikeNum: number;
|
|
// modelRunNum: number;
|
|
// }
|
|
const selectUserInfo = ref({
|
|
attention: 0,
|
|
bean: 0,
|
|
imageLikeNum: 0,
|
|
modelDownLoadNum: 0,
|
|
modelLikeNum: 0,
|
|
modelRunNum: 0,
|
|
})
|
|
|
|
// 获取点赞粉丝等的数量
|
|
async function getAttention() {
|
|
try {
|
|
const res = await request.get(
|
|
`/attention/selectUserInfo?userId=${detailsInfo.value.userId}`,
|
|
)
|
|
if (res.code === 200) {
|
|
selectUserInfo.value = res.data
|
|
}
|
|
}
|
|
catch (err) {
|
|
console.log(err)
|
|
}
|
|
}
|
|
|
|
// 举报/编辑/删除
|
|
const isDelete = ref(false)
|
|
async function handleSelect(event, type) {
|
|
event.stopPropagation() // 阻止事件冒泡
|
|
if (type === 'report') {
|
|
isVisibleReport.value = true
|
|
// await request.get(`/WorkFlow/report?id=${id}`) // 举报
|
|
}
|
|
else if (type === 'edit') {
|
|
router.push({
|
|
path: `/publish-model`,
|
|
query: {
|
|
type: 'edit',
|
|
id: detailsInfo.value.id,
|
|
},
|
|
})
|
|
}
|
|
else {
|
|
isDelete.value = true
|
|
}
|
|
}
|
|
|
|
// 删除
|
|
async function onDelete() {
|
|
try {
|
|
const res = await request.get(`/model/delete?id=${detailsInfo.value.id}`)
|
|
if (res.code === 200) {
|
|
message.success('删除成功')
|
|
isDelete.value = false
|
|
router.push('/personal-center')
|
|
}
|
|
}
|
|
catch (err) {
|
|
console.log(err)
|
|
}
|
|
}
|
|
|
|
// 关注用户/取消关注
|
|
async function onChangeAttention() {
|
|
try {
|
|
const res = await request.get(
|
|
`/attention/addAttention?userId=${detailsInfo.value.userId}`,
|
|
)
|
|
if (res.code === 200) {
|
|
if (res.data) {
|
|
detailsInfo.value.isAttention = 1
|
|
message.success('关注成功')
|
|
}
|
|
else {
|
|
detailsInfo.value.isAttention = 0
|
|
message.success('取消关注成功')
|
|
}
|
|
}
|
|
}
|
|
catch (err) {
|
|
console.log(err)
|
|
}
|
|
}
|
|
|
|
// 点赞
|
|
async function onLike() {
|
|
try {
|
|
const res = await request.get(
|
|
`/ModelComment/modelLike?modelId=${detailsInfo.value.id}`,
|
|
)
|
|
if (res.code === 200) {
|
|
detailsInfo.value.isLike === 0
|
|
? (detailsInfo.value.isLike = 1)
|
|
: (detailsInfo.value.isLike = 0)
|
|
if (detailsInfo.value.isLike === 0) {
|
|
message.success('取消点赞成功')
|
|
}
|
|
else {
|
|
message.success('点赞成功')
|
|
}
|
|
}
|
|
}
|
|
catch (err) {
|
|
console.log(err)
|
|
}
|
|
}
|
|
|
|
// 举报
|
|
const reportParams = ref({
|
|
reportType: undefined,
|
|
text: '',
|
|
type: 0,
|
|
})
|
|
const reportList = ref([])
|
|
async function getDictType() {
|
|
try {
|
|
const res = await commonApi.dictType({ type: 'report_type' })
|
|
if (res.code === 200) {
|
|
reportList.value = res.data
|
|
}
|
|
}
|
|
catch (error) {
|
|
console.log(error)
|
|
}
|
|
}
|
|
getDictType()
|
|
function handleChange(item) {
|
|
reportParams.value.reportType = item.dictValue
|
|
if (item.dictValue !== '5') {
|
|
reportParams.value.text = ''
|
|
}
|
|
console.log('object', reportParams.value)
|
|
}
|
|
|
|
function closeReport() {
|
|
isVisibleReport.value = false
|
|
}
|
|
|
|
// 举报
|
|
async function onReport() {
|
|
if (reportParams.value.reportType !== undefined) {
|
|
reportParams.value.productId = detailsInfo.value.id
|
|
reportParams.value.productName = detailsInfo.value.modelName
|
|
try {
|
|
const res = await request.post('/report/addReport', reportParams.value)
|
|
if (res.code === 200) {
|
|
message.success('举报成功')
|
|
closeReport()
|
|
}
|
|
}
|
|
catch (err) {
|
|
console.log(err)
|
|
}
|
|
}
|
|
}
|
|
|
|
// 跳转作者的个人中心
|
|
function toPersonalCenter() {
|
|
const baseUrl = window.location.origin
|
|
if (userStore?.userInfo?.userId === detailsInfo.value.userId) {
|
|
window.open(`${baseUrl}/personal-center`, '_blank', 'noopener,noreferrer')
|
|
}
|
|
else {
|
|
window.open(
|
|
`${baseUrl}/personal-publish?userId=${detailsInfo.value.userId}`,
|
|
'_blank',
|
|
'noopener,noreferrer',
|
|
)
|
|
}
|
|
}
|
|
|
|
// 切换模型版本
|
|
const currentTabsIndex = ref(0)
|
|
function handleTabChange(id) {
|
|
for (let i = 0; i < versionByWorkInfo.value.length; i++) {
|
|
if (id === versionByWorkInfo.value[i].id) {
|
|
currentTabsIndex.value = i
|
|
}
|
|
}
|
|
}
|
|
|
|
// 添加模型收藏
|
|
async function addCollect() {
|
|
try {
|
|
const params = {
|
|
productId: versionByWorkInfo.value[currentTabsIndex.value].id,
|
|
productType: detailsInfo.value.modelType,
|
|
collectType: 0,
|
|
}
|
|
const res = await request.post('/collect/addCollect', params)
|
|
if (res.code === 200) {
|
|
versionByWorkInfo.value[currentTabsIndex.value].isCollect = res.data
|
|
if (res.data === 1) {
|
|
message.success('已加入模型库, 可通过在线生图使用')
|
|
}
|
|
else {
|
|
message.success('已从模型库中移除')
|
|
}
|
|
}
|
|
}
|
|
catch (err) {
|
|
console.log(err)
|
|
}
|
|
}
|
|
|
|
// 购买模型后下载模型
|
|
async function handelDown() {
|
|
try {
|
|
const res = await request.get(
|
|
`/ModelVersion/modelFileDownload?id=${
|
|
versionByWorkInfo.value[currentTabsIndex.value].id
|
|
}`,
|
|
)
|
|
if (res.code === 200) {
|
|
const link = document.createElement('a')
|
|
link.href = res.data
|
|
link.download = res.msg // 自定义文件名
|
|
document.body.appendChild(link)
|
|
link.click()
|
|
document.body.removeChild(link)
|
|
}
|
|
}
|
|
catch (err) {
|
|
console.log(err)
|
|
}
|
|
}
|
|
|
|
// 购买模型
|
|
async function onBuy() {
|
|
// 本人直接购买
|
|
if (detailsInfo.value.userId === userStore?.userInfo?.userId) {
|
|
handelDown()
|
|
}
|
|
else if (detailsInfo.value.isBuy !== 1) { // 判断是否购买过
|
|
isBuy.value = true
|
|
}
|
|
else {
|
|
handelDown()
|
|
}
|
|
}
|
|
|
|
// 确认购买付款
|
|
async function buyModel() {
|
|
if (detailsInfo.value.isBuy === 1) {
|
|
handelDown()
|
|
}
|
|
else {
|
|
try {
|
|
const params = {
|
|
productId: detailsInfo.value.id,
|
|
productUserId: detailsInfo.value.userId,
|
|
productType: 0,
|
|
}
|
|
const res = await request.post('/order/buy', params)
|
|
if (res.code === 200) {
|
|
handelDown()
|
|
detailsInfo.value.isBuy = 1
|
|
}
|
|
}
|
|
catch (err) {
|
|
console.log(err)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex justify-center">
|
|
<div class="w-[1125px] p-4">
|
|
<div class="flex items-center">
|
|
<div class="text-[26px] font-bold mr-4">
|
|
{{ detailsInfo.modelName }}
|
|
</div>
|
|
|
|
<n-tooltip trigger="hover">
|
|
<template #trigger>
|
|
<div class="flex items-center bg-[#f4f5f9] px-2 rounded-full">
|
|
<component :is="Play" class="h-[14px] w-[14px] text-black menu-icon m-1" />
|
|
<span> {{ detailsInfo.reals || 0 }} </span>
|
|
</div>
|
|
</template>
|
|
在线生成数
|
|
</n-tooltip>
|
|
|
|
<n-tooltip trigger="hover">
|
|
<template #trigger>
|
|
<div class="flex items-center bg-[#f4f5f9] px-2 rounded-full mx-4">
|
|
<component
|
|
:is="Download"
|
|
class="h-[14px] w-[14px] text-black menu-icon m-1"
|
|
/>
|
|
<span> {{ detailsInfo.numbers || 0 }} </span>
|
|
</div>
|
|
</template>
|
|
下载数
|
|
</n-tooltip>
|
|
|
|
<n-tooltip trigger="hover">
|
|
<template #trigger>
|
|
<div class="flex items-center bg-[#f4f5f9] px-2 rounded-full">
|
|
<!-- <img src="@/assets/img/heart.png" class="w-[14px] h-[14px] mr-1" alt="" /> -->
|
|
<component :is="Heart" class="h-[12px] w-[12px] mr-1 text-[#000]" />
|
|
<span>{{ detailsInfo.likeNum || 0 }} </span>
|
|
</div>
|
|
</template>
|
|
点赞数
|
|
</n-tooltip>
|
|
</div>
|
|
|
|
<div class="flex items-center mt-3 mb-5">
|
|
<div
|
|
v-for="(item, index) in detailsInfo.tagsList"
|
|
:key="index"
|
|
class="text-[12px] bg-[#ebf2fe] p-1 px-2 text-[#557abf] mr-4 rounded-md"
|
|
>
|
|
{{ item }}
|
|
</div>
|
|
</div>
|
|
<div class="flex w-full gap-1">
|
|
<div class="w-2/3">
|
|
<div class="w-full">
|
|
<n-tabs
|
|
v-model:value="activeTab"
|
|
type="line"
|
|
animated
|
|
@update:value="handleTabChange"
|
|
>
|
|
<n-tab-pane
|
|
v-for="(item, index) in versionByWorkInfo"
|
|
:key="index"
|
|
:name="item.id"
|
|
:tab="item.versionName"
|
|
>
|
|
<!-- 显示最后一步上传图片的图片 -->
|
|
<div class="grid grid-cols-2 gap-2.5 box-border">
|
|
<img
|
|
v-for="(subItem, subIndex) in item.sampleImagePaths"
|
|
:key="subIndex"
|
|
:src="subItem"
|
|
class="w-full h-[350px] rounded-lg"
|
|
alt=""
|
|
>
|
|
</div>
|
|
|
|
<div v-if="detailsInfo.original === 1" class="font-bold text-[20px] my-6">
|
|
转载自作者: {{ detailsInfo.authorName }}
|
|
</div>
|
|
<!-- 富文本中输入的文字 图片 -->
|
|
<div class="w-full mt-2">
|
|
<div v-html="item.versionDescription" />
|
|
</div>
|
|
</n-tab-pane>
|
|
</n-tabs>
|
|
</div>
|
|
<div class="mt-4">
|
|
<div style="padding: 20px">
|
|
<NConfigProvider>
|
|
<NMessageProvider>
|
|
<BaseComment
|
|
v-if="detailsInfo.id"
|
|
type="model"
|
|
:height="commentHeight"
|
|
:details-info="detailsInfo"
|
|
/>
|
|
</NMessageProvider>
|
|
</NConfigProvider>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-1/3 mt-3">
|
|
<div
|
|
class="flex justify-between text-[#a3a1a1] text-[12px] items-center -ml-60"
|
|
>
|
|
<div class="flex justify-end">
|
|
<div v-if="detailsInfo.createTime" class="mr-2">
|
|
首发时间{{ detailsInfo.createTime }}
|
|
</div>
|
|
<div v-if="detailsInfo.updateTime">
|
|
更新时间：{{ detailsInfo.updateTime }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center relative">
|
|
<n-icon
|
|
size="20"
|
|
:color="detailsInfo.isLike === 0 ? '#ccc' : '#ff0000'"
|
|
@click="onLike"
|
|
>
|
|
<Heart class="cursor-pointer" />
|
|
</n-icon>
|
|
<div class="group relative">
|
|
<component
|
|
:is="EllipsisVertical"
|
|
class="h-[18px] w-[48px] text-[#557abf] cursor-pointer"
|
|
/>
|
|
<div
|
|
class="absolute right-0 top-[10px] hidden group-hover:block text-[#000000] text-[12px] bg-white rounded-lg text-center px-2 py-2 w-20 mt-2 shadow-lg z-10"
|
|
>
|
|
<div
|
|
class="menu-item hover:bg-gray-100 py-2 cursor-pointer rounded-lg"
|
|
@click="(event) => handleSelect(event, 'report')"
|
|
>
|
|
举报
|
|
</div>
|
|
<template v-if="userStore?.userInfo?.userId === detailsInfo.userId">
|
|
<div
|
|
class="menu-item hover:bg-gray-100 py-2 cursor-pointer rounded-lg"
|
|
@click="(event) => handleSelect(event, 'edit')"
|
|
>
|
|
编辑
|
|
</div>
|
|
<div
|
|
class="menu-item hover:bg-gray-100 py-2 cursor-pointer rounded-lg"
|
|
@click="(event) => handleSelect(event, 'delete')"
|
|
>
|
|
删除
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex items-center mt-10 p-2 bg-[#f3f5f9] w-full rounded-md h-[80px] box-border"
|
|
>
|
|
<div class="w-[60px] h-[60px] rounded-full overflow-hidden mr-4">
|
|
<client-only>
|
|
<NAvatar
|
|
class="w-full h-full mr-2 block cursor-pointer"
|
|
round
|
|
size="small"
|
|
:src="currentUserInfo.avatar"
|
|
@click="toPersonalCenter"
|
|
/>
|
|
</client-only>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex-1">
|
|
<client-only>
|
|
<div class="text[20px] font-bold">
|
|
{{ currentUserInfo.nickName }}
|
|
</div>
|
|
</client-only>
|
|
<!-- 0代表原创 1代表转载 -->
|
|
<div v-if="detailsInfo.original === 1" class="original">
|
|
<n-icon size="14" class="mr-2">
|
|
<DiamondSharp />
|
|
</n-icon>
|
|
原创作者
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="userStore?.userInfo?.userId !== detailsInfo.userId"
|
|
class="flex-1 flex justify-end"
|
|
>
|
|
<div
|
|
class="flex items-center font-bold px-1 justify-center w-20 h-8 rounded-full text-[#426af7] border border-[#426af7] border-solid cursor-pointer"
|
|
@click="onChangeAttention"
|
|
>
|
|
<n-icon v-if="detailsInfo.isAttention === 0" size="16" class="mr-2">
|
|
<PersonAddOutline />
|
|
</n-icon>
|
|
{{ detailsInfo.isAttention === 1 ? "已关注" : "关注" }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center text-[#969798]">
|
|
<component
|
|
:is="CircleUser"
|
|
class="h-[12px] w-[12px] text-black menu-icon m-1 text-[#969798] m-0"
|
|
/>
|
|
<span class="mr-2"> {{ selectUserInfo.bean }} </span>
|
|
<!-- <component
|
|
:is="HardDriveUpload"
|
|
class="h-[12px] w-[14px] text-black menu-icon m-1 text-[#969798]"
|
|
/>
|
|
<span class="mr-2"> 2 </span> -->
|
|
<component
|
|
:is="Play"
|
|
class="h-[12px] w-[12px] text-black menu-icon m-1 text-[#969798]"
|
|
/>
|
|
<span class="mr-2"> {{ selectUserInfo.productNum }} </span>
|
|
<component
|
|
:is="Download"
|
|
class="h-[12px] w-[12px] text-black menu-icon m-1 text-[#969798]"
|
|
/>
|
|
<span class="mr-2"> {{ selectUserInfo.modelDownloadNum }} </span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 不支持的bg #b1b2b2 -->
|
|
<div
|
|
class="flex items-center justify-center mt-4 w-full text-white bg-[#3c7af6] w-full rounded-md h-[50px] cursor-pointer"
|
|
>
|
|
<component
|
|
:is="Play"
|
|
class="h-[20px] w-[20px] text-white menu-icon m-1 text-[#969798]"
|
|
/>
|
|
<span class="mr-1"> 立即生图</span>
|
|
</div>
|
|
<div class="flex gap-y-2">
|
|
<div
|
|
v-if="versionByWorkInfo.length > 0"
|
|
class="flex flex-1 items-center justify-center bg-[#eceef4] h-[50px] mt-4 mr-1 rounded-md cursor-pointer"
|
|
@click="addCollect"
|
|
>
|
|
<component
|
|
:is="
|
|
versionByWorkInfo[currentTabsIndex].isCollect === 0
|
|
? SquarePlus
|
|
: SquareCheck
|
|
"
|
|
class="h-[20px] w-[20px] text-black menu-icon m-1 text-[#969798]"
|
|
/>
|
|
<span class="mr-1">
|
|
{{
|
|
versionByWorkInfo[currentTabsIndex].isCollect === 0
|
|
? "加入模型库"
|
|
: "已加入"
|
|
}}
|
|
</span>
|
|
</div>
|
|
|
|
<div
|
|
class="relative flex flex-1 items-center bg-gradient-to-r from-[#ffe9c8] to-[#ffd264] justify-center ml-1 mt-4 text-black bg-[#eceef4] w-full rounded-md h-[50px] cursor-pointer"
|
|
@click="onBuy"
|
|
>
|
|
<div v-if="detailsInfo.isBuy === 0 && detailsInfo.isFree === 0" class="product-price">
|
|
{{ detailsInfo.productPrice }} 金币
|
|
</div>
|
|
<!-- {{ versionByWorkInfo[currentTabsIndex].isEncrypt }} -->
|
|
<img
|
|
v-if="versionByWorkInfo[currentTabsIndex]?.isEncrypt === 1"
|
|
class="w-10 h-10 absolute -top-1 right-0 -z-5"
|
|
src="@assets/img/encryption.png"
|
|
alt=""
|
|
>
|
|
<component
|
|
:is="Download"
|
|
class="h-[20px] w-[20px] text-black menu-icon m-1 text-[#969798]"
|
|
/>
|
|
<span v-if="versionByWorkInfo.length > 0" class="mr-1">
|
|
{{ detailsInfo.isBuy === 1 ? "下载" : "购买" }}
|
|
{{ formatFileSize(versionByWorkInfo[currentTabsIndex].fileSize) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div style="background: linear-gradient(135deg,#3cc9ff, #8fa6ff, 41%, #d8b4ff 74%,#326bff)" class="flex items-center justify-center mt-4 w-full h-14 text-black bg-[#fff] w-full rounded-md h-[80px] cursor-pointer hover:bg-[#f1f2f7]">
|
|
<component :is="Download" class="h-[20px] w-[20px] text-black menu-icon m-1 text-[#969798]" />
|
|
<span class="mr-1">
|
|
下载客户端
|
|
</span>
|
|
</div> -->
|
|
<n-modal
|
|
v-model:show="isDelete"
|
|
:mask-closable="false"
|
|
preset="dialog"
|
|
title="提示！"
|
|
content="确定要将模型删除? 模型删除后无法找回"
|
|
negative-text="取消"
|
|
positive-text="确认"
|
|
@negative-click="isDelete = false"
|
|
@positive-click="onDelete"
|
|
/>
|
|
|
|
<n-modal
|
|
v-model:show="isVisibleReport"
|
|
:preset="null"
|
|
:mask-closable="false"
|
|
transform-origin="center"
|
|
class="custom-modal"
|
|
>
|
|
<div class="bg-white rounded-xl p-4">
|
|
<div class="flex items-center justify-between">
|
|
<div class="text-xl">
|
|
举报
|
|
</div>
|
|
<div>
|
|
<n-icon size="20" class="mr-2 cursor-pointer" @click="closeReport">
|
|
<Close />
|
|
</n-icon>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<n-radio
|
|
v-for="(item, index) in reportList"
|
|
:key="index"
|
|
class="m-4 text-[#fff000]"
|
|
size="large"
|
|
:checked="reportParams.reportType === item.dictValue"
|
|
value="Definitely Maybe"
|
|
name="basic-demo"
|
|
@change="handleChange(item)"
|
|
>
|
|
{{ item.dictLabel }}
|
|
</n-radio>
|
|
<n-input
|
|
v-if="
|
|
reportParams.reportType !== undefined && reportParams.reportType === '5'
|
|
"
|
|
v-model:value="reportParams.text"
|
|
placeholder="点击输入"
|
|
type="textarea"
|
|
:autosize="{
|
|
minRows: 5,
|
|
maxRows: 10,
|
|
}"
|
|
/>
|
|
<div
|
|
class="mt-4 w-[100%] h-10 flex rounded-lg text-white items-center justify-center cursor-pointer"
|
|
:class="[
|
|
reportParams.reportType !== undefined ? 'bg-[#4c79ee]' : 'bg-[#cccccc]',
|
|
]"
|
|
@click="onReport"
|
|
>
|
|
确认
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</n-modal>
|
|
<div />
|
|
<!-- <Report></Report> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<n-modal
|
|
v-model:show="isBuy"
|
|
:mask-closable="false"
|
|
preset="dialog"
|
|
title="提示！"
|
|
content="是否确认购买"
|
|
negative-text="取消"
|
|
positive-text="确认"
|
|
@negative-click="isBuy = false"
|
|
@positive-click="buyModel"
|
|
/>
|
|
<!-- <Report></Report> -->
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.header-num {
|
|
@apply flex items-center bg-[#f4f5f9] px-2 rounded-full;
|
|
}
|
|
.header-tag {
|
|
@apply flex items-center bg-[#f4f5f9] px-2 rounded-full;
|
|
display: flex;
|
|
align-self: flex-start;
|
|
justify-content: space-between;
|
|
}
|
|
.n-tabs.n-tabs--line-type .n-tabs-tab.n-tabs-tab,
|
|
.n-tabs.n-tabs--bar-type .n-tabs-tab.n-tabs-tab {
|
|
color: #949494;
|
|
}
|
|
.n-tabs.n-tabs--line-type .n-tabs-tab.n-tabs-tab--active,
|
|
.n-tabs.n-tabs--bar-type .n-tabs-tab.n-tabs-tab--active {
|
|
color: #000;
|
|
font-weight: 700;
|
|
font-size: 24px !important;
|
|
}
|
|
.n-tabs-tab--active {
|
|
font-size: 24px !important;
|
|
}
|
|
// .n-tabs.n-tabs--line-type .n-tabs-tab.n-tabs-tab--active, .n-tabs.n-tabs--bar-type .n-tabs-tab.n-tabs-tab--active{
|
|
// font-size: 20px;
|
|
// }
|
|
.n-tabs .n-tabs-bar {
|
|
position: absolute;
|
|
bottom: 0;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, #173eff 0%, #1b7dff 100%);
|
|
border-radius: 2px;
|
|
transition:
|
|
left 0.2s var(--n-bezier),
|
|
max-width 0.2s var(--n-bezier),
|
|
opacity 0.3s var(--n-bezier),
|
|
background-color 0.3s var(--n-bezier);
|
|
}
|
|
.original {
|
|
margin: 2px 0;
|
|
padding: 2px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 90px;
|
|
font-size: 12px;
|
|
color: #aa8645;
|
|
font-weight: 400;
|
|
background: linear-gradient(94.11deg, #efd6a9 10.52%, #f0dcbc 107.96%);
|
|
border-radius: 4px;
|
|
transform: skew(-10deg);
|
|
}
|
|
.product-price {
|
|
position: absolute;
|
|
top: -11px;
|
|
right: -1px;
|
|
flex-shrink: 0;
|
|
width: -moz-fit-content;
|
|
width: fit-content;
|
|
height: 24px;
|
|
padding: 0 8px;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
font-size: 12px;
|
|
line-height: 24px;
|
|
text-align: center;
|
|
background: no-repeat 50% / 100% 100%;
|
|
background: linear-gradient(90deg, #ff7d1f, #ff2056 49.5%, #ff3773);
|
|
box-shadow: inset 0 -1px 0 0 rgba(234, 62, 26, 0.2);
|
|
border-top-left-radius: 8px;
|
|
border-bottom-right-radius: 8px;
|
|
border-top-right-radius: 2px;
|
|
border-bottom-left-radius: 2px;
|
|
}
|
|
</style>
|