gypsy-crm-frontend-vu/pages/activities/components/ActivityDialogs.vue

<template>
    <view>
        <!-- 盈利转换弹窗 -->
        <uni-popup ref="dialogChinaUnionPayPopup" type="center" :mask-click="false">
            <view class="popup-content">
                <view class="popup-header">
                    <text class="popup-title">{{ t('common.tip') }}</text>
                    <uni-icons type="closeempty" size="20" color="#999"
                        @click="closeDialog('dialogChinaUnionPay')"></uni-icons>
                </view>
                <view class="popup-body">
                    <text class="message-text">{{ t('news_add_field1.activities.item11') }}</text>
                </view>
                <view class="popup-footer">
                    <button hover-class="" class="btn-cancel" @click="closeDialog('dialogChinaUnionPay')">{{
                        t('Btn.Cancel')
                        }}</button>
                    <button hover-class="" class="btn-confirm" type="primary"
                        @click="handleConfirm('toTransformActive')">{{
                            t('Btn.Confirm') }}</button>
                </view>
            </view>
        </uni-popup>

        <!-- 盈利变现弹窗 -->
        <uni-popup ref="dialogChinaUnionPay1Popup" type="center" :mask-click="false">
            <view class="popup-content">
                <view class="popup-header">
                    <text class="popup-title">{{ t('common.tip') }}</text>
                    <uni-icons type="closeempty" size="20" color="#999"
                        @click="closeDialog('dialogChinaUnionPay1')"></uni-icons>
                </view>
                <view class="popup-body">
                    <text class="message-text">{{ t('news_add_field1.activities.item12') }}</text>
                </view>
                <view class="popup-footer">
                    <button hover-class="" class="btn-cancel" @click="closeDialog('dialogChinaUnionPay1')">{{
                        t('Btn.Cancel')
                        }}</button>
                    <button hover-class="" class="btn-confirm" type="primary"
                        @click="handleConfirm('toRealizationActive')">{{
                            t('Btn.Confirm') }}</button>
                </view>
            </view>
        </uni-popup>

        <!-- 活动过期弹窗 -->
        <uni-popup ref="dialogChinaUnionPayJXPopup" type="center" :mask-click="false">
            <view class="popup-content">
                <view class="popup-header">
                    <text class="popup-title">{{ t('common.tip') }}</text>
                    <uni-icons type="closeempty" size="20" color="#999"
                        @click="closeDialog('dialogChinaUnionPayJX')"></uni-icons>
                </view>
                <view class="popup-body">
                    <text class="message-text">{{ t('news_add_field1.activitiesJX.item24') }}</text>
                </view>
                <view class="popup-footer">
                    <button hover-class="" class="btn-cancel" @click="closeDialog('dialogChinaUnionPayJX')">{{
                        t('Btn.Cancel')
                        }}</button>
                    <button hover-class="" class="btn-confirm" type="primary"
                        @click="closeDialog('dialogChinaUnionPayJX')">{{
                            t('Btn.Confirm') }}</button>
                </view>
            </view>
        </uni-popup>

        <!-- 23迎新活动申请弹窗 -->
        <uni-popup ref="dialogDealResultPopup" type="center" :mask-click="false">
            <view class="popup-content" style="width: 650rpx;">
                <view class="popup-header">
                    <text class="popup-title">{{ t('Custom.Activity.Apply') }}</text>
                    <uni-icons type="closeempty" size="20" color="#999"
                        @click="closeDialog('dialogDealResult')"></uni-icons>
                </view>
                <scroll-view class="popup-body" scroll-y style="max-height: 600rpx;">
                    <view class="form-item">
                        <text class="form-label">{{ t('Label.TradingAccount') }}</text>
                        <picker mode="selector" :range="loginOptions" range-key="login"
                            @change="onLoginChange('dialogDealResult', $event)">
                            <view class="picker-value">{{ selectedLogin?.login || t('placeholder.choose') }}</view>
                        </picker>
                    </view>
                </scroll-view>
                <view class="popup-footer">
                    <button hover-class="" class="btn-cancel" @click="closeDialog('dialogDealResult')">{{
                        t('Btn.Cancel') }}</button>
                    <button hover-class="" class="btn-confirm" type="primary" @click="handleConfirm('toApply23')">{{
                        t('Btn.Confirm')
                        }}</button>
                </view>
            </view>
        </uni-popup>

        <!-- 23匠鑫活动申请弹窗 -->
        <uni-popup ref="dialogDealResultJxPopup" type="center" :mask-click="false">
            <view class="popup-content" style="width: 650rpx;">
                <view class="popup-header">
                    <text class="popup-title">{{ t('Custom.Activity.Apply') }}</text>
                    <uni-icons type="closeempty" size="20" color="#999"
                        @click="closeDialog('dialogDealResultJx')"></uni-icons>
                </view>
                <scroll-view class="popup-body" scroll-y style="max-height: 600rpx;">
                    <view class="form-item">
                        <text class="form-label">{{ t('Label.TradingAccount') }}</text>
                        <picker mode="selector" :range="loginOptions" range-key="login"
                            @change="onLoginChange('dialogDealResultJx', $event)">
                            <view class="picker-value">{{ selectedJxLogin?.login || t('placeholder.choose') }}</view>
                        </picker>
                    </view>
                </scroll-view>
                <view class="popup-footer">
                    <button hover-class="" class="btn-cancel" @click="closeDialog('dialogDealResultJx')">{{
                        t('Btn.Cancel') }}</button>
                    <button hover-class="" class="btn-confirm" type="primary" @click="handleConfirm('toApply23Jx')">{{
                        t('Btn.Confirm')
                        }}</button>
                </view>
            </view>
        </uni-popup>

        <!-- 23匠鑫VIP活动申请弹窗 -->
        <uni-popup ref="dialogDealResultJxVipPopup" type="center" :mask-click="false">
            <view class="popup-content" style="width: 650rpx;">
                <view class="popup-header">
                    <text class="popup-title">{{ t('Custom.Activity.Apply') }}</text>
                    <uni-icons type="closeempty" size="20" color="#999"
                        @click="closeDialog('dialogDealResultJxVip')"></uni-icons>
                </view>
                <scroll-view class="popup-body" scroll-y style="max-height: 600rpx;">
                    <view class="form-item">
                        <text class="form-label">{{ t('Label.TradingAccount') }}</text>
                        <picker mode="selector" :range="loginOptions" range-key="login"
                            @change="onLoginChange('dialogDealResultJxVip', $event)">
                            <view class="picker-value">{{ selectedJxVipLogin?.login || t('placeholder.choose') }}</view>
                        </picker>
                    </view>
                </scroll-view>
                <view class="popup-footer">
                    <button hover-class="" class="btn-cancel" @click="closeDialog('dialogDealResultJxVip')">{{
                        t('Btn.Cancel')
                        }}</button>
                    <button hover-class="" class="btn-confirm" type="primary"
                        @click="handleConfirm('toApply23JxVip')">{{
                            t('Btn.Confirm') }}</button>
                </view>
            </view>
        </uni-popup>

        <!-- 交易大赛申请弹窗 -->
        <uni-popup ref="dialogDealResultCptPopup" type="center" :mask-click="false">
            <view class="popup-content" style="width: 650rpx;">
                <view class="popup-header">
                    <text class="popup-title">{{ t('Custom.Activity.Apply') }}</text>
                    <uni-icons type="closeempty" size="20" color="#999"
                        @click="closeDialog('dialogDealResultCpt')"></uni-icons>
                </view>
                <scroll-view class="popup-body" scroll-y style="max-height: 800rpx;">
                    <view class="form-item">
                        <text class="form-label">{{ t('Label.TradingAccount') }}</text>
                        <picker mode="selector" :range="loginOptions" range-key="login"
                            @change="onLoginChange('dialogDealResultCpt', $event)">
                            <view class="picker-value">{{ selectedCptLogin?.login || t('placeholder.choose') }}</view>
                        </picker>
                    </view>
                    <view class="form-item">
                        <text class="form-label">{{ t('Documentary.console.item20') }}</text>
                        <input class="form-input" v-model="formData.dialogDealResultCpt_form.nickname"
                            :placeholder="t('placeholder.input')" />
                    </view>
                    <view class="form-item">
                        <text class="form-label">{{ t('news_add_field1.activitiesJYDS.item4_3') }}</text>
                        <input class="form-input" v-model="formData.dialogDealResultCpt_form.recipient"
                            :placeholder="t('placeholder.input')" />
                    </view>
                    <view class="form-item">
                        <text class="form-label">{{ t('news_add_field1.activitiesJYDS.item4_2') }}</text>
                        <input class="form-input" v-model="formData.dialogDealResultCpt_form.mobile"
                            :placeholder="t('placeholder.input')" />
                    </view>
                    <view class="form-item">
                        <text class="form-label">{{ t('Shop.Address.DetailedAddress') }}</text>
                        <input class="form-input" v-model="formData.dialogDealResultCpt_form.address"
                            :placeholder="t('placeholder.input')" />
                    </view>
                    <view class="form-tip">{{ t('news_add_field1.activitiesJYDS.item4_4') }}</view>
                </scroll-view>
                <view class="popup-footer">
                    <button hover-class="" class="btn-cancel" @click="closeDialog('dialogDealResultCpt')">{{
                        t('Btn.Cancel')
                        }}</button>
                    <button hover-class="" class="btn-confirm" type="primary" @click="handleConfirm('toApplyCpt')">{{
                        t('Btn.Confirm')
                        }}</button>
                </view>
            </view>
        </uni-popup>

        <!-- 24精英杯申请弹窗 -->
        <uni-popup ref="dialogDealResultJxJYBPopup" type="center" :mask-click="false">
            <view class="popup-content" style="width: 650rpx;">
                <view class="popup-header">
                    <text class="popup-title">{{ t('Custom.Activity.Apply') }}</text>
                    <uni-icons type="closeempty" size="20" color="#999"
                        @click="closeDialog('dialogDealResultJxJYB')"></uni-icons>
                </view>
                <scroll-view class="popup-body" scroll-y style="max-height: 600rpx;">
                    <view class="form-item">
                        <text class="form-label">{{ t('Label.TradingAccount') }}</text>
                        <picker mode="selector" :range="loginOptions" range-key="login"
                            @change="onLoginChange('dialogDealResultJxJYB', $event)">
                            <view class="picker-value">{{ selectedJYBLogin?.login || t('placeholder.choose') }}</view>
                        </picker>
                    </view>
                </scroll-view>
                <view class="popup-footer">
                    <button hover-class="" class="btn-cancel" @click="closeDialog('dialogDealResultJxJYB')">{{
                        t('Btn.Cancel')
                        }}</button>
                    <button hover-class="" class="btn-confirm" type="primary"
                        @click="handleConfirm('toApply24JYBVip')">{{
                            t('Btn.Confirm') }}</button>
                </view>
            </view>
        </uni-popup>

        <!-- 无忧交易申请弹窗 -->
        <uni-popup ref="dialogDealResultNoWorriesPopup" type="center" :mask-click="false">
            <view class="popup-content" style="width: 650rpx;">
                <view class="popup-header">
                    <text class="popup-title">{{ t('Custom.Activity.Apply') }}</text>
                    <uni-icons type="closeempty" size="20" color="#999"
                        @click="closeDialog('dialogDealResultNoWorries')"></uni-icons>
                </view>
                <scroll-view class="popup-body" scroll-y style="max-height: 600rpx;">
                    <view class="form-item">
                        <text class="form-label">{{ t('Label.TradingAccount') }}</text>
                        <picker mode="selector" :range="loginOptions" range-key="login"
                            @change="onLoginChange('dialogDealResultNoWorries', $event)">
                            <view class="picker-value">{{ selectedNoWorriesLogin?.login || t('placeholder.choose') }}
                            </view>
                        </picker>
                    </view>
                </scroll-view>
                <view class="popup-footer">
                    <button hover-class="" class="btn-cancel" @click="closeDialog('dialogDealResultNoWorries')">{{
                        t('Btn.Cancel')
                        }}</button>
                    <button hover-class="" class="btn-confirm" type="primary"
                        @click="handleConfirm('toApplyNoWorries')">{{
                            t('news_add_field1.activitiesNoWorries.item6_1') }}</button>
                </view>
            </view>
        </uni-popup>

        <!-- 无忧交易变现弹窗 -->
        <uni-popup ref="dialogNoWorriesPopup" type="center" :mask-click="false">
            <view class="popup-content">
                <view class="popup-header">
                    <text class="popup-title">{{ t('common.tip') }}</text>
                    <uni-icons type="closeempty" size="20" color="#999"
                        @click="closeDialog('dialogNoWorries')"></uni-icons>
                </view>
                <view class="popup-body">
                    <text class="message-text">{{ t('news_add_field1.activitiesNoWorries.item7') }}</text>
                </view>
                <view class="popup-footer">
                    <button hover-class="" class="btn-cancel" @click="closeDialog('dialogNoWorries')">{{ t('Btn.Cancel')
                        }}</button>
                    <button hover-class="" class="btn-confirm" type="primary"
                        @click="handleConfirm('realizationNoWorries')">{{
                            t('Btn.Confirm') }}</button>
                </view>
            </view>
        </uni-popup>

        <!-- 无忧交易申请成功弹窗 -->
        <uni-popup ref="dialogNoWorriesApplyPopup" type="center" :mask-click="false">
            <view class="popup-content">
                <view class="popup-header">
                    <text class="popup-title">{{ t('common.success') }}</text>
                    <uni-icons type="closeempty" size="20" color="#999"
                        @click="closeDialog('dialogNoWorriesApply')"></uni-icons>
                </view>
                <view class="popup-body">
                    <text class="message-text">{{ t('news_add_field1.activitiesNoWorries.item6') }}</text>
                </view>
                <view class="popup-footer">
                    <button hover-class="" class="btn-confirm" type="primary"
                        @click="closeDialog('dialogNoWorriesApply')">{{
                            t('Btn.Confirm') }}</button>
                </view>
            </view>
        </uni-popup>

        <!-- 新任务提示弹窗 -->
        <uni-popup ref="dialogNewTaskPopup" type="center" :mask-click="false">
            <view class="popup-content" style="width: 650rpx;">
                <view class="popup-header">
                    <text class="popup-title">{{ t('wallet.item16') }}</text>
                    <uni-icons type="closeempty" size="20" color="#999"
                        @click="closeDialog('dialogNewTask')"></uni-icons>
                </view>
                <view class="popup-body">
                    <view class="task-info">
                        <text>{{ t('wallet.item17') }}{{ newTaskList?.endTime }}</text>
                        <text>{{ t('wallet.item18') }}{{ newTaskList?.tradeVolume }}</text>
                        <text>{{ t('wallet.item19') }}{{ newTaskList?.raffleNumber }}</text>
                        <text>{{ t('wallet.item20') }}</text>
                    </view>
                </view>
                <view class="popup-footer">
                    <button hover-class="" class="btn-cancel" @click="closeDialog('dialogNewTask')">{{
                        t('Home.msg.item3') }}</button>
                    <button hover-class="" class="btn-confirm" type="primary" @click="closeDialog('dialogNewTask')">{{
                        t('Btn.Confirm')
                        }}</button>
                </view>
            </view>
        </uni-popup>

        <!-- 抽奖弹窗 -->
        <uni-popup ref="dialogNewTaskDrawPopup" type="center" :mask-click="false">
            <view class="popup-content" style="width: 700rpx;">
                <view class="popup-header">
                    <text class="popup-title">{{ t('wallet.item65') }}</text>
                    <uni-icons type="closeempty" size="20" color="#999"
                        @click="closeDialog('dialogNewTaskDraw')"></uni-icons>
                </view>
                <view class="popup-body">
                    <DrawLotteryRaffle :curLuckyDrawTimesF="luckyDrawsNumber" @draw-complete="handleDrawComplete" />
                </view>
                <view class="popup-footer">
                    <button hover-class="" class="btn-cancel" @click="closeDialog('dialogNewTaskDraw')">{{
                        t('Home.msg.item3')
                        }}</button>
                </view>
            </view>
        </uni-popup>

        <!-- Surplus活动弹窗 -->
        <uni-popup ref="dialogSurplusActivityPopup" type="center" :mask-click="false">
            <view class="popup-content" style="width: 650rpx;">
                <view class="popup-header">
                    <text class="popup-title">{{ t('surplusList.item1') }}</text>
                    <uni-icons type="closeempty" size="20" color="#999"
                        @click="closeDialog('dialogSurplusActivity')"></uni-icons>
                </view>
                <scroll-view class="popup-body" scroll-y style="max-height: 800rpx;">
                    <view class="form-item">
                        <text class="form-label">{{ t('Custom.Deposit.Title1') }}:</text>
                        <picker mode="selector" :range="loginOptions1" range-key="login" @change="onAccountChange">
                            <view class="picker-value">{{ selectedAccount?.login || t('placeholder.choose') }}</view>
                        </picker>
                    </view>
                    <view v-if="selectedAccount" class="form-item">
                        <text class="form-label">{{ t('surplusList.item3') }}:</text>
                        <picker mode="selector" :range="surplusOptions.options" range-key="label"
                            @change="onSurplusChange">
                            <view class="picker-value">{{ selectedSurplusLabel || t('placeholder.choose') }}</view>
                        </picker>
                    </view>
                </scroll-view>
                <view class="popup-footer">
                    <button hover-class="" class="btn-cancel" @click="closeDialog('dialogSurplusActivity')">{{
                        t('Btn.Cancel')
                        }}</button>
                    <button hover-class="" class="btn-confirm" type="primary"
                        @click="handleConfirm('confirmSurplusActivity')"
                        :disabled="!selectedAccount || !selectedSurplusValue">{{ t('Btn.Confirm') }}</button>
                </view>
            </view>
        </uni-popup>

        <!-- 月赏礼遇弹窗 -->
        <uni-popup ref="dialogSurplusActivity1Popup" type="center" :mask-click="false">
            <view class="popup-content" style="width: 650rpx;">
                <view class="popup-header">
                    <text class="popup-title">{{ t('MonthlyActivities.item1') }}</text>
                    <uni-icons type="closeempty" size="20" color="#999"
                        @click="closeDialog('dialogSurplusActivity1')"></uni-icons>
                </view>
                <view class="popup-body">
                    <text class="message-text" style="font-size: 32rpx; font-weight: bold;">{{
                        t('MonthlyActivities.item8') }}</text>
                </view>
                <view class="popup-footer">
                    <button hover-class="" class="btn-cancel" @click="closeDialog('dialogSurplusActivity1')">{{
                        t('Btn.Cancel')
                        }}</button>
                    <button hover-class="" class="btn-confirm" type="primary"
                        @click="handleConfirm('confirmSurplusActivity1')">{{
                            t('Btn.Confirm') }}</button>
                </view>
            </view>
        </uni-popup>

        <!-- 收益模拟器弹窗 -->
        <uni-popup ref="openCalculatorFlagPopup" type="center" :mask-click="false">
            <view class="popup-content" style="width: 650rpx;">
                <view class="popup-header">
                    <text class="popup-title">{{ t('news_add_field1.NewYear24.item4') }}</text>
                    <uni-icons type="closeempty" size="20" color="#999"
                        @click="closeDialog('openCalculatorFlag')"></uni-icons>
                </view>
                <view class="popup-body">
                    <view class="calculator-item">
                        <text class="calculator-label">{{ t('news_add_field1.NewYear24.item5') }}</text>
                        <input class="calculator-input" type="digit" v-model="balanceInput"
                            :placeholder="t('placeholder.input')" />
                    </view>
                    <view class="calculator-result">
                        <text>{{ t('news_add_field1.NewYear24.item6') }}</text>
                        <text class="red">${{ balanceResult }}</text>
                        <text>{{ t('news_add_field1.NewYear24.item7') }}</text>
                        <text class="red">${{ incomeResult }}</text>
                        <text>{{ t('news_add_field1.NewYear24.item8') }}</text>
                    </view>
                </view>
                <view class="popup-footer">
                    <button hover-class="" class="btn-cancel" @click="closeDialog('openCalculatorFlag')">{{
                        t('news_add_field1.NewYear24.item8_2') }}</button>
                    <button hover-class="" class="btn-confirm" type="primary"
                        @click="handleConfirm('calculateIncome')">{{
                            t('news_add_field1.NewYear24.item8_1') }}</button>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import DrawLotteryRaffle from './DrawLotteryRaffle.vue'

const { t } = useI18n()

const props = defineProps<{
    visible: Record<string, any>
    formData: any
    loginOptions: any[]
    loginOptions1?: any[]
    surplusOptions: {
        options: any[]
        loading: boolean
    }
    newTaskList?: any
    luckyDrawsNumber?: string
}>()

const emit = defineEmits(['update:visible', 'action'])

// 弹窗引用
const popupRefs: Record<string, any> = {}

// 选中的登录账号
const selectedLogin = computed(() => {
    const login = props.formData.dialogDealResult_form?.login
    return props.loginOptions.find(item => item.login === login)
})

const selectedJxLogin = computed(() => {
    const login = props.formData.dialogDealResultJx_form?.login
    return props.loginOptions.find(item => item.login === login)
})

const selectedJxVipLogin = computed(() => {
    const login = props.formData.dialogDealResultJx_formVip?.login
    return props.loginOptions.find(item => item.login === login)
})

const selectedCptLogin = computed(() => {
    const login = props.formData.dialogDealResultCpt_form?.login
    return props.loginOptions.find(item => item.login === login)
})

const selectedJYBLogin = computed(() => {
    const login = props.formData.dialogDealResultJx_formJYB?.login
    return props.loginOptions.find(item => item.login === login)
})

const selectedNoWorriesLogin = computed(() => {
    const login = props.formData.dialogDeal_formNoWorries?.login
    return props.loginOptions.find(item => item.login === login)
})

// 选中的账户
const selectedAccount = computed(() => props.formData.selectedAccount)
const selectedSurplusValue = computed(() => props.formData.selectedSurplusActivity)
const selectedSurplusLabel = computed(() => {
    const option = props.surplusOptions.options.find(item => item.value === selectedSurplusValue.value)
    return option?.label || ''
})

// 收益模拟器
const balanceInput = ref('')
const balanceResult = ref(0)
const incomeResult = ref(0)

// 监听弹窗可见性
watch(() => props.visible, (newVal) => {
    Object.entries(newVal).forEach(([key, value]) => {
        const popup = popupRefs[key + 'Popup']
        if (popup) {
            if (value) {
                popup.open()
            } else {
                popup.close()
            }
        }
    })
}, { deep: true })

// 关闭弹窗
const closeDialog = (key: string) => {
    emit('update:visible', key, false)
}

// 登录账号选择
const onLoginChange = (type: string, e: any) => {
    const index = e.detail.value
    const login = props.loginOptions[index]?.login

    switch (type) {
        case 'dialogDealResult':
            props.formData.dialogDealResult_form.login = login
            break
        case 'dialogDealResultJx':
            props.formData.dialogDealResultJx_form.login = login
            break
        case 'dialogDealResultJxVip':
            props.formData.dialogDealResultJx_formVip.login = login
            break
        case 'dialogDealResultCpt':
            props.formData.dialogDealResultCpt_form.login = login
            break
        case 'dialogDealResultJxJYB':
            props.formData.dialogDealResultJx_formJYB.login = login
            break
        case 'dialogDealResultNoWorries':
            props.formData.dialogDeal_formNoWorries.login = login
            break
    }
}

// 账户选择
const onAccountChange = (e: any) => {
    const index = e.detail.value
    const account = props.loginOptions1?.[index]
    emit('action', 'accountChange', account)
}

// Surplus选项选择
const onSurplusChange = (e: any) => {
    const index = e.detail.value
    const option = props.surplusOptions.options[index]
    emit('action', 'surplusChange', option)
}

// 确认操作
const handleConfirm = (action: string) => {
    emit('action', action)
}

// 抽奖完成
const handleDrawComplete = (result: any) => {
    emit('action', 'drawComplete', result)
}

// 设置弹窗引用
const setPopupRef = (el: any, key: string) => {
    if (el) {
        popupRefs[key] = el
    }
}
</script>

<style scoped lang="scss">
.popup-content {
    width: 580rpx;
    background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
    border-radius: 16rpx;
    overflow: hidden;

    .popup-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30rpx;
        border-bottom: 1rpx solid #e5e5e5;

        .popup-title {
            font-size: 32rpx;
            font-weight: bold;
            color: var(--bs-heading-color);
        }
    }

    .popup-body {
        padding: 30rpx;

        .message-text {
            display: block;
            font-size: 28rpx;
            line-height: 1.6;
            color: var(--bs-heading-color);
            text-align: center;
        }

        .form-item {
            margin-bottom: 30rpx;

            .form-label {
                display: block;
                margin-bottom: 16rpx;
                font-size: 28rpx;
                color: var(--bs-heading-color);
            }

            .form-input {
                padding: 20rpx;
                border: 1rpx solid #e5e5e5;
                border-radius: 8rpx;
                font-size: 28rpx;
                width: 100%;
                box-sizing: border-box;
            }

            .picker-value {
                padding: 20rpx;
                border: 1rpx solid #e5e5e5;
                border-radius: 8rpx;
                font-size: 28rpx;
                color: var(--bs-heading-color);
            }
        }

        .form-tip {
            font-size: 24rpx;
            color: var(--bs-heading-color);
            margin-top: 10rpx;
        }

        .task-info {
            display: flex;
            flex-direction: column;
            gap: 20rpx;
            font-size: 28rpx;
            line-height: 1.6;
            color: var(--bs-heading-color);
        }

        .calculator-item {
            margin-bottom: 30rpx;

            .calculator-label {
                display: block;
                margin-bottom: 16rpx;
                font-size: 28rpx;
                color: var(--bs-heading-color);
            }

            .calculator-input {
                padding: 20rpx;
                border: 1rpx solid #e5e5e5;
                border-radius: 8rpx;
                font-size: 28rpx;
                width: 100%;
                box-sizing: border-box;
            }
        }

        .calculator-result {
            font-size: 28rpx;
            line-height: 1.8;
            color: var(--bs-heading-color);

            .red {
                color: #ff4d4f;
                font-weight: bold;
            }
        }
    }

    .popup-footer {
        display: flex;
        padding: 30rpx;
        border-top: 1rpx solid #e5e5e5;

        button {
            flex: 1;
            margin: 0 10rpx;
            height: 80rpx;
            line-height: 80rpx;
            font-size: 28rpx;
            border-radius: 8rpx;

            &.btn-cancel {
                background-color: #f5f5f5;
                color: var(--bs-heading-color);
            }

            &.btn-confirm {
                background-color: #cf1322;
                color: var(--bs-emphasis-color);

                &:disabled {
                    opacity: 0.5;
                }
            }
        }
    }
}
</style>