MP_XOIL_company_new/BagMoney/components/oil-card/oil-card.vue

<template>
	<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">
				<view class="padding-xs  text-bold">
					<text v-show="card.oilCardType==2">
						直属油卡
					</text>
					<text v-show="card.oilCardType==3">
						外请油卡
					</text>
					<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>
				</view>
				<view class="padding-xs padding-top-lg padding-bottom text-xxl">
					{{card.accountCardCode|cardNoFormat}}
				</view>
				<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 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>
	</view>
</template>

<script>
	import serve from '@/api/account.js'
	export default {
		filters: {
			companyType(e) {
				if (e) e = Number(e)
				switch (e) {
					case 0:
						return '柴油账户'
						break;
					case 1:
						return '汽油账户'
						break;
					case 2:
						return 'LNG账户'
						break;
					case 3:
						return '尿素'
						break;
				}
			},
			moneyFormat(value) {
				if (value) {
					return value.toFixed(2)
				} else {
					return '0.00'
				}
			},
			cardNoFormat(value) {
				if (value) {
					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 => {
						let result = JSON.parse(res.result)
						if (result.qrcodeText) {
							serve.checkQrStr(result.giveCustomerId, result.qrcodeText).then(res => {
								let currentCard = this.card || []
								this.$emit('buttomPopup', {
									...currentCard,
									...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 lang="scss" scoped>
	.boxsingForCard {
		position: relative;
	}

	.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 {
		opacity: 0;
	}

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