<template>
|
<view class="container">
|
<view class="navbar">
|
<image src="../../static/images/other/home.svg" alt="" @click="navTo()"></image>
|
<text>柜台充值</text>
|
</view>
|
<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.redirectTo({
|
url:'/pages/success/index'
|
})
|
}else{
|
uni.showToast({
|
title: '支付失败',
|
duration: 2000,
|
icon:'none'
|
});
|
}
|
},
|
fail (res) {
|
uni.showToast({
|
title: '微信支付失败',
|
duration: 2000,
|
icon:'none'
|
});
|
}
|
})
|
}
|
})
|
}
|
function navTo(){
|
uni.redirectTo({
|
url:'/pages/index/index'
|
})
|
}
|
onMounted(async() =>{
|
await counterRecharge()
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.container{
|
width: 100%;
|
height: 100vh;
|
.navbar{
|
width:100%;
|
height:176rpx;
|
background: linear-gradient(to bottom,#5EA1FA,#8BC1FC);
|
display: flex;
|
align-items: flex-end;
|
padding-bottom:24rpx;
|
box-sizing: border-box;
|
image{
|
width:40rpx;
|
height:40rpx;
|
margin-left:32rpx;
|
}
|
text{
|
font-weight: 400;
|
font-size: 36rpx;
|
color: #000000;
|
margin-left: 234rpx;
|
|
}
|
}
|
.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:40rpx;
|
box-sizing: border-box;
|
.title1{
|
margin-bottom:20rpx;
|
color: #3f85da;
|
font-size:42rpx;
|
}
|
.title2{
|
margin-bottom:20rpx;
|
color: #696c6f;
|
font-size:32rpx;
|
}
|
image{
|
width:256rpx;
|
height:256rpx;
|
opacity:0.6;
|
}
|
}
|
}
|
|
</style>
|
