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.
453 lines
13 KiB
453 lines
13 KiB
<template>
|
|
<view class="container">
|
|
<loadlogo v-if="!loadlogo" />
|
|
<view class="page-index" :style="'background-color: '+datas.page.background" :class="!!bottomMenu?'bottomPadding':''"
|
|
v-if="loadlogo">
|
|
<far-bottom></far-bottom>
|
|
<Advert class="advert" :advertData="datas.adv" v-if="!!datas.adv" />
|
|
<diypages ref="diypages" :diypagesData="diypagesData" :pageData="datas.page" :btngroupData="btngroup" />
|
|
<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">
|
|
<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>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
let innerAudioContext = uni.createInnerAudioContext();
|
|
import {
|
|
mapState,
|
|
mapMutations
|
|
} from 'vuex'
|
|
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';
|
|
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
|
|
}
|
|
},
|
|
components: {
|
|
Loadlogo,
|
|
diypages,
|
|
Advert,
|
|
TabBars,
|
|
recommendGoods,
|
|
follow
|
|
},
|
|
computed: {
|
|
|
|
},
|
|
onShow() {
|
|
this.playAudio();
|
|
},
|
|
onHide() {
|
|
let _this = this,
|
|
play_Audio = false,
|
|
pageAudio = _this.pageInfo.music;
|
|
if (!play_Audio) {
|
|
innerAudioContext.pause()
|
|
innerAudioContext.onPause(() => {
|
|
console.log('暂停播放');
|
|
});
|
|
}
|
|
_this.play_Audio = play_Audio
|
|
},
|
|
mounted() {
|
|
|
|
let agencyData = uni.getStorageSync('agencyData'),
|
|
myLocation = uni.getStorageSync('myLocation'),
|
|
client = App.getClientType(),
|
|
getBrowser = App.getBrowser(),
|
|
_this = this;
|
|
if (getBrowser === "chrome53.0") {
|
|
_this.loadlogo = true;
|
|
_this.isTabbars = false;
|
|
uni.showModal({
|
|
content: '微信浏览器版本过低,请使用系统浏览器',
|
|
showCancel: false
|
|
})
|
|
return false
|
|
}
|
|
if (client === "1" || client === "3") {
|
|
if (!!agencyData) {
|
|
let location = {
|
|
latitude: myLocation.latitude,
|
|
longitude: myLocation.longitude
|
|
};
|
|
_this.getPagesData(location, agencyData.aid)
|
|
} else {
|
|
// #ifdef H5
|
|
jWeixin.ready(() => {
|
|
jWeixin.getLocation({
|
|
type: 'gcj02',
|
|
success: function(res) {
|
|
App.getAreaId(res, "", "", (options) => {
|
|
uni.setStorageSync('agencyData', options.data);
|
|
uni.setStorageSync('myLocation', res);
|
|
_this.getPagesData(res, options.data.aid);
|
|
})
|
|
},
|
|
fail: function(err) {
|
|
console.log(err, '定位失败回调')
|
|
_this.getPagesData();
|
|
}
|
|
});
|
|
});
|
|
// #endif
|
|
// #ifndef H5
|
|
App.getLocation().then(res => {
|
|
App.getAreaId(res, "", "", (options) => {
|
|
uni.setStorageSync('agencyData', options.data);
|
|
uni.setStorageSync('myLocation', res);
|
|
_this.getPagesData(res, options.data.aid);
|
|
})
|
|
})
|
|
// #endif
|
|
}
|
|
} else {
|
|
_this.getPagesData()
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
closeFollowTitle() {
|
|
let _this = this
|
|
_this.followTitleShow = false
|
|
},
|
|
closeFollowPop() {
|
|
let _this = this
|
|
_this.followShow = false
|
|
},
|
|
openQrShow() {
|
|
let _this = this
|
|
_this.followShow = true
|
|
},
|
|
getPagesData(location = "", aid = "") {
|
|
let _this = this;
|
|
App._post_form('&do=HomePage', {
|
|
lat: !!location ? location.latitude : "",
|
|
lng: !!location ? location.longitude : "",
|
|
aid
|
|
}, 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;
|
|
_this.$store.commit('ISTABCONTRO', 1)
|
|
if (!!res.data.page.music) {
|
|
innerAudioContext.src = res.data.page.music;
|
|
setTimeout(()=>{
|
|
jWeixin.ready(() => {
|
|
innerAudioContext.play();
|
|
});
|
|
// _this.playAudio();
|
|
})
|
|
}
|
|
let diypagesData = res.data.item,
|
|
diypagesDataArray = [];
|
|
|
|
for (let i in diypagesData) {
|
|
diypagesDataArray.push(diypagesData[i])
|
|
}
|
|
_this.diypagesData = diypagesDataArray;
|
|
//处理数据
|
|
for (let i in _this.diypagesData) {
|
|
|
|
//处理按钮组数据
|
|
if (_this.diypagesData[i].id == 'menu') {
|
|
//初始化
|
|
_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') {
|
|
let imageWidth = _this.diypagesData[i].width,
|
|
imageHeight = _this.diypagesData[i].height,
|
|
imageRatio = imageWidth / imageHeight;
|
|
uni.getSystemInfo({
|
|
success(res) {
|
|
let windowHeight = res.windowWidth / imageRatio;
|
|
_this.diypagesData[i].autoHeight = windowHeight;
|
|
}
|
|
})
|
|
|
|
}
|
|
}
|
|
_this.datas.basic = _this.diypagesData;
|
|
}
|
|
}, false, () => {
|
|
_this.loadAgain = true;
|
|
_this.loadlogo = true;
|
|
})
|
|
},
|
|
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('暂停播放');
|
|
});
|
|
}
|
|
_this.play_Audio = play_Audio
|
|
}
|
|
},
|
|
destroyed() {
|
|
innerAudioContext.stop()
|
|
innerAudioContext.onStop(() => {
|
|
console.log('页面跳转暂停播放');
|
|
})
|
|
},
|
|
onUnload() {
|
|
this.play_Audio = false;
|
|
innerAudioContext.stop()
|
|
innerAudioContext.onStop(() => {
|
|
console.log('页面跳转暂停播放');
|
|
})
|
|
},
|
|
onPullDownRefresh() {
|
|
//下拉刷新
|
|
//console.log('')
|
|
|
|
//停止下拉刷新
|
|
uni.stopPullDownRefresh()
|
|
},
|
|
onReachBottom(e) {
|
|
uni.$emit('isBottomMore')
|
|
uni.$emit('tabisBottomMore');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container {
|
|
background-color: #FFD93F;
|
|
}
|
|
|
|
.page-index {
|
|
width: 100vw;
|
|
overflow: hidden;
|
|
background-color: #fff;
|
|
position: relative;
|
|
}
|
|
|
|
.bottomPadding {
|
|
padding-bottom: 100upx;
|
|
}
|
|
|
|
@keyframes rotate2d {
|
|
from {
|
|
transform: rotate(0)
|
|
}
|
|
|
|
to {
|
|
transform: rotate(360deg)
|
|
}
|
|
}
|
|
.full{
|
|
width: 750upx;
|
|
height: 110upx;
|
|
background: #F8F8F8;
|
|
}
|
|
.audio-main {
|
|
position: fixed;
|
|
right: 50upx;
|
|
top: 10%;
|
|
z-index: 10;
|
|
}
|
|
|
|
.audio-bg {
|
|
position: relative;
|
|
}
|
|
|
|
.audio-bg .audio-gif {
|
|
width: 100upx;
|
|
height: 100upx;
|
|
background-size: 100upx 100upx;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.audio-bg .audio-gif .audio-png {
|
|
position: absolute;
|
|
background-size: 80upx 80upx;
|
|
animation: rotate2d 1.2s linear infinite;
|
|
z-index: -1;
|
|
width: 80upx;
|
|
height: 80upx;
|
|
}
|
|
|
|
.audio-bg.stop-audio .audio-gif {
|
|
background: none !important;
|
|
}
|
|
|
|
.audio-bg.stop-audio .audio-png {
|
|
animation: none;
|
|
}
|
|
</style>
|
|
|