LSM_OIL_SITE/pages/station-info/station-info.vue

<template>
	<view class="page-content  bg-white">
		<cu-custom class="bg-main-oil"  :isBack="true"  bgColor="bg-main-oil">
			<block slot="backText">返回</block>
			<block slot="content">油站信息</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 class="margin padding">
			<view class="">
				<button class="bg-main-oil" @tap="loginOut">
					退出登录
				</button>
			</view>
		</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: {
			loginOut() {
				uni.clearStorage()
				uni.reLaunch({
					url: '/pages/login/boforeLogin/boforeLogin'
				})
			},
			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>
	

	.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>