12121
This commit is contained in:
caolc
289
BagMoney/pages/reCharge/reCharge.vue
Normal file
289
BagMoney/pages/reCharge/reCharge.vue
Normal file
@@ -0,0 +1,289 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user