timer-bid.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. <template>
  2. <div class="mx-5">
  3. <div class="asj-h2">分时调价</div>
  4. <div class="mt-3.5">
  5. 规则执行时区: PDT
  6. <div>
  7. <el-tag v-if="isVisible" class="custom-tag" closable color="#e7edf4" @close="handleClose">
  8. <template #default>
  9. <div class="tag-content">
  10. <strong>自动化分时规则:</strong>
  11. <p>
  12. 1.
  13. 应用分时调价后,如需手动修改竞价,只能在此操作。在亚马逊后台或其他第三方系统进行的调价操作,竞价将会被当前时段的自动化执行结果覆盖。
  14. </p>
  15. <p>2. 广告活动开启分时调价,规则的修改将在下一个整点生效。</p>
  16. </div>
  17. </template>
  18. </el-tag>
  19. </div>
  20. </div>
  21. <el-form ref="formRef" :model="formData" label-position="top" style="margin-top: 20px">
  22. <el-form-item :rules="{ required: true, message: '必填项', trigger: 'blur' }" prop="name">
  23. <template #label>
  24. <span class="asj-h3">模板名称</span>
  25. </template>
  26. <el-input v-model="formData.name" style="width: 30%"></el-input>
  27. </el-form-item>
  28. <el-form-item :rules="[{ validator: checkConditions, trigger: 'xxx' }]" prop="rule.conditions">
  29. <template #label>
  30. <span class="asj-h3">设置竞价</span>
  31. </template>
  32. <div class="flex flex-col">
  33. <div class="flex gap-2 my-2">
  34. <el-select v-model="timeRange">
  35. <el-option v-for="item in timeRangeOptions" :key="item.value" :label="item.label" :value="item.value" />
  36. </el-select>
  37. <el-select v-model="schedule">
  38. <el-option v-for="item in scheduleOptions" :key="item.value" :label="item.label" :value="item.value" />
  39. </el-select>
  40. <el-input v-model="bid"
  41. clearable
  42. oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
  43. placeholder="1.0"
  44. style="width: 150px"
  45. ></el-input>
  46. <el-button class="active-btn" link style="color: #3c58af"
  47. @click="handleApply">应用
  48. </el-button>
  49. </div>
  50. </div>
  51. </el-form-item>
  52. </el-form>
  53. <TimerBidTable
  54. ref="tableRef"
  55. :data="formData.rule.conditions"
  56. @click="formRef.clearValidate('rule.conditions')" />
  57. <div class="auto-page-foot">
  58. <el-button style="width: 200px" @click="cancel">取消</el-button>
  59. <el-button style="width: 200px" type="primary" @click="submitForm">提交</el-button>
  60. </div>
  61. </div>
  62. </template>
  63. <script lang="ts" setup>
  64. /**
  65. * @Name: timer-bid.vue
  66. * @Description: 自动化规则模板-分时调价
  67. * @Author: xinyan
  68. */
  69. import { ref, onMounted, Ref } from 'vue';
  70. import TimerBidTable from '/@/components/TimerBidTable/index.vue';
  71. import { userFormData } from '/@/views/components/auto/auto-campaigns/common';
  72. interface Props {
  73. mode: string;
  74. data: AutoTemplate;
  75. submitFormData: Function;
  76. }
  77. const props = defineProps<Props>();
  78. const emits = defineEmits(['refresh']);
  79. const formRef = ref();
  80. const formData = ref(props.data)
  81. const timeRange = ref('Option1');
  82. const schedule = ref('Option1');
  83. const bid = ref('1.0');
  84. const tableRef = ref(null);
  85. const timeRangeOptions = [
  86. {
  87. value: 'Option1',
  88. label: '24小时: 00:00-23:59',
  89. },
  90. {
  91. value: 'Option2',
  92. label: '凌晨: 00:00-06:59',
  93. },
  94. {
  95. value: 'Option3',
  96. label: '上午: 7:00-11:59',
  97. },
  98. {
  99. value: 'Option4',
  100. label: '工作时: 9:00-16:59',
  101. },
  102. {
  103. value: 'Option5',
  104. label: '下午: 12:00-16:59',
  105. },
  106. {
  107. value: 'Option6',
  108. label: '晚上: 17:00-20:59',
  109. },
  110. {
  111. value: 'Option7',
  112. label: '深夜: 21:00-23:59',
  113. },
  114. ];
  115. const scheduleOptions = [
  116. {
  117. value: 'Option1',
  118. label: '每一天',
  119. },
  120. {
  121. value: 'Option2',
  122. label: '仅在工作日',
  123. },
  124. {
  125. value: 'Option3',
  126. label: '仅在周末',
  127. },
  128. ];
  129. const isVisible = ref(true);
  130. if (props.mode === 'add') {
  131. for (let i = 0; i < 7; i++) {
  132. const tmp = [];
  133. for (let j = 0; j < 24; j++) {
  134. tmp.push(0);
  135. }
  136. formData.value.rule.conditions.push(tmp);
  137. }
  138. }
  139. function handleClose() {
  140. isVisible.value = false;
  141. }
  142. const handleApply = () => {
  143. if (tableRef.value) {
  144. tableRef.value.applyBid(timeRange.value, schedule.value, parseFloat(bid.value));
  145. }
  146. };
  147. const checkConditions = (rule: any, value: any, callback: any) => {
  148. for (const bidList of formData.value.rule.conditions) {
  149. for (const val of bidList) {
  150. if (val > 0) {
  151. return callback();
  152. }
  153. }
  154. }
  155. callback(new Error('请先设置竞价!'));
  156. };
  157. const submitForm = async () => {
  158. formRef.value.validate(async (valid: any) => {
  159. if (valid) {
  160. await props.submitFormData();
  161. emits('refresh');
  162. } else {
  163. console.log('验证失败');
  164. }
  165. });
  166. };
  167. const cancel = () => {
  168. emits('refresh');
  169. };
  170. </script>
  171. <style scoped>
  172. .custom-tag {
  173. height: auto;
  174. padding: 8px 8px 8px 16px;
  175. color: #505968;
  176. border-color: #abbbd8;
  177. align-items: flex-start !important;
  178. white-space: normal;
  179. line-height: 1.5;
  180. }
  181. </style>