完善余额功能
This commit is contained in:
@ -8,13 +8,13 @@
|
||||
</view>
|
||||
|
||||
<view class="bg-white wallet-btn u-m-t-24 u-m-l-16 u-m-r-16 row-between br24">
|
||||
<view>
|
||||
<view v-if="wallet.open_racharge == 1">
|
||||
<navigator hover-class="none" url="/pages/recharge/balance" class="row">
|
||||
<u-image :src="cloudPath + 'img/icon_my_wallet.png'" width="56" height="56"></u-image>
|
||||
<text class="u-m-l-18 nr">充值</text>
|
||||
</navigator>
|
||||
</view>
|
||||
<view>
|
||||
<view v-if="wallet.open_racharge == 1">
|
||||
<u-line color="#EEE" direction="col" length="60"/>
|
||||
</view>
|
||||
<view>
|
||||
|
||||
343
pages/payment/payment.vue
Normal file
343
pages/payment/payment.vue
Normal file
@ -0,0 +1,343 @@
|
||||
<template>
|
||||
<view class="payment-pages">
|
||||
<view class="payment u-skeleton">
|
||||
<!-- Header -->
|
||||
<view class="payment-header">
|
||||
<price-format class="u-skeleton-fillet" :subscript-size="40" :first-size="56" :second-size="40"
|
||||
:price="amount" :weight="500" />
|
||||
<template v-if="timeout > 0">
|
||||
<view class="payment-count-down">
|
||||
<text>支付剩余时间</text>
|
||||
<u-count-down :timestamp="timeout" :font-size="22" />
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
|
||||
<!-- Main -->
|
||||
<view class="payment-main">
|
||||
<view class="payway-container u-skeleton-fillet">
|
||||
<!-- Payway -->
|
||||
<u-radio-group v-model="payway" style="width: 100%;">
|
||||
<view class="payway">
|
||||
<view class="payway-item" v-for="(item, index) in paywayList" :key="item.id"
|
||||
@click="changePayway(item.pay_way)">
|
||||
<u-image :src="item.icon" width="48" height="48" mode="scaleToFill" />
|
||||
<view class="payway-item-content">
|
||||
<text class="payway-item-content-name">{{ item.name }}</text>
|
||||
<text class="payway-item-content-tips">{{ item.extra }}</text>
|
||||
</view>
|
||||
<u-radio shape="circle" :name="item.pay_way" :active-color="themeColor" />
|
||||
</view>
|
||||
</view>
|
||||
</u-radio-group>
|
||||
<template v-if="!paywayList.length">
|
||||
<view class="payway-empty">暂无支付方式</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Footer -->
|
||||
<view class="payment-footer u-skeleton-fillet">
|
||||
<view :class="['payment-submit', {'payment-submit--disabled': loadingPay}]" @tap="handlePrepay">
|
||||
<u-loading mode="circle" :show="loadingPay" />
|
||||
<text v-show="!loadingPay">立即支付</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<u-skeleton :loading="loadingSkeleton" :animation="true" bgColor="#FFF" />
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
/**
|
||||
* @description 支付页面
|
||||
* @query {String} from 订单来源: order-商品订单; recharge-充值订单;
|
||||
* @query {Number} order_id 订单ID
|
||||
*/
|
||||
import {prepay, getPayway} from '@/api/app'
|
||||
import {
|
||||
wxpay,
|
||||
alipay
|
||||
} from '@/utils/pay'
|
||||
|
||||
export default {
|
||||
name: 'Payment',
|
||||
data() {
|
||||
return {
|
||||
from: '', // 订单来源
|
||||
order_id: '', // 订单ID
|
||||
amount: 0, // 支付金额
|
||||
timeout: 0, // 倒计时间戳
|
||||
payway: '', // 支付方式
|
||||
paywayList: [], // 支付方式列表
|
||||
|
||||
loadingSkeleton: true, // 骨架屏Loading
|
||||
loadingPay: false, // 支付处理中Loading
|
||||
}
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
const from = options.from
|
||||
const order_id = options.order_id
|
||||
|
||||
try {
|
||||
if (!from && !order_id) throw new Error('页面参数有误')
|
||||
this.from = from
|
||||
this.order_id = order_id
|
||||
this.initPageData()
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
uni.navigateBack()
|
||||
}
|
||||
},
|
||||
|
||||
onUnload() {
|
||||
this.handPayResult('fail')
|
||||
},
|
||||
methods: {
|
||||
// 更改支付方式
|
||||
changePayway(value) {
|
||||
this.$set(this, 'payway', value)
|
||||
},
|
||||
|
||||
// 初始化页面数据
|
||||
initPageData() {
|
||||
// 获取支付方式
|
||||
getPayway({
|
||||
from: this.from,
|
||||
order_id: this.order_id,
|
||||
}).then(res => {
|
||||
if (res.code != 1) throw new Error(res.msg)
|
||||
return res.data
|
||||
}).then(data => {
|
||||
this.loadingSkeleton = false
|
||||
this.amount = data.order_amount
|
||||
this.paywayList = data.pay
|
||||
this.payway = this.paywayList[0]?.pay_way
|
||||
// 倒计时
|
||||
const startTimestamp = new Date().getTime() / 1000
|
||||
const endTimestamp = data.cancel_time * 1
|
||||
this.timeout = endTimestamp - startTimestamp
|
||||
}).catch(err => {
|
||||
throw new Error(err)
|
||||
})
|
||||
},
|
||||
|
||||
// 预支付处理
|
||||
handlePrepay() {
|
||||
if (this.loadingPay) return
|
||||
this.loadingPay = true
|
||||
prepay({
|
||||
from: this.from,
|
||||
order_id: this.order_id,
|
||||
pay_way: this.payway,
|
||||
}).then(({
|
||||
code,
|
||||
data
|
||||
}) => {
|
||||
switch (code) {
|
||||
case 1:
|
||||
this.handleWechatPay(data);
|
||||
break;
|
||||
case 10001:
|
||||
this.handleAlipayPay(data);
|
||||
break;
|
||||
case 20001:
|
||||
this.handleWalletPay();
|
||||
break;
|
||||
}
|
||||
}).catch(err => {
|
||||
|
||||
}).finally(() => {
|
||||
setTimeout(() => {
|
||||
this.loadingPay = false
|
||||
}, 500)
|
||||
})
|
||||
},
|
||||
|
||||
// 微信支付
|
||||
handleWechatPay(data) {
|
||||
wxpay(data).then(res => {
|
||||
console.log("wechat res>>>", res);
|
||||
this.handPayResult(res)
|
||||
})
|
||||
},
|
||||
|
||||
// 支付宝支付
|
||||
handleAlipayPay(data) {
|
||||
alipay(data).then(res => {
|
||||
console.log("alipay res>>>", res);
|
||||
this.handPayResult(res)
|
||||
})
|
||||
},
|
||||
|
||||
// 钱包余额支付
|
||||
handleWalletPay() {
|
||||
console.log('支付成功')
|
||||
//余额支付成功
|
||||
this.handPayResult('success')
|
||||
},
|
||||
|
||||
// 支付后处理
|
||||
handPayResult(result) {
|
||||
switch (result) {
|
||||
case 'success':
|
||||
uni.$emit('payment', {
|
||||
result: true,
|
||||
order_id: this.order_id
|
||||
});
|
||||
break;
|
||||
case 'fail':
|
||||
default:
|
||||
uni.$emit('payment', {
|
||||
result: false,
|
||||
order_id: this.order_id
|
||||
})
|
||||
}
|
||||
// // 页面出栈
|
||||
// uni.showLoading({
|
||||
// title: '加载中',
|
||||
// mask: true
|
||||
// })
|
||||
// //记录支付结果
|
||||
// setTimeout(() => {
|
||||
// uni.hideLoading()
|
||||
// uni.navigateBack()
|
||||
// }, 500)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.payment-pages {
|
||||
height: 100%;
|
||||
|
||||
.payment {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100% - env(safe-area-inset-bottom));
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 300rpx;
|
||||
background: linear-gradient(270deg, #355883 0%, #254062 100%);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
|
||||
&-main {
|
||||
flex: 1;
|
||||
margin-top: -40rpx;
|
||||
padding: 0 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
&-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100rpx;
|
||||
padding: 0 20rpx;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.payway-container {
|
||||
padding: 0 20rpx;
|
||||
border-radius: 7px;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
.payway-empty {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 20rpx 0;
|
||||
font-size: 26rpx;
|
||||
color: $-color-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.payway {
|
||||
width: 100%;
|
||||
|
||||
&-item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 120rpx;
|
||||
|
||||
&:nth-child(n+2) {
|
||||
border-top: $-dashed-border;
|
||||
}
|
||||
|
||||
&-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 16rpx;
|
||||
|
||||
&-name {
|
||||
font-size: 28rpx;
|
||||
color: $-color-black;
|
||||
}
|
||||
|
||||
&-tips {
|
||||
font-size: 22rpx;
|
||||
color: $-color-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-count-down {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 7rpx 25rpx;
|
||||
border-radius: 60px;
|
||||
margin-top: 10rpx;
|
||||
font-size: 22rpx;
|
||||
background-color: #FFFFFF;
|
||||
color: $-color-normal;
|
||||
}
|
||||
|
||||
&-submit {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 74rpx;
|
||||
font-size: 28rpx;
|
||||
border-radius: 60px;
|
||||
background: linear-gradient(270deg, #355883 0%, #254062 100%);
|
||||
color: #FFFFFF;
|
||||
|
||||
&--disabled::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
display: block;
|
||||
content: "";
|
||||
background: rgba(255, 255, 255, .3) !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,179 +1,273 @@
|
||||
<template>
|
||||
<view class="index home-bg" :style="[navBackground]">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent" :enable="true">
|
||||
<u-navbar
|
||||
:border-bottom="false"
|
||||
:is-fixed="false"
|
||||
custom-class="home-bg"
|
||||
:background="navBackground"
|
||||
:is-back="true"
|
||||
backText=" "
|
||||
:title="title"
|
||||
title-color="#fff"
|
||||
backIconColor="#fff"
|
||||
>
|
||||
</u-navbar>
|
||||
</u-sticky>
|
||||
<u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent" :enable="true">
|
||||
<u-navbar :border-bottom="false" :is-fixed="false" custom-class="home-bg" :background="navBackground"
|
||||
:is-back="true" backText=" " :title="title" title-color="#fff" backIconColor="#fff">
|
||||
</u-navbar>
|
||||
</u-sticky>
|
||||
<!-- #endif -->
|
||||
|
||||
|
||||
<view class="row-center balance" :style="{paddingTop: topSpace + 'px'}">
|
||||
|
||||
<view class="row-center balance" :style="{ paddingTop: topSpace + 'px' }">
|
||||
<view class="u-text-center w-full">
|
||||
<view class="text-fff" style="font-size: 96rpx;">0</view>
|
||||
<view class="text-fff" style="font-size: 96rpx;">{{ userInfo.user_money }}</view>
|
||||
<view class="text-fff nr">充值余额</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="content u-relative u-m-l-32 u-m-r-32" style="margin-top: 132rpx;">
|
||||
<view class="input row-center br16">
|
||||
<view class="input-money">
|
||||
<u-input placeholder="输入金额: 0" placeholder-style="color: #254062;" :custom-style="{backgroundColor: 'transparent'}" input-align="center"/>
|
||||
<view class="input-money">
|
||||
<u-input v-model="number" placeholder="输入金额: 0" placeholder-style="color: #254062;"
|
||||
:custom-style="{ backgroundColor: 'transparent' }" input-align="center" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-38">
|
||||
|
||||
<view class="u-m-t-38" v-if="rechargeTemplate.length > 0">
|
||||
<view class="sm u-m-b-20 bold-400">选择充值套餐</view>
|
||||
<view class="grid-container">
|
||||
<view :class="['item', {'active': selectIndex === 0}]">
|
||||
<!-- <view :class="['item', {'active': selectIndex === 0}]" v-for="(item, index) in rechargeTemplate" :key="index"> -->
|
||||
<view class="item active" v-for="(item, index) in rechargeTemplate" :key="index"
|
||||
@tap="rechargeFun({ id: item.id })">
|
||||
<view class="xs text-666">充值</view>
|
||||
<view class="text-333 md u-m-t-4">￥5</view>
|
||||
<view class="text-666 xxs u-m-t-2">赠送11元</view>
|
||||
<view class="text-333 md u-m-t-4">￥{{ item.money }}</view>
|
||||
<view class="text-666 xxs u-m-t-2">赠送{{ item.give_money }}元</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="u-m-t-56">
|
||||
<view class="sm u-m-b-20 bold-400">加赠券 价值10元</view>
|
||||
<view class="grid-container u-m-t-18">
|
||||
<view class="coupon u-text-center">
|
||||
<view class="sm text-666">赠券1张</view>
|
||||
<view class="text-333 md u-m-t-28">
|
||||
<price-format color="#FF0000" :price="10" :subscriptSize="22" :firstSize="52"></price-format>
|
||||
<price-format color="#FF0000" :price="10" :subscriptSize="22"
|
||||
:firstSize="52"></price-format>
|
||||
</view>
|
||||
<view class="text-666 sm u-m-t-30">满10元可用</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="u-m-t-70 u-p-10">
|
||||
<view class="sm u-m-b-20 bold-400">充值说明</view>
|
||||
<view class="text-999">1. 账户充值仅限在线方式支付，充值金额实时到账；</view>
|
||||
<view class="text-999">2. 有问题请联系客服；</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="u-m-t-42 u-p-b-20">
|
||||
<u-button @click="mpLogin" hover-class="none" :customStyle="{height: '76rpx', backgroundColor: themeColor, color: '#fff', border: 'none', borderRadius: '100rpx'}" :hair-line="false">立即充值</u-button>
|
||||
<u-button @click="rechargeNow" hover-class="none"
|
||||
:customStyle="{ height: '76rpx', backgroundColor: themeColor, color: '#fff', border: 'none', borderRadius: '100rpx' }"
|
||||
:hair-line="false">立即充值</u-button>
|
||||
</view>
|
||||
</view>
|
||||
<u-popup class="pay-popup" v-model="showPopup" closeable round mode="center">
|
||||
<view class="content bg-white">
|
||||
<image class="img-icon" :src="`${cloudPath}img/icon_paySuccess.png`"></image>
|
||||
<view class="xxl bold mt10">充值成功</view>
|
||||
<view v-if="rechargeInfo.give_integral || rechargeInfo.give_growth" class="lg u-mt-50">
|
||||
恭喜您获得
|
||||
<text>
|
||||
<text class="primary" v-if="rechargeInfo.give_integral">{{ rechargeInfo.give_integral }}</text>
|
||||
积分
|
||||
</text>
|
||||
<text v-if="rechargeInfo.give_growth"> + <text
|
||||
class="primary">{{ rechargeInfo.give_growth }}</text>成长值</text>
|
||||
</view>
|
||||
<u-button class="btn" @tap="onShowPopup" hover-class="none"
|
||||
:customStyle="{ backgroundColor: themeColor, color: '#fff', border: 'none', borderRadius: '60rpx' }"
|
||||
:hair-line="false">好的</u-button>
|
||||
</view>
|
||||
</u-popup>
|
||||
<loading-view id="van-toast" v-if="showLoading" backgroundColor="rgba(0, 0, 0, 0)"></loading-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: '充值余额',
|
||||
statusBarHeight: 0, // 状态栏高度
|
||||
bgImageHeight: 244 ,// 背景图高度，单位px，根据实际情况调整
|
||||
selectIndex: 0,
|
||||
backText: '',
|
||||
topSpace: 0
|
||||
}
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
this.statusBarHeight = systemInfo.statusBarHeight
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
this.topSpace = (80 - this.statusBarHeight)
|
||||
// #endif
|
||||
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
this.topSpace = (80 + 44)
|
||||
// #endif
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 跳转个人信息
|
||||
toProfile() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/my/profile'
|
||||
})
|
||||
import { rechargeTemplate, recharge, getUser } from '@/api/user';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: '充值余额',
|
||||
statusBarHeight: 0, // 状态栏高度
|
||||
bgImageHeight: 244,// 背景图高度，单位px，根据实际情况调整
|
||||
selectIndex: 0,
|
||||
topSpace: 0,
|
||||
rechargeTemplate: [],
|
||||
userInfo: {
|
||||
user_money: 0 // Provide a default value to avoid undefined
|
||||
},
|
||||
showLoading: false,
|
||||
showPopup: false,
|
||||
rechargeInfo: {},
|
||||
number: '', // 输入金额
|
||||
}
|
||||
},
|
||||
|
||||
// 跳转我的钱包
|
||||
toWallet() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/my/wallet'
|
||||
})
|
||||
onLoad() {
|
||||
uni.$on('payment', params => {
|
||||
if (params.result) {
|
||||
this.onShowPopup()
|
||||
this.getUserInfoFun()
|
||||
uni.navigateBack()
|
||||
}
|
||||
})
|
||||
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
this.statusBarHeight = systemInfo.statusBarHeight
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
this.topSpace = (80 - this.statusBarHeight)
|
||||
// #endif
|
||||
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
this.topSpace = (80 + 44)
|
||||
// #endif
|
||||
|
||||
this.rechargeTemplateFun();
|
||||
this.getUserInfoFun();
|
||||
},
|
||||
|
||||
onUnload() {
|
||||
uni.$off('payment')
|
||||
},
|
||||
|
||||
methods: {
|
||||
onShowPopup() {
|
||||
this.showPopup = !this.showPopup
|
||||
},
|
||||
computed: {
|
||||
navBackground() {
|
||||
return {
|
||||
'background-image': `url(${this.cloudPath}img/icon_recharge_bg.png)`
|
||||
|
||||
// 获取充值模板列表
|
||||
rechargeTemplateFun() {
|
||||
rechargeTemplate().then(res => {
|
||||
if (res.code == 1) {
|
||||
this.rechargeTemplate = res.data
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 获取用户信息
|
||||
getUserInfoFun() {
|
||||
getUser().then(res => {
|
||||
if (res.code == 1) {
|
||||
this.userInfo = res.data
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
rechargeNow() {
|
||||
const {number} = this
|
||||
console.log("number>>>", number);
|
||||
|
||||
this.rechargeFun({
|
||||
money: Number(number)
|
||||
});
|
||||
},
|
||||
|
||||
// 充值
|
||||
rechargeFun(obj) {
|
||||
this.showLoading = true
|
||||
|
||||
recharge(obj).then(({ code, data, msg }) => {
|
||||
if (code != 1) throw new Error(msg)
|
||||
|
||||
this.rechargeInfo = data
|
||||
uni.navigateTo({
|
||||
url: `/pages/recharge/recharge?from=${'recharge'}&order_id=${data.id}`
|
||||
})
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
}).finally(() => {
|
||||
this.showLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
},
|
||||
computed: {
|
||||
navBackground() {
|
||||
return {
|
||||
'background-image': `url(${this.cloudPath}img/icon_recharge_bg.png)`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #fff;
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.index {
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
.home-bg {
|
||||
background: url(#{$cloudPath}img/icon_recharge_bg.png) no-repeat;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
.input {
|
||||
height: 124rpx;
|
||||
background: #D3E0F1;
|
||||
border: 2rpx solid #254062;
|
||||
}
|
||||
|
||||
.input-money {
|
||||
width: 180rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 209rpx;
|
||||
height: 155rpx;
|
||||
background: #F5F5F5;
|
||||
border: 1rpx solid #F5F5F5;
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
padding: 20rpx 20rpx 12rpx 20rpx;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: #F3F8FF;
|
||||
border: 1rpx solid #254062;
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
.coupon {
|
||||
width: 207rpx;
|
||||
height: 196rpx;
|
||||
background: url(#{$cloudPath}img/coupon_bg1.png) no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
&>view:first-child {
|
||||
color: #845F2E;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.index {
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
.pay-popup {
|
||||
.content {
|
||||
padding: 40rpx 0;
|
||||
text-align: center;
|
||||
width: 560rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.home-bg {
|
||||
background: url(#{$cloudPath}img/icon_recharge_bg.png) no-repeat;
|
||||
background-size: 100% auto;
|
||||
|
||||
.img-icon {
|
||||
width: 168rpx;
|
||||
height: 168rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.input {
|
||||
height: 124rpx;
|
||||
background: #D3E0F1;
|
||||
border: 2rpx solid #254062;
|
||||
}
|
||||
|
||||
.input-money {
|
||||
width: 180rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 209rpx;
|
||||
height: 155rpx;
|
||||
background: #F5F5F5;
|
||||
border: 1rpx solid #F5F5F5;
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
padding: 20rpx 20rpx 12rpx 20rpx;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: #F3F8FF;
|
||||
border: 1rpx solid #254062;
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
.coupon {
|
||||
width: 207rpx;
|
||||
height: 196rpx;
|
||||
background: url(#{$cloudPath}img/coupon_bg1.png) no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
& > view:first-child {
|
||||
color: #845F2E;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: 80rpx 60rpx 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -3,66 +3,199 @@
|
||||
<view class="bg-white u-m-32 u-p-32 br16 block">
|
||||
<view class="nr">充值金额</view>
|
||||
<view class="u-m-t-16">
|
||||
<text class="price">5.0</text>
|
||||
<text class="price">{{ amount }}</text>
|
||||
<text class="bold-400 nr u-m-l-16">元</text>
|
||||
</view>
|
||||
<view class="u-m-t-32 xs">
|
||||
<text class="recharge">充值金额：</text>
|
||||
<text>5元</text>
|
||||
<text>{{amount}}元</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bg-white u-m-32 u-p-32 br16 block">
|
||||
<view class="bg-white u-m-32 u-p-32 br16 block payment">
|
||||
<view class="nr">选择支付方式</view>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="row-between u-m-t-32">
|
||||
<view class="row-center">
|
||||
<u-icon name="weixin-circle-fill" color="#28C445" size="80"></u-icon>
|
||||
<view class="u-m-l-16 lg">微信</view>
|
||||
</view>
|
||||
|
||||
<view class="flex1 row-end">
|
||||
<u-radio-group v-model="pay.weixin">
|
||||
<u-radio shape="circle" :active-color="themeColor"></u-radio>
|
||||
|
||||
<view class="payment-main">
|
||||
<view class="payway-container u-skeleton-fillet">
|
||||
<!-- Payway -->
|
||||
<u-radio-group v-model="payway" style="width: 100%;">
|
||||
<view class="payway">
|
||||
<view class="payway-item" v-for="(item, index) in paywayList" :key="item.id"
|
||||
@click="changePayway(item.pay_way)">
|
||||
<u-image :src="item.icon" width="48" height="48" mode="scaleToFill" />
|
||||
<view class="payway-item-content">
|
||||
<text class="payway-item-content-name">{{ item.name }}</text>
|
||||
<text class="payway-item-content-tips">{{ item.extra }}</text>
|
||||
</view>
|
||||
<u-radio shape="circle" :name="item.pay_way" :active-color="themeColor" />
|
||||
</view>
|
||||
</view>
|
||||
</u-radio-group>
|
||||
<template v-if="!paywayList.length">
|
||||
<view class="payway-empty">暂无支付方式</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-ALIPAY -->
|
||||
<view class="row-between u-m-t-32">
|
||||
<view class="row-center">
|
||||
<u-icon name="zhifubao-circle-fill" color="#1477FE" size="80"></u-icon>
|
||||
<view class="u-m-l-16 lg">支付宝</view>
|
||||
</view>
|
||||
|
||||
<view class="flex1 row-end">
|
||||
<u-radio-group v-model="pay.alipay">
|
||||
<u-radio shape="circle" :active-color="themeColor"></u-radio>
|
||||
</u-radio-group>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
|
||||
<view class="fixed left-0 right-0 bottom-0 u-m-64">
|
||||
<u-button @click="pay" hover-class="none" :customStyle="{height: '76rpx', backgroundColor: themeColor, color: '#fff', border: 'none', borderRadius: '100rpx'}" :hair-line="false">立即支付</u-button>
|
||||
<u-button @click="handlePrepay" hover-class="none" :customStyle="{height: '76rpx', backgroundColor: themeColor, color: '#fff', border: 'none', borderRadius: '100rpx'}" :hair-line="false">立即支付</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {prepay, getPayway} from '@/api/app'
|
||||
import {
|
||||
wxpay,
|
||||
alipay
|
||||
} from '@/utils/pay'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pay: {
|
||||
weixin: 0,
|
||||
alipay: 0
|
||||
}
|
||||
},
|
||||
from: '', // 订单来源
|
||||
order_id: '', // 订单ID
|
||||
amount: 0, // 支付金额
|
||||
timeout: 0, // 倒计时间戳
|
||||
payway: '', // 支付方式
|
||||
paywayList: [], // 支付方式列表
|
||||
}
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
const from = options.from
|
||||
const order_id = options.order_id
|
||||
|
||||
try {
|
||||
if (!from && !order_id) throw new Error('页面参数有误')
|
||||
this.from = from
|
||||
this.order_id = order_id
|
||||
this.initPageData()
|
||||
} catch (err) {
|
||||
console.log(err)
|
||||
uni.navigateBack()
|
||||
}
|
||||
},
|
||||
|
||||
onUnload() {
|
||||
this.handPayResult('fail')
|
||||
},
|
||||
|
||||
methods: {
|
||||
pay() {
|
||||
|
||||
// 更改支付方式
|
||||
changePayway(value) {
|
||||
this.$set(this, 'payway', value)
|
||||
},
|
||||
|
||||
// 初始化页面数据
|
||||
initPageData() {
|
||||
// 获取支付方式
|
||||
getPayway({
|
||||
from: this.from,
|
||||
order_id: this.order_id,
|
||||
}).then(res => {
|
||||
if (res.code != 1) throw new Error(res.msg)
|
||||
return res.data
|
||||
}).then(data => {
|
||||
this.loadingSkeleton = false
|
||||
this.amount = data.order_amount
|
||||
this.paywayList = data.pay
|
||||
this.payway = this.paywayList[0]?.pay_way
|
||||
// 倒计时
|
||||
const startTimestamp = new Date().getTime() / 1000
|
||||
const endTimestamp = data.cancel_time * 1
|
||||
this.timeout = endTimestamp - startTimestamp
|
||||
}).catch(err => {
|
||||
throw new Error(err)
|
||||
})
|
||||
},
|
||||
|
||||
// 预支付处理
|
||||
handlePrepay() {
|
||||
if (this.loadingPay) return
|
||||
this.loadingPay = true
|
||||
prepay({
|
||||
from: this.from,
|
||||
order_id: this.order_id,
|
||||
pay_way: this.payway,
|
||||
}).then(({
|
||||
code,
|
||||
data
|
||||
}) => {
|
||||
switch (code) {
|
||||
case 1:
|
||||
this.handleWechatPay(data);
|
||||
break;
|
||||
case 10001:
|
||||
this.handleAlipayPay(data);
|
||||
break;
|
||||
case 20001:
|
||||
this.handleWalletPay();
|
||||
break;
|
||||
}
|
||||
}).catch(err => {
|
||||
|
||||
}).finally(() => {
|
||||
setTimeout(() => {
|
||||
this.loadingPay = false
|
||||
}, 500)
|
||||
})
|
||||
},
|
||||
|
||||
// 微信支付
|
||||
handleWechatPay(data) {
|
||||
wxpay(data).then(res => {
|
||||
console.log("wechat res>>>", res);
|
||||
this.handPayResult(res)
|
||||
})
|
||||
},
|
||||
|
||||
// 支付宝支付
|
||||
handleAlipayPay(data) {
|
||||
alipay(data).then(res => {
|
||||
console.log("alipay res>>>", res);
|
||||
this.handPayResult(res)
|
||||
})
|
||||
},
|
||||
|
||||
// 钱包余额支付
|
||||
handleWalletPay() {
|
||||
console.log('支付成功')
|
||||
//余额支付成功
|
||||
this.handPayResult('success')
|
||||
},
|
||||
|
||||
// 支付后处理
|
||||
handPayResult(result) {
|
||||
switch (result) {
|
||||
case 'success':
|
||||
uni.$emit('payment', {
|
||||
result: true,
|
||||
order_id: this.order_id
|
||||
});
|
||||
break;
|
||||
case 'fail':
|
||||
default:
|
||||
uni.$emit('payment', {
|
||||
result: false,
|
||||
order_id: this.order_id
|
||||
})
|
||||
}
|
||||
// // 页面出栈
|
||||
// uni.showLoading({
|
||||
// title: '加载中',
|
||||
// mask: true
|
||||
// })
|
||||
// //记录支付结果
|
||||
// setTimeout(() => {
|
||||
// uni.hideLoading()
|
||||
// uni.navigateBack()
|
||||
// }, 500)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -84,4 +217,118 @@
|
||||
.recharge {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.payment {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100% - env(safe-area-inset-bottom));
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 300rpx;
|
||||
background: linear-gradient(270deg, #355883 0%, #254062 100%);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
|
||||
&-main {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
&-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100rpx;
|
||||
padding: 0 20rpx;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.payway-container {
|
||||
border-radius: 7px;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
.payway-empty {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 20rpx 0;
|
||||
font-size: 26rpx;
|
||||
color: $-color-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.payway {
|
||||
width: 100%;
|
||||
|
||||
&-item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 120rpx;
|
||||
|
||||
&:nth-child(n+2) {
|
||||
border-top: $-dashed-border;
|
||||
}
|
||||
|
||||
&-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 16rpx;
|
||||
|
||||
&-name {
|
||||
font-size: 28rpx;
|
||||
color: $-color-black;
|
||||
}
|
||||
|
||||
&-tips {
|
||||
font-size: 22rpx;
|
||||
color: $-color-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-count-down {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 7rpx 25rpx;
|
||||
border-radius: 60px;
|
||||
margin-top: 10rpx;
|
||||
font-size: 22rpx;
|
||||
background-color: #FFFFFF;
|
||||
color: $-color-normal;
|
||||
}
|
||||
|
||||
&-submit {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 74rpx;
|
||||
font-size: 28rpx;
|
||||
border-radius: 60px;
|
||||
background: linear-gradient(270deg, #355883 0%, #254062 100%);
|
||||
color: #FFFFFF;
|
||||
|
||||
&--disabled::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
display: block;
|
||||
content: "";
|
||||
background: rgba(255, 255, 255, .3) !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user