You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
469 lines
10 KiB
469 lines
10 KiB
<template>
|
|
<view class="bg">
|
|
<view class="search-box flex-between">
|
|
<view class="search" @click="gotoPath('/subPackages/search/search')">
|
|
<image src="https://static.ticket.sz-trip.com/tourist/index/search.png" class="search-img"></image>
|
|
请输入导游姓名/产品名称
|
|
</view>
|
|
<view class="kefu" @click="gotoPath('/subPackages/onlineService/index')">
|
|
<image src="https://static.ticket.sz-trip.com/tourist/index/kefu.png" class="kefu-img"></image>
|
|
客服
|
|
</view>
|
|
</view>
|
|
|
|
<swiper class="top-banner" :circular="true" :interval="6000" indicator-active-color="#fff"
|
|
:duration="800" :indicator-dots="true" :autoplay="true" v-if="topBanner">
|
|
<swiper-item v-for="(item, index) in topBanner" :key="index" @click.stop="gotoUrlNew(item)">
|
|
<image class="top-banner" :src="showImg(item.head_img)" mode="aspectFill"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
<!-- 发现宝藏导游 -->
|
|
<view class="title-box flex-between">
|
|
<image src="https://static.ticket.sz-trip.com/tourist/index/title1.png" class="title-img"></image>
|
|
<view class="title-btn flex-around" @click="gotoDy">
|
|
探索更多
|
|
<image src="https://static.ticket.sz-trip.com/tourist/index/rightIcon.png" class="rightIcon"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="type-box">
|
|
<view v-for="(item,index) in typeList" :key="index" :class="['type-item', {'type-active': index == typeIndex}]" @click="typeIndex = index;getTouristList()">
|
|
{{item.title}}
|
|
</view>
|
|
</view>
|
|
|
|
<view class="tour-box">
|
|
<navigator :url="'/subPackages/daoyou/detail?id=' + item.goods_id" v-for="(item,index) in tourList" :key="index" class="tour-item flex-center">
|
|
<image :src="showImg(item.goods.image)" mode="aspectFill" class="tour-img"></image>
|
|
<image src="https://static.ticket.sz-trip.com/tourist/index/tourBg.png" mode="" class="tour-line"></image>
|
|
<!-- <image src="https://static.ticket.sz-trip.com/tourist/index/play.png" class="playImg"></image> -->
|
|
<!-- <view class="time">{{item.time}}</view> -->
|
|
</navigator>
|
|
</view>
|
|
|
|
<!-- 近期上新 -->
|
|
<view class="title-box flex-between">
|
|
<image src="https://static.ticket.sz-trip.com/tourist/index/title3.png" class="title-img"></image>
|
|
</view>
|
|
<view class="new-box">
|
|
<view v-for="(item,index) in newList" :key="index" class="new-item" @click="gotoDetailByTypeId(item.goods_id, item.goods.type_id)">
|
|
<view :style="{backgroundImage: 'url('+showImg(item.goods.image)+')'}">
|
|
<view class="new-content">
|
|
<view class="new-price">{{item.goods.money / 100}}</view>
|
|
<view class="text-overflowRows">{{item.goods.title}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 精选线路 -->
|
|
<view class="title-box flex-between">
|
|
<image src="https://static.ticket.sz-trip.com/tourist/index/title2.png" class="title-img"></image>
|
|
<view class="title-btn flex-around" @click="gotoPath('/subPackages/line/lineList')">
|
|
探索更多
|
|
<image src="https://static.ticket.sz-trip.com/tourist/index/rightIcon.png" class="rightIcon"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="line-box">
|
|
<navigator :url="'/subPackages/line/detail?id=' + item.id" v-for="(item,index) in lineList" :key="index" class="line-item">
|
|
<view class="line-white"></view>
|
|
<image :src="showImg(item.image)" mode="aspectFill" class="line-img"></image>
|
|
<view class="line-content">
|
|
<view class="line-title text-overflowRows">{{item.title}}</view>
|
|
<view class="line-price">{{item.money / 100}}</view>
|
|
</view>
|
|
</navigator>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
imageValue: [],
|
|
topBanner: [],
|
|
typeList: [
|
|
{
|
|
title: '品牌导游',
|
|
id: '57'
|
|
},
|
|
],
|
|
typeIndex: 0,
|
|
tourList: [],
|
|
lineList: [],
|
|
newList: []
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
if(option.token) {
|
|
this.Post({
|
|
token: option.token
|
|
}, '/api/user/getUserDetails').then(res => {
|
|
this.$store.commit('changeUserInfo', res.data)
|
|
})
|
|
}
|
|
},
|
|
onReady() {
|
|
this.getTopBanner()
|
|
this.getLineList()
|
|
this.getTouristList()
|
|
this.getNewList()
|
|
},
|
|
methods: {
|
|
// 获取导游列表
|
|
getTouristList() {
|
|
this.Post({
|
|
tag_id: this.typeList[this.typeIndex].id,
|
|
offset: 0,
|
|
limit: 5
|
|
},'/api/tag/getGoodsByTagId').then(res => {
|
|
this.tourList = res.data
|
|
})
|
|
},
|
|
// 获取线路列表
|
|
getLineList() {
|
|
this.Post({
|
|
type_id: 1,
|
|
offset: 0,
|
|
limit: 10
|
|
},'/api/goods/getGoodsByType').then(res => {
|
|
this.lineList = res.data;
|
|
})
|
|
},
|
|
// 获取近期上新列表
|
|
getNewList() {
|
|
this.Post({
|
|
tag_id: 58,
|
|
offset: 0,
|
|
limit: 10
|
|
},'/api/tag/getGoodsByTagId').then(res => {
|
|
this.newList = res.data
|
|
})
|
|
},
|
|
// 获取顶部banner
|
|
getTopBanner() {
|
|
this.Post({
|
|
position: 1,
|
|
type_id: 1
|
|
},'/api/adv/getAdv').then(res => {
|
|
this.topBanner = res.data
|
|
})
|
|
},
|
|
// 2是各种详情页，3是列表专题页面，4是小程序
|
|
gotoUrlNew(item) {
|
|
let url = '';
|
|
switch (item.jump_type) {
|
|
case 0:
|
|
break;
|
|
case 2:
|
|
uni.navigateTo({
|
|
url: item.tdata
|
|
});
|
|
break;
|
|
case 3:
|
|
window.location.href = item.tdata
|
|
// uni.navigateTo({
|
|
// url: '/subPackages/webPage/webPage?url=' + item.tdata
|
|
// });
|
|
break;
|
|
case 4:
|
|
uni.navigateToMiniProgram({
|
|
appId: item.tdata.appid, // 此为appid
|
|
path: item.tdata.page, // 此为首页路径
|
|
envVersion: 'release',
|
|
success: res => {
|
|
// 打开成功
|
|
console.log('打开成功', res);
|
|
},
|
|
fail: err => {
|
|
console.log(err);
|
|
}
|
|
});
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
},
|
|
// 去导游
|
|
gotoDy() {
|
|
uni.switchTab({
|
|
url: '/pages/daoyou/index'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.bg {
|
|
min-height: 100vh;
|
|
background: url('https://static.ticket.sz-trip.com/tourist/index/topBg.png') no-repeat;
|
|
background-size: 100% auto;
|
|
background-color: #F9F5F0;
|
|
padding-bottom: 250rpx;
|
|
}
|
|
|
|
.search-box {
|
|
padding: 20rpx 26.67rpx;
|
|
|
|
.search {
|
|
width: 573rpx;
|
|
height: 60rpx;
|
|
background: rgba(255, 255, 255, .7);
|
|
border: 1px solid #96684F;
|
|
padding: 0 29rpx;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.search-img {
|
|
width: 29.33rpx;
|
|
height: 29.33rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
|
|
.kefu {
|
|
font-weight: 500;
|
|
font-size: 27rpx;
|
|
color: #96684F;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.kefu-img {
|
|
width: 33.33rpx;
|
|
height: 33.33rpx;
|
|
margin-right: 7rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.top-banner {
|
|
width: 697rpx;
|
|
height: 341rpx;
|
|
margin: auto;
|
|
}
|
|
|
|
.title-box {
|
|
margin: 47rpx 26.67rpx 0;
|
|
|
|
.title-img {
|
|
width: 248rpx;
|
|
height: 77.33rpx;
|
|
}
|
|
|
|
.title-btn {
|
|
width: 140rpx;
|
|
height: 47rpx;
|
|
border-radius: 7rpx;
|
|
border: 1px solid #BFBFBF;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #333333;
|
|
|
|
.rightIcon {
|
|
width: 11.33rpx;
|
|
height: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.type-box {
|
|
display: flex;
|
|
padding: 34rpx 26.67rpx 29rpx;
|
|
overflow-x: auto;
|
|
|
|
.type-item {
|
|
width: 166.67rpx;
|
|
line-height: 53.33rpx;
|
|
text-align: center;
|
|
background-image: url('https://static.ticket.sz-trip.com/tourist/index/typeBg.png');
|
|
background-size: 100% 100%;
|
|
font-weight: 500;
|
|
font-size: 29rpx;
|
|
color: #96684F;
|
|
margin-right: 10rpx;
|
|
}
|
|
.type-active {
|
|
background-image: url('https://static.ticket.sz-trip.com/tourist/index/typeBgs.png');
|
|
background-size: 100% 100%;
|
|
color: #F9F5F0;
|
|
}
|
|
}
|
|
.type-box::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.tour-box {
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
padding-left: 26.67rpx;
|
|
display: flex;
|
|
|
|
.tour-item {
|
|
margin-right: 14rpx;
|
|
position: relative;
|
|
width: 266.73rpx;
|
|
height: 333.4rpx;
|
|
padding: 7rpx;
|
|
box-sizing: border-box;
|
|
|
|
.tour-line {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.tour-img {
|
|
width: 252.73rpx;
|
|
height: 319.4rpx;
|
|
}
|
|
|
|
.playImg {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
}
|
|
|
|
.time {
|
|
position: absolute;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #FFFFFF;
|
|
right: 19rpx;
|
|
bottom: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
.tour-box::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.new-box {
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
display: flex;
|
|
margin: 26rpx 0 0 26rpx;
|
|
|
|
.new-item {
|
|
width: 466.67rpx;
|
|
height: 306.67rpx;
|
|
margin-right: 14rpx;
|
|
padding: 7rpx;
|
|
box-sizing: border-box;
|
|
background-image: url('https://static.ticket.sz-trip.com/tourist/index/newBg.png');
|
|
background-size: 100% 100%;
|
|
flex-shrink: 0;
|
|
|
|
&>view {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: cover;
|
|
position: relative;
|
|
|
|
.new-content {
|
|
position: absolute;
|
|
left: 12rpx;
|
|
bottom: 13rpx;
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #FFFFFF;
|
|
|
|
.new-price {
|
|
font-weight: bold;
|
|
}
|
|
.new-price::before {
|
|
font-size: 22.67rpx;
|
|
content: '￥';
|
|
}
|
|
.new-price::after {
|
|
font-size: 22.67rpx;
|
|
content: '起';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.new-box::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.line-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
overflow-x: auto;
|
|
height: 820rpx;
|
|
margin: 26rpx 0 0 26.67rpx;
|
|
|
|
.line-item {
|
|
width: 467rpx;
|
|
height: 400rpx;
|
|
border: 1rpx solid #96684F;
|
|
margin-right: 13rpx;
|
|
padding: 22rpx;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
|
|
.line-white {
|
|
width: 450rpx;
|
|
height: 383rpx;
|
|
background: #FFFFFF;
|
|
position: absolute;
|
|
top: 8.5rpx;
|
|
left: 8.5rpx;
|
|
}
|
|
|
|
.line-img {
|
|
width: 423rpx;
|
|
height: 233rpx;
|
|
}
|
|
|
|
.line-content {
|
|
height: 120rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
|
|
.line-title {
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
line-height: 36rpx;
|
|
}
|
|
|
|
.line-price {
|
|
font-weight: bold;
|
|
font-size: 29rpx;
|
|
color: #DC2525;
|
|
}
|
|
.line-price::before {
|
|
font-size: 23rpx;
|
|
content: '￥';
|
|
}
|
|
.line-price::after {
|
|
font-size: 23rpx;
|
|
content: '起';
|
|
color: rgba(153, 153, 153, 1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.line-box::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
</style>
|