xjs
/
volunteer-secondary
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 新版测评

master
xjs 2026-07-01 13:43:32 +08:00
parent 7e14e168af
commit 5dabe949c1
1 changed files with 104 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
src/pages/evaluation/index.vue
View File

@ -1,25 +1,80 @@
<template>
<view class="custom-background flex flex-col pb-safe">
<view>
<view class="bg-[#F8F8F8] flex flex-col pb-safe relative min-h-[calc(100vh-118px)] z-0">
<view
class="h-[626rpx] w-full bg-[url('https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/ceping_BG.png')] bg-left-center bg-cover absolute">
</view>
<sar-navbar :fixed="true" fixation-style="top:unset;"
:root-style="{ '--sar-navbar-bg': `rgba(255, 255, 255, ${opacity})`, '--sar-navbar-height': `${systemInfo?.statusBarHeight + 44}px` }">
<template #title>
<view class="text-[32rpx] font-500" :style="{ 'padding-top': `${systemInfo?.statusBarHeight}px` }">
志愿填报
</view>
</template>
</sar-navbar>
<view class="z-2 px-[30rpx] mt-[40rpx]">
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/ce_biaoti.png" mode="scaleToFill"
class="w-[374rpx] h-[116rpx] z-2" />
<view class="flex items-center text-[24rpx] text-[#666] mt-[10rpx]">
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/ceping_touxiang.png" mode="scaleToFill"
class="w-[74rpx] h-[28rpx]" />
<view>已帮助</view>
<view class="text-[#F5663E] font-[DinBold] font-700 text-[26rpx]">22632</view>
<view>济南家庭</view>
</view>
<view class="px-[32rpx] mt-[30rpx]">
<EvaluationItem :item="value"
v-for="value in evaluationList" :key="value.id" />
</view>
<view class="mt-38rpx z-2 px-[30rpx]">
<view v-for="(item, index) in evaluationList" :key="index" class="flex w-full">
<view class="flex flex-col items-center justify-center">
<view class="h-[32rpx] dashed-box" v-if="index !== 0"></view>
<view class="h-[32rpx] bg-transparent" v-else></view>
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/ceping_wancheng.png" mode="scaleToFill"
class="w-[32rpx] h-[32rpx]" v-if="item.testStatus === 1" />
<view
class="w-[32rpx] h-[32rpx] rounded-full bg-[#F5663F] flex items-center justify-center text-[26rpx] text-[#fff]"
v-else>{{ index + 1 }}</view>
<view class="flex-1 dashed-box"></view>
</view>
<view class="flex-1" :class="index === 3 ? 'pb-[0rpx]' : 'pb-[24rpx]'">
<view class="tran-before p-[30rpx] rounded-[16rpx] bg-white flex items-center ml-[18rpx]">
<view class="flex flex-col">
<view class="text-[34rpx] text-black font-500">{{ item.name }}</view>
<view class="font-400 text-[#666] text-[24rpx] mt-[16rpx] mb-[10rpx]">{{ item.summary }}</view>
<view class="flex items-center gap-[10rpx]">
<view class="bg-[#E7F2FF] rounded-[8rpx] p-[6rpx] text-[#1580FF] text-[20rpx]" :key="tIndex"
v-for="(tag, tIndex) in item.tags">{{ tag }}</view>
</view>
</view>
<view class="flex items-center gap-x-[8rpx] ml-auto flex-shrink-0" v-if="item.testStatus === 1">
<view class="text-[#1580FF] text-[24rpx]">查看档案</view>
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/ceping_xiangqing.png" mode="scaleToFill"
class="w-[30rpx] h-[12rpx]" />
</view>
<view>
</view>
</view>
</view>
</view>
</view>
<view class="z-2 mt-[48rpx] relative" v-if="!getAward">
<button
class="flex items-center justify-center rounded-full text-[32rpx] bg-[#EAEDF2] text-[#9E9E9E] h-[96rpx]! w-[600rpx]!">
完成全部测评，即可领取
</button>
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/dangan_moren.png" mode="scaleToFill"
class="w-[148rpx] h-[134rpx] absolute right-[60rpx] top-[-40rpx]" />
</view>
<view class="z-2 mt-[48rpx] relative" v-else>
<button
class="flex items-center justify-center rounded-full text-[32rpx] text-[#fff] h-[96rpx]! w-[600rpx]! bg-[url('https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/anniubeijing.png'),linear-gradient(to_right,#FF9411,#FFB11B)] bg-left-top bg-no-repeat">
立即领取
</button>
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/dangan_moren.png" mode="scaleToFill"
class="w-[148rpx] h-[134rpx] absolute right-[60rpx] top-[-40rpx]" />
</view>
</view>
</template>
<script lang="ts" setup>
import { systemInfo } from '@/utils/systemInfo'
import EvaluationItem from './components/EvaluationItem.vue'
import { getEvaluationList } from "@/service/requestApi"
// #ifdef MP-WEIXIN
@ -46,10 +101,15 @@ onPageScroll((e) => {
opacity.value = Math.min(scrollTop / 100, 1)
})
const evaluationList = ref<{name:string,minImg:string,id:number}[]>([])
const evaluationList = ref<{ name: string, minImg: string, id: number, summary: string, testStatus: number, tags: string[] }[]>([])
const getAward = computed(() => {
return true
// return evaluationList.value.every(item => item.testStatus === 1)
})
onLoad(() => {
getEvaluationList({query:{menuid:'340509778657349'}}).then(resp => {
getEvaluationList({ query: { menuid: '339907260608593' } }).then(resp => {
if (resp.code === 200) {
evaluationList.value = resp.result
}
@ -58,11 +118,31 @@ onLoad(() => {
</script>
<style lang="scss" scoped>
.custom-background {
background: linear-gradient(180deg, #ecf2ff 0%,#f6f8ff 40rpx, #fff 128rpx);
background-position: 50% 50%;
background-origin: padding-box;
background-clip: border-box;
background-size: auto auto;
.tran-before {
position: relative;
&::before {
content: '';
position: absolute;
left: -18rpx;
top: 30rpx;
width: 18rpx;
height: 36rpx;
background-image: url('https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/ceping_jiantou.png');
background-size: contain;
background-repeat: no-repeat;
}
}
.dashed-box {
width: 2rpx;
background-image: repeating-linear-gradient(to bottom,
transparent 0rpx 12rpx,
#E1ECF9 12rpx 30rpx,
transparent 30rpx 36rpx);
}
button::after {
border: none;
}
</style>