|
|
|
|
@ -1,5 +1,5 @@ |
|
|
|
|
<template> |
|
|
|
|
<view > |
|
|
|
|
<view> |
|
|
|
|
<view class="bg-img boxsingForCard flex align-center swi-bg" |
|
|
|
|
:style="'background-image: url('+imgURL+ (card.oilCardType==2?'card-zs.png':'card-other.png')+');'"> |
|
|
|
|
<view class="padding-xl text-white"> |
|
|
|
|
@ -13,8 +13,10 @@ |
|
|
|
|
<text v-show="card.oilCardType==1"> |
|
|
|
|
个人油卡 |
|
|
|
|
</text> |
|
|
|
|
<text style="margin-left: 15rpx;padding: 10rpx 15rpx;border-radius: 15rpx;color: #FF6700;background-color: #FFFFFF;font-size: 20rpx;">{{card.companyType|companyType}}</text> |
|
|
|
|
<text v-show="card.plateNumberCompany" style="margin-left: 15rpx;padding: 10rpx 15rpx;border-radius: 15rpx;color: #FF6700;background-color: #FFFFFF;font-size: 20rpx;">{{card.plateNumberCompany?card.plateNumberCompany:''}}</text> |
|
|
|
|
<text |
|
|
|
|
style="margin-left: 15rpx;padding: 10rpx 15rpx;border-radius: 15rpx;color: #FF6700;background-color: #FFFFFF;font-size: 20rpx;">{{card.companyType|companyType}}</text> |
|
|
|
|
<text v-show="card.plateNumberCompany" |
|
|
|
|
style="margin-left: 15rpx;padding: 10rpx 15rpx;border-radius: 15rpx;color: #FF6700;background-color: #FFFFFF;font-size: 20rpx;">{{card.plateNumberCompany?card.plateNumberCompany:''}}</text> |
|
|
|
|
</view> |
|
|
|
|
<view class="padding-xs padding-top-lg padding-bottom text-xxl"> |
|
|
|
|
{{card.accountCardCode|cardNoFormat}} |
|
|
|
|
@ -22,18 +24,32 @@ |
|
|
|
|
<view class="padding-xs" v-if="card.companyId"> |
|
|
|
|
{{card.companyName}} |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<view class="padding-xs text-lg"> |
|
|
|
|
<text class="text-df">账户余额:</text> |
|
|
|
|
<text class="text-xl text-bold padding-left-xs" v-if="card.shareCompanyQuota==1"> |
|
|
|
|
共享余额 |
|
|
|
|
共享余额 |
|
|
|
|
</text> |
|
|
|
|
<text class="text-xl text-bold padding-left-xs" v-else> |
|
|
|
|
{{card.balance|moneyFormat}} 元 |
|
|
|
|
</text> |
|
|
|
|
</view> |
|
|
|
|
<view class="inCard" v-if="card.oilCardType==3" @tap='gotocard'> |
|
|
|
|
<text>转卡</text> |
|
|
|
|
|
|
|
|
|
<view v-show="!isTransfer" class="card-container first"> |
|
|
|
|
<view class="inCard" v-if="card.oilCardType==3" @tap="transfer"> |
|
|
|
|
<text>转卡</text> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<view v-show="isTransfer" :class="isTransfer?'active':''" class="card-container second"> |
|
|
|
|
<view class="inCard" @click="sweepCard"> |
|
|
|
|
<text>扫码</text> |
|
|
|
|
</view> |
|
|
|
|
<view class="inCard phone" @tap='gotocard'> |
|
|
|
|
<text>手机号码</text> |
|
|
|
|
</view> |
|
|
|
|
<view class="back" @click="transfer"> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
@ -42,48 +58,22 @@ |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
export default { |
|
|
|
|
props: { |
|
|
|
|
card: { |
|
|
|
|
type: Object, |
|
|
|
|
default () {} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
imgURL: this.global.imgURL, |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
gotocard(){ |
|
|
|
|
if(this.card.oilCardType==3&&this.card.shareCompanyQuota==0){ |
|
|
|
|
let card = JSON.stringify(this.card) |
|
|
|
|
uni.redirectTo({ |
|
|
|
|
url:'../../pages/oilCards/oliout?card='+card |
|
|
|
|
}) |
|
|
|
|
}else{ |
|
|
|
|
uni.showToast({ |
|
|
|
|
title: '当前油卡为共享企业余额，不能进行此操作！', |
|
|
|
|
icon: "none" |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
filters:{ |
|
|
|
|
companyType(e){ |
|
|
|
|
if(e) e=Number(e) |
|
|
|
|
switch(e){ |
|
|
|
|
filters: { |
|
|
|
|
companyType(e) { |
|
|
|
|
if (e) e = Number(e) |
|
|
|
|
switch (e) { |
|
|
|
|
case 0: |
|
|
|
|
return '柴油账户' |
|
|
|
|
break; |
|
|
|
|
return '柴油账户' |
|
|
|
|
break; |
|
|
|
|
case 1: |
|
|
|
|
return '汽油账户' |
|
|
|
|
break; |
|
|
|
|
return '汽油账户' |
|
|
|
|
break; |
|
|
|
|
case 2: |
|
|
|
|
return 'LNG账户' |
|
|
|
|
break; |
|
|
|
|
return 'LNG账户' |
|
|
|
|
break; |
|
|
|
|
case 3: |
|
|
|
|
return '尿素' |
|
|
|
|
break; |
|
|
|
|
return '尿素' |
|
|
|
|
break; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
moneyFormat(value) { |
|
|
|
|
@ -95,38 +85,126 @@ |
|
|
|
|
}, |
|
|
|
|
cardNoFormat(value) { |
|
|
|
|
if (value) { |
|
|
|
|
return value.replace(/(.{4})/g,'$1 ') |
|
|
|
|
return value.replace(/(.{4})/g, '$1 ') |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
props: { |
|
|
|
|
card: { |
|
|
|
|
type: Object, |
|
|
|
|
default () {} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
imgURL: this.global.imgURL, |
|
|
|
|
isTransfer: false |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
transfer() { |
|
|
|
|
this.isTransfer = !this.isTransfer |
|
|
|
|
}, |
|
|
|
|
sweepCard() { |
|
|
|
|
uni.scanCode({ |
|
|
|
|
success: res => { |
|
|
|
|
console.log(res) |
|
|
|
|
let {} = res.result |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
gotocard() { |
|
|
|
|
if (this.card.oilCardType == 3 && this.card.shareCompanyQuota == 0) { |
|
|
|
|
let card = JSON.stringify(this.card) |
|
|
|
|
uni.redirectTo({ |
|
|
|
|
url: '../../pages/oilCards/oliout?card=' + card |
|
|
|
|
}) |
|
|
|
|
} else { |
|
|
|
|
uni.showToast({ |
|
|
|
|
title: '当前油卡为共享企业余额，不能进行此操作！', |
|
|
|
|
icon: "none" |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style scoped> |
|
|
|
|
.boxsingForCard{ |
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.boxsingForCard { |
|
|
|
|
position: relative; |
|
|
|
|
} |
|
|
|
|
.inCard{ |
|
|
|
|
position: absolute; |
|
|
|
|
right: 11%; |
|
|
|
|
bottom: 17%; |
|
|
|
|
width: 140rpx; |
|
|
|
|
height: 55rpx; |
|
|
|
|
background-color: #FFFFFF; |
|
|
|
|
border-radius: 20rpx; |
|
|
|
|
color: red; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
.card-container { |
|
|
|
|
position: absolute; |
|
|
|
|
bottom: 13%; |
|
|
|
|
|
|
|
|
|
&.first { |
|
|
|
|
right: 11%; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&.second { |
|
|
|
|
right: 9%; |
|
|
|
|
padding-right: 65rpx; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&.active { |
|
|
|
|
animation: slide-in-right .6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.back { |
|
|
|
|
position: absolute; |
|
|
|
|
right: 0; |
|
|
|
|
bottom: 4rpx; |
|
|
|
|
width: 48rpx; |
|
|
|
|
height: 48rpx; |
|
|
|
|
background: url(../../../static/img/back.png) 100%/100% no-repeat; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.inCard { |
|
|
|
|
width: 140rpx; |
|
|
|
|
height: 55rpx; |
|
|
|
|
background-color: #FFF; |
|
|
|
|
border-radius: 20rpx; |
|
|
|
|
color: red; |
|
|
|
|
text-align: center; |
|
|
|
|
line-height: 55rpx; |
|
|
|
|
|
|
|
|
|
&.phone { |
|
|
|
|
margin-top: 20rpx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.bg-img { |
|
|
|
|
background-position: inherit; |
|
|
|
|
background-size: cover; |
|
|
|
|
} |
|
|
|
|
.hidden-2{ |
|
|
|
|
|
|
|
|
|
.hidden-2 { |
|
|
|
|
opacity: 0; |
|
|
|
|
} |
|
|
|
|
.swi-bg{ |
|
|
|
|
|
|
|
|
|
.swi-bg { |
|
|
|
|
background-size: 770rpx; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@keyframes slide-in-right { |
|
|
|
|
0% { |
|
|
|
|
-webkit-transform: translateX(30rpx); |
|
|
|
|
transform: translateX(30rpx); |
|
|
|
|
opacity: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
100% { |
|
|
|
|
-webkit-transform: translateX(0); |
|
|
|
|
transform: translateX(0); |
|
|
|
|
opacity: 1; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
xiaozhiyong
1 year ago
