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

<template>
  <div class="app-container">
    <el-form :model="form" ref="form" :rules="rules" label-width="auto" :disabled="disabled">
      <el-form-item label="活动名称：" prop="name">
        <el-input v-model="form.name" placeholder="请输入活动名称" maxlength="20" show-word-limit />
      </el-form-item>
      <el-form-item label="活动时间：" prop="startTime">
        <el-date-picker v-model="date" type="datetimerange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" @change="handleChange">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="抽奖积分：" prop="lotteryConsumePoint">
        <el-input-number v-model="form.lotteryConsumePoint" :min="1" :max="999" :controls="false" placeholder="请输入抽奖积分" />
        <span class="input-number">积分</span>
      </el-form-item>
      <el-form-item label="每日限抽次数：" prop="lotteryLimitCount">
        <el-input-number v-model="form.lotteryLimitCount" :min="1" :max="999" :controls="false" placeholder="请输入每日限抽次数" />
        <span class="input-number">次</span>
      </el-form-item>
      <el-form-item label="活动规则：" prop="rule">
        <el-input v-model="form.rule" type="textarea" :autosize="{ minRows: 5, maxRows: 10 }" :maxlength="150"
          show-word-limit placeholder="请输入活动规则" />
      </el-form-item>
      <el-form-item label="转盘数量：" prop="goodNum">
        <el-select v-model.number="form.goodNum" placeholder="请选择转盘数量" :disabled="form.id ? true : false"
          @change="getChange">
          <el-option v-for="item in numOptions" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item style="width: 100%">
        <el-table :data="form.lotteryConfigGoodList">
          <el-table-column label="顺序" type="index" align="center" />
          <el-table-column label="奖品类型" align="center">
            <template slot-scope="scope">
              <el-select v-model="scope.row.type" :disabled="form.id ? true : false">
                <el-option v-for="item in rewardOptions" :key="item.value" :value="item.value" :label="item.label" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="奖品" align="center">
            <template slot-scope="scope">
              <el-input v-if="scope.row.type === 4" v-model="scope.row.rewardPoint" :disabled="form.id ? true : false">
                <span slot="suffix" style="line-height: 36px">积分</span>
              </el-input>
              <el-input v-else v-model="scope.row.name" :disabled="form.id ? true : false" />
            </template>
          </el-table-column>
          <el-table-column label="奖品数量" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.totalNum" />
            </template>
          </el-table-column>
          <el-table-column label="已发放数量" prop="useNum" align="center" />
          <el-table-column label="奖品图片" align="center">
            <template slot-scope="scope">
              <Upload listType="picture-card" :url="scope.row.pic" @upload="upload($event, scope.$index)"
                :disabled="disabled" />
            </template>
          </el-table-column>
          <el-table-column label="中奖概率 / %" align="center">
            <template slot-scope="scope">
              <el-input-number style="width: 120px" v-model="scope.row.rate" :controls="false" />
            </template>
          </el-table-column>
        </el-table>
      </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 { detail, create, checkTime, edit } from '@/api/registration/lottery'
export default {
  data() {
    return {
      // 表单
      form: {
        lotteryConfigGoodList: [],
        status: 0
      },
      // 活动时间
      date: [],
      // 只读
      disabled: false,
      // 转盘数量
      numOptions: [{
        value: 6,
        label: '6'
      }, {
        value: 8,
        label: '8'
      }],
      // 奖品类型
      rewardOptions: [{
        value: 3,
        label: '音响实物'
      }, {
        value: 4,
        label: '积分'
      }, {
        value: 5,
        label: '谢谢参与'
      }],
      // 校验
      rules: {
        name: [{
          required: true, message: '请输入活动名称', trigger: 'blur'
        }],
        startTime: [{
          required: true, message: '请选择活动时间', trigger: 'change'
        }],
        lotteryConsumePoint: [{
          required: true, message: '请输入抽奖积分', trigger: 'blur'
        }],
        lotteryLimitCount: [{
          required: true, message: '请输入每日限抽次数', trigger: 'blur'
        }],
        rule: [{
          required: true, message: '请输入活动规则', trigger: 'blur'
        }],
        goodNum: [{
          required: true, message: '请选择转盘数量', trigger: 'change'
        }]
      }
    }
  },
  watch: {
    date(val) {
      if (val) {
        this.form.startTime = val[0]
        this.form.endTime = val[1]
      }
    }
  },
  mounted() {
    if (this.$route.query.id || this.$route.query.copyId) {
      this.getList(this.$route.query.id || this.$route.query.copyId)
      this.disabled = Boolean(this.$route.query.disabled)
    }
  },
  methods: {
    // 详情
    getList(id) {
      detail({
        id: id
      }).then(res => {
        if (res.code === 0) {
          this.form = res.data
          this.date = [res.data.startTime, res.data.endTime]
          if (this.$route.query.copyId) {
            delete this.form.id
            this.form.status = 1
          }
        }
      })
    },

    // 校验时间
    handleChange(e) {
      checkTime({
        startTime: e[0],
        endTime: e[1]
      }).then(res => {
        if (res.code === 0) {
          if (!res.data) {
            this.$message.error('已有其他活动在此活动时间内！')
            this.form.date = []
          }
        }
      })
    },

    // 更改转盘数量
    getChange() {
      this.form.lotteryConfigGoodList = []
      for (let i = 0; i < this.form.goodNum; i++) {
        this.form.lotteryConfigGoodList.push({
          pic: ''
        })
      }
    },

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

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

    // 确定
    getSubmit() {
      let rate = 0
      this.form.lotteryConfigGoodList.map(i => {
        rate += i.rate
      })
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (rate !== 100) {
            this.$message.error('中奖概率总和要满足100%')
          } else {
            if (this.form.id) {
              edit(this.form).then(res => {
                if (res.code === 0) {
                  this.$message.success('编辑成功！')
                  this.getList(this.$route.query.id)
                }
              })
            } 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-item {
  width: 500px;
}

::v-deep .upload {
  .el-upload {
    width: 100px;
    height: 100px;
    line-height: 100px;
  }

  .upload-image {
    width: 100px;
    height: 100px;
  }

  .el-icon-plus {
    line-height: 100px;
  }
}

.form-btn {
  margin-left: 120px;
}

.input-number {
  margin-left: 10px;
}
</style>