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">{{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">{{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">{{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">{{item.data.title}}</text>
						<image mode="aspectFit" style="height: 280rpx; margin-top: 50rpx;" :src="item.data.img"></image>
						<text class="swiper-item-content2">{{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">{{item.data.title}}</text>
						<image mode="aspectFit" style="height: 260rpx; margin-top: 10rpx;" :src="item.data.img"></image>
						<text class="swiper-item-content3">{{item.data.content}}</text>
						<uv-qrcode v-if="item.data.qrCode.length > 0" ref="qrcode" size="200rpx"
							:value="item.data.qrCode">
							<!-- <template v-slot:loading>
								<text style="color: green;">loading...</text>
							</template> -->
						</uv-qrcode>
						<view v-else class="uni-column uni-jcse" style="height: 200rpx;">
							<text style="color: red;">已兑换</text>
							<text style="font-size: 24rpx;">( 兑换时间 {{item.data.exTime}} )</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">{{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>

				</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');
			},
			dealNavClick(navPoint) {
				const url =
					`action://to_map_app?title=${navPoint.name}&latitude=${navPoint.latitude}&longitude=${navPoint.longitude}`;
				window.location.href = url;
				// tools.appAction(url);
			}
			// 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: 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: 316rpx;
		background-size: 70%;
	}

	.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: 80rpx;
		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-button {
		width: 80%;
		height: 106rpx;
		margin-bottom: 60rpx;
		color: #ffffff;
		/* font-weight: bold; */
		line-height: 106rpx;
		background-color: #2e85ec;
		border-radius: 27px;
	}

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