12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485 |
- <template>
- <a-card :bordered="false">
- <a-steps class="steps" :current="currentTab">
- <a-step title="创建计划" />
- <a-step title="创建广告组" />
- <a-step title="创建创意" />
- </a-steps>
- <div class="content">
- <step1 v-if="currentTab === 0" @nextStep="nextStep" ref="step" />
- <step2 v-if="currentTab === 1" :campaignId="campaignId" @nextStep="nextStepTwo" @prevStep="prevStep" />
- <step3 v-if="currentTab === 2" @prevStep="prevStepTwo" @removeTab="remove" />
- </div>
- </a-card>
- </template>
- <script>
- import Step1 from './Step1'
- import Step2 from './Step2'
- import Step3 from './Step3'
- export default {
- name: 'StepForm',
- components: {
- Step1,
- Step2,
- Step3
- },
- data() {
- return {
- currentTab: 0,
- // form
- form: null,
- campaignId: null
- }
- },
- methods: {
- // handler
- nextStep(campaignId) {
- this.campaignId = campaignId
- if (this.currentTab < 2) {
- this.currentTab += 1
- localStorage.setItem('step', this.currentTab)
- }
- },
- nextStepTwo() {
- if (this.currentTab < 2) {
- this.currentTab += 1
- localStorage.setItem('step', this.currentTab)
- }
- },
- prevStep(campaignId) {
- if (this.currentTab > 0) {
- this.currentTab -= 1
- localStorage.setItem('step', this.currentTab)
- this.$nextTick(() => {
- this.$refs.step.getCampaignId(campaignId)
- })
- }
- },
- prevStepTwo() {
- if (this.currentTab > 0) {
- this.currentTab -= 1
- localStorage.setItem('step', this.currentTab)
- }
- },
- finish() {
- this.currentTab = 0
- },
- remove(key) {
- alert(key)
- this.$emit('removeTab', key)
- }
- },
- mounted() {
- this.currentTab = parseInt(localStorage.getItem('step'))
- }
- }
- </script>
- <style lang="scss" scoped>
- .steps {
- max-width: 750px;
- margin: 16px auto;
- }
- </style>
|