yicangzongtai_app_240321/pages/home/module/popup.vue

<template>
	<uni-popup ref="popupRef" type="center">
		<view class="">
			<view class="popup-box" :style="{'height': swiperHeight + 'rpx'}">
				<u-swiper :list="swiperList" :height="swiperHeight" bg-color="transparent"
					:mode="swiperList && swiperList.length > 1 ?'round': 'none'" @click="openSwiper"></u-swiper>
			</view>
			<view class="cancel-btn">
				<image @click.stop="cancelPopup(true)" src="./cancel-btn.png" mode="aspectFit"></image>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import {
		getBannerList
	} from "@/api/government.js"
	export default {
		props: {
			pattern: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				StorageName: 'adHistory',
				swiperHeight: 775,
				swiperList: [],
				popupTyle: ['', false, false],
				openNum: 0,
			}
		},
		created() {

		},
		methods: {

			getSwiper(newNum) {
				const status = this.popupTyle[newNum];
				// if (status === true) return
				const adInfo = {}
				const key = newNum === 1 ? this.$keys.ZW_TanChuang : this.$keys.SH_TanChuang;
				getBannerList(key).then(res => {
					const data = res.data || []
					this.swiperList = data.map(el => {
						el.image = this.$getImgPath(el.image)
						const t = new Date(el.updateTime).getTime()
						adInfo[el.adId] = t
						return el
					});
					this.getNewAD(this.swiperList, key, adInfo)
					// this.openNum = newNum;
				}).finally(() => {})
			},

			getNewAD(adList, key, adInfo) {
				if (adList && adList.length > 0) {
					// 1. 获取缓存的广告历史信息
					let adHistory = {}
					try {
						adHistory = uni.getStorageSync(this.StorageName) || {};
						// console.log('adHistory = ', adHistory, uni.getStorageSync(this.StorageName))
					} catch (e) {
						// error
					};
					// 2. 读取当前模块的广告历史信息
					const History = adHistory[key];

					if (History) {
						// 4. 存在历史信息
						try {
							const adInfoKeys = Object.keys(adInfo) || [];
							adInfoKeys.forEach(el => {
								// 历史记录不存在当前ID，或者当前ID的值不等于历史ID的值，则存在新的广告数据
								if (!History[el] || adInfo[el] !== History[el]) {
									this.$refs.popupRef.open()
									throw new Error('匹配不到数据了')
								}
							})

						} catch (e) {
							//TODO handle the exception
							// console.log('adInfoKeys', e)
						}
					} else {
						// 3. 不存在历史信息, 或者当前广告数据比历史数据多
						this.$refs.popupRef.open()
					};

					// 缓存当前的广告信息
					adHistory[key] = adInfo
					uni.setStorage({
						key: this.StorageName,
						data: adHistory,
						success: function() {
							// console.log('success adHistory');
						}
					});

				} else {
					this.$refs.popupRef.close()
				}


			},

			openSwiper(e) {
				this.cancelPopup(true)
				this.$openPage(this.swiperList[e])
			},
			cancelPopup(status = false) {
				try {
					if (status) {
						this.popupTyle[this.openNum] = status
					}
					this.swiperList = []
					this.$refs.popupRef.close()

				} catch {}
			}
		},
		mounted() {

		},
		watch: {
			pattern: {
				handler: function(newNum, oldNum) {
					if ([1, 2].includes(newNum)) {
						this.cancelPopup()
						this.getSwiper(newNum)
					}
				},
				immediate: true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cancel-btn {
		text-align: center;
		padding-top: 40rpx;

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

	.popup-box {
		width: 544rpx;

	}
</style>