jd_logistics/jd_logistics-app/pages/recharge/recharge.vue

<template>
	<view class="recharge padding30">
		<!-- 余额 -->
		<view class="blance color_fff border_radius_20">
			<view class="flex-center-between">
				<view class="font_size30 mr20">余额 ( {{appStore.moneyUnit}} )</view>
				<view class="font_size30" @click="toWallet">账户明细</view>
			</view>
			<view class="font_size60 bold mt30">{{appStore.userInfo?.rechargeBalance}}</view>
		</view>
		<!-- 充值金额 -->
    <view class="padding30 border_radius_20 bg_color_fff mt20">
      <view class="font_size30 bold">充值金额</view>
      <view class="grid-container mt30">
        <view class="flex-column-center bg_color_f5 border_radius_20 paddingTB20 rePrice"
				:class="{active: ruleId==item.ruleId }"
				@click="ruleId = item.ruleId;orderAmt = item.rechargeAmount"
				 v-for="(item, index) in ruleList" :key="index">
          <view class="bold font_size40 color_price">{{item.rechargeAmount}}</view>
          <view class="font_size20 mt10 gray">{{item.offerTag}}</view>
					<image src="/static/img/check.png" mode="widthFix" class="checked_img" v-if="ruleId==item.ruleId"></image>
        </view>
      </view>
			<view class="mt30">
				<view class="bold font_size25">{{rechargeRuleInfo.agreementName}}</view>
				<view class="mt10 gary font_size25">
					1.活动有效期为 {{ruleList[0]?.startTime}} 至 {{ruleList[0]?.endTime}}。
				</view>
				<view class="mt20 gary font_size25" v-html="rechargeRuleInfo.content"></view>
			</view>
    </view>
		<agreeRecharge ref="agreeRecharge" @setAloneChecked="setAloneChecked"></agreeRecharge>
		<!-- foot -->
    <view class="foot bg_color_fff">
			<view class="order_btn paddingTB20 flex_1 text_align_center" @click="submitForm">充值</view>
		</view>
	</view>
</template>
<script setup>
import { ref } from "vue";
import { getRuleList } from "@/api/user";
import { createOrder } from "@/api/order";
import { wxPay,getUserInfo } from "@/utils/util.js";
import { agreementRechargeRule } from "@/api/agreement";
import { agreeRecharge } from "@/components/agreeRecharge.vue"
import { useToast } from "@/hooks/useToast";
const { Toast } = useToast();
import { onLoad } from "@dcloudio/uni-app";
import { useAppStore } from "@/stores/app";
const appStore = useAppStore();
const ruleList = ref([]);
const orderId = ref('');
const rechargeRuleInfo = ref('');
const ruleId = ref('');
const orderAmt = ref('');
const aloneChecked = ref(false);

onLoad(() => {
	getRuleListFn();
	agreementRechargeRuleFn();
});
async function submitForm(){
	if(!aloneChecked.value){
		Toast({ title: "请先阅读并同意充值协议", icon: 'none' });
		return;
	}
	const res = await createOrder({
		payMethod:0,//支付方式 0微信 1余额
		productType:1,//商品类型 0购买会员 1充值
		productId:ruleId.value,
		orderNum:1,//订单数量
		orderAmt:orderAmt.value//订单金额
	});
	//payData
	orderId.value = res.data.orderId;
	const payInfo = res.data.payData.prepayWithRequestPaymentResponse
	wxPay({
		timeStamp:payInfo.timeStamp,
		nonceStr:payInfo.nonceStr,
		packageVal:payInfo.packageVal,
		signType:payInfo.signType,
		paySign:payInfo.paySign,
	},to_success_pay);
}
function to_success_pay({isSuccess}){
	console.log('to_success_pay',isSuccess);
	uni.navigateTo({
    url: `/pages/recharge/success_pay?orderId=${orderId.value}&isSuccess=${isSuccess}&payMethod=0`
  })
}
function toWallet(){
	uni.navigateTo({
		url: '/pages/recharge/wallet'
	});
}
function getRuleListFn(){ 
	getRuleList().then(res => {
		if(res.code == 200){
			ruleList.value = res.data || [];
			if(ruleList.value.length > 0){
				ruleId.value = ruleList.value[0].ruleId || '';
				orderAmt.value = ruleList.value[0].rechargeAmount || '';
			}
		}
	})
}
function agreementRechargeRuleFn(){ 
	agreementRechargeRule().then(res => {
		if(res.code == 200){
			rechargeRuleInfo.value = res.data || {};
		}
	})
}
function setAloneChecked(value){
  aloneChecked.value = value;
}
</script>
<style lang="less" scoped>
.recharge{
  background: #f5f5f5;
	.blance{
		background-color: #fb7145;
		padding: 30rpx 30rpx 60rpx;
	}
	.rePrice{
		position: relative;
		border: 1rpx solid transparent;
		&.active{
			border: 1rpx solid #fb7145;
		}
		.checked_img{
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			top: 50%;
			right: 20rpx;
			transform: translateY(-50%);
		}
	}
	.order_btn{
		background-color: #fb7145;
	}
}
</style>