dz-app/pages/test-center/mbti/components/results/recommend-major.vue

<template>
    <view class="item">
        <view class="tit"
              style="background: linear-gradient(155deg, #ACF6E0 0%, #FFFFFF 100%);margin-bottom: 34rpx;">为您推荐以下专业
        </view>
        <uv-scroll-list indicator-active-color="#43AEAB">
            <recommend-major-group v-for="g in list" :key="g.category" :group="g"/>
        </uv-scroll-list>
    </view>
</template>

<script>
import {watch, ref} from 'vue'
import RecommendMajorGroup from "./recommend-major-group.vue";
import {useCacheStore} from "@/hooks/useCacheStore";
import {mbtiRecommendMajors} from "@/api/webApi/career-course";

export default {
    name: "recommend-major",
    components: {RecommendMajorGroup},
    props: {
        code: {
            type: String,
            default: ''
        }
    },
    setup(props) {
        const {dispatchCache} = useCacheStore()
        const list = ref([])
        watch(() => props.code, async (code) => {
            if (!code) return
            const payload = {code}
            const res = await dispatchCache(mbtiRecommendMajors, payload)
            list.value = res.data
        }, {immediate: true})

        return {list}
    }
}
</script>

<style lang="scss" scoped>
@import "mbti-report-style.css";
</style>