火车票app首页
This commit is contained in:
tangxinyue
parent
e233f84b4d
commit
cfce21f87e
File diff suppressed because it is too large
Load Diff
|
|
@ -1,153 +1,192 @@
|
|||
<template>
|
||||
<view class="container">
|
||||
<NavBar title="选择机票" bgColor="#F0F4F9" isBack></NavBar>
|
||||
<NavBar :title="`选择${type=='airTicket'?'机票':'火车票'}`" bgColor="#F0F4F9" isBack></NavBar>
|
||||
|
||||
<view class="content">
|
||||
<view class="app-card" v-for="(item, index) in appList" :key="index" @click="handleItemClick(item)">
|
||||
<!-- Background Watermark -->
|
||||
<image class="watermark" :src="item.bgImage" mode="heightFix"></image>
|
||||
<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>
|
||||
<!-- 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>
|
||||
<text class="app-name">{{ item.name }}</text>
|
||||
</view>
|
||||
|
||||
<uni-icons type="right" size="18" color="#CCCCCC"></uni-icons>
|
||||
</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 } 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();
|
||||
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();
|
||||
|
||||
const appList = [
|
||||
{
|
||||
name: '去哪儿APP',
|
||||
logo: '/static/image/other/tickets-app/qvnar-logo.png',
|
||||
bgImage: '/static/image/other/tickets-app/qvnar-bg.png',
|
||||
path: '/pages/other/air-tickets/qunar-air-tickets/qunar-air-tickets',
|
||||
isHot: false
|
||||
},
|
||||
{
|
||||
name: '飞猪APP',
|
||||
logo: '/static/image/other/tickets-app/fliggy-logo.png',
|
||||
bgImage: '/static/image/other/tickets-app/fliggy-bg.png',
|
||||
path: '/pages/other/air-tickets/fliggy-air-tickets/fliggy-air-tickets',
|
||||
isHot: true
|
||||
},
|
||||
{
|
||||
name: '携程APP',
|
||||
logo: '/static/image/other/tickets-app/trip-com-logo.png',
|
||||
bgImage: '/static/image/other/tickets-app/trip-com-bg.png',
|
||||
path: '/pages/other/air-tickets/ctrip-air-tickets/ctrip-air-tickets',
|
||||
isHot: false
|
||||
},
|
||||
// {
|
||||
// name: '铁路12306',
|
||||
// logo: '/static/image/other/tickets-app/12306-logo.png',
|
||||
// bgImage: '/static/image/other/tickets-app/12306-bg.png',
|
||||
// path: '/pages/other/train-tickets/12306-tickets/12306-tickets',
|
||||
// isHot: false
|
||||
// }
|
||||
]
|
||||
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: "机票"
|
||||
})
|
||||
}
|
||||
|
||||
onLoad((option) => {
|
||||
// 进入机票页面埋点
|
||||
proxy.$apiUserEvent('all', {
|
||||
type: 'event',
|
||||
key: 'ticket',
|
||||
prefix: '.uni.other.',
|
||||
value: "机票"
|
||||
})
|
||||
})
|
||||
|
||||
const handleItemClick = (item) => {
|
||||
if (item.path) {
|
||||
util.goPage(item.path)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '开发中',
|
||||
icon: 'none'
|
||||
})
|
||||
|
||||
/**
|
||||
* 跳转火车票/飞机票页面
|
||||
*/
|
||||
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;
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background-color: #F0F4F9;
|
||||
}
|
||||
|
||||
.card-left {
|
||||
.content {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.app-card {
|
||||
position: relative;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
height: 188rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
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);
|
||||
|
||||
.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;
|
||||
}
|
||||
.watermark {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 80%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-size: 36rpx;
|
||||
color: #3D3D3D;
|
||||
font-weight: 500;
|
||||
.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>
|
||||
Loading…
Reference in New Issue