huangguo_admin/src/views/aiManagement/aiGirlFriendConfig/components/AddOrEdit.vue

<template>
  <el-dialog :title="title" :visible.sync="Visible" width="800px" center class="ac-dialog" :close-on-click-modal="false" @close="close">
    <el-form :inline="true" :model="form" ref="ruleForm" class="demo-form-inline" label-width="120px" label-position="right">
      <el-row :gutter="24">
        <el-col :xs="24">
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入名称" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="现价(分)" prop="payAmount">
            <el-input v-model="form.payAmount" placeholder="请输入现价" />
          </el-form-item>
          <div style="margin: -20px 118px 20px; color: #c6c6c6">建议输入金额:30,50,100,200,300,500,1000</div>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-form-item label="原价(分)" prop="prePayAmount">
            <el-input v-model="form.prePayAmount" placeholder="请输入原价" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="图片">
            <UploadImg @changeImgUrl="changeCoverImgUrl" :img="form.image"></UploadImg>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :xs="24">
          <el-form-item label="积分数量" prop="score">
            <el-input v-model.number="form.score" placeholder="请输入积分数量" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :xs="24">
          <el-form-item label="赠送积分数量" prop="giftScore">
            <el-input v-model.number="form.giftScore" placeholder="请输入赠送积分数量" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :xs="24">
          <el-form-item label="是否上架" prop="isEnb">
            <el-switch v-model="form.isEnb" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="描述" prop="desc">
            <el-input placeholder="请输入描述" v-model="form.desc" type="textarea" style="width: 350px" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="排序" prop="desc">
            <el-input placeholder="请输入排序" v-model="form.sort" type="textarea" style="width: 350px" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="Visible = false"> 取 消 </el-button>
      <el-button type="primary" @click="submit('ruleForm')"> 确 定 </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { changeMoneyYuan, changeMoneyFen } from '@/filters/index'
import UploadImg from '@/components/UploadImg/index'
import { aiMateScoreConfAdd, aiMateScoreConfModify } from '@/api/aiManagement/aiGirlFriendConfig'
export default {
  name: 'AddOrEdit',
  props: ['data'],
  components: {
    UploadImg
  },
  data() {
    return {
      Visible: true,
      title: '',
      // 表单数据
      form: {
        giftScore: null, // 赠送金币
        score: undefined, // 金币基础
        isEnb: true, // 是否上架
        image: undefined,
        name: undefined, // 名称
        payAmount: undefined, // 支付金额
        desc: undefined,
        prePayAmount: undefined
      }
    }
  },

  mounted() {
    this.title = this.data.title
    if (this.title === '编辑') {
      this.form = { ...this.data.data }
      this.form.payAmount = changeMoneyYuan(this.form.payAmount)
      this.form.prePayAmount = changeMoneyYuan(this.form.prePayAmount)
    }
  },
  methods: {
    // TODO：新增金币管理数据
    add(data) {
      aiMateScoreConfAdd(data).then(res => {
        if (res.code === 200) {
          this.$message.success('新增成功')
          this.Visible = false
        } else {
          this.$message.error('新增失败')
        }
      })
    },
    // TODO：编辑金币管理数据
    update(data) {
      aiMateScoreConfModify(data).then(res => {
        if (res.code === 200) {
          this.$message.success('更新成功')
          this.Visible = false
        } else {
          this.$message.error('更新失败')
        }
      })
    },
    // 提交按钮
    submit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const data = JSON.parse(JSON.stringify(this.form))
          data.payAmount = data.payAmount ? changeMoneyFen(data.payAmount) : 0
          data.prePayAmount = data.prePayAmount ? changeMoneyFen(data.prePayAmount) : 0
          data.sort = Number(data.sort)
          if (this.title === '新增') {
            this.add(data)
          } else if (this.title === '编辑') {
            this.update(data)
          }
        } else {
          return false
        }
      })
    },
    // 上传图片返回地址
    changeCoverImgUrl(data) {
      this.form.image = data
    },

    // 关闭编辑
    close() {
      this.$emit('close')
    }
  }
}
</script>