火车票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>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<NavBar title="选择机票" bgColor="#F0F4F9" isBack></NavBar>
|
<NavBar :title="`选择${type=='airTicket'?'机票':'火车票'}`" bgColor="#F0F4F9" isBack></NavBar>
|
||||||
|
|
||||||
<view class="content">
|
<view class="content">
|
||||||
<view class="app-card" v-for="(item, index) in appList" :key="index" @click="handleItemClick(item)">
|
<template v-for="(item, index) in appList" :key="index">
|
||||||
<!-- Background Watermark -->
|
<view class="app-card" v-if="(type=='airTicket'&&item.airPath)||(type=='trainTicket'&&item.trainPath)"
|
||||||
<image class="watermark" :src="item.bgImage" mode="heightFix"></image>
|
@click="handleItemClick(item)">
|
||||||
|
<!-- Background Watermark -->
|
||||||
|
<image class="watermark" :src="item.bgImage" mode="heightFix"></image>
|
||||||
|
|
||||||
<!-- Front Content -->
|
<!-- Front Content -->
|
||||||
<view class="card-left">
|
<view class="card-left">
|
||||||
<view class="logo-box">
|
<view class="logo-box">
|
||||||
<image class="logo" :src="item.logo" mode="aspectFit"></image>
|
<image class="logo" :src="item.logo" mode="aspectFit"></image>
|
||||||
<!-- Hot Tag for Fliggy -->
|
<!-- Hot Tag for Fliggy -->
|
||||||
<view v-if="item.isHot" class="hot-tag">
|
<view v-if="item.isHot" class="hot-tag">
|
||||||
<image style="width: 72rpx;height:32rpx" src="/static/image/index/hot-icon.png"
|
<image style="width: 72rpx;height:32rpx" src="/static/image/index/hot-icon.png"
|
||||||
mode="aspectFit"></image>
|
mode="aspectFit"></image>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<text class="app-name">{{ item.name }}</text>
|
||||||
</view>
|
</view>
|
||||||
<text class="app-name">{{ item.name }}</text>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<uni-icons type="right" size="18" color="#CCCCCC"></uni-icons>
|
<uni-icons type="right" size="18" color="#CCCCCC"></uni-icons>
|
||||||
</view>
|
</view>
|
||||||
|
</template>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import NavBar from '@/components/nav-bar/nav-bar.vue';
|
import NavBar from '@/components/nav-bar/nav-bar.vue';
|
||||||
import { reactive, toRefs, getCurrentInstance } from 'vue';
|
import {
|
||||||
import { onLoad } from '@dcloudio/uni-app';
|
reactive,
|
||||||
import { util } from '@/utils/common.js'; // Assuming util exists for navigation, similar to previous tasks
|
toRefs,
|
||||||
const {
|
getCurrentInstance,
|
||||||
appContext,
|
ref
|
||||||
proxy
|
} from 'vue';
|
||||||
} = getCurrentInstance();
|
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 = [
|
let type = ref('airTicket')
|
||||||
{
|
|
||||||
name: '去哪儿APP',
|
const appList = [{
|
||||||
logo: '/static/image/other/tickets-app/qvnar-logo.png',
|
name: '去哪儿APP',
|
||||||
bgImage: '/static/image/other/tickets-app/qvnar-bg.png',
|
logo: '/static/image/other/tickets-app/qvnar-logo.png',
|
||||||
path: '/pages/other/air-tickets/qunar-air-tickets/qunar-air-tickets',
|
bgImage: '/static/image/other/tickets-app/qvnar-bg.png',
|
||||||
isHot: false
|
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',
|
name: '飞猪APP',
|
||||||
path: '/pages/other/air-tickets/fliggy-air-tickets/fliggy-air-tickets',
|
logo: '/static/image/other/tickets-app/fliggy-logo.png',
|
||||||
isHot: true
|
bgImage: '/static/image/other/tickets-app/fliggy-bg.png',
|
||||||
},
|
airPath: '/pages/other/air-tickets/fliggy-air-tickets/fliggy-air-tickets',
|
||||||
{
|
trainPath: "",
|
||||||
name: '携程APP',
|
isHot: true
|
||||||
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',
|
name: '携程APP',
|
||||||
isHot: false
|
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',
|
||||||
// name: '铁路12306',
|
trainPath: "",
|
||||||
// logo: '/static/image/other/tickets-app/12306-logo.png',
|
isHot: false
|
||||||
// bgImage: '/static/image/other/tickets-app/12306-bg.png',
|
},
|
||||||
// path: '/pages/other/train-tickets/12306-tickets/12306-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
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
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({
|
const handleItemClick = (item) => {
|
||||||
title: '开发中',
|
if (type.value == 'trainTicket') {
|
||||||
icon: 'none'
|
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>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.container {
|
.container {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background-color: #F0F4F9;
|
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 {
|
.content {
|
||||||
|
padding: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-card {
|
||||||
|
position: relative;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
height: 188rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
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 {
|
.watermark {
|
||||||
position: relative;
|
position: absolute;
|
||||||
margin-right: 28rpx;
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
.logo {
|
height: 80%;
|
||||||
width: 108rpx;
|
pointer-events: none;
|
||||||
height: 108rpx;
|
|
||||||
border-radius: 16rpx;
|
|
||||||
display: block; // Remove extra space
|
|
||||||
}
|
|
||||||
|
|
||||||
.hot-tag {
|
|
||||||
position: absolute;
|
|
||||||
top: -12rpx;
|
|
||||||
right: -30rpx;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-name {
|
.card-left {
|
||||||
font-size: 36rpx;
|
display: flex;
|
||||||
color: #3D3D3D;
|
align-items: center;
|
||||||
font-weight: 500;
|
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>
|
</style>
|
||||||
Loading…
Reference in New Issue