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

<template>
	<uni-popup ref="popup" :mask-click="false" maskBackgroundColor="rgba(0, 0, 0, 0.6)">
		<swiper ref="swiper" class="swiper" :style="getSwiperStyle()" :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>

					<view class="swiper-item-main uni-column uni-jcse">
						<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>
					</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>

					<view class="swiper-item-main uni-column">
						<image mode="aspectFit" style="height: 237px; margin-top: 15px; margin-bottom: 25px;"
							:src="item.data.img">
						</image>
					</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 == 3" class="swiper-item-view swiper-item-view-bg uni-column">
					<text class="swiper-item-title" v-html="item.data.title"></text>

					<view class="swiper-item-main uni-column uni-jcse">
						<image mode="aspectFit" style="height: 140px; margin-top: 25px;" :src="item.data.img"></image>
						<text class="swiper-item-content2" 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 == 4" class="swiper-item-view swiper-item-view-bg2 uni-jct uni-column">
					<view v-if="item.data.sponsorsLogo" class="sponsorsLogo" :style="getSponsorsLogoStyle(item.data.sponsorsLogo)"></view>
					<text class="swiper-item-title" v-html="item.data.title"></text>

					<view class="swiper-item-main uni-column uni-jcse">
						<view class="uni-column uni-jcse" style="height: 50px;">
							<text class="swiper-item-content3" v-html="item.data.content"></text>
							<text class="swiper-item-content4">【{{item.data.sourceName}}】</text>
						</view>
						<image class="swiper-item-image2" mode="aspectFit" :src="item.data.img"></image>
						<template v-if="[1,3].includes(item.data.exState)">
							<!-- verfType: 兑换券展示类型  1 本系统核销  2 赞助商提供码核销 3 赞助商不提供码核销 -->
							<uv-qrcode v-if="item.data.verfType==1" ref="qrcode" size="100px" :value="item.data.qrCode">
								<!-- <template v-slot:loading>
										<text style="color: green;">loading...</text>
									</template> -->
							</uv-qrcode>
							<view v-if="item.data.verfType==2" class="swiper-item-couponNum">券码：{{item.data.otherSerCode}}</view>
							<view v-if="item.data.expireTime > 0" class="swiper-item-content4" style="color: #ED0000;">( 有效期至
								{{fmtTime(item.data.expireTime, 1)}}
								<span v-if="item.data.exState == 3" style="color: #ffaa00; font-size: bold;">已临期</span>
								)
							</view>
							<view v-if="item.data.cDesc.length > 0" class="swiper-item-desc" v-html="item.data.cDesc"></view>
						</template>
						<view v-if="item.data.exState == 2" class="uni-column uni-jcse" style="height: 100px;">
							<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: 100px;">
							<text style="color: red;">已过期</text>
							<text v-if="item.data.expireTime > 0" class="swiper-item-content4">( 过期时间
								{{fmtTime(item.data.expireTime, 1)}} )</text>
						</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>

				<!-- 【兑换地点 - 单点】标题 + 图片(点击图片打开地图APP进行地点定位) -->
				<view v-if="item.type == 5" class="swiper-item-view uni-column">
					<text class="swiper-item-title" v-html="item.data.title"></text>

					<view class="swiper-item-main uni-column">
						<image mode="aspectFit" style="height: 237px; margin-top: 15px; margin-bottom: 25px;"
							:src="item.data.img" @click="dealNavClick(item.data.point)">
						</image>
					</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 == 6" class="swiper-item-view uni-column">
					<text class="swiper-item-title" v-html="item.data.title"></text>

					<view class="swiper-item-main uni-column uni-jcse">
						<!-- mqType 消息类型 2:卡片图片 3:卡片文字 -->
						<image v-if="item.data.mqType == 2" mode="aspectFit"
							style="height: 237px; margin-bottom: 25px;" :src="item.data.message">
						</image>
						<text v-if="item.data.mqType == 3" class="swiper-item-message"
							v-html="item.data.message"></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>

				<!-- 标题 + HTML内容 + 图片(可为空) -->
				<view v-if="item.type == 7" class="swiper-item-view uni-column">
					<image v-if="item.data.topLogo" class="swiper-item-topLogo"
						:style="getImageStyle(item.data.topLogo)" mode="aspectFit" :src="item.data.topLogo.src"></image>
					<text class="swiper-item-title" v-html="item.data.title"></text>

					<view class="swiper-item-main uni-column uni-jcse">
						<view class="swiper-item-content5">
							<view v-if="item.data.content" v-html="item.data.content"></view>
							<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 v-if="item.data.memo" style="padding-top: 10px;" v-html="item.data.memo"></view>
						</view>
					</view>
					
					<image v-if="item.data.bottomLogo" class="swiper-item-bottomLogo" mode="aspectFit"
						:style="getImageStyle(item.data.bottomLogo)" :src="item.data.bottomLogo.src"></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>

				<!-- 【兑换地点 - 多点】标题 + 头部图片 + 头部memo + 多点导航列表 + 底部memo -->
				<view v-if="item.type == 8" class="swiper-item-view uni-column">
					<text class="swiper-item-title" v-html="item.data.title"></text>
					<image v-if="item.data.topImg" class="" :style="getImageStyle(item.data.topImg)" mode="aspectFit" :src="item.data.topImg.src"></image>
					<view v-if="item.data.topMemo" v-html="item.data.topMemo"></view>

					<view class="swiper-item-main uni-column uni-jcse">
						<view class="swiper-item-content5">
							<view v-if="item.data.content" v-html="item.data.content"></view>
							<view class="uni-column uni-jcse" style="margin-top: 20px;">
								<view class="uni-row uni-jcsb" style="width: 96%; line-height: 30px;" v-for="(point, index) in item.data.pointList" :key="index">
									<view class="uni-row uni-jct" style="width: 80%;">
										<!-- <text v-if="point.map" class="nowrap" v-html="point.map + '：'"></text> -->
										<text v-if="point.name" class="nowrap" v-html="point.map ? (point.map + '：' + point.name) : point.name"></text>
									</view>
									<view class="uni-row uni-jcsa" style="width: 20%;" @click="dealNavClick(point)">
										<image mode="aspectFit" style="width: 10px; height: 15px;" src="/static/common/nav2.png"></image>
										<text class="" style="color: #E60012; font-size: 14px;" >导航</text>
									</view>
								</view>
							</view>
							<view v-if="item.data.bottomMemo" style="padding-top: 10px;" v-html="item.data.bottomMemo" @click="dealUrlClick(item.data.bottomMemoUrl)"></view>
						</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>
	</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
			},
			config: {
				type: Object,
				default: () => ({ 
					height: ""
				})
			}
		},
		data() {
			return {
				swiperCurrent: 0, // swiper当前所在滑块的 index
				isOpen: false,
				// item: {}
			};
		},
		methods: {
			getSwiperStyle() {
				let styleStr = "";
				if (this.config.height != undefined && this.config.height != "") {
					styleStr += `height: ${this.config.height};`;
					console.log("[getSwiperStyle] style:", styleStr);
				}
				return styleStr;
			},
			//当前轮播索引
			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);
			},
			dealUrlClick(url) {
				if (url != undefined && url.length > 0) {
					tools.appAction(url);	
				}
			},
			getImageStyle(item) {
				let styleStr = "";
				const width = item.width ?? "90px";
				const height = item.height ?? "90px";
				styleStr = `width: ${width}; height: ${height};`;
				return styleStr;
			},
			getSponsorsLogoStyle(bgurl) {
				return `background-image: url("${bgurl}")`;
			},
			// 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>

	.swiper {
		width: 90vw;
		height: 439px;
		background-color: #FEFBF6;
		border-radius: 25px;
	}

	// ::v-deep uni-swiper-item {
	// 	overflow: auto;
	// }

	.swiper-item-view {
		height: 95%;
		padding-top: 25px;
		// 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: 75px, 190px;
		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: 198px;
		// background-size: 66%;
	}

	.swiper-item-topLogo {
		width: 100px;
		height: 100px;
		margin-bottom: 18px;
	}

	.swiper-item-bottomLogo {
		width: 100px;
		height: 100px;
		margin-bottom: 30px;
	}

	.swiper-item-title {
		margin-bottom: 10px;
		font-size: 20px;
		font-weight: 550;
	}

	.swiper-item-main {
		width: 100%;
		flex-grow: 1;
	}

	.swiper-item-image {
		height: 150px;
	}

	.swiper-item-image2 {
		height: 110px;
		// margin-top: 5px;
	}

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

	.swiper-item-content {
		width: 80%;
		margin-top: 15px;
		margin-bottom: 30px;
		justify-content: start;
		flex-grow: 1;
	}

	.swiper-item-content2 {
		width: 80%;
		margin-top: 60px;
		margin-bottom: 10px;
		// justify-content: center;
		text-align: center;
		font-size: 14px;
		line-height: 40px;
		flex-grow: 1;
	}

	.swiper-item-content3 {
		width: 80%;
		// margin-top: 5px;
		text-align: center;
	}

	.swiper-item-content4 {
		// width: 80%;
		text-align: center;
		font-size: 12px;
	}

	.swiper-item-content5 {
		width: 80%;
		flex-grow: 1;
		font-size: 14px;
		line-height: 21px;
		overflow-y: scroll;
	}
	
	.swiper-item-couponNum {
		font-size: 16px;
		font-weight: 500;
		color: #383838;
	}

	.swiper-item-desc {
		width: 80%;
		font-size: 12px;
		font-weight: 400;
		color: #818181;
	}
	
	::v-deep li {
		margin-bottom: 5px;
	}

	.swiper-item-message {
		width: 80%;
		margin-top: 10px;
		margin-bottom: 10px;
		// justify-content: center;
		text-align: left;
		font-size: 14px;
		line-height: 21px;
		flex-grow: 1;
	}

	.swiper-item-button {
		width: 80%;
		height: 38px;
		margin-bottom: 25px;
		color: #ffffff;
		/* font-weight: bold; */
		line-height: 38px;
		background-color: #2e85ec;
		border-radius: 27px;
	}

	.acttime {
		font-weight: 550;
		color: #333333;
		font-size: 15px;
	}

	.clock {
		width: 15px;
		height: 15px;
		margin-right: 10px;
	}

	.introduce-content {
		color: #333333;
		font-size: 14px;
		line-height: 21px;
		flex-grow: 1;
	}

	.nowrap {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.sponsorsLogo {
		position: absolute;
		width: 120px;
		// width: 75px;
		height: 75px;
		left: 18px;
		top: 8px;
		background-position-x: left;
		background-position-y: center;
		background-repeat: no-repeat;
		background-size: contain;
		// background-size: 100% auto;
	}
	
	::v-deep .uni-swiper-dots-horizontal {
		bottom: 75px;
	}

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