You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
289 lines
7.1 KiB
289 lines
7.1 KiB
<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: "wx7a939c19b270cc3d", |
|
rechargeSource: 'WECHAT_APPETS', |
|
rechargeAmount: this.reChargeMoney + '', |
|
createSource: 'XOIL_DRIVER_COMPANY_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>
|
|
|