bsdgy-front/src/pages/activity/useActivityStepFoure.vue

<template>
  <div style="padding: 0 40px;">
    <Form ref="formValidate" :model="formValidate" :label-width="80">
      <Row>
        <i-col span="15" offset="2">
          <FormItem label="活动名称" prop="activityName">
            <div>{{formValidate.activityName}}</div>
          </FormItem>
          <Form-item label="活动时间" prop="activityDate">
            <div>{{formValidate.activityDate}}</div>
          </Form-item>
          <FormItem label="活动类型" prop="activityStyle">
            <div style="display:flex" v-for="(item, index) in formValidate.activityStyle" :key="index">
              <i-input class="inputClass" disabled type="text" v-model="item.name" placeholder=""></i-input>
              <i-input class="inputClass" style="margin-left: 20px" disabled type="text" v-model="item.description" placeholder=""></i-input>
            </div>
          </FormItem>
          <FormItem label="活动范围" prop="activityRange">
            <div>
              <span>{{formValidate.activityRange}}</span>
              <span class="mr10">{{formValidate.activityCompanyNum}}家店铺</span>
              <Button class="mr10" type="primary" @click="isDisplay">{{operate}}</Button>
            </div>
            <div v-if="displayActivityShopFlag==true" class="activityShopClass">
              <div class="mr10" v-for="(item, index) in formValidate.activityShop" :key="index">
                <Tag class="tagClass" color="blue">{{item.name}}</Tag>
              </div>
            </div>
          </FormItem>
        </i-col>
      </Row>
    </Form>
  </div>
</template>
<script>
import store from "../../store/index"
export default {
  name: "useActivityStepFoure",
  data() {
		return {
      formValidate: {
        activityName: '',
        activityDate: "",
        activityStyle: [],
        activityRange: '上海分公司',
        activityCompanyNum: '35',
        activityShop: []
      },
      operate: '收起',
      displayActivityShopFlag: false

		}
  },
	mounted() {
    this.formValidate.activityName = store.getters.useData.name
    this.formValidate.activityDate = store.getters.useData.activityStartDate + '-' + store.getters.useData.activityEndDate
    this.formValidate.activityStyle = store.getters.useData.inputActivityList
  },
  methods: {
    isDisplay() {
      if(this.operate === '展开') {
        this.operate = '收起'
        this.displayActivityShopFlag = false
      } else {
        this.operate = '展开'
        this.displayActivityShopFlag = true
      }
      
    }
  }
}
</script>

<style  scoped>
.activityShopClass {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.mr10 {
  margin-left: 40px;
}
.tagClass {
  width: 360px;
  text-align: center;
}
.inputClass{
  width: 1000px;
}
</style>