dz-app/pages/ie/entry-ai-report/components/improve-popup-content.vue

<template>
    <view class="improve-popup-content w-screen fx-col rounded-t-lg">
        <view class="fx-row fx-cen-cen h-[50px] improve-title">
            <view class="text-white pb-15 pl-15">提升录取概率方法</view>
        </view>
        <view class="fx-col fx-cen-cen pt-10 pb-20 text-primary-light">
            <text>{{ data.majorName }}</text>
            <text class="text-2xs">{{ data.majorDirection }}</text>
        </view>
        <view class="mx-20 rounded-t-lg bg-white fx-col p-20">
            <view class="fx-row fx-bet-cen gap-30 pt-10">
                <view v-for="(rule,idx) in displayImproves" :key="idx"
                      class="flex-1 fx-row fx-bet-cen mx-border rounded p-20"
                      :style="{opacity: rule.missingValue == 0 ? 0.7: 1}">
                    <view class="flex-1 pr-20">
                        <view class="text-2xs text-tips">
                            您的{{ rule.improveType }}还需提升
                        </view>
                        <view class="text-2xl text-main font-bold">
                            {{ rule.missingValue == 0 ? '-' : rule.missingValue }}
                            <text class="ml-10 text-sm font-light text-content">分</text>
                        </view>
                    </view>
                    <uv-image :src="ruleIcons[idx%ruleIcons.length]" width="35" height="40"/>
                </view>
            </view>
            <uv-cell-group title="方法提示" class="mt-20">
                <uv-cell v-for="item in doList" :key="item.title" :icon="item.icon" :title="item.title"
                         :label="item.label"
                         icon-style="width:44px; height:44px; margin-right:12px">
                    <view slot="value">
                        <uv-button v-bind="miniBtnBinding" size="mini" :text="item.btnText"/>
                    </view>
                </uv-cell>
            </uv-cell-group>
        </view>
    </view>
</template>

<script>
import AIFormCommonStyle from "@/pages/ie/components/AIFormCommonStyle";

export default {
    name: "improve-popup-content",
    mixins: [AIFormCommonStyle],
    props: {
        data: {
            type: Object,
            default: null
        }
    },
    data() {
        return {
            ruleIcons: ['/static/ie/report/improve-rule-base.png', '/static/ie/report/improve-rule-skill.png'],
            doList: [{
                icon: '/static/ie/report/improve-do-exercise.png',
                title: '刷题训练提分',
                label: '针对性练习',
                btnText: '立即练习'
            }, {
                icon: '/static/ie/report/improve-do-buy.png',
                title: '购买资料',
                label: '考点归纳，答题技巧',
                btnText: '立即购买'
            }, {
                icon: '/static/ie/report/improve-do-training.png',
                title: '进行培训',
                label: '一对一个性化培训',
                btnText: '立即培训'
            }]
        }
    },
    computed: {
        miniBtnBinding() {
            return {
                ...this.gradientBtnBinding,
                customStyle: {height: '30px', padding: '0 12px'}
            }
        },
        displayImproves() {
            // TODO: improve filter
            return this.data.improves || []
        }
    }
}
</script>

<style scoped lang="scss">
.improve-popup-content {
    background: linear-gradient(0, #ADD9FF, #E6F8FF);
}

.improve-title {
    background-image: url("~@/static/ie/report/improve-title-bg.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
}
</style>