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.
706 lines
16 KiB
706 lines
16 KiB
<template> |
|
<view class="pagecontent page-content my-bg"> |
|
<cu-custom bgColor="bg-blue"> |
|
<block slot="content">首页</block> |
|
</cu-custom> |
|
<view class="fixed"> |
|
<view class="bg-blue pagestart"> |
|
<view class="cu-bar search"> |
|
<!-- <view class="text-xxl margin-left text-center bg-blue"> |
|
<view class="cuIcon-scan"></view> |
|
</view> --> |
|
<view class="margin-left text-center"> |
|
<text>{{locationName}}</text> |
|
<text class="cuIcon-triangledown"></text> |
|
</view> |
|
<view class="search-form radius" @tap="InputFocus"> |
|
<text class="cuIcon-search"></text> |
|
<input disabled :adjust-position="false" type="text" placeholder="搜索油站名称" |
|
confirm-type="search" /> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="bg-blue padding pagestarttwo"> |
|
<view class="grid col-4 text-center "> |
|
<view class="text-xxl" @tap="openScan"> |
|
<view class="cuIcon-scan"></view> |
|
<text class="text-df"> |
|
扫一扫 |
|
</text> |
|
</view> |
|
<view class="text-xxl" @tap="showQr"> |
|
<view class="cuIcon-qr_code"></view> |
|
<text class="text-df"> |
|
付款码 |
|
</text> |
|
</view> |
|
<view class="text-xxl" @tap="toCards"> |
|
<view class="cuIcon-vipcard"></view> |
|
<text class="text-df"> |
|
加油卡 |
|
</text> |
|
</view> |
|
<view class="text-xxl" @tap="toOrders"> |
|
<view class="cuIcon-form"></view> |
|
<text class="text-df"> |
|
订单中心 |
|
</text> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<!-- 广告图片开始 --> |
|
<view class="my-bg padding" style="margin-top: 265rpx;"> |
|
<view> |
|
<swiper autoplay interval='5000' style="width: 100%;height: 204rpx;" class="swiper" circular> |
|
<swiper-item @click="swiperClick(item,index)" v-for="(item,index) in swiperArray"> |
|
<image :src="item.src" style="width: 100%;" mode="widthFix"></image> |
|
</swiper-item> |
|
<swiper-item> |
|
<ad unit-id="adunit-6dedd3908aa1c78c" ad-intervals="30" binderror="adError"></ad> |
|
</swiper-item> |
|
</swiper> |
|
<!-- <image :src="starUrl+'banner.png'" style="width: 100%;" mode="widthFix"></image> --> |
|
</view> |
|
</view> |
|
<!-- 筛选开始 --> |
|
<view class="screentop bg-white padding-top " @tap="scrollScreen"> |
|
<!-- <view> |
|
<sl-filter @result="filterRes" reflexTitle ref="slFilter" :menuList="menuList"></sl-filter> |
|
</view> --> |
|
<view> |
|
<view v-if="siteList.length>0"> |
|
<site-item :location='location' v-for="(item,index) in siteList" :key="item.id" :site-item="item" |
|
:first="index==0" :listHeight="listHeight" class="cu-list menu-avatar cu-item" |
|
@tap="toDetail(item)"> |
|
</site-item> |
|
</view> |
|
<view v-else> |
|
<my-empty></my-empty> |
|
</view> |
|
</view> |
|
</view> |
|
<msg-models :showAuthFrror="showAuthFrror" @hideOneModal="hideModel"></msg-models> |
|
<three-sites @hideOneModal="showThreeSites=false" :showThreeSites="showThreeSites"></three-sites> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import msgModels from '../../components/showModels.vue' |
|
import accountApi from '@/api/account.js' |
|
import threeSites from '@/components/three-sites.vue' |
|
import oilSiteApi from '@/api/oil-site.js' |
|
import siteItem from '@/components/site-item/site-item.vue' |
|
import Financial from '@/api/Financial.js' |
|
// import slFilter from '@/components/sl-filter/sl-filter.vue' |
|
export default { |
|
components: { |
|
siteItem, |
|
threeSites, |
|
msgModels |
|
// slFilter |
|
}, |
|
data() { |
|
return { |
|
location: null, |
|
swiperArray: [{ |
|
src: this.global.imgURL + 'banner-zhongpin.png', |
|
link: '' |
|
}, |
|
// src: 'https://xoil-public.oss-cn-beijing.aliyuncs.com/baichuan_MP/banner_baichuan.png', |
|
// JumpPage: '/Activity/pages/index/index' |
|
// src: 'https://xoil-public.oss-cn-beijing.aliyuncs.com/WMP-IMG/banner-2dwk.png', |
|
// link: 'https://tengxun.hkzj168.com/?ChannelId=20220831152210221048473' |
|
], |
|
listHeight: 160, |
|
siteInfo: { |
|
|
|
}, |
|
getCount: 0, |
|
siteId: '', |
|
showAuthFrzen: uni.getStorageSync('showAuthFrzen') ? uni.getStorageSync('showAuthFrzen') : 0, |
|
showAuthFrror: false, |
|
showThreeSites: false, |
|
filterData: {}, |
|
menuList: uni.getStorageSync('filterData') ? uni.getStorageSync('filterData') : [{ |
|
title: '渠道', |
|
isMutiple: false, |
|
key: 'channelCode', |
|
detailList: [{ |
|
title: "全部", |
|
value: "" |
|
}] |
|
}, |
|
{ |
|
title: '0#轻柴油', |
|
key: 'oilProductCode', |
|
isMutiple: false, |
|
detailList: [{ |
|
title: "全部", |
|
value: "" |
|
}] |
|
}, |
|
{ |
|
title: '品牌', |
|
key: 'siteBrand', |
|
isSort: true, |
|
isMutiple: false, |
|
detailList: [{ |
|
title: "全部", |
|
value: "" |
|
}] |
|
} |
|
], |
|
siteList: [], |
|
height: 0, |
|
starUrl: this.global.starUrl, |
|
qqMapKey: this.global.qqMapKey, |
|
|
|
imgURL: this.global.imgURL + 'index/', |
|
location: uni.getStorageSync('location'), |
|
InputBottom: 0, |
|
show: false, |
|
locationName: '', |
|
title: 'Hello', |
|
cuIconList: [{ |
|
iconUrl: 'icon-1.png', |
|
// icon: 'location', |
|
color: 'red', |
|
badge: 120, |
|
name: '附近油站' |
|
}, |
|
{ |
|
iconUrl: 'icon-2.png', |
|
color: 'orange', |
|
badge: 0, |
|
name: '线路规划' |
|
}, |
|
// { |
|
// iconUrl: 'icon-3.png', |
|
// color: 'yellow', |
|
// badge: 0, |
|
// name: '实体油卡' |
|
// }, |
|
{ |
|
iconUrl: 'icon-4.png', |
|
color: 'olive', |
|
badge: 0, |
|
name: '消费分析' |
|
}, |
|
{ |
|
iconUrl: 'icon-5.png', |
|
color: 'cyan', |
|
badge: 0, |
|
name: '消息中心' |
|
}, |
|
{ |
|
iconUrl: 'icon-6.png', |
|
color: 'red', |
|
badge: 0, |
|
name: '优惠券' |
|
}, |
|
{ |
|
iconUrl: 'icon-7.png', |
|
color: 'purple', |
|
badge: 0, |
|
name: 'ETC' |
|
}, |
|
// { |
|
// iconUrl: 'icon-8.png', |
|
// // icon: 'taxi', |
|
// color: 'mauve', |
|
// badge: 0, |
|
// name: '违章查询' |
|
// }, |
|
{ |
|
iconUrl: 'icon-9.png', |
|
color: 'purple', |
|
badge: 0, |
|
name: '我的车辆' |
|
}, |
|
|
|
{ |
|
iconUrl: 'iocn-10.png', |
|
color: 'cyan', |
|
badge: 0, |
|
name: '操作说明' |
|
}, |
|
|
|
] |
|
}; |
|
}, |
|
|
|
onLoad() { |
|
this.reverseGeocoder(this.location) |
|
}, |
|
|
|
onPullDownRefresh() { |
|
// this.refreshLocation() |
|
setTimeout(function() { |
|
uni.stopPullDownRefresh() |
|
}, 800); |
|
}, |
|
|
|
onShow() { |
|
this.location = uni.getStorageSync('location') |
|
const token = uni.getStorageSync('Authorization') |
|
const openid = uni.getStorageSync('openid') |
|
if (token && openid) { |
|
this.getAuthInfo() |
|
} |
|
this.refreshLocation(); |
|
}, |
|
|
|
methods: { |
|
toManagement() { |
|
const user = uni.getStorageSync('user'); |
|
if (user) { |
|
Financial.findHomePageReport({ |
|
customerId: user.id |
|
}).then(res => { |
|
if (res.data) { |
|
uni.navigateTo({ |
|
url: `../../../Financial/pages/estimate/index?data=${encodeURIComponent(JSON.stringify(res.data))}` |
|
}) |
|
} else { |
|
uni.navigateTo({ |
|
url: '../../../Financial/pages/index?guide=1' |
|
}) |
|
} |
|
}); |
|
} else { |
|
uni.showToast({ |
|
title: '请先登录！', |
|
icon: 'none' |
|
}) |
|
} |
|
}, |
|
|
|
swiperClick(item, index) { |
|
if (item?.JumpPage) { |
|
uni.navigateTo({ |
|
url: item.JumpPage |
|
}) |
|
} |
|
}, |
|
|
|
goToPage(url) { |
|
if (!url) return; |
|
uni.navigateTo({ |
|
url |
|
}); |
|
}, |
|
|
|
getAmount() { |
|
accountApi.getTotalOilCardInfo().then(res => { |
|
if (res.code == 20000) { |
|
this.userTotal = res.data |
|
} |
|
}) |
|
}, |
|
|
|
refreshLocation() { |
|
uni.getLocation({ |
|
type: 'wgs84', |
|
success: (res) => { |
|
uni.setStorageSync('location', res) |
|
}, |
|
fail: () => { |
|
uni.getSetting({ |
|
success: (res) => { |
|
if (!res.authSetting['scope.userLocation']) { |
|
uni.showModal({ |
|
title: '提示', |
|
content: '您暂无授权定位权限，将无法显示附近油站', |
|
confirmText: '去设置', |
|
success: (resSec) => { |
|
if (resSec.confirm) { |
|
uni.openSetting({ |
|
success: (resThird) => { |
|
if (resThird |
|
.authSetting[ |
|
'scope.userLocation' |
|
]) { |
|
this.refreshLocation() |
|
} |
|
} |
|
}) |
|
} |
|
} |
|
}) |
|
} |
|
} |
|
}) |
|
}, |
|
complete: () => { |
|
this.getSiteList() |
|
}, |
|
}); |
|
}, |
|
|
|
hideModel(name) { |
|
if (name == 'auth') { |
|
this.showAuthFrror = false |
|
if (this.showAuthFrzen <= new Date().getTime()) { |
|
uni.setStorageSync('showAuthFrzen', new Date().getTime() + 10 * 1000) |
|
} |
|
} |
|
}, |
|
|
|
getAuthInfo() { |
|
oilSiteApi.getUserAuthInfo().then(res => { |
|
if (res.code === 20000) { |
|
this.getAmount() |
|
if (this.showAuthFrzen <= new Date().getTime()) { |
|
this.showAuthFrror = res.data.realStatus && res.data.vehicleStatus ? false : |
|
true |
|
} |
|
} |
|
}) |
|
}, |
|
|
|
reverseGeocoder(location) { |
|
this.selLocation = location |
|
this.$qqmapsdk.reverseGeocoder({ |
|
location: location, |
|
success: (res) => { |
|
this.locationName = res.result.address_component.city |
|
} |
|
}) |
|
}, |
|
|
|
|
|
showQr() { |
|
let user = uni.getStorageSync("user"); |
|
if (!user) { |
|
uni.showModal({ |
|
content: "登录后才能出示付款码哦", |
|
confirmText: "去登录", |
|
success: function(res) { |
|
if (res.confirm) { |
|
uni.navigateTo({ |
|
url: "/BagAuth/pages/login/login", |
|
}); |
|
} |
|
}, |
|
}); |
|
return; |
|
} |
|
this.showThreeSites = true |
|
}, |
|
|
|
toCards() { |
|
let user = uni.getStorageSync("user"); |
|
if (!user) { |
|
uni.showModal({ |
|
content: "登录后才能查看哦", |
|
confirmText: "去登录", |
|
success: function(res) { |
|
if (res.confirm) { |
|
uni.navigateTo({ |
|
url: "/BagAuth/pages/login/login", |
|
}); |
|
} |
|
}, |
|
}); |
|
return; |
|
} |
|
uni.navigateTo({ |
|
url: '/BagMoney/pages/oilCards/oilCards' |
|
}) |
|
}, |
|
|
|
toOrders() { |
|
let user = uni.getStorageSync("user"); |
|
if (!user) { |
|
uni.showModal({ |
|
content: "登录后才能查看哦", |
|
confirmText: "去登录", |
|
success: function(res) { |
|
if (res.confirm) { |
|
uni.navigateTo({ |
|
url: "/BagAuth/pages/login/login", |
|
}); |
|
} |
|
}, |
|
}); |
|
return; |
|
} |
|
uni.switchTab({ |
|
url: '/pages/tabbar/order/orderList/orderList' |
|
}) |
|
}, |
|
|
|
filterRes(val) { |
|
this.filterData = val |
|
this.getSiteList() |
|
}, |
|
|
|
getSiteList() { |
|
let params = { |
|
currentPage: 1, |
|
pageSize: 10, |
|
params: { |
|
longitude: 117.157817, |
|
latitude: 31.802472, |
|
clientBelong: 'ZHONGPIN', |
|
comprehensiveSort: 1, |
|
zpDisable: 'ENABLE', |
|
sort: "juli", |
|
...uni.getStorageSync('location'), |
|
...this.filterData, |
|
} |
|
}; |
|
|
|
oilSiteApi.getSiteLists(params).then(res => { |
|
if (res.code == 20000) { |
|
this.siteList = res.data.list |
|
} |
|
}) |
|
}, |
|
|
|
toDetail(item) { |
|
let user = uni.getStorageSync("user"); |
|
if (!user) { |
|
uni.showModal({ |
|
content: "登录后才能查看哦", |
|
confirmText: "去登录", |
|
success: function(res) { |
|
if (res.confirm) { |
|
uni.navigateTo({ |
|
url: "/BagAuth/pages/login/login", |
|
}); |
|
} |
|
}, |
|
}); |
|
return; |
|
} |
|
let itemS = encodeURIComponent(JSON.stringify(item)); |
|
uni.navigateTo({ |
|
url: `/BagStation/pages/stationDetail/stationDetail?item=${itemS}` |
|
}) |
|
|
|
}, |
|
|
|
InputFocus(e) { |
|
uni.switchTab({ |
|
url: '/pages/tabbar/station/stationList' |
|
}) |
|
}, |
|
|
|
getSiteInfo(id) { |
|
let data2 = { |
|
...uni.getStorageSync('location'), |
|
siteId: id |
|
} |
|
oilSiteApi.getSiteDetails(data2).then(res => { |
|
if (res.code == 20000) { |
|
this.siteInfo = res.data |
|
if (res.data.oilSiteChannelDetailsVos.length == 1 && res.data.oilSiteChannelDetailsVos[0] |
|
.activePay) { |
|
uni.setStorageSync('tempScanSite', this.siteInfo) |
|
this.makePay() |
|
} else { |
|
this.toDetail(this.siteId) |
|
} |
|
} |
|
}) |
|
}, |
|
|
|
makePay() { |
|
uni.navigateTo({ |
|
url: `/BagStation/pages/makeOrder/makeOrder?siteId=${this.siteId}` |
|
}) |
|
}, |
|
|
|
getScanRes(code) { |
|
let data2 = { |
|
qrCode: code |
|
} |
|
oilSiteApi.getScanRes(data2).then(res => { |
|
if (res.code == 20000) { |
|
this.siteId = res.data.siteId |
|
this.getSiteInfo(this.siteId) |
|
} |
|
}) |
|
}, |
|
|
|
openScan() { |
|
let user = uni.getStorageSync("user"); |
|
if (!user) { |
|
uni.showModal({ |
|
content: "登录后才能使用扫一扫哦", |
|
confirmText: "去登录", |
|
success: function(res) { |
|
if (res.confirm) { |
|
uni.navigateTo({ |
|
url: "/BagAuth/pages/login/login", |
|
}); |
|
} |
|
}, |
|
}); |
|
return; |
|
} |
|
uni.scanCode({ |
|
scanType: 'qrCode', |
|
onlyFromCamera: false, |
|
success: (res) => { |
|
|
|
this.getScanRes(res.result) |
|
}, |
|
fail: (err) => { |
|
uni.showToast({ |
|
title: err |
|
}) |
|
} |
|
}) |
|
}, |
|
|
|
scrollScreen() { |
|
uni.createSelectorQuery().selectViewport().scrollOffset(res => { |
|
let view = uni.createSelectorQuery().in(this).select(".screentop"); |
|
let cuBar = uni.createSelectorQuery().in(this).select(".cu-bar"); |
|
view.boundingClientRect(data => { |
|
cuBar.boundingClientRect(dataCu => { |
|
if (data.top > dataCu.top) { |
|
uni.pageScrollTo({ |
|
scrollTop: data.top - dataCu.top, |
|
duration: 0, |
|
}); |
|
} |
|
}).exec(); |
|
}).exec(); |
|
}).exec(); |
|
}, |
|
|
|
adError(err) { |
|
console.log('add err', err) |
|
}, |
|
// shadoumeiyou(index) { |
|
// if (index == 0) { |
|
// uni.switchTab({ |
|
// url: '/pages/tabbar/station/stationList' |
|
// }) |
|
// } else if (index == 1) { |
|
// const referer = '星油云'; //调用插件的app的名称 |
|
// uni.removeStorageSync("origins") |
|
// uni.removeStorageSync("destination") |
|
// wx.navigateTo({ |
|
// url: '../../../BagStation/pages/routePlain/routePlain' |
|
// }) |
|
// } else if (index == 8) { |
|
// this.goToPage('/BagAuth/pages/agreeMent/OperationGuide') |
|
// } |
|
// else { |
|
// uni.showToast({ |
|
// title: '功能暂无', |
|
// icon: 'none' |
|
// }) |
|
// } |
|
// }, |
|
|
|
// getFilterData() { |
|
// oilSiteApi.getCheckInfo().then(res => { |
|
// if (res.code == 20000) { |
|
// let channelCodes = [] |
|
// res.data.channelCodes.map(item => { |
|
// channelCodes.push({ |
|
// title: item.name, |
|
// value: item.id |
|
// }) |
|
// }) |
|
// let productCodes = [] |
|
// res.data.productCodes.map(item => { |
|
// productCodes.push({ |
|
// title: item.name, |
|
// value: item.id |
|
// }) |
|
// }) |
|
// let siteBrands = [] |
|
// res.data.siteBrands.map(item => { |
|
// siteBrands.push({ |
|
// title: item.name, |
|
// value: item.id |
|
// }) |
|
// }) |
|
// this.menuList[0].detailList.concat(channelCodes) |
|
// this.menuList[1].detailList.concat(productCodes) |
|
// this.menuList[2].detailList.concat(siteBrands) |
|
// uni.setStorageSync('filterData', this.menuList) |
|
// } |
|
// }) |
|
// }, |
|
} |
|
}; |
|
</script> |
|
|
|
<style scoped> |
|
.bottom-bar { |
|
position: relative; |
|
padding-top: 50px; |
|
margin-bottom: 0; |
|
margin-top: 0; |
|
} |
|
|
|
.main-topbar>>>.cu-bar { |
|
height: 380rpx !important; |
|
z-index: 0 !important; |
|
} |
|
|
|
.main-topbar>>>.cu-bar .content { |
|
padding-bottom: 300rpx; |
|
} |
|
|
|
.bottom-bar-fixed { |
|
position: fixed; |
|
bottom: 0; |
|
padding-top: 70rpx; |
|
width: 100%; |
|
} |
|
|
|
.main-money { |
|
position: relative; |
|
z-index: 1; |
|
} |
|
|
|
.van-tag { |
|
display: inline-block; |
|
padding: 0.3rem 0.4rem; |
|
position: absolute; |
|
right: 1px; |
|
font-size: 12px; |
|
top: 25%; |
|
background-color: #b9ffca; |
|
border-radius: 10rem 0 0 10rem; |
|
border-color: transparent; |
|
} |
|
|
|
.screentop { |
|
min-height: 50vh; |
|
} |
|
|
|
.cu-list.menu-avatar>.cu-item { |
|
height: 175rpx; |
|
} |
|
|
|
.fixed { |
|
width: 750upx; |
|
position: fixed; |
|
z-index: 2; |
|
} |
|
|
|
|
|
.my-icon-sm { |
|
display: inline-block; |
|
width: 70upx; |
|
text-align: center; |
|
max-height: 70upx; |
|
overflow: hidden; |
|
} |
|
|
|
.my-icon-sm .text-sm { |
|
line-height: 1rem; |
|
} |
|
</style> |