front-end/hdApp/src/admin/ad/list.vue

<template>
	<div class="app-content">
		<app-tabs
			:tabs="tabs"
			:isFixed="true"
			:currentTab="tabIndex"
			@change="change"
			itemWidth="50%"
		/>
		<div class="list-wrap">
			<block v-if="!$util.isEmpty(list.data)">
				<div class="list" v-for="(item, index) in list.data" :key="index">
					<div class="list-img">
						<app-img height="100%" mode :src="item.adImgUrl" alt="广告图片" />
					</div>
					<div class="list-right">
						<div class="app-size-28 app-color-0">{{ item.adName }}</div>
						<div v-if="item.endTime == '4102416000'">永久有效</div>
						<div v-else>{{ item.endTime | formatTime }} 到期</div>
						<div class="list-option">
							<div>
								<div>
									<span>状态：</span>
									<span :style="{ color: item.status == 1 ? '#09BB07' : '#FF0000' }">{{
										item.status == 1 ? "启用" : "禁用"
									}}</span>
								</div>
							</div>
							<div class="operate-icon-wrap">
								<div class="operate-icon" @click="operateFn(item, index)">
									<i
										class="iconfont"
										:class="[operateIndex == index ? 'iconcaozuojihuo' : 'iconcaozuo']"
										style="font-size:48upx;"
									></i>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 操作 -->
				<operate-module
					@clickFn="operateList"
					v-if="operateShow"
					:top="operateTop"
					:right="30"
					:btnData="btnData"
				/>
			</block>
			<block v-else>
				<app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
			</block>
		</div>
		<!-- 按钮 -->
		<div class="app-footer">
			<div
				class="admin-button-com big blue"
				@click="pageTo({
						url: '/admin/ad/add',
						query: {
							type: tabIndex
						}
					})"
			>
				添加
			</div>
		</div>
		<!-- 删除提示 -->
		<modal-module
			:show="delModal"
			@cancel="modalCancel"
			@click="delModalClick"
			content="确定删除该广告吗？"
			color="#333"
			:size="32"
			padding="30rpx 30rpx"
		></modal-module>
	</div>
</template>

<script>
import AppTabs from "@/components/plugin/tabs";
import OperateModule from "@/admin/home/components/module/operate";
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import ModalModule from "@/components/plugin/modal";
import AppImg from "@/components/app-img";
import { list } from "@/mixins";
// api
import { getList, del, updateStatus } from "@/api/ad";
export default {
	name: "ad-list",
	components: {
		AppTabs,
		OperateModule,
		AppWrapperEmpty,
		ModalModule,
		AppImg
	},
	mixins: [list],
	data() {
		return {
			tabIndex: 0,
			tabs: [
				{
					name: "门店轮播图"
				},
				{
					name: "商城首页轮播图"
				}
			],
			// 操作菜单
			operateData: {},
			operateShow: false,
			operateIndex: null,
			operateTop: 0,
			// 删除弹窗
			delModal: false
		};
	},
	computed: {
		btnData() {
			return [
				{
					text: "编辑",
					icon: "iconbianji",
					click: () => {
						this.$util.pageTo({
							url: "/admin/ad/add",
							query: {
								type: this.tabIndex,
								id: this.operateData.id
							}
						});
					}
				},
				{
					text: this.operateData.status == 1 ? "下架" : "启用",
					icon: this.operateData.status == 1 ? "iconxiajia" : "iconqiyong",
					click: () => {
						this.changeStatusFn();
					}
				},
				{
					text: "删除",
					icon: "iconshanchu1",
					click: () => {
						this.delModal = true;
					}
				}
			];
		}
	},
	onPullDownRefresh() {
		this.resetList();
		this._list().then(res => {
			uni.stopPullDownRefresh();
		});
	},
	onReachBottom() {
		if (!this.list.finished) {
			this._list().then(res => {
				uni.stopPullDownRefresh();
			});
		} else {
			uni.stopPullDownRefresh();
		}
	},
	onLoad() {
		// this.init()
	},
	methods: {
		operateList(index) {
			if (index === 0) {
				this.$util.pageTo({
					url: "/admin/ad/add",
					query: {
						type: this.tabIndex,
						id: this.operateData.id
					}
				});
				this.operateCloseFn();
			} else if (index === 1) {
				this.changeStatusFn();
			} else if (index === 2) {
				this.delModal = true;
			}
		},
		async init() {
			this._list();
		},
		_list() {
			return getList({ type: this.tabIndex }).then(res => {
				this.completes(res);
			});
		},
		change(e) {
			if (this.tabIndex == e.index) {
				return false;
			} else {
				this.tabIndex = e.index;
				this.operateCloseFn();
				this.resetList();
				this._list();
			}
		},
		// 操作按钮
		operateFn(item, index) {
			if (this.operateIndex == index) {
				this.operateCloseFn();
			} else {
				this.operateData = item;
				this.operateData.index = index;
				this.operateIndex = index;
				this.operateTop = (index + 1) * 214;
				this.operateShow = true;
			}
		},
		// 关闭操作按钮
		operateCloseFn() {
			this.operateData = {};
			this.operateIndex = null;
			this.operateShow = false;
		},
		// 删除弹窗
		modalCancel() {
			this.delModal = false;
		},
		delModalClick(e) {
			let index = e.index;
			if (index === 0) {
				this.modalCancel();
			} else {
				del({ id: this.operateData.id }).then(res => {
					this.modalCancel();
					this.operateCloseFn();
					this.$msg("删除成功!");
					this.resetList();
					this._list();
				});
			}
		},
		changeStatusFn() {
			let status = this.operateData.status == 1 ? 0 : 1;
			updateStatus({ id: this.operateData.id, status: status }).then(res => {
				this.list.data[this.operateData.index].status = status;
				this.operateCloseFn();
				this.$msg("操作成功!");
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.app-content {
	min-height: calc(100vh - 200upx);
	padding-top: 100upx;
	padding-bottom: 100upx;
}
.list-wrap {
	width: 100%;
	position: relative;
	background-color: #fff;
	.list {
		@include disFlex(center, flex-start);
		padding: 20upx 30upx;
		.list-img {
			width: 300upx;
			height: 168upx;
			& img {
				height: 100% !important;
			}
		}
		.list-right {
			width: calc(100% - 320upx);
			color: $fontColor3;
			margin-left: 20upx;
			& > div {
				margin-top: 20upx;
				&:first-child {
					margin-top: 0;
				}
			}
			.list-option {
				@include disFlex(flex-end, space-between);
			}
		}
	}
}
// 按钮
.app-footer {
	justify-content: flex-end;
	.admin-button-com {
		width: 160upx;
		margin-right: 30upx;
	}
}
</style>