290 lines
7.0 KiB
Vue
290 lines
7.0 KiB
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-red':'line-red'" @tap="ChooseCheckbox"
|
||
:data-value="item.value"> {{item.name}}
|
||
<view class="cu-tag sm round" :class="item.checked?'bg-white text-red':'bg-red'"
|
||
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-red 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: "wxc1d226ac9c5bea36",
|
||
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>
|