bsdgy-front/src/pages/activity/useActivityStepOne.vue

<template>
  <div>
    <Form
      ref="formValidate"
      :model="formValidate"
      :rules="ruleValidate"
      :label-width="80"
    >
      <Row>
        <i-col span="20" offset="2">
          <FormItem label="活动名称" prop="name">
            <div>
              <i-input
                disabled
                type="text"
                v-model="schedule.name"
                placeholder
              ></i-input>
            </div>
          </FormItem>
          <div class="dateClass">
            <Form-item label="活动时间" prop="activityStartDate">
              <Date-picker
                @on-change="storeStartDate"
                type="date"
                v-model="formValidate.beginTime"
                format="yyyy-MM-dd"
                placeholder="请选择开始日期"
                style="width: 200px"
              ></Date-picker>
            </Form-item>
            <div class="text">至</div>
            <Form-item label prop="activityEndDate">
              <Date-picker
                @on-change="storeEndDate"
                type="date"
                v-model="formValidate.endTime"
                format="yyyy-MM-dd"
                placeholder="请选择结束日期"
                style="width: 200px"
              ></Date-picker>
            </Form-item>
          </div>
          <FormItem label="活动类型" prop="activityStyle">
            <RadioGroup v-model="formValidate.activityStyle" vertical>
              <Radio
                :border="true"
                v-for="(item, index) in schedule.params"
                :key="index"
                :label="item.id"
                style="margin-bottom: 10px"
              >
                <Icon type="social-apple"></Icon>
                <span
                  >{{
                    item.name
                  }}&nbsp;&nbsp;&nbsp;&nbsp;----&nbsp;&nbsp;&nbsp;&nbsp;{{
                    item.key
                  }}</span
                >
              </Radio>
            </RadioGroup>
          </FormItem>
        </i-col>
      </Row>
    </Form>
  </div>
</template>
<script>
import store from "../../store/index";
import { mapGetters } from "vuex";

export default {
  name: "useActivityStepOne",
  data() {
    return {
      formValidate: store.getters.useData,
      ruleValidate: {
        activityName: [
          { required: true, message: "活动名称不能为空", trigger: "blur" },
        ],
        activityStartDate: [
          {
            required: true,
            type: "date",
            message: "开始时间不能为空",
            trigger: "change",
          },
        ],
        activityEndDate: [
          {
            required: true,
            type: "date",
            message: "结束时间不能为空",
            trigger: "change",
          },
        ],
        activityStyle: [{ required: true, message: "", trigger: "blur" }],
      },
    };
  },
  props: {
    schedule: Object,
  },
  created() {
    this.formValidate = store.getters.useData;
  },
  watch: {
    ["formValidate.activityStyle"]() {
      let _this = this;
      let type = {};
      this.schedule.params.forEach((item) => {
        if (item.id == _this.formValidate.activityStyle) {
          type = item;
        }
      });
      store.getters.useData.params = [type];
    },
  },
  methods: {
    storeStartDate(date) {
      store.getters.useData.beginTime = date;
    },
    storeEndDate(date) {
      store.getters.useData.endTime = date;
    },
  },
};
</script>

<style scoped>
.dateClass {
  display: flex;
}

.text {
  position: relative;
  left: 100px;
}

.inputClass {
  width: 45%;
  margin-bottom: 10px;
  margin-right: 20px;
}
</style>