131 lines
3.5 KiB
Vue
131 lines
3.5 KiB
Vue
<template>
|
|
<up-navbar
|
|
title="支付"
|
|
bgColor="#00aa7f"
|
|
:autoBack="true"
|
|
leftIconColor="#fff"
|
|
titleStyle="color:#fff"
|
|
:placeholder="true"
|
|
/>
|
|
|
|
<view style="display: flex;align-items:center;justify-content: space-between;padding:30rpx;border-bottom:1px solid #f4f4f4;background: #fff;">
|
|
<view>付款金额</view>
|
|
<view style="color: #ffaa00;">
|
|
<text>¥ </text>
|
|
<text style="font-size: 50rpx;">{{payqs.money}}</text>
|
|
</view>
|
|
</view>
|
|
<view style="padding: 40rpx 20rpx 20rpx;color: #959595;">选择支付方式</view>
|
|
<view style="background: #fff;">
|
|
<radio-group size="30" @change="radioChange">
|
|
<label style="display: flex;align-items: center;padding: 30rpx;border-bottom: 2px solid #f4f4f4;">
|
|
<radio :checked="actv == 1" value="1" color="#00aa00" style="transform:scale(80%);" />
|
|
<view style="display: flex;align-items: center;">
|
|
<image src="/src/static/img/yuer.png" style="width: 60rpx;height: 60rpx;" />
|
|
<view style="padding-left: 10rpx;">余额</view>
|
|
</view>
|
|
</label>
|
|
<label style="display: flex;align-items: center;padding: 30rpx;">
|
|
<radio :checked="actv == 2" value="2" color="#00aa00" style="transform:scale(80%);" />
|
|
<view style="display: flex;align-items: center;">
|
|
<image src="/src/static/img/weixin.png" style="width: 60rpx;height: 60rpx;" />
|
|
<view style="padding-left: 10rpx;">微信</view>
|
|
</view>
|
|
</label>
|
|
</radio-group>
|
|
</view>
|
|
<view class="qxyy" @tap="payhand">立即支付</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref,reactive } from 'vue'
|
|
import { payment,getip } from '@/utils/service'
|
|
import { onLoad,onShow } from '@dcloudio/uni-app'
|
|
|
|
onLoad((opt:any) => {
|
|
payqs.money = opt.amount*1
|
|
payqs.attach = opt.orderNo
|
|
payqs.detail.goodsDetail.merchantGoodsId = opt.orderNo
|
|
payqs.detail.goodsDetail.unitPrice = opt.amount*1
|
|
|
|
payqs.description = `车牌号：${opt.plateNum} 换电站：${opt.stationName}`
|
|
// payqs.detail.costPrice = opt.amount
|
|
// payqs.detail.goodsDetail.unitPrice = opt.amount
|
|
})
|
|
|
|
let actv = ref(2)
|
|
function radioChange(v:any) {
|
|
console.log(v,'v')
|
|
}
|
|
|
|
let payqs = reactive({
|
|
wuid:uni.getStorageSync('wxuid'),
|
|
description:'', //订单总描述
|
|
money:0, //支付金额，单位：分
|
|
//timeExp:'', //支付结束时间
|
|
attach:'',
|
|
detail:{
|
|
goodsDetail:{
|
|
merchantGoodsId:'', //商户侧商品编码
|
|
wechatpayGoodsId:'', //微信支付定义的统一商品编号（没有可不传）
|
|
goodsName:'', //商品的实际名称
|
|
quantity:1, //商品数量
|
|
unitPrice:0 //商品价格
|
|
}//订单附加信息
|
|
},
|
|
payerClientIp:'', //用户IP
|
|
deviceId:'', //用户设备型号
|
|
stationCode:''
|
|
})
|
|
|
|
//获取ip
|
|
getip().then((rps:any) => {
|
|
payqs.payerClientIp = rps.data
|
|
})
|
|
|
|
function payhand() {
|
|
payment(payqs).then((rps:any) => {
|
|
|
|
//#ifdef MP-WEIXIN
|
|
wx.requestPayment({
|
|
timeStamp:rps.data.timeStamp,
|
|
nonceStr: rps.data.nonceStr,
|
|
package: rps.data.packageVal,
|
|
signType: rps.data.signType,
|
|
paySign: rps.data.paySign,
|
|
success(){
|
|
uni.redirectTo({
|
|
url:'/minPages/paySuccess/index'
|
|
})
|
|
},
|
|
fail(){
|
|
|
|
}
|
|
})
|
|
//#endif
|
|
})
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page{
|
|
background: #f4f4f4;
|
|
}
|
|
.qxyy{
|
|
width: 90%;
|
|
height: 80rpx;
|
|
margin: 100rpx auto 0;
|
|
line-height: 80rpx;
|
|
border-radius:10rpx;
|
|
color: #fff;
|
|
text-align: center;
|
|
background: #00aa00;
|
|
}
|
|
.hdbzcont{
|
|
box-sizing: border-box;
|
|
width: 85vw;
|
|
padding: 30rpx;
|
|
background: #fff;
|
|
}
|
|
</style> |