公司演示版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/subPage/cate/xiongan/xiongan.vue

337 lines
9.3 KiB

<template>
<view>
<view class="an_top_3">
<image :src="toplogo" mode="widthFix" class="an_bj_3"></image>
</view>
<view class="an_top_2">
<view class="anbox_2">
<!-- <view class="an_vdo_2"><image src="../../../static/images/btn_play.png" mode="aspectFill" class="an_vdo_img_2"></image></view> -->
<view class="an_box_4">
<view class="amt_30">
<view class="lgn_t_h1 pjia_usr_inf">{{msgDetail.title}}</view>
<view :class="showType == '展开'?'wc_cont an_gyu':'wc_cont'">
<!-- .an_gyu 为固定高度 对应展开按钮 -->
<view class="at_t">
<u-parse :content="msgDetail.content" :loading="loading" @preview="preview" @navigate="navigate" />
</view>
<!-- 展开按钮 -->
<view class="agn_center an_zkai" v-if="showType == '展开'" @tap="changeShowType()">
<image src="../../../static/images/btn_more.png" class="lgn_img"></image>
</view>
<!-- 收起按钮 -->
<view class="agn_center" v-if="showType == '收起'" @tap="changeShowType()">
<view class="an_sqi">收起</view>
</view>
</view>
</view>
</view>
<view>
<view class="amt_30">
<scroll-view class="anx_scl_1" scroll-x="true" @scroll="scroll" scroll-left="90" @clickItem="onClickItem">
<view class="scl_1_ut">
<view class="dy_fx">
<view @tap="change(index)" :class="index == xz ?'an_tit_tab an_tab_cur': 'an_tit_tab' " v-for="(item,index) in middleData" :key="index">{{item.title}}</view>
<!-- <view class="an_tit_tab">两轴线</view>
<view class="an_tit_tab">五组团</view>
<view class="an_tit_tab">十景苑</view>
<view class="an_tit_tab">千年林</view>
<view class="an_tit_tab">万顷波</view> -->
</view>
</view>
</scroll-view>
</view>
<view class="amt_30">
<!-- -->
<special-banner :banner-list="bannerList" :swiper-config="swiperConfig"></special-banner>
</view>
</view>
<view class="an_box_4">
<view class="amt_30">
<view class="gan_name_zce" style="font-size: 32rpx;">{{mes.subtitle}}</view>
<view class="wc_cont">
<view class="at_t ">
<u-parse :content="mes.content" :loading="loading" @preview="preview" @navigate="navigate" />
</view>
</view>
</view>
</view>
<view class="aml_30 amr_30">
<view class="lgn_t_h1">景点推荐</view>
</view>
<view class="amt_30 aml_30 yins_l">
<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="amr_30" @click="goToScenicDetail(item.guid)" v-for="(item,index) in scenicList" :key="index">
<image :src="item.slogo" mode="aspectFill" class="an_tj_scl"></image>
<view class="at_t word_1">{{item.sname}}</view>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import uParse from '@/components/gaoyia-parse/parse.vue'
import specialBanner from '../../../components/specialBanner.vue';
export default {
components: {
specialBanner,
uParse
},
data() {
return {
bannerList: [
/* 一万年太久,就现在,给你爱 */
/* 花中樱,鱼乃鲷花中樱,鱼乃鲷 */
/* 取材自湘西苗族传统的烟熏文化 */
/* 在自己的小世界里,日日好日,夜夜好清宵 */
/* {
picture: 'http://image.mishi.cn/r/yry_h5_test/detail/3_1535359279285.png',
description: '',
},
{
picture: 'http://image.mishi.cn/r/yry_h5_test/detail/2_1535359240426.png',
description: '',
},
{
picture: 'http://image.mishi.cn/r/yry_h5_test/detail/1_1535359204228.png',
description: '',
},
{
picture: 'http://image.mishi.cn/r/yry_h5_test/detail/4_1535359327213.png',
description: '',
} */
],
bannerLists:[],
swiperConfig: {
indicatorDots: false,
indicatorColor: 'rgba(255, 255, 255, .4)',
indicatorActiveColor: 'rgba(255, 255, 255, 1)',
autoplay: false,
interval: 3000,
duration: 300,
circular: true,
previousMargin: '58rpx',
nextMargin: '58rpx'
},
msgDetail: {},
scenicList: [],
toplogo:"",
showType:"展开",
middleData:[],
xz:0,
mes:{},
netType:true
};
},
onLoad: function(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.$util.hideLoadingByTime();
this.getParam(function(guid,region){
that.$util.saveOperatorLog(that,"MDD",guid);
uni.showLoading({
title: "加载中",
mask: true
})
that.guid = guid;
that.region = region;
that.getRedisData();
that.getMiddleData();
},function(){
uni.showToast({
icon:"none",
title:"系统异常"
})
})
},
onReady() {
setTimeout(function() {
uni.hideLoading();
}, 500);
},
methods: {
getParam:function(successCallback,errorCallback){
var that = this;
var url = this.$config.getMessageInfoFormFilter;
var data = {
type: this.$param.mddType,
userkey:this.$param.userkey,
pageSize:1,
sort: "2"
};
this.$Request.post(url, data).then(res => {
var flag = that.$util.isSuccess(res);
if(!flag){
return;
}
var result = res.data[0];
successCallback(result.guid,result.bm);
})
},
getMiddleData: function(){
var that = this;
var url = this.$config.getMessageInfoFormFilter;
var data = {
type: this.$param.xagkType,
userkey:this.$param.userkey,
pageSize:7,
sort: "1"
};
this.$Request.post(url, data).then(res => {
var flag = that.$util.isSuccess(res);
if(!flag){
return;
}
var result = res.data;
console.log(result)
var bannersLists = [];
for (var j = 0; j<result.length;j++) {
var pictures = result[j].imagelist;
var bannerLi = [];
for(var i = 0; i < pictures.length; i++){
var map = {
picture: this.$config.ROOTPATH + pictures[i],
description: '',/* 取材自湘西苗族传统的烟熏文化 */
}
bannerLi.push(map);
}
bannersLists.push(bannerLi);
}
this.bannerList = bannersLists[this.xz];
this.bannerLists = bannersLists;
this.middleData = result;
this.mes = this.middleData[this.xz]
})
},
getRedisData:function(){
var data = {
"key": this.$param.userkey + "_mdd_"+this.region
}
this.$Request.post(this.$config.getRedisData, data).then(res => {
if (res.status == 200) {
//所有的数据
var initData = res.data;
//目的地详情
this.msgDetail = initData.detailMessage;
console.log("+++++++++++++++++++++++++++++++++++++++++++");
console.log(this.msgDetail);
this.toplogo = this.$config.ROOTPATH + this.msgDetail.logo
//热门景区
var hotScenicList = initData.hotScenic;
this.width = "width:"+ (hotScenicList.length * 70) + "%";
for (let i = 0; i < hotScenicList.length; i++) {
hotScenicList[i].slogo = this.$config.ROOTPATH + hotScenicList[i].slogo;
}
this.scenicList = hotScenicList;
}else{
this.getMsgDetail(this.guid);
this.getHotScenic();
}
})
},
getMsgDetail: function(guid) {
var that = this;
var data = {
"userkey":this.$param.userkey,
"type":this.$param.mddType,
"guid":guid
}
this.$Request.post(this.$config.getMessgeInfoDetailFormId, data).then(res => {
if(!that.$util.isSuccess(res)){
return;
}
this.msgDetail = res.data;
console.log(this.msgDetail);
this.toplogo = this.$config.ROOTPATH + this.msgDetail.logo
this.imgList = [];
for (var i = 0; i < this.msgDetail.imagelist.length; i++) {
var item = {
imgurl: this.$config.ROOTPATH + this.msgDetail.imagelist[i]
}
this.imgList.push(item);
}
})
},
getHotScenic: function() {
var that = this;
var url = this.$config.getScenicListFormFilter;
var data = {
userkey:this.$param.userkey,
sort: "2",
pageno: "1",
pageSize: "5",
region: this.region
};
this.$Request.post(url, data).then(res => {
var flag = that.$util.isSuccess(res);
if(!flag){
return;
}
var data = res.data;
this.width = "width:"+ (data.length * 70) + "%";
for (let i = 0; i < data.length; i++) {
data[i].slogo = this.$config.ROOTPATH + data[i].slogo;
}
this.scenicList = data;
})
},
changeShowType:function(){
if(this.showType == "展开"){
this.showType = "收起";
this.showTypeUrl = "../../static/images/icn_up_g.png";
}else if(this.showType == "收起"){
this.showType = "展开";
this.showTypeUrl = "../../static/images/icn_down_g.png";
}
},
goToScenicDetail: function(guid) {
//Android.gotoDetial("SCENIC", guid + "");
uni.navigateTo({
url: '/subPage/scenic/scenicdetial/scenicdetial?guid=' + guid
});
},
change: function(index){
this.xz = index;
this.bannerList = this.bannerLists[index];
this.mes = this.middleData[index];
}
}
};
</script>
<style>
</style>