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

<template>
	<view class="content my-bg">
		<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="bg-main-oil bg-view">

		</view>
		<view class="main-money bg-white margin 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 class="cu-tag bg-blue">史诗</view> -->
						<!-- <view class="cu-bar bg-shadeBottom"> <text class="text-cut">我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。</text></view> -->
					</view>
					<view class="cu-list bg-white position-re">
						<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-xs">
								联系方式：<text v-if="site.linkMan">{{site.linkMan}}</text>
								<text v-else>暂无</text>
								<text v-if="site.phone">（{{site.phone}}）</text>
								<text v-else>（暂无）</text>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>
		<view class="margin margin-bottom-0 padding-bottom my-bg">
			<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()
		},
		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
						})
					}
				})
			}
		}
	};
</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;
	}
</style>