LocalLivingServicesUniapp/pages/adManagement/adlist.vue

<template>
	<view class="page">
		<u-sticky :h5-nav-height="0" z-index="9099" :offset-top='0'>
			<uni-NavBar headerTitle="广告列表" background="linear-gradient(230deg, #CFE6FF 40%, #FFFFFF 100%)"
				:isSlot="false"></uni-NavBar>
			<div class="search dis a-c j-s ">
				<u-search v-model="selectedOptions.name" @custom="custom" @search="search" shape="square" :height='68'
					color="#AAAAAA" bg-color="#F6F8FC" :input-style="{background:'transparent'}"
					:actionStyle="{position: 'absolute',right:'50px',boxSiting:'border-box',borderLeft:'2rpx solid #DDDDDD'}"
					placeholder-color="#AAAAAA" :clearabled="true" @clear="clear" placeholder="请输入关键词"></u-search>
				<u-icon name="list" class="ml-2" color="#333" size="48" @click="categoryFilterShow=true"></u-icon>
			</div>
		</u-sticky>
		<!-- 广告列表 -->
		<view class="adlist dis f-c  ">
			<view class="dataView dis a-c j-s" v-for="(item,index) in dataList" :key="index" @click="godetails(item)">
				<view class="dataView-left dis a-start">
					<image src="/static/banner/banner3.jpg" mode=""></image>
					<view class="content dis  f-c ">
						<text class="title">{{item.name}}</text>
						<view class="tag dis a-c ">
							<text>{{adTypeMap(item.type)}}</text>
							<text>{{item.positionName}}</text>
						</view>
						<view class="dis a-c mb-1">
							<view class="time-tag mr-1">始</view>
							<text class="time-text"> 开始时间：{{item.startDate}} </text>
						</view>
						<view class="dis a-c">
							<view class="time-tag mr-1" style="background-color: #FF5353;">终</view>
							<text class="time-text"> 结束时间：{{item.endDate}} </text>
						</view>
					</view>
				</view>
				<view class="dataView-right ">
					<text class="status"
						:style="{color:statusColorMap(item.status)}">{{statusTypeMap(item.status)}}</text>
					<u-icon name="arrow-right" class="ml-1" color="#979797" size="24"></u-icon>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="btn dis a-c j-c" @click="createAdShow=true">
				<image src="/static/ad/createAd.png" mode="" style="width: 32rpx ; height: 32rpx;margin-right: 13rpx;">
				</image>
				<text>创建广告</text>
			</view>
		</view>
		<u-popup v-model="createAdShow" mode="center" width="580rpx" :closeable="true" border-radius="20">
			<view class="popup">
				<view class="header dis a-c j-c ">
					<text>选择广告类型</text>
				</view>
				<view class="createAd-content dis f-wrap j-s">
					<view class="adimage dis f-c j-c" v-for="(item,index) in adbgImage" :key="index"
						:style="{ backgroundImage: `url('${item.image}')` }" @click="adTypeSelect(item.value)">
						<text class="mb-1">{{item.name}}</text>
						<text>{{item.content}}</text>
					</view>
				</view>
			</view>

		</u-popup>
		<u-popup v-model="categoryFilterShow" mode="bottom" :closeable="true" border-radius="20" height="730px">
			<view class="popup">
				<view class="header dis a-c j-c ">
					<text>请选择</text>
				</view>
				<view class="categoryFilter">
					<view class="view dis f-c " v-for="(item,index) in categoryFilter" :key="index">
						<text class="title">{{item.title}}</text>
						<view class="dis f-wrap a-c">
							<view class="status-options dis a-c j-c" :class="{ 'active': isActive(item, Filteritem) }"
								v-for="(Filteritem,Filterindex) in item.options" :key="Filterindex"
								@click="optionsClick(item, Filteritem)">
								<text>{{Filteritem.label}}</text>
							</view>
						</view>
					</view>
					<view class="view dis f-c ">
						<text class="title">投放页面</text>
						<view class="dis f-wrap a-c">
							<view class="status-options dis a-c j-c"
								:class="{'active':selectedOptions.positionId==item.id}"
								v-for="(item,index) in adSlotList" :key="index" @click="adSlotOptions(item)">
								<text>{{item.positionName}}</text>
							</view>
						</view>
					</view>
					<view class="view dis f-c ">
						<text class="title">广告日期</text>
						<view class="time-select dis a-c j-s" @click="timeChange">
							<text class="">{{startTime && endTime ? startTime+" - "+endTime:'请选择' }}</text>
							<u-icon name="arrow-right" color="#979797" size="28"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="categoryFilter-footer dis a-c j-s">
				<view class="dis a-c j-c" @click="categoryFilterShow=false">
					重置
				</view>
				<view class="dis a-c j-c" @click="queryType">
					查询
				</view>
			</view>
		</u-popup>
		<my-date-picker ref="datePicker" @confirmPickDate="confirmPickDate" />
	</view>
</template>
<script>
	import myDatePicker from '@/components/date-picker.vue';
	import uniNavBar from '@/components/uni-NavBar/uni-NavBar.vue'
	import {
		USER_INFO
	} from '@/common/util/constants.js'
	export default {
		components: {
			myDatePicker,
			uniNavBar
		},
		data() {
			return {
				categoryFilterShow: false, //分类筛选
				createAdShow: false, //创建广告弹窗
				selectedOptions: {
					type: null,
					status: null,
					positionId: null,
					name: "",
					startDate: "",
					endDate: "",
				},
				startTime: "",
				endTime: "",
				adbgImage: [{
						name: "全屏广告",
						value: "0",
						content: "沉浸式覆盖",
						image: "../static/ad/adtype1.png"
					},
					{
						name: "轮播广告",
						value: "2",
						content: "多内容循环展示",
						image: "../../static/ad/adtype2.png"
					}, {
						name: "页面嵌入广告",
						value: "3",
						content: "自然融入页面",
						image: "../../static/ad/adtype3.png"
					}, {
						name: "弹窗广告",
						value: "1",
						content: "强提醒触达",
						image: "../../static/ad/adtype4.png"
					}
				],

				categoryFilter: [{
					title: "广告类型",
					filed: "type",
					options: [{
							id: 0,
							label: "全部",
							value: "",
						},
						{
							id: 1,
							label: "全屏广告",
							value: "0",
						},
						{
							id: 2,
							label: "弹窗广告",
							value: "1",
						},
						{
							id: 3,
							label: "轮播广告",
							value: "2",
						},
						{
							id: 4,
							label: "嵌入商品列表广告",
							value: "3",
						},
					]

				}, {
					title: "状态",
					filed: "status",
					options: [{
							id: 0,
							label: "全部",
							value: " ",
						},
						{
							id: 1,
							label: "待审核",
							value: "0",
						},
						{
							id: 2,
							label: "审核驳回",
							value: "1",
						},
						{
							id: 3,
							label: "审核通过",
							value: "2",
						},
						{
							id: 4,
							label: "未开始",
							value: "3",
						},
						{
							id: 5,
							label: "已生效",
							value: "4"
						},
						{
							id: 6,
							label: "已作废",
							value: "5",
						},
						{
							id: 7,
							label: "已结束",
							value: "6",
						},
					]

				}, ],
				dataList: [], //广告列表
				userInfo: {},
				adSlotList: [], //广告位列表

			}
		},
		onShow() {
			this.pageLlist(); //列表接口
			this.queryAdSlot(); //查询广告位
		},
		onLoad() {
			this.userInfo = uni.getStorageSync(USER_INFO);
		},
		methods: {
			adSlotOptions(item) {
				this.selectedOptions.positionId = item.id;
			},
			queryAdSlot() {
				this.$http.get('/adPosition/queryPageList').then(res => {
					if (res.data.code == 200) {
						if (res.data.code == 200) {
							res.data.result.records.unshift({
								id: "",
								positionName: "全部"
							})
							this.adSlotList = res.data.result.records
						}
					}
				})
			},
			queryType() {
				this.pageLlist();
				this.categoryFilterShow = false

			},
			adTypeMap(ele) {
				const map = {
					0: '全屏广告',
					1: '弹窗广告',
					2: '轮播广告',
					3: '页面嵌入广告',
				}
				return map[ele] || ''
			},
			statusTypeMap(ele) {
				const map = {
					0: '待审核',
					1: '审核驳回',
					2: '审核通过',
					3: '未开始',
					4: '已生效',
					5: '已作废',
					6: '已结束',
				}
				return map[ele] || ''
			},
			statusColorMap(ele) {
				const map = {
					0: '#E68D00',
					1: '#F00000',
					2: '#006DFF',
					3: '#777777',
					4: '#006DFF',
					5: '#0081AB',
					6: '#AF60FF',
				}
				return map[ele] || ''
			},
			pageLlist() {
				this.$http.get('advert/localAdvertTask/list', {
					params: {
						pageNo: 1,
						pageSize: 10,
						adType: "1",
						merchantId: this.userInfo.merchantId,
						merchantName: this.userInfo.merchantName,
						...this.selectedOptions,
					}
				}).then(res => {
					if (res.data.code == '200') {
						this.dataList = res.data.result.records
					}
				})
			},
			godetails(item) {
				uni.navigateTo({
					url: '/pages/adManagement/fullscreenAdDetails?info=' + JSON.stringify(item)
				})
			},
			//回车搜索事件
			search(val) {
				this.pageLlist();
			},
			//搜索按钮事件
			custom(val) {
				this.pageLlist();
			},
			clear(val) {
				this.pageLlist();
			},
			optionsClick(item, Filteritem) {
				if (item.filed) {
					this.selectedOptions[item.filed] = Filteritem.value;
				}
			},
			isActive(item, Filteritem) {
				return this.selectedOptions[item.filed] === Filteritem.value;
			},
			timeChange() {
				this.$refs.datePicker.open()
			},
			confirmPickDate(dateStr, dateStr1) {
				if (dateStr) {
					dateStr += ' 00:00:00'
				}
				if (dateStr1) {
					dateStr1 += ' 23:59:59'
				}
				this.selectedOptions.startTime = dateStr;
				this.selectedOptions.endTime = dateStr1;
			},
			adTypeSelect(value) {
				uni.navigateTo({
					url: '/pages/adManagement/createFullscreenAd?adType=' + value
				})
				this.createAdShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #F7F8FC;
		height: 100vh;
	}

	.search {
		background-color: #fff;
		padding: 14rpx 24rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #eee;

		image {
			width: 36rpx;
			height: 36rpx;
		}

		::v-deep {
			.u-close-wrap {
				margin-right: 70rpx;
			}
		}
	}

	.dataView {
		background: #FFFFFF;
		margin-bottom: 20rpx;
		padding: 30rpx 24rpx;
		box-sizing: border-box;
		height: 100%;

		.dataView-left {
			height: 100%;
			flex: 1;

			.content {
				height: 100%;

				.title {
					font-size: 30rpx;
					font-weight: bold;
					color: #000;
					margin-bottom: 10rpx;
				}

				.tag {
					margin-bottom: 10rpx;

					text {
						font-size: 24rpx;
						color: #777;
						border-right: 1rpx solid #777;
						padding-right: 10rpx;
						margin-right: 10rpx;
					}

					text:last-child {
						border: none;
					}

				}

				.time-tag {
					background-color: #3C96FF;
					padding: 3rpx 6rpx;
					box-sizing: border-box;
					color: #fff;
					border-radius: 4rpx;
					font-size: 20rpx;
				}

				.time-text {
					font-size: 22rpx;
					color: #8F96AC;
				}
			}

			>image {
				width: 160rpx;
				height: 160rpx;
				margin-right: 25rpx;
				border-radius: 10rpx;
			}
		}

		.dataView-right {
			font-size: 24rpx;

		}
	}

	.footer {
		box-sizing: border-box;
		padding: 17rpx 24rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;

		.btn {
			box-sizing: border-box;
			padding: 26rpx;
			border-radius: 40rpx;
			background-color: #4B9DFF;
			font-size: 30rpx;
			color: #fff;
		}
	}

	.popup {
		padding: 0 20rpx;
		box-sizing: border-box;

		.header {
			padding: 28rpx;
			box-sizing: border-box;
			font-size: 34rpx;
			color: #333;
			font-weight: bold;
			border-bottom: 1rpx solid #eee;
		}
	}

	.createAd-content {
		padding: 30rpx 0;
		box-sizing: border-box;

		.adimage {
			width: 260rpx;
			height: 143rpx;
			border-radius: 10rpx;
			background-size: 100% 100%;
			margin-bottom: 20rpx;
			padding: 0 20rpx;

			text:first-child {
				font-size: 26rpx;
				color: #333;
			}

			text:last-child {
				font-size: 22rpx;
				color: #888;
			}
		}
	}

	.categoryFilter {
		padding: 30rpx 0;
		box-sizing: border-box;

		.view {
			margin-bottom: 20rpx;

			.title {
				font-size: 26rpx;
				color: #666;
				margin-bottom: 32rpx;
			}

			.status-options {
				min-width: 165rpx;
				background: #F7F8FC;
				border-radius: 5rpx;
				margin-bottom: 14rpx;
				margin-right: 16rpx;
				padding: 26rpx 28rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				color: #333;
				border: 1px solid transparent;
			}

			.active {
				background: #ECF5FF;
				border: 1px solid #3F99FF;
				color: #1476EA;
			}

			.time-select {
				height: 88rpx;
				background: #F7F8FC;
				border-radius: 5rpx;
				padding: 30rpx 24rpx;
				box-sizing: border-box;
			}
		}
	}

	.categoryFilter-footer {
		position: absolute;
		bottom: 0;
		width: 100%;
		padding: 17rpx 24rpx;
		box-sizing: border-box;
		background: #fff;
		box-shadow: 0rpx 0rpx 12rpx 1rpx rgba(225, 225, 225, 0.3);
		font-size: 30rpx;

		view:first-child {
			width: 30%;
			background: #FFFFFF;
			padding: 27rpx;
			box-sizing: border-box;
			border-radius: 100px;
			border: 1px solid #E5E5E5;
			color: #888;
		}

		view:last-child {
			width: 70%;
			background: #4B9DFF;
			color: #fff;
			padding: 27rpx;
			box-sizing: border-box;
			border-radius: 100px;
			margin-left: 24rpx;
		}
	}
</style>