hd-miniprogram/src/minePages/payment/index.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" :disabled="yedis" color="#00aa00" style="transform:scale(80%);" />
				<view style="display: flex;flex:1;align-items: center;">
					<image src="/src/static/img/yuer.png" style="width: 60rpx;height: 60rpx;" />
					<view style="padding-left: 10rpx;">余额</view>
					<view v-if="iskt" style="flex:1;font-size: 30rpx;;text-align:right;color: #949494;">
						<template v-if="iskzf">可用{{totalAmount}}元</template>
						<template v-else>余额不足，剩余{{totalAmount}}元</template>
					</view>
					<view v-else style="flex:1;text-align:right;color: #949494;">暂未开通</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,computed } from 'vue'
	import { payment,getip,balancpay,getaccou,getInfo } 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.attach.description = `${opt.plateNum}在${opt.stationName}换电`
		// payqs.detail.costPrice = opt.amount
		// payqs.detail.goodsDetail.unitPrice = opt.amount
		
		orderNo.value = opt.orderNo
		
		getaccou(uni.getStorageSync('wxuid')).then((rps:any) => {
			if(rps.data.records){
				totalAmount.value = rps.data.records[0].totalAmount
				iskt.value = true 
				if(opt.amount*1 > totalAmount.value*1){
					iskzf.value = false
				}
			}
		})
	})
	
	//获取账户信息
	let totalAmount = ref(0)
	let iskt = ref(false)
	let iskzf = ref(true)
	
	
	let yedis =	computed(() => {
		if(iskt.value && iskzf.value){
			return false
		}
		return true
	})
	
	
	//获取用户信息
	let username = ref('')
	getInfo({
		wuid:uni.getStorageSync('wxuid')
	}).then((rps:any) => {
		if(rps.data.name){
			username.value = rps.data.name
		}else if(rps.data.nickName){
			username.value = rps.data.nickName
		}else{
			username.value = ''
		}
	})
	
	let orderNo = ref('')
	
	let actv = ref(2)
	function radioChange(v:any) {
		actv.value = v.detail.value
	}
	
	let payqs = reactive<any>({
		wuid:uni.getStorageSync('wxuid'),
		description:'',											//订单总描述
		total:0,												//支付金额，单位：分
		//timeExp:'',											//支付结束时间
		attach:{												//订单附加信息
			type: 2,											//"1-充值,2-订单。类型 number"
			orderNo:'', 										//"订单号",
			trader:'',											//交易发起人
			description:'',
			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() {
		if(actv.value == 1){
			balancpay({
				orderNo:orderNo.value,
				wuid:uni.getStorageSync('wxuid'),
				uname:username.value
			}).then(() => {
				uni.redirectTo({
					url:`/minePages/paySuccess/index?orderNo=${orderNo.value}`
				})
			})
		}else{
			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>