ads_web/src/views/components/auto/target-select.vue

<script lang="ts" setup>
/**
 * @Name: target-select.vue
 * @Description: 自动化-定向规则-生效对象
 * @Author: Cheney
 */
import AdGroupSelect from '/@/views/components/ad-group-select/index.vue';

interface Props {
  mode: string;
  data: AutoRule;
  useTmpl?: boolean;
  campaignId: string;
}
const props = defineProps<Props>();
</script>

<template>
  <div>
    <span class="custom-title-icon"></span>
    <span class="asj-h3">生效对象</span>
    <div style="display: flex; flex-direction: column; align-items: flex-start">
      <div style="margin: 5px 0">
        <span>广告类型：</span>
        <el-select v-model="data.campaignType" :disabled="mode === 'edit' || useTmpl">
          <el-option label="SP" value="sp"></el-option>
          <el-option label="SB" value="sb"></el-option>
          <el-option label="SD" value="sd"></el-option>
        </el-select>
      </div>
      <el-radio-group v-model="data.activeModel" :disabled="mode === 'edit' || useTmpl">
        <div class="target-radio-group">
          <el-radio label="campaign">当前广告活动（所有定向）</el-radio>
          <div class="target-radio-group-item">
            <el-radio label="adGroup">当前广告活动的指定广告组（所有定向）</el-radio>
            <AdGroupSelect
              v-show="mode === 'auto' && data.activeModel === 'adGroup'"
              v-model="data.campaignAd"
              style="padding-left: 23px; width: 450px"
              :multiple="true"
              :query="{ profileId: '3006125408623189', campaignType: data.campaignType, campaignId: campaignId }">
            </AdGroupSelect>
          </div>
          <div class="target-radio-group-item">
            <el-radio label="specified">指定定向</el-radio>
            <el-button v-show="mode === 'auto' && data.activeModel === 'specified'" style="margin-left: 20px; color: blue" link
              >选择定向</el-button
            >
          </div>
        </div>
      </el-radio-group>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.target-radio-group {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  .target-radio-group-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
}

.custom-title-icon {
  padding-right: 10px;
}

.custom-title-icon:before {
  content: '';
  width: 4px;
  height: 15px;
  background: #3569d6;
  position: absolute;
  transform: translateY(55%);
}
</style>