<script lang="ts"
setup>
import { ref, onMounted } from '
vue'
import Navig
ater from '@/components/Navig
ation/Navig
ater
.vue'
import {getTaskDetail} from '@/pages/taskDetail/api/index'
import type {
UploadFile } 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 getD
ata = async
(id
) => {
const res = await getTaskDetail
({id:id}
)
taskDetail
.value = res
.d
ata
partyUserInfo
.value = res
.d
ata
.partyUserInfo
console
.log
(partyUserInfo
.value
.av
atar
)//输出结果https://cdn
.shenyantuling
.com/prod/image/head/shutiao1
.png
}
// 图片上传
const dialogImageUrl = ref
(''
)
const dialogVisible = ref
(false
)
const disabled = ref
(false
)
const handleRemove =
(file:
UploadFile
) => {
console
.log
(file
)
}
const handlePictureCardPreview =
(file:
UploadFile
) => {
dialogImageUrl
.value = file
.url!
dialogVisible
.value = true
}
const handleDownload =
(file:
UploadFile
) => {
console
.log
(file
)
}
// 表单校验
const ruleFormRef = ref<FormInstance>
()
const ruleForm = reactive
({
//
....
}
)
const handleResize =
() => {
const containerWidth = container
.value
.off
setWidth
const containerHeight = container
.value
.off
setHeight
const windowWidth = window
.innerWidth
const windowHeight = window
.innerHeight
// 计算缩放比例，保持内容完整显示
scaleValue = M
ath
.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
getD
ata
(id
.value
)
}
)
onBeforeUnmount
(() => {
window
.removeEventListener
('resize', handleResize
)
}
)
</script>
<templ
ate>
<div class="scale-container" ref="container">
<div class="content">
<!-- 顶部 logo 导航栏 -->
<Navig
ater class="top"></Navig
ater>
<!-- 任务详情 -->
<div class="wrap">
<div class="topBack">
<div class="return">
<img src="@/as
sets/navig
ater/return
.png" alt="">
</div>
<div class="title">任务详情</div>
</div>
<div class="taskBox">
<div class="taskLeft">
<!-- 发布者 -->
<div class="publisherBox">
<div class="av
atar">
<img :src=partyUserInfo
.av
atar alt="">
</div>
<div class="info">
<div class="infoTop">
<div class="name">av
atar</div>
<img src="@/as
sets/navig
ater/task1
.png" alt="">
<img src="@/as
sets/navig
ater/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="@/as
sets/navig
ater/task1
.png" alt="">
</div>
<div class="taskText">
<div class="taskTitle">任务标题：关注微博账号赠送3
000积分积分赠送</div>
<div class="botBox">
<div class="type">任务类型</div>
<div class="copy">
<img src="@/as
sets/navig
ater/task
2.png" alt="">
</div>
</div>
</div>
</div>
<div class="tip">
<img src="@/as
sets/navig
ater/task1
.png" alt="">
<div class="tipTxt">Joinly 将在发放奖励前仔细检查，已提交的任务</div>
</div>
<div class="taskMain">
<div class="mainTop">
<img src="@/as
sets/navig
ater/task
2.png" alt="">
<div class="mainTxt">关注 crazy crap在微博的账号，账号名称crazy crap</div>
</div>
<div class="main">
<el-form
ref="ruleFormRef"
style="max-width: 6
00px"
: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>
<templ
ate #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>
</templ
ate>
</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>
<templ
ate #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>
</templ
ate>
</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>
<templ
ate #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>
</templ
ate>
</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>
</templ
ate>
<style scoped lang="scss">
.scale-container {
width: 19
20px; /* 设计稿宽度 */
position: absolute;
display: block;
top:
0;
left:
0;
.content {
width: 1
00%;
height: 1
00%;
background-color: #
000;
display: block;
.wrap{
width: 155
2px;
margin:
0 auto;
.topBack{
display: flex;
width: 155
2px;
height: 74px;
justify-content: left;
align-items: center;
border-bottom: 1px solid #444;
margin-bottom: 31px;
.return{
width:
24px;
height:
24px;
margin-right: 1
0px;
img{
width: 1
00%;
height: 1
00%;
}
}
.title{
font-family: PingFang SC;
font-weight: 6
00;
font-style: Semibold;
font-size:
20px;
color:#fff;
line-height: 1
00%;
letter-spacing: -
0.3px;
}
}
.taskBox{
display: flex;
width: 1174px;
margin:
0 auto;
.taskLeft{
width: 787px;
.publisherBox{
width: 787px;
height:1
00px;
display: flex;
background-color: #
23
23
23;
border-radius: 1
2px;
padding: 16px;
margin-bottom: 3
0px;
.av
atar{
width: 48px;
height: 48px;
margin-right: 16px;
img{
width: 1
00%;
height: 1
00%;
border-radius: 5
0%;
}
}
.info{
.infoTop{
display: flex;
justify-content: left;
align-items: center;
.name{
font-family: PingFang SC;
font-weight: 6
00;
font-style: Semibold;
font-size:
20px;
color:#fff;
line-height: 1
00%;
letter-spacing: -
0.3px;
}
img{
width: 16px;
height: 16px;
border-radius: 5
0%;
margin-left: 8px;
}
}
.dic{
width: 536px;
margin-top: 14px;
font-family: PingFang SC;
font-weight: 4
00;
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: 15
0px;
top: 346px;
left: 373px;
display: flex;
padding-top: 3
2px;
border-top: 1px solid #444;
.taskImg{
img{
width: 16
0px;
height: 1
20PX;
border-radius: 1
2px;
}
}
.taskText{
color: #fff;
margin-left:
23px;
.taskTitle{
width: 546px;
height: 8
0px;
font-family: PingFang SC;
font-weight: 6
00;
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: 6
03px;
.type{
width: 64px;
height: 3
0px;
text-align: center;
font-family: PingFang SC;
font-weight: 6
00;
font-style: Semibold;
font-size: 1
2px;
line-height: 3
0px;
letter-spacing: -
0.3px;
border-radius: 4px;
background-color: #
23
23
23;
}
.copy{
width: 3
0px;
height: 3
0px;
img{
width: 1
00%;
height: 1
00%;
}
}
}
}
}
.tip{
display: flex;
justify-content: left;
align-items: center;
margin: 3
2px auto;
img{
width: 16px;
height: 16px;
border-radius: 5
0%;
margin-right: 1
0px;
}
.tipTxt{
color:#fff;font-family: PingFang SC;
font-weight: 4
00;
font-style: Regular;
font-size: 14px;
line-height: 1
00%;
letter-spacing: -
0.3px;
}
}
.taskMain{
width: 787px;
padding:
24px;
border-radius: 1
2px;
background-color: #
23
23
23;
.mainTop{
display: flex;
justify-content: left;
align-items: center;
margin-bottom:
23px;
img{
width:
24px;
height:
24px;
border-radius: 4px;
margin-right: 1
0px;
}
.mainTxt{
font-family: PingFang SC;
font-weight: 6
00;
font-style: Semibold;
font-size: 18px;
color:#fff;
line-height: 1
00%;
letter-spacing: -
0.3px;
}
}
.main{
.step{
width: 739px;
background-color: #1
21
21
2;
border: 1px solid #1
21
21
2;
.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: 4
00;
font-style: Regular;
font-size: 14px;
color:#A6A6A6;
line-height: 1
00%;
letter-spacing: -
0.3px;
margin-left: 1
0px;
}
}
.stepBtn{
margin-right: 1
0px;
margin-bottom: 3px;
}
}
.stepMain{
width: 667px;
margin:
0 auto;
.title{
font-family: PingFang SC;
font-weight: 4
00;
font-style: Regular;
font-size: 1
2px;
color:#fff;
letter-spacing: -
0.3px;
margin: 1
0px
0;
}
.addTxt{
&:deep
(.el-input
){
display: block;
width: 667px;
height: 8
0px !important;
background-color: #363636 !important;
border: none;
border-radius: 8px;
}
}
}
}
}
}
}
.taskRight{
width: 339px;
margin-left: 48px;
}
}
}
}
}
</style>
中console
.log
(partyUserInfo
.value
.av
atar
)的输出结果为https://cdn
.shenyantuling
.com/prod/image/head/shutiao1
.png。
但是
报错显示：taskDetail
.vue:98 Uncaught
(in promise
) TypeError:
Cannot read
properties of undefined
(reading 'av
atar'
)
at Proxy
._sfc_render
(taskDetail
.vue:98:53
)
即<img :src=partyUserInfo
.av
atar alt="">中找不到av
atar
在使用 Element UI 的上传组件时遇到一个Bug：手动设置文件列表后无法触发 onSuccess 回调，并出现错误提示 Cannot set property 'status' of null。此问题同样出现在使用 this.$refs.upload.clearFiles() 方法时。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
