webapp / GreenwayWeb

<template>
  <div class="edit_add_page">
    <div class="content">
      <el-form ref="form" :model="form" label-width="100px">
        <br>
        <h2>基础信息</h2>
        <br>
        <el-form-item label="活动名称:">
          <el-input
            v-model="form.discountName"
            placeholder="请输入活动名称"
            :disabled="unStart"
          />
        </el-form-item>

        <el-form-item label="活动介绍:">
          <el-input
            v-model="form.remark"
            type="textarea"
            placeholder="请输入活动介绍"
            :disabled="unStart"
            style="width: 400px"
          />
        </el-form-item>
        <!-- :picker-options="pickerOptions" -->

        <el-form-item label="报名时间:">
          <el-date-picker
            v-model="date2"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            @change="changeDate2"
          />
          <p class="timeInfo">报名时间不能交叉且报名时间不能大于活动时间</p>
        </el-form-item>

        <el-form-item label="活动时间:">
          <el-date-picker
            v-model="date1"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            :disabled="unStart"
            @change="changeDate1"
          />
          <p class="timeInfo">
            平台活动时间不能交叉并且活动时间不能小于报名时间
          </p>
        </el-form-item>

        <el-form-item label="活动保证金:">
          <el-radio-group v-model="form.ifBond">
            <el-radio :label="1" :disabled="unStart">需要</el-radio>
            <el-radio :label="0" :disabled="unStart">不需要</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item v-if="form.ifBond === 1" label="保证金金额:">
          <el-input
            v-model="form.bondMoney"
            placeholder="请输入活动保证金金额"
            :disabled="unStart"
          />
        </el-form-item>

        <h2>优惠规则</h2>
        <br>
        <el-form-item label="全场折扣:">
          <el-input
            v-model="form.discount"
            :disabled="unStart"
            style="width: 100px; margin-right: 12px"
          />折
        </el-form-item>
        <el-form-item label="是否限购:">
          <el-radio-group v-model="form.ifLimit">
            <el-radio :label="2" :disabled="unStart">限购</el-radio>
            <el-radio :label="1" :disabled="unStart">不限购</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.ifLimit === 2" label="限购(件/人):">
          <el-input v-model="form.limitNumber" :disabled="unStart" />
        </el-form-item>
        <el-form-item label="优惠券叠加:">
          <el-radio-group v-model="form.ifAdd">
            <el-radio :label="1" :disabled="unStart">叠加</el-radio>
            <el-radio :label="0" :disabled="unStart">不叠加</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <div class="footer">
      <div class="btn_list">
        <span @click="cancel">取消</span>
        <span @click="save">保存</span>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getDiscountDetail,
  addDiscountData,
  editDiscountData,
} from '@/api/active/active_discount.js';
import Form from './modul'
export default {
  props: {
    activityForm: {
      type: Object,
      default: () => {}
    },
    isEdit: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      form: new Form(),
      date1: [], // 活动时间
      date2: [], // 报名时间
      type: false,
    };
  },
  computed: {
    // 其他修改
    unStart () {
      const t = this.isEdit ? this.activityForm : null
      return t && !(t.state === 0)
    },
    // 时间修改
    applyEnd () {
      const t = this.isEdit ? this.activityForm : null
      return t && (t.state === 3 || t.state === 4)
    }
  },
  watch: {
    isEdit: {
      handler (nVal, oVal) {
        if (nVal) {
          this.getDetails()
        } else {
          this.reset()
        }
      }
    },
    activityForm: {
      handler (nVal, oVal) {
        if (nVal) {
          this.getDetails()
        }
      }
    }
  },
  created () {
    if (this.isEdit) { // 初始化watch无法监听isEdit，手动获取数据
      this.getDetails()
    }
  },
  methods: {
    changeDate2 (e) {
      var startTime = Date.parse(e[1]);
      var timestamp = Date.parse(new Date());
      if (startTime < timestamp) {
        this.date2 = [];
        this.$message.warning('报名结束时间不能小于当前时间');
      }
    },
    changeDate1 (e) {
      var startTime = Date.parse(e[1]);
      var timestamp = Date.parse(new Date());
      if (startTime < timestamp) {
        this.date1 = [];
        this.$message.warning('活动结束时间不能小于当前时间');
      }
    },
    async getDetails () {
      const res = await getDiscountDetail({ discountId: this.activityForm.discountId });
      if (JSON.stringify(res.data) !== '{}') {
        this.form = res.data;
        this.date1 = [res.data.startTime, res.data.endTime];
        this.date2 = [res.data.signStartTime, res.data.signEndTime];
      }
    },
    cancel () { this.$emit('cancel') },
    refersh () { this.$emit('refersh') },
    save () {
      const params = Object.assign({}, this.form, {
        startTime: this.date1[0] || '',
        endTime: this.date1[1] || '',
        signStartTime: this.date2[0] || '',
        signEndTime: this.date2[1] || '',
        bondMoney: this.form.bondMoney * 1,
      });
      let errMsg = '';
      if (params.discountName === '') {
        errMsg += ' 活动名称 ';
      }
      if (params.signStartTime === '' || params.signEndTime === '') {
        errMsg += ' 报名时间 ';
      }
      if (params.startTime === '' || params.endTime === '') {
        errMsg += ' 活动时间 ';
      }
      if (errMsg.length !== 0) {
        this.$message.error(`请输入${errMsg}`);
        return;
      }
      if (this.isEdit) {
        params.details = params.promotionDetail;
        return editDiscountData(
          Object.assign(params, { discountId: this.activityForm.discountId })
        ).then((res) => {
          if (res.code === '') {
            this.$message.success('修改成功');
            this.reset();
            this.refersh()
          }
        });
      }
      return addDiscountData(params).then((res) => {
        if (res.code === '') {
          this.$message.success('新增成功');
          this.reset();
          this.refersh()
        }
      });
    },
    reset () {
      this.form = new Form();
      this.date1 = [];
      this.date2 = [];
    },
  },
};
</script>

<style lang='scss' scoped>
.edit_add_page {
  padding: 20px;
  h2 {
    font-size: 24px;
    font-weight: 500;
    position: relative;
    &::before {
      content: "";
      height: 24px;
      width: 4px;
      background-color: #3a68f2;
      position: absolute;
      left: -10px;
      top: 2px;
      display: block;
    }
  }
  .content {
    background-color: #fff;
    padding: 0 50px 20px;
    overflow: hidden;
    .el-form {
      .el-form-item {
        label.el-form-item__label {
          font-size: 16px !important;
          color: red !important;
        }
      }
    }
    .photo {
      padding: 70px 100px;
      .avatar-uploader {
        width: 180px;
        .el-icon-plus,
        img {
          width: 180px;
          height: 180px;
          line-height: 180px;
          border: 1px #bbb solid;
          border-radius: 4px 4px 0px 4px;
          margin-bottom: 10px;
          text-align: center;
        }
        img {
          border: none;
        }
      }
    }
  }
  .footer {
    height: 100px;
    line-height: 100px;
    font-size: 24px;
    position: relative;
    border-top: 1px solid #e0e5eb;
    .btn_list {
      position: absolute;
      right: 0;
      top: 0;
      height: 50px;
      span {
        padding: 0;
        margin: 0;
        width: 100px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        display: inline-block;
        font-size: 16px;
        border-radius: 4px;
        box-sizing: border-box;
        &:hover {
          cursor: pointer;
        }
        &:nth-child(1) {
          background: rgba(255, 255, 255, 1);
          order: 1px solid rgba(224, 229, 235, 1);
          margin-right: 20px;
          border: 1px solid rgba(224, 229, 235, 1);
        }
        &:nth-child(2) {
          background: rgba(58, 104, 242, 1);
          color: #fff;
        }
      }
    }
  }
  .timeInfo {
    font-size: 12px;
    color: #999999;
  }
  .el-input {
    width: 400px;
  }
}
</style>