Bootstrap

uniapp支付功能实现

<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>
;