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

<template>
  <div style="padding: 0 40px;">
    <Form ref="formValidate"
          :model="useData"
          :label-width="80">
      <Row>
        <i-col span="22"
               offset="2">
          <FormItem label="活动名称"
                    prop="activityName">
            <div>{{ useData.name }}</div>
          </FormItem>
          <Form-item label="活动时间"
                     prop="activityDate">
            <div>{{ useData.beginTime }} - {{ useData.endTime }}</div>
          </Form-item>
          <FormItem label="活动类型"
                    prop="activityStyle">
            <div style="display:flex"
                 v-for="(item, index) in useData.params"
                 :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.defaultVal"
                       placeholder=""></i-input>
            </div>
          </FormItem>
          <FormItem label="活动范围"
                    prop="activityRange">
            <Collapse simple>
              <Panel :key="index"
                     v-for="(item, index) in groups">
                {{
                  item.name
                }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
                  item.stores.length
                }}家店铺
                <div slot="content">
                  <div class="activityShopClass">
                    <div class="mr10"
                         v-for="(item, index) in item.stores"
                         :key="index">
                      <Tag class="tagClass"
                           color="blue">{{ item.name }}</Tag>
                    </div>
                  </div>
                </div>
              </Panel>
            </Collapse>
          </FormItem>
        </i-col>
      </Row>
    </Form>
  </div>
</template>
<script>
import store from "../../store/index";
export default {
  name: "useActivityStepFoure",
  data () {
    return {
      useData: store.getters.useData,
      operate: "收起",
      displayActivityShopFlag: false,
      groups: [],
    };
  },
  created () {
    let _this = this;
    console.log(this.useData.stores);
    this.useData.company.forEach((item) => {
      item.stores = _this._.filter(
        this.useData.stores,
        (s) => s.companyId == item.id || s.parentId == item.id
      );
      _this.groups.push(item);
    });
    console.log(this.useData);
  },
  methods: {
    isDisplay () {
      if (this.operate === "展开") {
        this.operate = "收起";
        this.displayActivityShopFlag = false;
      } else {
        this.operate = "展开";
        this.displayActivityShopFlag = true;
      }
    },
  },
};
</script>

<style scoped>
.activityShopClass {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
}
.mr10 {
  margin-right: 20px;
}
.tagClass {
  text-align: center;
}
</style>