LocalLivingServicesUniapp/pages/adManagement/fullscreenAdDetails.vue

<template>
	<view class="page">
		<u-sticky :h5-nav-height="0" z-index="9099" :offset-top='0'>
			<uni-NavBar headerTitle="全屏广告详情" background="#fff" :isSlot="false"></uni-NavBar>
			<view class="status-message dis a-c " :style="{background:detailsInfo.styleCOlor.backcolor}">
				<text>{{adTypeMap}}</text>
				<view class="status"
					:style="{background:detailsInfo.styleCOlor.backcolor1,color:detailsInfo.styleCOlor.color}">
					{{statusTypeMap}}
				</view>
				<text class="error" v-if="detailsInfo.status=='1'" @click="rejectReasonShow=true">查看驳回原因</text>
			</view>
		</u-sticky>
		<view class="body">
			<view class="module dis f-c ">
				<text class="module-title ">基本信息</text>
				<view class="views dis a-c j-s ">
					<text>投放计划名称</text>
					<text>{{detailsInfo.name}}</text>
				</view>
				<view class="views dis a-c j-s ">
					<text>位置名称</text>
					<text>{{detailsInfo.positionName}}</text>
				</view>
				<view class="views dis a-c j-s ">
					<text>广告类型</text>
					<text>{{adTypeMap}}</text>
				</view>
			</view>
			<view class="module dis f-c ">
				<text class="module-title ">投放区域</text>
				<text
					class="address">{{detailsInfo.province}}-{{detailsInfo.city}}-{{detailsInfo.district}}-{{detailsInfo.street}}</text>
			</view>
			<view class="module dis f-c ">
				<text class="module-title ">投放时间</text>
				<view class="views dis a-c j-s ">
					<text>投放开始日期</text>
					<text>{{detailsInfo.startDate}}</text>
				</view>
				<view class="views dis a-c j-s ">
					<text>投放结束日期</text>
					<text>{{detailsInfo.endDate}}</text>
				</view>
				<view class="views dis a-c j-s ">
					<text>生效周期</text>
					<text>{{detailsInfo.validPeriodType==0?'每天':detailsInfo.validPeriodType==1 ? '每周':'每月'}}</text>
				</view>
				<view class="extendArea dis a-c  f-wrap mt-2" style="padding-bottom: 0;"
					v-if="detailsInfo.validPeriodType!='0'">
					<view class="cycleStrategy dis a-c j-c" v-for="(item,index) in cycleStrategylist" :key="index"
						:class="{ 'tcycleStrategy-active': selectedDays.includes(item.value) }">
						<text>{{item.label}}</text>
					</view>
				</view>
				<view class="views dis a-c j-s ">
					<text>生效时段</text>
					<text>{{detailsInfo.validTimeRangeType==0?'全天':'指定时间段'}}</text>
				</view>
				<view class="extendArea  mt-2" style="font-size: 26rpx;" v-if="detailsInfo.validTimeRangeType=='1'">
					<view class=" dis a-c j-s mb-3">
						<text style="color: #333;">开始时间</text>
						<text style="color: #aaa;" class="mr-1">{{timeSegmentStart}}</text>
					</view>
					<view class=" dis a-c j-s ">
						<text style="color: #333;">开始时间</text>
						<text style="color: #aaa;" class="mr-1">{{timeSegmentEnd }}</text>
					</view>
				</view>
			</view>
			<view class="module dis f-c ">
				<text class="module-title ">投放内容</text>
				<view class="admaterial mt-3 ">
					<u-swiper :list="imagelist" mode="number" indicator-pos="bottomRight" height="330"
						v-if="detailsInfo.imageType=='1'"></u-swiper>
					<video v-else id="myVideo" :src="detailsInfo.taskImage"
						:style="{height:'330rpx',width:'100%',borderRadius:'10rpx'}" :muted="false"
						:enable-progress-gesture="true">
					</video>
				</view>
			</view>
			<view class="module dis f-c ">
				<text class="module-title ">计费方式</text>
				<view class="views dis a-c j-s " v-for="(item,index) in adPricingModelList" :key="index">
					<text>{{item.pricingName}}</text>
					<text>{{item.amount}} {{item.pricingUnit}}</text>
				</view>
			</view>
			<view class="module dis f-c ">
				<text class="module-title ">投放频次</text>
				<view class="views dis a-c j-s ">
					<text>每人每天展示次数</text>
					<text>{{detailsInfo.userDailyDisplayLimit || '不限'}}次</text>
				</view>
				<view class="views dis a-c j-s ">
					<text>每人展示总次数</text>
					<text>{{detailsInfo.userTotalDisplayLimit || '不限'}}次</text>
				</view>
				<view class="views dis a-c j-s ">
					<text>展示时间间隔</text>
					<text>{{detailsInfo.showInterval || '不限'}}分钟</text>
				</view>

			</view>
			<view class="module dis f-c ">
				<text class="module-title ">广告预算</text>
				<view class="views dis a-c j-s">
					<text>广告预算</text>
					<text>{{detailsInfo.adBudget}}元</text>
				</view>
			</view>
		</view>
		<view class="footer-view dis a-c j-s ">
			<view class="dis a-c j-c " @click="adEdit">
				编辑
			</view>
			<view class="dis a-c j-c " @click="delShow=true">
				作废
			</view>
		</view>
		<u-popup v-model="rejectReasonShow" mode="center" width="580rpx" :closeable="false" border-radius="20">
			<view class="popup">
				<view class="header dis a-c j-c ">
					<text>驳回原因</text>
				</view>
				<view class="content dis f-c  a-c ">
					{{detailsInfo.rejectReason}}
				</view>
			</view>
			<view class="popup-footer dis a-c j-s">
				<view class="dis a-c j-c" @click="rejectReasonShow=false">
					我知道了
				</view>
				<view class="dis a-c j-c" @click="adEdit">
					去修改
				</view>
			</view>
		</u-popup>
		<u-popup v-model="delShow" mode="center" width="580rpx" :closeable="false" border-radius="20">
			<view class="popup">
				<view class="header dis a-c j-c ">
					<text>提示</text>
				</view>
				<view class="content dis f-c  a-c ">
					<text class="title mb-3">是否将此广告作废？</text>
					<text>广告一旦作废将无法使用，只能重新 投放新广告哦~</text>
				</view>
			</view>
			<view class="popup-footer dis a-c j-s">
				<view class="dis a-c j-c" @click="delShow=false">
					取消
				</view>
				<view class="dis a-c j-c" @click="markAsInvalid">
					确定
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rejectReasonShow: false, //驳回弹窗
				delShow: false, //作废弹窗
				timeSegmentStart: "", //生效开始时间
				timeSegmentEnd: "", //生效结束时间
				imagelist: [], //图片回显列表
				colorList: [{
						id: 0,
						color: "rgba(230, 141, 0, 1)",
						backcolor: "rgba(230, 141, 0, 0.1)",
						backcolor1: "rgba(230, 141, 0, 0.2)",
					},
					{
						id: 1,
						color: "rgba(255, 19, 19, 1)",
						backcolor: "rgba(255, 19, 19, 0.1)",
						backcolor1: "rgba(255, 19, 19, 0.2)",
					},
					{
						id: 2,
						color: "rgba(100, 166, 255, 1)",
						backcolor: "rgba(100, 166, 255, 0.1)",
						backcolor1: "rgba(100, 166, 255, 0.2)",
					},
					{
						id: 3,
						color: "rgba(119, 119, 120, 1)",
						backcolor: "rgba(119, 119, 120, 0.1)",
						backcolor1: "rgba(119, 119, 120, 0.2)",
					},
					{
						id: 4,
						color: "rgba(100, 166, 255, 1)",
						backcolor: "rgba(100, 166, 255, 0.1)",
						backcolor1: "rgba(100, 166, 255, 0.2)",
					},
					{
						id: 5,
						color: "rgba(0, 129, 171, 1)",
						backcolor: "rgba(0, 129, 171, 0.1)",
						backcolor1: "rgba(0, 129, 171, 0.2)",
					},
					{
						id: 6,
						color: "rgba(175, 96, 255, 1)",
						backcolor: "rgba(175, 96, 255, 0.1)",
						backcolor1: "rgba(175, 96, 255, 0.2)",
					}
				],
				detailsInfo: {}, //详情数据
				weekList: [], //周
				monthList: [], //月
				selectedDays: [], //周期策略选中日期
				adPricingModelList: [], //计费模式列表
				adSlotPriceList: [], //广告位价格列表
			}
		},
		onShow() {

		},
		computed: {

			//区分月和周
			cycleStrategylist() {
				return this.detailsInfo.validPeriodType == '1' ? this.weekList : this.monthList;
			},
			//广告类型
			adTypeMap() {
				const map = {
					0: '全屏广告',
					1: '弹窗广告',
					2: '轮播广告',
					3: '页面嵌入广告',
				}
				return map[this.detailsInfo.type] || ''
			},
			//状态
			statusTypeMap() {
				const map = {
					0: '待审核',
					1: '审核驳回',
					2: '审核通过',
					3: '未开始',
					4: '已生效',
					5: '已作废',
					6: '已结束',
				}
				return map[this.detailsInfo.status] || ''
			}
		},
		async onLoad(options) {
			this.generateWeek();
			this.generatemonth();
			this.detailsInfo = JSON.parse(options.info);
			this.colorList.map(val => {
				if (val.id == this.detailsInfo.status) {
					this.detailsInfo.styleCOlor = val;
				}
				return val;
			})
			await this.getadBillingModel();
			this.imagelist = this.detailsInfo.taskImage.split(',');
			this.selectedDays = this.detailsInfo.validPeriodValue.split(',');
			let list = this.detailsInfo.validTimeRangeValue.split(',');
			this.timeSegmentStart = list[0];
			this.timeSegmentEnd = list[1];
			console.log(this.detailsInfo);
		},
		methods: {
			adEdit() {
				uni.navigateTo({
					url: '/pages/adManagement/createFullscreenAd?id=' + this.detailsInfo.id,
				})
			},
			//作废操作
			markAsInvalid() {
				this.$http.delete('advert/localAdvertTask/cancelDispatch?id=' + this.detailsInfo.id).then(res => {
					if (res.data.code == 200) {
						uni.navigateBack({
							delta: 1
						});
					}
				})
			},
			//获取计费模式
			getadBillingModel() {
				this.$http.get('/adPricingPrice/queryPageList', {
					params: {
						adPositionId: this.detailsInfo.positionId,
						city: this.detailsInfo.cityCode,
						pageNo: 1,
						pageSize: 1000,
					}
				}).then(res => {
					if (res.data.result.records.length > 0) {
						this.adSlotPriceList = res.data.result.records[0]?.adPositionPriceRelList;
						this.$http.get('/adPricingModel/queryPageList', {
							params: {
								pageNo: 1,
								pageSize: 1000,
								isDelete: 0,
							}
						}).then(res => {
							const pricingUnitMap = {
								"1": "元/点击",
								"2": "元/天",
								"3": "元/笔销售",
								"4": "元/千次曝光",
							}
							this.adPricingModelList = res.data.result.records.map(val => {
								return {
									adPricingModelId: val.id,
									pricingName: val.pricingName,
									pricingUnit: pricingUnitMap[val.pricingUnit],
									checked: false,
									amount: "",
								}
							})
							const result = this.adPricingModelList.map(model => {
								const matchedPrice = this.adSlotPriceList.find(price => price
									.adPricingModelId === model.adPricingModelId);
								return {
									...model,
									amount: matchedPrice ? matchedPrice.amount : model.amount,
									checked: false,
									id: matchedPrice?.id,
								};
							}).filter(val => val.amount).filter(val => val.id == this.detailsInfo
								.relId)
							this.adPricingModelList = result;
							console.log(this.adPricingModelList);
						})
					} else {
						uni.showToast({
							icon: "none",
							title: "该区域暂无计费模式相关配置"
						})
					}

				})
			},
			//周列表
			generateWeek() {
				const weekList = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'].map((val, index) => {
					return {
						label: val,
						value: (index + 1).toString()
					}
				})
				this.weekList = weekList;
			},
			// 月列表
			generatemonth() {
				const monthList = Array.from({
					length: 31
				}, (_, index) => {
					const value = (index + 1).toString();
					return {
						label: value,
						value
					};
				});
				this.monthList = monthList;
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep {
		.u-sticky {
			background-color: #fff;
		}
	}

	.page {
		background-color: #F7F8FC;

	}

	.body {
		padding: 0 24rpx 154rpx;
		box-sizing: border-box;
	}

	.status-message {
		z-index: 9999;
		padding: 13rpx 24rpx;
		box-sizing: border-box;

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

		.status {
			border-radius: 10rpx;
			margin-left: 27rpx;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			font-size: 26rpx;
			font-weight: bold;
			line-height: 1;
		}

		.error {
			margin-left: auto;
			color: #F00000;
		}
	}

	.module {
		padding: 30rpx 20rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;

		.module-title {
			font-size: 34rpx;
			color: #333;
			font-weight: bold;
		}

		.views {
			margin-top: 30rpx;

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

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

		.address {
			margin-top: 30rpx;
			font-size: 26rpx;
			color: #666;
		}

		.admaterial {
			border-radius: 10rpx;
		}
	}

	.footer-view {
		z-index: 99;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 17rpx 24rpx;
		box-sizing: border-box;
		box-shadow: 0rpx 0rpx 12rpx 1rpx rgba(225, 225, 225, 0.3);

		>view {
			width: 50%;
			padding: 26rpx;
			box-sizing: border-box;
			border-radius: 100rpx;
			font-size: 30rpx;
		}

		:first-child {
			background: #fff;
			color: #888;
			border: 1px solid #E5E5E5;
			margin-right: 20rpx;
		}

		:last-child {
			background: #4B9DFF;
			color: #fff;
		}
	}

	.extendArea {
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		background: #F6F8FC;
		border-radius: 10rpx;
	}

	.cycleStrategy {
		min-width: 100rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		border: 1px solid #E5E5E5;
		font-size: 26rpx;
		color: #333;
		padding: 10rpx 32rpx;
		box-sizing: border-box;
		margin-left: 20rpx;
		margin-bottom: 20rpx;

		text {
			line-height: 1;
		}
	}

	.tcycleStrategy-active {
		background: #E0EDFF;
		color: #006DFF;
		border: 1rpx solid #E0EDFF;
	}

	.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;
		}

		.content {
			min-height: 350rpx;
			font-size: 26rpx;
			color: #888;
			padding: 50rpx;
			box-sizing: border-box;

			.title {
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
			}
		}
	}

	.popup-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: 50%;
			background: #FFFFFF;
			padding: 20rpx;
			box-sizing: border-box;
			border-radius: 100px;
			border: 1px solid #E5E5E5;
			color: #888;
		}

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