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.
290 lines
7.1 KiB
290 lines
7.1 KiB
2 years ago
|
<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>
|