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 @click="goRecord">
			<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" v-if="source=='WECHAT'">温馨提示: <text class="red">NFC充值</text>仅支持在<text
			class="red">安卓手机</text>进行ETC储值卡充值!</view>
</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";
	import { source } from "@/utils/network/difference";
	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,
		// #ifdef MP-ALIPAY
		transWayTypeList: [{
			name: "蓝牙",
			value: "blu",
		}],
		// #endif
		// #ifdef MP-WEIXIN
		transWayTypeList: [],
		// #endif
		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) => {
		// #ifdef MP-WEIXIN
		uni.getSystemInfo({
			success: (res) => {
				console.log("res", res['osName'])
				// ios
				if (res['osName'] == 'ios') {
					state.transWayTypeList = [{
						name: "蓝牙",
						value: "blu",
					}]
				} else {
					// 安卓
					state.transWayTypeList = [{
						name: "蓝牙",
						value: "blu",
					}, {
						name: "NFC",
						value: "nfc",
					}]
				}
			}
		});
		// #endif
	});

	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>