caoliancun/zhongPin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新 #8

Merged
caoliancun merged 1 commits from xiaozy_0706 into master 2023-07-21 10:50:54 +08:00
Conversation 0 Commits 1 Files Changed 3 +149 -69
3 changed files with 149 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
BagStation/pages/components/price-tab.vue
View File

@@ -32,6 +32,11 @@
<view class="padding-top-sm"> <view class="padding-top-sm">
<text class="cu-tag line-yellow margin-right-xs" v-for="(itemy,index) in tagList" :key="index">{{itemy}}</text> <text class="cu-tag line-yellow margin-right-xs" v-for="(itemy,index) in tagList" :key="index">{{itemy}}</text>
</view> </view>
<view class="activity" v-if="siteInfo.activitySwitch">
<view class="content">
{{siteInfo.activityContent}}
</view>
</view>
</view> </view>
</view> </view>
</view> </view>
@@ -43,6 +48,12 @@
channelList: { channelList: {
type: Array, type: Array,
default () {} default () {}
},
siteInfo:{
type: Object,
default: () => {
return {}
}
} }
}, },
data() { data() {
@@ -128,7 +139,7 @@
} }
</script> </script>
<style scoped> <style scoped lang="scss">
.site-icon { .site-icon {
width: 2rem; width: 2rem;
vertical-align: middle; vertical-align: middle;
@@ -137,4 +148,18 @@
.my-tag { .my-tag {
padding: 0 12rpx; padding: 0 12rpx;
} }
.activity {
margin-top: 15rpx;
display: flex;
width: 45%;
border:2rpx solid #1890FF50;
// border-radius: 10rpx;
.content {
flex: 1;
padding: 10rpx 20rpx;
line-height: 36rpx;
// min-height: 80rpx;
color: #1890FF;
}
}
</style> </style>

2
BagStation/pages/stationDetail/stationDetail.vue
View File

@@ -61,7 +61,7 @@
</view> </view>
<!-- 价格 --> <!-- 价格 -->
<price-tab @onChangeChannelCode="getChannelCode" @onChangePayQr="onChangePayQr" @onChangePay="onChangePay" <price-tab @onChangeChannelCode="getChannelCode" @onChangePayQr="onChangePayQr" @onChangePay="onChangePay"
:channel-list="siteInfo.oilSiteChannelDetailsVos"></price-tab> :channel-list="siteInfo.oilSiteChannelDetailsVos" :siteInfo="siteInfo"></price-tab>
<!-- 客户评价 --> <!-- 客户评价 -->

189
components/site-item/site-item.vue
View File

@@ -1,25 +1,34 @@
<template> <template>
<view class="cu-item cur padding no-mr-border site-item" :style="{height:siteItem.oilProductCodeAndPrices && siteItem.oilProductCodeAndPrices.length>3?'220rpx !important':listHeight?listHeight + 'rpx !important':''}"> <!-- :style="{height:siteItem.oilProductCodeAndPrices && siteItem.oilProductCodeAndPrices.length>3?'220rpx !important':listHeight?listHeight + 'rpx !important':''}" -->
<view class="cu-avatar radius lg " <view class="site-item">
:style="'background-image:url('+(siteItem.siteImages?siteItem.siteImages:defaultLogo)+');'"> <view class="radius"
</view> :style="'background-image:url('+(siteItem.siteImages?siteItem.siteImages:defaultLogo)+');'">
<view class="content"> </view>
<view class="content">
<view class="action">
<view class="text-grey text-sm " style="padding-top: 6rpx;">
<!-- <my-icon iconName="sy-der-icon.png" class="padding-right-xs text-sm"></my-icon> -->
{{siteItem.juli|distanceFilter}}
</view>
</view>
<view> <view>
<view class="text-cut text-black text-lg padding-right-sm ">{{siteItem.siteName}}</view> <view class="text-cut text-black text-lg padding-right-sm ">{{siteItem.siteName}}</view>
</view> </view>
<view class="listTages"> <view class="listTages">
<!-- <view v-if="siteItem.siteLevel" class=" cu-tag round bg-self--dark-yellow yu-tag text-xs">{{siteItem.siteLevel}}级</view> --> <!-- <view v-if="siteItem.siteLevel" class=" cu-tag round bg-self--dark-yellow yu-tag text-xs">{{siteItem.siteLevel}}级</view> -->
<view class="cu-tag round bg-self-yellow yu-tag text-xs" :class="siteItem.channelCode=='XOIL'?'tag-red':''">{{siteItem.listTag|channelCodeFamt}} <view class="cu-tag round bg-self-yellow yu-tag text-xs"
:class="siteItem.channelCode=='XOIL'?'tag-red':''">{{siteItem.listTag|channelCodeFamt}}
</view> </view>
<view class="cu-tag round bg-self--dark-yellow yu-tag text-xs" v-show="first">距离最近</view> <view class="cu-tag round bg-self--dark-yellow yu-tag text-xs" v-show="first">距离最近</view>
</view> </view>
<view class=""> <view class="">
<view class="text-cut color-666 text-sm "> <view class="text-cut color-666 text-sm ">
{{siteItem.address}} {{siteItem.address}}
</view> </view>
</view> </view>
<view class="text-gray flex" style="width: calc(100% + 30%);display: flex;flex-wrap: wrap;"> <view class="text-gray flex" style="display: flex;flex-wrap: wrap;">
<view v-if="listHeight" class="youpin" style="" v-for="(item,index) in siteItem.oilProductCodeAndPrices"> <view v-if="listHeight" class="youpin" style=""
v-for="(item,index) in siteItem.oilProductCodeAndPrices">
<view class="text-bold oil-main-color text-xl padding-right-xs"> <view class="text-bold oil-main-color text-xl padding-right-xs">
{{item.oilProductCode}} {{item.oilProductCode}}
</view> </view>
@@ -36,25 +45,24 @@
<view v-if="!listHeight" class=""> <view v-if="!listHeight" class="">
<text class="cu-tag oil-tag radius text-xs" <text class="cu-tag oil-tag radius text-xs"
v-if="siteItem.oilSitePrice - siteItem.sitePrice>0">省￥{{(siteItem.oilSitePrice - siteItem.sitePrice)|moneyFormat}}</text> v-if="siteItem.oilSitePrice - siteItem.sitePrice>0">省￥{{(siteItem.oilSitePrice - siteItem.sitePrice)|moneyFormat}}</text>
</view>
<view v-if="!listHeight" class="text-cut padding-left-sm text-lg">
<text class="text-delete color-333 text-sm padding-right-xs">
￥{{siteItem.oilSitePrice|moneyFormat}}/L
</text>
<!-- <my-icon iconName="￥.png" class="padding-right-xs icon-rectangle"></my-icon>
<my-icon iconName="f.png" class="padding-right-xs "></my-icon> -->
</view> </view>
</view> <view v-if="!listHeight" class="text-cut padding-left-sm text-lg">
<text class="text-delete color-333 text-sm padding-right-xs">
￥{{siteItem.oilSitePrice|moneyFormat}}/L
</text>
<!-- <my-icon iconName="￥.png" class="padding-right-xs icon-rectangle"></my-icon>
<my-icon iconName="f.png" class="padding-right-xs "></my-icon> -->
</view>
</view>
<view class="activity" v-if="siteItem.activitySwitch">
<view class="title">活动</view>
<view class="content">
{{siteItem.activityContent}}
</view>
</view>
</view> </view>
<view class="action">
<view class="text-grey text-sm " style="padding-top: 6rpx;">
<!-- <my-icon iconName="sy-der-icon.png" class="padding-right-xs text-sm"></my-icon> -->
{{siteItem.juli|distanceFilter}}
</view>
</view>
</view> </view>
</template> </template>
@@ -70,46 +78,46 @@
type: Boolean, type: Boolean,
default: false default: false
}, },
listHeight:{ listHeight: {
type:Number, type: Number,
default:0 default: 0
} }
}, },
data() { data() {
return { return {
starUrl: this.global.starUrl, starUrl: this.global.starUrl,
defaultLogo:'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/logo_default.png', defaultLogo: 'https://publicxingyou.oss-cn-hangzhou.aliyuncs.com/mp-oil/logo_default.png',
audioUrl:'' audioUrl: ''
} }
}, },
created() { created() {
console.log(this.siteItem,'-----------------') console.log(this.siteItem, '-----------------')
}, },
methods: { methods: {
}, },
filters: { filters: {
channelCodeFamt(value) { channelCodeFamt(value) {
console.log(value) console.log(value)
if (!value) { if (!value) {
return '未知' return '未知'
// 渠道编码 ( XOIL：星油 WJY：万金油 LV：老吕（找油网） TY：团油 YDJY：一点加油（壳牌）) // 渠道编码 ( XOIL：星油 WJY：万金油 LV：老吕（找油网） TY：团油 YDJY：一点加油（壳牌）)
// switch (value) { // switch (value) {
// case 'XOIL': // case 'XOIL':
// return '星油' // return '星油'
// case 'WJY': // case 'WJY':
// return '万金油' // return '万金油'
// case 'LV': // case 'LV':
// return '老吕（找油网）' // return '老吕（找油网）'
// case 'TY': // case 'TY':
// return '团油' // return '团油'
// case 'YDJY': // case 'YDJY':
// return '一点加油（壳牌）' // return '一点加油（壳牌）'
// } // }
} else { } else {
return value return value
} }
}, },
distanceFilter(value) { distanceFilter(value) {
if (value) { if (value) {
return value > 1000 ? ((value / 1000).toFixed(2) + 'km') : (value + 'm') return value > 1000 ? ((value / 1000).toFixed(2) + 'km') : (value + 'm')
@@ -126,20 +134,42 @@
} }
</script> </script>
<style scoped> <style scoped lang="scss">
.site-item { .site-item {
margin-bottom: 1.8rem; position: relative;
align-items: flex-start !important; display: flex;
height: 150rpx!important; align-items: flex-start !important;
} padding: 25rpx;
// margin-bottom: 1.8rem;
line-height:1.5rem;
.content {
flex:1;
overflow: hidden;
.action {
position: absolute;
right: 35rpx;
top: 24rpx;
}
}
>.radius {
margin-right: 30rpx;
width: 96rpx;
height: 96rpx;
font-size: 2em;
background-size: 100% 100%;
.yellow-oil{ }
}
.yellow-oil {
color: #e8775a; color: #e8775a;
} }
.cu-avatar{
.cu-avatar {
background-color: transparent !important; background-color: transparent !important;
} }
.youpin{
.youpin {
border: 1px solid #e4e4e4; border: 1px solid #e4e4e4;
display: flex; display: flex;
border-radius: 5px; border-radius: 5px;
@@ -147,7 +177,32 @@
margin-right: 5px; margin-right: 5px;
margin-bottom: 5px; margin-bottom: 5px;
} }
.text-xl{
.text-xl {
font-size: 30rpx; font-size: 30rpx;
} }
.activity {
display: flex;
width: 85%;
// padding: 10rpx 20rpx;
border:2rpx solid #1890FF ;
border-radius: 10rpx;
.title {
width: 20%;
padding: 10rpx 0;
line-height: 36rpx;
text-align: center;
color: #1890FF ;
background: #1890FF30;
}
.content {
flex: 1;
padding: 10rpx 20rpx;
line-height: 36rpx;
min-height: 80rpx;
color: #1890FF;
}
}
</style> </style>