alipay-emulator/pages/other/tickets-app/index.vue

<template>
	<view class="container">
		<NavBar :title="`选择${type=='airTicket'?'机票':'火车票'}`" bgColor="#F0F4F9" isBack></NavBar>

		<view class="content">
			<template v-for="(item, index) in appList" :key="index">
				<view class="app-card" v-if="(type=='airTicket'&&item.airPath)||(type=='trainTicket'&&item.trainPath)"
					@click="handleItemClick(item)">
					<!-- Background Watermark -->
					<image class="watermark" :src="item.bgImage" mode="heightFix"></image>

					<!-- Front Content -->
					<view class="card-left">
						<view class="logo-box">
							<image class="logo" :src="item.logo" mode="aspectFit"></image>
							<!-- Hot Tag for Fliggy -->
							<view v-if="item.isHot" class="hot-tag">
								<image style="width: 72rpx;height:32rpx" src="/static/image/index/hot-icon.png"
									mode="aspectFit"></image>
							</view>
						</view>
						<text class="app-name">{{ item.name }}</text>
					</view>

					<uni-icons type="right" size="18" color="#CCCCCC"></uni-icons>
				</view>
			</template>
		</view>
	</view>
</template>

<script setup>
	import NavBar from '@/components/nav-bar/nav-bar.vue';
	import {
		reactive,
		toRefs,
		getCurrentInstance,
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		util
	} from '@/utils/common.js'; // Assuming util exists for navigation, similar to previous tasks
	const {
		appContext,
		proxy
	} = getCurrentInstance();

	let type = ref('airTicket')

	const appList = [{
			name: '去哪儿APP',
			logo: '/static/image/other/tickets-app/qvnar-logo.png',
			bgImage: '/static/image/other/tickets-app/qvnar-bg.png',
			airPath: '/pages/other/air-tickets/qunar-air-tickets/qunar-air-tickets',
			trainPath: "",
			isHot: false
		},
		{
			name: '飞猪APP',
			logo: '/static/image/other/tickets-app/fliggy-logo.png',
			bgImage: '/static/image/other/tickets-app/fliggy-bg.png',
			airPath: '/pages/other/air-tickets/fliggy-air-tickets/fliggy-air-tickets',
			trainPath: "",
			isHot: true
		},
		{
			name: '携程APP',
			logo: '/static/image/other/tickets-app/trip-com-logo.png',
			bgImage: '/static/image/other/tickets-app/trip-com-bg.png',
			airPath: '/pages/other/air-tickets/ctrip-air-tickets/ctrip-air-tickets',
			trainPath: "",
			isHot: false
		},
		{
			name: '铁路12306',
			logo: '/static/image/other/tickets-app/12306-logo.png',
			bgImage: '/static/image/other/tickets-app/12306-bg.png',
			airPath: '',
			trainPath: "/pages/other/train-tickets/12306-tickets/12306-tickets",
			isHot: false
		}
	]

	onLoad((option) => {
		const appType = option.type
		if (appType == "trainTicket") {
			type.value = "trainTicket"
		} else {
			type.value = "airTicket"
			// 进入机票页面埋点
			proxy.$apiUserEvent('all', {
				type: 'event',
				key: 'ticket',
				prefix: '.uni.other.',
				value: "机票"
			})
		}

	})


	/**
	 * 跳转火车票/飞机票页面
	 */
	const handleItemClick = (item) => {
		if (type.value == 'trainTicket') {
			if (item.trainPath) {
				util.goPage(item.trainPath)
			} else {
				uni.showToast({
					title: '开发中',
					icon: 'none'
				})
			}
		} else {
			if (item.airPath) {
				util.goPage(item.airPath)
			} else {
				uni.showToast({
					title: '开发中',
					icon: 'none'
				})
			}
		}

	}
</script>
<style lang="less" scoped>
	.container {
		min-height: 100vh;
		background-color: #F0F4F9;
	}

	.content {
		padding: 24rpx;
	}

	.app-card {
		position: relative;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		height: 188rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24rpx 0 32rpx;
		margin-bottom: 24rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.02);

		.watermark {
			position: absolute;
			right: 0;
			bottom: 0;
			height: 80%;
			pointer-events: none;
		}

		.card-left {
			display: flex;
			align-items: center;
			z-index: 1;

			.logo-box {
				position: relative;
				margin-right: 28rpx;

				.logo {
					width: 108rpx;
					height: 108rpx;
					border-radius: 16rpx;
					display: block; // Remove extra space
				}

				.hot-tag {
					position: absolute;
					top: -12rpx;
					right: -30rpx;
				}
			}

			.app-name {
				font-size: 36rpx;
				color: #3D3D3D;
				font-weight: 500;
			}
		}
	}
</style>