支付模块

web

2025-07-04 0cfe50c34659fc30b8e6cdc05d9e4198efa71be9

支付模块

 App.vue

@@ -2,11 +2,11 @@
    export default {
        onLaunch: function() {
            console.log('App Launch')
            // if(!uni.getStorageSync('openId') || !uni.getStorageSync('token')){
            //     uni.redirectTo({
            //         url:'/pages/login/index'
            //     }) 
            // }
            if(!uni.getStorageSync('openId') || !uni.getStorageSync('token')){
                uni.redirectTo({
                    url:'/pages/login/index'
                }) 
            }
        },
        onShow: function() {
            console.log('App Show')

 api/index.js

@@ -20,9 +20,9 @@
    return request('/pay/service/wxPay',data,'POST')
}

//水卡充值*
//生成订单
export function rechargeApi(data){
    return request('/rechargeRecords/fees',data,'POST')
    return request('/api/user/fees',data,'POST')
}

// 设备列表

 config/index.js

@@ -1 +1 @@
export const BASE_URL = 'http://192.168.0.67:8041'
export const BASE_URL = 'https://www.huiwuyuntong.com/water-ration-beta'

 pages/device/index.vue

@@ -16,7 +16,7 @@
                            </view>
                            <view class="info-addr" @click="openMap(item.lat,item.lon)">
                                <text class="addr-text">地址：{{item.address}}</text>
                                <view>
                                <view class="addr-icon">
                                    <image src="../../static/images/icon-point.svg" alt=''></image>
                                    <text>{{item.distanceValue}}km</text>
                                </view>
@@ -198,21 +198,24 @@
                        align-items:center;
                        .addr-text{
                            width:340rpx;
                            flex-shrink: 0;
                            height:80rpx;
                            color: #6a6e75;
                            font-size:26rpx;
                        }
                        view{
                        .addr-icon{
                            width: 150rpx;
                            flex-shrink: 0;
                            display: flex;
                            justify-content: space-between;
                            align-items:center;
                            justify-content: flex-end;
                            image{
                                width:50rpx;
                                height:50rpx;
                                width: 40rpx;
                                height: 40rpx;
                            }
                            text{
                                color: #6a6e75;
                                font-size:26rpx;
                                font-size:22rpx;
                            }
                        }
                    }

 pages/index/index.vue

@@ -51,6 +51,7 @@
    import { onMounted, ref } from "vue";
    import { BASE_URL } from '../../config/index.js';
    import { getUserInfo } from '@/api/index.js'
    import { onShow } from "@dcloudio/uni-app"
    
    const topHeight = ref(0)
    const userInfo = ref()
@@ -145,10 +146,13 @@
    }
    onMounted(() => {
        getTopHeight()
        getUserDatail()
        // 获取位置信息
        getUserLocation()
    })
	
    onShow(() => {
        getUserDatail()
    })
</script>

<style lang="scss" scoped>

 pages/login/index.vue

@@ -5,7 +5,7 @@
                <image class="top-bg" src="../../static/images/login/top_bg.png" mode="widthFix"></image>
                <view class="top--title">
                    <image class="logo" src="../../static/images/login/logo.png "></image>
                    <view class="text">慧物通直饮水</view>
                    <view class="text">定量取水小程序</view>
                </view>
            </view>
            <view class="login-text">

 pages/recharge/index.vue

@@ -37,7 +37,7 @@
                    </view>
                </view>
            </view>
            <button :style="{opacity:payStatus ? 1 : 0.7}" class="submit-btn" @click="submit()">立即充值</button>
            <button :disabled="payStatus" class="submit-btn" @click="submit()">立即充值</button>
        </view>
    </view>
</template>
@@ -71,7 +71,7 @@
        {text:"微信支付",value:2,checked:true,img:'../../static/images/recharge/wx.png'},
    ])
    let timerId 
    let payStatus = ref(true)
    let payStatus = ref(false)
    
    const chooseMoney = (index1) => {
        moneyList.value.forEach((item,index) =>{
@@ -91,11 +91,8 @@
    }

    const submit = () => {
        if(payStatus.value){
            payStatus.value = false
            timerId = setTimeout(()=>{
                payStatus.value = true
            },20000)
        payStatus.value = true; //点击后禁用按钮
        try{
            let money = ''
            if(disabled.value){
                money = choosedMoney.value
@@ -103,25 +100,27 @@
                money = Number(otherMoney.value)
            }
            let data = {
                    cardNumber:userInfo.waterCardNumber,
                    paymentMethod:1,
                    rechargeAmount:money
                }
                cardNumber:userInfo.waterCardNumber,
                paymentMethod:1,
                rechargeAmount:money
            }
            //生成订单
            rechargeApi(data).then(async(res) =>{
            rechargeApi(data).then(async (res) =>{
                if(res.code == 200){
                    let data = {
                        businessType:1,
                        businessNo:res.data
                        }
                    }
                    //发起支付
                    await wxPay(data)
                    otherMoney.value = ''
                    payStatus.value = false;
                }
            })
        }else{
        }catch(err){
            payStatus.value = false;
            uni.showToast({
                title:'充值间隔20秒，请稍后!',
                title:'失败',
                icon:'none'
            })
        }
@@ -132,9 +131,10 @@
        wxPayApi(data).then((res) =>{
            if(res.code == 200){
                //调用微信官方支付接口弹出付款界面,输入密码扣款
                wx.requestPayment({
                uni.requestPayment({
                  //预支付订单信息
                  // appId: res.data.appId,
                  provider: 'wxpay',
                  timeStamp: res.data.timeStamp,     //时间戳 
                  nonceStr: res.data.nonceStr,      //随机串     
                  package: res.data.package,        //prepay_id