front-end/mobile-code-back/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 :src="item.adImgUrl | default_img" alt="广告图片" mode="center" />
					</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 }}到期</div>
						<div class="list-option">
							<div>
								<div>点击次数：{{ item.viewTimes }}</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']"></i>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 操作 -->
				<operate-module v-show="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 middle 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.data.length < this.list.total) {
			this._list().then(res => {
				uni.stopPullDownRefresh()
			})
		} else {
			uni.stopPullDownRefresh()
		}
	},
	onLoad() {
		// this.init()
	},
	methods: {
		async init() {
			this._list()
		},
		_list() {
			return getList({ status: 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 - 200px);
		padding-top: 100px;
		padding-bottom: 100px;
	}
	.list-wrap {
		width: 100%;
		position: relative;
		background-color: #fff;
		.list {
			@include disFlex(center, flex-start);
			padding: 20px 30px;
			.list-img {
				width: 300px;
				height: 168px;
				img {
					height: 100%;
				}
			}
			.list-right {
				width: calc(100% - 320px);
				color: $fontColor3;
				margin-left: 20px;
				& > div {
					margin-top: 20px;
					&:first-child {
						margin-top: 0;
					}
				}
				.list-option {
					@include disFlex(flex-end, space-between);
				}
			}
		}
	}
	// 按钮
	.app-footer {
		justify-content: flex-end;
		.admin-button-com {
			width: 160px;
			margin-right: 30px;
		}
	}
</style>