tuanfeng-pc-admin/src/views/lotteryManagement/LotteryPrizes/components/DetailModal.vue

<template>
  <el-dialog
    :visible.sync="visible"
    v-bind="modalOptions"
    append-to-body
  >
    <el-form
      ref="formData"
      :model="formData"
      size="mini"
      label-position="left"
      label-suffix=":"
      label-width="200px"
    >
      <!-- 抽奖奖品信息 -->
      <el-form-item label="ID" prop="id">
        {{ formData.id || '--' }}
      </el-form-item>
      <el-form-item label="关联抽奖活动ID" prop="lotteryId">
        <div style="display: flex;align-items: center;">
          <span>{{ formData.lotteryId || '--' }}</span>
          <el-button
            v-if="formData.lotteryId"
            style="margin-left: 14px;" type="warning" size="mini"
            @click="$refs.DetailModal1 && $refs.DetailModal1.handleOpen({ id: formData.lotteryId })"
          >
            详情
          </el-button>
        </div>
      </el-form-item>
      <el-form-item label="奖品名称" prop="prizeName">
        {{ formData.prizeName || '--' }}
      </el-form-item>
      <el-form-item label="奖品类型" prop="prizeType">
        <span v-if="formData.prizeType === -1">谢谢参与</span>
        <span v-else-if="formData.prizeType === 1">普通奖品</span>
        <span v-else-if="formData.prizeType === 2">唯一性奖品</span>
        <span v-else>--</span>
      </el-form-item>
      <el-form-item label="总库存" prop="totalStock">
        {{ typeof formData.totalStock === 'number' ? formData.totalStock : '--' }}
      </el-form-item>
      <el-form-item label="可用库存" prop="validStock">
        {{ typeof formData.validStock === 'number' ? formData.validStock : '--' }}
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        {{ formData.remark || '--' }}
      </el-form-item>
    </el-form>

    <!-- 活动详情 -->
    <DetailModal1 ref="DetailModal1" />
  </el-dialog>
</template>

<script>
import { getByIdLotteryPrize } from '@/api/lotteryManagement/LotteryPrizes'
import DetailModal1 from '../../lotteryActivities/components/DetailModal'

export default {
  name: 'DetailModal',
  components: {
    DetailModal1
  },
  data() {
    return {
      modalOptions: {
        closeOnClickModal: false,
        width: '800px',
        title: '查看抽奖奖品详情'
      },
      visible: false,
      formData: {
        id: '',
        lotteryId: '',
        prizeName: '',
        prizeType: '',
        totalStock: '',
        validStock: '',
        remark: ''
      }
    }
  },
  methods: {
    handleClose() {
      this.visible = false
    },
    handleOpen(params = {}) {
      this.formData = Object.assign(this.$options.data().formData, params)
      if (params.id) {
        this.getInfo(params.id)
      }
      this.visible = true
    },
    async getInfo(id) {
      const loading = this.$loading({ text: '加载中' })
      try {
        const res = await getByIdLotteryPrize({ id })
        this.formData = Object.assign(this.$options.data().formData, res.data, {
          id: res.data.id || '',
          lotteryId: res.data.lotteryId || '',
          prizeName: res.data.prizeName || '',
          prizeType: res.data.prizeType,
          totalStock: res.data.totalStock,
          validStock: res.data.validStock,
          remark: res.data.remark || ''
        })
      } finally {
        loading.close()
      }
    }
  }
}
</script>