timer-bid.vue 5.7 KB

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