ohplay_system/src/views/registration/exchange/detail.vue

<template>
  <div class="app-container">
    <el-form :model="form" ref="form" :rules="rules" label-width="100px" :disabled="disabled">
      <el-form-item label="兑换标题：" prop="name">
        <el-input v-model="form.name" placeholder="请输入兑换标题" maxlength="50" show-word-limit />
      </el-form-item>
      <el-form-item label="兑换积分：" prop="exchangePoint">
        <el-input-number v-model="form.exchangePoint" placeholder="请输入兑换积分" :controls="false" :min="1" />
        <span style="margin-left: 10px">积分</span>
      </el-form-item>
      <el-form-item label="兑换类型：" prop="type">
        <el-select v-model="form.type" placeholder="请选择兑换类型">
          <el-option v-for="item in rewardOptions" :key="item.value" :value="item.value"
            :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item label="套餐名称：" v-if="form.type !== 3">
        <el-select v-model="form.businessId" placeholder="请选择套餐">
          <el-option v-for="item in mealOptions" :key="item.id" :value="item.id" :label="item.name" />
        </el-select>
      </el-form-item>
      <el-form-item label="实物数量：" v-else prop="totalNum">
        <el-input-number v-model="form.totalNum" :min="1" :controls="false" />
        <span style="margin-left: 10px">个</span>
      </el-form-item>
      <el-form-item label="兑换图片：" prop="pic">
        <Upload listType="picture-card" :url="form.pic" @upload="upload" :disabled="disabled" />
      </el-form-item>
    </el-form>
    <div class="form-btn">
      <el-button @click="cancel">取消</el-button>
      <el-button v-if="!disabled" type="primary" @click="getSubmit">确定</el-button>
    </div>
  </div>
</template>

<script>
import { create, detail, edit, mealList } from '@/api/registration/exchange'
export default {
  data() {
    return {
      // 表单
      form: {
        status: 0,
        type: null,
        businessType: 4
      },
      // 校验
      rules: {
        name: [{
          required: true, message: '请输入兑换标题', trigger: 'blur'
        }],
        exchangePoint: [{
          required: true, message: '请输入兑换积分', trigger: 'blur'
        }],
        type: [{
          required: true, message: '请选择兑换类型', trigger: 'change'
        }],
        totalNum: [{
          required: true, message: '请输入实物数量', trigger: 'blur'
        }],
        pic: [{
          required: true, message: '请上传兑换图片', trigger: 'change'
        }]
      },
      // 奖品类型
      rewardOptions: [{
        value: 0,
        label: '音乐套餐'
      }, {
        value: 1,
        label: '流量套餐'
      }, {
        value: 3,
        label: '音响实物'
      }],
      // 套餐类型
      mealOptions: [],
      // 只读
      disabled: false
    }
  },
  watch: {
    'form.type': {
      handler(val) {
        if (val !== null) {
          this.getMealList()
        }
      },
      deep: true
    }
  },
  mounted() {
    if (this.$route.query.id) {
      this.form.id = this.$route.query.id
      this.disabled = Boolean(this.$route.query.disabled)
      this.getList()
    }
  },
  methods: {
    // 详情
    getList() {
      detail(this.form.id).then(res => {
        if (res.code === 0) {
          this.form = res.data
        }
      })
    },

    // 上传
    upload(e) {
      this.form.pic = e.file
    },

    // 取消
    cancel() {
      this.$tab.closeOpenPage('/registration/exchangeConfig')
    },

    getMealList() {
      let type = this.form.type === 0 ? 13 : 12
      mealList(type, 4).then(res => {
        if (res.code === 0) {
          this.mealOptions = res.data
        }
      })
    },

    // 确定
    getSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.id) {
            edit(this.form).then(res => {
              if (res.code === 0) {
                this.$message.success('修改成功！')
                this.cancel()
              }
            })
          } else {
            create(this.form).then(res => {
              if (res.code === 0) {
                this.$message.success('新增成功！')
                this.cancel()
              }
            })
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form {
  width: 500px;
}
</style>