公司演示版e鹿悦游
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.
 
 
 
 
 
CjyTravel/pages/index/index.vue

771 lines
21 KiB

<template>
<view>
<view class="home_pic_static">
<view class="home_pic" style="z-index: 0;"><image :src="image3" mode="aspectFill" class="swp_1_img"></image></view>
<view class="home_pic"><image :src="image" mode="aspectFill" :class="cla"></image></view>
<view class="home_pic"><image :src="image2" mode="aspectFill" :class="cla2"></image></view>
<view class="home_nav"><image src="/static/animg/index/h_zhezhao.png" mode="aspectFill" class="home_nav_tu"></image></view>
<view class="hua_jt"><image src="/static/animg/index/jiant_up.png" mode="aspectFill" class="dong_j"></image></view>
<view class="home_nav">
<view class="dy_fx fx_warp_w h_nav_box">
<view class="w_25">
<view class="kua_nav" @click="goToPages('jingqu')" hover-class="checkActive">
<image src="/static/animg/index/jqmp.png" class="at_size_1"></image>
<view class="at_t">景区门票</view>
</view>
</view>
<view class="w_25">
<view class="kua_nav" hover-class="checkActive">
<image src="/static/animg/index/jdms.png" class="at_size_1"></image>
<view class="at_t">酒店民宿</view>
</view>
</view>
<view class="w_25">
<view class="kua_nav" @click="goToPages('line')" hover-class="checkActive">
<image src="/static/animg/index/jpxl.png" class="at_size_1"></image>
<view class="at_t">精品线路</view>
</view>
</view>
<view class="w_25">
<view class="kua_nav" hover-class="checkActive">
<image src="/static/animg/index/znkf.png" class="at_size_1"></image>
<view class="at_t">智能客服</view>
</view>
</view>
</view>
</view>
<view class="home_serch_1" >
<weather :show-location="false" ref="locationAndWeather" />
<view class="sch_2" @click="gotoSearch">
<span>搜一下</span>
<image src="/static/animg/index/icon-search_2.png"></image>
</view>
</view>
</view>
<view class="amt_30">
<view class="an_box an_sch">
<view class="dy_fx">
<view><image src="/static/animg/index/ix_xxi.png" class="xi_icn"></image></view>
<view class="fx_1 aml_30 amr_30">
<swiper autoplay="true" class="ht_swp_xi" :duration="duration_hj" :indicator-dots="falseDots" :interval="interval_hj"
:vertical="trueVcal">
<swiper-item class="word_1 xi_txt" v-for="(item,index) in zxList" :key="index" @tap="goToZixunDetail(item.guid)">{{item.title}}</swiper-item>
</swiper>
</view>
</view>
<!-- <view class="an_sch">
<view class="ix_zhibo" @click="gotoZhibo">
<view class="dy_fx">
<image src="/static/animg/zhibo.jpg" class="zb_imgg" mode="aspectFill"></image>
<view class="" style="position: relative;">
<view class="lst_tit">雄安新区全域旅游智慧平台上线仪式</view>
<view class="zb_tt an_t_2">【直播】<view class="onair_icon">
<text class="bo_1"></text>
<text class="bo_1"></text>
<text class="bo_1"></text>
</text></view>
</view>
</view>
</view>
</view>
</view> -->
</view>
<!-- 大美雄安 -->
<view class="amb_60">
<view class="an_box_2" @click="goToPages('jingqu')">
<view class="an_t">
<view class="an_t_1">大美{{ SJZObject.subtitle }}</view>
<view class="an_t_2">天蓝地绿 水城共融</view>
</view>
</view>
<!-- 景区列表 -->
<view class="aml_30">
<scroll-view class="anx_scl_1" scroll-x="true" @scroll="scroll" scroll-left="0">
<view class="scl_1_ut">
<view class="dy_fx">
<view class="fx_1 scl1_pic" v-for="(item, index) in scenicList" :key="index" @tap="goToDetail('scenic', item.guid)">
<image :src="item.slogo" mode="aspectFill" class="scl_1_img"></image>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
<!-- 文创旅游 -->
<view class="amb_30">
<view class="an_box_2">
<view class="an_t" @click="goToPages('wenchuang')">
<view class="an_t_1">文创旅游</view>
<view class="an_t_2">特色文创和旅游商品</view>
</view>
<!-- 瀑布流 -->
<view class="amt_30">
<view class="an_pbl dy_fx_row" style="flex-wrap: wrap;">
<view class="w_two" v-for="(item, index) in wcList" :key="index" @tap="goToDetail('wc', item.guid)">
<view class=""><image :src="item.logo" mode="aspectFill" class="pbl_1_img"></image></view>
</view>
</view>
</view>
</view>
</view>
<!-- 记录雄安 -->
<view class="amb_60">
<view class="an_box_2">
<view class="an_t" @click="goToPages('video')">
<view class="an_t_1">记录{{ SJZObject.subtitle }}</view>
<view class="an_t_2">影视记录{{ SJZObject.subtitle }}变化</view>
</view>
</view>
<view class="aml_30">
<scroll-view class="anx_scl_1" scroll-x="true" @scroll="scroll" scroll-left="0" style="height: 470rpx;">
<view class="scl_1_ut">
<view class="dy_fx">
<view class="fx_1 scl1_pic" v-for="(item, index) in videoList" :key="index"><!-- :poster="item.imgurl" -->
<video :show-fullscreen-btn='false' :id="'myVideo_' + index" @play="handle" :src="item.videourl" class="scl_2_img" controls="true"></video>
<view class="an_v_inf vdo_inf">
<view class="lst_tit word_1">
{{ item.title }}
<text>{{ item.time }}</text>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
<!-- 雄安味道 -->
<view class="amb_30">
<view class="an_box_2">
<view class="an_t" @click="goToPages('meishi')">
<view class="an_t_1">{{ SJZObject.subtitle }}味道</view>
<view class="an_t_2">“记忆·{{ SJZObject.subtitle }}味道”旅游美食活动</view>
</view>
<!-- 瀑布流 -->
<view class="amt_30">
<view class="an_pbl dy_fx_row" style="flex-wrap: wrap;">
<view class="w_two" v-for="(item, index) in foodList" :key="index" @tap="goToDetail('food', item.guid, item.region)">
<view class=""><image :src="item.logo" mode="aspectFill" class="pbl_1_img"></image></view>
</view>
</view>
</view>
</view>
</view>
<!-- 历史文化 -->
<view class="amb_60">
<view class="an_box_2">
<view class="an_t" @click="goToPages('line')">
<view class="an_t_1">旅游线路</view>
<view class="an_t_2">风景旅游 人生记忆</view>
</view>
<view class="amt_30">
<view class="anx_ls_1" @click="goToDetail('line', lineOneList.guid)">
<image :src="lineOneList.llogo" mode="aspectFill" class="an_ls_img"></image>
<view class="anxls_t">
<view class="lst_tit word_1">{{ lineOneList.lname }}</view>
</view>
</view>
<view class="amt_30" v-for="(item, index) in lineList" :key="index" @click="goToDetail('line', item.guid)">
<view class="dy_fx ls_inf_box">
<image :src="item.llogo" mode="aspectFill" class="an_ls_img2"></image>
<view class="fx_1 ls_txt">
<view class="lst_tit word_1">{{ item.lname }}</view>
<view class="lsinf word_3">{{ item.lspecial }}</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 历史文化 -->
<view class="amb_60">
<view class="an_box_2">
<view class="an_t" @click="goToPages('hotevent')">
<view class="an_t_1">活力雄安</view>
<view class="an_t_2">历史沿革 民俗活动</view>
</view>
</view>
<view @tap="goToDetail('hotevent', item.guid, '')" v-if="index < 3" class="an_box_2" v-for="(item, index) in hoteventList" :key="index">
<view class="ls_inf_box lunb_img">
<image :src="item.logo" mode="aspectFill" class="swp_2_img"></image>
<view class="an_v_inf">
<view class="lst_tit word_1">{{ item.title }}</view>
<view class="lsinf word_2">{{ item.content }}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import weather from '@/uni_modules/jr-weather/components/jr-weather/jr-weather.vue'
export default {
components:{
weather
},
data() {
return {
trueVcal: true,
falseDots: false,
interval_hj: 4500,
duration_hj: 1000,
indicatorDots: false,
autoplay: true,
interval: 5000,
duration: 500,
//
current: 0,
swiperCurrent: 0,
video: null,
indexNum: 0,
old: {
scrollTop: 0,
markIndex: 0
},
scenicList: [],
videoList: [],
SJZObject: {},
wcList: [],
foodList: [],
yzOneList: {},
yzList: [],
lineOneList: {},
lineList: [],
lbtList: [],
zxList:[],
// 轮播图
image: '',
image2: '',
image3: '',
j: 0,
a: 0,
b: 1,
images:[],
cla: 'swp_1_img dhua',
cla2: 'swp_1_img dhua2',
clas: ['swp_1_img dhua', 'swp_1_img dhua2'],
netType:true
};
},
onLoad(option) {
var that = this;
this.$util.getNetworkType(
function(res){
if(res.networkType === 'none'){
uni.showToast({
title:that.$param.netMsg,
icon:"none",
duration:2000
})
that.netType = false;
}
},function(){
uni.showToast({
title:that.$param.netMsg,
icon:"none",
duration:2000
})
that.netType = false;
}
)
if(!that.netType){
return;
}
this.getRedisData();
this.getZiXunList();
let video = uni.createVideoContext('myVideo');
this.video = video;
setInterval(
function() {
if (that.j % 2 == 0) {
//这个为每次l轮换样式
that.cla = that.clas[1];
that.cla2 = that.clas[0];
that.a = that.a + 2;
if (that.a == that.images.length) {
that.a = 0;
} else if (that.a > that.images.length) {
that.a = that.a - that.images.length;
}
that.image = that.images[that.a];
} else {
that.cla = that.clas[0];
that.cla2 = that.clas[1];
that.b = that.b + 2;
if (that.b == that.images.length) {
that.b = 0;
} else if (that.b > that.images.length) {
that.b = that.b - that.images.length;
}
that.image2 = that.images[that.b];
}
that.j++;
},
1000 * 10,
that
);
},
methods: {
//
changeSwiper(e) {
this.swiperCurrent = e.detail.current;
},
scroll: function(e) {
this.old.scrollTop = e.detail.scrollTop;
},
getRedisData: function(mescroll) {
var data = {
key: this.$param.userkey + '_index'
};
this.$Request.post(this.$config.getRedisData, data).then(res => {
console.log(res);
if (res.status == 200) {
//所有的数据
var initData = res.data;
//轮播图
var lbtList = initData.lbtList;
for (let i = 0; i < lbtList.length; i++) {
lbtList[i].logo = this.$config.ROOTPATH + lbtList[i].logo;
this.images[i] = lbtList[i].logo;
}
this.image = this.images[0];
this.image2 = this.images[1];
this.image3 = this.images[0];
//景区
var scenicList = initData.scenicList;
var scLength = scenicList.length > 4 ? 4 : scenicList.length;
var scdata = [];
for (let i = 0; i < scLength; i++) {
scenicList[i].slogo = this.$config.ROOTPATH + scenicList[i].slogo;
scdata.push(scenicList[i]);
}
this.scenicList = scdata;
//视频
var videoList = initData.videoList;
var viLength = videoList.length > 4 ? 4 : videoList.length;
for (var i = 0; i < viLength; i++) {
var item = {
imgurl: videoList[i].logo == '' ? '' : this.$config.ROOTPATH + videoList[i].logo,
videourl: this.$config.ROOTPATH + videoList[i].videopath,
guid: videoList[i].guid,
title: videoList[i].title,
time: videoList[i].subtitle
};
this.videoList.push(item);
}
this.indexNum = viLength;
//文创
var wcList = initData.wcList;
var wcLength = wcList.length > 4 ? 4 : wcList.length;
for (var i = 0; i < wcLength; i++) {
var item = {
logo: this.$config.ROOTPATH + wcList[i].logo,
guid: wcList[i].guid
};
this.wcList.push(item);
}
//美食
var foodList = initData.foodList;
var foodLength = foodList.length > 4 ? 4 : foodList.length;
for (var i = 0; i < foodLength; i++) {
var item = {
logo: this.$config.ROOTPATH + foodList[i].logo,
region: foodList[i].bm,
guid: foodList[i].guid
};
this.foodList.push(item);
}
//线路
var lineList = initData.lineList;
var lineLength = lineList.length > 4 ? 4 : lineList.length;
var list = [];
for (var i = 0; i < lineLength; i++) {
lineList[i].llogo = this.$config.ROOTPATH + lineList[i].llogo;
if (i == 0) {
this.lineOneList = lineList[i];
} else {
list.push(lineList[i]);
}
}
this.lineList = list;
//活动
var hoteventList = initData.hoteventList;
for (var i = 0; i < hoteventList.length; i++) {
hoteventList[i].logo = this.$config.ROOTPATH + hoteventList[i].logo;
}
this.hoteventList = hoteventList;
//多彩邯郸
this.SJZObject = initData.duoCaiList[0];
} else {
this.getImgList(); //轮播图
this.getScenicList(); //景区
this.getVideoData(); //视频
this.getDuoCaiSJZ(); //多彩
this.getWcList(); //文创
this.getFoodList(); //美食
// this.getYzList(); //文物遗址
this.getLineList(); //线路
}
});
},
getImgList: function() {
var data = {
pageno: '1',
pageSize: '5',
sort: '2',
type: this.$param.imgType,
userkey: this.$param.userkey
};
this.$Request.post(this.$config.getMessageInfoFormFilter, data).then(res => {
var lbtList = res.data;
for (var i = 0; i < lbtList.length; i++) {
this.images[i] = this.$config.ROOTPATH + lbtList[i].logo;
}
this.image = this.images[0];
this.image2 = this.images[1];
this.image3 = this.images[0];
});
},
getZiXunList: function() {
var data = {
pageno: '1',
pageSize: '3',
sort: '2',
type: this.$param.zixunType,
userkey: this.$param.userkey
};
this.$Request.post(this.$config.getMessageInfoFormFilter, data).then(res => {
this.zxList = res.data;
});
},
goToZixunDetail: function(guid){
uni.navigateTo({
url: '/subPageA/zixun/zixundetail/zixundetail?id='+guid
})
},
handle: function(obj) {
// 检测 this.video 的值
// 停止播放
let newVideo = uni.createVideoContext(obj.currentTarget.id);
if (this.video !== newVideo) {
newVideo.play();
this.video.pause();
}
this.video = newVideo;
},
getScenicList: function() {
var data = {
pageno: '1',
pagesize: '4',
sort: '2',
timestamp: 0,
areacode: this.$config.ARER_CODE,
userkey: this.$param.userkey
};
this.$Request.post(this.$config.getscenicList, data).then(res => {
if (res.status == 500) {
uni.showToast({
title: res.msg,
duration: 2000
});
return;
}
var data = res.data;
for (let i = 0; i < data.length; i++) {
data[i].slogo = this.$config.ROOTPATH + data[i].slogo;
}
this.scenicList = data;
});
},
getFoodList: function() {
this.onc = 'meishi';
var data = {
pageno: '1',
pageSize: '4',
sort: '2',
region: this.$config.ARER_CODE,
type: this.$param.foodType,
userkey: this.$param.userkey
};
this.$Request.post(this.$config.getMessageInfoFormFilter, data).then(res => {
if (res.status == 500) {
uni.showToast({
title: res.msg,
duration: 2000
});
return;
}
var data = res.data;
for (let i = 0; i < data.length; i++) {
data[i].logo = this.$config.ROOTPATH + data[i].logo;
}
this.foodList = data;
});
},
getYzList: function() {
var data = {
pageno: '1',
pageSize: '4',
sort: '2',
type: this.$param.yzType,
userkey: this.$param.userkey
};
this.$Request.post(this.$config.getMessageInfoFormFilter, data).then(res => {
if (res.status == 500) {
uni.showToast({
title: res.msg,
duration: 2000
});
return;
}
var data = res.data;
var list = [];
for (let i = 0; i < data.length; i++) {
data[i].logo = this.$config.ROOTPATH + data[i].logo;
if (i == 0) {
this.yzOneList = data[i];
} else {
list.push(data[i]);
}
}
this.yzList = list;
});
},
getWcList: function() {
this.onc = 'meishi';
var data = {
pageno: '1',
pageSize: '4',
sort: '2',
type: this.$param.wcType,
userkey: this.$param.userkey
};
this.$Request.post(this.$config.getMessageInfoFormFilter, data).then(res => {
if (res.status == 500) {
uni.showToast({
title: res.msg,
duration: 2000
});
return;
}
var data = res.data;
for (let i = 0; i < data.length; i++) {
data[i].logo = this.$config.ROOTPATH + data[i].logo;
}
this.wcList = data;
});
},
getDuoCaiSJZ: function() {
var data = {
pageno: '1',
pageSize: '1',
sort: '2',
region: this.$config.ARER_CODE,
type: this.$param.duoCaiType,
userkey: this.$param.userkey
};
this.$Request.post(this.$config.getMessageInfoFormFilter, data).then(res => {
this.SJZObject = res.data[0];
});
},
getVideoData: function() {
var data = {
pageno: '1',
pageSize: '4',
sort: '2',
region: this.$config.ARER_CODE,
type: this.$param.videoType,
userkey: this.$param.userkey
};
this.$Request.post(this.$config.getMessageInfoFormFilter, data).then(res => {
var d = res.data;
for (var i = 0; i < d.length; i++) {
var item = {
imgurl: d[i].logo == '' ? '' : this.$config.ROOTPATH + d[i].logo,
videourl: this.$config.ROOTPATH + d[i].videolist[0],
guid: d[i].guid,
time: d[i].subtitle
};
this.videoList.push(item);
}
this.indexNum = d.length;
});
},
getLineList: function() {
var data = {
pageSize: 4,
region: this.$config.ARER_CODE,
pageno: 1,
timestamp: 0,
sort: '2',
userkey: this.$param.userkey
};
this.$Request.post(this.$config.getLineInfoFormFilterByPage, data).then(res => {
var data = res.data;
var list = [];
for (var i = 0; i < data.length; i++) {
data[i].llogo = this.$config.ROOTPATH + data[i].llogo;
if (i == 0) {
this.lineOneList = data[i];
} else {
list.push(data[i]);
}
}
this.lineList = list;
});
},
goToPages: function(type) {
var that = this;
if (type == 'jingqu') {
uni.navigateTo({
url: '/subPageA/scenic/sceniclist/sceniclist'
});
} else if (type == 'meishi') {
uni.navigateTo({
url: '/subPageA/food/foodlist/foodlist'
});
} else if (type == 'line') {
uni.navigateTo({
url: '/pages/travelroute/travelroutelist/travelroutelist'
});
} else if (type == 'hotel') {
uni.navigateTo({
url: '/subPageA/hotel/hotellist/hotellist'
});
} else if (type == 'more') {
uni.navigateTo({
url: '/pages/fuwu/fuwu'
});
} else if (type == 'wenchuang') {
uni.navigateTo({
url: '/subPageA/wenchuang/wenlist/wenlist'
});
} else if (type == 'yuyue') {
switch (uni.getSystemInfoSync().platform) {
case 'android':
//安卓授权
var that = this;
this.$util.bindGpsObj(that);
Android.gotoDetial("JumpApplet","gh_03bcfb833a55");
break;
case 'ios':
//ios授权
var that = this;
this.$util.bindGpsObj(that);
window.location.href = "https://www.baidu.com?url=applet&value=gh_03bcfb833a55";
break;
}
/* if (this.$util.isBlack(uni.getStorageSync("unionid"))) {
uni.switchTab({
url:"/pages/personcenter"
})
}else{
uni.navigateTo({
url: "/subPageA/scenic/subscribe/yuyue/yue_list_js"
})
} */
} else if (type == 'techan') {
uni.navigateTo({
url: '/subPageA/specialgood/specialgoodlist/specialgoodlist'
});
} else if (type == 'feiyi') {
uni.navigateTo({
url: '/subPageA/feiyi/feiyilist/feiyilist'
});
}else if (type == 'hotevent') {
uni.navigateTo({
url: '/subPageA/hotevent/hoteventlist/hoteventlist'
});
}else if (type == 'video') {
uni.navigateTo({
url: '/subPageA/video/videolist/videolist'
});
}
},
goToDetail: function(type, guid, region) {
if (type == 'scenic') {
uni.navigateTo({
url: '/subPageA/scenic/scenicdetial/scenicdetial?guid=' + guid
});
} else if (type == 'food') {
uni.navigateTo({
url: '/subPageA/food/fooddetial/fooddetial?fid=' + guid + '&fareacode=' + region
});
} else if (type == 'wc') {
uni.navigateTo({
url: "/subPageA/wenchuang/wendetail/wendetail?guid=" + guid
})
} else if (type == 'yizhi') {
} else if (type == 'line') {
uni.navigateTo({
url: '/pages/travelroute/travelroutedetail/travelroutedetail?id=' + guid
});
}else if (type == 'hotevent') {
uni.navigateTo({
url: '/subPageA/hotevent/hoteventdetail/hoteventdetail?id=' + guid
});
}
},
gotoSearch: function() {
var that = this;
that.$util.saveOperatorLog(that, 'FUN', '搜索');
uni.navigateTo({
url: '/subPageA/search/search'
});
},
// 直播跳转
gotoZhibo: function(){
//window.location.href = "https://ceo.unitracing.com/timeline/37";
uni.navigateTo({
url: '/subPageA/zhibo/zhibo'
});
}
}
};
</script>
<style scoped lang="scss">
.w_25{
width: 24%;
margin: 0 0.5%;
background: #ffffff12;
border-radius: 20rpx;
padding: 30rpx 0;
.kua_nav{
border:none,
}
}
.checkActive {
background: #rgba(255,255,255,0.2);
box-shadow: 0upx 0upx 0upx #rgba(255,255,255,0.2);
color:#3d3d3d,
box-shadow 0.1s ease;
}
</style>