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

<template>
	<view class="content">
		<view @click="rechargeAction">
			<view style="display: flex;align-items: center;">
				<image class="photo" :src="fileURL + 'image/index/goRecharge.png'"></image>去充值
			</view>
			<image class="photo1" src="../../static/image/icon-back.png" mode="widthFix"></image>
		</view>
		<view>
			<view>选择充值方式：</view>
			<view style="width: 67%;display: flex;align-items: center;">
				<radio-group @change="radioChange" style="display: flex;align-items: center;">
					<label style="align-items: center;margin-right: 40rpx;margin-top: 0;"
						class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in state.transWayTypeList"
						:key="item.value">
						<view>
							<radio :value="item.value" :checked="index === state.current" />
						</view>
						<view>{{item.name}}</view>
					</label>
				</radio-group>
			</view>
		</view>
		<view>
			<view style="display: flex;align-items: center;">
				<image class="photo" :src="fileURL + 'image/index/consumptionDetails.png'"></image>消费明细
			</view>
			<image class="photo1" src="../../static/image/icon-back.png" mode="widthFix"></image>
		</view>
	</view>
	<view class="tips">温馨提示: <text class="red">NFC充值</text>仅支持在<text class="red">安卓手机</text>进行ETC储值卡充值!</view>
	<!-- 	<view>
		<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";
	import {
		fileURL
	} from "@/datas/fileURL.js";
	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: [{
			name: "蓝牙",
			value: "blu",
		}, {
			name: "NFC",
			value: "nfc",
		}
		],
		tableIndex: 0,
		transWayName: "蓝牙",
		transWay: "blu", //“blu”为蓝牙充值方式、“nfc”为NFC充值方式
		cardId: "", //卡号 需要传参
		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充值方式
		for (var k = 0; k < state.transWayTypeList.length; k++) {
			if (state.transWayTypeList[k]['value'] == evt.detail.value) {
				state.transWayName = state.transWayTypeList[k]['name']
				return;
			}
		}
	}

	/*点击充值按钮*/
	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;
	}

	.photo {
		width: 40rpx;
		height: 40rpx;
		margin-right: 40rpx;
	}

	.photo1 {
		width: 40rpx;
		transform: rotateY(180deg);
	}

	.content {
		font-size: 32rpx;
	}

	.content>view {
		border-bottom: 1rpx solid #c1c1c1;
		display: flex;
		padding: 16rpx 20rpx;
		align-items: center;
		justify-content: space-between;
		height: 60rpx;
	}

	.red {
		color: red;
	}

	.tips {
		font-size: 32rpx;
		padding: 20rpx;
	}
</style>