precise_delivery_distribution_front/src/views/put/landing/stepComp/step-one.vue

<template>
  <div class="step-one-container">
    <a-form
      :label-col="{ span: 2 }"
      :wrapper-col="{ offset: 1, span: 12 }"
      :colon="false"
    >
      <a-form-item label="落地页名称" v-bind="validateInfos.title">
        <a-input placeholder="请输入落地页名称" v-model:value="forms.title" />
      </a-form-item>
      <a-form-item label="公众号" v-bind="validateInfos.gzh_name">
        <a-select
          placeholder="请选择公众号"
          v-model:value="forms.gzh_name"
          @change="onGzhChange"
        >
          <template v-for="official in officials" :key="official.gzh_name">
            <a-select-option :value="official.gzh_name">
              {{ official.gzh_name }}
            </a-select-option>
          </template>
        </a-select>
      </a-form-item>
      <a-form-item label="微信号">
        <a-input placeholder="请输入微信号" disabled :value="forms.gzh_code" />
      </a-form-item>
      <a-form-item label="域名" v-bind="validateInfos.domain">
        <a-select
          placeholder="请选择域名"
          v-model:value="forms.domain"
          @change="onDomainChange"
        >
          <template v-for="domain in domains" :key="domain.domain">
            <a-select-option :value="domain.domain">
              {{ domain.domain }}
            </a-select-option>
          </template>
        </a-select>
      </a-form-item>
      <a-form-item label="推广书籍" v-bind="validateInfos.bid">
        <a-select placeholder="请选择需要推广的书籍" v-model:value="forms.bid">
          <template v-for="book in books" :key="book.bid">
            <a-select-option :value="book.bid">
              {{ book.book_name }}
            </a-select-option>
          </template>
        </a-select>
      </a-form-item>
      <a-form-item label="公司主体">
        <a-input
          placeholder="请输入公司主体"
          disabled
          :value="forms.company_name"
        />
        <!-- <a-select placeholder="请选择公司主体">
          <a-select-option value="1">1</a-select-option>
          <a-select-option value="2">2</a-select-option>
        </a-select> -->
      </a-form-item>
      <a-form-item label="渠道" v-bind="validateInfos.link_source">
        <a-select placeholder="请选择渠道" v-model:value="forms.link_source">
          <a-select-option value="uc">UC</a-select-option>
          <a-select-option value="iqiyi">爱奇艺</a-select-option>
          <a-select-option value="tiktok">抖音</a-select-option>
          <a-select-option value="vivo">Vivo</a-select-option>
          <a-select-option value="baidu">百度</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="公众号后缀">
        <a-radio-group v-model:value="forms.gzh_suffix_mode">
          <a-radio :value="0">无后缀</a-radio>
          <a-radio :value="3">官方后缀(推荐)</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="跳转类型">
        <a-radio-group v-model:value="forms.jump_type">
          <a-radio value="copy_name">文本粘贴</a-radio>
          <a-radio value="xcx">小程序</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="关注图片" v-bind="validateInfos.sub_img">
        <image-upload
          name="sub_img"
          type="关注图片"
          :value="forms.sub_img"
          @change="onUploadChange"
        />
      </a-form-item>
      <a-form-item label="公众号头像">
        <image-upload
          name="gzh_img"
          type="公众号头像"
          :value="forms.gzh_img"
          @change="onUploadChange"
        />
      </a-form-item>
      <a-form-item label="简介">
        <a-textarea v-model:value="forms.name"></a-textarea>
      </a-form-item>
      <a-form-item :wrapper-col="{ offset: 3 }">
        <a-button @click="onBack" style="margin-right: 10px">返回</a-button>
        <a-button type="primary" @click="onNextStep">下一步</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from "vue";
import { useForm } from "@ant-design-vue/use";
import { useRouter } from "vue-router";

import ImageUpload from "@/components/image-upload/index.vue";

import { getLandingBooks, getLandingDomains, getLandingOfficials } from "@/api";
import { IDomainItem, IGZHItem, IPBookItem } from "@/types/api";

const StepOne = defineComponent({
  name: "StepOne",
  components: {
    ImageUpload,
  },
  props: {
    content: Object,
    default() {
      return {};
    },
  },
  emits: ["next"],
  setup(props, { emit }) {
    const router = useRouter();

    const state = reactive({
      officials: ref<IGZHItem[]>([]),
      domains: ref<IDomainItem[]>([]),
      books: ref<IPBookItem[]>([]),
      forms: {
        title: "",
        name: "",
        gzh_code: "",
        gzh_name: "",
        bid: "",
        domain: "",
        company_name: "",
        link_source: "uc",
        gzh_suffix_mode: 0,
        gzh_suffix: "",
        jump_type: "copy_name",
        sub_img: "",
        gzh_img: "",
        content: "",
      },
    });

    const formsRules = reactive({
      title: [{ required: true, trigger: "blur", message: "请输入落地页名称" }],
      gzh_name: [
        { required: true, trigger: "change", message: "请选择公众号" },
      ],
      domain: [
        {
          required: true,
          trigger: "change",
          message: "请选择域名",
        },
      ],
      bid: [
        {
          required: true,
          type: "number",
          trigger: "change",
          message: "请选择推广书籍",
        },
      ],
      link_source: [
        {
          required: true,
          trigger: "change",
          message: "请选择渠道",
        },
      ],
      sub_img: [
        {
          required: true,
          message: "请上传关注图片",
        },
      ],
    });

    const { validate, validateInfos } = useForm(state.forms, formsRules);

    const initConfigData = async () => {
      console.log(props);
      try {
        const [
          { data: official },
          { data: domains },
          { data: books },
        ] = await Promise.all([
          getLandingOfficials(),
          getLandingDomains(),
          getLandingBooks(),
        ]);
        state.officials = official.list;
        state.domains = domains.list;
        state.books = books.list;
        state.forms = Object.assign(state.forms, (props as any)?.content ?? {});
        console.log(state.forms)

      } catch (error) {
        console.log("error happened in initLandingConfig:", error.message);
        router.back();
      }
    };

    initConfigData();

    const onGzhChange = (name: string) => {
      const target = state.officials.find((gzh) => gzh.gzh_name === name);
      // state.forms.channel_id = target!.channel_id.toString() ?? "";
      state.forms.gzh_img = target!.gzh_img ?? "";
      state.forms.sub_img = target!.sub_img ?? "";
      state.forms.gzh_code = target!.gzh_code ?? "";
    };

    const onDomainChange = (domain: string) => {
      const target = state.domains.find((item) => item.domain === domain);
      state.forms.company_name = target!.company_name ?? "";
    };

    const onUploadChange = (result: {
      url: string;
      type: "sub_img" | "gzh_img";
    }) => {
      state.forms[result.type] = result.url;
      //console.log(state.forms);
    };

    const onBack = () => {
      router.replace("/put/landing");
    };

    const onNextStep = async () => {
      try {
        await validate();
        emit("next", state.forms);
      } catch (error) {
        console.log(error);
      }
    };

    return {
      ...toRefs(state),
      validateInfos,
      onGzhChange,
      onDomainChange,
      onUploadChange,
      onBack,
      onNextStep,
    };
  },
});

export default StepOne;
</script>