mobile_h5/card/components/my-popup/my-popup.vue

<template>
	<uni-popup ref="popup" :mask-click="false" maskBackgroundColor="rgba(0, 0, 0, 0.6)">
		<view class="popup">
			<swiper ref="swiper" class="swiper" :current="swiperCurrent" @change="swiperChange"
				:indicator-dots="dataList.length > 1" indicator-active-color="rgba(46, 133, 236, 1)" :autoplay="false"
				:interval="5000">
				<swiper-item v-for="(item, index) in dataList" :key="index">
					<!-- 标题 + 图片 + 活动时间 + 活动简介 -->
					<view v-if="item.type == 1" class="swiper-item-view uni-column">
						<text class="swiper-item-title" v-html="item.data.title"></text>
						<image mode="aspectFit" class="swiper-item-image" :src="item.data.img"></image>
						<view class="swiper-item-time uni-row">
							<image mode="aspectFit" class="clock" src="/static/default/clock.png"></image>
							<text class="acttime">{{acttime}}</text>
						</view>
						<view class="swiper-item-content uni-column">
							<text class="introduce-content" v-html="item.data.content"></text>
						</view>
						<button v-if="index < dataList.length - 1" class="swiper-item-button" @click="swiperNext">继
							续</button>
						<button v-else class="swiper-item-button" @click="popupClose">确 定</button>
					</view>

					<!-- 标题 + 图片 -->
					<view v-if="item.type == 2" class="swiper-item-view uni-column">
						<text class="swiper-item-title" v-html="item.data.title"></text>
						<image mode="aspectFit" style="height: 474rpx; margin-bottom: 50rpx;" :src="item.data.img">
						</image>
						<button v-if="index < dataList.length - 1" class="swiper-item-button" @click="swiperNext">继
							续</button>
						<button v-else class="swiper-item-button" @click="popupClose">确 定</button>
					</view>

					<!-- 标题 + 图片 + 活动简介 -->
					<view v-if="item.type == 3" class="swiper-item-view swiper-item-view-bg uni-column">
						<text class="swiper-item-title" v-html="item.data.title"></text>
						<image mode="aspectFit" style="height: 280rpx; margin-top: 50rpx;" :src="item.data.img"></image>
						<text class="swiper-item-content2" v-html="item.data.content"></text>
						<button v-if="index < dataList.length - 1" class="swiper-item-button" @click="swiperNext">继
							续</button>
						<button v-else class="swiper-item-button" @click="popupClose">确 定</button>
					</view>

					<!-- 标题 + 图片 + 二维码 -->
					<view v-if="item.type == 4" class="swiper-item-view swiper-item-view-bg2 uni-jct uni-column">
						<text class="swiper-item-title" v-html="item.data.title"></text>
						<image mode="aspectFit" style="height: 220rpx; margin-top: 10rpx;" :src="item.data.img"></image>
						<text class="swiper-item-content3" v-html="item.data.content"></text>
						<text class="swiper-item-content4">【{{item.data.sourceName}}】</text>
						<template v-if="[1,3].includes(item.data.exState)">
							<view v-if="item.data.expireTime > 0" class="swiper-item-content4">( 有效期至 {{fmtTime(item.data.expireTime, 3)}} 
								<span v-if="item.data.exState == 3" style="color: #ffaa00;">已临期</span>
							)</view>
							<uv-qrcode ref="qrcode" size="200rpx"
								:value="item.data.qrCode">
								<!-- <template v-slot:loading>
									<text style="color: green;">loading...</text>
								</template> -->
							</uv-qrcode>
						</template>
						<view v-if="item.data.exState == 2" class="uni-column uni-jcse" style="height: 200rpx;">
							<text style="color: red;">已兑换</text>
							<text class="swiper-item-content4">( 兑换时间 {{fmtTime(item.data.exTime, 3)}} )</text>
						</view>
						<view v-if="item.data.exState == 4" class="uni-column uni-jcse" style="height: 200rpx;">
							<text style="color: red;">已过期</text>
							<text v-if="item.data.expireTime > 0" class="swiper-item-content4">( 过期时间 {{fmtTime(item.data.expireTime, 3)}} )</text>
						</view>
						<button v-if="index < dataList.length - 1" class="swiper-item-button" @click="swiperNext">继
							续</button>
						<button v-else class="swiper-item-button" @click="popupClose">关 闭</button>
					</view>
					
					<!-- 标题 + 图片(点击图片打开地图APP进行地点定位) -->
					<view v-if="item.type == 5" class="swiper-item-view uni-column">
						<text class="swiper-item-title" v-html="item.data.title"></text>
						<image mode="aspectFit" style="height: 474rpx; margin-bottom: 50rpx;" :src="item.data.img" @click="dealNavClick(item.data.point)">
						</image>
						<button v-if="index < dataList.length - 1" class="swiper-item-button" @click="swiperNext">继
							续</button>
						<button v-else class="swiper-item-button" @click="popupClose">确 定</button>
					</view>

					<!-- 通知 -->
					<view v-if="item.type == 6" class="swiper-item-view uni-column">
						<text class="swiper-item-title" v-html="item.data.title"></text>
						<!-- mqType 消息类型 2:卡片图片 3:卡片文字 -->
						<image v-if="item.data.mqType == 2" mode="aspectFit" style="height: 474rpx; margin-bottom: 50rpx;" :src="item.data.message">
						</image>
						<text v-if="item.data.mqType == 3" class="swiper-item-message" v-html="item.data.message"></text>
						<button v-if="index < dataList.length - 1" class="swiper-item-button" @click="swiperNext">继
							续</button>
						<button v-else class="swiper-item-button" @click="popupClose">确 定</button>
					</view>
					
					<!-- 标题 + HTML内容 + 图片(可为空) -->
					<view v-if="item.type == 7" class="swiper-item-view uni-column">
						<text class="swiper-item-title" v-html="item.data.title"></text>
						<view class="swiper-item-content5">
							<text v-html="item.data.content"></text>
							<view class="uni-row uni-jcse" style="margin-top: 20px;">
								<image v-for="(item, index) in item.data.imageList" :key="index" mode="aspectFit"
									:style="getImageStyle(item)" :src="item.src"></image>
							</view>
						</view>
						
						<button v-if="index < dataList.length - 1" class="swiper-item-button" @click="swiperNext">继
							续</button>
						<button v-else class="swiper-item-button" @click="popupClose">确 定</button>
					</view>
					
				</swiper-item>
			</swiper>
		</view>
	</uni-popup>
</template>

<script>
	import tools from '/common/tools';
	// import {
	// 	teamName
	// } from '/common/define';

	export default {
		name: "my-popup",
		props: {
			dataList: [{}],
			acttime: "", // 活动时间
			teamType: {
				type: Number,
				default: -1
			}
		},
		data() {
			return {
				swiperCurrent: 0, // swiper当前所在滑块的 index
				isOpen: false,
				// item: {}
			};
		},
		methods: {
			//当前轮播索引
			swiperChange(e) {
				const curIndex = e.detail.current;
				// console.log("swiperChange", curIndex, this.swiperCurrent)
				this.swiperCurrent = curIndex;
			},
			swiperNext() {
				this.swiperCurrent++;
			},
			popupOpen() {
				if (this.dataList.length == 0) {
					console.log("[popupOpen] dataList为空，禁止弹窗");
					return;
				}

				this.swiperCurrent = 0;
				this.$refs.popup.open();
				this.isOpen = true;
			},
			popupClose() {
				this.$refs.popup.close();
				this.isOpen = false;
				this.$emit('popup-close');
			},
			fmtTime(timestamp, type = 2) {
				return tools.timestampToTime(timestamp * 1000, type);
			},
			dealNavClick(navPoint) {
				const url =
					`action://to_map_app?title=${navPoint.name}&latitude=${navPoint.latitude}&longitude=${navPoint.longitude}`;
				// window.location.href = url;
				tools.appAction(url);
			},
			getImageStyle(item) {
				let styleStr = "";
				const width = item.width ?? "180rpx";
				const height = item.height ?? "180rpx";
				styleStr = `width: ${width}; height: ${height};`;
				return styleStr;
			},
			// getTeamName(teamType, teamIndex) {
			// 	return teamName[teamType][teamIndex];
			// },
			// onItemClick(item) {
			// 	this.data.item = item
			// 	this.$emit('my-combo-list-click', this.data);
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.acttime {
		font-weight: 550;
		color: #333333;
		font-size: 30rpx;
	}

	.clock {
		width: 30rpx;
		height: 30rpx;
		margin-right: 20rpx;
	}

	.introduce-content {
		color: #333333;
		font-size: 25rpx;
		line-height: 36rpx;
	}

	.popup {
		width: 90vw;
		// height: 720rpx;
		height: 920rpx;
		background-color: #FEFBF6;
		border-radius: 50rpx;
	}

	.swiper {
		height: 100%;
	}

	// .swiper-item {
	// 	justify-content: space-between;
	// 	/* background-color: lightblue; */
	// }

	.swiper-item-view {
		height: 100%;
		justify-content: space-between;
	}

	.swiper-item-view-bg {
		background-image: url("/static/backgroud/top_colorbar.png"), url("/static/backgroud/oval.png");
		background-repeat: no-repeat;
		background-position-x: center;
		background-position-y: 150rpx, 380rpx;
		background-size: 80%, 70%;
	}

	.swiper-item-view-bg2 {
		background-image: url("/static/backgroud/oval.png");
		background-repeat: no-repeat;
		background-position-x: center;
		background-position-y: 276rpx;
		background-size: 66%;
	}

	.swiper-item-title {
		margin-top: 60rpx;
		margin-bottom: 20rpx;
		font-size: 40rpx;
		font-weight: 550;
	}

	.swiper-item-image {
		height: 300rpx;
	}

	.swiper-item-time {
		height: 65rpx;
		margin-top: 20rpx;
		padding: 0 50rpx;
		justify-content: space-evenly;
		background-color: white;
		border: 0.5px solid;
		border-color: #e7e7e7;
		border-radius: 40rpx;
		box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.13);
	}

	.swiper-item-content {
		width: 80%;
		/* height: 100rpx; */
		margin-top: 30rpx;
		margin-bottom: 60rpx;
		justify-content: start;
	}

	.swiper-item-content2 {
		width: 80%;
		/* height: 100rpx; */
		margin-top: 30rpx;
		margin-bottom: 20rpx;
		// justify-content: center;
		text-align: center;
		font-size: 28rpx;
		line-height: 80rpx;
	}

	.swiper-item-content3 {
		width: 80%;
		margin-top: 10rpx;
		text-align: center;
	}

	.swiper-item-content4 {
		// width: 80%;
		// margin-top: 10rpx;
		text-align: center;
		font-size: 24rpx;
	}
	
	.swiper-item-content5 {
		width: 80%;
		margin-top: 30rpx;
		margin-bottom: 20rpx;
		flex-grow: 1;
		font-size: 26rpx;
		line-height: 46rpx;
	}
	
	::v-deep li {
		margin-bottom: 10rpx;
	}
	
	.swiper-item-message {
		width: 80%;
		/* height: 100rpx; */
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		// justify-content: center;
		text-align: left;
		font-size: 28rpx;
		// line-height: 80rpx;
		flex-grow: 1;
	}
	
	.swiper-item-button {
		width: 80%;
		height: 76rpx;
		margin-bottom: 50rpx;
		color: #ffffff;
		/* font-weight: bold; */
		line-height: 76rpx;
		background-color: #2e85ec;
		border-radius: 27px;
	}

	::v-deep .uni-swiper-dots-horizontal {
		bottom: 155rpx;
	}
	
	// ::v-deep .uni-swiper-dot-active {
	// 	background: #ff870e !important;
	// }
</style>