1、微信支付和支付宝支付

先上代码、封装好了的组件

html部分

<template>
    <view class="rows">
        <!------------------------------充值的弹框开始------------------------------>
        <uni-popup class="common-popup" ref="popupChongZhi" :is-mask-click="false" type="bottom">
            <uni-icons class="close" type="closeempty" @click="$refs.popupChongZhi.close()"></uni-icons>
            <text class="popup-title">充值</text>
            <view class="czlist">
                <view v-for="(item,index) in balan" :class="{ 'activeCss': active == index }"
                    @click="activeHandler(index)">
                    <text class="em-price">{{ item.tmdNumber }}</text>
                    <text>¥{{systemStyle?item.goodsPriceAndroid:item.goodsPriceIos }}</text>
                </view>
            </view>
            <view class="yue">余额：<text class="em-price">{{ userInfo.accountBalance + userInfo.giftBalance }}</text>
            </view>
            <view class="xieyi">充值即同意<navigator url="/pages/other/agreement?agremType=3">《充值协议》</navigator>
            </view>
            <button @click="iosAndAndroid" :disabled="btnloading">充值</button>
        </uni-popup>
        <!------------------------------充值的弹框结束------------------------------>
        <!-- 选择充值方式 -->
        <uni-popup class="common-popup" ref="modeOfPayment" :is-mask-click="false" type="bottom">
            <uni-icons class="close" type="closeempty" @click="$refs.modeOfPayment.close()"></uni-icons>
            <text class="popup-title">选择充值方式</text>
            <view class="wxZfb">
                <radio-group @change="radioChange">
                    <label class="uni-list-cell uni-list-cell-pd">
                        <view class="radioBox">
                            <image src="@/static/img/common/wx.png" mode="aspectFill" />
                            <view>微信支付</view>
                            <radio value="WXPAY" :checked="true" color="#B48732" />
                        </view>
                    </label>
                    <label class="uni-list-cell uni-list-cell-pd zfb">
                        <view class="radioBox">
                            <image src="@/static/img/common/zfb.png" mode="aspectFill" />
                            <view>支付宝支付</view>
                            <radio value="ALIPAY" color="#B48732" />
                        </view>
                    </label>
                </radio-group>
                <button @click="ontopThat">立即支付</button>
            </view>
        </uni-popup>
        <!-- 主动查询订单状态 -->
        <uni-popup class="common-popup" ref="inquire" :is-mask-click="false" type="center">
            <text class="popup-title">是否支付完成</text>
            <button :disabled="btnloading" @click='inquireHandler'>已支付</button>
            <button :disabled="btnloading" class="wzf" @click="$refs.inquire.close()">未支付</button>
        </uni-popup>
    </view>
</template>

css部分：

<style scoped>
    .wxZfb image {
        width: 56rpx;
        height: 56rpx;
    }

    .wxZfb .radioBox {
        display: flex;
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.8);
        align-items: center;
        padding: 32rpx 0;
        border-bottom: 1rpx solid #EEEEEE;
    }

    .wxZfb .radioBox view {
        margin-left: 24rpx;
    }

    .wxZfb .radioBox radio {
        flex: 1;
        text-align: right;
    }

    .wxZfb .radioBox:nth-last-child(1) {
        padding-bottom: 78rpx;
    }

    .common-popup .wzf {
        background: transparent;
        color: #000;
        border: 1px solid #ccc;
    }
</style>
/*-------下面这段有多余其它代码需要筛除--------*/
/*------------------------------充值的弹框开始------------------------------*/
.common-popup {
    background: #fff!important;
}
.czlist .activeCss {
    border-color: #B48732
}
/deep/.uni-popup__wrapper.bottom{
    background-color: #fff!important;
}
.common-popup/deep/ .uni-popup__wrapper{
    width: auto;
    padding: 32rpx 40rpx 40rpx;
}
.popup-title{
    margin-bottom: 0;
    line-height: 56rpx;
    font-size: 40rpx;
    font-weight: 500;
}
.czlist{
    display: flex;
    flex-wrap: wrap;
    margin-top: 32rpx;
}
.czlist>view{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 210rpx;
    height: 150rpx;
    border: 2rpx solid rgba(180, 135, 50, .06);
    margin-left: 20rpx;
    border-radius: 16rpx;
    background-color: rgba(180, 135, 50, .06);
}
.czlist>view:nth-child(3n-2){margin-left: 0}
.czlist>view:nth-child(3n)~view{margin-top: 20rpx}
.czlist>view.active{border-color: #B48732}
.czlist>view .em-price{
    display: flex;
    font-size: 36rpx;
}
.czlist>view .em-price:before{
    width: 32rpx;
    height: 32rpx;
    margin-right: 8rpx;
    line-height: 32rpx;
}
.czlist>view text:nth-child(2){
    margin-top: 22rpx;
    line-height: 24rpx;
    font-size: 24rpx;
    color: rgba(0,0,0,0.2);
}
.yue{
    display: flex;
    align-items: center;
    margin-top: 56rpx;
    line-height: 40rpx;
    font-size: 28rpx;
}
.yue .em-price{
    display: flex;
    font-size: 32rpx;
}
.yue .em-price:before{
    width: 28rpx;
    height: 28rpx;
}
.xieyi{
    display: flex;
    margin-top: 32rpx;
    font-size: 24rpx;
    color: rgba(0,0,0,0.2);
    align-items: center;
    justify-content: center;
}
.xieyi navigator{color: #5A4614;}
.uni-popup__wrapper uni-button{
    width: 650rpx;
    height: 88rpx;
    margin-top: 20rpx;
    line-height: 88rpx;
    font-size: 32rpx;
    font-weight: 500;
    border-radius: 88rpx;
}
.quanmatip{
    margin-top: 80rpx;
    font-size: 32rpx;
    font-weight: 500;
    line-height: 44rpx;
}
.common-popup input{
    height: 84rpx;
    padding: 0 32rpx;
    margin: 32rpx 0 80rpx;
    background-color: #F9F9F9;
    border-radius: 42rpx;
    overflow: hidden;
    align-items: center;
    justify-content: space-between;
}

js逻辑代码

<script>
    import {
        mapState
    } from "vuex";
    export default {
        computed: {
            ...mapState(['hasLogin', 'userInfo'])
        },
        data() {
            return {
                btnloading: false,
                active: 0,
                balan: [], //充值数据配置
                agreementData: [], //用户协议数据
                radioVal: "WXPAY", //默认选中1微信2支付宝
                show: false, //弹出层显隐
                queryData: {
                    paymentPlatform: 'APP',
                    paymentChannel: 'WXPAY',
                },
                orderForm: undefined, //订单ID
                systemStyle: 1 //0ios,1安卓
            }
        },
        onLoad(option) {
            this.balanCeconfiguration()
            this.agreementHandler()

        },
        methods: {
            // 判断是ios还是安卓
            iosAndAndroid() {
                if (this.systemStyle) {
                    this.$refs.modeOfPayment.open();
                    return
                }
                uni.showToast({
                    title: "IOS支付暂未开放，请耐心等待！",
                    icon: 'none',
                    mask: true,
                    duration: 2500,
                });
                // IOS支付
            },
            open() {
                this.$refs.popupChongZhi.open();
            },
            /*------------------------充值开始-----------------------*/
            activeHandler(index) {
                this.active = index;
                this.queryData.configId = this.balan[index].configId;
            },
            // 充值配置
            balanCeconfiguration() {
                let ua = uni.getSystemInfoSync().platform;
                if (/ios/i.test(ua)) {
                    this.systemStyle = 0
                } else {
                    this.systemStyle = 1
                }
                this.$request.get('/app/order/tmdConfig').then(res => {
                    this.balan = res.data;
                    this.queryData.configId = res.data[0].configId
                })
            },
            // 充值协议
            agreementHandler() {
                // 1用户协议 2隐私协议 3购买须知
                this.$request.get(`/app/user/getAgreement/3`).then(res => {
                    this.agreementData = res.data;
                })
            },
            // 点击充值
            ontopThat() {
                this.queryData.paymentChannel = this.radioVal;
                this.$request.post(`/pay/placeOrder`, this.queryData).then(response => {
                    this.orderForm = response.data.orderId;
                    uni.hideLoading();
                    if (this.radioVal == 'ALIPAY') {
                        uni.requestPayment({
                            provider: 'alipay',
                            orderInfo: response.data.url, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
                            success: (res) => {
                                this.$refs.modeOfPayment.close();
                                this.$refs.inquire.open();
                            },
                            fail: (err) => {}
                        });
                        return
                    }
                    // 微信支付
                    let orderInfo = {
                        appid: response.data.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
                        noncestr: response.data.nonceStr, // 随机字符串
                        package: response.data.package, // 固定值
                        partnerid: response.data.partnerid, // 微信支付商户号
                        prepayid: response.data.url, // 统一下单订单号
                        timestamp: response.data.timeStamp, // 时间戳（单位：秒）
                        sign: response.data.paySign // 签名，这里用的 MD5/RSA 签名
                    }
                    console.log(11111,orderInfo.appid);
                    uni.requestPayment({
                        provider: "wxpay",
                        orderInfo: orderInfo,
                        success: (res) => {
                            this.$refs.modeOfPayment.close();
                            this.$refs.inquire.open();
                        },
                        fail(e) {
                            if (e && e.code == -8) {
                                uni.showToast({
                                    title: "支付失败,未安装微信客户端",
                                    icon: 'none',
                                    mask: true,
                                    duration: 2500,
                                });
                                return
                            }
                            uni.showToast({
                                title: `支付失败`,
                                icon: 'none',
                                mask: true,
                                duration: 2500,
                            });

                        }
                    })

                })
            },
            radioChange(val) {
                this.radioVal = val.target.value; //默认选中1微信2支付宝
            },
            inquireHandler() {
                console.log("参数1", this.orderForm)
                console.log("参数2", this.queryData.paymentChannel)
                this.$request.get(`/pay/queryPay/${this.orderForm}/${this.queryData.paymentChannel}`).then(res => {
                    this.$refs.inquire.close()
                    this.$emit('getTableTmd')
                    if (res.data) {
                        uni.showToast({
                            title: "支付成功",
                            icon: 'none',
                            mask: true,
                            duration: 2500,
                        });
                    } else {
                        uni.showToast({
                            title: "支付失败",
                            icon: 'none',
                            mask: true,
                            duration: 2500,
                        });
                    }
                })
            }
        }
    }
</script>

需要应用界面调用组件

<Recharge ref='play' v-on:getTableTmd='inquire' />    

import Recharge from '@/components/recharge/recharge.vue'; //支付弹窗
// 刷新数据 支付成功后刷新充值数据
            inquire() {
                this.getTableTmd();
                this.$store.dispatch('GetInfo').then((res) => {}).catch(err => {})
            },

2、微信登录

3、微信分享