| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836 | <template>  <div class="app-container">    <h2>广告创建</h2>    <el-form      ref="formCampaign"      :model="formCampaign"      :rules="rules"      label-width="150px"    >      <el-row :gutter="20">        <el-col :span="24">          <el-card class="box-card">            <div slot="header" class="clearfix">              <span>广告计划</span>            </div>            <el-form-item label="选择账户" prop="accountId">              <el-select                v-model="formCampaign.accountId"                placeholder="选择账户类型"                clearable                filterable                style="width: 240px"                :disabled="editVisble"              >                <el-option                  v-for="(item, index) in formList.accountList"                  :key="index"                  :label="item.label + '(' + item.value + ')'"                  :value="item.value"                />              </el-select>            </el-form-item>            <el-form-item label="推广方式" prop="promotionType">              <el-radio-group v-model="formCampaign.promotionType">                <el-radio-button                  v-for="(item, index) in formList.promotionTypeList"                  :key="index"                  :label="item.value"                  :disabled="item.value != '2'"                  >{{ item.label }}</el-radio-button                >              </el-radio-group>            </el-form-item>            <el-form-item label="营销目标" prop="campaignType">              <el-radio-group v-model="formCampaign.campaignType">                <el-radio-button                  v-for="(item, index) in formList.campaignTypeList"                  :key="index"                  :label="item.value"                  :disabled="item.value != '14'"                  >{{ item.label }}</el-radio-button                >              </el-radio-group>            </el-form-item>            <el-form-item label="计划预算" prop="dayBudgetType">              <el-radio-group v-model="formCampaign.dayBudgetType">                <el-radio-button                  v-for="(item, index) in formList.dayBudgetTypeList"                  :key="index"                  :label="item.value"                  >{{ item.label }}</el-radio-button                >              </el-radio-group>            </el-form-item>            <el-form-item              label=" "              prop="dayBudget"              v-if="formCampaign.dayBudgetType == '2'"            >              <el-input                placeholder="请输入单日预算"                v-model.number="formCampaign.dayBudget"                style="width: 450px"              >                <template slot="append">元</template>              </el-input>            </el-form-item>            <el-form-item              label=" "              prop="budgetSchedule"              v-if="formCampaign.dayBudgetType == '3'"            >              <el-row class="only-the-class">                <el-col                  :span="3"                  v-for="(item, index) of budgetSchedule"                  :key="index"                >                  <el-card shadow="never">                    <div slot="header" class="clearfix">                      {{ "周" + numberReturn(index) }}                    </div>                    <el-input-number                      style="width: 100%"                      :min="500"                      :max="100000000"                      v-model="item.one"                      :precision="1"                    />                  </el-card>                </el-col>              </el-row>            </el-form-item>            <el-form-item label="计划名称" prop="campaignName">              <el-input                v-model="formCampaign.campaignName"                style="width: 450px"              />            </el-form-item>          </el-card>        </el-col>        <el-col :span="24" style="margin-top: 15px">          <el-card class="box-card">            <div slot="header" class="clearfix">              <span>广告组</span>            </div>            <el-form-item label="日预算" prop="groupDayBudget">              <el-radio-group                v-model="formCampaign.groupDayBudget"                @change="$set(formCampaign, 'groupDayBudgetInput', undefined)"              >                <el-radio-button                  v-for="(item, index) in formList.groupDayBudgetList"                  :key="index"                  :label="item.value"                  >{{ item.label }}</el-radio-button                >              </el-radio-group>            </el-form-item>            <el-form-item              label=" "              prop="groupDayBudgetInput"              v-if="formCampaign.groupDayBudget == 1"            >              <el-input                placeholder="请输入单日预算"                v-model.number="formCampaign.groupDayBudgetInput"                style="width: 450px"              >                <template slot="append">元</template>              </el-input>            </el-form-item>            <el-form-item label="投放方式" prop="speed">              <el-radio-group v-model="formCampaign.speed">                <el-radio-button                  v-for="(item, index) in formList.speedList"                  :key="index"                  :label="item.value"                  :disabled="item.value != 5"                  >{{ item.label }}</el-radio-button                >              </el-radio-group>            </el-form-item>            <el-form-item label="投放时间" prop="timeType">              <el-radio-group                v-model="formCampaign.timeType"                @change="formCampaign.scheduleTime = undefined"              >                <el-radio-button                  v-for="(item, index) in formList.timeTypeList"                  :key="index"                  :label="item.value"                  :disabled="item.value == 1"                  >{{ item.label }}</el-radio-button                >              </el-radio-group>            </el-form-item>            <el-form-item              label=" "              prop="timeStr"              v-if="formCampaign.timeType == 3"            >              <el-date-picker                v-model="formCampaign.timeStr"                type="daterange"                range-separator="至"                start-placeholder="开始日期"                end-placeholder="结束日期"                value-format="yyyy-MM-dd"                style="width: 450px"              >              </el-date-picker>            </el-form-item>            <el-form-item              label="投放时段"              prop="scheduleTime"              v-if="formCampaign.timeType == 2"            >              <ScheduleTime                v-if="formCampaign.timeType == 2"                style="width: 100%; margin-right: 5px"                :scheduleTime.sync="formCampaign.scheduleTime"              />            </el-form-item>            <el-form-item label="创意组成方式" prop="showModeTwo">              <el-radio-group v-model="formCampaign.showModeTwo">                <el-radio-button                  v-for="(item, index) in formList.showModeList"                  :key="index"                  :label="item.value"                  >{{ item.label }}</el-radio-button                >              </el-radio-group>            </el-form-item>            <el-form-item label="创意展示方式" prop="showMode">              <el-radio-group v-model="formCampaign.showMode">                <el-radio-button                  v-for="(item, index) in formList.showModeOneList"                  :key="index"                  :label="item.value"                  >{{ item.label }}</el-radio-button                >              </el-radio-group>            </el-form-item>            <el-form-item              label="资源位置"              prop="sceneId"              :rules="{                required: true,                message: '资源位置不能为空',                trigger: 'change',              }"            >              <el-checkbox-group v-model="formCampaign.sceneId">                <el-checkbox-button                  v-for="(item, index) in formList.sceneIdList"                  :label="item.value"                  :key="item.value"                  :disabled="item.disabled"                  >{{ item.label }}</el-checkbox-button                >              </el-checkbox-group>            </el-form-item>            <el-form-item label="电商广告类型" prop="merchantItemPutType">              <el-radio-group v-model="formCampaign.merchantItemPutType">                <el-radio-button                  v-for="(item, index) in formList.merchantItemPutTypeList"                  :key="index"                  :label="item.value"                  >{{ item.label }}</el-radio-button                >              </el-radio-group>            </el-form-item>            <el-form-item label="辅助类型" prop="supportType">              <el-radio-group v-model="formCampaign.supportType">                <el-radio-button                  v-for="(item, index) in formList.supportTypeList"                  :key="index"                  :label="item.value"                  :disabled="item.disabled"                  >{{ item.label }}</el-radio-button                >              </el-radio-group>            </el-form-item>            <el-form-item label="广告组名称" prop="unitName">              <el-input                v-model="formCampaign.unitName"                style="width: 450px"                id="unitName"              />              <br />              <el-tag                @click="getChangeAll('定向包名', 'formInformation', 'unitName')"                >+定向包名</el-tag              >              <el-tag                @click="                  getChangeAll('人群定向名', 'formInformation', 'unitName')                "                >+人群定向名</el-tag              >              <el-tag                @click="                  getChangeAll('人群排除名', 'formInformation', 'unitName')                "                >+人群排除名</el-tag              >              <el-tag                @click="getChangeAll('转化目标', 'formInformation', 'unitName')"                >+转化目标</el-tag              >              <el-tag                @click="getChangeAll('出价', 'formInformation', 'unitName')"                >+出价</el-tag              >              <el-tag                @click="getChangeAll('日期', 'formInformation', 'unitName')"                >+日期</el-tag              >            </el-form-item>          </el-card>        </el-col>        <el-col :span="24" style="margin-top: 15px">          <el-card class="box-card">            <div slot="header" class="clearfix">              <span>创意设置</span>            </div>            <el-form-item label="作品类型" prop="liveCreativeType">              <el-radio-group v-model="formCampaign.liveCreativeType">                <el-radio-button                  v-for="(item, index) in formList.liveCreativeTypeList"                  :key="index"                  :label="item.value"                  :disabled="item.disabled"                  >{{ item.label }}</el-radio-button                >              </el-radio-group>            </el-form-item>            <el-form-item label="创意名称" prop="creativeName">              <el-input                v-model="formCampaign.creativeName"                style="width: 450px"              />            </el-form-item>          </el-card>        </el-col>        <el-col :span="24">          <div class="dialog-footer" style="float: right; margin-top: 15px">            <el-button              type="primary"              @click="submitForm"              :loading="confirmLoading"              >确 定</el-button            >            <el-button @click="close">取 消</el-button>          </div>        </el-col>      </el-row>    </el-form>  </div></template><script>import { refreshCache } from "@/api/system/dict/type";import vueUpload from "../trader/components/vueUpload";import FileUpload from "../trader/components/upload";import { editLaunch, addLaunchList, getById } from "@/api/live/live";import { getAccountList } from "@/api/trader/trader";export default {  name: "create-live",  components: {    vueUpload,    FileUpload,  },  data() {    return {      userId: undefined,      confirmLoading: false,      //广告创建表单      formCampaign: {        promotionType: "2",        campaignType: "14",        dayBudgetType: "1",        groupDayBudget: 300,        speed: 5,        timeType: 3,        showModeTwo: 3,        showMode: 1,        sceneId: [6],        merchantItemPutType: 2,        supportType: 0,        liveCreativeType: 1,      },      budgetSchedule: [        { one: undefined },        { one: undefined },        { one: undefined },        { one: undefined },        { one: undefined },        { one: undefined },        { one: undefined },      ],      //表单使用的下拉列表      formList: {        accountList: [          { value: "1", label: "极速推广" },          { value: "2", label: "专业推广" },        ],        promotionTypeList: [          { value: "1", label: "极速推广" },          { value: "2", label: "专业推广" },        ],        campaignTypeList: [          { value: "3", label: "获取电商下单" },          { value: "12", label: "小店商品推广" },          { value: "14", label: "直播推广" },        ],        dayBudgetTypeList: [          { value: "1", label: "不限" },          { value: "2", label: "单日预算" },          { value: "3", label: "分日预算" },        ],        groupDayBudgetList: [          { value: 300, label: "¥300" },          { value: 500, label: "¥500" },          { value: 1000, label: "¥1000" },          { value: 3000, label: "¥3000" },          { value: 5000, label: "¥5000" },          { value: 1, label: "自定义" },        ],        speedList: [          { value: 5, label: "最大转化" },          { value: 1, label: "成本保护" },        ],        timeTypeList: [          { value: 1, label: "固定时长" },          { value: 2, label: "从今天开始长期投放" },          { value: 3, label: "设置开始结束日期" },        ],        showModeList: [          { value: 1, label: "自主选择" },          { value: 2, label: "系统优选" },          { value: 3, label: "自主选择+系统优选" },        ],        showModeOneList: [          { value: 1, label: "轮播" },          { value: 2, label: "优选" },        ],        sceneIdList: [          { value: 6, label: "上下划大屏广告", disabled: false },          { value: 7, label: "优选信息流广告", disabled: false },          { value: 10, label: "联盟场景", disabled: true },          { value: 41, label: "激励广告", disabled: true },        ],        merchantItemPutTypeList: [          { value: 0, label: "商品" },          { value: 2, label: "个人主页" },        ],        supportTypeList: [          { value: 0, label: "小店", disabled: false },          { value: 3, label: "金牛", disabled: true },        ],        liveCreativeTypeList: [          { value: 1, label: "直播投流", disabled: false },          { value: 2, label: "视频引流", disabled: true },        ],      },      //表单验证      rules: {        accountId: [          {            required: true,            message: "账户必选",            trigger: "change",          },        ],        dayBudget: [          {            required: true,            message: "单日预算不能为空",            trigger: "change",          },          {            type: "number",            min: 500,            max: 100000000,            message: "预算不能少于500,不能超过100000000",            trigger: "change",          },        ],        groupDayBudgetInput: [          {            required: true,            message: "单日预算不能为空",            trigger: "change",          },          {            type: "number",            min: 300,            max: 2000000,            message: "预算不能少于300,不能超过2000000",            trigger: "change",          },        ],        campaignName: [          {            required: true,            message: "计划名称不能为空",            trigger: "blur",          },          {            min: 1,            max: 50,            message: "请填写广告计划名称, 最多50字",            trigger: "change",          },        ],        timeStr: [          {            required: true,            message: "时间段必填",            trigger: "change",          },        ],        unitName: [          {            required: true,            message: "广告组名称不能为空",            trigger: "blur",          },          {            min: 1,            max: 50,            message: "请填写广告组名称, 最多50字",            trigger: "change",          },        ],        creativeName: [          {            required: true,            message: "广告创意名称不能为空",            trigger: "blur",          },          {            min: 1,            max: 50,            message: "请填写广告创意名称, 最多50字",            trigger: "change",          },        ],        editRecordId: null,        editVisble: false,      },    };  },  created() {    this.userId = this.$store.getters.userId;    this.getAccountList();    if (this.$route && this.$route.query.id) {      this.editRecordId = this.$route.query.id;      this.editVisble = true;      this.getDetail(this.editRecordId);    }  },  filters: {},  methods: {    getDetail(item) {      getById({ id: item })        .then((res) => {          var data = res.data;          this.$set(this.formCampaign, "accountId", data.accountId);          this.$set(this.formCampaign, "promotionType", data.promotionType);          this.$set(this.formCampaign, "campaignType", data.campaignType);          if (!!data.dayBudget && data.dayBudget != -1) {            this.$set(this.formCampaign, "dayBudgetType", "2");            setTimeout(() => {              this.$set(this.formCampaign, "dayBudget", data.dayBudget / 1000);            }, 0);          } else if (!!data.budgetSchedule) {            var index = JSON.parse(data.budgetSchedule).findIndex((item) => {              return item != 0;            });            if (index > -1) {              this.$set(this.formCampaign, "dayBudgetType", "3");              this.budgetSchedule = JSON.parse(data.budgetSchedule).map(                (item) => {                  return { one: item > 0 ? item / 1000 : undefined };                }              );            } else {              this.$set(this.formCampaign, "dayBudgetType", "1");            }          }          this.$set(this.formCampaign, "campaignName", data.campaignName);          if (!!data.groupDayBudget) {            if (              data.groupDayBudget / 1000 == 300 ||              data.groupDayBudget / 1000 == 500 ||              data.groupDayBudget / 1000 == 1000 ||              data.groupDayBudget / 1000 == 3000 ||              data.groupDayBudget / 1000 == 5000            ) {              this.$set(                this.formCampaign,                "groupDayBudget",                data.groupDayBudget / 1000              );            } else {              this.$set(this.formCampaign, "groupDayBudget", 1);              this.$set(                this.formCampaign,                "groupDayBudgetInput",                data.groupDayBudget / 1000              );            }          } else {            this.$set(this.formCampaign, "groupDayBudget", 300);          }          this.$set(this.formCampaign, "speed", data.speed);          if (data.scheduleTime == "") {            this.$set(this.formCampaign, "timeType", 3);            setTimeout(() => {              this.$set(                this.formCampaign,                "timeStr",                !!data.beginTimeStr                  ? [data.beginTimeStr, data.endTimeStr]                  : undefined              );            }, 0);          } else {            this.$set(this.formCampaign, "timeType", 2);            this.$set(this.formCampaign, "scheduleTime", data.scheduleTime);          }          this.$set(this.formCampaign, "unitName", data.unitName);          this.$set(this.formCampaign, "creativeName", data.creativeName);          this.$set(this.formCampaign, "showMode", data.showMode);          this.$set(this.formCampaign, "sceneId", JSON.parse(data.sceneId));          this.$set(            this.formCampaign,            "merchantItemPutType",            data.merchantItemPutType          );          this.$set(this.formCampaign, "supportType", data.supportType);          this.$set(            this.formCampaign,            "liveCreativeType",            data.liveCreativeType          );        })        .catch(() => {});    },    getAccountList() {      getAccountList({        userId: this.userId,        pageNum: 1,        pageSize: 100000,      }).then((response) => {        this.formList.accountList = response.rows.map((item) => {          return {            value: item.accountId,            label: item.accountName,          };        });      });    },    numberReturn(num) {      var arr = ["一", "二", "三", "四", "五", "六", "日"];      return arr[num];    },    // 失去焦点金额格式化    nowInputMoney(el) {      this.inputMoney(el).then((res) => {        this.formCampaign.dayBudget = res;      });    },    // 获得焦点金额去掉格式    nowUninputMoney(el) {      if (!!el.target.value) {        this.uninputMoney(el).then((res) => {          this.formCampaign.dayBudget = res;        });      }    },    //设置通配符    getChangeAll(type, form, field) {      var node = document.getElementById(field);      var v = "-{{" + type + "}}-";      if (document.selection) {        //IE        node.focus();        var sel = document.selection.createRange();        sel.text = v;        sel.select();        this.$set(this.formCampaign, field, sel.text);      } else if (node.selectionStart || node.selectionStart == "0") {        //MOZILLA/GOOGLE        var startPos = node.selectionStart;        var endPos = node.selectionEnd;        var restoreTop = node.scrollTop;        node.value =          node.value.substring(0, startPos) +          v +          node.value.substring(endPos, node.value.length);        if (restoreTop > 0) {          node.scrollTop = restoreTop;        }        // this.formCampaign[field] = node.value;        this.$set(this.formCampaign, field, node.value);        node.focus();        node.selectionStart = startPos + v.length;        node.selectionEnd = startPos + v.length;        // this.campaignName = node.value      } else {        //OTHER        node.value += v;        // console.log(node.value)        this.$set(this.formCampaign, field, node.value);        node.focus();        // this.campaignName = node.value      }    },    close() {      if (this.editRecordId) {        const obj = {          path: "/live/create",          query: { id: this.editRecordId },        };        const objOpen = { path: "/live/index" };        this.$tab.closeOpenPage(obj);        this.$tab.closePage(obj);        this.$router.push(objOpen.path);      } else {        const obj = { path: "/live/create" };        const objOpen = { path: "/live/index" };        this.$tab.closeOpenPage(obj);        this.$tab.closePage(obj);        this.$router.push(objOpen.path);      }    },    // 创建    submitForm() {      this.$refs["formCampaign"].validate((valid) => {        if (valid) {          var params = { ...this.formCampaign };          if (params.dayBudgetType == "1") {            params.budgetSchedule = [0, 0, 0, 0, 0, 0, 0];            params.dayBudget = -1;          } else if (params.dayBudgetType == "2") {            params.dayBudget = params.dayBudget * 1000;            params.budgetSchedule = [];          } else if (params.dayBudgetType == "3") {            var index = this.budgetSchedule.findIndex((item) => {              return !item.one;            });            if (index > -1) {              this.$message.error("分日预算必须全部填写");              return;            } else {              params.budgetSchedule = this.budgetSchedule.map((item) => {                return !!item.one ? item.one * 1000 : 0;              });              params.dayBudget = -1;            }          }          if (params.groupDayBudget == 1) {            params.groupDayBudget =              this.formCampaign.groupDayBudgetInput * 1000;          } else {            params.groupDayBudget = params.groupDayBudget * 1000;          }          if (params.timeType == 3) {            if (!this.formCampaign.timeType) {            } else {              params.beginTimeStr = this.formCampaign.timeStr[0];              params.endTimeStr = this.formCampaign.timeStr[1];            }            params.scheduleTime = "";          } else if (params.timeType == 2) {            params.scheduleTime = !!params.scheduleTime              ? params.scheduleTime              : "000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000";            params.beginTimeStr = "";            params.endTimeStr = "";          }          params.createrId = this.userId;          params.showMode = this.formCampaign.showMode;          params.sceneId = this.formCampaign.sceneId;          params.merchantItemPutType = this.formCampaign.merchantItemPutType;          params.supportType = this.formCampaign.supportType;          params.liveCreativeType = this.formCampaign.liveCreativeType;          var that = this;          if (this.editRecordId) {            params.id = this.editRecordId;            editLaunch(params)              .then((res) => {                const obj = {                  path: "/live/create",                  query: { id: this.editRecordId },                };                const objOpen = { path: "/live/index" };                this.$tab.closeOpenPage(obj);                this.$tab.closePage(obj);                this.$router.push(objOpen.path);              })              .catch((err) => {});          } else {            addLaunchList(params)              .then((res) => {                const obj = { path: "/live/create" };                const objOpen = { path: "/live/index" };                this.$tab.closeOpenPage(obj);                this.$tab.closePage(obj);                this.$router.push(objOpen.path);              })              .catch((err) => {});          }        }      });    },  },};</script><style lang="scss" scoped>.entire-line {  width: 100%;  ::v-deep .el-form-item__content {    width: 60%;  }}::v-deep .el-form-item__label {  white-space: nowrap;}::v-deep .el-tag {  margin-right: 15px;}::v-deep .only-the-class .el-input__inner {  padding: 0;}::v-deep .el-input-number__decrease {  display: none;}::v-deep .el-input-number__increase {  display: none;}</style>
 |