海洋馆小程序
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.
 
 
 
 
minAPP-hyg/pages/index/index.vue

750 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/h_zhezhao.png" mode="aspectFill" class="home_nav_tu"></image>
</view>
<view class="hua_jt">
<image src="../../static/animg/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')">
<image src="../../static/animg/v-index01.svg" class="at_size_1"></image>
<view class="at_t">景区概况</view>
</view>
</view>
<view class="w_25">
<view class="kua_nav" @click="goToPages('jingdian')">
<image src="../../static/animg/v-index02.svg" class="at_size_1"></image>
<view class="at_t">景点介绍</view>
</view>
</view>
</view>
</view>
</view>
<view class="weather-box" v-if="showWeather">
<view class="icon-box"><image mode="aspectFit" style="height: 100%;margin-top: -5rpx;" src="https://zf.aitto.net/img/location-icon.gif"></image></view>
<view class="we-item" style="font-size: large;font-weight: 700;font-style: italic;">{{ city }}</view>
<view class="we-item">{{ time|formatDate('yyyy年MM月dd日') }}</view>
<view class="we-item">{{ weather }}</view>
</view>
<!-- <view class="amt_30">
<view class="an_box an_sch">
<view class="dy_fx">
<view>
<image src="../../static/animg/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> -->
<!-- 景点推荐 -->
<view class="amb_60">
<view class="an_box_2" @click="goToPages('jingdian')">
<view class="an_t">
<view class="an_t_1">景点推荐</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="c">
<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.logo" mode="aspectFill" class="scl_1_img"></image>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
<!-- 非遗文化 -->
<!-- 历史影像 -->
<!-- 活动风采 -->
</view>
</view>
</template>
<script>
import aes from '@/common/aes.js';
import { format } from 'crypto-js';
import amap from 'amap-wx'
export default {
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: [],
feiyiList: [],
yzOneList: {},
yzList: [],
lineOneList: {},
lineList: [],
hoteventList: [],
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,
city: '',
time: '',
weather: '',
showWeather:false,
};
},
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();
this.getWeather();
// this.getWhitePic();
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
);
},
filters: {
formatDate: function (value, args) {
var dt = new Date(value);
if (args == 'yyyy-M-d') {
// yyyy-M-d
let year = dt.getFullYear();
let month = dt.getMonth() + 1;
let date = dt.getDate();
return `${year}-${month}-${date}`;
} else if (args == 'yyyy-M-d H:m:s') {
// yyyy-M-d H:m:s
let year = dt.getFullYear();
let month = dt.getMonth() + 1;
let date = dt.getDate();
let hour = dt.getHours();
let minute = dt.getMinutes();
let second = dt.getSeconds();
return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
} else if (args == 'yyyy-MM-dd') {
// yyyy-MM-dd
let year = dt.getFullYear();
let month = (dt.getMonth() + 1).toString().padStart(2, '0');
let date = dt.getDate().toString().padStart(2, '0');
return `${year}-${month}-${date}`;
} else if (args == 'yyyy年MM月dd日') {
// yyyy-MM-dd
let year = dt.getFullYear();
let month = (dt.getMonth() + 1).toString().padStart(2, '0');
let date = dt.getDate().toString().padStart(2, '0');
return `${year}年${month}月${date}日`;
} else {
// yyyy-MM-dd HH:mm:ss
let year = dt.getFullYear();
let month = (dt.getMonth() + 1).toString().padStart(2, '0');
let date = dt.getDate().toString().padStart(2, '0');
let hour = dt.getHours().toString().padStart(2, '0');
let minute = dt.getMinutes().toString().padStart(2, '0');
let second = dt.getSeconds().toString().padStart(2, '0');
return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
}
}
},
methods: {
// 静默请求手绘图
getWhitePic(){
let this_ = this
uni.request({
url: this.$config.ROOTPATH + '/mobile/mapScenic/qylyMapScenicAndSpotInfo',
method: 'get',
data: {
userkey: '95034a2bb9a843b79dbc93f74599282b',
// id: '334',
id: '363',
spotType: ''
},
success(res) {
const arr = res.data.data;
this_.datas = arr;
//确定中心点和手绘图
arr.forEach((item) => {
if (item.id == 363) {
// if (item.id == 334) {
wx.getImageInfo({
src: this_.$config.ROOTPATH + item.mapurl,
success(res) {
const data = res.data;
this_.$util.setImage(this_.$config.ROOTPATH + item.mapurl, data);
}
})
}
});
},
fail(err) {
console.log(err);
}
});
},
//
getWeather: function (region) {
let this_ = this
// var myAmapFun = new amap.AMapWX({ key: 'e2ee6a41e07306db2214f0edfa86f73a' });
// myAmapFun.getWeather({
// success: function (data) {
// //成功回调
// this_.showWeather = true
// console.log(data, 'success')
// this_.city = data.city.data,
// this_.time = data.liveData.reporttime,
// this_.weather = data.weather.data + ' ' + data.temperature.data + '°C' + ' ' + data.winddirection.data + ' ' + data.windpower.data,
// this_.$forceUpdate()
// },
// fail: function (info) {
// //失败回调
// this_.showWeather = false
// console.log(info, 'fail');
// }
// });
// var data = {
// region: region
// };
// this.$Request.post(this.$config.getWeather, data).then((res) => {
// this.weather = res.data;
// if (this.weather.cond_txt_d.indexOf('雷') != -1) {
// this.weatherImgUrl = '../../../static/images/whe_lei.png';
// } else if (this.weather.cond_txt_d.indexOf('雨') != -1) {
// this.weatherImgUrl = '../../../static/images/whe_yu.png';
// } else if (this.weather.cond_txt_d.indexOf('雾') != -1) {
// this.weatherImgUrl = '../../../static/images/whe_wu.png';
// } else if (this.weather.cond_txt_d.indexOf('阴') != -1) {
// this.weatherImgUrl = '../../../static/images/whe_yin.png';
// } else if (this.weather.cond_txt_d.indexOf('雪') != -1) {
// this.weatherImgUrl = '../../../static/images/whe_xu.png';
// } else if (this.weather.cond_txt_d.indexOf('晴') != -1) {
// this.weatherImgUrl = '../../../static/images/whe_sun.png';
// } else {
// this.weatherImgUrl = '../../../static/images/whe_cloudy.png';
// }
// });
uni.request({
url: `https://restapi.amap.com/v3/weather/weatherInfo?city=130500&key=7d0d358762ba1af430645a7592f75789`,
method: 'get',
success(res) {
this_.showWeather = true
const datas = res.data.lives[0]
console.log(datas, 'success')
this_.city = datas.city,
this_.time = datas.reporttime,
this_.weather = datas.weather+ ' ' + datas.temperature_float + '°C' + ' ' + datas.winddirection + '风 ' + datas.windpower+'级',
this_.$forceUpdate()
},
fail(err) {
console.log(err)
}
})
},
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) => {
if (res.status == 200) {
//所有的数据
var initData = res.data;
//轮播图
var lbtList = initData.lbtList;
if (lbtList && lbtList.length) {
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.entertainmentList;
if (scenicList && scenicList.length) {
var scLength = scenicList.length > 4 ? 4 : scenicList.length;
var scdata = [];
for (let i = 0; i < scLength; i++) {
scenicList[i].logo = this.$config.ROOTPATH + scenicList[i].logo;
scdata.push(scenicList[i]);
}
this.scenicList = scdata;
}
//视频
var videoList = initData.videoList;
if (videoList && videoList.length) {
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);
}
}
console.log(this.videoList, '90090000');
this.indexNum = viLength;
// 非遗
var feiyiList = initData.feiyiList;
if (feiyiList && feiyiList.length) {
var wcLength = feiyiList.length > 4 ? 4 : feiyiList.length;
for (var i = 0; i < wcLength; i++) {
var item = {
logo: this.$config.ROOTPATH + feiyiList[i].logo,
guid: feiyiList[i].guid
};
this.feiyiList.push(item);
}
}
//活动
var hoteventList = initData.hoteventList;
if (hoteventList && hoteventList.length) {
for (var i = 0; i < hoteventList.length; i++) {
hoteventList[i].logo = this.$config.ROOTPATH + hoteventList[i].logo;
}
this.lineOneList = hoteventList[0];
this.hoteventList = hoteventList.splice(1, hoteventList.length - 1);
}
//多彩邯郸
this.SJZObject = initData.duoCaiList[0];
} else {
this.getImgList(); //轮播图
this.getScenicList(); //景区
this.getVideoData(); //视频
this.getDuoCaiSJZ(); //多彩
this.getWcList(); //文创
// 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: '/sunPackIndex/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;
});
},
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 that = this;
var data = {
key: this.$param.userkey + '_feiyi_list'
};
that.$Request.post(that.$config.getRedisData, data).then((res) => {
console.log(res);
that.wcList = res.data.feiyiList;
});
},
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;
// });
var that = this;
var data = {
key: this.$param.userkey + '_hotEvent_list'
};
that.$Request.post(that.$config.getRedisData, data).then((res) => {
var listDatas = that.listDatas,
dataListLen = res.data.hoteventList.length,
data = res.data.hoteventList;
for (var i = 0; i < dataListLen; i++) {
var item = {
id: data[i].guid,
elogo: this.rootPaht + data[i].logo,
ename: data[i].title,
eventdate: data[i].jointime,
eaddress: data[i].address,
ephone: data[i][this.$param.hoteventPhoneKey],
etype: data[i][this.$param.hoteventTypeKey].dicname,
distance: this.$util.formatDistance(data[i].distance)
};
this.listDatas.push(item);
}
});
},
goToPages: function (type) {
var that = this;
if (type == 'jingqu') {
//景区概况
uni.navigateTo({
url: `/sunPackIndex/scenic/scenicdetial/scenicdetial?guid=170`
});
}
else if (type == 'jingdian') {
//景点
uni.navigateTo({
url: '/sunPackIndex/amusement/shoplist/amusementlist'
});
} else if (type == 'wenchuang') {
//非遗文化
uni.navigateTo({
url: '/pages/feiyi/feiyilist/feiyilist'
});
} else if (type == 'video') {
//历史影像
uni.navigateTo({
url: '/pages/video/videolist/videolist'
});
} else if (type == 'line') {
//活动风采
uni.navigateTo({
url: '/pages/hotevent/hoteventlist/hoteventlist'
});
} else if (type == 'quanjing') {
//720全景
uni.navigateTo({
url: '/pages/quanjing/720All'
});
} else if (type == 'traffic') {
//交通指南
uni.navigateTo({
url: '/pages/traffic/outTraffic'
});
} else if (type == 'dingzhi') {
//私人订制
uni.navigateTo({
url: '/pages/sirendingzhi/sirendingzhilist/sirendingzhilist'
});
} else if (type == 'shop') {
uni.navigateTo({
url: '/sunPackIndex/feiyi/feiyilist/feiyilist'
});
// uni.navigateToMiniProgram({
// appId: 'wx91d27dbf599dff74',
// path: 'pages/shopx/pages/index/index?venderId=1000016826&originOpts=%5Bobject%20Object%5D&keywords=%25E8%25A1%25A1%25E6%25B0%25B4%25E8%2580%2581%25E7%2599%25BD%25E5%25B9%25B2%25E5%25AE%2598%25E6%2596%25B9%25E6%2597%2597%25E8%2588%25B0%25E5%25BA%2597%2520%25E4%25BA%25AC%25E4%25B8%259C%25E8%2587%25AA%25E8%2590%25A5&originUrl=%2Fpages%2Fshopx%2Fpages%2Findex%2Findex&shopName=%E8%A1%A1%E6%B0%B4%E8%80%81%E7%99%BD%E5%B9%B2%E4%BA%AC%E4%B8%9C%E8%87%AA%E8%90%A5%E5%AE%98%E6%96%B9%E6%97%97%E8%88%B0%E5%BA%97&skuId=100001725902&originParams=%5Bobject%20Object%5D&navStart=Wed%20Jul%2026%202023%2010%3A56%3A14%20GMT%2B0800%20(%E4%B8%AD%E5%9B%BD%E6%A0%87%E5%87%86%E6%97%B6%E9%97%B4)&referer=http%3A%2F%2Fwq.jd.com%2Fwxapp%2Fpages%2Fsearch%2Flist%2Flist&sceneId=1002',
// envVersion: 'release',
// success(res) {
// console.log('跳转成功');
// }
// });
} else if (type == 'yuyue') {
if (!uni.getStorageSync('unionid') || uni.getStorageSync('unionid') == '' || uni.getStorageSync('unionid') == null) {
uni.showToast({
title: '请先到个人中心进行授权',
icon: 'none',
duration: 2000,
success: () => {
setTimeout(() => {
uni.switchTab({
url: '/pages/personcenter/personcenter'
});
}, 2000);
}
});
return;
} else {
uni.navigateTo({
url: `/sunPackIndex/scenic/subscribe/yuyue/yue_time_js`
});
}
}
},
goToDetail: function (type, guid, region) {
if (type == 'scenic') {
//景点推荐详情
uni.navigateTo({
url: '/sunPackIndex/amusement/amusementdetail/amusementdetail?guid=' + guid
});
} else if (type == 'wenchuang') {
uni.navigateTo({
url: '/pages/feiyi/feiyidetail/feiyidetail?guid=' + guid
});
} else if (type == 'line') {
//活动风采详情
uni.navigateTo({
url: '/pages/hotevent/hoteventdetail/hoteventdetail?id=' + guid
});
}
}
}
};
</script>
<style scoped lang="scss">
.weather-box{
display: flex;
align-items: center;
padding: 15rpx 20rpx;
background-color: #fff;
}
.we-item{
font-size: 26rpx;
color: #737373;
margin-right: 20rpx;
}
.we-item:first-child{
font-size: 30rpx;
color: #424242;
}
.icon-box{
display: inline-flex;
width: 5%;
height: 45rpx;
margin-right: 0;
margin-left: 0;
}
</style>