detection-user/pages/detection/my-payment.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>