RING:step3初步搭建

src/views/put/component/time-schedule.vue

@@ -0,0 +1,336 @@
+<template>
+  <div class="choose-schedule-time">
+    <div class="time-container" id="time-container">
+      <div class="container-header">
+        <div class="selectall">
+          <!--<input type="checkbox" id="selectAllid" @click="selectAllornot">-->
+          <label>拖动鼠标选择时间段（一格为0.5小时）</label>
+        </div>
+        <div class="toolar-tip">
+          <div class="tip-item"><span class="current"></span>投放</div>
+          <div class="tip-item"><span></span>不投放</div>
+        </div>
+      </div>
+      <div class="container-content">
+        <div class="week-list">
+          <div class="week-name" v-for="(item, index) in weekName" :key="index">
+            {{ item }}
+          </div>
+        </div>
+        <div class="mainbox">
+          <div class="main-header">
+            <div
+              class="header-item"
+              v-for="(item, index) in timeName"
+              :key="index"
+            >
+              {{ item }}
+            </div>
+          </div>
+          <div class="time-list">
+            <div
+              class="list-item"
+              :title="`0.5小时`"
+              v-for="(item, index) in timeList"
+              :class="{ selected: item == 1 }"
+              @click="setcurrent(item, index)"
+              :key="index"
+            ></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="select-box-dashed"
+      id="select-box-dashed"
+      :style="{
+        top: selectBox.top + 'px',
+        left: selectBox.left + 'px',
+        width: selectBox.width + 'px',
+        height: selectBox.height + 'px',
+        display: selectBox.display,
+      }"
+    ></div>
+    <div
+      class="time-container-mask"
+      id="time-container-mask"
+      @mousedown="mousedown"
+    ></div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      weekName: [
+        "星期一",
+        "星期二",
+        "星期三",
+        "星期四",
+        "星期五",
+        "星期六",
+        "星期日",
+      ],
+      timeName: ["00:00~06:00", "06:00~12:00", "12:00~18:00", "18:00~24:00"],
+      timeList: this.timeString.split(""),
+      selectBox: {
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0,
+        startx: 0,
+        starty: 0,
+        display: "none",
+        endx: 0,
+        endy: 0,
+      },
+      isSelect: true,
+      selectBoxDashed: null,
+      startX: null,
+      startY: null,
+      initx: null,
+      inity: null,
+    };
+  },
+  props: {
+    // timeSetp: {
+    //   type: Number,
+    //   default() {
+    //     return 0.5;
+    //   },
+    // },
+    timeString: {
+      type: String,
+      default() {
+        let _timeArray = [];
+        for (let i = 0; i < (24 / 0.5) * 7; i++) {
+          _timeArray.push("0");
+        }
+        return _timeArray.join("");
+      },
+    },
+  },
+  model: {
+    prop: "timeString",
+    event: "triggertime",
+  },
+  watch: {
+    timeString() {
+      this.timeList = this.timeString.split("");
+    },
+  },
+  methods: {
+    clearBubble(e) {
+      if (e.stopPropagation) {
+        e.stopPropagation();
+      } else {
+        e.cancelBubble = true;
+      }
+      if (e.preventDefault) {
+        e.preventDefault();
+      } else {
+        e.returnValue = false;
+      }
+    },
+    mousedown(e) {
+      let fileDivs = document.getElementsByClassName("list-item");
+      //  清除事件冒泡、捕获
+      this.clearBubble(e);
+      //  设置选框的初始位置
+      this.startX = e.offsetX;
+      this.startY = e.offsetY;
+      this.selectBox.left = this.startX;
+      this.selectBox.top = this.startY;
+      let timeContainerMask = document.getElementById("time-container-mask");
+      timeContainerMask.addEventListener("mousemove", this.mousemove);
+      timeContainerMask.addEventListener("mouseup", this.mouseup);
+    },
+    mousemove(e) {
+      //  清除事件冒泡、捕获
+      this.clearBubble(e);
+      //  设置选框可见
+      this.selectBox.display = "block";
+      //  根据鼠标移动，设置选框的位置、宽高
+      this.initx = e.offsetX;
+      this.inity = e.offsetY;
+      //  暂存选框的位置及宽高，用于将 select-item 选中
+      let left = Math.min(this.initx, this.startX);
+      let top = Math.min(this.inity, this.startY);
+      let width = Math.abs(this.startX - this.initx);
+      let height = Math.abs(this.startY - this.inity);
+      this.selectBox.left = left;
+      this.selectBox.top = top;
+      this.selectBox.width = width;
+      this.selectBox.height = height;
+      let fileDivs = document.getElementsByClassName("list-item");
+      for (let i = 0; i < fileDivs.length; i++) {
+        let itemX_pos = fileDivs[i].offsetWidth + fileDivs[i].offsetLeft;
+        let itemY_pos = fileDivs[i].offsetHeight + fileDivs[i].offsetTop;
+        let condition1 = itemX_pos > left;
+        let condition2 = itemY_pos > top;
+        let condition3 = fileDivs[i].offsetLeft < left + width;
+        let condition4 = fileDivs[i].offsetTop < top + height;
+        if (condition1 && condition2 && condition3 && condition4) {
+          fileDivs[i].classList.add("temp-selected");
+        } else {
+          fileDivs[i].classList.remove("temp-selected");
+        }
+      }
+    },
+    mouseup(e) {
+      document
+        .getElementById("time-container-mask")
+        .removeEventListener("mousemove", this.mousemove);
+      let selectDom = document.getElementsByClassName("temp-selected");
+      [].slice.call(selectDom).forEach((item) => {
+        if (item.classList.contains("selected")) {
+          item.classList.remove("selected");
+        } else {
+          item.classList.add("selected");
+        }
+        item.classList.remove("temp-selected");
+      });
+      this.selectBox.display = "none";
+      let fileDivs = document.getElementsByClassName("list-item");
+      for (let i = 0; i < fileDivs.length; i++) {
+        if (fileDivs[i].classList.contains("selected")) {
+          this.timeList[i] = "1";
+        } else {
+          this.timeList[i] = "0";
+        }
+      }
+      this.$emit("triggertime", this.timeList.join(""));
+      this.clearBubble(e);
+    },
+    setcurrent(item, index) {
+      if (item == 0) {
+        this.timeList.splice(index, 1, "1");
+      } else {
+        this.timeList.splice(index, 1, "0");
+      }
+    },
+    selectAllornot(e) {
+      this.timeList.forEach((item, index) => {
+        this.timeList.splice(index, 1, Number(e.target.checked));
+      });
+      this.$emit("triggertime", this.timeList.join(""));
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.choose-schedule-time {
+  position: relative;
+  .select-box-dashed {
+    position: absolute;
+    display: none;
+    width: 0px;
+    height: 0px;
+    padding: 0px;
+    margin: 0px;
+    border: 1px dashed #0099ff;
+    background-color: #c3d5ed;
+    opacity: 0.5;
+    filter: alpha(opacity=50);
+    font-size: 0px;
+  }
+  .time-container-mask {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+
+  .time-container {
+    position: relative;
+    width: calc(100% - 2px);
+    min-width: 780px;
+    overflow: hidden;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    .container-header {
+      display: flex;
+      flex-wrap: nowrap;
+      justify-content: space-between;
+      font-size: 12px;
+      padding: 0 10px;
+      // .selectall {
+      // }
+      .toolar-tip {
+        .tip-item {
+          display: inline-block;
+          margin-right: 10px;
+        }
+        .tip-item span {
+          display: inline-block;
+          width: 20px;
+          height: 10px;
+          border: 1px solid #999;
+          margin-right: 3px;
+        }
+        .tip-item span.current {
+          background: #43a9ed;
+          border-color: #43a9ed;
+        }
+      }
+    }
+    .container-content {
+      width: 100%;
+      display: flex;
+      flex-wrap: nowrap;
+      border-top: 1px solid #dcdfe6;
+
+      .week-list {
+        min-width: 50px;
+        width: calc(100% - 720px);
+        padding-top: 30px;
+        .week-name {
+          height: 24px;
+          line-height: 24px;
+          text-align: center;
+          font-size: 12px;
+        }
+      }
+
+      .mainbox {
+        width: 710px;
+        padding-left: 10px;
+        background-color: #eeeeee;
+
+        .time-list {
+          display: flex;
+          flex-wrap: wrap;
+          .list-item {
+            height: 16px;
+            width: 10px;
+            border: 1px solid #999;
+            border-radius: 2px;
+            margin: 0 1px 7px;
+            cursor: pointer;
+            background-color: #fff;
+          }
+          .list-item:nth-of-type(12n) {
+            margin-right: 10px;
+          }
+          .list-item.selected {
+            background-color: #0099ff;
+            border-color: #0099ff;
+          }
+        }
+        .main-header {
+          display: flex;
+          flex-wrap: nowrap;
+          .header-item {
+            width: 175px;
+            line-height: 30px;
+            text-align: center;
+            font-size: 12px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+

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

@@ -125,7 +125,16 @@ const PlanCreate = defineComponent({
         "/put/plan-create/" + this.routerList[2] + "?campaign_id=" + val
       );
       console.log("STEP2+1");
-      this.current++;
+      if (this.current === 1) this.current++;
+      window.localStorage.setItem("current-step", String(this.current));
+    });
+    Bus.$on("stepThreeBack", (val?: any) => {
+      // 第一步校验完成 携带account_id跳转创建广告组页面
+      this.$router.push(
+        "/put/plan-create/" + this.routerList[3] + "?plan_id=" + val
+      );
+      console.log("STEP3+1");
+      if (this.current === 2) this.current++;
       window.localStorage.setItem("current-step", String(this.current));
     });
   },

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

@@ -233,12 +233,16 @@ 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 };
+      if (window.localStorage.getItem("plan-create-campaign")) {
+        if (
+          this.isObjEqual(
+            JSON.parse(
+              String(window.localStorage.getItem("plan-create-campaign"))
+            ),
+            this.form
+          )
+        )
+          return { flag: true, campaign_id: this.form.campaign_id };
       }
       let campaign_id = 0;
       if (this.form.build_mode === "1") {
@@ -370,6 +374,9 @@ const GroupSelect = defineComponent({
       return true;
     },
   },
+  beforeUnmount() {
+    Bus.$off("stepTwoCheck");
+  },
 });
 
 export default GroupSelect;

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

@@ -1,22 +1,135 @@
 <template>
-  <div class="plan-edit">编辑计划</div>
+  <div class="plan-edit">
+    <div class="part-box">
+      <h1>优化目标</h1>
+      <!-- <time-schedule></time-schedule> -->
+      <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
+        <a-form-item label="转化跟踪方式">
+          <a-select placeholder="请选择">
+            <a-select-option value="shanghai">Zone one</a-select-option>
+            <a-select-option value="beijing">Zone two</a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item label="优化目标">
+          <a-select placeholder="请选择">
+            <a-select-option value="shanghai">Zone one</a-select-option>
+            <a-select-option value="beijing">Zone two</a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item label="落地页">
+          <a-select placeholder="请选择">
+            <a-select-option value="shanghai">Zone one</a-select-option>
+            <a-select-option value="beijing">Zone two</a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item label="直达链接内容">
+          <a-input placeholder="选填" />
+        </a-form-item>
+      </a-form>
+    </div>
+    <div class="part-box">
+      <h1>设置投放位置</h1>
+      <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
+        <a-form-item label="广告位置">
+          <a-radio-group>
+            <a-radio value="1">系统优选广告位</a-radio>
+            <a-radio value="2">首选媒体</a-radio>
+            <a-radio value="3">首选场景</a-radio>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item label="搜索快投关键词">
+          <a-switch />
+        </a-form-item>
+      </a-form>
+    </div>
+    <div class="part-box">
+      <h1>用户定向</h1>
+      <a-form :label-col="labelCol" :wrapper-col="wrapperCol"></a-form>
+    </div>
+    <div class="part-box">
+      <h1>预算与出价</h1>
+      <a-form :label-col="labelCol" :wrapper-col="wrapperCol"></a-form>
+    </div>
+    <div class="part-box">
+      <h1>第三方检测链</h1>
+      <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
+        <a-form-item label="展示">
+          <a-input placeholder="选填" />
+        </a-form-item>
+        <a-form-item label="有效触点">
+          <a-input placeholder="选填" />
+        </a-form-item>
+        <a-form-item label="视频播放">
+          <a-input placeholder="选填" />
+        </a-form-item>
+        <a-form-item label="视频播完">
+          <a-input placeholder="选填" />
+        </a-form-item>
+        <a-form-item label="视频有效播放">
+          <a-input placeholder="选填" />
+        </a-form-item>
+      </a-form>
+    </div>
+    <div class="part-box">
+      <h1>计划名称</h1>
+      <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
+        <a-form-item label="计划名称">
+          <a-input placeholder="选填" />
+        </a-form-item>
+        <a-form-item label="创建数量">
+          <a-input placeholder="选填" />
+        </a-form-item>
+      </a-form>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, reactive, toRefs } from "vue";
 import {} from "@/api";
+import Bus from "@/utils/bus";
+import TimeSchedule from "../component/time-schedule.vue";
 import { message } from "ant-design-vue";
 
 const PlanEdit = defineComponent({
+  components: {
+    TimeSchedule,
+  },
   setup() {
-    const state = reactive({});
-    return { ...toRefs(state) };
+    const state = reactive({
+      plan: {},
+    });
+    return {
+      ...toRefs(state),
+      labelCol: { span: 3 },
+      wrapperCol: { span: 8 },
+    };
+  },
+  mounted() {
+    Bus.$on("stepThreeCheck", (val?: any) => {
+      console.log("Step3Check");
+      Bus.$emit("stepThreeBack");
+    });
   },
-  mounted() {},
   methods: {},
+  beforeUnmount() {
+    Bus.$off("stepThreeCheck");
+  },
 });
 
 export default PlanEdit;
 </script>
 <style lang="scss" scoped>
+.plan-edit {
+  .part-box {
+    min-height: 100px;
+    border-bottom: 1px solid rgb(230, 230, 230);
+    padding-bottom: 30px;
+    h1 {
+      font-weight: bold;
+      height: 40px;
+      line-height: 40px;
+    }
+  }
+}
 </style>