145 lines
4.0 KiB
Vue
145 lines
4.0 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.total}}</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 style="flex: 1;">100</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.total = opt.amount*1
|
||
payqs.attach.orderNo = opt.orderNo
|
||
payqs.goodsDetail[0].merchantGoodsId = opt.orderNo
|
||
payqs.goodsDetail[0].unitPrice = opt.amount*1
|
||
|
||
payqs.description = `${opt.plateNum}在${opt.stationName}换电`
|
||
// payqs.detail.costPrice = opt.amount
|
||
// payqs.detail.goodsDetail.unitPrice = opt.amount
|
||
|
||
orderNo.value = opt.orderNo
|
||
})
|
||
|
||
let orderNo = ref('')
|
||
|
||
let actv = ref(2)
|
||
function radioChange(v:any) {
|
||
console.log(v,'v')
|
||
}
|
||
|
||
let payqs = reactive<any>({
|
||
wuid:uni.getStorageSync('wxuid'),
|
||
description:'', //订单总描述
|
||
total:0, //支付金额，单位：分
|
||
//timeExp:'', //支付结束时间
|
||
attach:{ //订单附加信息
|
||
type: 2, //"1-充值,2-订单。类型 number"
|
||
orderNo:'', //"订单号",
|
||
trader:'', //交易发起人
|
||
tradercode:uni.getStorageSync('wxuid') //交易人编码
|
||
//walletCode:'' //钱包编码
|
||
// ownerId:'', //"户主ID，个人wuid，企业为公司编码",
|
||
// walletCode:'' //"钱包编码"
|
||
},
|
||
goodsDetail:[
|
||
{
|
||
merchantGoodsId:'', //商户侧商品编码
|
||
wechatpayGoodsId:'', //微信支付定义的统一商品编号（没有可不传）
|
||
goodsName:'', //商品的实际名称
|
||
quantity:1, //商品数量
|
||
unitPrice:0 //商品价格
|
||
}
|
||
],
|
||
payerClientIp:'', //用户IP
|
||
deviceId:'', //用户设备型号
|
||
stationCode:''
|
||
})
|
||
|
||
//获取ip
|
||
getip().then((rps:any) => {
|
||
payqs.payerClientIp = rps.data
|
||
})
|
||
|
||
function payhand() {
|
||
payqs.attach = JSON.stringify(payqs.attach)
|
||
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:`/minePages/paySuccess/index?orderNo=${orderNo.value}`
|
||
})
|
||
},
|
||
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> |