feat: 新测评

src/App.ku.vue

@@ -24,6 +24,10 @@ onShow(() => {
 onLoad(() => {
   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: 'AlimamaShuHeiTi',
+    source: 'https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/AlimamaShuHeiTi-Bold.ttf',
+  })
 })
 
 const exposeRef = ref('this is form app.Ku.vue')

src/chart-sub/evaluate/academicReport/opinionAboutReport.vue

@@ -10,7 +10,7 @@
       bg-color="transparent"
     >
       <template #title>
-        <text class="text-[#1F2329] text-[36rpx] font-medium text-[#fff]">职业锚测评报告</text>
+        <text class="text-[36rpx] font-medium text-[#fff]">职业锚测评报告</text>
       </template>
     </Navbar>
 

src/chart-sub/evaluate/components/RadarChart.vue

@@ -0,0 +1,328 @@
+<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>

src/chart-sub/evaluate/doPage/assessmentPage.vue

@@ -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 { useUserStore } from '@/store/user'
-import { useRouterDetail } from './useRouterDetail'
+import { useRouterDetail } from '@/hooks/useRouterDetail'
 
 // #ifdef MP-WEIXIN
 definePage({
@@ -148,17 +148,25 @@ const handleCheckChange = (value: any[]) => {
 }
 
 const calcScore = () => {
+  // 取当前题目的评分维度 type，同一维度的题目会累计到 answerMap 的同一个 key 下
   let _type = questions.value[currentIndex.value].type
-  let _name = questions.value[currentIndex.value].answer[0].tag
+  // 维度名称取当前题目第一个答案项上的 tag，用于提交时展示该维度名称
+  
+  // 从当前题目的全部选项中筛出用户已勾选的选项，单选/多选都按 checkedList 统一处理
   let _options = questions.value[currentIndex.value].answer.filter((answer:any) => {
     return checkedList.value.includes(answer.key)
   })
 
+  let _name = _options[0]?.tag || questions.value[currentIndex.value].answer[0].tag
+  
+
   if (answerMap.has(_type)) {
+    // 如果该维度之前已经答过题，就在已有总分上叠加本题已选选项的分值
     let val = answerMap.get(_type)
     val.value += _options.reduce((count, cur) => (count = count + Number(cur.value)), 0)
     answerMap.set(_type, val)
   } else {
+    // 如果是第一次遇到该维度，则初始化该维度的名称和分值
     answerMap.set(_type, {
       name: _name,
       value: _options.reduce((count, cur) => (count = count + Number(cur.value)), 0),

src/chart-sub/evaluate/sixReport/explorePotential.vue

@@ -0,0 +1,302 @@
+<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>

src/chart-sub/evaluate/sixReport/futureDirection.vue

@@ -0,0 +1,302 @@
+<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>

src/chart-sub/evaluate/sixReport/growthPlanning.vue

@@ -0,0 +1,252 @@
+<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>

src/chart-sub/evaluate/sixReport/learningAbility.vue

@@ -0,0 +1,302 @@
+<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>

src/hooks/useRouterDetail.ts

@@ -38,6 +38,14 @@ export const useRouterDetail = (item: { reportsId: string; type: number }) => {
     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 if(item.type === 10){
+    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({
       title: '开发中....',

src/pages-sub/me/evaluation.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useRouterDetail } from '@/pages-sub/me/useRouterDetail'
+import { useRouterDetail } from '@/hooks/useRouterDetail'
 import { deleteBusReport, getMyBusReports } from '@/service'
 import { useUserStore } from '@/store'
 

src/pages-sub/me/useRouterDetail.ts

@@ -1,51 +0,0 @@
-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,
-  })
-}

src/pages/evaluation/index.vue

@@ -1,26 +1,85 @@
 <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;"
       :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]">
+    </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" @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>
 </template>
 
 <script lang="ts" setup>
 import { systemInfo } from '@/utils/systemInfo'
-import EvaluationItem from './components/EvaluationItem.vue'
 import { getEvaluationList } from "@/service/requestApi"
+import { useUserStore } from '@/store/user'
+
+const userStore = useUserStore()
 
 // #ifdef MP-WEIXIN
 definePage({
@@ -46,10 +105,34 @@ 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[], listMetaText:string; reportId:string; reportType:number}[]>([])
 
-onLoad(() => {
+const getAward = computed(() => {
-  getEvaluationList({query:{menuid:'340509778657349'}}).then(resp => {
+  return evaluationList.value.every(item => item.testStatus === 1)
+})
+
+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
     }
@@ -58,11 +141,31 @@ onLoad(() => {
 </script>
 
 <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>