pet-system-merchant-web/src/views/order/management-bak/components/RewardDialog.vue

<template>
  <el-dialog :model-value="visible" @update:model-value="updateVisible" title="奖惩操作" width="500px">
    <div v-if="data" 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;">{{ data.fulfillerName || '未指派' }}</span></div>
        <div style="font-size: 13px; margin-top: 4px;">订单号：{{ data.orderNo }}</div>
        <div style="font-size: 13px; margin-top: 4px; display:flex; align-items:center; gap:6px;">
          服务类型：
          <el-tag :type="getTypeTag(data.type)" size="small">{{ getTypeName(data.type) }}</el-tag>
          <el-tag v-if="data.type === 'transport' && data.transportType === 'round'" size="small" effect="plain" type="warning">往返</el-tag>
          <el-tag v-if="data.splitType === 'pick'" size="small" effect="dark" color="#409eff" style="border:none; color:white;">接</el-tag>
          <el-tag v-if="data.splitType === 'drop'" size="small" effect="dark" color="#67c23a" style="border:none; color:white;">送</el-tag>
          <el-tag v-if="data.type === 'transport' && data.transportType === 'pick' && !data.splitType" size="small" effect="plain">单程接</el-tag>
          <el-tag v-if="data.type === 'transport' && data.transportType === 'drop' && !data.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="updateVisible(false)">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确认执行</el-button>
    </template>
  </el-dialog>
</template>

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

const props = defineProps({
  visible: Boolean,
  data: Object
})

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

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 updateVisible = (val) => {
  emit('update:visible', val)
}

const handleSubmit = () => {
  if (!rewardForm.reason) {
    ElMessage.warning('请输入奖惩原因')
    return
  }
  ElMessage.success(`操作成功：${rewardForm.type === 'reward' ? '奖励' : '惩罚'}已执行`)
  updateVisible(false)
  emit('success')
}
</script>