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

<template>
	<view class="centenr">
		<!-- 储值卡 -->
		<view class="top-box" v-if="type=='balance'">
			<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; " @click="goCode()"></image>
			</view>
			<view class="on-title">可用余额</view>
			<view class="on-num">¥{{cardBalance.cardBalance || 0}}</view>
			<view class="d-a">
				<view class="_dj">
					<view class="" v-if="cardBalance.giveAmount">¥{{cardBalance.cardBalance - cardBalance.giveAmount}}
					</view>
					<view class="" v-else>¥{{cardBalance.cardBalance || 0}}</view>
					<view style="font-size: 14px;">本金金额</view>
				</view>
				<view class="_dj">
					<view class="">¥{{cardBalance.giveAmount || 0}}</view>
					<view style="font-size: 14px;">赠送金额</view>
				</view>
			</view>
		</view>
		<!-- 囤油卡 -->
		<view class="top-box" v-if="type=='oilCard'">
			<view class="t-db">
				<view class="d-s">
					<view style="margin-right: 10px;">囤油卡</view>
				</view>
				<image src="../../static/new/rwm.png" style="width: 25px; height: 25px; " @click="goCode()"></image>
			</view>
			<view class="on-title">剩余油量（L）</view>
			<view class="on-num">¥{{cardBalance.cardBalance || 0}}</view>
		</view>
		<!-- 车队信息 -->
		<view class="top-box" v-if="type=='fleet'">
			<view class="t-db">
				<view class="d-s">
					<view style="margin-right: 10px;">储值卡</view>
					<view class="icon_">主卡</view>
				</view>
			</view>
			<view class="on-title">总余额（元）</view>
			<view class="on-num">123456.78</view>
			<view class="d-a">
				<view class="_dj">
					<view class="">10909.20</view>
					<view style="font-size: 14px;">本金金额（元）</view>
				</view>
				<view class="_dj">
					<view class="">109053.60</view>
					<view style="font-size: 14px;">赠送金额（元）</view>
				</view>
			</view>
		</view>

		<view class="bottom-box">
			<view class="or-aniu" @click="goMemberRecharge()">立即充值</view>
		</view>

		<!-- 储值卡 / 囤油卡 -->
		<view class="b_box" v-if="type == 'balance' || type == 'oilCard'">
			<view class="g-box" @click="godetail()">
				<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>
		<!-- 车队信息 -->
		<view class="b_box" v-if="type=='fleet'">
			<view class="g-box" @click="goFleet()">
				<view class="d-s">
					<image src="../../static/my/fleetCar.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">
				<view class="d-s">
					<image src="../../static/my/fleetMember.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">
				<view class="d-s">
					<image src="../../static/my/fleetAmount.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>

		<view class="but-sub" v-if="type=='fleet'">添加副卡</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="">
						{{equity.gzDetail}}
						<!-- 	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="">
						{{equity.qyDetail}}
						<!-- 1、优惠加油：
            ①使用储值卡在加油站加油通常可以享受一定的优惠，如每升油
            便宜0.1-0.8元不等，具体优惠幅度根据地区、时间段的促销活动
            而定。
            ②充值达到一定金额（如1000元、2000元、5000元）后，还可
            以享受一定期限（如3到6个月）的额外加油优惠，如1%到2%
            的优惠。
            2、积分回馈：
            ①使用储值卡加油可以累积积分，积分可用于兑换不同面值的电
            子充值卡、视频网站的会员或日常生活用品等。
            ②根据客户加油卡累计积分数值设置客户级别（如标准卡、金
            卡、铂金卡、钻石卡），不同级别的客户享受不同的积分回馈政
            策，积分积累速度更快，回馈更多。
            3、增值服务：
            ②支持线上充值和查询，方便持卡人随时掌握余额和积分
            情况。
            4、便利性：
            ①储值卡具有极高的便利性，可以实现无现金加油，减少携带现
            金的麻烦和风险。
            ②支持线上充值和查询，方便持卡人随时掌握余额和积分情况。 -->
					</view>
				</view>

			</view>
		</u-popup>

	</view>
</template>

<script>
	import request from "../../utils/request";
	export default {
		data() {
			return {
				type: "fleet",
				query: {
					chainStoreId: '',
					couponType: '',
					useStatus: 0,
					pageNo: 1,
					pageSize: 10
				},
				ruleShow: false,
				equityShow: false,
				windex: 0,
				cardBalance: {},
				equity: {}
			}
		},
		onLoad(e) {
			this.type = e.type
		},
		onShow() {
			this.query.chainStoreId = uni.getStorageSync('chainStoreId');
			this.getUserBalance()
			this.getEquity()
		},
		methods: {
			// 跳转车队信息
			goFleet(){
				uni.navigateTo({
					url: '/pagesMy/fleetInfo/index'
				})
			},
			goCode() {
				uni.navigateTo({
					url: '/pagesHome/QRcode/QRcode'
				})
			},
			// 获取储值卡权益信息
			getEquity() {
				let type = this.type == 'oilCard' ? 1 : 0
				request({
					url: '/cardValueRule/getQyAndGz',
					method: 'get',
					params: {
						storeId: uni.getStorageSync("storeId"),
						type: type
					}
				}).then(res => {
					if (res.code == 200) {
						this.equity = res.data
						console.log(res, '151');
					}
				})
			},
			// 跳转会员充值
			goMemberRecharge() {
				uni.navigateTo({
					url: '/pagesHome/memberRecharge/index?type=' + this.type
				})
			},
			getUserBalance() {
				request({
					url: '/business/userManager/user/getUserBalanceApplet',
					method: 'get',
					params: this.query
				}).then(res => {
					if (res.code == 200) {
						this.cardBalance = res.data
					}
				})
			},
			ruleclose() {
				this.ruleShow = false
			},
			equityclose() {
				this.equityShow = false
			},
			setIndex(index) {
				this.windex = index
			},
			godetail() {
				uni.navigateTo({
					url: '/pagesHome/cardDetails/detailed?type=' + this.type
				})
			}
		}
	}
</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;

	}

	.but-sub {
		width: 305px;
		height: 40px;
		line-height: 40px;
		margin: 0 auto;
		background-color: #FF9655;
		color: white;
		border-radius: 50px;
		text-align: center;
		margin-top: 35vh;
	}
</style>