jp-housekeep-electric/pages/businessHall-test/returnBalance/returnBalance.vue

<template>
	<view>
		<u-navbar title="退余额"  title-color="#101010" ></u-navbar>
		<!-- 余额 -->
		<view class="balance">
			<view class="number">
				888.00
			</view>
			<view class="text">
				可退余额(元)
				<text><image class="img" src="@/assets/img/riLine-question-line 1.svg" mode="" @click="open"></image></text >
			</view>
			<u-modal v-model="show" :content="content"></u-modal>
		</view>
		<!-- 记录 -->
		<view class="record">
			<view class="title">
				<view class="icon">
					<image src="@/assets/img/riFill-file-list-3-fill 1.svg" class="img" mode=""></image>
				</view>
				<view class="text">
					退费记录
				</view>
			</view>
			
			<view class="record-group">
				<view class="item">
					<view class="way-state">
						<view class="way">
							退至 对公账户
						</view>
						<view class="state">
							退款中
						</view>
					</view>
					<view class="time-money">
						<view class="time">
							01-01 00:01
						</view>
						<view class="money">
							888.00元
						</view>
					</view>
				</view>
				
				<view class="item">
					<view class="way-state">
						<view class="way">
							退至 对公账户
						</view>
						<view class="state state2">
							已退款
						</view>
					</view>
					<view class="time-money">
						<view class="time">
							01-01 00:01
						</view>
						<view class="money">
							888.00元
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<!-- 退款 -->
		<view class="bottom">
			<button class="btn" @click="open2">申请退款</button>
			<u-modal v-model="show2" :content="content2" :show-cancel-button="true"></u-modal>
		</view>
	</view>
</template>

<script>
	export default {
		data() {	
			return {
				show: false,
				show2:false,
				content: '本平台仅支持可退费金额全额退费。充值退款申请成功后退费金额将于5个工作日内退还至您的充值账户、对公转账金额将退还至您的对公账户。在本平台，三个月内的支付宝充值、微信支付可申请退费。退费成功后，您可以在退费记录查看退费信息和审核进度。',
				content2:'是否提交退费申请？申请成功后退费金额将于5个工作日内退款至您的充值账户。对公转账余额退费，申请成功后工作人员将在5~10个工作日内退款至您的对公账户。'
			    

			}
		},
		methods: {
			open() {
				this.show = true;
			},
			open2() {
				this.show2 = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 余额
	.balance{
		background-color: #fff;
		text-align: center;
		padding: 32rpx 0;
		.number{
			color: rgb(16,16,16);
			font-size: 72rpx;
		}
		.text{
			color: rgba(119,119,119,1);
			
			.img{
				width: 32rpx;
				height: 32rpx;
				margin-left: 4rpx;
				vertical-align: middle;
			}
		}
	}
	// 记录
	.record{
		background-color: #fff;
		margin-top: 24rpx;
		.title{
			display: flex;
			align-items: center;
			padding: 24rpx 32rpx;
			.icon{
				.img{
					width: 40rpx;
					height: 40rpx;
					vertical-align: middle;
				}
			}
			.text{
				color: rgb(16,16,16);
				font-size: 36rpx;
				margin-left: 8rpx;
			}
		}
		.record-group{
			.item{
				padding: 24rpx 32rpx;
				border-top: 1px solid rgba(221,221,221,1);
				.way-state{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 8rpx;
					.way{
						color: rgba(51,51,51,1);
						font-size: 32rpx;
					}
					.state{
						color: rgba(255,123,0,1);
						font-size: 32rpx;
					}
					.state2{
						color: rgba(0,185,98,1);
					}
				}
				.time-money{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.time{
						color: rgb(153,153,153);
					}
					.money{
						color: rgba(16,16,16,1);
					}
				}
			}
		}
	}
  // 退款
  .bottom{
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  padding: 24rpx 32rpx;
	  background-color: #fff;
	  .btn{
		  line-height: 80rpx;
		  border-radius: 50px;
		  background: linear-gradient(-88.46deg, rgba(34,109,198,1) 2.59%,rgba(9,158,237,1) 97.02%);
		  color: rgba(255,255,255,1);
		  font-size: 36rpx;
	  }
  }
</style>