precise_delivery_distribution_front/src/views/put/plan-create/creativity-add.vue

<template>
  <div class="creativity-add">
    <div class="part-box">
      <h3 class="title">添加创意</h3>
      <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="创意方式">
          <a-radio-group v-model:value="creativityAdd.creative_material_mode">
            <a-radio value="STATIC_ASSEMBLE">程序化创意</a-radio>
            <a-radio value="CUSTOM">自定义创意</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="创意内容">
          <creativity-content :type="creativityAdd"></creativity-content>
        </a-form-item>
      </a-form>
    </div>
    <div class="part-box">
      <h3 class="title">创意分类</h3>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from "vue";
import {} from "@/api";
import Bus from "@/utils/bus";
import { message } from "ant-design-vue";
import creativityContent from "../component/creativity-content.vue";

const CreativityAdd = defineComponent({
  components: { creativityContent },
  setup() {
    const state = reactive({
      creativityAdd: {
        creative_material_mode: "STATIC_ASSEMBLE", // 创意方式，当值为"STATIC_ASSEMBLE"表示程序化创意，其他情况不传字段
        creatives: ref<any[]>([]), //自定义素材信息, 最多支持10个创意。首选投放位置和创意类型决定素材规格。当为程序化创意时，该字段不填数据，值为[]
        title_list: [
          {
            title: "", // 标题
          },
        ], // 程序化创意时传 自定义不传
      },
      creativityClassify: {},
    });
    return { ...toRefs(state), labelCol: { span: 3 }, wrapperCol: { span: 8 } };
  },
  mounted() {
    Bus.$on("stepFourCheck", (val?: any) => {
      console.log("Step4Check");
      Bus.$emit("stepFourBack");
    });
  },
  methods: {
    // 提交前数据处理
    beforeCommit() {
      let data: any = { ...this.creativityAdd };
      // 1.创意方式，当值为"STATIC_ASSEMBLE"表示程序化创意，其他情况不传字段
      if (data.creative_material_mode === "CUSTOM")
        delete data.creative_material_mode;
    },
    // 渲染前数据处理
    beforeBackshow(creativityOrigin: any) {
      // 1.创意方式页面
      if (!creativityOrigin.creative_material_mode)
        creativityOrigin.creative_material_mode = "CUSTOM";
    },
  },
  beforeUnmount() {
    Bus.$off("stepFourCheck");
  },
});

export default CreativityAdd;
</script>
<style lang="scss" scoped>
.creativity-add {
  .title {
    line-height: 30px;
    font-weight: bold;
    padding-left: 10px;
  }
}
</style>