litong
/
weliam-smartcity
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
weliam-smartcity智慧城市
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.
2 Commits
1 Branch
0 Tags
3.4 MiB
 
 
 
 
Tree: 24f6c0a37d
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '24f6c0a37d'
${ noResults }
weliam-smartcity/pages/mainPages/index/index.vue

781 lines
21 KiB
Raw Blame History

<template>
<!-- 首页 -->
<view class="container">
<!-- <navigationBar custom="true">
<view :style="{width: '100vw',height: height + 50 + 'px'}">
<view class="dis-flex" :style="{height: height + 50 + 'px',lineHeight: '75px',position: 'fixed',width: '100vw',zIndex: '99999',backgroundColor: '#FFFFFF'}">
<view :style="{padding: height + 'px',paddingTop:height + 5 + 'px'}">
<image :style="{width: 30 + 'px',height: 30 + 'px'}" src="https://img1.baidu.com/it/u=1317884743,2730264066&fm=26&fmt=auto&gp=0.jpg" mode=""></image>
</view>
<view class="t-l flex-box">
导航栏名字
</view>
</view>
</view>
</navigationBar> -->
<view v-if="seeting">
<far-bottom></far-bottom>
</view>
<!-- #ifdef MP-WEIXIN -->
<view>
<official-account></official-account>
</view>
<view class="hintModule" v-if="hintShow">
点击“
<view class="smallCircle dis-il-block"></view>
<view class="bigCircle dis-il-block"></view>
<view class="smallCircle dis-il-block"></view>
”添加到我的小程序,微信首页下拉即可快速访问
<view class="hintClose iconfont icon-roundclose" @click="closeHint"></view>
<view class="hintIndicate"></view>
</view>
<!-- #endif -->
<loadlogo v-if="!loadlogo" />
<view class="page-index" :style="'background-color: ' + datas.page.background" :class="!!bottomMenu ? 'bottomPadding' : ''" v-if="loadlogo">
<Advert class="advert" :advertData="datas.adv" v-if="!!datas.adv" />
<diypages ref="diypages" :isred="isred" :diypagesData.sync="diypagesData" :pageData="datas.page" @diyhomepage="diyhomepage" :btngroupData="btngroup" />
<view style="padding-top: 100upx;">
<block v-for="(item, index) in datas.page.copytext" :key="index">
<view class="f-22" style="text-align: center;color: #999;">{{ item }}</view>
</block>
<view style="text-align: center;margin-top: 10rpx;padding-bottom: 50upx;">
<block v-for="(item, index) in datas.page.copyurl" :key="index">
<text class="borderLast f-22" style="padding:0 15rpx 0 15rpx;color: #4395FF;" @click="versionCli(item.url)">{{ item.text }}</text>
</block>
</view>
</view>
<view class="full"></view>
<view class="page-footer" v-if="isTabbars">
<TabBars :tabBarAct="0" :tabBarData="bottomMenu" :TabBarsType="datas.page.type" />
</view>
<view class="audio-main" @click="playAudio" v-if="!!pageInfo.music" id="playAudios">
<view class="audio-bg" :class="{ 'stop-audio': !play_Audio }">
<view class="audio-gif" :style="{ 'background-image': 'url(' + imageRoot + 'musicgif.gif)' }">
<view class="audio-png" :style="{ 'background-image': 'url(' + imageRoot + 'music.png)' }"></view>
</view>
</view>
</view>
</view>
<follow
:followShow="followShow"
:followType="followType"
:followTitleShow="followTitleShow"
@clickmask="openQrShow"
@closeFollowPop="closeFollowPop"
@closeFollowTitle="closeFollowTitle"
></follow>
<red-packet v-if="pageInfo.redpackflag === 1" :pagenum="pagenum"></red-packet>
<PopManager :show="shareShow" :type="'top'" @clickmask="shareShow = false">
<cover-view>
<cover-image v-if="shareShow" :src="imageRoot + 'share.png'" class="coverImg"></cover-image>
</cover-view>
</PopManager>
</view>
</template>
<script>
let innerAudioContext = uni.createInnerAudioContext();
import App from '@/common/js/app.js';
import Loadlogo from '@/components/template/loadlogo.vue';
import diypages from '@/components/template/diypages.vue';
import Advert from '@/components/template/advert.vue';
import TabBars from '@/components/template/tabBar.vue';
import recommendGoods from '@/components/page/pageComponents/Recommend_goods.vue';
import wxApi from '@/common/js/wxApi.js';
import follow from '@/components/template/follow.vue';
import redPacket from '@/components/template/redpacket.vue';
import PopManager from '@/components/template/PopManager.vue';
export default {
data() {
return {
followTitleShow: true,
followShow: false,
followType: '0',
loadlogo: false,
swiperI: 1,
loading: false,
loadAgain: false,
isTabbars: true,
datas: {
basic: [],
adv: '',
page: {}
},
pageInfo: {},
play_Audio: false,
diypagesData: [],
richtext: {
imageProp: {
mode: 'widthFix'
}
},
btngroup: {
backgroundColor: '#ffffff',
btnBordeRadius: '',
displayMode: '',
eachLineNum: '',
eachPageNum: '',
list: [],
indicatorDots: true,
duration: 300,
btngroupHandleData: [],
swiperHeight: ''
},
bottomMenu: null,
bgAudioMannager:'',
muiick:'',
seeting:null,
pagenum:0,
isred:0,
height:20,
isRedId:null,
isRedShare:null,
shareShow:false,
hintShow:false
};
},
components: {
Loadlogo,
diypages,
Advert,
TabBars,
recommendGoods,
follow,
redPacket,
PopManager
},
computed: {},
onLoad(e) {
let _this = this;
let url = 'pages/mainPages/index/index';
let Twodaystime = uni.getStorageSync('Twodaystime');
if(Twodaystime < new Date().getTime()){ //当前时间大于之前记录的时间则显示提示框
_this.hintShow = true;
}
if(e.isred){
url = url + '?isred=' + e.isred
this.isred = e.isred;
}
if(e.isRedShare && !e.isred){
this.isRedId = e.isRedId; //id
this.isRedShare = e.isRedShare; //类型：1卡券，2红包
//展示分享的遮罩指示
}else{
uni.removeStorageSync('redItem');
}
uni.getSystemInfo({
success:function(data){
// 将其赋值给this
_this.height=data.statusBarHeight;
}
})
//#ifdef H5
setTimeout(()=>{
App.navigationTo({
url: url
})
},1000)
//#endif
},
onShow() {
this.pagenum = this.pagenum + 1;
setTimeout(()=>{
App.wxApiCallback('pages/mainPages/index/index');
},500)
// let name = uni.getStorageSync('indexName');
if (!!this.pageInfo.title) {
// #ifndef H5
// debugger
setTimeout(()=>{
uni.setNavigationBarTitle({
title: this.pageInfo.title || ''
});
},500)
// #endif
// #ifdef H5
setTimeout(()=>{
document.title = this.pageInfo.title
console.log('在首页onshow当中率先执行',this.pageInfo.title)
},500)
// #endif
}
if(this.pageInfo.music){
this.playAudio();
}
//#ifdef APP-PLUS
this.isTabbars = true;
//#endif
// this.isTabbars = true;
},
onHide() {
let _this = this,
play_Audio = false,
pageAudio = _this.pageInfo.music;
if (!play_Audio) {
innerAudioContext.pause();
innerAudioContext.onPause(() => {
console.log('暂停播放');
});
}
// _this.isTabbars = false;
_this.play_Audio = play_Audio;
},
created() {},
mounted() {
// this.playAudio();
this.goseeting();
this.homePageInfo();
this.$nextTick(function() {
this.getcurCityTime();
});
},
watch:{
muiick(newold){
console.log('监听音乐')
// this.playAudio();
}
},
methods: {
closeHint(){ //关闭提示弹窗并记录当前时间
let _this = this;
_this.hintShow = false;
uni.setStorageSync('Twodaystime',new Date().getTime() + (48 * 60 * 60 * 1000)) //计算两天后的时间戳
// console.log(,new Date().getTime());
},
redShare(id,type){
return new Promise((resolve, reject) => {
App._post_form('&p=Order&do=planTransfer', {
id,
type
}, res => {
resolve(res.data);
})
})
},
diyhomepage(){
this.homePageInfo();
},
goseeting(){
let _this = this;
App._post_form('&do=CustomerService', {}, function(result) {
uni.removeStorageSync('CustomerService');
uni.setStorageSync('CustomerService',result.data);
_this.seeting = uni.getStorageSync('CustomerService');
});
},
btnTouchend(){
},
btnClick(){
console.log(3)
},
btnTouchstart(){
},
versionCli(url) {
console.log(url, 'oooo');
let oneContent = url.substring(0, 1);
// if (oneContent != '/') {
// url = '/' + url;
// }
// uni.navigateTo({
// url: url
// });
App.navigationTo({
url
})
},
getcurCityTime() {
let _this = this,
agencyData = uni.getStorageSync('agencyData'),
timestamp = new Date().getTime(),
cityTime = uni.getStorageSync('cityTimestamp'),
nowTime = !!cityTime ? timestamp - cityTime : '';
if (!!nowTime) {
let nowTime_m = parseInt((nowTime / 1000 / 60) % 60);
if (nowTime_m > 120) {
// #ifdef H5
wxApi.wxRegister(() => {
jWeixin.getLocation({
type: 'gcj02',
success: function(res) {
App.getAreaId(
res,
'',
'',
options => {
console.log('拿到了');
if (agencyData.areaid !== options.data.areaid) {
uni.showModal({
title: `定位到您在${options.data.areaname}`,
content: `是否切换至该城市进行探索`,
confirmText: '切换',
success: function(calback) {
if (calback.confirm) {
uni.setStorageSync('agencyData', options.data);
_this.$nextTick(function() {
_this.getPagesData(res, options.data.aid);
_this.$refs.diypages.currentaidCity = options.data.areaname;
uni.setStorageSync('curLoction', res);
});
}
}
});
}
},
true
);
}
});
});
// #endif
// #ifdef MP-WEIXIN
App.getLocation().then(res => {
App.getAreaId(
res,
'',
'',
options => {
if (agencyData.areaid !== options.data.areaid) {
uni.showModal({
title: `定位到您在${options.data.areaname}`,
content: `是否切换至该城市进行探索`,
confirmText: '切换',
success: function(calback) {
if (calback.confirm) {
uni.setStorageSync('agencyData', options.data);
_this.$nextTick(function() {
_this.getPagesData(options.data.aid);
_this.$refs.diypages.currentaidCity = options.data.areaname;
uni.setStorageSync('curLoction', res);
});
}
}
});
}
},
true
);
});
// #endif
}
}
},
homePageInfo() {
// this.playAudio();
let _this = this,
agencyData = uni.getStorageSync('agencyData');
App.getAreaId(agencyData, '', '', options => {
_this.$nextTick(function() {
_this.getPagesData(options.data.aid);
});
});
},
closeFollowTitle() {
let _this = this;
_this.followTitleShow = false;
},
closeFollowPop() {
let _this = this;
_this.followShow = false;
},
openQrShow() {
let _this = this;
_this.followShow = true;
},
getPageItem(keys,index){
let _this = this;
if(keys.length > 3 ){
if(index == 3){
_this.loadAgain = true;
_this.loadlogo = true;
if(_this.isRedId){
_this.shareShow = true;
}
}
}else{
_this.loadAgain = true;
_this.loadlogo = true;
if(_this.isRedId){
_this.shareShow = true;
}
}
if(index > keys.length - 1) return;
let myLocation = uni.getStorageSync('curLoction');
var lng = myLocation.longitude || '';
var lat = myLocation.latitude || '';
let data = {
item_key:keys[index],
lng,
lat
}
App._post_form('&do=getItemParams', data, function(result) {
// console.log(result,'getItemParams');
// for (let i in diypagesData) {
// diypagesDataArray.push(diypagesData[i]);
// }
_this.diypagesData.push(result.data);
//处理数据
for (let i in _this.diypagesData) {
//处理按钮组数据
if (_this.diypagesData[i].id == 'menu' || _this.diypagesData[i].id == 'menu2') {
//初始化
_this.diypagesData[i].btngroupData = {};
let btngroupData = {};
btngroupData.list = [];
btngroupData.indicatorDots = true;
btngroupData.duration = 300;
btngroupData.btngroupHandleData = [];
btngroupData.swiperHeight = '';
btngroupData.backgroundColor = _this.diypagesData[i].style.background;
btngroupData.btnBordeRadius = _this.diypagesData[i].style.navstyle;
btngroupData.displayMode = _this.diypagesData[i].style.showtype;
btngroupData.eachLineNum = _this.diypagesData[i].style.rownum;
btngroupData.eachPageNum = _this.diypagesData[i].style.pagenum;
for (let n in _this.diypagesData[i].data) {
btngroupData.list.push(_this.diypagesData[i].data[n]);
}
if (_this.diypagesData[i].style.showdot == 0) {
btngroupData.indicatorDots = false;
} else {
btngroupData.indicatorDots = true;
}
let eachPageFactNum = ''; //每页实际显示的数量
if (btngroupData.list.length > btngroupData.eachPageNum) {
eachPageFactNum = btngroupData.eachPageNum;
} else {
eachPageFactNum = btngroupData.list.length;
}
btngroupData.swiperHeight = Math.ceil(eachPageFactNum / btngroupData.eachLineNum) * 87 + 15;
if (btngroupData.list && btngroupData.list.length > 0) {
let listsLength = Math.ceil(btngroupData.list.length / btngroupData.eachPageNum);
for (let j = 0; j < listsLength; j++) {
let arr = [];
let arrIndex = j * btngroupData.eachPageNum;
for (let m = arrIndex; m < btngroupData.eachPageNum * (j + 1) && m < btngroupData.list.length; m++) {
arr.push(btngroupData.list[m]);
}
btngroupData.btngroupHandleData.push(arr);
}
}
_this.diypagesData[i].btngroupData = btngroupData;
}
//处理图片橱窗风格4
if (_this.diypagesData[i].id == 'picturew4') {
let picturewArr = [];
for (let p in _this.diypagesData[i].data) {
picturewArr.push(_this.diypagesData[i].data[p]);
}
_this.diypagesData[i].data = picturewArr;
}
//处理图片橱窗风格5
if (_this.diypagesData[i].id == 'picturew5') {
let picturewArr = [];
for (let p in _this.diypagesData[i].data) {
picturewArr.push(_this.diypagesData[i].data[p]);
}
_this.diypagesData[i].data = picturewArr;
}
//处理图片展播
if (_this.diypagesData[i].id == 'pictures') {
let picturesArr = [];
for (let p in _this.diypagesData[i].data) {
picturesArr.push(_this.diypagesData[i].data[p]);
}
_this.diypagesData[i].data = picturesArr;
}
//处理商家信息
if (_this.diypagesData[i].id == 'shop') {
let shopArr = [];
for (let s in _this.diypagesData[i].data) {
let goodsArr = [];
for (let g in _this.diypagesData[i].data[s].goods) {
if (_this.diypagesData[i].data[s].goods[g] !== '') {
if (g == 'active') {
_this.diypagesData[i].data[s].goods[g].css = 'qiang';
_this.diypagesData[i].data[s].goods[g].tag = '抢';
} else if (g == 'coupon') {
_this.diypagesData[i].data[s].goods[g].css = 'hui';
_this.diypagesData[i].data[s].goods[g].tag = '券';
} else if (g == 'fightgroup') {
_this.diypagesData[i].data[s].goods[g].css = 'pin';
_this.diypagesData[i].data[s].goods[g].tag = '拼';
} else if (g == 'groupon') {
_this.diypagesData[i].data[s].goods[g].css = 'tuan';
_this.diypagesData[i].data[s].goods[g].tag = '团';
} else if (g == 'halfcard') {
_this.diypagesData[i].data[s].goods[g].css = 'ka';
_this.diypagesData[i].data[s].goods[g].tag = '卡';
} else if (g == 'packages') {
_this.diypagesData[i].data[s].goods[g].css = 'li';
_this.diypagesData[i].data[s].goods[g].tag = '礼';
} else if (g == 'bargain') {
_this.diypagesData[i].data[s].goods[g].css = 'kan';
_this.diypagesData[i].data[s].goods[g].tag = '砍';
}
goodsArr.push(_this.diypagesData[i].data[s].goods[g]);
}
}
_this.diypagesData[i].data[s].goods = goodsArr;
shopArr.push(_this.diypagesData[i].data[s]);
}
_this.diypagesData[i].shopArr = shopArr;
}
if (_this.diypagesData[i].id == 'banner' || _this.diypagesData[i].id == 'banner2') {
let imageWidth = _this.diypagesData[i].width,
imageHeight = _this.diypagesData[i].height,
imageRatio = imageWidth / imageHeight,
windowHeight = uni.getSystemInfoSync().windowWidth / imageRatio;
_this.diypagesData[i].autoHeight = windowHeight;
let ratio;
// console.log(item.params.img_width,'jinx')
uni.getSystemInfo({
success: function(wh) {
ratio = wh.windowWidth / _this.diypagesData[i].params.img_width;
_this.diypagesData[i].params.img_width = (ratio * _this.diypagesData[i].params.img_width);
_this.diypagesData[i].params.img_height = ratio * _this.diypagesData[i].params.img_height;
}
});
}
}
_this.datas.basic = _this.diypagesData;
_this.getPageItem(keys,index+1);
});
},
getPagesData(aid = '') {
let _this = this;
let myLocation = uni.getStorageSync('curLoction');
var lng = myLocation.longitude || '';
var lat = myLocation.latitude || '';
App._post_form(
'&do=newHomePage',
{
aid,
lng,
lat
},
res => {
if (res.errno === 0) {
_this.datas.adv = !!res.data.adv && res.data.adv.length !== 0 ? res.data.adv : '';
_this.datas.page = !!res.data.page ? res.data.page : '';
_this.bottomMenu = res.data.menu;
_this.pageInfo = res.data.page;
// uni.setStorageSync('imgstyle',res.data.page.imgstyle);
_this.$store.commit('ISTABCONTRO', 1);
//修改页面标题
if (!!res.data.page.title) {
// #ifndef H5
uni.setNavigationBarTitle({
title: res.data.page.title
});
// #endif
// #ifdef H5
setTimeout(()=>{
document.title = res.data.page.title;
uni.setStorageSync('indexName',res.data.page.title);
console.log('在首页当中率先执行',res.data.page.title)
},500)
// #endif
}
if (!!res.data.page.music) {
setTimeout(()=>{
innerAudioContext.src = res.data.page.music;
innerAudioContext.loop = true;
// setTimeout(()=>{
// _this.playAudio();
// })
//#ifdef H5
jWeixin.ready(() => {
jWeixin.getLocation({
type: 'gcj02',
success: function(res) {
innerAudioContext.play();
}
});
});
//#endif
innerAudioContext.play();
this.play_Audio = true;
})
// let jweixin = require('jweixin-module');
// document.addEventListener("WeixinJSBridgeReady", function () {
// innerAudioContext
// }, false);
}
let diypagesData = res.data.item,
diypagesDataArray = [];
_this.diypagesData = [];
_this.getPageItem(diypagesData,0);
}
},
false,
() => {
}
);
},
playAudio() {
let _this = this,
play_Audio = _this.play_Audio ? false : true,
pageAudio = _this.pageInfo.music;
if (play_Audio) {
//#ifdef H5
jWeixin.ready(() => {
jWeixin.getLocation({
type: 'gcj02',
success: function(res) {
innerAudioContext.play();
}
});
});
//#endif
//#ifndef H5
innerAudioContext.play();
//#endif
innerAudioContext.onPlay(() => {
console.log('开始播放');
});
}
if (!play_Audio) {
innerAudioContext.pause();
innerAudioContext.onPause(() => {
console.log('暂停播放');
});
}
innerAudioContext.onError(res => {
console.log(res.errMsg);
console.log(res.errCode);
_this.playAudio(); //发生错误后，销毁实例
});
_this.play_Audio = play_Audio;
}
},
destroyed() {
innerAudioContext.stop();
innerAudioContext.onStop(() => {
});
},
onUnload() {
uni.removeStorageSync('redItem');
this.play_Audio = false;
innerAudioContext.stop();
innerAudioContext.onStop(() => {
});
},
onPullDownRefresh() {
//下拉刷新
//console.log('')
//停止下拉刷新
uni.stopPullDownRefresh();
},
onReachBottom(e) {
uni.$emit('isBottomMore');
uni.$emit('tabisBottomMore');
}
};
</script>
<style scoped lang="scss">
.container {
background-color: #ffd93f;
-webkit-overflow-scrolling: touch;
}
.hintModule{
position: fixed;
top: 20upx;
right: 20upx;
width: 440upx;
padding: 15upx 50upx 15upx 15upx;
background-color: #ffffff;
z-index: 990;
font-size: 28upx;
border-radius: 6upx;
box-shadow: 0px 0px 20upx #999999;
.hintClose{
font-size: 28upx;
color: #cccccc;
position: absolute;
right: 20upx;
top: 15upx;
}
.hintIndicate{
width: 0;
height: 0;
border-left: 15rpx solid transparent;
border-right: 15rpx solid transparent;
border-bottom: 15rpx solid #ffffff;
position: absolute;
top: -14rpx;
right: 100upx;
}
.smallCircle{
width: 10upx;
height: 10upx;
background-color: #000000;
border-radius: 50%;
vertical-align: middle;
}
.bigCircle{
margin: 0 10upx;
width: 15upx;
height: 15upx;
background-color: #000000;
border-radius: 50%;
}
}
.coverImg {
/* #ifdef H5 */
width: 750upx;
/* #endif */
/* #ifdef MP-WEIXIN */
width: 540upx;
/* #endif */
}
.page-index {
width: 100vw;
overflow: hidden;
background-color: #fff;
position: relative;
}
.bottomPadding {
padding-bottom: 100upx;
}
.full {
width: 750upx;
height: 110upx;
background: #f8f8f8;
}
.borderLast {
border-right: 1rpx solid #4395ff;
}
.borderLast:last-child {
border-right: none;
}
</style>