BytedanceDeliveryTargetTemplateModal.vue 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. <template>
  2. <a-modal
  3. :title="title"
  4. :width="800"
  5. :visible="visible"
  6. :confirmLoading="confirmLoading"
  7. @ok="handleSubmit"
  8. @cancel="handleCancel"
  9. cancelText="关闭">
  10. <a-spin :spinning="confirmLoading">
  11. <a-form :form="form">
  12. <a-form-item
  13. label="投放目标"
  14. :labelCol="labelCol"
  15. :wrapperCol="wrapperCol">
  16. <a-radio-group @change="onChangeDeliveryTarget" v-model="deliveryTarget">
  17. <a-radio-button value="a">转化量</a-radio-button>
  18. <a-radio-button value="b">点击量</a-radio-button>
  19. <a-radio-button value="c">展示量</a-radio-button>
  20. </a-radio-group>
  21. </a-form-item>
  22. <a-form-item
  23. label="下载方式"
  24. :labelCol="labelCol"
  25. :wrapperCol="wrapperCol">
  26. <a-radio-group @change="onChangeDownloadType" v-model="downloadType">
  27. <a-radio-button value="DOWNLOAD_URL">下载链接</a-radio-button>
  28. <a-radio-button value="EXTERNAL_URL">落地页</a-radio-button>
  29. </a-radio-group>
  30. </a-form-item>
  31. <a-form-item
  32. label="下载链接"
  33. v-if="showDownloadUrl"
  34. :labelCol="labelCol"
  35. :wrapperCol="wrapperCol">
  36. <a-input placeholder="请输入网址或从之前网站选择" v-model="downloadUrl"/>
  37. </a-form-item>
  38. <a-form-item
  39. v-if="showExternalUrl"
  40. label="链接地址"
  41. :labelCol="labelCol"
  42. :wrapperCol="wrapperCol">
  43. <a-input placeholder="请输入网址或从之前网站选择" v-model="externalUrl"/>
  44. </a-form-item>
  45. <a-form-item
  46. v-if="showConvertTarget"
  47. label="转化目标"
  48. :labelCol="labelCol"
  49. :wrapperCol="wrapperCol">
  50. <a-input placeholder="请输入网址或从之前网站选择" v-model="convertTarget"/>
  51. </a-form-item>
  52. <a-form-item
  53. label="应用包名"
  54. v-if="showPackageName"
  55. :labelCol="labelCol"
  56. :wrapperCol="wrapperCol">
  57. <a-input v-model="packageName"></a-input>
  58. </a-form-item>
  59. <a-form-item
  60. label="直达链接"
  61. v-if="showOpenUrlStatus"
  62. :labelCol="labelCol"
  63. :wrapperCol="wrapperCol">
  64. <a-radio-group @change="onChangeOpenUrlStatus" v-model="openUrlStatus">
  65. <a-radio-button value="disabled">不启用</a-radio-button>
  66. <a-radio-button value="enabled">启用</a-radio-button>
  67. </a-radio-group>
  68. </a-form-item>
  69. <a-form-item
  70. label="直达链接生成方式"
  71. v-if="showOpenUrlCreateMode&&showOpenUrlStatus"
  72. :labelCol="labelCol"
  73. :wrapperCol="wrapperCol">
  74. <a-radio-group v-model="openUrlCreateMode">
  75. <a-radio-button value="auto_create" disabled>自动生成</a-radio-button>
  76. <a-radio-button value="hand_create">手动生成</a-radio-button>
  77. </a-radio-group>
  78. </a-form-item>
  79. <a-form-item
  80. label="跳转app链接"
  81. v-if="showToAppUrl&&showOpenUrlStatus"
  82. :labelCol="labelCol"
  83. :wrapperCol="wrapperCol">
  84. <a-input v-model="redirectUrl"></a-input>
  85. </a-form-item>
  86. <a-form-item
  87. label="模板名称"
  88. :labelCol="labelCol"
  89. :wrapperCol="wrapperCol">
  90. <a-input v-model="templateName"></a-input>
  91. </a-form-item>
  92. </a-form>
  93. </a-spin>
  94. </a-modal>
  95. </template>
  96. <script>
  97. import {deleteAction, postAction, getAction} from '@/api/manage'
  98. import $ from 'jquery'
  99. import moment from 'moment';
  100. export default {
  101. name: 'BytedanceDeliveryTargetTemplateModal',
  102. data() {
  103. return {
  104. title:"操作",
  105. visible: false,
  106. model: {},
  107. labelCol: {
  108. xs: { span: 24 },
  109. sm: { span: 5 },
  110. },
  111. wrapperCol: {
  112. xs: { span: 24 },
  113. sm: { span: 16 },
  114. },
  115. templateName:'',
  116. confirmLoading: false,
  117. form: this.$form.createForm(this),
  118. deliveryTarget:'a',
  119. packageName:'',
  120. downloadType:'DOWNLOAD_URL',
  121. downloadUrl:'',
  122. externalUrl:'',
  123. convertTarget:'',
  124. showDownloadUrl:true,
  125. showExternalUrl:false,
  126. showConvertTarget:true,
  127. showPackageName:true,
  128. showOpenUrlStatus:false,
  129. openUrlStatus:'disabled',
  130. redirectUrl:'',
  131. showToAppUrl:false,
  132. showOpenUrlCreateMode:false,
  133. openUrlCreateMode:'hand_create',
  134. url: {
  135. dictListUrl: 'toutiao/dictitem/list',
  136. insertUrl:'template/deliverytarget/insert'
  137. }
  138. }
  139. },
  140. methods: {
  141. // handler
  142. handleCancel () {
  143. this.close()
  144. },
  145. add () {
  146. this.edit({});
  147. },
  148. edit (record) {
  149. this.form.resetFields();
  150. this.model = Object.assign({}, record);
  151. this.visible = true;
  152. this.$nextTick(() => {
  153. this.form.setFieldsValue(pick(this.model,'accountId','advertiserId','deliveryTarget','downloadType','downloadUrl','externalUrl','convertTarget','packageName','openUrlStatus','openUrlCreateMode','redirectUrl','status'))
  154. //时间格式化
  155. });
  156. },
  157. close () {
  158. this.$emit('close');
  159. this.visible = false;
  160. },
  161. handleSubmit(e) {
  162. e.preventDefault()
  163. this.form.validateFields((err, values) => {
  164. if (!err) {
  165. console.log('Received values of form: ', values);
  166. let params = {};
  167. params.deliveryTarget = this.deliveryTarget;
  168. params.downloadType = this.downloadType;
  169. params.downloadUrl = this.downloadUrl;
  170. params.externalUrl = this.externalUrl;
  171. params.convertTarget = this.convertTarget;
  172. params.packageName = this.packageName;
  173. params.openUrlStatus = this.openUrlStatus;
  174. params.openUrlCreateMode = this.openUrlCreateMode;
  175. params.redirectUrl = this.redirectUrl;
  176. console.log(params)
  177. postAction(this.url.insertUrl,params).then((res)=>{
  178. console.log(res)
  179. if(res.success){
  180. alert("投放目标-模板创建成功");
  181. }
  182. });
  183. }
  184. })
  185. },
  186. onChange(value) {
  187. console.log(value);
  188. },
  189. onChangeDownloadType(value){
  190. console.log(value);
  191. if(this.downloadType == 'DOWNLOAD_URL'){
  192. this.showDownloadUrl = true;
  193. this.showExternalUrl = false;
  194. this.showPackageName=true;
  195. this.showOpenUrlStatus=false;
  196. }else{
  197. this.showDownloadUrl = false;
  198. this.showExternalUrl = true;
  199. this.showPackageName=false;
  200. this.showOpenUrlStatus=true;
  201. }
  202. },
  203. onChangeDeliveryTarget(value){
  204. console.log(value);
  205. if(this.deliveryTarget == 'a'){
  206. this.showConvertTarget = true;
  207. }else {
  208. this.showConvertTarget = false;
  209. }
  210. },
  211. onChangeOpenUrlStatus(){
  212. if(this.openUrlStatus=='disabled'){
  213. this.showOpenUrlCreateMode = false;
  214. this.showToAppUrl = false;
  215. }else{
  216. this.showOpenUrlCreateMode = true;
  217. this.showToAppUrl = true;
  218. }
  219. }
  220. }
  221. }
  222. </script>
  223. <style lang="less" scoped>
  224. </style>