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.
 
 
 
 
 

769 lines
19 KiB

<template>
<!-- :style="{'background-color:'!!pageInfo?pageInfo.background:'#FFD93F'}" -->
<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 :diypagesData="diypagesData" :pageData="datas.page" :btngroupData="btngroup" @getChild="getChild"/>
<block v-if="pageType==='13'">
<filtertab @selectAreaid="selectAreaid" @selectClassid="selectClassid" @selectClassTwoid="selectClassTwoid"
@selectOrders="selectOrders" :requestType="'4'" @pageScrollHeight="pageScrollHeight" :isPageScroll="'1'"></filtertab>
<block v-if="!!cardlist&&cardlist.length>0">
<view class="business-card-box">
<business-card :businCard_list="cardlist" :is_collcet="'0'" :is_have="is_have"></business-card>
<load-more :isMore="loadingMore"></load-more>
</view>
</block>
<block v-else>
<none-mores></none-mores>
</block>
</block>
<view class="page-footer">
<TabBars :tabBarAct="0" :TabBarsData="datas.page.menu" :TabBarsType="datas.page.type" :pageType="pageType" :pageId="pageId" />
</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 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 wxApi from "@/common/js/wxApi.js"
import follow from '@/components/template/follow.vue'
import filtertab from "@/components/template/filtertab.vue"
import businessCard from "@/components/page/pageComponents/businessCard.vue"
import loadMore from '@/components/template/loadmore.vue'
import noneMores from '@/components/template/nonemores.vue'
export default {
data() {
return {
followTitleShow: true,
followShow: false,
followType: '0',
loadlogo: false,
swiperI: 1,
loading: false,
loadAgain: false,
datas: {
basic: [],
adv: '',
page: {},
},
play_Audio: false,
diypagesData: [],
richtext: {
imageProp: {
mode: 'widthFix'
}
},
pageInfo: {},
btngroup: {
backgroundColor: '#ffffff',
btnBordeRadius: '',
displayMode: '',
eachLineNum: '',
eachPageNum: '',
list: [],
indicatorDots: true,
duration: 300,
btngroupHandleData: [],
swiperHeight: ''
},
pageType: null,
pageId: null,
bottomMenu: null,
shareData: {},
current_page: 1,
order: "",
cate_one: "",
cate_two: "",
city_id: "",
total: null,
cardhave: null,
cardlist: [],
loadingMore: true,
is_have: null
}
},
components: {
Loadlogo,
diypages,
Advert,
TabBars,
follow,
filtertab,
businessCard,
loadMore,
noneMores
},
computed: {
},
onLoad(e) {
let client = App.getClientType(),
getBrowser = App.getBrowser(),
_this = this,
{
id,
type
} = e;
if (getBrowser === "chrome53.0") {
_this.loadlogo = true;
uni.showModal({
content: '微信浏览器版本过低,请使用系统浏览器',
showCancel: false
})
return false
};
if (client === "1" || client === "3") {
if (!!_this.agencyData) {
let location = {
latitude: _this.myLocation.latitude,
longitude: _this.myLocation.longitude
};
_this.getPagesData(location, type, id, _this.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, type, id, 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, type, id, options.data.aid)
})
})
// #endif
}
} else {
_this.getPagesData("", type, id)
_this.setmpShare(type, id)
}
_this.setData({
pageType: type,
pageId: id
})
},
onShow() {
},
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() {
},
computed: {
agencyData() {
return uni.getStorageSync('agencyData')
},
myLocation() {
return uni.getStorageSync('myLocation')
}
},
methods: {
closeFollowTitle() {
let _this = this
_this.followTitleShow = false
},
closeFollowPop() {
let _this = this
_this.followShow = false
},
openQrShow() {
let _this = this
_this.followShow = true
},
getPagesData(location = "", type = "1", page_id = 232, aid = "") {
let _this = this,
requestData = {
aid,
type,
lat: !!location ? location.latitude : "",
lng: !!location ? location.longitude : ""
};
if (type === "13") {
_this.setData({
city_id: _this.agencyData.areaid
})
_this.getShoplist(1, "", "", "", _this.city_id, _this.myLocation.latitude, _this.myLocation.longitude)
};
if (type === "1") {
Object.assign(requestData, {
page_id
});
};
App._post_form('&do=HomePage', requestData, 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.setNavigationBarTitle({
title: _this.datas.page.title == null ? '暂无标题' : _this.datas.page.title
})
if (!!res.data.page.music) {
innerAudioContext.src = res.data.page.music;
_this.playAudio();
}
let diypagesData = res.data.item,
diypagesDataArray = [];
for (let i in diypagesData) {
diypagesDataArray.push(diypagesData[i])
}
// console.log(diypagesDataArray)
_this.diypagesData = diypagesDataArray;
//处理数据
for (let i in _this.diypagesData) {
/*
if(that.diypagesData[i].id == 'public_goods2'){ //查询
console.log(that.diypagesData[i])
}
*/
//处理按钮组数据
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
}
}
_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
},
setmpShare(type, id = "") {
let _this = this;
App._post_form('&do=Shareinfo', {
type,
id
}, res => {
_this.shareData = res.data
})
},
selectAreaid(cityItemData) {
let _this = this,
{
sort,
cate_one,
cate_two
} = _this;
_this.setData({
city_id: cityItemData.id,
current_page: 1,
})
_this.getShoplist(1, sort, cate_one, cate_two, cityItemData.id, _this.myLocation.latitude, _this.myLocation.longitude);
},
selectClassid(classItemData) {
let _this = this,
{
sort,
city_id
} = _this;
if (classItemData.list.length === 0) {
_this.getShoplist(1, sort, classItemData.cate_one, "", city_id, _this.myLocation.latitude, _this.myLocation.longitude);
_this.setData({
current_page: 1,
cate_two: ""
})
}
_this.setData({
cate_one: classItemData.cate_one
})
},
selectClassTwoid(classItemTwoData) {
let _this = this,
{
sort,
city_id,
cate_one
} = _this;
_this.getShoplist(1, sort, cate_one, classItemTwoData.cate_two, city_id, _this.myLocation.latitude, _this.myLocation
.longitude);
_this.setData({
cate_two: classItemTwoData.cate_two,
current_page: 1,
})
},
selectOrders(ordersItem) {
console.log(ordersItem)
let _this = this,
{
city_id,
cate_one,
cate_two
} = _this;
_this.getShoplist(1, ordersItem.val, cate_one, cate_two, city_id, _this.myLocation.latitude, _this.myLocation.longitude);
_this.setData({
sort: ordersItem.val,
current_page: 1
})
},
pageScrollHeight(isshowTabbar) {
if (isshowTabbar === '1') {
uni.pageScrollTo({
scrollTop: 190
})
} else {
uni.pageScrollTo({
scrollTop: 0
})
}
},
getChild(e) {
let _this = this,
{
sort,
cate_one,
cate_two,
city_id,
current_page,
total
} = _this;
_this.getShoplist(1, sort, cate_one, cate_two, city_id, _this.currentLoction.latitude, _this.currentLoction.longitude, false,e)
},
getShoplist(page = 1, sort = "", cate_one = "", cate_two = "", city_id = "", lat = "", lng = "", isPage = false,search = '') {
let _this = this,
requestData = {
page,
sort,
cate_one,
cate_two,
city_id,
lat,
lng,
is_collect: 0,
search
};
App._post_form('&p=citycard&do=homeList', requestData, res => {
let cardlist = res.data.list;
if (isPage) {
if (cardlist.length > 0) {
_this["cardlist"].push(...cardlist);
} else {
_this.loadingMore = true;
}
} else {
console.log(cardlist,'0000000')
_this.setData({
cardlist,
loadingMore: cardlist.length === 0 || _this.current_page === res.data.total,
total: res.data.total,
is_have: res.data.is_have
})
}
})
},
cardOnReachBottom() {
console.log('Bottom')
let _this = this,
{
sort,
cate_one,
cate_two,
city_id,
current_page,
total
} = _this;
if (current_page >= total) {
_this.loadingMore = true;
return false;
}
_this.getShoplist(++_this.current_page, sort, cate_one, cate_two, city_id, _this.myLocation.latitude, _this.myLocation
.longitude, true)
}
},
destroyed() {
innerAudioContext.stop()
innerAudioContext.onStop(() => {
console.log('页面跳转暂停播放');
})
},
onUnload() {
this.play_Audio = false;
innerAudioContext.stop()
innerAudioContext.onStop(() => {
console.log('页面跳转暂停播放');
})
},
onPullDownRefresh() {
},
onReachBottom() {
console.log()
if (this.pageType !== '13') {
uni.$emit('isBottomMore')
uni.$emit('tabisBottomMore')
} else {
this.cardOnReachBottom()
}
}
}
</script>
<style scoped>
.container {
background-color: #FFD93F;
}
.page-index {
width: 100vw;
overflow: hidden;
background-color: #fff;
position: relative;
}
.index-right-bar {
width: 80px;
height: 80px;
padding: 16px;
position: fixed;
right: 30px;
bottom: 60px;
z-index: 99;
}
.right-bar-i {
width: 100%;
height: 100%;
padding: 6px;
}
.right-bar-i-t {
height: 40px;
text-align: center;
margin-top: 0;
padding-top: 6px;
}
.right-bar-i-t .i {
width: 44px;
height: 44px;
display: inline-block;
}
.right-bar-i-t .i .image {
width: 100%;
height: 100%;
display: block;
}
.right-bar-i-c {
height: 32px;
line-height: 32px;
font-size: 20px;
margin-top: 0;
}
.index-h {
height: 80px;
line-height: 80px;
padding: 10px 30px 20px 30px;
display: flex;
justify-content: space-between;
background-color: #FFD93F;
position: relative;
}
.index-h-l {
color: #000;
font-size: 36px;
font-style: italic;
}
.index-h-r-d {
width: 180px;
height: 56px;
line-height: 56px;
color: #808080;
font-size: 28px;
text-align: center;
margin-top: 12px;
background-color: #FFF0B2;
border-radius: 40px;
}
.index-h-r-d .i {
color: #333;
font-size: 32px;
margin-right: 10px;
vertical-align: -2px;
}
@keyframes move_wave {
0% {
transform: translateX(0) translateZ(0) scaleY(1);
}
100% {
transform: translateX(-66.66666%) translateZ(0) scaleY(1);
}
}
.index-wave {
width: 100%;
height: 60px;
position: absolute;
top: -72px;
left: 0;
overflow: hidden;
}
.index-wave-d {
width: 300%;
height: 100%;
animation: move_wave 4s linear infinite;
animation-delay: 0s;
display: -webkit-flex;
display: flex;
justify-content: flex-start;
}
.index-wave-i {
width: 100%;
height: 100%;
position: relative;
}
.index-wave-i .image {
width: 100%;
height: 100%;
}
.index-t1 {
margin-top: 40px;
padding: 0 30px;
display: -webkit-flex;
display: flex;
justify-content: space-between;
position: relative;
z-index: 1;
}
.index-t1-l {
padding-right: 30px;
flex: 1;
display: -webkit-flex;
display: flex;
justify-content: space-around;
}
.index-t1-l-i {
width: 140px;
}
.index-t1-l-i-t {
width: 100px;
height: 100px;
padding: 0 20px;
}
.index-t1-l-i-t .image {
width: 100px;
height: 100px;
}
.index-t1-l-i-b {
height: 42px;
line-height: 42px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.index-t1-r {
width: 140px;
border-left: 1.2px solid #f6f6f6;
}
.index-t1-r .image {
width: 110px;
height: 110px;
margin: 10px 0 0 30px;
}
.bottomPadding {
padding-bottom: 100upx;
}
.business-card-box {
padding: 30upx 0 120upx;
background-color: #F8F8F8;
}
</style>