211 lines
4.6 KiB
Vue
211 lines
4.6 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="c-top">
|
||
<view class="" @click="getback()">
|
||
<uni-icons type="left" size="18" color="#ffffff"></uni-icons>
|
||
</view>
|
||
<view class="c-title">充值会员</view>
|
||
<view style="width: 8%; height: 1px;"></view>
|
||
</view>
|
||
<view class="cont-top">
|
||
<view class="top-left">充值金额:</view>
|
||
<view class="top-right">
|
||
<!-- @input="onInput" -->
|
||
<input type="number" placeholder="请输入充值金额" v-model="inputValue" >
|
||
</view>
|
||
</view>
|
||
<view class="cont-box">
|
||
<view :class="{'indexbox' : actindex == index}" class="box" v-for="(item,index) in num " :key="index" @click="getindex(index,item.text)">
|
||
<text>{{item.text}}元</text>
|
||
</view>
|
||
</view>
|
||
<view class="anniu" @click="getpayment">
|
||
<text>点击充值</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from '../../utils/request'
|
||
import config from '@/config'
|
||
export default {
|
||
data(){
|
||
return{
|
||
inputValue: '',
|
||
actindex:'',
|
||
num:[
|
||
{text:'500'},
|
||
{text:'1000'},
|
||
{text:'1500'},
|
||
{text:'2000'},
|
||
{text:'2500'},
|
||
{text:'3000'},
|
||
]
|
||
}
|
||
},
|
||
methods:{
|
||
getindex(index,text){
|
||
this.actindex = index
|
||
this.inputValue = text
|
||
},
|
||
getback(){
|
||
uni.navigateBack()
|
||
},
|
||
onInput(event) {
|
||
const regex = /^\d*$/; // 只允许输入数字
|
||
if (!regex.test(event.target.value)) {
|
||
this.inputValue = this.inputValue.replace(/\D/g, ''); // 移除非数字字符
|
||
}
|
||
},
|
||
|
||
// 创建订单 吊起支付
|
||
async getpayment(){
|
||
if(this.inputValue == 0){
|
||
uni.showToast({
|
||
title:'充值金额不能为0！',
|
||
icon:'none'
|
||
|
||
})
|
||
return
|
||
}
|
||
|
||
const res = await request({
|
||
method:'post',
|
||
url:'/orderApi/createOrder',
|
||
data: {
|
||
goodsId: 88888,
|
||
goodsType: 'cz',
|
||
balance:0,
|
||
balanceCz: this.inputValue*100
|
||
}
|
||
})
|
||
console.log(res);
|
||
this.orderid = res.data
|
||
const ress = await request({
|
||
url:'/payApi/jcPrepayment?type=jsapi'+'&orderId='+this.orderid,
|
||
})
|
||
console.log(ress);
|
||
wx.requestPayment({
|
||
timeStamp: ress.timeStamp, // 时间戳，从1970年1月1日00:00:00至今的秒数，即当前的时间
|
||
nonceStr: ress.nonceStr, // 随机字符串，长度为32个字符以下。
|
||
package: ress.package, // 统一下单接口返回的 prepay_id 参数值，格式如“prepay_id=*”
|
||
signType: ress.signType, // 签名算法类型，默认为 MD5，支持RSA等其他加密算法
|
||
paySign: ress.paySign, // 签名，详见签名生成算法
|
||
success: function (res) {
|
||
console.log('成功',res);
|
||
if( res.errMsg = 'requestPayment:ok'){
|
||
uni.showToast({
|
||
title:'支付成功'
|
||
})
|
||
uni.navigateTo({
|
||
url:'/subInspectionPages/Paymentsuccessful/Paymentsuccessful'
|
||
})
|
||
}
|
||
// 支付成功后的回调函数， res.errMsg = 'requestPayment:ok'
|
||
},
|
||
|
||
})
|
||
|
||
|
||
// wx.requestPayment(ress)
|
||
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.container{
|
||
width: 100%;
|
||
height:calc(100vh);
|
||
box-sizing: border-box;
|
||
background: url('http://www.nuoyunr.com/lananRsc/jcbjt.png') center no-repeat;
|
||
background-size:100% 100%;
|
||
// padding-top: 40px;
|
||
}
|
||
.c-top{
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
padding-top: 15%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
// background-color: white;
|
||
}
|
||
.c-title{
|
||
font-size: 18px;
|
||
color: white;
|
||
font-weight: bold;
|
||
}
|
||
.cont-top{
|
||
width: 95%;
|
||
margin: 0 auto;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
padding-bottom: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 1px solid #0D2E8D;
|
||
|
||
}
|
||
.top-right{
|
||
width: 70%;
|
||
|
||
input{
|
||
width: 100%;
|
||
color: white;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
.top-left{
|
||
color:white;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin-right: 5px;
|
||
}
|
||
.cont-box{
|
||
margin: 0 auto;
|
||
margin-top: 20px;
|
||
width: 95%;
|
||
|
||
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
.box{
|
||
width: 29%;
|
||
height: 40px;
|
||
border-radius: 8px;
|
||
border: 1px solid #0D2E8D;
|
||
margin-top: 10px;
|
||
margin-right: 11px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 18px;
|
||
color: white;
|
||
font-weight: bold;
|
||
|
||
}
|
||
.anniu{
|
||
width: 90%;
|
||
height: 40px;
|
||
border-radius: 6px;
|
||
border: 1px solid #0D2E8D;
|
||
background: #0D2E8D;
|
||
margin: 0 auto;
|
||
margin-top: 40px;
|
||
color: white;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
|
||
}
|
||
.indexbox{
|
||
background: #0D2E8D;
|
||
}
|
||
</style> |