dz-app/pages/ie/entry-ai-report/components/analysis-summary.vue

<template>
    <view class="px-40 pb-40">
        <view class="bg-title bg-white p-40">
            <image class="" src="/static/ie/entry/bg-ai-tab3.png" mode="heightFix"/>
        </view>
        <view class="fx-col gap-40">
            <view class="rounded-lg p-10" v-for="(u,i) in improveColleges" :key="i">
                <view class="pl-10 pt-10 pb-20 fx-row fx-sta-cen text-primary-deep">
                    <uv-image width="18" height="auto" mode="widthFix" src="/static/ie/entry/college.png"/>
                    <text class="ml-15">{{ u.university && u.university.name }}</text>
                </view>
                <view class="bg-white mt-20">
                    <uv-cell-group :border="false">
                        <uv-cell v-for="(m,idx) in u.majorDetails.filter(m => m.improves&&m.improves.length)" :key="idx"
                                 :border="false" isLink @click="showImprove(m)">
                            <template #title>
                                <view class="fx-row ai-cen">
                                    <text class="mr-20 text-xl font-bold italic">
                                        {{ (Array(2).join('0') + (idx + 1)).slice(-2) }}
                                    </text>
                                    <view class="fx-col">
                                        <text>{{ m.majorName }}</text>
                                        <text v-if="m.majorDirection" class="text-primary-light text-2xs">
                                            ({{ m.majorDirection }})
                                        </text>
                                    </view>
                                </view>
                            </template>
                            <template #value>
                                <text class="text-primary-deep pl-10">点击提升</text>
                            </template>
                            <template #right-icon>
                                <uv-icon slot="right-icon" color="#695EEC" name="arrow-right"/>
                            </template>
                        </uv-cell>
                    </uv-cell-group>
                </view>
            </view>
        </view>
        <uv-popup ref="popup" mode="bottom" round="16">
            <improve-popup-content :data="improveData"/>
        </uv-popup>
    </view>
</template>
<script>
import {useInjectTransfer} from "@/hooks/useTransfer";
import ImprovePopupContent from "@/pages/ie/entry-ai-report/components/improve-popup-content.vue";

export default {
    name: 'analysis-summary',
    components: {ImprovePopupContent},
    data() {
        return {
            improveData: null
        }
    },
    setup() {
        const {prevData} = useInjectTransfer()

        return {
            prevData
        }
    },
    computed: {
        improveColleges() {
            return this.prevData.details?.filter(u => u.majorDetails?.some(m => m.improves?.length)) || []
        }
    },
    methods: {
        showImprove(m) {
            this.improveData = m
            this.$refs.popup.open()
        }
    }
};
</script>
<style lang="scss" scoped>
.bg-title {
    position: sticky;
    top: 44px;
    z-index: 1;
    text-align: center;

    image {
        height: 36rpx;
    }
}

.uv-cell {
    background-color: #E9ECFF;
    border-radius: 20px;

    & + .uv-cell {
        margin-top: 12px;
    }
}
</style>