LocalLivingServicesUniapp/pages/adManagement/fullscreenAdDetails.vue

<template>
	<view class="page">
		<view class="top"></view>
		<view class="head">
			<view class="handle">
				<view class="head_left">
					<span class="cuIcon-back" @click="back" style="font-weight: 600;"></span>
				</view>
				<span class="center">广告详情</span>
				<view class="head_right">
				</view>
			</view>
		</view>
		<view class="body">
			<view class="module dis f-c ">
				<text class="module-title ">投放状态：</text>
				<view class="views dis a-c j-s ">
					<text>{{detailsInfo.statusName}}</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.merchantAdDeliveryPlanDTO.planName}}</text>
				</view>
				<view class="views dis a-c j-s ">
					<text>位置名称</text>
					<text>{{detailsInfo.merchantAdDeliveryPlanDTO.positionName}}</text>
				</view>
			</view>
			<view class="module dis f-c ">
				<text class="module-title ">投放区域</text>
				<text class="address">{{detailsInfo.merchantAdDeliveryPlanDTO.coverageArea}}公里（半径）</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.merchantAdDeliveryPlanDTO.planStartTime}}</text>
				</view>
				<view class="views dis a-c j-s ">
					<text>投放结束日期</text>
					<text>{{detailsInfo.merchantAdDeliveryPlanDTO.planEndTime}}</text>
				</view>
				<view class="views dis a-c j-s ">
					<text>生效周期</text>
					<text v-if="detailsInfo.merchantAdDeliveryPlanDTO.cycleType==1">每天</text>
					<text v-else>
						{{ 
							detailsInfo.merchantAdDeliveryPlanDTO.cycleStrategy
								.split(',')
								.map(num => {
									const week = ['周一','周二','周三','周四','周五','周六','周日'];
									return week[Number(num)-1] || '';
								})
								.join('、') 
						}}
					</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.merchantAdDeliveryPlanDTO.validTimeRangeType==0?'全天':'指定时间段'}}</text>
				</view>
				<view class="extendArea  mt-2" style="font-size: 26rpx;"
					v-if="detailsInfo.merchantAdDeliveryPlanDTO.validTimeRangeType=='1'">
					<view class="" v-for="(item,index) in detailsInfo.merchantAdDeliveryPlanDTO.localAdvertPlanTimeDTOS"
						:key="index">
						<span class="  a-c j-s mb-3">
							<text style="color: #333;">开始时间:</text>
							<text style="color: #333;" class="mr-1"> {{item.startTime}}</text>
						</span> --
						<span class="  a-c j-s ">
							<text style="color: #333;">结束时间:</text>
							<text style="color: #333;" class="mr-1"> {{item.endTime }}</text>
						</span>
					</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=='0'"></u-swiper> -->
					<image :src="detailsInfo.taskImage" mode="" v-if="detailsInfo.imageType=='0'" style="width: 100%;"></image>
					<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 in adPricingModelList.filter(item => detailsInfo.merchantAdDeliveryPlanDTO.adPositionPriceRelId == item.id)" 
						:key="item.id"
					>
						<text>{{ item.pricingName }}</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 v-if="detailsInfo.merchantAdDeliveryPlanDTO.userDailyImpCount=='-1'">不限</text>
					<text v-else>{{detailsInfo.userDailyDisplayLimit}} 次</text>
					
				</view>
				<view class="views dis a-c j-s ">
					<text>每人展示总次数</text>
					<text v-if="detailsInfo.merchantAdDeliveryPlanDTO.userImpCount=='-1'">不限</text>
					<text v-else>{{detailsInfo.userTotalDisplayLimit}} 次</text>
				</view>
				<view class="views dis a-c j-s ">
					<text>展示时间间隔</text>
					<text v-if="detailsInfo.merchantAdDeliveryPlanDTO.displayTimeInterval=='-1'">不限</text>
					<text v-else>{{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 {
				id: '',
				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: [], //广告位价格列表
				headerTitle: "",
			}
		},
		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 = {
					3: '未开始',
					4: '已生效',
					5: '已作废',
					6: '已结束',
				}
				return map[this.detailsInfo.status] || ''
			}
		},
		async onLoad(options) {
			this.id = options.id
			this.generateWeek();
			this.generatemonth();
			this.getDetail()

			this.colorList.map(val => {
				if (val.id == this.detailsInfo.status || 4) {
					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];
			const map = {
				'0': '全屏广告',
				'1': '弹窗广告',
				'2': '轮播广告',
				'3': '页面嵌入广告',
			}
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			adEdit() {
				uni.navigateTo({
					url: '/pages/adManagement/createFullscreenAd?id=' + this.detailsInfo.id,
				})
			},
			getDetail() {
				this.$http.post('/advert/localAdvertTask/getQueryById', {
					id: this.id,
				}).then(res => {
					this.detailsInfo = res.data.result
					console.log(this.detailsInfo)
				})
			},
			//作废操作
			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
							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;
		}
	}
	.top {
		width: 100%;
		height: var(--status-bar-height);
		background: #fff;
	}
	.head {
		width: 100%;
		background: #ffffff;
	
		.handle {
			height: 112rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0px 24rpx;
			position: relative;
	
			.head_left {
				font-size: 40rpx;
			}
	
			.center {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				font-size: 34rpx;
				font-weight: 600;
			}
	
			.head_right {
				display: flex;
				justify-content: space-between;
				align-items: center;
	
				span {
					width: 40rpx;
					height: 40rpx;
					display: flex;
					font-size: 28rpx;
					justify-content: center;
					align-items: center;
				}
			}
		}
	
	}

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