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

更新

Browse Source
This commit is contained in:
xiaozhiyong
2023-09-07 09:40:21 +08:00
parent 3d13ebb01d
commit 49fc0e5531
9 changed files with 253 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
BagMoney/components/oil-card/oil-card.vue
View File

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