dz-app/pages/ie/entry-ai-form/components/ai-form-cart.vue

<template>
    <uv-popup ref="popup" mode="bottom" round="16">
        <view class="fx-col">
            <view class="fx-row fx-cen-cen h-[44px] px-50 mx-border-b">
                <view class="fx-row fx-bet-cen" @click="modifyCommitName">
                    <view class="fx-1 text-ellipsis" style="max-width: 240px">
                        预览志愿表
                        <template v-if="commit.name">
                            {{ ' - ' }}
                            {{ commit.name }}
                        </template>
                    </view>
                    <uv-icon name="edit-pen-fill" color="primary" class="ml5"/>
                </view>
            </view>
            <scroll-view scroll-y class="bg-bg" style="height: 60vh">
                <view class="p-20 fx-col gap-20">
                    <voluntary-major v-for="item in cart" :data="item" selected-only default-expand/>
                </view>
            </scroll-view>
            <view class="h-[60px] bg-bg px-20 fx-row fx-cen-cen button-combine">
                <view class="rounded-full overflow-hidden flex-1 fx-row mx-border mx-shadow-up">
                    <view class="flex-1">
                        <uv-button type="error" plain text="清空" icon="trash" icon-color="error" @click="handleClear"/>
                    </view>
                    <view class="flex-3">
                        <uv-button :loading="loading" type="primary" :text="saveWithCountText" @click="handleSave"/>
                    </view>
                </view>
            </view>
        </view>
        <mx-popup-template ref="inputDialog" title="志愿表名称" left="" right="确定" @right="dialogInputConfirm">
            <uv-input v-model="commit.name" placeholder="请输入志愿表名称(选填)"/>
        </mx-popup-template>
    </uv-popup>
</template>

<script>
import voluntaryMajor from '../../components/card/voluntary-major.vue';
import InjectAIDataMixin from "@/pages/ie/entry-ai-form/components/InjectAIDataMixin";
import {confirmAsync} from "@/utils/uni-helper";

export default {
    name: "ai-form-cart",
    components: {voluntaryMajor},
    mixins: [InjectAIDataMixin],
    data() {
        return {
            loading: false,
            committing: false,
            nameConfirmed: false
        }
    },
    computed: {
        saveWithCountText() {
            const suffix = this.cart.length ? ' (' + this.cart.length + ')' : ''
            return '保存' + suffix
        }
    },
    methods: {
        async handleClear() {
            if (this.committing || this.loading) return
            if (this.cart.length) {
                await confirmAsync('确认清空全部志愿表？！')
                this.handleCartClear()
            }
        },
        modifyCommitName() {
            this.$refs.inputDialog.open();
        },
        handleSave() {
            if (!this.commit.name && !this.nameConfirmed) {
                this.committing = true
                this.modifyCommitName()
                return
            }
            this._saveCore()
        },
        dialogInputConfirm() {
            this.close()
            this.nameConfirmed = true
            if (this.committing) this._saveCore()
        },
        async _saveCore() {
            this.loading = true
            try {
                await this.handleCommit()
            } finally {
                this.committing = false
                this.loading = false
            }
        },
        open() {
            this.$refs.popup.open()
        },
        close() {
            if (!this.loading) {
                this.$refs.popup.close()
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.button-combine {
    ::v-deep .uv-button--square {
        border: 0;
        border-radius: 0;
    }
}
</style>