<template>
<view class="pageContainer">
<u-navbar :title="$t('支付费用')" :autoBack="true" ></u-navbar>
<view class="flex flexColumn flexAiCenter mt20">
<u-text color="#999999" :text="$t('需支付')" align="center"></u-text>
<view class="price">¥{{price}}</view>
</view>
<!-- <view class="cellsBox">
<u-cell-group :border="false">
<template v-for="item in rechargeTypes">
<u-cell :title="item.name" :icon="item.ico" :label="item.info" :iconStyle="style.icon"></u-cell>
</template>
</u-cell-group>
</view> -->
<view class="detail flexColumn flexJcCenter">
<view class="title">{{$t('请选择支付方式')}}</view>
<view class="flexColumn">
<view class="type-row" v-for="(item,index) in rechargeTypes" :key="`type_${index}`" @click="select(item)"
:class="{'disabled': item.disabled}">
<view class="type-row-name">
<u-icon :name="item.ico" size="24"></u-icon>
<text>{{item.name}}</text>
<text class="info" v-if="item.info">({{item.info}})</text>
</view>
<view v-if="typeChosed == item.code">
<u-icon name="/static/icon/selected.png" size="24"></u-icon>
</view>
</view>
</view>
<view class="">
<u-button :text="$t('立即支付')" shape="circle" class="colorsButton" @click="startPayment"></u-button>
</view>
</view>
<lyy-pass-input ref="passInput" :title="$t('支付金额')" :money="parseInt(price)" @confirm="confirm" @close="close">
</lyy-pass-input>
</view>
</template>
<script>
export default {
data() {
return {
rechargeTypes:[],
orderNo:'',
price:'',
isApp: false,
style:{
icon:{
width:"50rpx",
height:"50rpx"
}
},
typeChosed:'',
paymentPassword:null,
};
},
onLoad(option) {
this.orderNo = option.no;
this.price = option.price;
// #ifdef APP-PLUS
this.isApp = true
// #endif
this.getRechargeTypes()
},
methods:{
// 确认支付
confirm(e){
this.$refs.passInput.close();
this.paymentPassword = e.pass;
this.startPayment();
this.paymentPassword=null;
},
close(){
this.paymentPassword=null;
},
select(item) {
if (item.disabled) return false;
this.typeChosed = item.code;
},
getRechargeTypes(){
this.$axios.post(`/user/rechargeTypes`,{orderNo:this.orderNo,isApp: this.isApp}).then(res=>{
this.rechargeTypes = res.data;
})
},
startPayment() {
if (!this.orderNo) {
uni.$u.toast(this.$t('订单号为空'))
return false;
}
if (!this.typeChosed) {
uni.$u.toast(this.$t('请选择一个支付方式'))
return false;
}
let obj = {
type: this.typeChosed,
orderNo: this.orderNo
}
if(this.typeChosed == "legal" ){
if(!getApp().globalData.loginUserInfo.hasSetWithdrawalPassword){
uni.$u.toast(this.$t('请先设置您的支付密码'));
setTimeout(()=>{
uni.navigateTo({
url: '/pages/my/securityPassword?type=0'
})
},2000)
return false;
}
if(!this.paymentPassword){
this.$refs.passInput.open();
return;
}else
obj.payPassword = this.paymentPassword;
}
this.$axios.post(`/user/doPayment`, obj).then(res => {
this.paymentPassword=null;
if (res.data.type === 'balance') {
uni.$u.toast(res.data.res)
// this.$u.$parent.call(this).callAnimation(res.data.items);
setTimeout(() => {
// uni.$u.$parent.call(this).loadSeries();
this.$utils.getUserInfo((res => {
getApp().globalData.loginUserInfo = res;
}))
uni.redirectTo({
url: '/pages/my/pictures',
animationType:"slide-in-right",
animationDuration: 200
})
}, 1e3)
// this.close();
}
if (res.data.payUrl) {
//#ifdef H5
let platform = uni.getSystemInfoSync().platform
if (platform == 'ios') {
location.href = res.data.payUrl;
} else {
open(res.data.payUrl)
}
//#endif
//#ifdef APP-PLUS
plus.runtime.openURL(res.data.payUrl)
// this.close();
this.$utils.showConfirmEx(this.$t('请在打开的页面中支付'), this.$t('我已完成支付'), this.$t('取消支付'), (e) => {
if (e) {
// uni.switchTab({
// url: '/pages/my/my'
// });
this.$axios.post(`/user/rechargeStatus`, {
order: this.orderNo
}).then(res => {
if (res.status == 1) {
let items = res.items;
console.log(item)
}
});
}
})
//#endif
}
})
}
}
}
</script>
<style lang="scss">
.price {
margin-top: 32rpx;
font-size: 70rpx;
font-weight: 600 ;
}
.detail {
margin-top: 102rpx;
min-width: 280px;
background: #222;
padding: 20px;
border-radius: 30rpx;
.title {
padding: 20rpx 0;
font-size: 18px;
width: 100%;
text-align: center;
border-bottom: #36364c 1px solid;
}
.type-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
font-size: 14px;
&-name {
display: flex;
align-items: center;
text {
margin-left: 10rpx;
}
.info {
color: #666;
font-size: 12px;
}
}
}
.type-row.disabled {
color: #666;
text-decoration: line-through;
}
.colorsButton {
margin-top: 20px;
}
}
</style>