pet-system-merchant-web/template/views/orderList/components/RewardDialog.vue

<template>
    <el-dialog v-model="dialogVisible" title="奖惩操作" width="500px">
        <div v-if="order" style="padding: 0 10px;">
            <div style="margin-bottom: 20px; font-size: 14px; color: #606266; line-height: 1.6; background: #fdf6ec; padding: 10px; border-radius: 4px;">
                 <div>奖惩履约者：<span style="font-weight: bold; color: #303133;">{{ order.fulfillerName || '未指派' }}</span></div>
                 <div style="font-size: 13px; margin-top: 4px;">订单号：{{ order.orderNo }}</div> 
                 <div style="font-size: 13px; margin-top: 4px; display:flex; align-items:center; gap:6px;">
                     服务类型：
                     <el-tag :type="getTypeTag(order.type)" size="small">{{ getTypeName(order.type) }}</el-tag>
                     <el-tag v-if="order.type === 'transport' && order.transportType === 'round'" size="small" effect="plain" type="warning">往返</el-tag>
                     <el-tag v-if="order.splitType === 'pick'" size="small" effect="dark" color="#409eff" style="border:none; color:white;">接</el-tag>
                     <el-tag v-if="order.splitType === 'drop'" size="small" effect="dark" color="#67c23a" style="border:none; color:white;">送</el-tag>
                     <el-tag v-if="order.type === 'transport' && order.transportType === 'pick' && !order.splitType" size="small" effect="plain">单程接</el-tag>
                     <el-tag v-if="order.type === 'transport' && order.transportType === 'drop' && !order.splitType" size="small" effect="plain" type="success">单程送</el-tag>
                 </div>
            </div>
            
            <el-form :model="rewardForm" label-width="80px">
                <el-form-item label="操作类型">
                    <el-radio-group v-model="rewardForm.type">
                        <el-radio label="reward">奖励 (增加)</el-radio>
                        <el-radio label="punish">惩罚 (扣除)</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="调整项目">
                    <el-radio-group v-model="rewardForm.item">
                        <el-radio label="points">积分</el-radio>
                        <el-radio label="amount">金额 (元)</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="数额" required>
                    <el-input-number v-model="rewardForm.value" :min="1" :step="10" />
                </el-form-item>
                <el-form-item label="原因备注" required>
                    <el-input 
                        v-model="rewardForm.reason" 
                        type="textarea" 
                        :rows="3" 
                        placeholder="请输入奖惩原因..." 
                    />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="handleSubmit">确认执行</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { reactive, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
    visible: Boolean,
    order: Object
})
const emit = defineEmits(['update:visible', 'submit'])

const dialogVisible = computed({
    get: () => props.visible,
    set: (val) => emit('update:visible', val)
})

const rewardForm = reactive({
    type: 'reward',
    item: 'points',
    value: 10,
    reason: ''
})

watch(() => props.visible, (val) => {
    if (val) {
        rewardForm.type = 'reward'
        rewardForm.item = 'points'
        rewardForm.value = 10
        rewardForm.reason = ''
    }
})

const getTypeTag = (type) => {
    const map = { transport: '', feeding: 'warning', washing: 'success' }
    return map[type]
}
const getTypeName = (type) => {
    const map = { transport: '宠物接送', feeding: '上门喂遛', washing: '上门洗护' }
    return map[type]
}

const handleSubmit = () => {
    if(!rewardForm.reason) {
        ElMessage.warning('请输入奖惩原因')
        return
    }
    emit('submit', rewardForm)
    dialogVisible.value = false
}
</script>