You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
bsdgy-front/src/pages/activity/useActivityStepFoure.vue

113 lines
3.0 KiB
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.key"
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.groups);
},
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>