Compare commits
No commits in common. "25386bee63fcebce12e1b0d1ca7ef41e7e09710c" and "7e14e168af6125695acfba8ca7375e094f3c9b0d" have entirely different histories.
25386bee63
...
7e14e168af
|
|
@ -24,10 +24,6 @@ onShow(() => {
|
||||||
onLoad(() => {
|
onLoad(() => {
|
||||||
uni.loadFontFace({family:"DinBold",source:"https://lwzk.ycymedu.com/img/din-bold.ttf"})
|
uni.loadFontFace({family:"DinBold",source:"https://lwzk.ycymedu.com/img/din-bold.ttf"})
|
||||||
uni.loadFontFace({family:'JinBuFont',source:"https://lwzk.ycymedu.com/img/DingTalkJinBuTi.ttf"})
|
uni.loadFontFace({family:'JinBuFont',source:"https://lwzk.ycymedu.com/img/DingTalkJinBuTi.ttf"})
|
||||||
uni.loadFontFace({
|
|
||||||
family: 'AlimamaShuHeiTi',
|
|
||||||
source: 'https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/AlimamaShuHeiTi-Bold.ttf',
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const exposeRef = ref('this is form app.Ku.vue')
|
const exposeRef = ref('this is form app.Ku.vue')
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
bg-color="transparent"
|
bg-color="transparent"
|
||||||
>
|
>
|
||||||
<template #title>
|
<template #title>
|
||||||
<text class="text-[36rpx] font-medium text-[#fff]">职业锚测评报告</text>
|
<text class="text-[#1F2329] text-[36rpx] font-medium text-[#fff]">职业锚测评报告</text>
|
||||||
</template>
|
</template>
|
||||||
</Navbar>
|
</Navbar>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,328 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="radar-chart" :style="chartStyle">
|
|
||||||
<LEchart ref="echart" :is-disable-scroll="true" custom-style="width:100%;height:100%;z-index:1;" />
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import LEchart from '@/chart-sub/uni_modules/lime-echart/components/l-echart/l-echart.vue'
|
|
||||||
|
|
||||||
interface RadarDataItem {
|
|
||||||
title: string
|
|
||||||
value: number | string
|
|
||||||
max?: number | string
|
|
||||||
}
|
|
||||||
|
|
||||||
interface PicChartsIndicatorItem {
|
|
||||||
name: string
|
|
||||||
max?: number | string
|
|
||||||
}
|
|
||||||
|
|
||||||
interface PicChartsData {
|
|
||||||
indicator?: PicChartsIndicatorItem[]
|
|
||||||
radars?: Array<number | string>
|
|
||||||
}
|
|
||||||
|
|
||||||
type RadarChartData = RadarDataItem[] | PicChartsData
|
|
||||||
|
|
||||||
interface GradientStop {
|
|
||||||
offset: number
|
|
||||||
color: string
|
|
||||||
}
|
|
||||||
|
|
||||||
interface EchartsLib {
|
|
||||||
graphic?: {
|
|
||||||
RadialGradient?: new (
|
|
||||||
x: number,
|
|
||||||
y: number,
|
|
||||||
r: number,
|
|
||||||
colorStops: GradientStop[]
|
|
||||||
) => unknown
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
interface LimeChart {
|
|
||||||
setOption: (option: Record<string, unknown>, notMerge?: boolean) => void
|
|
||||||
clear?: () => void
|
|
||||||
dispose?: () => void
|
|
||||||
}
|
|
||||||
|
|
||||||
interface LimeChartRef {
|
|
||||||
init: (echartsLib: EchartsLib, callback: (chart: LimeChart) => void) => void
|
|
||||||
dispose?: () => void
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = withDefaults(
|
|
||||||
defineProps<{
|
|
||||||
data?: RadarChartData
|
|
||||||
height?: string
|
|
||||||
max?: number
|
|
||||||
splitNumber?: number
|
|
||||||
}>(),
|
|
||||||
{
|
|
||||||
data: () => [],
|
|
||||||
height: '430rpx',
|
|
||||||
max: 0,
|
|
||||||
splitNumber: 4,
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
// lime-echart 的 Vue3 小程序接入方式要求用 require 载入这个 UMD 包。
|
|
||||||
// eslint-disable-next-line ts/no-require-imports
|
|
||||||
const echartsLib = require('../../uni_modules/lime-echart/static/echarts.min') as EchartsLib
|
|
||||||
|
|
||||||
const echart = ref<LimeChartRef | null>(null)
|
|
||||||
let chartInstance: LimeChart | null = null
|
|
||||||
|
|
||||||
const chartStyle = computed(() => ({
|
|
||||||
height: props.height,
|
|
||||||
}))
|
|
||||||
|
|
||||||
function normalizeValue(value: number | string) {
|
|
||||||
const result = Number(value)
|
|
||||||
return Number.isFinite(result) ? result : 0
|
|
||||||
}
|
|
||||||
|
|
||||||
function isPicChartsData(data: RadarChartData): data is PicChartsData {
|
|
||||||
return !Array.isArray(data)
|
|
||||||
}
|
|
||||||
|
|
||||||
const chartData = computed(() => {
|
|
||||||
if (isPicChartsData(props.data)) {
|
|
||||||
const indicators = props.data.indicator ?? []
|
|
||||||
const radars = props.data.radars ?? []
|
|
||||||
|
|
||||||
return indicators.map((item, index) => ({
|
|
||||||
title: item.name,
|
|
||||||
value: normalizeValue(radars[index] ?? 0),
|
|
||||||
max: item.max === undefined ? undefined : normalizeValue(item.max),
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
|
|
||||||
return props.data.map(item => ({
|
|
||||||
title: item.title,
|
|
||||||
value: normalizeValue(item.value),
|
|
||||||
max: item.max === undefined ? undefined : normalizeValue(item.max),
|
|
||||||
}))
|
|
||||||
})
|
|
||||||
|
|
||||||
const highestTitle = computed(() => {
|
|
||||||
if (chartData.value.length === 0) {
|
|
||||||
return ''
|
|
||||||
}
|
|
||||||
|
|
||||||
return chartData.value.reduce((maxItem, item) => {
|
|
||||||
return item.value > maxItem.value ? item : maxItem
|
|
||||||
}).title
|
|
||||||
})
|
|
||||||
|
|
||||||
const chartMax = computed(() => {
|
|
||||||
if (props.max > 0) {
|
|
||||||
return props.max
|
|
||||||
}
|
|
||||||
|
|
||||||
const maxValue = Math.max(...chartData.value.map(item => item.value), 0)
|
|
||||||
if (maxValue <= 0) {
|
|
||||||
return 100
|
|
||||||
}
|
|
||||||
if (maxValue <= 10) {
|
|
||||||
return 10
|
|
||||||
}
|
|
||||||
|
|
||||||
return Math.ceil(maxValue / 10) * 10
|
|
||||||
})
|
|
||||||
|
|
||||||
function formatAxisName(name: string) {
|
|
||||||
const maxLength = 2
|
|
||||||
const lines: string[] = []
|
|
||||||
for (let index = 0; index < name.length; index += maxLength) {
|
|
||||||
lines.push(name.slice(index, index + maxLength))
|
|
||||||
}
|
|
||||||
|
|
||||||
if (name !== highestTitle.value) {
|
|
||||||
return lines.join('\n')
|
|
||||||
}
|
|
||||||
|
|
||||||
return lines.map(line => `{highlight|${line}}`).join('\n')
|
|
||||||
}
|
|
||||||
|
|
||||||
function createAreaColor() {
|
|
||||||
const RadialGradient = echartsLib.graphic?.RadialGradient
|
|
||||||
if (!RadialGradient) {
|
|
||||||
return 'rgba(21,128,255,0.2)'
|
|
||||||
}
|
|
||||||
|
|
||||||
return new RadialGradient(0, 0.5, 0.7071, [
|
|
||||||
{ offset: 0, color: 'rgba(21,128,255,0.078)' },
|
|
||||||
{ offset: 1, color: 'rgba(21,128,255,0.2)' },
|
|
||||||
])
|
|
||||||
}
|
|
||||||
|
|
||||||
function createOption(): Record<string, unknown> {
|
|
||||||
// 雷达图的每个维度配置：name 显示维度名称，max 控制每个维度的最大刻度
|
|
||||||
const indicator = chartData.value.map(item => ({
|
|
||||||
name: item.title,
|
|
||||||
max: item.max && item.max > 0 ? item.max : chartMax.value,
|
|
||||||
}))
|
|
||||||
|
|
||||||
return {
|
|
||||||
radar: [
|
|
||||||
{
|
|
||||||
// 主雷达坐标系：负责显示文字、中间虚线网格和实际数据区域
|
|
||||||
center: ['50%', '52%'],
|
|
||||||
radius: '68%',
|
|
||||||
shape: 'polygon',
|
|
||||||
// 维度文字和雷达图外圈之间的距离，值越小文字越靠近图形
|
|
||||||
nameGap: 4,
|
|
||||||
// 雷达图中间分割层数
|
|
||||||
splitNumber: props.splitNumber,
|
|
||||||
indicator,
|
|
||||||
axisName: {
|
|
||||||
// 雷达图外侧维度文字样式
|
|
||||||
color: '#666666',
|
|
||||||
fontSize: 10,
|
|
||||||
lineHeight: 16,
|
|
||||||
formatter: formatAxisName,
|
|
||||||
rich: {
|
|
||||||
// 分值最高的维度文字高亮显示
|
|
||||||
highlight: {
|
|
||||||
color: '#1580FF',
|
|
||||||
fontSize: 10,
|
|
||||||
fontWeight: 500,
|
|
||||||
lineHeight: 16,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
// 从中心点连到各维度顶点的轴线，使用虚线
|
|
||||||
color: '#DCDCDE',
|
|
||||||
type: 'dashed',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
// 中间网状分割线，使用虚线
|
|
||||||
color: '#DCDCDE',
|
|
||||||
type: 'dashed',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
splitArea: {
|
|
||||||
// 不显示每一层网格的背景色
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
// 外圈边框坐标系：只负责叠加一层实线外边框
|
|
||||||
center: ['50%', '52%'],
|
|
||||||
radius: '68%',
|
|
||||||
shape: 'polygon',
|
|
||||||
nameGap: 4,
|
|
||||||
// 只保留最外层一圈，避免生成多层实线网格
|
|
||||||
splitNumber: 1,
|
|
||||||
indicator,
|
|
||||||
axisName: {
|
|
||||||
// 外圈边框层不重复显示文字
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
// 外圈边框层不显示中心到顶点的轴线
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
// 雷达图最外圈边框，使用实线
|
|
||||||
color: '#DCDCDE',
|
|
||||||
type: 'solid',
|
|
||||||
width: 2,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
splitArea: {
|
|
||||||
// 外圈边框层不显示背景色
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
// 雷达图数据系列：负责绘制蓝色高亮区域和边框
|
|
||||||
type: 'radar',
|
|
||||||
radarIndex: 0,
|
|
||||||
// 不显示每个顶点上的圆点
|
|
||||||
symbol: 'none',
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
value: chartData.value.map(item => item.value),
|
|
||||||
name: '测评结果',
|
|
||||||
lineStyle: {
|
|
||||||
// 高亮区域的蓝色边框
|
|
||||||
color: '#1580FF',
|
|
||||||
width: 2,
|
|
||||||
},
|
|
||||||
itemStyle: {
|
|
||||||
// 顶点样式兜底配置；当前 symbol 为 none，不会实际显示圆点
|
|
||||||
color: '#1580FF',
|
|
||||||
borderColor: '#FFFFFF',
|
|
||||||
borderWidth: 1,
|
|
||||||
},
|
|
||||||
areaStyle: {
|
|
||||||
// 高亮区域的渐变填充和阴影
|
|
||||||
color: createAreaColor(),
|
|
||||||
shadowColor: 'rgba(13,121,252,0.1)',
|
|
||||||
shadowBlur: 12,
|
|
||||||
shadowOffsetY: 6,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderChart() {
|
|
||||||
if (!echart.value) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (chartData.value.length === 0) {
|
|
||||||
chartInstance?.clear?.()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const option = createOption()
|
|
||||||
if (chartInstance) {
|
|
||||||
chartInstance.setOption(option, true)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
echart.value.init(echartsLib, (chart) => {
|
|
||||||
chartInstance = chart
|
|
||||||
chart.setOption(option, true)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
renderChart()
|
|
||||||
})
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.data,
|
|
||||||
() => {
|
|
||||||
nextTick(renderChart)
|
|
||||||
},
|
|
||||||
{ deep: true },
|
|
||||||
)
|
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
chartInstance?.dispose?.()
|
|
||||||
echart.value?.dispose?.()
|
|
||||||
chartInstance = null
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.radar-chart {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -96,7 +96,7 @@ import Checkbox from '@/chart-sub/components/check-group/Checkbox.vue'
|
||||||
import CheckboxGroup from '@/chart-sub/components/check-group/CheckboxGroup.vue'
|
import CheckboxGroup from '@/chart-sub/components/check-group/CheckboxGroup.vue'
|
||||||
|
|
||||||
import { useUserStore } from '@/store/user'
|
import { useUserStore } from '@/store/user'
|
||||||
import { useRouterDetail } from '@/hooks/useRouterDetail'
|
import { useRouterDetail } from './useRouterDetail'
|
||||||
|
|
||||||
// #ifdef MP-WEIXIN
|
// #ifdef MP-WEIXIN
|
||||||
definePage({
|
definePage({
|
||||||
|
|
@ -148,25 +148,17 @@ const handleCheckChange = (value: any[]) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const calcScore = () => {
|
const calcScore = () => {
|
||||||
// 取当前题目的评分维度 type，同一维度的题目会累计到 answerMap 的同一个 key 下
|
|
||||||
let _type = questions.value[currentIndex.value].type
|
let _type = questions.value[currentIndex.value].type
|
||||||
// 维度名称取当前题目第一个答案项上的 tag，用于提交时展示该维度名称
|
let _name = questions.value[currentIndex.value].answer[0].tag
|
||||||
|
|
||||||
// 从当前题目的全部选项中筛出用户已勾选的选项，单选/多选都按 checkedList 统一处理
|
|
||||||
let _options = questions.value[currentIndex.value].answer.filter((answer:any) => {
|
let _options = questions.value[currentIndex.value].answer.filter((answer:any) => {
|
||||||
return checkedList.value.includes(answer.key)
|
return checkedList.value.includes(answer.key)
|
||||||
})
|
})
|
||||||
|
|
||||||
let _name = _options[0]?.tag || questions.value[currentIndex.value].answer[0].tag
|
|
||||||
|
|
||||||
|
|
||||||
if (answerMap.has(_type)) {
|
if (answerMap.has(_type)) {
|
||||||
// 如果该维度之前已经答过题，就在已有总分上叠加本题已选选项的分值
|
|
||||||
let val = answerMap.get(_type)
|
let val = answerMap.get(_type)
|
||||||
val.value += _options.reduce((count, cur) => (count = count + Number(cur.value)), 0)
|
val.value += _options.reduce((count, cur) => (count = count + Number(cur.value)), 0)
|
||||||
answerMap.set(_type, val)
|
answerMap.set(_type, val)
|
||||||
} else {
|
} else {
|
||||||
// 如果是第一次遇到该维度，则初始化该维度的名称和分值
|
|
||||||
answerMap.set(_type, {
|
answerMap.set(_type, {
|
||||||
name: _name,
|
name: _name,
|
||||||
value: _options.reduce((count, cur) => (count = count + Number(cur.value)), 0),
|
value: _options.reduce((count, cur) => (count = count + Number(cur.value)), 0),
|
||||||
|
|
|
||||||
|
|
@ -38,15 +38,7 @@ export const useRouterDetail = (item: { reportsId: string; type: number }) => {
|
||||||
url = `/chart-sub/evaluate/studyReport/learnSkillReport?id=${item.reportsId}&type=${item.type}`
|
url = `/chart-sub/evaluate/studyReport/learnSkillReport?id=${item.reportsId}&type=${item.type}`
|
||||||
} else if (item.type === 3) {
|
} else if (item.type === 3) {
|
||||||
url = `/chart-sub/evaluate/studyReport/anxietyReport?id=${item.reportsId}&type=${item.type}`
|
url = `/chart-sub/evaluate/studyReport/anxietyReport?id=${item.reportsId}&type=${item.type}`
|
||||||
} else if(item.type === 10){
|
} else {
|
||||||
url = `/chart-sub/evaluate/sixReport/explorePotential?id=${item.reportsId}&type=${item.type}`
|
|
||||||
} else if(item.type === 11){
|
|
||||||
url = `/chart-sub/evaluate/sixReport/learningAbility?id=${item.reportsId}&type=${item.type}`
|
|
||||||
} else if(item.type === 12){
|
|
||||||
url = `/chart-sub/evaluate/sixReport/growthPlanning?id=${item.reportsId}&type=${item.type}`
|
|
||||||
} else if(item.type === 13){
|
|
||||||
url = `/chart-sub/evaluate/sixReport/futureDirection?id=${item.reportsId}&type=${item.type}`
|
|
||||||
}else {
|
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
title: '开发中....',
|
title: '开发中....',
|
||||||
icon: 'none',
|
icon: 'none',
|
||||||
|
|
@ -1,302 +0,0 @@
|
||||||
<script lang="ts" setup>
|
|
||||||
import Navbar from '@/chart-sub/components/navbar/Navbar.vue'
|
|
||||||
import RadarChart from '@/chart-sub/evaluate/components/RadarChart.vue'
|
|
||||||
import { getCustomScaleExplains } from '@/service'
|
|
||||||
|
|
||||||
definePage({
|
|
||||||
style: {
|
|
||||||
navigationStyle: 'custom',
|
|
||||||
transparentTitle: 'always',
|
|
||||||
navigationBarTitleText: '',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
const handleBack = () => {
|
|
||||||
uni.switchTab({
|
|
||||||
url: '/pages/evaluation/index'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const detailData = ref<any>({});
|
|
||||||
const shareOptions = ref<Record<string, string>>({})
|
|
||||||
|
|
||||||
const shareTitle = computed(() => detailData.value?.title || '六纬中考通')
|
|
||||||
|
|
||||||
function normalizeShareOptions(options: Record<string, any> = {}) {
|
|
||||||
return Object.entries(options).reduce<Record<string, string>>((result, [key, value]) => {
|
|
||||||
if (value !== undefined && value !== null && value !== '') {
|
|
||||||
result[key] = String(value)
|
|
||||||
}
|
|
||||||
return result
|
|
||||||
}, {})
|
|
||||||
}
|
|
||||||
|
|
||||||
function stringifyQuery(query: Record<string, string>) {
|
|
||||||
return Object.keys(query)
|
|
||||||
.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(query[key])}`)
|
|
||||||
.join('&')
|
|
||||||
}
|
|
||||||
|
|
||||||
const shareQuery = computed(() => stringifyQuery(shareOptions.value))
|
|
||||||
const sharePath = computed(() => {
|
|
||||||
const query = shareQuery.value
|
|
||||||
return query
|
|
||||||
? `/chart-sub/evaluate/sixReport/explorePotential?${query}`
|
|
||||||
: '/chart-sub/evaluate/sixReport/explorePotential'
|
|
||||||
})
|
|
||||||
|
|
||||||
const environmentCardStyles = [
|
|
||||||
'bg-gradient-to-t from-[#D2F3FF] to-[#E8F9FE] outer-dot-1',
|
|
||||||
'bg-gradient-to-t from-[#F6F3FE] to-[#F2EAFF] outer-dot-2',
|
|
||||||
'bg-gradient-to-t from-[#E5FFF9] to-[#D2FEF7] outer-dot-3',
|
|
||||||
'bg-gradient-to-t from-[#E7F9FF] to-[#D3F3FF] outer-dot-4',
|
|
||||||
]
|
|
||||||
|
|
||||||
const environmentCards = computed(() => {
|
|
||||||
const cards = detailData.value?.reportView?.environmentCards ?? detailData.value?.environmentCards
|
|
||||||
return Array.isArray(cards) ? cards : []
|
|
||||||
})
|
|
||||||
|
|
||||||
function getEnvironmentCardClass(index: number) {
|
|
||||||
return environmentCardStyles[index % environmentCardStyles.length]
|
|
||||||
}
|
|
||||||
|
|
||||||
const redirectToTest = () => {
|
|
||||||
uni.navigateTo({
|
|
||||||
url: `/chart-sub/evaluate/doPage/assessmentPage?id=${detailData.value.scaleId}&name=${detailData.value.title}`,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
onLoad((options:any) => {
|
|
||||||
shareOptions.value = normalizeShareOptions(options)
|
|
||||||
|
|
||||||
getCustomScaleExplains({query:{ CustomScaleId: options?.id }}).then((resp) => {
|
|
||||||
if (resp.code === 200) {
|
|
||||||
detailData.value = resp.result;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
onShareAppMessage(() => {
|
|
||||||
return {
|
|
||||||
title: shareTitle.value,
|
|
||||||
path: sharePath.value,
|
|
||||||
imageUrl: detailData.value?.reportView?.imageUrl,
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<view class="flex flex-col bg-[#1880FC] relative">
|
|
||||||
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_BG.png" mode="scaleToFill"
|
|
||||||
class="w-full h-[296rpx]" />
|
|
||||||
<Navbar safeAreaInsetTop :bordered="false" leftArrow @clickLeft="handleBack" bg-color="transparent"
|
|
||||||
:fixed="true" class="h-0">
|
|
||||||
</Navbar>
|
|
||||||
<view
|
|
||||||
class="rounded-[0_0_24rpx_24rpx] bg-white min-h-[800rpx] px-[30rpx] pb-[22rpx] mx-[30rpx] mt-[-2rpx] flex flex-col">
|
|
||||||
<view class="flex items-center">
|
|
||||||
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_biaoqian.png" mode="scaleToFill"
|
|
||||||
class="w-[40rpx] h-[48rpx]" />
|
|
||||||
<view class="relative m-[4rpx]">
|
|
||||||
<view class="relative z-2 text-[32rpx] text-[#000]">
|
|
||||||
你的天赋类型为
|
|
||||||
</view>
|
|
||||||
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_xiantiao.png" mode="scaleToFill"
|
|
||||||
class="absolute top-[22rpx] left-[66rpx] w-[124rpx] h-[28rpx]" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="text-[92rpx] font-[700] font-[AlimamaShuHeiTi] text-center my-[24rpx]">{{ detailData.reportView.scoreDimension }}</view>
|
|
||||||
<view
|
|
||||||
class="select-box bg-[#E7F2FF] border-[2rpx] border-[#1580FF] border-solid text-[26rpx] font-500 px-[48rpx] py-[20rpx] text-center">{{ detailData.reportView.keywords.join(' · ') }}</view>
|
|
||||||
|
|
||||||
<view
|
|
||||||
class="rounded-[24rpx] bg-gradient-to-t from-[#EAF3FF] to-[#F3F8FF] px-[30rpx] py-[20rpx] mt-[24rpx] flex items-center">
|
|
||||||
<view class="flex flex-col">
|
|
||||||
<view class="text-[#F5663E] flex items-baseline">
|
|
||||||
<view class="font-700 text-[72rpx] font-[DinBold]">{{ detailData.reportView.score }}</view>
|
|
||||||
<view class="text-[28rpx] font-700">分</view>
|
|
||||||
</view>
|
|
||||||
<view class="text-[#333] text-[24rpx] font-500">组织管理能力</view>
|
|
||||||
<view class="w-[132rpx] h-[40rpx] mt-[10rpx]">
|
|
||||||
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_youshi.png" mode="scaleToFill"
|
|
||||||
class="w-[132rpx] h-[40rpx]" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<RadarChart class="flex-1" :data="detailData.picCharts" />
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="text-[24rpx] text-[#333] flex items-center justify-center mt-[10rpx]">已超过济南 <view
|
|
||||||
class="font-[DinBold] text-[32rpx] font-700 text-[#F5663E]">{{ detailData.reportView.beatPercent }}%</view> 的同龄学生</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="rounded-[24rpx] p-[30rpx] bg-white mx-[30rpx] mt-[20rpx]">
|
|
||||||
<view class="text-[36rpx] font-600">{{ detailData.reportView.portraitTitle }}</view>
|
|
||||||
<view class="text-[28rpx] text-[#333] mt-[20rpx]">
|
|
||||||
{{ detailData.reportView.portrait }}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="rounded-[24rpx] p-[30rpx] bg-white mx-[30rpx] mt-[20rpx]">
|
|
||||||
<view class="text-[36rpx] font-600">{{ detailData.reportView.environmentTitle }}</view>
|
|
||||||
<view class="grid grid-cols-2 gap-[6rpx] mt-[20rpx]">
|
|
||||||
<view
|
|
||||||
v-for="(item, index) in environmentCards"
|
|
||||||
:key="`${item.title}-${index}`"
|
|
||||||
class="h-[176rpx] px-[24rpx] py-[30rpx]"
|
|
||||||
:class="getEnvironmentCardClass(index)"
|
|
||||||
>
|
|
||||||
<view class="font-600 text-[32rpx]">{{ item.title }}</view>
|
|
||||||
<view class="text-[24rpx] text-[#3D3D3D]">{{ item.description }}</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
|
|
||||||
<view class="pb-safe bg-white mt-[40rpx]">
|
|
||||||
<view class="py-[18rpx] px-[30rpx] flex items-center gap-[20rpx]">
|
|
||||||
<view class="" @click="redirectToTest()">
|
|
||||||
<button class="flex items-center justify-center rounded-full text-[32rpx] text-[#9E9E9E] h-[88rpx]! w-[240rpx]! bg-white border-solid border-[2rpx] border-[#9E9E9E]" >
|
|
||||||
重新测评
|
|
||||||
</button>
|
|
||||||
</view>
|
|
||||||
<view class="z-2 relative">
|
|
||||||
<button
|
|
||||||
open-type="share"
|
|
||||||
class="flex items-center justify-center rounded-full text-[32rpx] text-[#fff] h-[88rpx]! w-[430rpx]! 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>
|
|
||||||
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
:deep(.icon-class) {
|
|
||||||
color: #fff !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-box {
|
|
||||||
--blue: #1e86ff;
|
|
||||||
--dot-size: 10rpx;
|
|
||||||
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 左右两边的 3 个方点 */
|
|
||||||
.select-box::before,
|
|
||||||
.select-box::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: calc(var(--dot-size) / -2);
|
|
||||||
width: var(--dot-size);
|
|
||||||
height: calc(100% + var(--dot-size));
|
|
||||||
|
|
||||||
background:
|
|
||||||
linear-gradient(var(--blue), var(--blue)) center top / var(--dot-size) var(--dot-size) no-repeat,
|
|
||||||
linear-gradient(var(--blue), var(--blue)) center center / var(--dot-size) var(--dot-size) no-repeat,
|
|
||||||
linear-gradient(var(--blue), var(--blue)) center bottom / var(--dot-size) var(--dot-size) no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 左侧 3 个点 */
|
|
||||||
.select-box::before {
|
|
||||||
left: calc(var(--dot-size) / -2 - 2rpx);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 右侧 3 个点 */
|
|
||||||
.select-box::after {
|
|
||||||
right: calc(var(--dot-size) / -2);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.outer-dot-1,
|
|
||||||
.outer-dot-2,
|
|
||||||
.outer-dot-3,
|
|
||||||
.outer-dot-4 {
|
|
||||||
position: relative;
|
|
||||||
border-radius: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.outer-dot-1::before,
|
|
||||||
.outer-dot-2::before,
|
|
||||||
.outer-dot-3::before,
|
|
||||||
.outer-dot-4::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
width: 24rpx;
|
|
||||||
height: 24rpx;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outer-dot-1::after,
|
|
||||||
.outer-dot-2::after,
|
|
||||||
.outer-dot-3::after,
|
|
||||||
.outer-dot-4::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
width: 24rpx;
|
|
||||||
height: 24rpx;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outer-dot-1::before {
|
|
||||||
bottom: -12rpx;
|
|
||||||
left: 24rpx;
|
|
||||||
background-color: #D2F3FF;
|
|
||||||
z-index: 4;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.outer-dot-1::after {
|
|
||||||
right: -12rpx;
|
|
||||||
top: 24rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outer-dot-2::before {
|
|
||||||
top: 24rpx;
|
|
||||||
left: -12rpx;
|
|
||||||
background-color: #F2EBFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outer-dot-2::after {
|
|
||||||
bottom: -12rpx;
|
|
||||||
right: 24rpx;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outer-dot-3::before {
|
|
||||||
right: -12rpx;
|
|
||||||
bottom: 24rpx;
|
|
||||||
background-color: #D2FEF7;
|
|
||||||
z-index: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outer-dot-3::after {
|
|
||||||
top: -12rpx;
|
|
||||||
left: 24rpx;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.outer-dot-4::before {
|
|
||||||
top: -12rpx;
|
|
||||||
right: 24rpx;
|
|
||||||
background-color: #D3F3FF;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outer-dot-4::after {
|
|
||||||
left: -12rpx;
|
|
||||||
bottom: 24rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
button::after {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,302 +0,0 @@
|
||||||
<script lang="ts" setup>
|
|
||||||
import Navbar from '@/chart-sub/components/navbar/Navbar.vue'
|
|
||||||
import RadarChart from '@/chart-sub/evaluate/components/RadarChart.vue'
|
|
||||||
import { getCustomScaleExplains } from '@/service'
|
|
||||||
|
|
||||||
definePage({
|
|
||||||
style: {
|
|
||||||
navigationStyle: 'custom',
|
|
||||||
transparentTitle: 'always',
|
|
||||||
navigationBarTitleText: '',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
const handleBack = () => {
|
|
||||||
uni.switchTab({
|
|
||||||
url: '/pages/evaluation/index'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const detailData = ref<any>({});
|
|
||||||
const shareOptions = ref<Record<string, string>>({})
|
|
||||||
|
|
||||||
const shareTitle = computed(() => detailData.value?.title || '六纬中考通')
|
|
||||||
|
|
||||||
function normalizeShareOptions(options: Record<string, any> = {}) {
|
|
||||||
return Object.entries(options).reduce<Record<string, string>>((result, [key, value]) => {
|
|
||||||
if (value !== undefined && value !== null && value !== '') {
|
|
||||||
result[key] = String(value)
|
|
||||||
}
|
|
||||||
return result
|
|
||||||
}, {})
|
|
||||||
}
|
|
||||||
|
|
||||||
function stringifyQuery(query: Record<string, string>) {
|
|
||||||
return Object.keys(query)
|
|
||||||
.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(query[key])}`)
|
|
||||||
.join('&')
|
|
||||||
}
|
|
||||||
|
|
||||||
const shareQuery = computed(() => stringifyQuery(shareOptions.value))
|
|
||||||
const sharePath = computed(() => {
|
|
||||||
const query = shareQuery.value
|
|
||||||
return query
|
|
||||||
? `/chart-sub/evaluate/sixReport/explorePotential?${query}`
|
|
||||||
: '/chart-sub/evaluate/sixReport/explorePotential'
|
|
||||||
})
|
|
||||||
|
|
||||||
const environmentCardStyles = [
|
|
||||||
'bg-gradient-to-t from-[#D2F3FF] to-[#E8F9FE] outer-dot-1',
|
|
||||||
'bg-gradient-to-t from-[#F6F3FE] to-[#F2EAFF] outer-dot-2',
|
|
||||||
'bg-gradient-to-t from-[#E5FFF9] to-[#D2FEF7] outer-dot-3',
|
|
||||||
'bg-gradient-to-t from-[#E7F9FF] to-[#D3F3FF] outer-dot-4',
|
|
||||||
]
|
|
||||||
|
|
||||||
const environmentCards = computed(() => {
|
|
||||||
const cards = detailData.value?.reportView?.environmentCards ?? detailData.value?.environmentCards
|
|
||||||
return Array.isArray(cards) ? cards : []
|
|
||||||
})
|
|
||||||
|
|
||||||
function getEnvironmentCardClass(index: number) {
|
|
||||||
return environmentCardStyles[index % environmentCardStyles.length]
|
|
||||||
}
|
|
||||||
|
|
||||||
const redirectToTest = () => {
|
|
||||||
uni.navigateTo({
|
|
||||||
url: `/chart-sub/evaluate/doPage/assessmentPage?id=${detailData.value.scaleId}&name=${detailData.value.title}`,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
onLoad((options:any) => {
|
|
||||||
shareOptions.value = normalizeShareOptions(options)
|
|
||||||
|
|
||||||
getCustomScaleExplains({query:{ CustomScaleId: options?.id }}).then((resp) => {
|
|
||||||
if (resp.code === 200) {
|
|
||||||
detailData.value = resp.result;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
onShareAppMessage(() => {
|
|
||||||
return {
|
|
||||||
title: shareTitle.value,
|
|
||||||
path: sharePath.value,
|
|
||||||
imageUrl: detailData.value?.reportView?.imageUrl,
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<view class="flex flex-col bg-[#1880FC] relative">
|
|
||||||
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_BG.png" mode="scaleToFill"
|
|
||||||
class="w-full h-[296rpx]" />
|
|
||||||
<Navbar safeAreaInsetTop :bordered="false" leftArrow @clickLeft="handleBack" bg-color="transparent"
|
|
||||||
:fixed="true" class="h-0">
|
|
||||||
</Navbar>
|
|
||||||
<view
|
|
||||||
class="rounded-[0_0_24rpx_24rpx] bg-white min-h-[800rpx] px-[30rpx] pb-[22rpx] mx-[30rpx] mt-[-2rpx] flex flex-col">
|
|
||||||
<view class="flex items-center">
|
|
||||||
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_biaoqian.png" mode="scaleToFill"
|
|
||||||
class="w-[40rpx] h-[48rpx]" />
|
|
||||||
<view class="relative m-[4rpx]">
|
|
||||||
<view class="relative z-2 text-[32rpx] text-[#000]">
|
|
||||||
你的天赋类型为
|
|
||||||
</view>
|
|
||||||
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_xiantiao.png" mode="scaleToFill"
|
|
||||||
class="absolute top-[22rpx] left-[66rpx] w-[124rpx] h-[28rpx]" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="text-[92rpx] font-[700] font-[AlimamaShuHeiTi] text-center my-[24rpx]">{{ detailData.reportView.scoreDimension }}</view>
|
|
||||||
<view
|
|
||||||
class="select-box bg-[#E7F2FF] border-[2rpx] border-[#1580FF] border-solid text-[26rpx] font-500 px-[48rpx] py-[20rpx] text-center">{{ detailData.reportView.keywords.join(' · ') }}</view>
|
|
||||||
|
|
||||||
<view
|
|
||||||
class="rounded-[24rpx] bg-gradient-to-t from-[#EAF3FF] to-[#F3F8FF] px-[30rpx] py-[20rpx] mt-[24rpx] flex items-center">
|
|
||||||
<view class="flex flex-col">
|
|
||||||
<view class="text-[#F5663E] flex items-baseline">
|
|
||||||
<view class="font-700 text-[72rpx] font-[DinBold]">{{ detailData.reportView.score }}</view>
|
|
||||||
<view class="text-[28rpx] font-700">分</view>
|
|
||||||
</view>
|
|
||||||
<view class="text-[#333] text-[24rpx] font-500">组织管理能力</view>
|
|
||||||
<view class="w-[132rpx] h-[40rpx] mt-[10rpx]">
|
|
||||||
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_youshi.png" mode="scaleToFill"
|
|
||||||
class="w-[132rpx] h-[40rpx]" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<RadarChart class="flex-1" :data="detailData.picCharts" />
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="text-[24rpx] text-[#333] flex items-center justify-center mt-[10rpx]">已超过济南 <view
|
|
||||||
class="font-[DinBold] text-[32rpx] font-700 text-[#F5663E]">{{ detailData.reportView.beatPercent }}%</view> 的同龄学生</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="rounded-[24rpx] p-[30rpx] bg-white mx-[30rpx] mt-[20rpx]">
|
|
||||||
<view class="text-[36rpx] font-600">{{ detailData.reportView.portraitTitle }}</view>
|
|
||||||
<view class="text-[28rpx] text-[#333] mt-[20rpx]">
|
|
||||||
{{ detailData.reportView.portrait }}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="rounded-[24rpx] p-[30rpx] bg-white mx-[30rpx] mt-[20rpx]">
|
|
||||||
<view class="text-[36rpx] font-600">{{ detailData.reportView.environmentTitle }}</view>
|
|
||||||
<view class="grid grid-cols-2 gap-[6rpx] mt-[20rpx]">
|
|
||||||
<view
|
|
||||||
v-for="(item, index) in environmentCards"
|
|
||||||
:key="`${item.title}-${index}`"
|
|
||||||
class="h-[176rpx] px-[24rpx] py-[30rpx]"
|
|
||||||
:class="getEnvironmentCardClass(index)"
|
|
||||||
>
|
|
||||||
<view class="font-600 text-[32rpx]">{{ item.title }}</view>
|
|
||||||
<view class="text-[24rpx] text-[#3D3D3D]">{{ item.description }}</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
|
|
||||||
<view class="pb-safe bg-white mt-[40rpx]">
|
|
||||||
<view class="py-[18rpx] px-[30rpx] flex items-center gap-[20rpx]">
|
|
||||||
<view class="" @click="redirectToTest()">
|
|
||||||
<button class="flex items-center justify-center rounded-full text-[32rpx] text-[#9E9E9E] h-[88rpx]! w-[240rpx]! bg-white border-solid border-[2rpx] border-[#9E9E9E]" >
|
|
||||||
重新测评
|
|
||||||
</button>
|
|
||||||
</view>
|
|
||||||
<view class="z-2 relative">
|
|
||||||
<button
|
|
||||||
open-type="share"
|
|
||||||
class="flex items-center justify-center rounded-full text-[32rpx] text-[#fff] h-[88rpx]! w-[430rpx]! 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>
|
|
||||||
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
:deep(.icon-class) {
|
|
||||||
color: #fff !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-box {
|
|
||||||
--blue: #1e86ff;
|
|
||||||
--dot-size: 10rpx;
|
|
||||||
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 左右两边的 3 个方点 */
|
|
||||||
.select-box::before,
|
|
||||||
.select-box::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: calc(var(--dot-size) / -2);
|
|
||||||
width: var(--dot-size);
|
|
||||||
height: calc(100% + var(--dot-size));
|
|
||||||
|
|
||||||
background:
|
|
||||||
linear-gradient(var(--blue), var(--blue)) center top / var(--dot-size) var(--dot-size) no-repeat,
|
|
||||||
linear-gradient(var(--blue), var(--blue)) center center / var(--dot-size) var(--dot-size) no-repeat,
|
|
||||||
linear-gradient(var(--blue), var(--blue)) center bottom / var(--dot-size) var(--dot-size) no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 左侧 3 个点 */
|
|
||||||
.select-box::before {
|
|
||||||
left: calc(var(--dot-size) / -2 - 2rpx);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 右侧 3 个点 */
|
|
||||||
.select-box::after {
|
|
||||||
right: calc(var(--dot-size) / -2);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.outer-dot-1,
|
|
||||||
.outer-dot-2,
|
|
||||||
.outer-dot-3,
|
|
||||||
.outer-dot-4 {
|
|
||||||
position: relative;
|
|
||||||
border-radius: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.outer-dot-1::before,
|
|
||||||
.outer-dot-2::before,
|
|
||||||
.outer-dot-3::before,
|
|
||||||
.outer-dot-4::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
width: 24rpx;
|
|
||||||
height: 24rpx;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outer-dot-1::after,
|
|
||||||
.outer-dot-2::after,
|
|
||||||
.outer-dot-3::after,
|
|
||||||
.outer-dot-4::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
width: 24rpx;
|
|
||||||
height: 24rpx;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outer-dot-1::before {
|
|
||||||
bottom: -12rpx;
|
|
||||||
left: 24rpx;
|
|
||||||
background-color: #D2F3FF;
|
|
||||||
z-index: 4;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.outer-dot-1::after {
|
|
||||||
right: -12rpx;
|
|
||||||
top: 24rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outer-dot-2::before {
|
|
||||||
top: 24rpx;
|
|
||||||
left: -12rpx;
|
|
||||||
background-color: #F2EBFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outer-dot-2::after {
|
|
||||||
bottom: -12rpx;
|
|
||||||
right: 24rpx;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outer-dot-3::before {
|
|
||||||
right: -12rpx;
|
|
||||||
bottom: 24rpx;
|
|
||||||
background-color: #D2FEF7;
|
|
||||||
z-index: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outer-dot-3::after {
|
|
||||||
top: -12rpx;
|
|
||||||
left: 24rpx;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.outer-dot-4::before {
|
|
||||||
top: -12rpx;
|
|
||||||
right: 24rpx;
|
|
||||||
background-color: #D3F3FF;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outer-dot-4::after {
|
|
||||||
left: -12rpx;
|
|
||||||
bottom: 24rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
button::after {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,252 +0,0 @@
|
||||||
<script lang="ts" setup>
|
|
||||||
import Navbar from '@/chart-sub/components/navbar/Navbar.vue'
|
|
||||||
import { getCustomScaleExplains } from '@/service'
|
|
||||||
|
|
||||||
definePage({
|
|
||||||
style: {
|
|
||||||
navigationStyle: 'custom',
|
|
||||||
transparentTitle: 'always',
|
|
||||||
navigationBarTitleText: '',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
const handleBack = () => {
|
|
||||||
uni.switchTab({
|
|
||||||
url: '/pages/evaluation/index'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const detailData = ref<any>({});
|
|
||||||
|
|
||||||
|
|
||||||
const environmentCardStyles = [
|
|
||||||
'bg-gradient-to-t from-[#D2F3FF] to-[#E8F9FE] outer-dot-1',
|
|
||||||
'bg-gradient-to-t from-[#F6F3FE] to-[#F2EAFF] outer-dot-2',
|
|
||||||
'bg-gradient-to-t from-[#E5FFF9] to-[#D2FEF7] outer-dot-3',
|
|
||||||
'bg-gradient-to-t from-[#E7F9FF] to-[#D3F3FF] outer-dot-4',
|
|
||||||
]
|
|
||||||
|
|
||||||
const environmentCards = computed(() => {
|
|
||||||
const cards = detailData.value?.reportView?.environmentCards ?? detailData.value?.environmentCards
|
|
||||||
return Array.isArray(cards) ? cards : []
|
|
||||||
})
|
|
||||||
|
|
||||||
function getEnvironmentCardClass(index: number) {
|
|
||||||
return environmentCardStyles[index % environmentCardStyles.length]
|
|
||||||
}
|
|
||||||
|
|
||||||
const redirectToTest = () => {
|
|
||||||
uni.navigateTo({
|
|
||||||
url: `/chart-sub/evaluate/doPage/assessmentPage?id=${detailData.value.scaleId}&name=${detailData.value.title}`,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const navigateToSerer = () => {
|
|
||||||
uni.navigateTo({
|
|
||||||
url: '/pages-sub/about/onlineCustom',
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
onLoad((options:any) => {
|
|
||||||
|
|
||||||
getCustomScaleExplains({query:{ CustomScaleId: options?.id }}).then((resp) => {
|
|
||||||
if (resp.code === 200) {
|
|
||||||
detailData.value = resp.result;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<view class="flex flex-col bg-[#1880FC] relative">
|
|
||||||
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_BG.png" mode="scaleToFill"
|
|
||||||
class="w-full h-[296rpx]" />
|
|
||||||
<Navbar safeAreaInsetTop :bordered="false" leftArrow @clickLeft="handleBack" bg-color="transparent"
|
|
||||||
:fixed="true" class="h-0">
|
|
||||||
</Navbar>
|
|
||||||
<view
|
|
||||||
class="rounded-[0_0_24rpx_24rpx] bg-white px-[30rpx] pb-[22rpx] mx-[30rpx] mt-[-2rpx] flex flex-col">
|
|
||||||
<view class="flex items-center">
|
|
||||||
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_biaoqian.png" mode="scaleToFill"
|
|
||||||
class="w-[40rpx] h-[48rpx]" />
|
|
||||||
<view class="relative m-[4rpx]">
|
|
||||||
<view class="relative z-2 text-[32rpx] text-[#000]">
|
|
||||||
你的天赋类型为
|
|
||||||
</view>
|
|
||||||
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_xiantiao.png" mode="scaleToFill"
|
|
||||||
class="absolute top-[22rpx] left-[66rpx] w-[124rpx] h-[28rpx]" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="text-[92rpx] font-[700] font-[AlimamaShuHeiTi] text-center my-[24rpx]">{{ detailData.reportView.mainTitle }}</view>
|
|
||||||
<view class="select-box bg-[#E7F2FF] border-[2rpx] border-[#1580FF] border-solid text-[26rpx] font-500 px-[48rpx] py-[20rpx] text-center">{{ detailData.reportView.keywords.join(' · ') }}</view>
|
|
||||||
<view class="text-[28rpx] text-[#333] mt-[20rpx]">
|
|
||||||
{{ detailData.reportView.portrait }}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="rounded-[24rpx] p-[30rpx] bg-white mx-[30rpx] mt-[20rpx]">
|
|
||||||
<view class="text-[36rpx] font-600">{{ detailData.reportView.environmentTitle }}</view>
|
|
||||||
<view class="grid grid-cols-2 gap-[6rpx] mt-[20rpx]">
|
|
||||||
<view
|
|
||||||
v-for="(item, index) in environmentCards"
|
|
||||||
:key="`${item.title}-${index}`"
|
|
||||||
class="h-[176rpx] px-[24rpx] py-[30rpx]"
|
|
||||||
:class="getEnvironmentCardClass(index)"
|
|
||||||
>
|
|
||||||
<view class="font-600 text-[32rpx]">{{ item.title }}</view>
|
|
||||||
<view class="text-[24rpx] text-[#3D3D3D]">{{ item.description }}</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
|
|
||||||
<view class="pb-safe bg-white mt-[40rpx]">
|
|
||||||
<view class="py-[18rpx] px-[30rpx] flex items-center gap-[20rpx]">
|
|
||||||
<view class="" @click="redirectToTest()">
|
|
||||||
<button class="flex items-center justify-center rounded-full text-[32rpx] text-[#9E9E9E] h-[88rpx]! w-[240rpx]! bg-white border-solid border-[2rpx] border-[#9E9E9E]" >
|
|
||||||
重新测评
|
|
||||||
</button>
|
|
||||||
</view>
|
|
||||||
<view class="z-2 relative" @click="navigateToSerer">
|
|
||||||
<button
|
|
||||||
class="flex flex-col items-center justify-center leading-none rounded-full text-[32rpx] text-[#fff] h-[88rpx]! w-[430rpx]! 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">
|
|
||||||
<view>免费领取</view>
|
|
||||||
<view class="text-[22rpx] mt-[8rpx]">(家庭成长规划建议)</view>
|
|
||||||
</button>
|
|
||||||
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_anniulibao.png" mode="scaleToFill"
|
|
||||||
class="w-[106rpx] h-[106rpx] absolute right-0 top-[-18rpx]" style="pointer-events: none" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
:deep(.icon-class) {
|
|
||||||
color: #fff !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-box {
|
|
||||||
--blue: #1e86ff;
|
|
||||||
--dot-size: 10rpx;
|
|
||||||
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 左右两边的 3 个方点 */
|
|
||||||
.select-box::before,
|
|
||||||
.select-box::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: calc(var(--dot-size) / -2);
|
|
||||||
width: var(--dot-size);
|
|
||||||
height: calc(100% + var(--dot-size));
|
|
||||||
|
|
||||||
background:
|
|
||||||
linear-gradient(var(--blue), var(--blue)) center top / var(--dot-size) var(--dot-size) no-repeat,
|
|
||||||
linear-gradient(var(--blue), var(--blue)) center center / var(--dot-size) var(--dot-size) no-repeat,
|
|
||||||
linear-gradient(var(--blue), var(--blue)) center bottom / var(--dot-size) var(--dot-size) no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 左侧 3 个点 */
|
|
||||||
.select-box::before {
|
|
||||||
left: calc(var(--dot-size) / -2 - 2rpx);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 右侧 3 个点 */
|
|
||||||
.select-box::after {
|
|
||||||
right: calc(var(--dot-size) / -2);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.outer-dot-1,
|
|
||||||
.outer-dot-2,
|
|
||||||
.outer-dot-3,
|
|
||||||
.outer-dot-4 {
|
|
||||||
position: relative;
|
|
||||||
border-radius: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.outer-dot-1::before,
|
|
||||||
.outer-dot-2::before,
|
|
||||||
.outer-dot-3::before,
|
|
||||||
.outer-dot-4::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
width: 24rpx;
|
|
||||||
height: 24rpx;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outer-dot-1::after,
|
|
||||||
.outer-dot-2::after,
|
|
||||||
.outer-dot-3::after,
|
|
||||||
.outer-dot-4::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
width: 24rpx;
|
|
||||||
height: 24rpx;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outer-dot-1::before {
|
|
||||||
bottom: -12rpx;
|
|
||||||
left: 24rpx;
|
|
||||||
background-color: #D2F3FF;
|
|
||||||
z-index: 4;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.outer-dot-1::after {
|
|
||||||
right: -12rpx;
|
|
||||||
top: 24rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outer-dot-2::before {
|
|
||||||
top: 24rpx;
|
|
||||||
left: -12rpx;
|
|
||||||
background-color: #F2EBFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outer-dot-2::after {
|
|
||||||
bottom: -12rpx;
|
|
||||||
right: 24rpx;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outer-dot-3::before {
|
|
||||||
right: -12rpx;
|
|
||||||
bottom: 24rpx;
|
|
||||||
background-color: #D2FEF7;
|
|
||||||
z-index: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outer-dot-3::after {
|
|
||||||
top: -12rpx;
|
|
||||||
left: 24rpx;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.outer-dot-4::before {
|
|
||||||
top: -12rpx;
|
|
||||||
right: 24rpx;
|
|
||||||
background-color: #D3F3FF;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outer-dot-4::after {
|
|
||||||
left: -12rpx;
|
|
||||||
bottom: 24rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
button::after {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,302 +0,0 @@
|
||||||
<script lang="ts" setup>
|
|
||||||
import Navbar from '@/chart-sub/components/navbar/Navbar.vue'
|
|
||||||
import RadarChart from '@/chart-sub/evaluate/components/RadarChart.vue'
|
|
||||||
import { getCustomScaleExplains } from '@/service'
|
|
||||||
|
|
||||||
definePage({
|
|
||||||
style: {
|
|
||||||
navigationStyle: 'custom',
|
|
||||||
transparentTitle: 'always',
|
|
||||||
navigationBarTitleText: '',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
const handleBack = () => {
|
|
||||||
uni.switchTab({
|
|
||||||
url: '/pages/evaluation/index'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const detailData = ref<any>({});
|
|
||||||
const shareOptions = ref<Record<string, string>>({})
|
|
||||||
|
|
||||||
const shareTitle = computed(() => detailData.value?.title || '六纬中考通')
|
|
||||||
|
|
||||||
function normalizeShareOptions(options: Record<string, any> = {}) {
|
|
||||||
return Object.entries(options).reduce<Record<string, string>>((result, [key, value]) => {
|
|
||||||
if (value !== undefined && value !== null && value !== '') {
|
|
||||||
result[key] = String(value)
|
|
||||||
}
|
|
||||||
return result
|
|
||||||
}, {})
|
|
||||||
}
|
|
||||||
|
|
||||||
function stringifyQuery(query: Record<string, string>) {
|
|
||||||
return Object.keys(query)
|
|
||||||
.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(query[key])}`)
|
|
||||||
.join('&')
|
|
||||||
}
|
|
||||||
|
|
||||||
const shareQuery = computed(() => stringifyQuery(shareOptions.value))
|
|
||||||
const sharePath = computed(() => {
|
|
||||||
const query = shareQuery.value
|
|
||||||
return query
|
|
||||||
? `/chart-sub/evaluate/sixReport/explorePotential?${query}`
|
|
||||||
: '/chart-sub/evaluate/sixReport/explorePotential'
|
|
||||||
})
|
|
||||||
|
|
||||||
const environmentCardStyles = [
|
|
||||||
'bg-gradient-to-t from-[#D2F3FF] to-[#E8F9FE] outer-dot-1',
|
|
||||||
'bg-gradient-to-t from-[#F6F3FE] to-[#F2EAFF] outer-dot-2',
|
|
||||||
'bg-gradient-to-t from-[#E5FFF9] to-[#D2FEF7] outer-dot-3',
|
|
||||||
'bg-gradient-to-t from-[#E7F9FF] to-[#D3F3FF] outer-dot-4',
|
|
||||||
]
|
|
||||||
|
|
||||||
const environmentCards = computed(() => {
|
|
||||||
const cards = detailData.value?.reportView?.environmentCards ?? detailData.value?.environmentCards
|
|
||||||
return Array.isArray(cards) ? cards : []
|
|
||||||
})
|
|
||||||
|
|
||||||
function getEnvironmentCardClass(index: number) {
|
|
||||||
return environmentCardStyles[index % environmentCardStyles.length]
|
|
||||||
}
|
|
||||||
|
|
||||||
const redirectToTest = () => {
|
|
||||||
uni.navigateTo({
|
|
||||||
url: `/chart-sub/evaluate/doPage/assessmentPage?id=${detailData.value.scaleId}&name=${detailData.value.title}`,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
onLoad((options:any) => {
|
|
||||||
shareOptions.value = normalizeShareOptions(options)
|
|
||||||
|
|
||||||
getCustomScaleExplains({query:{ CustomScaleId: options?.id }}).then((resp) => {
|
|
||||||
if (resp.code === 200) {
|
|
||||||
detailData.value = resp.result;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
onShareAppMessage(() => {
|
|
||||||
return {
|
|
||||||
title: shareTitle.value,
|
|
||||||
path: sharePath.value,
|
|
||||||
imageUrl: detailData.value?.reportView?.imageUrl,
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<view class="flex flex-col bg-[#1880FC] relative">
|
|
||||||
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_BG.png" mode="scaleToFill"
|
|
||||||
class="w-full h-[296rpx]" />
|
|
||||||
<Navbar safeAreaInsetTop :bordered="false" leftArrow @clickLeft="handleBack" bg-color="transparent"
|
|
||||||
:fixed="true" class="h-0">
|
|
||||||
</Navbar>
|
|
||||||
<view
|
|
||||||
class="rounded-[0_0_24rpx_24rpx] bg-white min-h-[800rpx] px-[30rpx] pb-[22rpx] mx-[30rpx] mt-[-2rpx] flex flex-col">
|
|
||||||
<view class="flex items-center">
|
|
||||||
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_biaoqian.png" mode="scaleToFill"
|
|
||||||
class="w-[40rpx] h-[48rpx]" />
|
|
||||||
<view class="relative m-[4rpx]">
|
|
||||||
<view class="relative z-2 text-[32rpx] text-[#000]">
|
|
||||||
你的天赋类型为
|
|
||||||
</view>
|
|
||||||
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_xiantiao.png" mode="scaleToFill"
|
|
||||||
class="absolute top-[22rpx] left-[66rpx] w-[124rpx] h-[28rpx]" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="text-[92rpx] font-[700] font-[AlimamaShuHeiTi] text-center my-[24rpx]">{{ detailData.reportView.scoreDimension }}</view>
|
|
||||||
<view
|
|
||||||
class="select-box bg-[#E7F2FF] border-[2rpx] border-[#1580FF] border-solid text-[26rpx] font-500 px-[48rpx] py-[20rpx] text-center">{{ detailData.reportView.keywords.join(' · ') }}</view>
|
|
||||||
|
|
||||||
<view
|
|
||||||
class="rounded-[24rpx] bg-gradient-to-t from-[#EAF3FF] to-[#F3F8FF] px-[30rpx] py-[20rpx] mt-[24rpx] flex items-center">
|
|
||||||
<view class="flex flex-col">
|
|
||||||
<view class="text-[#F5663E] flex items-baseline">
|
|
||||||
<view class="font-700 text-[72rpx] font-[DinBold]">{{ detailData.reportView.score }}</view>
|
|
||||||
<view class="text-[28rpx] font-700">分</view>
|
|
||||||
</view>
|
|
||||||
<view class="text-[#333] text-[24rpx] font-500">组织管理能力</view>
|
|
||||||
<view class="w-[132rpx] h-[40rpx] mt-[10rpx]">
|
|
||||||
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_youshi.png" mode="scaleToFill"
|
|
||||||
class="w-[132rpx] h-[40rpx]" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<RadarChart class="flex-1" :data="detailData.picCharts" />
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="text-[24rpx] text-[#333] flex items-center justify-center mt-[10rpx]">已超过济南 <view
|
|
||||||
class="font-[DinBold] text-[32rpx] font-700 text-[#F5663E]">{{ detailData.reportView.beatPercent }}%</view> 的同龄学生</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="rounded-[24rpx] p-[30rpx] bg-white mx-[30rpx] mt-[20rpx]">
|
|
||||||
<view class="text-[36rpx] font-600">{{ detailData.reportView.portraitTitle }}</view>
|
|
||||||
<view class="text-[28rpx] text-[#333] mt-[20rpx]">
|
|
||||||
{{ detailData.reportView.portrait }}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="rounded-[24rpx] p-[30rpx] bg-white mx-[30rpx] mt-[20rpx]">
|
|
||||||
<view class="text-[36rpx] font-600">{{ detailData.reportView.environmentTitle }}</view>
|
|
||||||
<view class="grid grid-cols-2 gap-[6rpx] mt-[20rpx]">
|
|
||||||
<view
|
|
||||||
v-for="(item, index) in environmentCards"
|
|
||||||
:key="`${item.title}-${index}`"
|
|
||||||
class="h-[176rpx] px-[24rpx] py-[30rpx]"
|
|
||||||
:class="getEnvironmentCardClass(index)"
|
|
||||||
>
|
|
||||||
<view class="font-600 text-[32rpx]">{{ item.title }}</view>
|
|
||||||
<view class="text-[24rpx] text-[#3D3D3D]">{{ item.description }}</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
|
|
||||||
<view class="pb-safe bg-white mt-[40rpx]">
|
|
||||||
<view class="py-[18rpx] px-[30rpx] flex items-center gap-[20rpx]">
|
|
||||||
<view class="" @click="redirectToTest()">
|
|
||||||
<button class="flex items-center justify-center rounded-full text-[32rpx] text-[#9E9E9E] h-[88rpx]! w-[240rpx]! bg-white border-solid border-[2rpx] border-[#9E9E9E]" >
|
|
||||||
重新测评
|
|
||||||
</button>
|
|
||||||
</view>
|
|
||||||
<view class="z-2 relative">
|
|
||||||
<button
|
|
||||||
open-type="share"
|
|
||||||
class="flex items-center justify-center rounded-full text-[32rpx] text-[#fff] h-[88rpx]! w-[430rpx]! 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>
|
|
||||||
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
:deep(.icon-class) {
|
|
||||||
color: #fff !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-box {
|
|
||||||
--blue: #1e86ff;
|
|
||||||
--dot-size: 10rpx;
|
|
||||||
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 左右两边的 3 个方点 */
|
|
||||||
.select-box::before,
|
|
||||||
.select-box::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: calc(var(--dot-size) / -2);
|
|
||||||
width: var(--dot-size);
|
|
||||||
height: calc(100% + var(--dot-size));
|
|
||||||
|
|
||||||
background:
|
|
||||||
linear-gradient(var(--blue), var(--blue)) center top / var(--dot-size) var(--dot-size) no-repeat,
|
|
||||||
linear-gradient(var(--blue), var(--blue)) center center / var(--dot-size) var(--dot-size) no-repeat,
|
|
||||||
linear-gradient(var(--blue), var(--blue)) center bottom / var(--dot-size) var(--dot-size) no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 左侧 3 个点 */
|
|
||||||
.select-box::before {
|
|
||||||
left: calc(var(--dot-size) / -2 - 2rpx);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 右侧 3 个点 */
|
|
||||||
.select-box::after {
|
|
||||||
right: calc(var(--dot-size) / -2);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.outer-dot-1,
|
|
||||||
.outer-dot-2,
|
|
||||||
.outer-dot-3,
|
|
||||||
.outer-dot-4 {
|
|
||||||
position: relative;
|
|
||||||
border-radius: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.outer-dot-1::before,
|
|
||||||
.outer-dot-2::before,
|
|
||||||
.outer-dot-3::before,
|
|
||||||
.outer-dot-4::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
width: 24rpx;
|
|
||||||
height: 24rpx;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outer-dot-1::after,
|
|
||||||
.outer-dot-2::after,
|
|
||||||
.outer-dot-3::after,
|
|
||||||
.outer-dot-4::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
width: 24rpx;
|
|
||||||
height: 24rpx;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outer-dot-1::before {
|
|
||||||
bottom: -12rpx;
|
|
||||||
left: 24rpx;
|
|
||||||
background-color: #D2F3FF;
|
|
||||||
z-index: 4;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.outer-dot-1::after {
|
|
||||||
right: -12rpx;
|
|
||||||
top: 24rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outer-dot-2::before {
|
|
||||||
top: 24rpx;
|
|
||||||
left: -12rpx;
|
|
||||||
background-color: #F2EBFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outer-dot-2::after {
|
|
||||||
bottom: -12rpx;
|
|
||||||
right: 24rpx;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outer-dot-3::before {
|
|
||||||
right: -12rpx;
|
|
||||||
bottom: 24rpx;
|
|
||||||
background-color: #D2FEF7;
|
|
||||||
z-index: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outer-dot-3::after {
|
|
||||||
top: -12rpx;
|
|
||||||
left: 24rpx;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.outer-dot-4::before {
|
|
||||||
top: -12rpx;
|
|
||||||
right: 24rpx;
|
|
||||||
background-color: #D3F3FF;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outer-dot-4::after {
|
|
||||||
left: -12rpx;
|
|
||||||
bottom: 24rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
button::after {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { useRouterDetail } from '@/hooks/useRouterDetail'
|
import { useRouterDetail } from '@/pages-sub/me/useRouterDetail'
|
||||||
import { deleteBusReport, getMyBusReports } from '@/service'
|
import { deleteBusReport, getMyBusReports } from '@/service'
|
||||||
import { useUserStore } from '@/store'
|
import { useUserStore } from '@/store'
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
export const useRouterDetail = (item: { reportsId: string; type: number }) => {
|
||||||
|
// type=0 兴趣测评报告
|
||||||
|
// =1 性格测评报告
|
||||||
|
// =2 能力测评
|
||||||
|
// =3 学生考试考虑
|
||||||
|
// =4 学习风格
|
||||||
|
// =5 学习技能
|
||||||
|
// =6 SAS
|
||||||
|
// =7 SDS
|
||||||
|
// =8 SCL-90
|
||||||
|
// =9 MHT
|
||||||
|
/// =-1 价值观
|
||||||
|
/// =-2 留学咨询
|
||||||
|
let url = ''
|
||||||
|
|
||||||
|
if (item.type === 0) {
|
||||||
|
url = `/chart-sub/evaluate/academicReport/interestReport?id=${item.reportsId}&type=${item.type}`
|
||||||
|
} else if (item.type === 1) {
|
||||||
|
url = `/chart-sub/evaluate/academicReport/characterReport?id=${item.reportsId}&type=${item.type}`
|
||||||
|
} else if (item.type === 2) {
|
||||||
|
url = `/chart-sub/evaluate/academicReport/capabilityReport?id=${item.reportsId}&type=${item.type}`
|
||||||
|
} else if (item.type === -1) {
|
||||||
|
url = `/chart-sub/evaluate/academicReport/opinionAboutReport?id=${item.reportsId}&type=${item.type}`
|
||||||
|
} else if (item.type === 6) {
|
||||||
|
url = `/chart-sub/evaluate/psychologicalReport/sasReport?id=${item.reportsId}&type=${item.type}`
|
||||||
|
} else if (item.type === 7) {
|
||||||
|
url = `/chart-sub/evaluate/psychologicalReport/sdsReport?id=${item.reportsId}&type=${item.type}`
|
||||||
|
} else if (item.type === 9) {
|
||||||
|
// url = `/chart-sub/evaluate/psychologicalReport/mhtReport?id=${item.reportsId}&type=${item.type}`
|
||||||
|
uni.showToast({
|
||||||
|
title: '开发中....',
|
||||||
|
icon: 'none',
|
||||||
|
})
|
||||||
|
return
|
||||||
|
} else if (item.type === 4) {
|
||||||
|
url = `/chart-sub/evaluate/studyReport/learnStudyReport?id=${item.reportsId}&type=${item.type}`
|
||||||
|
} else if (item.type === 5) {
|
||||||
|
url = `/chart-sub/evaluate/studyReport/learnSkillReport?id=${item.reportsId}&type=${item.type}`
|
||||||
|
} else if (item.type === 3) {
|
||||||
|
url = `/chart-sub/evaluate/studyReport/anxietyReport?id=${item.reportsId}&type=${item.type}`
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
title: '开发中....',
|
||||||
|
icon: 'none',
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
uni.navigateTo({
|
||||||
|
url,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -1,85 +1,26 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="bg-[#F8F8F8] flex flex-col pb-safe relative min-h-[calc(100vh-118px)] z-0">
|
<view class="custom-background flex flex-col pb-safe">
|
||||||
<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>
|
<view class="px-[32rpx] mt-[30rpx]">
|
||||||
|
<EvaluationItem :item="value"
|
||||||
<view class="mt-38rpx z-2 px-[30rpx]">
|
v-for="value in evaluationList" :key="value.id" />
|
||||||
<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" @click="useRouterDetail({reportsId:item.reportId,type:item.reportType})">
|
|
||||||
<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 class="flex flex-col items-center ml-auto flex-shrink-0" v-if="item.testStatus === 0">
|
|
||||||
<view class="bg-[#1580FF] text-white text-[28rpx] px-[36rpx] py-[16rpx] rounded-full" @click="navigateToTest(item)">开始测评</view>
|
|
||||||
<view class="text-[20rpx] text-[#9E9E9E] mt-[4rpx]">{{ item.listMetaText }}</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 @click="navigateToServer">
|
|
||||||
<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_xuanzhong.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 { getEvaluationList } from "@/service/requestApi"
|
import EvaluationItem from './components/EvaluationItem.vue'
|
||||||
import { useUserStore } from '@/store/user'
|
import {getEvaluationList} from "@/service/requestApi"
|
||||||
|
|
||||||
const userStore = useUserStore()
|
|
||||||
|
|
||||||
// #ifdef MP-WEIXIN
|
// #ifdef MP-WEIXIN
|
||||||
definePage({
|
definePage({
|
||||||
|
|
@ -105,35 +46,11 @@ 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, summary: string, testStatus: number, tags: string[], listMetaText:string; reportId:string; reportType:number}[]>([])
|
const evaluationList = ref<{name:string,minImg:string,id:number}[]>([])
|
||||||
|
|
||||||
const getAward = computed(() => {
|
onLoad(() => {
|
||||||
return evaluationList.value.every(item => item.testStatus === 1)
|
getEvaluationList({query:{menuid:'340509778657349'}}).then(resp => {
|
||||||
})
|
if(resp.code === 200){
|
||||||
|
|
||||||
const navigateToTest = (item:any) => {
|
|
||||||
if (!userStore.userInfo.openId) {
|
|
||||||
uni.navigateTo({
|
|
||||||
url: '/pages-fg/login/login',
|
|
||||||
})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (item.isFree) {
|
|
||||||
uni.navigateTo({
|
|
||||||
url: `/chart-sub/evaluate/doPage/assessmentPage?id=${item.id}&name=${item.name}`,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const navigateToServer = () => {
|
|
||||||
uni.navigateTo({
|
|
||||||
url: '/pages-sub/about/onlineCustom',
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
onShow(() => {
|
|
||||||
getEvaluationList({ query: { menuid: '339907260608593' } }).then(resp => {
|
|
||||||
if (resp.code === 200) {
|
|
||||||
evaluationList.value = resp.result
|
evaluationList.value = resp.result
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
@ -141,31 +58,11 @@ onShow(() => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.tran-before {
|
.custom-background {
|
||||||
position: relative;
|
background: linear-gradient(180deg, #ecf2ff 0%,#f6f8ff 40rpx, #fff 128rpx);
|
||||||
|
background-position: 50% 50%;
|
||||||
&::before {
|
background-origin: padding-box;
|
||||||
content: '';
|
background-clip: border-box;
|
||||||
position: absolute;
|
background-size: auto auto;
|
||||||
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