274 lines
6.1 KiB
Vue
274 lines
6.1 KiB
Vue
<template>
|
||
<view class="we_chat_pay">
|
||
<nav-bar title="支付"></nav-bar>
|
||
<!-- 支付订单信息 -->
|
||
<view class="pay_info_box">
|
||
<view class="title">订单编号：{{ orderNo }}</view>
|
||
<view class="price_box">
|
||
<view class="price">
|
||
￥
|
||
<text>{{ price }}</text>
|
||
</view>
|
||
<view class="name">{{ title }}</view>
|
||
</view>
|
||
</view>
|
||
<!-- 支付方式 -->
|
||
<view class="pay_pattern">
|
||
<text class="tip">请选择支付方式</text>
|
||
<view class="pay_box" @click="payType = 'wxpay'">
|
||
<view class="icon">
|
||
<image src="../../static/icon/wechat.png" mode="aspectFit"></image>
|
||
<view>微信</view>
|
||
</view>
|
||
<view class="btn">
|
||
<image v-if="payType == 'wxpay'" src="../../static/icon/ic_agreed.png" mode="aspectFit"></image>
|
||
<image v-else src="../../static/icon/icon_weixuanzhong.png" mode="aspectFit"></image>
|
||
</view>
|
||
</view>
|
||
<!-- #ifndef H5 -->
|
||
<view class="pay_box" @click="payType = 'alipay'">
|
||
<view class="icon">
|
||
<image src="../../static/demo/zhifubao.png" mode="aspectFit"></image>
|
||
<view>支付宝</view>
|
||
</view>
|
||
<view class="btn">
|
||
<image v-if="payType == 'alipay'" src="../../static/icon/ic_agreed.png" mode="aspectFit"></image>
|
||
<image v-else src="../../static/icon/icon_weixuanzhong.png" mode="aspectFit"></image>
|
||
</view>
|
||
</view>
|
||
<!-- #endif -->
|
||
<view class="pay_box" @click="onBalanceSelect">
|
||
<view class="icon">
|
||
<image src="../../static/demo/icon_yue.png" mode="aspectFit"></image>
|
||
<view>余额支付（可用余额：{{ balanceInfo.freeMoney }}）</view>
|
||
</view>
|
||
<view class="btn">
|
||
<image v-if="payType == 'balance'" src="../../static/icon/ic_agreed.png" mode="aspectFit"></image>
|
||
<image v-else src="../../static/icon/icon_weixuanzhong.png" mode="aspectFit"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 支付按钮 -->
|
||
<view class="pay_btn" @click="onPay">
|
||
<button>确定支付￥{{ price }}</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// #ifdef H5
|
||
import { weiXinPay } from '@/config/html5Utils';
|
||
// #endif
|
||
import { setPay } from '@/config/utils';
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 选择微信支付
|
||
payType: "wxpay",
|
||
// 订单号
|
||
orderNo: '',
|
||
// 商店名称
|
||
title: '',
|
||
// 订单总价
|
||
price: '',
|
||
balanceInfo:{
|
||
freeMoney:0
|
||
}
|
||
};
|
||
},
|
||
onLoad(e) {
|
||
this.orderNo = e.orderNo;
|
||
this.title = e.title;
|
||
this.price = e.price;
|
||
this.pageData();
|
||
},
|
||
methods: {
|
||
onBalanceSelect(){
|
||
if(this.price <= this.balanceInfo.freeMoney){
|
||
this.payType = 'balance';
|
||
}else{
|
||
uni.showToast({
|
||
title: '余额不足支付该订单',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
pageData(){
|
||
this.$http
|
||
.get('api/mime/wallet/v1/info')
|
||
.then(res => {
|
||
this.balanceInfo = res;
|
||
});
|
||
},
|
||
// 支付
|
||
onPay() {
|
||
if(this.payType == "balance"){
|
||
this.$http
|
||
.get('api/pay/v1/balance_pay',{ orderNo: this.orderNo})
|
||
.then(res => {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '支付成功',
|
||
showCancel:false,
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.redirectTo({
|
||
url: "/pages/shopCar/paySuccess?orderNo="+this.orderNo
|
||
});
|
||
}
|
||
}
|
||
});
|
||
});
|
||
}else{
|
||
// #ifdef H5
|
||
if(this.payType == "wxpay"){
|
||
this.$http.get('api/pay/v1/public_pay_sign_wx', { orderNo: this.orderNo }).then(res => {
|
||
weiXinPay(res,() => {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '支付成功',
|
||
showCancel:false,
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.redirectTo({
|
||
url: "/pages/shopCar/paySuccess?orderNo="+this.orderNo
|
||
});
|
||
}
|
||
}
|
||
});
|
||
});
|
||
});
|
||
}
|
||
// #endif
|
||
// #ifdef APP-PLUS
|
||
setPay({
|
||
orderNo: this.orderNo,
|
||
type: this.payType
|
||
},res => {
|
||
if(res.success){
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '支付成功',
|
||
showCancel:false,
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.redirectTo({
|
||
url: "/pages/shopCar/paySuccess?orderNo="+this.orderNo
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}else{
|
||
uni.showToast({
|
||
title:'支付失败',
|
||
icon:"none"
|
||
});
|
||
}
|
||
});
|
||
// #endif
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '@/style/mixin.scss';
|
||
.we_chat_pay {
|
||
padding: 20rpx 30rpx;
|
||
.pay_info_box {
|
||
background-image: url('../../static/demo/card_bg.png');
|
||
background-position: center bottom;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
// border-radius: 40rpx;
|
||
background-color: rgba(0, 0, 0, 0.06);
|
||
box-shadow: 0rpx 20rpx 30rpx 0rpx rgba(0, 0, 0, 0.06);
|
||
padding: 0 30rpx;
|
||
.title {
|
||
padding: 25rpx 0;
|
||
border-bottom: 1rpx dashed #cccccc;
|
||
font-size: 26rpx;
|
||
color: #999999;
|
||
}
|
||
.price_box {
|
||
height: 240rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
.price {
|
||
font-size: 36rpx;
|
||
color: #ff5d32;
|
||
> text {
|
||
font-size: 72rpx;
|
||
color: #ff5d32;
|
||
}
|
||
}
|
||
.name {
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
|
||
.pay_pattern {
|
||
margin-top: 50rpx;
|
||
.tip {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
.pay_box {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 6rpx;
|
||
margin-top: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 30rpx;
|
||
.icon {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
> image {
|
||
width: 50rpx;
|
||
height: 41rpx;
|
||
}
|
||
> view {
|
||
margin-left: 30rpx;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
.btn {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
image {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.pay_btn {
|
||
width: 100%;
|
||
> button {
|
||
position: fixed;
|
||
left: 30rpx;
|
||
right: 30rpx;
|
||
bottom: 30rpx;
|
||
height: 88rpx;
|
||
background-color: $themeColor;
|
||
background-blend-mode: normal, normal;
|
||
border-radius: 6rpx;
|
||
color: #ffffff;
|
||
font-size: 32rpx;
|
||
line-height: 88rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
</style>
|