yueche_app/pages/transportation/transportation.vue

<template>
	<view class="container">
		<image class="banner" src="@/static/images/mine/back.png" mode="aspectFill" />
		<view class="title" :style="{ top: `${paddingTop * 2}rpx` }">
			<view class="title_back" @click="handleBack">
				<wd-icon name="thin-arrow-left" color="#001713" size="18"></wd-icon>
			</view>

			电子交通卡
		</view>

		<view class="body">
			<!-- 交通卡区域 -->
			<view class="body_card" :class="[{ excellent: cardType == '优行卡' }, { teacher: cardType == '教师卡' }, { warm: cardType == '暖心卡' }]">
				<view class="card_type">
					<view class="type_name">
						<image v-if="cardType == '优行卡'" class="img" src="/static/images/transportation/logo.png" mode="aspectFill"></image>
						<image v-if="cardType == '教师卡'" class="img" src="/static/images/transportation/logo2.png" mode="aspectFill"></image>
						<image v-if="cardType == '暖心卡'" class="img" src="/static/images/transportation/logo3.png" mode="aspectFill"></image>
						{{ cardType }} 
					</view> 
					<view class="type_au" @click="goPage()">
						<text class="text">身份认证</text>
						<wd-icon name="arrow-right" color="#376477" size="8"></wd-icon>
					</view>
				</view>
				<view class="card_num">
					可用余额：
					<text class="text">{{freePay}}元</text>
				</view>
				<!-- <view class="">充值余额：{{chongPay}}元 补贴金额度：{{buPay}}元</view> -->

				<view
					class="card_btn"
					:class="[{ btn_excellent: cardType == '优行卡' }, { btn_teacher: cardType == '教师卡' }, { btn_warm: cardType == '暖心卡' }]"
					@click="handleDetail"
				>
					查看使用明细
				</view>
				<view class="card_line" :class="[{ line_excellent: cardType == '优行卡' }, { line_teacher: cardType == '教师卡' }, { line_warm: cardType == '暖心卡' }]"></view>
			</view>

			<!-- 按钮区域 -->
			<view class="body_btns">
				<view class="btn pull" @click="handlePull">点击充值</view>

				<view class="btn refund" @click="handleRefund">点击退款</view>
			</view>

			<!-- 使用规则区域 -->
			<view class="body_rule">交通卡使用规则</view>
			<image class="body_rule_img" :src="rulesImg" @click="clickImg">交通卡使用规则</image>
		</view>
	</view>

	<!-- 退款弹窗区域 -->
	<wd-popup v-model="popShow" position="bottom" safe-area-inset-bottom :close-on-click-modal="false">
		<view class="pop">
			<view class="pop_title">
				<view class="title_close" @click="closePop">
					<wd-icon name="close" size="16"></wd-icon>
				</view>
			</view>
			<view class="pop_tips" v-if="freePay==0">暂无提现余额</view>
			<view class="pop_tips" v-if="freePay>0">可退款余额为{{freePay}}</view>

			<view class="pop_msg" v-if="freePay>0">退款后可用余额为0
			<!-- ，主余额为0补贴余额为0 -->
			</view>

			<view class="pop_btn" @click="tuikuan" v-if="freePay>0">立即退款</view>
		</view>
	</wd-popup>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { myRequest } from '@/utils/api.ts'
import { useTabParamStore } from '@/utils/tabParams.js';
const tabParamStore = useTabParamStore();
 
// 胶囊按钮距离页面顶部的距离
const paddingTop = ref(0)
// 用户信息
const userInfo = uni.getStorageSync('carUserInfo')

// 交通卡类型
const cardType = ref('优行卡')
// 交通卡类型数字
const cardTypeNum = ref(0)
//可用余额
const freePay = ref(0)
//充值余额
const chongPay = ref(0)
//补贴余额
const buPay = ref(0)

// 退款弹窗显示隐藏控制
const popShow = ref(false)

// 卡片规则图片
const rulesImg = ref('')
const rulesImg1= ref('')
const rulesImg2= ref('')
const rulesImg3= ref('')
//点击放大图片
const clickImg = () => {
	wx.previewImage({
		urls: [rulesImg.value], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
		current: '', // 当前显示图片的http链接，默认是第一个
		success: function(res) {},
		fail: function(res) {},
		complete: function(res) {},
	})
};
// 查看我的认证信息
async function getMyVetry() {
	const res = await myRequest({
		url: '/vertifyqueryOwn.action',
		data: {
			mobile: userInfo.mobile ,
		}
	})
	console.log(res.value ,res.code==205)
	if(res.code==200){
		if(res.data[0].type==1){ 
			cardType.value = '教师卡'
			cardTypeNum.value=1
			
		}else if(res.data[0].type==2){
			cardType.value = '暖心卡'
			cardTypeNum.value=2
		}
		getYougui()   
		  console.log('卡',cardTypeNum.value)
		  // 1. 存储参数到全局状态
		  uni.setStorageSync('cardTypeNum', cardTypeNum.value)
	}else if(res.code==205){
		cardType.value = '优行卡'
		cardTypeNum.value=0
		getYougui()
		 console.log('卡',cardTypeNum.value)
		 // 1. 存储参数到全局状态
		 uni.setStorageSync('cardTypeNum', cardTypeNum.value)
	}
	
}

//查看规则
async function getYougui() {
	const res = await myRequest({
		url: '/fileslist.action',
		data: {
		}
	})
	if(res.code==200){
		for(var i=0;i<res.data.length;i++){
			if(res.data[i].name=='优行卡规则内容'){
				rulesImg1.value=res.data[i].url
			}else if(res.data[i].name=='教师卡规则内容'){
				rulesImg2.value=res.data[i].url
			}else if(res.data[i].name=='暖心卡规则内容'){
				rulesImg3.value=res.data[i].url
			}     
		}  
		if(cardTypeNum.value==1){
			rulesImg.value=rulesImg2.value
		}else if(cardTypeNum.value==1){
			rulesImg.value=rulesImg3.value
		}else if(cardTypeNum.value==0){        
			rulesImg.value=rulesImg1.value
		}
	}
}

//查看交通卡余额汇总
async function getKaYue() {
	const res = await myRequest({
		url: '/tAppsummary.action',
		data: {
			mobile: userInfo.mobile ,
			// nickname:userInfo.username,
			// type:cardTypeNum,
		}
	})
	if(res.code==200){
		freePay.value = res.data.freeBalance.money
		chongPay.value = res.data.mainBalance.money
		buPay.value = res.data.allowanceBalance.money
	}
}

onMounted(() => {
	paddingTop.value = uni.getMenuButtonBoundingClientRect().top
	getMyVetry()
	getKaYue()
	getYougui()
})

// 查看使用明细按钮回调
const handleDetail = () => {
	uni.navigateTo({
		url: '/pages/useDetail/useDetail'
	})
}

// 点击充值按钮回调
const handlePull = () => {
	uni.navigateTo({
		url: '/pages/pay/pay'
	})
}

// 跳转页面
const goPage = (url) => {
	uni.navigateTo({
		url:'/pages/identity/identity',
	})
}

// 点击退款按钮回调
const handleRefund = () => {
	popShow.value = true
}

// 弹窗关闭按钮回调
const closePop = () => {
	popShow.value = false
}
//退款
const tuikuan = async () => {
	const res = await myRequest({
		url: '/cardrefund.action',
		// method: 'POST', // 明确指定请求方法为POST
		data: {
			id: userInfo.id,
			refundAccount: freePay.value,  
		}
	})
	if(res.code==200){
		uni.showToast({
		  title: res.message,
		  icon: 'none'
		});
	}else{
		uni.showToast({
		  title: res.message,
		  icon: 'none'
		});
	}
	popShow.value = false
}


// 顶部返回图标回调
const handleBack = () => {
	uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.container {
	position: relative;
	height: 100vh;
	color: #001713;
	background-color: #fff;
	overflow-y: auto;

	.banner {
		width: 100%;
		height: 482rpx;
	}

	.title {
		position: absolute;
		display: flex;
		align-items: center;
		width: 100vh;
		font-size: 40rpx;

		.title_back {
			margin-left: 26rpx;
			margin-right: 232rpx;
		}
	}

	.body {
		position: absolute;
		top: 160rpx;
		box-sizing: border-box;
		padding: 0 40rpx;
		width: 100%;

		.body_card {
			box-sizing: border-box;
			padding: 40rpx 50rpx 30rpx;
			width: 100%;
			height: 316rpx;
			font-size: 24rpx;
			border-radius: 60rpx;
			border-radius: 30px;
			box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);

			.card_type {
				display: flex;
				align-items: center;
				font-weight: bold;

				.type_name {
					display: flex;
					align-items: center;
					font-size: 40rpx;

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

				.type_au {
					display: flex;
					align-items: center;
					margin-left: 40rpx;
					font-size: 24rpx;

					.text {
						margin-right: 5rpx;
					}
				}
			}

			.card_num {
				margin-top: 22rpx;
				margin-bottom: 18rpx;

				.text {
					font-weight: bold;
				}
			}

			.card_btn {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 20rpx;
				margin-left: auto;
				width: 234rpx;
				height: 50rpx;
				font-size: 28rpx;
				font-weight: bold;
				border-radius: 8rpx;
			}

			.btn_excellent {
				color: #2b507a;
				border: 2rpx solid #2d537d;
				background-color: #cfe0eb;
			}

			.btn_teacher {
				color: #a46509;
				border: 2rpx solid #c77417;
				background-color: #fddb9f;
			}

			.btn_warm {
				color: #1580ed;
				border: 2rpx solid #0d71fb;
				background-color: #e2eef9;
			}

			.card_line {
				margin-top: 16rpx;
				width: 100%;
				height: 8rpx;
				border-radius: 10rpx;
			}

			.line_excellent {
				background: linear-gradient(90deg, #72a8d2 0%, #2b507a 100%);
			}

			.line_teacher {
				background: linear-gradient(90deg, #f1a045 0%, #bf6c0f 100%);
			}

			.line_warm {
				background: linear-gradient(90deg, #218dfb 0%, #0c70fb 100%);
			}
		}

		.excellent {
			color: #2b507a;
			background: linear-gradient(146.58deg, rgba(243, 245, 245, 0.5) 0%, rgba(229, 240, 244, 0.5) 100%);
		}

		.teacher {
			color: #9f5300;
			background: linear-gradient(148.48deg, rgba(254, 228, 182, 0.5) 0%, rgba(253, 205, 121, 0.5) 59.21%, rgba(248, 212, 140, 0.5) 100%);
		}

		.warm {
			color: #1580ed;
			background: linear-gradient(146.58deg, rgba(243, 245, 245, 0.5) 0%, rgba(201, 229, 255, 0.5) 100%);
		}

		.body_btns {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 40rpx 0;

			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 310rpx;
				height: 72rpx;
				font-size: 32rpx;
				border-radius: 16rpx;
			}

			.pull {
				color: #fff;
				background-color: #ff8205;
			}

			.refund {
				color: #ff8205;
				border: 2rpx solid #ff8205;
			}
		}

		.body_rule {
			font-size: 36rpx;
		}
		.body_rule_img{
			width: 100%;
			height: 200px;
			background-size: 100%;
		}
	}
}

.pop {
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	padding-bottom: 60rpx;
	font-size: 32rpx;
	color: #001713;
	line-height: 46rpx;

	.pop_title {
		position: relative;
		height: 60rpx;
		width: 100%;
		background-color: #ff8205;

		.title_close {
			position: absolute;
			top: 6rpx;
			right: 30rpx;
		}
	}

	.pop_tips {
		margin-top: 24rpx;
	}

	.pop_msg {
		margin: 50rpx 0;
		width: 456rpx;
	}

	.pop_btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 480rpx;
		height: 72rpx;
		color: #ff8205;
		border-radius: 16rpx;
		border: 2rpx solid #ff8205;
	}
}
</style>