401 lines
9.4 KiB
Vue
401 lines
9.4 KiB
Vue
<template>
|
|
<div class="consumption">
|
|
<div class="help-header">
|
|
<p class="now-road" @click="goMap">当前位置: {{pageMsg.nowAdd}}</p>
|
|
<!-- <p class="help-tip">如需帮助请拨打12122</p> -->
|
|
<!-- <div class="menu-box ">
|
|
<div class="model-c-menu" hover-class="navigator-hover" @click="isPhone('96122')">
|
|
|
|
<i class="ico-menu"><image src="https://eshangtech.com/ShopICO/icos/gsjj.png" mode="aspectFit" style="width:94rpx;height:94rpx;"></image></i>
|
|
<span>事故报警</span>
|
|
</div>
|
|
|
|
<div class="model-c-menu" hover-class="navigator-hover" @click="isPhone('12122')">
|
|
<i class="ico-menu"><image src="https://eshangtech.com/ShopICO/icos/jtfw.png" mode="aspectFit" style="width:94rpx;height:94rpx;"></image></i>
|
|
|
|
<span>公路救援</span>
|
|
</div>
|
|
<div class="model-c-menu" hover-class="navigator-hover" @click="isPhone('12328')">
|
|
<i class="ico-menu"><image src="https://eshangtech.com/ShopICO/icos/czrx.png" mode="aspectFit" style="width:94rpx;height:94rpx;"></image></i>
|
|
|
|
<span>服务监督</span>
|
|
</div>
|
|
|
|
</div> -->
|
|
</div>
|
|
<div>
|
|
<div class="location-title">我的附近</div>
|
|
<div class="menu-position-box">
|
|
<div class="menu-box">
|
|
<div class="model-c-menu" v-for="(s,i) in severList" :key="i" @click="goDiscovery(s)">
|
|
<image mode="aspectFit" src="https://eshangtech.com/ShopICO/icos/fwq-ico.png"></image>
|
|
<div>
|
|
<p class="server-name">{{s.ServerPart_Name}}</p>
|
|
<p class='server-wz'>
|
|
<van-icon name="location" color="#A5A5A5" size="20rpx" />
|
|
<span style="display:inline-block;line-height:12rpx;">{{s.Distance}} km</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="consumption-title">
|
|
<div class="title-text" :class="{'active':pageMsg.tab==0}" @click="tab(0)"><image class="jy-ico" mode="aspectFit" src="https://eshangtech.com/ShopICO/icos/jy-ico.png"></image>救援</div>
|
|
<div class="title-text" :class="{'active':pageMsg.tab==1}" @click="tab(1)">
|
|
<image mode="aspectFit" class="cx-ico" src="https://eshangtech.com/ShopICO/icos/cx-ico.png"></image> 车险
|
|
</div>
|
|
</div>
|
|
<div class="consumption-content" >
|
|
<block v-for="(unit,i) in pageMsg.list[pageMsg.tab]" :key="i">
|
|
<!-- <p class="consumption-content-date">{{unit.date}}</p> -->
|
|
<div class="consumption-content-unit" >
|
|
<div class='cp-u-left'>
|
|
|
|
<image :src="unit.image ? unit.image : 'https://eshangtech.com/ShopICO/icos/bjdh.png'" mode="aspectFit" style="width:90rpx;height:90rpx;margin-right:20rpx;"></image>
|
|
<div>
|
|
<p class="cp-u-title">{{unit.name}}</p>
|
|
|
|
<p class="cp-u-type">{{unit.value}} </p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<image src="https://eshangtech.com/ShopICO/icos/bh.png" mode="aspectFit" style="width:72rpx;height:72rpx;" @click="isPhone(unit.value)"></image>
|
|
</div>
|
|
</div>
|
|
</block>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters, mapMutations } from 'vuex'
|
|
export default {
|
|
data () {
|
|
const arr1 = [
|
|
{
|
|
id: 0,
|
|
name: '人保车险',
|
|
value: '95518',
|
|
image: 'https://eshangtech.com/ShopICO/icos/picc.png'
|
|
},
|
|
{
|
|
id: 1,
|
|
name: '太平洋车险',
|
|
value: '95500',
|
|
image: 'https://eshangtech.com/ShopICO/icos/tpycx.png'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '中国人寿车险',
|
|
value: '95519',
|
|
image: 'https://eshangtech.com/ShopICO/icos/zgrs.png'
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '平安车险',
|
|
value: '95512',
|
|
image: 'https://eshangtech.com/ShopICO/icos/pacx.png'
|
|
},
|
|
{
|
|
id: 4,
|
|
name: '阳光车险',
|
|
value: '95510',
|
|
image: 'https://eshangtech.com/ShopICO/icos/ygcx.png'
|
|
},
|
|
{
|
|
id: 5,
|
|
name: '中华联合车险',
|
|
value: '95585',
|
|
image: 'https://eshangtech.com/ShopICO/icos/zhlhcx.png'
|
|
},
|
|
{
|
|
id: 6,
|
|
name: '大地车险',
|
|
value: '95590',
|
|
image: 'https://eshangtech.com/ShopICO/icos/ddcx.png'
|
|
},
|
|
{
|
|
id: 7,
|
|
name: '永安车险',
|
|
value: '95502',
|
|
image: 'https://eshangtech.com/ShopICO/icos/yacx.png'
|
|
},
|
|
{
|
|
id: 8,
|
|
name: '中银车险',
|
|
value: '95566',
|
|
image: 'https://eshangtech.com/ShopICO/icos/zycx.png'
|
|
}
|
|
]
|
|
const arr2 = [
|
|
{
|
|
id: 0,
|
|
name: '全国交通运输服务监督电话',
|
|
value: '12328',
|
|
image: 'https://eshangtech.com/ShopICO/icos/jtfw.png'
|
|
},
|
|
{
|
|
id: 1,
|
|
name: '全国高速公路救援电话',
|
|
value: '12122',
|
|
image: 'https://eshangtech.com/ShopICO/icos/czrx.png'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '全国交通事故报警电话',
|
|
value: '96122',
|
|
image: 'https://eshangtech.com/ShopICO/icos/gsjj.png'
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '全国公安报警',
|
|
value: '110',
|
|
image: 'https://eshangtech.com/ShopICO/icos/110.png'
|
|
},
|
|
{
|
|
id: 4,
|
|
name: '全国急救电话',
|
|
value: '120',
|
|
image: 'https://eshangtech.com/ShopICO/icos/120.png'
|
|
}
|
|
|
|
]
|
|
return {
|
|
pageMsg: {
|
|
tab: 0,
|
|
nowAdd: '',
|
|
list: [ arr2, arr1 ]
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['user', 'severList'])
|
|
},
|
|
methods: {
|
|
...mapMutations({
|
|
|
|
'setServerPart': 'discoveryServerPart'
|
|
|
|
}),
|
|
tab (index) {
|
|
this.pageMsg.tab = index
|
|
},
|
|
goMap () {
|
|
mpvue.navigateTo({url: '/pages/map/main'})
|
|
},
|
|
goDiscovery (item) {
|
|
this.setServerPart(item)
|
|
mpvue.switchTab({url: '/pages/discovery/main'})
|
|
},
|
|
isPhone (value) {
|
|
mpvue.makePhoneCall({
|
|
phoneNumber: value
|
|
})
|
|
}
|
|
|
|
},
|
|
onUnload () {
|
|
this.pageMsg.tab = 0
|
|
},
|
|
onLoad () {
|
|
let _this = this
|
|
wx.choosePoi({
|
|
type: 'wgs84',
|
|
success: function (res) {
|
|
let latitude = res.latitude
|
|
let longitude = res.longitude
|
|
wx.request({
|
|
url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=SVKBZ-P6QCJ-NH7F7-KOPJW-CBNEV-FUBRT`,
|
|
success: res => {
|
|
_this.pageMsg.nowAdd = res.data.result.address
|
|
}
|
|
})
|
|
}
|
|
})
|
|
this.severList.map(n => {
|
|
n.name = n.ServerPart_Name
|
|
n.id = n.ServerPart_Id
|
|
n.value = n.ServerPart_Tel
|
|
})
|
|
this.$utils.addUserBehaviorNew();
|
|
// this.pageMsg.list[0] = this.severList
|
|
},
|
|
onShow () {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.consumption
|
|
background #fff
|
|
height 100%
|
|
overflow-y auto
|
|
.help-header
|
|
border-top 2rpx solid #F0F1F5
|
|
padding-top 24rpx
|
|
text-align center
|
|
font-size 28rpx
|
|
line-height 2
|
|
.now-road:before
|
|
content ''
|
|
background url(https://eshangtech.com/ShopICO/icos/help-dingwei.png) no-repeat center
|
|
background-size contain
|
|
height 36rpx
|
|
width 25rpx
|
|
margin-right 8rpx
|
|
.now-road
|
|
color #EC6232
|
|
display flex
|
|
align-items center
|
|
justify-content center
|
|
.help-tip
|
|
color #999999
|
|
font-size 26rpx
|
|
.location-title
|
|
padding-left 32rpx
|
|
font-size 32rpx
|
|
display flex
|
|
align-items center
|
|
margin-bottom 32rpx
|
|
margin-top 32rpx
|
|
.location-title:before
|
|
content ''
|
|
background url(https://eshangtech.com/ShopICO/icos/fj-ico.png) no-repeat center
|
|
background-size contain
|
|
height 40rpx
|
|
width 40rpx
|
|
margin-right 8rpx
|
|
.menu-position-box
|
|
width 686rpx
|
|
padding 0 32rpx
|
|
height 148rpx
|
|
overflow hidden
|
|
.menu-box
|
|
display flex
|
|
align-items center
|
|
flex-wrap nowrap
|
|
overflow-y auto
|
|
position relative
|
|
-webkit-overflow-scrolling touch
|
|
padding-bottom 16rpx
|
|
// justify-content space-around
|
|
image
|
|
height 96rpx
|
|
width 96rpx
|
|
margin-right 32rpx
|
|
.model-c-menu
|
|
display flex
|
|
border-radius 8rpx
|
|
align-items center
|
|
background #F7F7F7
|
|
padding 0 32rpx
|
|
min-width 384rpx
|
|
max-width 448rpx
|
|
margin-right 24rpx
|
|
height 148rpx
|
|
font-family "PingFang SC Medium","SimHei"
|
|
.server-name
|
|
font-size 28rpx
|
|
color #484b51
|
|
.server-wz
|
|
margin-top 36rpx
|
|
font-size 20rpx
|
|
color #555555
|
|
.ico,
|
|
.ico-menu
|
|
width 94rpx
|
|
height 94rpx
|
|
.ico-menu
|
|
width 94rpx
|
|
height 94rpx
|
|
|
|
position relative
|
|
text-align center
|
|
overflow hidden
|
|
|
|
.consumption-title
|
|
padding 0 32rpx
|
|
font-size 30rpx
|
|
line-height 80rpx
|
|
color #777777
|
|
margin-top 32rpx
|
|
display flex
|
|
align-items center
|
|
border-bottom 2rpx solid #F0F1F5
|
|
image
|
|
height 42rpx
|
|
width 42rpx
|
|
margin-right 8rpx
|
|
.title-text
|
|
display flex
|
|
align-items center
|
|
position relative
|
|
|
|
.title-text + .title-text
|
|
margin-left 72rpx
|
|
|
|
.title-text.active
|
|
color #000
|
|
.title-text.active:after
|
|
content ''
|
|
width 55rpx
|
|
height 4rpx
|
|
background #000
|
|
position absolute
|
|
bottom 0
|
|
left 46rpx
|
|
|
|
.consumption-content
|
|
/* background-color #fff */
|
|
padding-bottom 20rpx
|
|
|
|
|
|
.consumption-content-date
|
|
color #999
|
|
font-size 12px
|
|
padding-bottom 10rpx
|
|
padding-left 40rpx
|
|
|
|
.consumption-content-unit
|
|
display flex
|
|
padding 32rpx 32rpx
|
|
line-height 42rpx
|
|
justify-content space-between
|
|
align-items center
|
|
background-color #fff
|
|
border-bottom 2rpx solid #eee
|
|
|
|
.ico-shop
|
|
/* background url(../../../static/img/xiaofei_shop.png) no-repeat center */
|
|
background-size contain
|
|
height 72rpx
|
|
width 72rpx
|
|
margin-right 8rpx
|
|
|
|
.cp-u-left
|
|
display flex
|
|
justify-content flex-start
|
|
align-items center
|
|
|
|
.cp-u-title
|
|
font-size 28rpx
|
|
color #555555
|
|
|
|
.cp-u-type
|
|
font-size 24rpx
|
|
color #333
|
|
.colorOr
|
|
color #D86E35
|
|
.colorGr
|
|
color #45AB58
|
|
.cp-u-price
|
|
text-align right
|
|
font-size 32rpx
|
|
|
|
|
|
</style>
|