<template>
|
|
<view class="card">
|
|
<view class="flex card-header">
|
|
<!-- todo: 缺切图 -->
|
|
<image class="icon" src="@/static/image/icon.png" mode="widthFix"></image>
|
|
<view>{{ unfinishCount ? `您还有${unfinishCount}道题未完成` : '您已完成测评,还未获取报告' }}</view>
|
|
</view>
|
|
<view class="card-content">
|
|
<view class="row">
|
|
<view class="row-label">答题时间</view>
|
|
<view class="row-content">{{ $dayjs(data.createTime).format('YYYY-MM-DD HH:mm') }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex card-footer">
|
|
<button class="btn" @click="onRestart">重新测评</button>
|
|
<button v-if="unfinishCount" class="btn btn-primary" @click="onContinue">继续答题</button>
|
|
<button v-else class="btn btn-primary" @click="onCreateReport">获取报告</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
default() {
|
|
return {}
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
unfinishCount() {
|
|
const { allNum, finishNum } = this.data
|
|
|
|
return allNum - finishNum
|
|
},
|
|
},
|
|
methods: {
|
|
onRestart() {
|
|
// todo: fetch by this.data.paperId
|
|
// let id
|
|
// uni.navigateTo({
|
|
// url: `/pages_order/test/answer?id=${id}`
|
|
// })
|
|
uni.navigateTo({
|
|
url: `/pages_order/test/start`
|
|
})
|
|
},
|
|
onContinue() {
|
|
uni.navigateTo({
|
|
url: `/pages_order/test/answer?examId=${this.data.id}`,
|
|
})
|
|
},
|
|
onCreateReport() {
|
|
// todo: check
|
|
uni.navigateTo({
|
|
url: `/pages_order/report/pay?batchNo=${this.data.batchNo}`
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.card {
|
|
position: relative;
|
|
padding: 17rpx 0 22rpx 0;
|
|
color: #000000;
|
|
background: #FFFFFF;
|
|
border-radius: 15rpx;
|
|
overflow: hidden;
|
|
|
|
&-header {
|
|
justify-content: flex-start;
|
|
column-gap: 24rpx;
|
|
padding: 0 26rpx;
|
|
font-size: 30rpx;
|
|
|
|
.icon {
|
|
width: 48rpx;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
&-content {
|
|
padding-left: 94rpx;
|
|
}
|
|
|
|
&-footer {
|
|
padding: 22rpx 35rpx 0 35rpx;
|
|
column-gap: 25rpx;
|
|
}
|
|
}
|
|
|
|
.row {
|
|
margin-top: 12rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
column-gap: 26rpx;
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
.btn {
|
|
flex: 1;
|
|
padding: 17rpx 0;
|
|
box-sizing: border-box;
|
|
font-family: PingFang SC;
|
|
font-size: 22rpx;
|
|
line-height: 1.4;
|
|
color: #014FA2;
|
|
border: 3rpx solid #014FA2;
|
|
border-radius: 35rpx;
|
|
|
|
&-primary {
|
|
color: #FFFFFF;
|
|
background: #014FA2;
|
|
}
|
|
}
|
|
|
|
</style>
|