<script lang
="ts" setup>
import { ref, onMounted } from 'vue'
import Navigater from '@/components/Navigation/Navigater.vue'
import {getTaskDetail} from '@/pages/taskDetail/api/index'
import
type { Upload
File } from 'element
-plus'
import { Edit,Delete, Download, Plus, ZoomIn} from '@element
-plus/icons
-vue'
import
type { FormInstance, FormRules } from 'element
-plus'
const route
= useRoute
() // 正确获取当前 route 实例
const id
= ref
()
const taskDetail
= ref
()// 任务详情
const partyUserInfo
= ref
()
const checked1
= ref
(false
)
const addTxt1
= ref
(''
)
const container
= ref
(null
)
let scaleValue
= 1
const getData
= async
(id
) => {
const res
= await getTaskDetail
({id:id}
)
taskDetail.value
= res.data
partyUserInfo.value
= res.data.partyUserInfo
console.log
(partyUserInfo.value.avatar
)//输出结果https://cdn.shenyantuling.com/prod/image/head/shutiao1.png
}
// 图片上传
const dialogImageUrl
= ref
(''
)
const dialogVisible
= ref
(false
)
const disabled
= ref
(false
)
const handleRemove
= (file: Upload
File) => {
console.log
(file)
}
const handlePictureCardPreview
= (file: Upload
File) => {
dialogImageUrl.value
= file.url!
dialogVisible.value
= true
}
const handleDownload
= (file: Upload
File) => {
console.log
(file)
}
// 表单校验
const ruleFormRef
= ref<FormInstance>
()
const ruleForm
= reactive
({
// ....
}
)
const handleResize
= () => {
const containerWidth
= container.value.offsetWidth
const containerHeight
= container.value.offsetHeight
const windowWidth
= window.innerWidth
const windowHeight
= window.innerHeight
// 计算缩放比例，保持内容完整显示
scaleValue
= Math.min
(
windowWidth / containerWidth,
windowHeight / containerHeight
)
container.value.style.transform
= `scale
(${scaleValue}
)`
container.value.style.transformOrigin
= 'top left'
}
onMounted
(() => {
handleResize
()
window.addEventListener
('resize', handleResize
)
id.value
= route.query.id
getData
(id.value
)
}
)
onBeforeUnmount
(() => {
window.removeEventListener
('resize', handleResize
)
}
)
</script>
<template>
<div class
="scale
-container" ref
="container">
<div class
="content">
<!
-- 顶部 logo 导航栏
-->
<Navigater class
="top"></Navigater>
<!
-- 任务详情
-->
<div class
="wrap">
<div class
="topBack">
<div class
="return">
<img src
="@/assets/navigater/return.png" alt
="">
</div>
<div class
="title">任务详情</div>
</div>
<div class
="taskBox">
<div class
="taskLeft">
<!
-- 发布者
-->
<div class
="publisherBox">
<div class
="avatar">
<img :src
=partyUserInfo.avatar alt
="">
</div>
<div class
="info">
<div class
="infoTop">
<div class
="name">avatar</div>
<img src
="@/assets/navigater/task1.png" alt
="">
<img src
="@/assets/navigater/task1.png" alt
="">
</div>
<div class
="dic">
The First Onchain Treasury Network for Web 3The First Onchain Treasury Network for Web 3The First Onchain Treasury Network for Web 3
</div>
</div>
</div>
<!
-- 任务
-->
<div class
="taskDic">
<div class
="taskImg">
<img src
="@/assets/navigater/task1.png" alt
="">
</div>
<div class
="taskText">
<div class
="taskTitle">任务标题：关注微博账号赠送3000积分积分赠送</div>
<div class
="botBox">
<div class
="
type">任务类型</div>
<div class
="copy">
<img src
="@/assets/navigater/task2.png" alt
="">
</div>
</div>
</div>
</div>
<div class
="tip">
<img src
="@/assets/navigater/task1.png" alt
="">
<div class
="tipTxt">Joinly 将在发放奖励前仔细检查，已提交的任务</div>
</div>
<div class
="taskMain">
<div class
="mainTop">
<img src
="@/assets/navigater/task2.png" alt
="">
<div class
="mainTxt">关注 crazy crap在微博的账号，账号名称crazy crap</div>
</div>
<div class
="main">
<el
-form
ref
="ruleFormRef"
style
="max
-width: 600px"
:model
="ruleForm"
status
-icon
label
-width
="auto"
class
="demo
-ruleForm"
>
<!
-- :rules
="rules"
-->
<el
-card class
="step">
<div class
="stepTop">
<div class
="stepTit">
<el
-checkbox v
-model
="checked1" size
="large" />
<div class
="stepTxt">关闭微博关闭微博关闭微博关闭微博关闭微博关闭微博关闭微博关闭微博关闭微博关闭微博</div>
</div>
<el
-button class
="stepBtn" color
="#715EFF"
type="primary" :icon
="Edit" disabled>保存修改</el
-button>
</div>
<div class
="stepMain">
<div class
="title">添加图片</div>
<el
-upload action
="#" list
-type="picture
-card" :auto
-upload
="false" :limit
=3>
<el
-icon><Plus /></el
-icon>
<template #
file="{
file }">
<div>
<img class
="el
-upload
-list__item
-thumbnail" :src
="
file.url" alt
="" />
<span class
="el
-upload
-list__item
-actions">
<span
class
="el
-upload
-list__item
-preview"
@click
="handlePictureCardPreview
(file)"
>
<el
-icon><zoom
-in /></el
-icon>
</span>
<span
v
-if
="!disabled"
class
="el
-upload
-list__item
-delete"
@click
="handleRemove
(file)"
>
<el
-icon><Delete /></el
-icon>
</span>
</span>
</div>
</template>
</el
-upload>
<el
-dialog v
-model
="dialogVisible">
<img w
-full :src
="dialogImageUrl" alt
="Preview Image" />
</el
-dialog>
<div class
="title">添加文字</div>
<el
-input class
="addTxt"
type="textarea" v
-model
="addTxt1" placeholder
="请输入文字" />
</div>
</el
-card>
<el
-card class
="step">
<div class
="stepTop">
<div class
="stepTit">
<el
-checkbox v
-model
="checked1" size
="large" />
<div class
="stepTxt">关闭微博关闭微博关闭微博关闭微博关闭微博关闭微博关闭微博关闭微博关闭微博关闭微博</div>
</div>
<el
-button class
="stepBtn" color
="#715EFF"
type="primary" :icon
="Edit" disabled>保存修改</el
-button>
</div>
<div class
="stepMain">
<div class
="title">添加图片</div>
<el
-upload action
="#" list
-type="picture
-card" :auto
-upload
="false" :limit
=3>
<el
-icon><Plus /></el
-icon>
<template #
file="{
file }">
<div>
<img class
="el
-upload
-list__item
-thumbnail" :src
="
file.url" alt
="" />
<span class
="el
-upload
-list__item
-actions">
<span
class
="el
-upload
-list__item
-preview"
@click
="handlePictureCardPreview
(file)"
>
<el
-icon><zoom
-in /></el
-icon>
</span>
<span
v
-if
="!disabled"
class
="el
-upload
-list__item
-delete"
@click
="handleRemove
(file)"
>
<el
-icon><Delete /></el
-icon>
</span>
</span>
</div>
</template>
</el
-upload>
<el
-dialog v
-model
="dialogVisible">
<img w
-full :src
="dialogImageUrl" alt
="Preview Image" />
</el
-dialog>
<div class
="title">添加文字</div>
<el
-input class
="addTxt"
type="textarea" v
-model
="addTxt1" placeholder
="请输入文字" />
</div>
</el
-card>
<el
-card class
="step">
<div class
="stepTop">
<div class
="stepTit">
<el
-checkbox v
-model
="checked1" size
="large" />
<div class
="stepTxt">关闭微博关闭微博关闭微博关闭微博关闭微博关闭微博关闭微博关闭微博关闭微博关闭微博</div>
</div>
<el
-button class
="stepBtn" color
="#715EFF"
type="primary" :icon
="Edit" disabled>保存修改</el
-button>
</div>
<div class
="stepMain">
<div class
="title">添加图片</div>
<el
-upload action
="#" list
-type="picture
-card" :auto
-upload
="false" :limit
=3>
<el
-icon><Plus /></el
-icon>
<template #
file="{
file }">
<div>
<img class
="el
-upload
-list__item
-thumbnail" :src
="
file.url" alt
="" />
<span class
="el
-upload
-list__item
-actions">
<span
class
="el
-upload
-list__item
-preview"
@click
="handlePictureCardPreview
(file)"
>
<el
-icon><zoom
-in /></el
-icon>
</span>
<span
v
-if
="!disabled"
class
="el
-upload
-list__item
-delete"
@click
="handleRemove
(file)"
>
<el
-icon><Delete /></el
-icon>
</span>
</span>
</div>
</template>
</el
-upload>
<el
-dialog v
-model
="dialogVisible">
<img w
-full :src
="dialogImageUrl" alt
="Preview Image" />
</el
-dialog>
<div class
="title">添加文字</div>
<el
-input class
="addTxt"
type="textarea" v
-model
="addTxt1" placeholder
="请输入文字" />
</div>
</el
-card>
</el
-form>
</div>
</div>
</div>
<div class
="taskRight">
</div>
</div>
</div>
</div>
</div>
</template>
<style scoped lang
="s
css">
.scale
-container {
width: 1920px; /* 设计稿
宽度 */
position: absolute;
display: block;
top: 0;
left: 0;
.content {
width: 100%;
height: 100%;
background
-color: #000;
display: block;
.wrap{
width: 1552px;
margin: 0 auto;
.topBack{
display: flex;
width: 1552px;
height: 74px;
justify
-content: left;
align
-items: center;
border
-bottom: 1px solid #444;
margin
-bottom: 31px;
.return{
width: 24px;
height: 24px;
margin
-right: 10px;
img{
width: 100%;
height: 100%;
}
}
.title{
font
-family: PingFang SC;
font
-weight: 600;
font
-style: Semibold;
font
-size: 20px;
color:#fff;
line
-height: 100%;
letter
-spacing:
-0.3px;
}
}
.taskBox{
display: flex;
width: 1174px;
margin: 0 auto;
.taskLeft{
width: 787px;
.publisherBox{
width: 787px;
height:100px;
display: flex;
background
-color: #232323;
border
-radius: 12px;
padding: 16px;
margin
-bottom: 30px;
.avatar{
width: 48px;
height: 48px;
margin
-right: 16px;
img{
width: 100%;
height: 100%;
border
-radius: 50%;
}
}
.info{
.infoTop{
display: flex;
justify
-content: left;
align
-items: center;
.name{
font
-family: PingFang SC;
font
-weight: 600;
font
-style: Semibold;
font
-size: 20px;
color:#fff;
line
-height: 100%;
letter
-spacing:
-0.3px;
}
img{
width: 16px;
height: 16px;
border
-radius: 50%;
margin
-left: 8px;
}
}
.dic{
width: 536px;
margin
-top: 14px;
font
-family: PingFang SC;
font
-weight: 400;
font
-style: Regular;
font
-size: 14px;
line
-height: 21px;
letter
-spacing:
-0.3px;
color:#A6A6A6;
display:
-webkit
-box; /* 关键属性：弹性伸缩盒子 */
-webkit
-box
-orient: vertical; /* 排列方向：垂直 */
-webkit
-line
-clamp: 2; /* 限制行数：2行 */
overflow: hidden; /* 溢出隐藏 */
text
-overflow: ellipsis; /* 溢出显示省略号 */
word
-break: break
-word; /* 长单词换行处理 */
}
}
}
.taskDic{
width: 786px;
height: 150px;
top: 346px;
left: 373px;
display: flex;
padding
-top: 32px;
border
-top: 1px solid #444;
.taskImg{
img{
width: 160px;
height: 120PX;
border
-radius: 12px;
}
}
.taskText{
color: #fff;
margin
-left: 23px;
.taskTitle{
width: 546px;
height: 80px;
font
-family: PingFang SC;
font
-weight: 600;
font
-style: Semibold;
font
-size: 26px;
letter
-spacing:
-0.3px;
// display:
-webkit
-box; /* 关键属性：弹性伸缩盒子 */
//
-webkit
-box
-orient: vertical; /* 排列方向：垂直 */
//
-webkit
-line
-clamp: 2; /* 限制行数：2行 */
// overflow: hidden; /* 溢出隐藏 */
// text
-overflow: ellipsis; /* 溢出显示省略号 */
// word
-break: break
-word; /* 长单词换行处理 */
}
.botBox{
display: flex;
justify
-content: space
-between;
align
-items: center;
width: 603px;
.
type{
width: 64px;
height: 30px;
text
-align: center;
font
-family: PingFang SC;
font
-weight: 600;
font
-style: Semibold;
font
-size: 12px;
line
-height: 30px;
letter
-spacing:
-0.3px;
border
-radius: 4px;
background
-color: #232323;
}
.copy{
width: 30px;
height: 30px;
img{
width: 100%;
height: 100%;
}
}
}
}
}
.tip{
display: flex;
justify
-content: left;
align
-items: center;
margin: 32px auto;
img{
width: 16px;
height: 16px;
border
-radius: 50%;
margin
-right: 10px;
}
.tipTxt{
color:#fff;font
-family: PingFang SC;
font
-weight: 400;
font
-style: Regular;
font
-size: 14px;
line
-height: 100%;
letter
-spacing:
-0.3px;
}
}
.taskMain{
width: 787px;
padding: 24px;
border
-radius: 12px;
background
-color: #232323;
.mainTop{
display: flex;
justify
-content: left;
align
-items: center;
margin
-bottom: 23px;
img{
width: 24px;
height: 24px;
border
-radius: 4px;
margin
-right: 10px;
}
.mainTxt{
font
-family: PingFang SC;
font
-weight: 600;
font
-style: Semibold;
font
-size: 18px;
color:#fff;
line
-height: 100%;
letter
-spacing:
-0.3px;
}
}
.main{
.step{
width: 739px;
background
-color: #121212;
border: 1px solid #121212;
.stepTop{
width: 715px;
display: flex;
justify
-content: space
-between;
align
-items: center;
border
-bottom: 1px solid #444;
.stepTit{
display: flex;
justify
-content: space
-between;
align
-items: center;
.stepTxt{
font
-family: PingFang SC;
font
-weight: 400;
font
-style: Regular;
font
-size: 14px;
color:#A6A6A6;
line
-height: 100%;
letter
-spacing:
-0.3px;
margin
-left: 10px;
}
}
.stepBtn{
margin
-right: 10px;
margin
-bottom: 3px;
}
}
.stepMain{
width: 667px;
margin: 0 auto;
.title{
font
-family: PingFang SC;
font
-weight: 400;
font
-style: Regular;
font
-size: 12px;
color:#fff;
letter
-spacing:
-0.3px;
margin: 10px 0;
}
.addTxt{
&:deep
(.el
-input
){
display: block;
width: 667px;
height: 80px !important;
background
-color: #363636 !important;
border: none;
border
-radius: 8px;
}
}
}
}
}
}
}
.taskRight{
width: 339px;
margin
-left: 48px;
}
}
}
}
}
</style>
中console.log
(partyUserInfo.value.avatar
)的输出结果为https://cdn.shenyantuling.com/prod/image/head/shutiao1.png。
但是 报错显示：taskDetail.vue:98 Uncaught
(in promise
) TypeError: Cannot read properties of undefined
(reading 'avatar'
)
at Proxy._sfc_render
(taskDetail.vue:98:53
)
即<img :src
=partyUserInfo.avatar alt
="">中找不到avatar
本文探讨了在不同浏览器中调整HTML文件输入控件（type=file）宽度的方法。Firefox中使用size属性来设定宽度，而在Chrome下通常的width设置无效。文章提供了具体的代码示例。
扫一扫
1717
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
