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>{{formValidate.activityStyle}}</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>
export default {
  name: "useActivityStepFoure",
  data() {
		return {
      formValidate: {
        activityName: '红包活动',
        activityDate: "2020/05/20-2020/0522",
        activityStyle: '5元红包',
        activityRange: '上海分公司',
        activityCompanyNum: '35',
        activityShop: [{
          name: '店铺1'
        },{
          name: '店铺1'
        },{
          name: '店铺1'
        },{
          name: '店铺1'
        },{
          name: '店铺1'
        },{
          name: '店铺1'
        },{
          name: '店铺1'
        },{
          name: '店铺1'
        },{
          name: '店铺1'
        }]
      },
      operate: '收起',
      displayActivityShopFlag: false

		}
  },
	mounted() {
  },
  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;
}
</style>