Step1.vue 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
  1. <template>
  2. <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
  3. <a-form @submit="handleSubmit" :form="form">
  4. <a-form-item
  5. label="推广目的"
  6. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  7. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  8. >
  9. <a-radio-group @change="typeChange" v-model="type" buttonStyle="solid">
  10. <!-- <a-radio-button
  11. v-for="purpose in typeList"
  12. :key="purpose.itemText"
  13. :value="purpose.itemValue"
  14. >{{purpose.itemText}}</a-radio-button> -->
  15. <a-radio-button value="2">提升应用安装</a-radio-button>
  16. <a-radio-button value="3">获取电商下单</a-radio-button>
  17. <a-radio-button value="4">推广品牌活动</a-radio-button>
  18. <a-radio-button value="5">收集销售线索</a-radio-button>
  19. </a-radio-group>
  20. </a-form-item>
  21. <a-form-item
  22. label="计划名称"
  23. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  24. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  25. >
  26. <a-input v-model="campaignName"></a-input>
  27. </a-form-item>
  28. <a-form-item
  29. label="单日预算"
  30. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  31. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  32. >
  33. <a-radio-group @change="showBudgetStatusChange" v-model="campaignBudget">
  34. <a-radio-button value="UNLIMITED">不限</a-radio-button>
  35. <a-radio-button value="AS_BUDGET">统一预算</a-radio-button>
  36. </a-radio-group>
  37. </a-form-item>
  38. <a-form-item
  39. label="预算金额"
  40. v-if="showBudgetDaily"
  41. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  42. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  43. >
  44. <a-input
  45. v-decorator="[
  46. 'dayBudget',
  47. { rules: [{ required: true, message: 'error:' }, { validator: handleConfirmValue }] }
  48. ]"
  49. placeholder="不小于500,不超过100000000,仅支持输入自然数"
  50. type="number"
  51. style="width: 70%"
  52. ></a-input
  53. >元
  54. </a-form-item>
  55. <!-- <a-form-item
  56. v-if="showApp"
  57. label="目标应用"
  58. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  59. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  60. >
  61. <a-select
  62. v-model="appId"
  63. showSearch
  64. allowClear
  65. placeholder="选择应用目标"
  66. optionFilterProp="children"
  67. style="width: 600px"
  68. @focus="handleFocus"
  69. @blur="handleBlur"
  70. @change="handleChange"
  71. :filterOption="filterOption"
  72. >
  73. <a-select-option v-for="appModel in appList" :key="appModel.id" :value="appModel.id"
  74. >{{ appModel.appName }}&#12288;&nbsp;&#12288;{{ appModel.appType }}&#12288;&#12288;
  75. {{ appModel.appVersion }}</a-select-option
  76. >
  77. </a-select>
  78. </a-form-item>
  79. <a-form-item
  80. v-if="showUrlType"
  81. label="转化类型"
  82. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  83. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  84. >
  85. <a-radio-group v-model="urlType">
  86. <a-radio-button value="1">淘宝商品短链</a-radio-button>
  87. <a-radio-button value="2">淘宝商品</a-radio-button>
  88. </a-radio-group>
  89. </a-form-item>
  90. <a-form-item
  91. v-if="showChannelType"
  92. label="转化类型"
  93. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  94. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  95. >
  96. <a-radio-group v-model="channelType">
  97. <a-radio-button value="1">填写链接</a-radio-button>
  98. <a-radio-button value="2" disabled="disabled">落地页工具</a-radio-button>
  99. </a-radio-group>
  100. </a-form-item>
  101. <a-form-item
  102. v-if="showRedirect"
  103. label="链接地址"
  104. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  105. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  106. >
  107. <a-input v-model="redirectUrl"></a-input>
  108. </a-form-item> -->
  109. <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
  110. <a-button htmlType="submit" type="primary">下一步</a-button>
  111. <!-- <a-button style="margin-left: 8px">保存</a-button> -->
  112. </a-form-item>
  113. </a-form>
  114. </a-card>
  115. </template>
  116. <script>
  117. import { deleteAction, postAction, getAction } from '@/api/manage'
  118. import moment from 'moment'
  119. import { mapActions, mapGetters } from 'vuex'
  120. export default {
  121. name: 'BaseForm',
  122. data() {
  123. return {
  124. promotionName: '',
  125. type: '2',
  126. typeList: {},
  127. appList: {},
  128. showBudgetDaily: false,
  129. campaignName: '提升应用安装_' + moment(new Date()),
  130. campaignBudget: 'UNLIMITED',
  131. dayBudget: 0,
  132. appId: '0', //应用目标
  133. showApp: true,
  134. redirectUrl: '', // 链接地址
  135. showRedirect: false,
  136. urlType: '1',
  137. showUrlType: false,
  138. channelType: '1',
  139. showChannelType: false,
  140. form: this.$form.createForm(this),
  141. url: {
  142. dictListUrl: 'toutiao/dictitem/list',
  143. appListUrl: '/kuaishou/kuaiShouCreateAppTemplate/list',
  144. insertTemplateUrl: '/kuaishou/batch/campaignCreate'
  145. }
  146. }
  147. },
  148. methods: {
  149. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  150. handleConfirmValue(rule, value, callback) {
  151. if (value == '' || value < 500 || value >= 100000000) {
  152. callback('请输入正确预算金额')
  153. }
  154. callback()
  155. },
  156. handleConfirmAppId(rule, value, callback) {
  157. if (this.type == 2 && (this.appId == '0' || this.appId == '')) {
  158. callback('请选择目标应用')
  159. }
  160. callback()
  161. },
  162. handleSubmit(e) {
  163. e.preventDefault()
  164. this.form.validateFields((err, values) => {
  165. if (!err) {
  166. console.log('Received values of form: ', values)
  167. let params = {}
  168. params.type = this.type
  169. // params.campaignBudget = this.campaignBudget
  170. params.dayBudget = this.campaignBudget == 'UNLIMITED' ? 0 : values.dayBudget
  171. params.campaignName = this.campaignName
  172. params.accountId = localStorage.getItem('accountId')
  173. console.log(params)
  174. postAction(this.url.insertTemplateUrl, params).then(res => {
  175. console.log(res)
  176. if (res.success) {
  177. this.$message.success('创建成功')
  178. this.nextStep(res.result)
  179. } else {
  180. this.$message.error(res.message)
  181. }
  182. })
  183. }
  184. })
  185. },
  186. onChange(value) {
  187. console.log(value)
  188. },
  189. showBudgetStatusChange() {
  190. if (this.campaignBudget == 'UNLIMITED') {
  191. this.showBudgetDaily = false
  192. this.dayBudget = 0
  193. } else {
  194. this.showBudgetDaily = true
  195. this.dayBudget = ''
  196. }
  197. },
  198. typeChange() {
  199. if (this.type == 2) {
  200. this.promotionName = '提升应用安装'
  201. this.showApp = true
  202. this.showRedirect = false
  203. this.showUrlType = false
  204. this.showChannelType = false
  205. }
  206. if (this.type == 3) {
  207. this.promotionName = '获取电商下单'
  208. this.showApp = false
  209. this.showRedirect = true
  210. this.showUrlType = true
  211. this.showChannelType = false
  212. }
  213. if (this.type == 4) {
  214. this.promotionName = '推广品牌活动'
  215. this.showApp = false
  216. this.showRedirect = true
  217. this.showUrlType = false
  218. this.showChannelType = false
  219. }
  220. if (this.type == 5) {
  221. this.promotionName = '收集销售线索'
  222. this.showApp = false
  223. this.showRedirect = true
  224. this.showUrlType = false
  225. this.showChannelType = true
  226. }
  227. this.campaignName = this.promotionName + '_' + moment(new Date())
  228. },
  229. handleChange(value) {
  230. console.log(`selected ${value}`)
  231. },
  232. handleBlur() {
  233. console.log('blur')
  234. },
  235. handleFocus() {
  236. console.log('focus')
  237. },
  238. filterOption(input, option) {
  239. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  240. },
  241. nextStep() {
  242. this.$emit('nextStep')
  243. }
  244. },
  245. activated: function() {
  246. // //出价方式
  247. // let params = {}
  248. // params.dictId = '181afbae847dd3bc7e27795d8958956'
  249. // params.pageSize = '1000'
  250. // getAction(this.url.dictListUrl, params).then(res => {
  251. // if (res.success) {
  252. // this.typeList = res.result.records
  253. // }
  254. // })
  255. // // 应用列表
  256. // //出价方式
  257. // let params2 = {}
  258. // params2.loginId = this.userInfo().id
  259. // params2.pageSize = '1000'
  260. // getAction(this.url.appListUrl, params).then(res => {
  261. // if (res.success) {
  262. // this.appList = res.result.records
  263. // console.log(this.appList)
  264. // }
  265. // })
  266. }
  267. }
  268. </script>