zhongPin/BagMoney/pages/reCharge/reCharge.vue

<template>
	<view>
		<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
			<block slot="backText">返回</block>
			<block slot="content">油卡中心</block>
		</cu-custom>
		<view class="">
			<view class="placeholder bg-main-oil">

			</view>
			<view class="move-top">
				<view class="" v-for="item in cardList" :key="item.accountCardCode">
					<oil-card :card="item"></oil-card>
				</view>

			</view>
		</view>
		<view class="g-shadow padding  margin radius">
			<text class=" padding-left text-df">充值金额</text>
			<view class="cu-form-group">
				<input type="digit" placeholder="请输入金额" v-model="reChargeMoney" name="input"></input>
				<view class="text-xxl">元</view>
			</view>
			<view class="grid col-3 padding-sm">
				<view v-for="(item,index) in checkbox" class="padding-xs" :key="index">
					<button class="cu-btn red lg block" :class="item.checked?'bg-blue':'line-red'" @tap="ChooseCheckbox"
						:data-value="item.value"> {{item.name}}
						<view class="cu-tag sm round" :class="item.checked?'bg-white text-red':'bg-blue'"
							v-if="item.hot">HOT</view>
					</button>
				</view>
			</view>
			<view class="transactions margin  radius">
				<view class="bottom-btn padding-top-lg">
					<button class="text-center bg-blue text-block" @tap="reCharge">立即充油</button>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='success'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">充油金额到账成功</view>
					<view class="action" @tap="modalName=''">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-bottom-lg">
					<view class="bg-img padding-left padding-right flex align-center"
						:style="'background-image: url('+imgURL+'recharge-success.png);'">
						<view class="padding-xl text-left text-white">
							<view class="  text-bold">
								<!-- <text v-show="cardList[0].oilCardType==2">
									直属油卡
								</text>
								<text v-show="cardList[0].oilCardType==3">
									外请油卡
								</text>
								<text v-show="cardList[0].oilCardType==1">
									个人油卡
								</text> -->
							</view>
							<view class="padding-bottom-xs padding-top-lg card-color padding-bottom text-xxl">
								{{cardList[0].accountCardCode|cardNoFormat}}
							</view>
							<view class="padding-bottom-xs text-sm text-black text-ABC">
								<!-- {{card.companyName}} -->
								Personal oil card
							</view>
							
							<view class="padding-xs text-lg">
								<text class="text-sm">账户余额:</text>
								<text class="text-xl text-bold padding-left-xs" v-if="cardList[0].shareCompanyQuota==1">
									共享余额
								</text>
								<text class="text-sm  padding-left-xs" v-else>
									{{lastMoney|moneyFormat}} 元
								</text>
							</view>
						</view>
					</view>
					<view class="text-center">
						此时余额为 <text class="text-red  padding text-lg text-bold">{{lastMoney|moneyFormat}}元</text>
						<view class="">
							如有疑问，请联系在线客服
						</view>
						<view class="padding margin padding-bottom-0 margin-bottom-0 padding-top-0">
							<button @tap="backIndex" class=" line-red">关闭</button>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import accountApi from '@/api/account.js'
	import oilCard from '../../components/oil-card/oil-card.vue'
	export default {
		components: {
			oilCard
		},
		data() {
			return {
				cooling: false,
				modalName: '',
				imgURL: this.global.imgURL,
				cardCur: 0,
				checkbox: [{
					value: 100,
					name: '100元',
					checked: false,
					hot: false,
				}, {
					value: 200,
					name: '200元',
					checked: false,
					hot: false,
				}, {
					value: 500,
					name: '500元',
					checked: false,
					hot: false,
				}, {
					value: 1000,
					name: '1000元',
					checked: false,
					hot: false,
				}, {
					value: 2000,
					name: '2000元',
					checked: false,
					hot: false,
				}, {
					value: 5000,
					name: '5000元',
					checked: false,
					hot: false,
				}],

				reChargeMoney: '',
				cardList: [],
				lastMoney: '',
				outTradeNo: '' // 商户订单号
			};
		},
		onLoad() {
			this.getCards()
			// 初始化towerSwiper 传已有的数组名即可
		},
		filters:{
			moneyFormat(value) {
				if (value) {
					return value.toFixed(2)
				} else {
					return '0.00'
				}
			},
			cardNoFormat(value) {
				if (value) {
					return value.replace(/(.{4})/g,'$1 ')
				}
			}
		},
		methods: {
			reCharge() {
				if (!this.cooling) {
					this.cooling = true
					let payData = {
						openId: uni.getStorageSync('openid'),
						unionId: uni.getStorageSync('unionid'),
						appId: "wx2f203fde39b883bc",
						rechargeSource: 'WECHAT_APPETS',
						rechargeAmount: this.reChargeMoney + '',
						createSource: 'XOIL_DRIVER_WECHAT_APPLET',
						payCode: 'WECHAT_MP',
					}
					accountApi.getUserPayInfo(payData).then(res => {
						if (res.code == 20000) {
							let reqPay = res.data.baseWxOrderVo
							this.outTradeNo = res.data.outTradeNo
							uni.requestPayment({
								provider: 'wxpay',
								...reqPay,
								success: (res) => {
									this.getPayStatus(this.outTradeNo)
									this.getLastMoney()
									this.getCards()
									// console.log('success:' + JSON.stringify(res));
								},
								fail: function(err) {
									// console.log('fail:' + JSON.stringify(err));
								},
								complete: () => {
									this.cooling = fasle
								}
							})
						}
					})
				}else{
					uni.showToast({
						icon:'none',
						title:'操作频繁'
					})
				}
			},
			backIndex() {
				uni.navigateBack({

				})
			},
			getLastMoney() {
				// 查最新余额
				accountApi.getCustomerAccount().then(res => {
					if (res.code == 20000) {
						this.lastMoney = res.data
					}
				})
			},
			getPayStatus(id) {
				accountApi.pollingPayResult(id).then(res => {
					if (res.code == 20000) {
						// 提示到账成功
						this.modalName = 'success'
					}
				})
			},
			getCards() {
				accountApi.getUserAccount().then(res => {
					if (res.code == 20000) {
						this.cardList = res.data
					}
				})
			},
			ChooseCheckbox(e) {
				let items = this.checkbox;
				let values = e.currentTarget.dataset.value;
				this.reChargeMoney = values
				for (let i = 0, lenI = items.length; i < lenI; ++i) {
					if (items[i].value == values) {
						items[i].checked = !items[i].checked;
					} else {
						items[i].checked = false
					}
				}
			}
		}
	

	}
</script>

<style scoped>
	.tower-swiper .tower-item {
		transform: scale(calc(0.5 + var(--index) / 10));
		margin-left: calc(var(--left) * 100upx - 150upx);
		z-index: var(--index);
	}

	.placeholder {
		width: 750upx;
		min-height: 115rpx;
	}

	.move-top {
		margin-top: -110rpx;
	}

	.yu-tag-right {
		top: 0;
		right: 0;
		border-radius: 0 0 0 12px;
		background-color: #FF6D6E !important;
		color: #fff;
		padding: 0 10px;
	}

	.inner-card {
		height: 100%;
	}

	.opacity-half {
		opacity: 0.2;
	}
	.card-color{
		color: #F5E558;
	}
</style>