JP-ChargeTeam51/pages/newPage/chargeMoney/topUp.vue

<template>
	<view>
		<ujp-navbar title="充电金充值">
			<view slot="right" style="margin-right: 10px;" @click="openModalBl=true">
		
				<view class="right-text">
					交易规则
				</view>
			</view>
		</ujp-navbar>
		<!-- 充值金额 -->
		<view class="recharge-amount">
			<view class="title">
				充值金额(元)
			</view>
			<view class="input-amount">
			￥<input placeholder="请输入充值金额">
			</view>
			<!-- 提示 -->
			<view class="hint">
				预计收益到账时间 07-26(星期三)，如在15:00之后转入，07-27(星期四)到账
			</view>
			<!-- 收益说明 -->
			<view class="explain">
				<view class="title">
					收益说明
				</view>
				<view class="form">
					<view class="balance">
						<view class="title">
							账户余额
						</view>
						<view class="item">
							2000元以下
						</view>
						<view class="item">
							2000至4999元
						</view>
						<view class="item">
							2000至4999元
						</view>
					</view>
					<view class="interest-rate">
						<view class="title">
							年化率
						</view>
						<view class="item">
							4.0%
						</view>
						<view class="item">
							5.0%
						</view>
						<view class="item">
							6.0%
						</view>
					</view>
					
				</view>
				
			</view>
		</view>
		<!-- 付款方式 -->
		<view class="payment-method">
			<view class="title">
				付款方式
			</view>
			<view class="we-chat">
				<view class="icon">
					<img src="../../../assets/img/ze-wechat Copy.svg" alt="">
				</view>
				<view class="text">
					<view class="title">
						微信支付
					</view>
					<view class="hint">
						银行单笔转入限额50000.00
					</view>
				</view>
				<view class="radio">
					<label class="radio">
						<radio value="" /><text></text>
					</label>
				</view>
				
			</view>
		</view>
		<!-- 确认充值 -->
		<view class="confirm">
			<view class="hint">
				请阅读并同意<text>《{{projectName}}会员合作协议》</text>
			</view>
			<button class="confirm-btn">确认充值</button>
		</view>
	  <!-- 模态框 -->
	<u-modal :title="projectName+'会员合作协议'" :show-cancel-button="true" v-model="show" 
	:title-style="{color: '#101010'}" confirm-text="阅读并同意（9）" cancel-color="#aaaaaa" confirm-color="#aaaaaa">
				<view class="slot-content">
					<rich-text :nodes="content"></rich-text>
				</view>
			</u-modal>
			
			
	
	</view>
</template>

<script>
	export default {
		data() {	
			return {
				show: true,
				content: `
					${projectName}（以下称平台）是湖北鹏育优电新能源科技有限公司（以下称甲方）旗下品牌，甲方拥有平台所有法定权利。乙方作为平台充电车主已经认同并知悉甲方产品与项目商业运作模式。根据《中华人民共和同民法典》及相关法律法规,甲乙双方现就平台电动汽车充电站建设项目合作事宜，经双方协商一致，达成如下协议:  第一条:产品与项目的认购
					  <br> 1、乙方向甲方认购平台会员并在平台余额宝账户充值一定金额的人民币作为乙方电动汽车充电服务预存金，具体充值金额以实操为准，乙方在余额宝账户充值不设时间和次数限制。
					<br>2、甲方支持乙方余额宝账户余额既作为充电服务现金账户，又作为平台电动汽车充电站建设项目合作金额并享受账户余额收益。乙方余额宝账户充电服务费用按会员价格结算。
					<br>第二条：余额宝收益规则及方式
					<br>1、余额宝收益
					余额宝账户余额在5000元及以下，乙方可享受账户余额年化率为4.0%的收益；
					余额宝账户余额在5001至10000元，乙方可享受账户余额年化率为为5.0%的收益；
					余额宝账户余额在10001至50000元：乙方可享受账户余额年化率为为6.0%的收益； 
					余额宝账户余额在50001及以上：乙方可享受账户余额年化率为7.0%的收益；
					<br>2、收益方式
					收益金额以当日零时余额宝账户余额为准按天结算，先天收益实时到账余额宝账户。当日提现次日到账。
					<br>3、计算规则
					日收益金额=余额宝账户余额×（年化率÷365）
					<br>第三条：协议期限：
					<br>1、本协议自双方签订并完成支付之时起算。协议亦可通过网签方式完成，网签方式等同纸质协议具有同等法律效力。
					<br>2、本协议于乙方完成余额宝账户余额全部提现之时终止。
					<br>第四条：双方的权利和义务
					<br>1、乙方可随时提取余额宝账户余额及收益，当日提现次日到账；
					<br>2、乙方享受甲方平台的会员充电优惠政策；
					<br>3、如因甲方原因解除协议，甲方需退还乙方余额宝账户余额及收益。
					    第五条：其他事宜：
					<br>1、本协议未尽事宜双方可协商签订补充协议，补充协议与本协议具有同等法律效力。
					<br>2、履行本协议发生争议，双方应协商解决，如无法协商或协商不一致的，可向甲方所在地人民法院提起诉讼。
					   <br> 3、本协议一式两份，甲乙双方各执一份，自双方签字或盖章后即生效（包括网络签订）。

				`
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.slot-content {
			font-size: 28rpx;
			color: #111111;
			padding:0 30rpx;
			margin: 32rpx 0;
			line-height: 40rpx;
			height: 860rpx;
			overflow-y: scroll;
		}
	.right-text{
		color: #666666;
	}
	// 充值金额
.recharge-amount{
	margin: 24rpx 32rpx;
	background-color: #fff;
	padding: 32rpx;
	border-radius: 12px;
	.title{
		color: rgba(51, 51, 51, 1);
		font-size: 32rpx;
	}
	.input-amount{
		display: flex;
		align-items: center;
		color: rgba(51, 51, 51, 1);
		font-size: 56rpx;
		margin-top: 60rpx;
		uni-input{
			height: 56rpx !important;
			line-height: 56rpx;
			font-size: 56rpx;
			color: #cccccc;
		}
		::v-deep.uni-input-placeholder{
			color: #cccccc;
		}
	}
	// 提示
	.hint{
		margin-top: 32rpx;
		color: rgba(119, 119, 119, 1);
		line-height: 40rpx;
	}

// 收益说明
.explain{
	margin-top: 40rpx;
	.title{
		color: rgba(51, 51, 51, 1);
		font-size: 32rpx;
	}
	.form{
		display: flex;
		margin-top: 18rpx;
		.title{
			background-color: rgba(230, 245, 230, 1);
			height: 60rpx;
			line-height: 60rpx;
			padding-left: 16rpx;
			
		}
		.balance{
			width: 390rpx;
		}
		.interest-rate{
			flex: 1;
		}
		.item{
			height: 60rpx;
			line-height: 60rpx;
			padding-left: 16rpx;
			border:1px solid rgba(230, 245, 230, 1) ;
		}
	}
}


}
// 付款方式
.payment-method{
	margin: 24rpx 32rpx;
	background-color: #fff;
	padding: 32rpx;
	border-radius: 12px;
	.title{
		color: rgba(51, 51, 51, 1);
		font-size: 32rpx;
	}
	.we-chat{
		margin-top: 16rpx;
		display: flex;
		align-items: center;
		.icon{
			width: 40px;
			height: 40px;
			line-height: 20px;
			border-radius: 8px;
			border: 1px solid rgba(226, 226, 226, 1);
			display: flex;
			justify-content: center;
			align-items: center;
			img{
				vertical-align: middle;
			}
		}
		.text{
			margin-left: 32rpx;
			.title{
				color: rgba(16, 16, 16, 1);
			}
			.hint{
				color: rgba(153, 153, 153, 1);
				margin-top: 4rpx;
			}
		}
		.radio{
               margin-left:auto;
			   ::v-deep.uni-radio-input-checked{
				   background-color: #00B962 !important;
				   border-color: #00B962 !important;
			   }
			   ::v-deep.uni-radio-input{
				   width: 38rpx;
				   height: 38rpx;
			   }
		}
	}
	
}

.confirm{
	background-color: #ffffff;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999;
	padding: 26rpx 40rpx;
	.hint{
		color: rgba(102, 102, 102, 1);
		text-align: center;
		margin-bottom: 18rpx;
		text{
			color: #00B962;
		}
	}
	.confirm-btn{
		border-radius: 50px;
		background-color: rgba(0, 185, 98, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 36rpx;
		height: 88rpx;
		line-height: 88rpx;
	}
}

</style>