creatCampaign.vue 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  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: ' ' }, { 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 :wrapperCol="{ span: 24 }" style="text-align: center">
  56. <a-button htmlType="submit" type="primary" :loading="loading">下一步</a-button>
  57. <!-- <a-button style="margin-left: 8px">保存</a-button> -->
  58. </a-form-item>
  59. </a-form>
  60. </a-card>
  61. </template>
  62. <script>
  63. import { deleteAction, postAction, getAction } from '@/api/manage'
  64. import moment from 'moment'
  65. import { mapActions, mapGetters } from 'vuex'
  66. export default {
  67. name: 'Step1',
  68. data() {
  69. return {
  70. promotionName: '',
  71. type: '2',
  72. typeList: {},
  73. appList: {},
  74. showBudgetDaily: false,
  75. campaignName: '提升应用安装_' + moment(new Date()),
  76. campaignBudget: 'UNLIMITED',
  77. dayBudget: 0,
  78. appId: '0', //应用目标
  79. showApp: true,
  80. redirectUrl: '', // 链接地址
  81. showRedirect: false,
  82. urlType: '1',
  83. showUrlType: false,
  84. channelType: '1',
  85. showChannelType: false,
  86. loading: false,
  87. form: this.$form.createForm(this),
  88. url: {
  89. dictListUrl: 'toutiao/dictitem/list',
  90. appListUrl: '/kuaishou/kuaiShouCreateAppTemplate/list',
  91. insertTemplateUrl: '/kuaishou/batch/campaignCreate',
  92. },
  93. }
  94. },
  95. methods: {
  96. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  97. getCampaignId(campaignId) {
  98. alert(1)
  99. },
  100. handleConfirmValue(rule, value, callback) {
  101. if (value == '' || value < 500 || value >= 100000000) {
  102. callback('请输入正确预算金额')
  103. }
  104. callback()
  105. },
  106. handleConfirmAppId(rule, value, callback) {
  107. if (this.type == 2 && (this.appId == '0' || this.appId == '')) {
  108. callback('请选择目标应用')
  109. }
  110. callback()
  111. },
  112. handleSubmit(e) {
  113. e.preventDefault()
  114. this.form.validateFields((err, values) => {
  115. if (!err) {
  116. this.loading = true
  117. console.log('Received values of form: ', values)
  118. let params = {}
  119. params.type = this.type
  120. // params.campaignBudget = this.campaignBudget
  121. params.dayBudget = this.campaignBudget == 'UNLIMITED' ? 0 : values.dayBudget * 1000
  122. params.campaignName = this.campaignName
  123. params.accountId = localStorage.getItem('campaignAccountId')
  124. console.log(params)
  125. postAction(this.url.insertTemplateUrl, params).then((res) => {
  126. console.log(res)
  127. if (res.success) {
  128. this.$message.success('创建成功')
  129. localStorage.setItem('campaignList', res.result)
  130. localStorage.setItem('campaignType', this.type)
  131. this.loading = false
  132. this.$bus.$emit('remove', '/creat/creatCampaign')
  133. this.$router.push({
  134. path: '/creat/creatUnit',
  135. })
  136. } else {
  137. this.$message.error(res.message)
  138. this.loading = false
  139. }
  140. })
  141. }
  142. })
  143. },
  144. onChange(value) {
  145. console.log(value)
  146. },
  147. showBudgetStatusChange() {
  148. if (this.campaignBudget == 'UNLIMITED') {
  149. this.showBudgetDaily = false
  150. this.dayBudget = 0
  151. } else {
  152. this.showBudgetDaily = true
  153. this.dayBudget = ''
  154. }
  155. },
  156. typeChange() {
  157. if (this.type == 2) {
  158. this.promotionName = '提升应用安装'
  159. this.showApp = true
  160. this.showRedirect = false
  161. this.showUrlType = false
  162. this.showChannelType = false
  163. }
  164. if (this.type == 3) {
  165. this.promotionName = '获取电商下单'
  166. this.showApp = false
  167. this.showRedirect = true
  168. this.showUrlType = true
  169. this.showChannelType = false
  170. }
  171. if (this.type == 4) {
  172. this.promotionName = '推广品牌活动'
  173. this.showApp = false
  174. this.showRedirect = true
  175. this.showUrlType = false
  176. this.showChannelType = false
  177. }
  178. if (this.type == 5) {
  179. this.promotionName = '收集销售线索'
  180. this.showApp = false
  181. this.showRedirect = true
  182. this.showUrlType = false
  183. this.showChannelType = true
  184. }
  185. this.campaignName = this.promotionName + '_' + moment(new Date())
  186. },
  187. handleChange(value) {
  188. console.log(`selected ${value}`)
  189. },
  190. handleBlur() {
  191. console.log('blur')
  192. },
  193. handleFocus() {
  194. console.log('focus')
  195. },
  196. filterOption(input, option) {
  197. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  198. },
  199. },
  200. mounted: function () {
  201. // //出价方式
  202. // let params = {}
  203. // params.dictId = '181afbae847dd3bc7e27795d8958956'
  204. // params.pageSize = '1000'
  205. // getAction(this.url.dictListUrl, params).then(res => {
  206. // if (res.success) {
  207. // this.typeList = res.result.records
  208. // }
  209. // })
  210. // // 应用列表
  211. // //出价方式
  212. // let params2 = {}
  213. // params2.loginId = this.userInfo().id
  214. // params2.pageSize = '1000'
  215. // getAction(this.url.appListUrl, params).then(res => {
  216. // if (res.success) {
  217. // this.appList = res.result.records
  218. // console.log(this.appList)
  219. // }
  220. // })
  221. },
  222. }
  223. </script>