zhywpt-sp/pages/recharge/recharge-pay.vue

<template>
	<view class="wrapper">
		<view class="tabs">
			<view class="tab-tit as-gravity-center-start">充值方式

				<u-input @click="state.transWayTypeShow = true" inputAlign="center" v-model="state.transWayName"
					type="select" />
			</view>
		</view>
		<view class="btn btn-primary" @click="rechargeAction">立即充值</view>

	</view>
	<u-select v-model="state.transWayTypeShow" :list="state.transWayTypeList" @confirm="selectConfirm"></u-select>
</template>

<script setup lang="ts">
	import {
		stringToJson
	} from "@/utils/network/encryption";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		request
	} from "@/utils/network/request.js";
	import {
		reactive
	} from "vue";
	import {
		navTo
	} from "@/utils/utils"
	import {
		msg
	} from "@/utils/utils";
	const datas = require("../../static/etcUtil/datas.js");
	const bluetoothUtil = require("../../static/etcUtil/index.js");
	const cmd = require("../../static/etcUtil/cmdConfig.js");
	const tools = require("../../static/etcUtil/tools.js");
	const NFCAPI = require('../../static/nfc/NFCAPI.js');

	const state = reactive({
		transWayTypeShow: false,
		transWayTypeList: [{
			label: "蓝牙",
			value: "blu",
		}, {
			label: "NFC",
			value: "nfc",
		}
		],
		isShowBlue: false,

		tableIndex: 0,
		openid: "",
		connectSuccess: undefined,
		fee: 5000,
		money: 50,
		orderNum: "",
		transWayName: "蓝牙",
		transWay: "blu", //“blu”为蓝牙充值方式、“nfc”为NFC充值方式
		cardId: "", //卡号 需要传参
		mockpreBalance: 2000, //fix:模拟余额 目前没有检测状态接口，第一次会模拟圈层检测来检测状态
		show: false,
		current: 0
	});

	const selectConfirm = (item : any) => {
		state.transWayName = item[0].label
		state.transWay = item[0].value
	};

	onLoad((option) => {
	});

	function radioChange(evt) {
		console.log('输出内容', evt)
		state.transWay = evt.detail.value; //“blu”为蓝牙充值方式、“nfc”为NFC充值方式
	}

	/*点击充值按钮*/
	const rechargeAction = () => {
		if (state.transWay == 'blu') {
			uni.redirectTo({
				url: `/pages/bluetooth/bluetooth?routeType=2`,
			});
		} else {
			uni.redirectTo({
				url: `/pages/nfc/nfc?routeType=2`,
			});
		}
	};
	const goRecord = () => {
		uni.navigateTo({
			url: `/subpackage/personal-center/consumption-record?cardId=${state.cardId}`
		})
	}
</script>

<style>
	.record {
		width: 90%;
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
		align-items: center;
	}

	.arrow {
		width: 14rpx;
		height: 26rpx;
	}

	.tabs .tab-tit {
		font-size: 30rpx;
		color: #333;
		padding: 45rpx 0 22rpx 30rpx;
	}

	.tabs .tab {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
	}

	.tabs .tab .item {
		width: 210rpx;
		height: 100rpx;
		background: #f6fff7;
		border: 1px solid #dcdde1;
		box-sizing: border-box;
		line-height: 100rpx;
		border-radius: 6rpx;
		text-align: center;
		margin-bottom: 24rpx;
		color: #333333;
		font-size: 32rpx;
	}

	.tabs .tab .item.active {
		border: 1px solid #24cc49;
		color: #24cc49;
	}

	.btn-primary {
		width: 670rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
		border-radius: 40rpx;
		font-size: 32rpx;
		color: #ffffff;
		margin: 200rpx 40rpx 0;
		text-align: center;
	}

	label {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}
</style>