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/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: "/pages/other/train-tickets/ctrip-train-tickets/ctrip-train-tickets",
		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
	}, {
		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: "/pages/other/train-tickets/qunar-train-tickets/qunar-train-tickets",
		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
	},
]

onLoad((option) => {
	const appType = option.type
	if (appType == "trainTicket") {
		type.value = "trainTicket"
		// 进入高铁票页面埋点
		proxy.$apiUserEvent('all', {
			type: 'event',
			key: 'train_ticket',
			prefix: '.uni.other.',
			value: "高铁票"
		})
	} 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 && 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>