RING:按省市

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

@@ -1,5 +1,6 @@
 <template>
   <div class="plan-edit">
+    <!-- part1------优化目标 -->
     <div class="part-box">
       <h1>优化目标</h1>
       <!-- <time-schedule></time-schedule> -->
@@ -27,6 +28,8 @@
         </a-form-item>
       </a-form>
     </div>
+
+    <!-- part2------设置投放位置 -->
     <div class="part-box">
       <h1>设置投放位置</h1>
       <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
@@ -42,14 +45,164 @@
         </a-form-item>
       </a-form>
     </div>
+
+    <!-- part3------用户定向 -->
     <div class="part-box">
       <h1>用户定向</h1>
-      <a-form :label-col="labelCol" :wrapper-col="wrapperCol"></a-form>
+      <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-group>
+        </a-form-item>
+        <!-- 地域组件 -->
+        <a-form-item label="地域">
+          <location :checkedCity="'[]'"></location>
+        </a-form-item>
+        <a-form-item label="性别">
+          <a-radio-group>
+            <a-radio-button value="0">不限</a-radio-button>
+            <a-radio-button value="1">男</a-radio-button>
+            <a-radio-button value="2">女</a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item label="年龄">
+          <a-checkbox-group>
+            <a-checkbox value="0">不限</a-checkbox>
+            <a-checkbox value="1">18-23</a-checkbox>
+            <a-checkbox value="2">24-30</a-checkbox>
+          </a-checkbox-group>
+        </a-form-item>
+        <!-- 自定义人群 -->
+        <a-form-item label="行为兴趣">
+          <a-radio-group>
+            <a-radio-button value="0">不限</a-radio-button>
+            <a-radio-button value="1">系统推荐</a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <!-- 媒体定向 -->
+        <a-form-item label="平台">
+          <a-checkbox-group>
+            <a-checkbox value="0">不限</a-checkbox>
+            <a-checkbox value="1">ios</a-checkbox>
+            <a-checkbox value="2">Android</a-checkbox>
+            <a-checkbox value="3">pc</a-checkbox>
+          </a-checkbox-group>
+        </a-form-item>
+        <a-form-item label="设备类型">
+          <a-checkbox-group>
+            <a-checkbox value="0">不限</a-checkbox>
+            <a-checkbox value="1">智能手机</a-checkbox>
+            <a-checkbox value="2">平板</a-checkbox>
+          </a-checkbox-group>
+        </a-form-item>
+        <a-form-item label="网络">
+          <a-checkbox-group>
+            <a-checkbox value="0">不限</a-checkbox>
+            <a-checkbox value="1">Wi-Fi</a-checkbox>
+            <a-checkbox value="2">2G</a-checkbox>
+            <a-checkbox value="3">3G</a-checkbox>
+            <a-checkbox value="4">4G</a-checkbox>
+          </a-checkbox-group>
+        </a-form-item>
+        <a-form-item label="已安装用户">
+          <a-radio-group>
+            <a-radio-button value="0">不限</a-radio-button>
+            <a-radio-button value="1">过滤</a-radio-button>
+            <a-radio-button value="2">定向</a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item label="过滤已转化用户">
+          <a-radio-group>
+            <a-radio-button value="0">不限</a-radio-button>
+            <a-radio-button value="1">广告计划</a-radio-button>
+            <a-radio-button value="2">广告组</a-radio-button>
+            <a-radio-button value="3">广告账户</a-radio-button>
+            <a-radio-button value="4">公司账户</a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item label="过滤时间">
+          <a-radio-group>
+            <a-radio-button value="0">当天</a-radio-button>
+            <a-radio-button value="1">7天</a-radio-button>
+            <a-radio-button value="2">1个月</a-radio-button>
+            <a-radio-button value="3">3个月</a-radio-button>
+            <a-radio-button value="4">6个月</a-radio-button>
+            <a-radio-button value="5">12个月</a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <!-- 文章分类 -->
+        <a-form-item label="运营商">
+          <a-checkbox-group>
+            <a-checkbox value="0">不限</a-checkbox>
+            <a-checkbox value="1">移动</a-checkbox>
+            <a-checkbox value="2">联通</a-checkbox>
+            <a-checkbox value="3">电信</a-checkbox>
+          </a-checkbox-group>
+        </a-form-item>
+        <a-form-item label="新用户">
+          <a-checkbox-group>
+            <a-checkbox value="0">不限</a-checkbox>
+            <a-checkbox value="1">一个月以内</a-checkbox>
+            <a-checkbox value="2">一个月到三个月</a-checkbox>
+            <a-checkbox value="3">三个月以上</a-checkbox>
+          </a-checkbox-group>
+        </a-form-item>
+        <!-- 手机品牌 -->
+        <a-form-item label="手机价格">
+          <a-radio-group>
+            <a-radio-button value="0">不限</a-radio-button>
+            <a-radio-button value="1">自定义</a-radio-button> </a-radio-group
+          >滑动条
+        </a-form-item>
+        <!-- 职业状态 -->
+        <!-- 智能放量 -->
+      </a-form>
     </div>
+
+    <!-- part4------预算与出价 -->
     <div class="part-box">
       <h1>预算与出价</h1>
-      <a-form :label-col="labelCol" :wrapper-col="wrapperCol"></a-form>
+      <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
+        <a-form-item label="投放场景">
+          <a-radio-group>
+            <a-radio-button value="0">常规投放</a-radio-button>
+            <a-radio-button value="1">放量投放</a-radio-button>
+          </a-radio-group>
+          <span style="font-size: 13px; color: gray"
+            >控制成本,尽量消耗完预算</span
+          >
+        </a-form-item>
+        <a-form-item label="竞价策略">
+          <a-radio-group>
+            <a-radio-button value="0">优先跑量</a-radio-button>
+            <a-radio-button value="1">均衡投放</a-radio-button>
+            <a-radio-button value="2">控制成本上限</a-radio-button>
+          </a-radio-group>
+        </a-form-item>
+        <!-- 预算 -->
+        <a-form-item label="投放时间">
+          <a-radio-group>
+            <a-radio-button value="0">从今天起长期投放</a-radio-button>
+            <a-radio-button value="1">设置开始和结束时间</a-radio-button>
+            时间选择器
+          </a-radio-group>
+        </a-form-item>
+        <!-- 投放时段 -->
+        <a-form-item label="付费方式">
+          <a-radio-group>
+            <a-radio value="0">按展示付费(oCPM)</a-radio>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item label="目标转化出价">
+          <a-input style="width: 100px" type="number" suffix="元" />
+          <span style="font-size: 13px; color: gray">出价不能大于预算</span>
+        </a-form-item>
+      </a-form>
     </div>
+
+    <!-- part5------第三方检测链 -->
     <div class="part-box">
       <h1>第三方检测链</h1>
       <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
@@ -70,6 +223,8 @@
         </a-form-item>
       </a-form>
     </div>
+
+    <!-- part6------计划名称 -->
     <div class="part-box">
       <h1>计划名称</h1>
       <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
@@ -89,11 +244,13 @@ import { defineComponent, reactive, toRefs } from "vue";
 import {} from "@/api";
 import Bus from "@/utils/bus";
 import TimeSchedule from "../component/time-schedule.vue";
+import Location from "../component/location-auto-release.vue";
 import { message } from "ant-design-vue";
 
 const PlanEdit = defineComponent({
   components: {
     TimeSchedule,
+    Location,
   },
   setup() {
     const state = reactive({