Liuyi
2024-11-12 0ed8e370659ad4e0582301ae31cfa155da114590
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<template>
    <view class="container">
        <navbar title="柜台充值"></navbar>
        <view class="content">
            <view class="title1">青河直饮水</view>
            <image src='../../static/images/other/icon_pay.png'></image> 
            <view class="title2">柜台充值</view>
        </view>
    </view>
</template>
<script setup>
    import { onLoad } from "@dcloudio/uni-app"
    import{ ref ,onMounted} from 'vue'
    import { wxPayApi } from '../../api/index.js'
    const orderId = ref()
    onLoad((query) =>{
        let url = decodeURIComponent(query.q)
        orderId.value = url.split('=')[1]
        console.log('订单号',orderId.value)
    })
    async function counterRecharge(){
        let data = {
            businessType:1,
            businessNo:orderId.value
            }
        //发起支付
        await wxPayApi(data).then((res) =>{
            if(res.code == 200){
                //调用微信官方支付接口弹出付款界面,输入密码扣款
                wx.requestPayment({
                  //预支付订单信息
                  // appId: res.data.appId,
                  timeStamp: res.data.timeStamp,     //时间戳 
                  nonceStr: res.data.nonceStr,      //随机串     
                  package: res.data.package,        //prepay_id
                  signType: res.data.signType,        //签名算法MD5        
                  paySign: res.data.paySign ,//微信签名 
                 success (res) {
                   if (res.errMsg == "requestPayment:ok"){
                      console.log('支付成功', res)
                      uni.showToast({
                        title: '支付成功',
                        duration: 2000,
                      });
                      uni.navigateTo({
                          url:'/pages/success/index'
                      })
                   }else{
                      uni.showToast({
                        title: '支付失败',
                        duration: 2000,
                        icon:'none'
                      });
                   }
                 },
                 fail (res) { 
                   uni.showToast({
                        title: '微信支付失败',
                        duration: 2000,
                        icon:'none'
                   });
                 }
                })
            }
        })
    }
    onMounted(async() =>{
        await counterRecharge()
    })
</script>
 
<style lang="scss" scoped>
    .container{
        width: 100%;
        height: 100vh;
        .content{
            width: 100%;
            height:calc(100vh - 176rpx);
            background:linear-gradient(to top,#FFFFFF,#d5e3ff);
            overflow-y:scroll;
            display:flex;
            justify-content:flex-start;
            align-items:center;
            flex-direction: column;
            padding-top:60rpx;
            box-sizing: border-box;
            .title1{
                margin-bottom:20rpx;
                color: #3f85da;
                font-size:50rpx;
            }
            .title2{
                margin-bottom:20rpx;
                color: #696c6f;
                font-size:32rpx;
            }
            image{
                width:256rpx;
                height:256rpx;
                opacity:0.6;
            }
            }
    }
           
</style>