cashier_weapp/components/popupad.vue

<template>
	<view class="viewswiper" v-if="viewswiperShow">
		<view class="swiperBox">
			<u-swiper
				:list="popupadList" 
				previousMargin="30"
				nextMargin="30"
				circular
				:autoplay="true"
				:indicator="false"
				keyName="imgUrl" 
				radius='10'
				@change="e => current = e.current" 
				@click="swiperClick"
				bgColor="transparent" height='720'
				>
				<view slot="indicator" class="indicator">
				<!-- 	<view class="indicator__dot" v-for="(item, index) in carousel" :key="index"
						:class="[index === current && 'indicator__dot--active']"
						:style="[index === current && {'width':16+'px'}]">
					</view> -->
				</view>
			</u-swiper>
		</view>
		
		<u-icon name="close-circle" color="#fff" size="70" @click="closeClick"></u-icon>
	</view>
</template>

<script>
	import dayjs from "dayjs";
	// import dayjs from "dayjs";
	
	export default {
		data() {
			return {
				current: 0,
				popupadList: [],
				viewswiperShow: false,
				time: false,
			};
		},
		props: {
			showPosition: {
				type: String,
				default: ''
			},
			forceUpdate: {
				type: Boolean,
				default: false
			},
			
		},
		watch: {
		    forceUpdate(val,oldval) {
				// 在 forceUpdate 改变时执行更新操作
				let time = uni.cache.get('popUpTime') ? new Date().getTime() - uni.cache.get('popUpTime') : 1000;
				if ( time >= 1000 ) {
					uni.cache.set('popUpTime', new Date().getTime())
					this.getPopUpAd(); // 重新加载数据
				}
			
		    }
		  },
		mounted () {
			// if (uni.cache.get('shopUser') && uni.cache.get('token')) {
			// }
		
		},
		methods: {
			
			/**
			 * 轮播图点击
			 */
			swiperClick (e) {
				let item = this.popupadList[e];
				if ( item.linkPath ) {
					uni.navigateTo({
						url: `${item.linkPath}` 
					})
				}
			},
			
			/**
			 * 关闭广告
			 */
			closeClick () {
				this.viewswiperShow = false;
			},
			
			/**
			 * 获取弹窗广告
			 */
			async getPopUpAd () {
				let res = await this.api.getPopUpAd({
					shopId: uni.cache.get('shopUser')
				})
				if (res.code == 0) {
					this.popupadList = [];
					// console.log(this.showPosition)
					// console.log(this.showPosition)
					// console.log(!uni.cache.get('popUpData'))
					if (!uni.cache.get('popUpData')) {
						res.data.forEach((item,index)=>{
							if ( item.showPosition == this.showPosition) {
								item["popUpTime"] = dayjs().format('YYYY-MM-DD');
								this.popupadList.push(item);
							}
						})
						uni.cache.set('popUpData', this.popupadList)
					} else {
						let popUpData = uni.cache.get('popUpData');
						res.data.forEach((item1,index1)=>{
							if ( popUpData.filter(obj => obj.id == item1.id).length > 0 ) {
								let obj = popUpData.filter(obj => obj.id == item1.id)[0];
								// console.log(this.showPosition)
								// console.log(item1.updateTime, obj.updateTime)
								// console.log(item1.showPosition == this.showPosition,this.isFrequency(item1.frequency,item1.popUpTime),item1.updateTime != obj.updateTime)
								if ( (item1.showPosition == this.showPosition && this.isFrequency(item1.frequency,item1.popUpTime)) || ( item1.showPosition == this.showPosition && item1.updateTime != obj.updateTime) ) {
									item1["popUpTime"] = dayjs().format('YYYY-MM-DD');
									this.popupadList.push(item1)
								}
								popUpData.forEach((item,index)=>{
									if ( item.id == item1.id && JSON.stringify(item1) != JSON.stringify(item) ) {
										popUpData[index]= item1;
									}
								})
							} else {
								if ( item1.showPosition == this.showPosition) {
									item1["popUpTime"] = dayjs().format('YYYY-MM-DD');
									this.popupadList.push(item1);
									popUpData.push(item1);
								}
							}
							
						})
						// console.log(popUpData)
						uni.cache.set('popUpData', popUpData)			
						// console.log(this.popupadList)
						// updateTime
						
					}
					if ( this.popupadList.length > 0 ) {
						this.viewswiperShow = true;
					}
				}
			},
			
			isFrequency (frequency,popUpTime) {
				switch (frequency) {
					case "only_one":	//仅首次展示
						return false;
						break;
					case 'every_show':	//每次打开都展示
						return true;
						break;
					case 'every_day':	//每天展示一次
						// return this.isTime("2024-08-22",1);
						return this.isTime(frequency,1);
						break;
					case 'three_day':	//3天展示一次
					// return this.isTime("2024-08-20",1);
						return this.isTime(frequency,3);
						break;
					case 'seven_day':	//7天展示一次
					// return this.isTime("2024-08-16",1);
						return this.isTime(frequency,7);
						break;
					case 'thirty_day':	//30天展示一次
					// return this.isTime("2024-07-24",1);
						return this.isTime(frequency,30);
						break;
				}
			},
			
			isTime (popUpTime,num) {
				// 获取当前日期
				let date1 = dayjs();
				let date2 = dayjs(popUpTime).format('YYYY-MM-DD');
				// console.log(date1.diff(date2, "day"))
				if ( date1.diff(date2, "day") >= num ) {
					return true;
				} else {
					return false;
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	page{
		width: 100%;
		height: 100%;
	}
	.viewswiper {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,0.5);
		z-index: 999;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.swiperBox{
			width: 80%;
			margin-bottom: 50rpx;
		}
		.swiper__wrapper__item__wrapper__image{
			border-radius: 10rpx;
		}
		.indicator {
			margin-bottom: 46rpx;
			@include flex(row);
			justify-content: center;

			&__dot {
				height: 6px;
				width: 6px;
				border-radius: 100px;
				background-color: rgba(255, 255, 255, 0.35);
				margin: 0 5px;
				transition: background-color 0.3s;

				&--active {
					background-color: #ffffff;
				}
			}
			.indicator_img{
				
			}
		}

		.indicator-num {
			padding: 2px 0;
			background-color: rgba(0, 0, 0, 0.35);
			border-radius: 100px;
			width: 35px;
			@include flex;
			justify-content: center;

			&__text {
				color: #FFFFFF;
				font-size: 12px;
			}
		}
	}
</style>