RING:step1

src/views/put/plan-create-index.vue

@@ -30,6 +30,7 @@
             v-if="current < steps.length - 1"
             type="primary"
             @click="next"
+            :loading="nextLoading"
             >下一步</a-button
           >
           <a-button
@@ -71,6 +72,7 @@ const PlanCreate = defineComponent({
         "creativity-add",
         "plan-upload",
       ],
+      nextLoading: false, // 下一步按钮loading
     });
     const changeTab = (key: string) => {
       router.replace({ name: key });
@@ -113,7 +115,8 @@ const PlanCreate = defineComponent({
       this.$router.push(
         "/put/plan-create/" + this.routerList[1] + "?account_id=" + val
       );
-      this.current++;
+      console.log("STEP1+1");
+      if (this.current === 0) this.current++;
       window.localStorage.setItem("current-step", String(this.current));
     });
     Bus.$on("stepTwoBack", (val: any) => {
@@ -121,12 +124,18 @@ const PlanCreate = defineComponent({
       this.$router.push(
         "/put/plan-create/" + this.routerList[2] + "?campaign_id=" + val
       );
+      console.log("STEP2+1");
       this.current++;
       window.localStorage.setItem("current-step", String(this.current));
     });
   },
   methods: {
     next() {
+      this.nextLoading = true;
+      setTimeout(() => {
+        this.nextLoading = false;
+      }, 100);
+      console.log("出发点+1");
       if (this.current === 0) return Bus.$emit("stepOneCheck");
       if (this.current === 1) return Bus.$emit("stepTwoCheck");
       if (this.current === 2) return Bus.$emit("stepThreeCheck");
@@ -144,6 +153,9 @@ const PlanCreate = defineComponent({
       this.$router.push("/put/plan-create/" + this.routerList[this.current]);
     },
   },
+  // beforeUnmount() {
+  //   Bus.$off("stepOneCheck");
+  // },
 });
 
 export default PlanCreate;

src/views/put/plan-create/account-select.vue

@@ -85,7 +85,6 @@ const AccountSelect = defineComponent({
     return { ...toRefs(state) };
   },
   beforeRouteLeave(to: any, from, next) {
-    console.log("离开", to);
     if (to.href.indexOf("plan-create/group-select") > -1) return next();
     Modal.confirm({
       title: "确认离开当前页面吗?",
@@ -139,18 +138,20 @@ const AccountSelect = defineComponent({
     // 获取头条账户
     async getList() {
       let { data } = await getAdvertiser();
-      console.log("头条账号列表", data);
       this.toutiaoAccountList = data;
     },
     // 选择头条账户获取广告主账户
     getAdAccountList(item: any) {
-      console.log(item.target.value.advertises);
       this.adAccountList = item.target.value.advertises;
       this.adAccountListOrigin = JSON.parse(
         JSON.stringify(item.target.value.advertises)
       );
     },
   },
+
+  beforeUnmount() {
+    Bus.$off("stepOneCheck");
+  },
 });
 
 export default AccountSelect;

src/views/put/plan-create/group-select.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="group-select">
     <a-form
-      ref="formCheck"
       :label-col="{ span: 2 }"
       :wrapper-col="{ span: 8 }"
       :rules="rules"
       :model="form"
+      ref="formCheck"
     >
       <a-form-item label="创建方式">
         <a-radio-group v-model:value="form.build_mode">
@@ -89,6 +89,10 @@ import { defineComponent, reactive, toRefs, ref, createVNode } from "vue";
 import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
 import { getAdCampaigns, createAdCampaign } from "@/api";
 import { message, Modal } from "ant-design-vue";
+import {
+  RuleObject,
+  ValidateErrorEntity,
+} from "ant-design-vue/es/form/interface";
 import Bus from "@/utils/bus";
 
 const GroupSelect = defineComponent({
@@ -117,6 +121,14 @@ const GroupSelect = defineComponent({
       padding: "0 10px",
       borderBottom: "1px solid rgb(230, 230, 230)",
     });
+    let checkBudget = async (rule: RuleObject, value: string | number) => {
+      if (value < 300) {
+        return Promise.reject("预算不得少于300元");
+      } else {
+        formCheck.value.validateField("checkPass");
+        return Promise.resolve();
+      }
+    };
     const rules = {
       build_mode: [
         {
@@ -155,34 +167,13 @@ const GroupSelect = defineComponent({
       ],
       budget: [
         {
-          required: true,
-          message: "请输入广告组预算",
+          validator: checkBudget,
           trigger: "blur",
         },
       ],
     };
-    // const check = () => {
-    //   // formCheck.value
-    //   //   .validate()
-    //   //   .then(() => {
-    //   //     console.log("values");
-    //   //   })
-    //   //   .catch((error: any) => {
-    //   //     console.log("error", error);
-    //   //   });
-    //   console.log("Form", state.form);
-    //   if (state.form.build_mode === "1") {
-    //     // 请求创建广告主接口
-    //     let param: any = { ...state.form,advertiser_id: };
-    //     delete param.build_mode;
-    //     if (param.budget_mode === "BUDGET_MODE_INFINITE") delete param.budget;
-    //   }
 
-    //   // 返回处理
-    //   let data = { flag: false, campaign_id: 0 };
-    //   return data;
-    // };
-    return { ...toRefs(state), radioStyle, rules, formCheck };
+    return { ...toRefs(state), radioStyle, rules, formCheck, checkBudget };
   },
   beforeRouteLeave(to: any, from, next) {
     console.log("离开", to);
@@ -218,11 +209,14 @@ const GroupSelect = defineComponent({
       this.form = JSON.parse(
         String(window.localStorage.getItem("plan-create-campaign"))
       );
-    console.log("REF", this.formCheck);
     // this.getGroups();
-    Bus.$on("stepTwoCheck", () => {
-      let data = this.check();
-      console.log(data);
+    Bus.$on("stepTwoCheck", (val?: any) => {
+      let data: any = {};
+      if (val) {
+        data = val;
+      } else {
+        data = this.check();
+      }
       if (data.flag) {
         window.localStorage.setItem(
           "plan-create-campaign",
@@ -239,13 +233,17 @@ const GroupSelect = defineComponent({
     },
     // step2创建广告组页面校验
     check() {
+      let flag = this.isObjEqual(
+        JSON.parse(String(window.localStorage.getItem("plan-create-campaign"))),
+        this.form
+      );
+      if (flag) {
+        return { flag: true, campaign_id: this.form.campaign_id };
+      }
       let campaign_id = 0;
-      console.log("Form", this.form);
       if (this.form.build_mode === "1") {
         // 校验表单
-        let formV: any = this.$refs.formCheck;
-        console.log("你们", this.$refs.formCheck);
-        formV
+        this.formCheck
           .validate()
           .then(() => {
             // 请求创建广告主接口
@@ -257,14 +255,19 @@ const GroupSelect = defineComponent({
             delete param.campaign_id;
             if (param.budget_mode === "BUDGET_MODE_INFINITE")
               delete param.budget;
-            console.log(param);
+            console.log("创建广告组传递数据", param);
 
             // 接口
             createAdCampaign(param)
               .then(({ data }) => {
                 console.log("创建广告组返回", data);
                 campaign_id = data.campaign_id;
+                this.form.campaign_id = campaign_id;
                 message.success("广告组创建成功");
+                Bus.$emit("stepTwoCheck", {
+                  flag: true,
+                  campaign_id,
+                });
               })
               .catch((error: any) => {
                 console.log("error", error);
@@ -274,7 +277,6 @@ const GroupSelect = defineComponent({
             console.log("error", error);
           });
       } else {
-        console.log("逸轩广告组", this.form.campaign_id);
         if (!this.form.campaign_id) {
           message.warning("请选择广告组");
         } else {
@@ -310,9 +312,8 @@ const GroupSelect = defineComponent({
       });
       let time = this.getNowFormatDate();
       this.form.campaign_name = `${marketingPurposeName}_${langdingTypeName}_${time}`;
-      console.log(this.form.campaign_name);
     },
-    // 获取当前时间
+    // 工具函数 获取当前时间
     getNowFormatDate() {
       var date = new Date();
       var seperator1 = "-";
@@ -353,6 +354,21 @@ const GroupSelect = defineComponent({
       currentdate = currentdate.slice(5, 19);
       return currentdate;
     },
+    //工具函数 比较2个对象是否相同
+    isObjEqual(o1: any, o2: any) {
+      var props1 = Object.getOwnPropertyNames(o1);
+      var props2 = Object.getOwnPropertyNames(o2);
+      if (props1.length != props2.length) {
+        return false;
+      }
+      for (var i = 0, max = props1.length; i < max; i++) {
+        var propName = props1[i];
+        if (o1[propName] !== o2[propName]) {
+          return false;
+        }
+      }
+      return true;
+    },
   },
 });
 

src/views/put/plan-management.vue

@@ -2,7 +2,9 @@
   <div class="plan-management">
     <div class="title-box-common">
       <h3>计划管理</h3>
-      <a-button type="primary" @click="$router.push('/put/plan-create')">新建</a-button>
+      <a-button type="primary" @click="$router.push('/put/plan-create')"
+        >新建</a-button
+      >
     </div>
     <div class="padding-box-common">
       <div class="search-box">