169 lines
3.4 KiB
Vue
169 lines
3.4 KiB
Vue
<template>
|
||
<view class="page-content bg-white">
|
||
<cu-custom class="main-topbar bg-main-oil" isBack bgColor="bg-main-oil">
|
||
<block slot="content" class="padding-top">油站信息</block>
|
||
<block slot="backText">返回</block>
|
||
</cu-custom>
|
||
|
||
<view class="main-money bg-white margin margin-bottom-0 radius">
|
||
<view class="cu-card case no-card ">
|
||
<view class="cu-item bg-white shadow">
|
||
<view class="image">
|
||
<image :src="mainURL+'default-station-bg.png'" mode="widthFix"></image>
|
||
</view>
|
||
<view class="cu-list bg-white position-re move-top">
|
||
<view class="cu-item bg-white padding-sm ">
|
||
<view class="text-bold color-333 text-xl">
|
||
{{site.oilSiteName}}
|
||
</view>
|
||
<view class="color-999">
|
||
{{site.address}}
|
||
</view>
|
||
<view class="color-333 padding-top-sm padding-bottom-sm text-sm ">
|
||
联系方式：<text v-if="site.linkMan">{{site.linkMan}}</text>
|
||
<text v-else>暂无</text>
|
||
<text v-if="site.phone" @tap="makeCall(site.phone)">（{{site.phone}}）</text>
|
||
<text v-else>（暂无）</text>
|
||
</view>
|
||
<view class=" position-call text-xxl" @tap="makeCall(site.phone)">
|
||
<text class="cuIcon-phone text-red"></text>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="padding-bottom ">
|
||
<OilMenuItem :oilItem="item" v-for="(item,index) in oilList" :key="index" />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import cloudSiteApi from '@/api/cloud-site.js'
|
||
import OilMenuItem from '@/components/oil-menu-item.vue'
|
||
export default {
|
||
components: {
|
||
OilMenuItem
|
||
},
|
||
data() {
|
||
return {
|
||
mainURL: this.global.mainURL,
|
||
title: 'Hello',
|
||
site: {},
|
||
cuIconList: [{
|
||
cuIcon: 'location',
|
||
color: 'red',
|
||
badge: 120,
|
||
name: '加油信息'
|
||
},
|
||
{
|
||
cuIcon: 'form',
|
||
color: 'orange',
|
||
badge: 0,
|
||
name: '加油订单'
|
||
},
|
||
{
|
||
cuIcon: 'new',
|
||
color: 'yellow',
|
||
badge: 0,
|
||
name: '经营分析'
|
||
},
|
||
{
|
||
cuIcon: 'scan',
|
||
color: 'olive',
|
||
badge: 0,
|
||
name: '扫码加油'
|
||
},
|
||
{
|
||
cuIcon: 'qr_code',
|
||
color: 'cyan',
|
||
badge: 0,
|
||
name: '油站二维码'
|
||
},
|
||
{
|
||
cuIcon: 'expressman',
|
||
color: 'red',
|
||
badge: 0,
|
||
name: '员工管理'
|
||
},
|
||
|
||
],
|
||
oilList: []
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getSiteInfo()
|
||
uni.showShareMenu()
|
||
},
|
||
methods: {
|
||
getSiteInfo() {
|
||
cloudSiteApi.getSiteDetail().then(res => {
|
||
if (res.code === 20000) {
|
||
this.site = res.data.site
|
||
this.oilList = res.data.oil
|
||
uni.setStorage({
|
||
key: 'oilSiteName',
|
||
data: res.data.site.oilSiteName
|
||
})
|
||
}
|
||
})
|
||
},
|
||
makeCall(phone) {
|
||
if (phone) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: '暂无油站联系方式',
|
||
icon:'none'
|
||
});
|
||
}
|
||
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scopeds>
|
||
.content {
|
||
min-height: 100%;
|
||
}
|
||
|
||
.cu-card.case.no-card .image {
|
||
margin: 0;
|
||
}
|
||
|
||
.bg-view {
|
||
height: 300rpx;
|
||
min-width: 100%;
|
||
position: absolute;
|
||
}
|
||
|
||
.position-re {}
|
||
|
||
image {
|
||
vertical-align: bottom;
|
||
background-color: rgba(113, 11, 233, 0.5)
|
||
}
|
||
|
||
.image {
|
||
border-radius: initial;
|
||
vertical-align: bottom;
|
||
background-color: rgba(11, 11, 251, 0.7)
|
||
}
|
||
|
||
.move-top {
|
||
margin-top: -2px;
|
||
}
|
||
|
||
.position-call {
|
||
position: absolute;
|
||
right: 30upx;
|
||
bottom: 30upx;
|
||
}
|
||
</style>
|