改版油站信息与设计图一致

lixuan
xk_guohonglei 5 years ago
parent f87b163385
commit b2c52517ce
  1. 58
      components/PriceList/PriceList.vue
  2. 18
      components/oil-menu-item.vue
  3. 50
      pages/station-info/station-info.vue

@ -1,58 +1,22 @@
<template> <template>
<view class="flex price-list"> <view class="flex price-list padding-top-sm ">
<view class="basis-xs"> <view class="flex-sub" v-for="(item,index) in price" :key="index" :class="index<price.length-1?'solid-right':''">
</view> <view class="text-left" :class="item.name==='市场价'?'text-right':''">
<view class="solid-right basis-xs" v-for="(item,index) in price" :key="index"> <view class="text-center padding-sm">
<view class="text-center"> <view class="strong text-lg" :class="'text-'+item.color">
<view class="strong font-16 oil-main-color">
{{item.price|numberFliter}} {{item.price|numberFliter}}
</view> </view>
<view class="radius text-center oil-card-price main-color-border">
<text class="oil-free"> <view class="text-sm padding-sm">
{{item.name}}
</text>
<text class="free-money">
{{item.free|numberFliter}}
</text>
</view>
<view class="">
星油油价
</view>
</view>
</view>
<!-- <view class="flex-treble text-center solid-right">
<view class="strong font-16 color-wjy">
5.81
</view>
<view class="radius text-center oil-card-price main-color-border border-wjy">
<text class="oil-free bg-wjy">
</text>
<text class="free-money color-wjy">
5.81
</text>
</view>
<view class="">
万金油价
</view> </view>
</view> </view>
<view class="flex-treble text-center " :class="isLast?'':'solid-right'">
<view class="strong font-16 color-lv ">
5.81
</view> </view>
<view class="radius oil-card-price border-lv">
<text class="oil-free bg-lv">
</text>
<text class="free-money color-lv">
七毛
</text>
</view> </view>
<view class=""> <view class="flex-sub">
老吕油价
</view> </view>
</view> -->
</view> </view>
</template> </template>

@ -1,7 +1,7 @@
<template> <template>
<view class="radius padding-xs padding-bottom padding-top margin-top bg-white shadow solid-bottom"> <view class="radius padding-xs padding-top solid-top solid-bottom" >
<view class="item-title "> <view class="item-title ">
<text class="margin color-000 text-bold">{{oilItem.oilName}}</text> <text class="margin color-000 text-xl text-bold">{{oilItem.oilName}}</text>
<text class="fr padding-right text-sm text-grey">市场价{{ oilItem.standardPrice|numberFliter}}</text> <text class="fr padding-right text-sm text-grey">市场价{{ oilItem.standardPrice|numberFliter}}</text>
<PriceList :price="price" /> <PriceList :price="price" />
</view> </view>
@ -44,11 +44,10 @@
if (this.oilItem.xkPrice) { if (this.oilItem.xkPrice) {
this.price.push({ this.price.push({
price: this.oilItem.xkPrice, price: this.oilItem.xkPrice,
color: '#ff0000', color: 'red',
name: '星油油价', name: '星油油价',
className1: 'red', className1: 'red',
className2: 'btn-red', className2: 'btn-red',
free: this.oilItem.standardPrice - this.oilItem.xkPrice
}) })
} }
if (this.oilItem.wjyPrice) { if (this.oilItem.wjyPrice) {
@ -58,7 +57,6 @@
name: '万金油价', name: '万金油价',
className1: 'yellow', className1: 'yellow',
className2: 'btn-yellow', className2: 'btn-yellow',
free: this.oilItem.standardPrice - this.oilItem.wjyPrice
}) })
} }
if (this.oilItem.lvPrice) { if (this.oilItem.lvPrice) {
@ -68,7 +66,15 @@
name: '老吕油价', name: '老吕油价',
className1: 'laolv', className1: 'laolv',
className2: 'btn-laolv', className2: 'btn-laolv',
free: this.oilItem.standardPrice - this.oilItem.lvPrice })
}
if (this.oilItem.standardPrice) {
this.price.push({
price: this.oilItem.standardPrice,
color: 'black',
name: '市场价',
className1: 'laolv',
className2: 'btn-laolv',
}) })
} }
} }

@ -1,21 +1,17 @@
<template> <template>
<view class="content my-bg"> <view class="page-content bg-white">
<cu-custom class="main-topbar bg-main-oil" isBack bgColor="bg-main-oil"> <cu-custom class="main-topbar bg-main-oil" isBack bgColor="bg-main-oil">
<block slot="content" class="padding-top">油站信息</block> <block slot="content" class="padding-top">油站信息</block>
<block slot="backText">返回</block> <block slot="backText">返回</block>
</cu-custom> </cu-custom>
<view class="bg-main-oil bg-view">
</view> <view class="main-money bg-white margin margin-bottom-0 radius">
<view class="main-money bg-white margin radius">
<view class="cu-card case no-card "> <view class="cu-card case no-card ">
<view class="cu-item bg-white shadow"> <view class="cu-item bg-white shadow">
<view class="image"> <view class="image">
<image :src="mainURL+'default-station-bg.png'" mode="widthFix"></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>
<view class="cu-list bg-white position-re"> <view class="cu-list bg-white position-re move-top">
<view class="cu-item bg-white padding-sm "> <view class="cu-item bg-white padding-sm ">
<view class="text-bold color-333 text-xl"> <view class="text-bold color-333 text-xl">
{{site.oilSiteName}} {{site.oilSiteName}}
@ -23,19 +19,23 @@
<view class="color-999"> <view class="color-999">
{{site.address}} {{site.address}}
</view> </view>
<view class="color-333 padding-top-xs"> <view class="color-333 padding-top-sm padding-bottom-sm text-sm ">
联系方式<text v-if="site.linkMan">{{site.linkMan}}</text> 联系方式<text v-if="site.linkMan">{{site.linkMan}}</text>
<text v-else>暂无</text> <text v-else>暂无</text>
<text v-if="site.phone">{{site.phone}}</text> <text v-if="site.phone" @tap="makeCall(site.phone)">{{site.phone}}</text>
<text v-else>暂无</text> <text v-else>暂无</text>
</view> </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>
</view> </view>
</view> </view>
<view class="margin margin-bottom-0 padding-bottom my-bg"> <view class="padding-bottom ">
<OilMenuItem :oilItem="item" v-for="(item,index) in oilList" :key="index" /> <OilMenuItem :oilItem="item" v-for="(item,index) in oilList" :key="index" />
</view> </view>
</view> </view>
@ -110,6 +110,19 @@
}) })
} }
}) })
},
makeCall(phone) {
if (phone) {
uni.makePhoneCall({
phoneNumber: phone
})
} else {
uni.showToast({
title: '暂无油站联系方式',
icon:'none'
});
}
} }
} }
}; };
@ -134,5 +147,22 @@
image { image {
vertical-align: bottom; 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> </style>

Loading…
Cancel
Save