oil-station/gasStation-uni/pagesHome/cardDetails/index.vue

<template>
	<view class="centenr">
		<view class="top-box">
			<view class="t-db">
				<view class="d-s">
					<view style="margin-right: 10px;">储值卡</view>
					<view class="icon_">主卡</view>
				</view>
				<image src="../../static/new/rwm.png" style="width: 25px; height: 25px; "></image>
			</view>
			<view class="on-title">可用余额</view>
			<view class="on-num">¥123456.98</view>
			<view class="d-a">
				<view class="_dj">
					<view class="">10909.00</view>
					<view style="font-size: 14px;">本金金额</view>
				</view>
				<view class="_dj">
					<view class="">10909.00</view>
					<view style="font-size: 14px;">赠送金额</view>
				</view>
			</view>
		</view>
		<view class="bottom-box">
			<view class="or-aniu">立即充值</view>
		</view>
		<view class="b_box">
			<view class="g-box">
				<view class="d-s">
					<image src="../../static/new/k1.png" style="width: 20px; height: 20px;margin-right: 5px; "></image>
					<view class="">余额明细</view>
				</view>
				<u-icon name="arrow-right" color="#333"></u-icon>
			</view>
			<view class="g-box" @click="equityShow= true">
				<view class="d-s">
					<image src="../../static/new/k2.png" style="width: 20px; height: 20px;margin-right: 5px; "></image>
					<view class="">权益说明</view>
				</view>
				<u-icon name="arrow-right" color="#333"></u-icon>
			</view>
			<view class="g-box" @click="ruleShow = true">
				<view class="d-s">
					<image src="../../static/new/k3.png" style="width: 20px; height: 20px;margin-right: 5px; "></image>
					<view class="">规则说明</view>
				</view>
				<u-icon name="arrow-right" color="#333"></u-icon>
			</view>
		</view>
		<u-popup :show="ruleShow" :closeable="true" :round="10" mode="bottom" @close="ruleclose">
			<view class="_tbox">
				<view class="_btop">规则说明</view>
				<view class="_bbox">
					<!-- <view class="b_title">获取您的位置信息</view> -->
					<view class="">1、开卡与充值：
						①开卡通常需要携带本人身份证原件到油站办理，并支付一定的
						工本费（如15元左右）。部分站点首次充值达到一定金额（如50
						0元或1000元）可以免除开卡费用。
						②充值可以通过线上APP或到加油站进行，充值金额可自由选择，
						但一般会有一定的优惠活动，如充值100元赠送3元等。
						2、使用与管理：
						①储值卡按适用对象分为记名卡和不记名卡两种。记名卡可以享
						受积分回馈和其他增值服务，不记名卡则不能。
						②加油时需将储值卡插入加油卡槽内，按照提示选择加油金额并
						输入密码（如有设置）即可完成加油。加油后需妥善保管好加油
						卡和加油小票。
						③储值卡应妥善保管，如有丢失应及时挂失，挂失前造成的经济
						损失由持卡人承担。
						3、积分管理：
						①积分累积和回馈政策根据油站的具体规定执行，持卡人可通过
						油站官网、APP或客服热线查询积分情况。
						②积分有效期和兑换规则需根据油站的具体规定执行，一般会有
						一定的限制条件。
						4、其他规定：
						①部分油站可能对储值卡的使用范围进行限制，如仅限本油站或
						特定品牌油站使用。
						②持卡人应遵守油站的相关规定和制度，如不得使用储值卡进行
						套现、购买非油品等违规行为。</view>
				</view>

			</view>
		</u-popup>
		<u-popup :show="equityShow" :closeable="true" :round="10" mode="bottom" @close="equityclose">
			<view class="_tbox">
				<view class="_btop">权益说明</view>
				<view class="_bbox">
					<!-- <view class="b_title">获取您的位置信息</view> -->
					<view class="">1、优惠加油：
						①使用储值卡在加油站加油通常可以享受一定的优惠，如每升油
						便宜0.1-0.8元不等，具体优惠幅度根据地区、时间段的促销活动
						而定。
						②充值达到一定金额（如1000元、2000元、5000元）后，还可
						以享受一定期限（如3到6个月）的额外加油优惠，如1%到2%
						的优惠。
						2、积分回馈：
						①使用储值卡加油可以累积积分，积分可用于兑换不同面值的电
						子充值卡、视频网站的会员或日常生活用品等。
						②根据客户加油卡累计积分数值设置客户级别（如标准卡、金
						卡、铂金卡、钻石卡），不同级别的客户享受不同的积分回馈政
						策，积分积累速度更快，回馈更多。
						3、增值服务：
						②支持线上充值和查询，方便持卡人随时掌握余额和积分
						情况。
						4、便利性：
						①储值卡具有极高的便利性，可以实现无现金加油，减少携带现
						金的麻烦和风险。
						②支持线上充值和查询，方便持卡人随时掌握余额和积分情况。</view>
				</view>

			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				ruleShow: false,
				equityShow: false,
				windex: 0
			}
		},
		methods: {
			ruleclose() {
				this.ruleShow = false
			},
			equityclose() {
				this.equityShow = false
			},
			setIndex(index) {
				this.windex = index
			}
		}
	}
</script>

<style scoped lang="scss">
	.centenr {
		background: #F9F9F9;
		width: 100%;
		height: 100vh;
	}

	.top-box {
		width: 95%;
		height: 150px;
		background: linear-gradient(135deg, #F77955 0%, #FFA360 100%, #F9C58C 100%);
		box-sizing: border-box;
		padding: 10px;
		margin: 0 auto;
		color: #fff;
	}

	.bottom-box {
		width: 95%;
		height: 70px;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
	}

	.t-db {
		width: 100%;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.b_box {
		width: 95%;
		margin: 15px auto;
		background: #fff;

	}

	.g-box {
		width: 100%;
		box-sizing: border-box;
		padding: 15px 10px;
		border-bottom: 1px solid #EEEEEE;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.d-s {
		display: flex;
		align-items: center;
	}

	.or-aniu {
		font-size: 14px;
		color: #FA6400;
		width: 195px;
		height: 30px;
		border: 1px solid #FA6400;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.icon_ {
		width: 30px;
		height: 16px;
		background: rgba(255, 255, 255, 0.48);
		border-radius: 2px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-weight: 500;
		font-size: 10px;
	}

	.d-a {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.on-title {
		font-size: 14px;
		color: #FFFFFF;
		width: 100%;
		text-align: center;

	}

	.on-num {
		font-size: 24px;
		color: #FFFFFF;
		width: 100%;
		text-align: center;
		margin: 10px auto;
	}

	._dj {
		font-size: 14px;
	}

	._tbox {
		border-radius: 10px;
		background: #fff;
		width: 100%;


	}

	._btop {
		box-sizing: border-box;
		padding: 15px;
		border-bottom: 1px solid #EEEEEE;
		text-align: center;
		font-weight: 600;
		font-size: 14px;
		color: #333333;
	}

	._bbox {
		box-sizing: border-box;
		padding: 15px;
		font-weight: 400;
		font-size: 14px;
		color: #333333;
		line-height: 18px;
	}

	.b_title {
		font-weight: bold;
	}


	.b-cen {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

	}
</style>