feat: 新版测评
parent
7e14e168af
commit
5dabe949c1
|
|
@ -1,25 +1,80 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="custom-background flex flex-col pb-safe">
|
<view class="bg-[#F8F8F8] flex flex-col pb-safe relative min-h-[calc(100vh-118px)] z-0">
|
||||||
<view>
|
<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;"
|
<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` }">
|
: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>
|
</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>
|
||||||
<view class="px-[32rpx] mt-[30rpx]">
|
</view>
|
||||||
<EvaluationItem :item="value"
|
|
||||||
v-for="value in evaluationList" :key="value.id" />
|
<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>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { systemInfo } from '@/utils/systemInfo'
|
import { systemInfo } from '@/utils/systemInfo'
|
||||||
import EvaluationItem from './components/EvaluationItem.vue'
|
|
||||||
import { getEvaluationList } from "@/service/requestApi"
|
import { getEvaluationList } from "@/service/requestApi"
|
||||||
|
|
||||||
// #ifdef MP-WEIXIN
|
// #ifdef MP-WEIXIN
|
||||||
|
|
@ -46,10 +101,15 @@ onPageScroll((e) => {
|
||||||
opacity.value = Math.min(scrollTop / 100, 1)
|
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(() => {
|
onLoad(() => {
|
||||||
getEvaluationList({query:{menuid:'340509778657349'}}).then(resp => {
|
getEvaluationList({ query: { menuid: '339907260608593' } }).then(resp => {
|
||||||
if (resp.code === 200) {
|
if (resp.code === 200) {
|
||||||
evaluationList.value = resp.result
|
evaluationList.value = resp.result
|
||||||
}
|
}
|
||||||
|
|
@ -58,11 +118,31 @@ onLoad(() => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.custom-background {
|
.tran-before {
|
||||||
background: linear-gradient(180deg, #ecf2ff 0%,#f6f8ff 40rpx, #fff 128rpx);
|
position: relative;
|
||||||
background-position: 50% 50%;
|
|
||||||
background-origin: padding-box;
|
&::before {
|
||||||
background-clip: border-box;
|
content: '';
|
||||||
background-size: auto auto;
|
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>
|
</style>
|
||||||
Loading…
Reference in New Issue