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

<template>
	<div class="activityManager">
		<Row>
			<i-col class="activityListClass" v-for="(item, index) in activityList" :key="index" span="7" offset="1">
				<Card>
					<div class="operateAndThemeItem">
						<div class="ThemeItem">
								<img class="img" :src="item.img">
							<div class="tipItem">
								<span>{{item.name}}</span>
								<span>{{item.description}}</span>
							</div>
						</div>
						<div class="operateItem">
							<div @click="disPlayUseTable(item.id)">使用</div>
							<div @click="dispalyAddActivity(item.id)">配置</div>
						</div>
					</div>
				</Card>
			</i-col>
    </Row>
		<Row>
		<i-col span="7" offset="1">
			<div @click="dispalyAddActivity('')" class="addactivity">
				<span>+</span>
				<span>添加活动</span>
			</div>
		</i-col>
		</Row>
		<useTable @dispalyuseModal="dispalyuseModal" :useModal="useModal"></useTable>
		<addActivity @dispalyAddActivityModal="dispalyAddActivityModal" :addActivityModal="addActivityModal" :id="id"></addActivity>
	</div>
</template>

<script>
import Img from '../../assets/logo.png'
import useTable from './useTable'
import addActivity from './addActivity'
import ActivityManager from "../../services/ActivityManager/ActivityManager"
export default {
	name: "ActivityManager",
	components: {
		useTable,
		addActivity
	},
	inject: ['setMenuName'],
	data() {
		return {
			useModal: false,
			addActivityModal: false,
			activityList: [],
			id: ''
		}
	},
	mounted() {
		this.setMenuName("活动管理", "活动池")
		this.getActivityTable()
	},
	methods: {
		getActivityTable() {
			let that = this
			ActivityManager.getActivityList({}, function (data) {
					that.activityList = data.data.results
			})
		},
		disPlayUseTable(id) {
			// store.commit('SET_ID', id.toString())
			// console.log(store.getters.id)
			this.useModal = true
		},
		dispalyAddActivity(id) {
			this.addActivityModal = true
			this.id = id.toString()
		},
		dispalyuseModal(displayModalFlag, isCancle) {
			this.useModal = displayModalFlag
			if(isCancle === true) {
				this.getActivityTable()
			}
		},
		dispalyAddActivityModal(displayModalFlag, isCancle) {
			this.addActivityModal = displayModalFlag
			if(isCancle === true) {
				this.getActivityTable()
			}
		}
	}
}
</script>

<style  scoped>
	.operateAndThemeItem {
		display: flex;
		justify-content: space-between;
	}
	.img {
		width: 200px;
		height: 200px;
	}
	.operateItem {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		color: #6ac1d1;
		width: 20%;
		text-align: right;
		cursor: pointer;
	}
	.ThemeItem {
		display: flex;
		justify-content: flex-start;
		width: 80%;
	}
	.tipItem {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 50px;
	}
	.activityListClass {
		margin-bottom: 50px;
	}
	.addactivity{
		height: 300px;
		border: 1px dashed;
		text-align: center;
		line-height: 300px;
	}
</style>