StepForm.vue 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <template>
  2. <a-card :bordered="false">
  3. <a-steps class="steps" :current="currentTab">
  4. <a-step title="创建计划" />
  5. <a-step title="创建广告组" />
  6. <a-step title="创建创意" />
  7. </a-steps>
  8. <div class="content">
  9. <step1 v-if="currentTab === 0" @nextStep="nextStep" ref="step" />
  10. <step2 v-if="currentTab === 1" :campaignId="campaignId" @nextStep="nextStepTwo" @prevStep="prevStep" />
  11. <step3 v-if="currentTab === 2" @prevStep="prevStepTwo" @removeTab="remove" />
  12. </div>
  13. </a-card>
  14. </template>
  15. <script>
  16. import Step1 from './Step1'
  17. import Step2 from './Step2'
  18. import Step3 from './Step3'
  19. export default {
  20. name: 'StepForm',
  21. components: {
  22. Step1,
  23. Step2,
  24. Step3
  25. },
  26. data() {
  27. return {
  28. currentTab: 0,
  29. // form
  30. form: null,
  31. campaignId: null
  32. }
  33. },
  34. methods: {
  35. // handler
  36. nextStep(campaignId) {
  37. this.campaignId = campaignId
  38. if (this.currentTab < 2) {
  39. this.currentTab += 1
  40. localStorage.setItem('step', this.currentTab)
  41. }
  42. },
  43. nextStepTwo() {
  44. if (this.currentTab < 2) {
  45. this.currentTab += 1
  46. localStorage.setItem('step', this.currentTab)
  47. }
  48. },
  49. prevStep(campaignId) {
  50. if (this.currentTab > 0) {
  51. this.currentTab -= 1
  52. localStorage.setItem('step', this.currentTab)
  53. this.$nextTick(() => {
  54. this.$refs.step.getCampaignId(campaignId)
  55. })
  56. }
  57. },
  58. prevStepTwo() {
  59. if (this.currentTab > 0) {
  60. this.currentTab -= 1
  61. localStorage.setItem('step', this.currentTab)
  62. }
  63. },
  64. finish() {
  65. this.currentTab = 0
  66. },
  67. remove(key) {
  68. alert(key)
  69. this.$emit('removeTab', key)
  70. }
  71. },
  72. mounted() {
  73. this.currentTab = parseInt(localStorage.getItem('step'))
  74. }
  75. }
  76. </script>
  77. <style lang="scss" scoped>
  78. .steps {
  79. max-width: 750px;
  80. margin: 16px auto;
  81. }
  82. </style>