JP-ChargeTeam51/pages/cardBag/cardDetail.vue

<template>
	<view>
		<ujp-navbar title="会员卡详情" :isBack="isMe">
			<view slot="right" style="margin-right: 10px;">

				<view class="iconfont qr-code" @click="openModalBl=true">
					&#xe60d;
				</view>
			</view>
		</ujp-navbar>
		<u-mask :show="show" @click="show = false">
			<u-image width="100%" :mode="'widthFix'" src="@/assets/static/img/guide_point2.png"></u-image>

		</u-mask>
		<u-modal v-model="show2" :content="content2" @confirm="confirmShow2" :show-cancel-button="true"
			confirm-color="#00b962"></u-modal>
		<u-modal v-model="show3" :content="content3" @confirm="confirmShow3" :show-cancel-button="true"
			confirm-color="#00b962"></u-modal>


		<u-modal v-model="openModalBl" @confirm="confirmPhone" confirm-text="拨打电话" confirm-color="#606266"
			:show-cancel-button="true" ref="uModal" :asyncClose="true" title="客服电话" :content="content"
			:content-style="{fontSize: '24px',color: '#101010'}"></u-modal>
		<!-- 头部 -->
		<view class="header4" v-if="item.type==4">
			<view class="discount-card-4" >
				<img v-if="regUserCard.status==2" class="corner-mark" src="@/assets/img/nonactivated.png" alt="">
				<view class="top" >
					<view class="right-corner">
						<img class="rightCorner" src="@/assets/img/rightCorner.png" alt="">
				
					</view>
				</view>
				
				<view class="img">
					{{item.name}}
				</view>
				<view class="card-number2" v-if="regUserCard.status==2" >
					湖北省内平台自营站点充电通用
				</view>
				<view class="card-number"  v-if="regUserCard.status==2">
					卡号：{{regUserCard.cardNo}}
				</view>
				<view class="progress" v-if="regUserCard.status==1">
					<view class="time">
						{{thisendTime(regUserCard.endTime)}}到期 剩余{{setValidity(thisdaysDistance(regUserCard.endTime))}}
					</view>
					
					<view class="electric-quantity" v-if="regUserCard.classify==2&&(regUserCard.chargeDegreeLimit!=0)">
						已用{{regUserCard.chargedDegree}}度 / 共{{regUserCard.chargeDegreeLimit}}度
					</view>
					
				</view>
				<ujp-line-progress v-if="regUserCard.status==1" active-color="#2979ff"
					:percent="thispercent(regUserCard)"></ujp-line-progress>
				
			</view>
			<img  class="cardCover" src="@/assets/img/cardCover.png" alt="">
			
		</view>
		<view :class="{
			header:regUserCard.status==1,
			header2:regUserCard.status==2
		}" v-else >
			<view class="discount-card" >

				<img v-if="regUserCard.status==2" class="corner-mark" src="@/assets/img/nonactivated.png" alt="">
				<view class="top" v-if="regUserCard.status==2">
					<view class="right-corner">
						<img class="rightCorner" src="@/assets/img/rightCorner.png" alt="">

						<img class="icon" v-if="item.type==3" src="@/assets/img/mb-times@3x.png" alt="">

						<img class="picc" v-if="item.type==3" src="@/assets/img/picc.png" alt="">
					</view>
				</view>

				<view class="img icon_crown">
				<!-- 	<img v-if="item.classify==1" src="@/assets/img/monthCard.png" alt="">
					<img v-else-if="item.classify==2&&item.serviceFeeDiscountRate==60" src="@/assets/img/0.6off.png"
						alt="">
					<img v-else-if="item.classify==2&&item.serviceFeeDiscountRate==50" src="@/assets/img/halfoff.png"
						alt="">
					<img v-else src="@/assets/img/monthCard.png" alt=""> -->
					
					<img  src="@/assets/img/icon_crown.png" alt="">
					{{item.name}}
				</view>
				<view class="card-number" v-if="regUserCard.status==2">
					卡号：{{regUserCard.cardNo}}
				</view>
				<view class="progress" v-if="regUserCard.status==1">
					<view class="time">
						{{thisendTime(regUserCard.endTime)}}到期 剩余{{setValidity(thisdaysDistance(regUserCard.endTime))}}
					</view>
					<view class="electric-quantity" v-if="regUserCard.classify==2&&(regUserCard.chargeDegreeLimit!=0)">
						已用{{regUserCard.chargedDegree}}度 / 共{{regUserCard.chargeDegreeLimit}}度
					</view>
					<view class="electric-quantity" v-if="item.classify==2&&(regUserCard.chargeDegreeLimit==0)&&regUserCard.saveInformation">
						
						已用{{regUserCard.saveInformation.num}}次 /
						共省{{regUserCard.saveInformation.saveMoney}}元
					</view>
					
				</view>
				<ujp-line-progress v-if="regUserCard.status==1" active-color="#2979ff"
					:percent="thispercent(regUserCard)"></ujp-line-progress>
				<view class="bottom" v-if="regUserCard.status==1">
					<view class="right-corner">
						<img class="rightCorner" src="@/assets/img/rightCorner.png" alt="">

						<img v-if="item.type==3" class="icon" src="@/assets/img/mb-times@3x.png" alt="">

						<img v-if="item.type==3" class="picc" src="@/assets/img/picc.png" alt="">
					</view>
				</view>
			</view>
		
			<img  class="cardCover" src="@/assets/img/cardCover.png" alt="">
		</view>

		<!-- 卡片信息 -->
		<view class="main" v-if="regUserCard.status==2">

			<view class="details">
				<view class="headline">
					<view class="title">
						卡片信息
					</view>
					<view class="show" v-if="!this.showHide" @click="showHide=true">
						显示<u-icon name="eye"></u-icon>
					</view>
					<view class="hide" v-if="this.showHide" @click="showHide=false">
						隐藏<u-icon name="eye-off"></u-icon>
					</view>
				</view>
				<view class="content" v-if="this.showHide">
					<view class="item">
						<view class="item-title">
							卡名
						</view>
						<view class="item-value">
							{{item.name}}
						</view>
					</view>
					<view class="item" v-if="item.type==4">
											<view class="item-title">
												折扣率
											</view>
											<view class="item-value" style="
					    
					">
												{{item.remark}}
											</view>
											
					</view>
					<view class="item" v-else >
						<view class="item-title">
							折扣率
						</view>
						<view class="item-value">
							{{regUserCard.classify==1?"服务费全免":""}}
							{{regUserCard.classify==2?"服务费"+(item.serviceFeeDiscountRate/10)+"折":""}}
						</view>
					</view>
					<view class="item">
						<view class="item-title">
							规格
						</view>
						<view class="item-value" v-if="regUserCard.classify==1">
							服务费全免 （有效期{{setValidity(item.periodOfValidity)}}）
						</view>
						<view class="item-value" v-if="regUserCard.classify==2">
							可用{{item.chargeDegreeLimit}}度（有效期{{setValidity(item.periodOfValidity)}}）
						</view>
						
					</view>
					

				</view>




			</view>
			<!-- 按钮 -->
			<view class="btn" v-if="isMe">
				<button class="share" @click="show=true">转赠分享<img class="icon"
						src="@/assets/img/riLine-gift-2-line@3x.png" alt=""></button>
				<button class="activate" @click="show2Btn">立即激活</button>
			</view>
			<view class="btn2" v-else>

				<button class="get" @click="show2Btn">领用会员卡</button>

			</view>
		</view>

		<!-- 卡片信息 -->
		<view class="main" v-if="regUserCard.status==1">
			<view class="title">
				会员信息
			</view>
			<view class="details">
				<view class="item">
					<view class="item-title">
						会员昵称
					</view>
					<view class="item-value">
						{{userInfo.nickName}}
					</view>
				</view>
				<view class="item">
					<view class="item-title">
						绑定账号
					</view>
					<view class="item-value">
						{{getphone(userInfo.phone)}}
					</view>
				</view>
				<view class="item">
					<view class="item-title">
						绑定车辆
					</view>
					<view class="item-value">

						{{userInfo.carNum}}
					</view>
				</view>
			</view>
			<view class="title">
				卡片信息
			</view>
			<view class="details">
				<view class="item">
					<view class="item-title">
						卡状态
					</view>
					<view class="item-value">
						已激活
					</view>
				</view>
				<view class="item">
					<view class="item-title">
						卡名
					</view>
					<view class="item-value">
						{{item.name}}
					</view>
				</view>
				<view class="item" v-if="item.type==4">
										<view class="item-title">
											折扣率
										</view>
										<view class="item-value" style="
				    
				">
											{{item.remark}}
										</view>
										
				</view>
				<view class="item" v-else>
					<view class="item-title">
						折扣率
					</view>
					<view class="item-value" v-if="item.classify==1">
						服务费全免
					</view>
					<view class="item-value" v-if="item.classify==2">
						{{item.serviceFeeDiscountRate/10}}折
					</view>
				</view>
				<view class="item" >
					<view class="item-title">
						规格
					</view>
					<view class="item-value" v-if="regUserCard.classify==1">
						服务费全免 （有效期{{setValidity(item.periodOfValidity)}}）
					</view>
					<view class="item-value" v-if="regUserCard.classify==2&&regUserCard.chargeDegreeLimit">
						可用{{item.chargeDegreeLimit}}度（有效期{{setValidity(item.periodOfValidity)}}）
					</view>
					<view class="item-value" v-if="regUserCard.classify==2&&!regUserCard.chargeDegreeLimit">
						不限充电度数（有效期{{setValidity(item.periodOfValidity)}}）
					</view>
				</view>
				<view class="item">
					<view class="item-title">
						有效期
					</view>
					<view class="item-value">
						{{regUserCard.startTime.substring(0,10)}}至{{regUserCard.endTime.substring(0,10)}}
					</view>
				</view>
				<view class="item" v-if="regUserCard.classify==2&&regUserCard.chargeDegreeLimit">
					<view class="item-title">
						剩余度数
					</view>
					<view class="item-value">
						{{(regUserCard.chargeDegreeLimit-regUserCard.chargedDegree).toFixed(0)}}度
					</view>
				</view>
				<view class="item">
					<view class="item-title">
						卡号
					</view>
					<view class="item-value">
						{{regUserCard.cardNo}}
					</view>
				</view>
			</view>
			<!-- 按钮 -->
			<button class="check" @click="gotoUrl('pages/article/details?code=FWF6ZK')">查看使用规则</button>
		</view>

	</view>



</template>


<script>
	// import * as API from '@/apis/index.js'
	import * as API from '@/apis/order.js'
	import * as API_weixin from '@/apis/weixin.js'
	import wx from 'weixin-js-sdk'

	import {
		newDate,
		daysDistance

	} from '@/utils'
	export default {
		data() {
			return {
				id: "",
				item: {},
				regUserCard: {},
				orderInfo: {},

				content: "400-8899-619",
				openModalBl: false,
				expireUserCardList: [],
				showHide: false,
				show2: false,
				show: false,
				content2: '确认激活此会员卡吗？',
				content3: '领用会员卡需要注册成为会员，点击前往',
				show3: false,
				//userCard: {},
				isMe: false,
				projectName: "",
				userInfo: {},
				carNum: ""
			}
		},
		onLoad(op) {
			
			this.id = op.id
			this.get_wx_config();
			//this.userInfo=this.carhelp.getPersonInfo()
			this.projectName = process.car.ProjectName;

			var info = this.carhelp.getPersonInfo()
			if (info.id && info.userType == 2) {

			} else {
				this.show3 = true
			}

			this.getChargeList();
		},
		onReady() {

			var consumerPhone = "400-8899-619"
			// img="https://yktwechat.xiaoxinda.com/config/xxd2021.jpg"		
			if (consumerPhone) {
				this.content = consumerPhone
			}

		},
		methods: {
			getphone(phone) {
				var phoneget = ""
				if (phone) {
					var phone1 = phone.slice(0, 3);
					var phone2 = phone.slice(-4);
					phoneget = phone1 + '****' + phone2;
				}
				return phoneget;
			},
			show2Btn() {
				var info = this.carhelp.getPersonInfo()
				if (info.id && info.userType == 2) {
					this.show2 = true
				} else {
					this.show3 = true
				}
			},
			confirmShow3() {
				uni.navigateTo({
					url: "/pages/login/login?jpcode2=card&codeId=" + this.id
				})
			},
			confirmShow2() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				API.activateCard({
					id: this.id
				}).then((res) => {
					uni.hideLoading();
					uni.showToast({
						title: "领取成功"
					})
					this.getChargeList();

					//console.log(obj)

					//this.recordsTotal = res.data.recordsTotal;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			//获取微信jssdk配置信息
			get_wx_config() {
				//("get_wx_configget_wx_configget_wx_configget_wx_config")
				var _this = this
				API_weixin.getConfig().then(response => {
					var wxconfig = response.data.wxConfig;
					console.log(222)
					wx.config({
						debug: false, // 开启调试模式,
						appId: wxconfig.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
						timestamp: wxconfig.timestamp, // 必填，生成签名的时间戳
						nonceStr: wxconfig.nonceStr, // 必填，生成签名的随机串
						signature: wxconfig.signature, // 必填，签名，见附录1
						jsApiList: ['updateAppMessageShareData',
							'updateTimelineShareData', 'onMenuShareTimeline', 'onMenuShareAppMessage',
							'onMenuShareQQ', 'onMenuShareQZone'
						], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2

					});
					console.log(222)
					_this.wxShare()
					wx.error(function(res) {
						console.log('微信api配置出错');
					});
				}).catch(error => {

					//(error);
				})

			},
			//微信分享自定义
			wxShare() {
				console.log(111)
				var img =
					"http://oss.xiaoxinda.com/charging/chargingconfigure/2022/6/6/ec228c56-487a-4ae1-ac6f-37284060fbba/hongbao.jpg"
				// img="https://yktwechat.xiaoxinda.com/config/xxd2021.jpg"		
				// if (indexLogo) {
				// 	this.indexLogo = indexLogo;
				// }
				var info = this.carhelp.getPersonInfo()
				//var img=require("@/static/img/aboutus.png")
				////(this.nowItem);
				var ProjectName = process.car.ProjectName; //info.nickName+
				var nickName = info.nickName ? info.nickName : '好友';
				var title = nickName + "赠送您一张"
				if(this.item.type==4){
					title += "'"+this.projectName+this.item.name+"'"
				}else  if (this.item.classify == 1) {
					title += "'服务费月卡'"
				} else if (this.item.classify == 2 && this.item.serviceFeeDiscountRate == 60) {
					title += "'服务费6折卡'"
				} else if (this.item.classify == 2 && this.item.serviceFeeDiscountRate == 50 && this.item
					.periodOfValidity == 365) {
					title += "'充电5折卡年卡'"
				} else if (this.item.classify == 2 && this.item.serviceFeeDiscountRate == 50) {
					title += "'服务费5折卡'"
				}
			
				var desc = ProjectName
				let joinUrl = window.location.href.split("/team51/")[0] + "/team51/#/pages/cardBag/cardDetail?id=" + this
					.id
				//this.joinUrl=joinUrl;

				var _this = this;
				wx.ready(function() {

					wx.onMenuShareAppMessage({
						title: title,
						desc: desc,
						link: joinUrl,
						imgUrl: img,
						success: function() {
							// 设置成功
							_this.$emit("wxShare", null);
						}
					})
					wx.onMenuShareTimeline({
						title: title,
						desc: desc,
						link: joinUrl,
						imgUrl: img,
						success: function() {
							// 设置成功
							_this.$emit("wxShare", null);
						}
					})
					wx.updateAppMessageShareData({
						title: title,
						desc: desc,
						link: joinUrl,
						imgUrl: img,
						success: function() {
							//("updateAppMessageShareData")
							// 设置成功
							_this.$emit("wxShare", null);
						}
					})
					wx.updateTimelineShareData({
						title: title,
						desc: desc,
						link: joinUrl,
						imgUrl: img,
						success: function() {
							//("updateTimelineShareData")
							// 设置成功
							_this.$emit("wxShare", null);
						}
					})
					console.log("readyreadyreadyreadyready")
				});
			},

			thisendTime(endTime) {
				if (endTime) {
					var reg = new RegExp('-', 'gi')
					var str = endTime.substring(0, 10).replace(reg, '.')
					return str
				}
				return ''
			},
			thispercent(userCard) {
				if (userCard.classify == 1||(userCard.classify==2&&userCard.chargeDegreeLimit==0)) {
					var k1 = daysDistance(userCard.startTime, userCard.endTime)
					var k2 = this.thisdaysDistance(userCard.endTime)
					var p = (k1 - k2) / k2 * 100
					if (p > 100) {
						p = 100
					}
					return p.toFixed(0)
				} else if (userCard.classify == 2) {
					var p = 0

					if (userCard && userCard.chargeDegreeLimit) {
						p = userCard.chargedDegree / userCard.chargeDegreeLimit * 100
					}
					if (p > 100) {
						p = 100
					}
					return p.toFixed(0)
				} else {
					return 0
				}

			},
			thisdaysDistance(endTime) {

				var date = new Date()
				var date2 = newDate(endTime);
				return daysDistance(date, date2)

			},
			thisdaysDistance2() {
				if (this.item.endTime) {
					var date = newDate(this.item.startTime)
					var date2 = newDate(this.item.endTime);
					return daysDistance(date, date2)
				}
				return 0

			},
			regUserCarList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				API.regUserCarList({
					id: this.id
				}).then((res) => {
					uni.hideLoading();
					if (res.data && res.data.length) {
						this.carNum = res.data[0].carNum
					}
					//this.recordsTotal = res.data.recordsTotal;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getChargeList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				API.buyCardDetail({
					id: this.id
				}).then((res) => {
					uni.hideLoading();
					this.item = res.data.monthlyRentCard;
					this.regUserCard = res.data.regUserCard;
					// if(this.regUserCard.status==1){
					// 	this.regUserCarList()
					// }
					this.userInfo = res.data.buyUser;

					var info = this.carhelp.getPersonInfo()

					if (info && info.id && info.id == this.regUserCard.regUserId) {
						this.isMe = true
					}
					this.orderInfo = res.data.orderInfo;
					//console.log(obj)

					//this.recordsTotal = res.data.recordsTotal;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			confirmPhone() {
				this.openModalBl = false;
				uni.makePhoneCall({
					phoneNumber: this.content //仅为示例
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}
	
	// 头部
	.header4 {
		padding: 24rpx 32rpx 0;
		opacity: 0.9;
		background: linear-gradient(30deg, rgba(59, 182, 254, 1) 13.4%, rgba(0, 185, 98, 1) 85.87%);
		position: relative;
	
		.discount-card-4 {
			background: url(@/assets/img/card/lovecn.jpg);
			background-size: 686rpx 400rpx;
			border-radius: 8px 8px 0 0;
		//	background-color: #1D1F2A;
	
			padding: 40rpx;
			margin-top: 24rpx;
			height: 400rpx;
			position: relative;
	
			.corner-mark {
				width: 128rpx;
				height: 128rpx;
				position: absolute;
				top: 0;
				right: 0;
			}
	
			.img {
				margin-top: 120rpx;
				color: rgba(255, 214, 149, 1);
				font-size: 48rpx;
				  font-family: "SimSun", Arial, sans-serif;  
				font-weight: 400;
				  text-shadow: 2px 1px 0px #800400 ; 
			}
	
			.u-progress {
				//height: 20rpx !important;
				background-color: rgb(207, 76, 66) !important;
				color: #fff;
			}
	
			.progress {
				display: flex;
				justify-content: space-between;
				color: #FFF;
				font-size: 24rpx;
				margin-bottom: 16rpx;
				//margin-top: 24rpx;
				
			}
	
			::v-deep .u-active {
				background: linear-gradient(84.49deg, rgba(59, 182, 254, 1) 4.25%, rgba(0, 185, 98, 1) 95.02%);
			}
	
			.top {
	
	
	
				.right-corner {
	
	
					display: flex;
					align-items: center;
					height: 36rpx;
	
					.rightCorner {
						width: 168rpx;
						margin-left: 8rpx;
	
					}
	
					.icon {
						width: 24rpx;
						height: 24rpx;
						margin-left: 8rpx;
	
	
					}
	
					.picc {
						width: 124rpx;
						height: 32rpx;
						margin-left: 8rpx;
					}
				}
			}
	
			// 右下角角标
			.bottom {
				position: absolute;
				bottom: 48rpx;
				right: 40rpx;
	
	
				.right-corner {
	
					display: flex;
					align-items: center;
					justify-content: flex-end;
					height: 32rpx;
	
					.rightCorner {
						width: 148rpx;
	
					}
	
					.icon {
						width: 24rpx;
						height: 24rpx;
						margin-left: 8rpx;
	
	
					}
	
					.picc {
						width: 124rpx;
	
						margin-left: 8rpx;
					}
				}
			}
			 
		}
	
		.cardCover {
	
			width: 100%;
			height: 70rpx;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0rpx;
			z-index: 999;
		}
		.card-number2{
			font-size: 24rpx;
			color: rgba(255, 255, 255, 1);

		}
		.card-number{
			font-size: 28rpx;
			color: rgba(255, 255, 255, 1);

		}
	}
	
	// 头部
	.header {
		padding: 24rpx 32rpx 0;
		opacity: 0.9;
		background: linear-gradient(30deg, rgba(59, 182, 254, 1) 13.4%, rgba(0, 185, 98, 1) 85.87%);
		position: relative;

		.discount-card {
			background: url(@/assets/img/cardDetail.png);
			background-size: 686rpx 400rpx;
			border-radius: 8px 8px 0 0;
			background-color: #1D1F2A;

			padding: 24rpx;
			margin-top: 24rpx;
			height: 400rpx;
			position: relative;

			.corner-mark {
				width: 128rpx;
				height: 128rpx;
				position: absolute;
				top: 0;
				right: 0;
			}

			.img {
				//width: 262rpx;
				height: 56rpx;

				img {
					//width: 100%;
					height: 56rpx;
				}
			}
			.icon_crown{
				display: flex;
				    align-items: center;
					color: rgba(225, 192, 130, 1);
			}

			.u-progress {
				height: 20rpx !important;
			}

			.progress {
				display: flex;
				justify-content: space-between;
				color: rgba(219, 219, 219, 1);
				font-size: 24rpx;
				margin-bottom: 16rpx;
				margin-top: 24rpx;
			}

			::v-deep .u-active {
				background: linear-gradient(84.49deg, rgba(59, 182, 254, 1) 4.25%, rgba(0, 185, 98, 1) 95.02%);
			}

			.top {



				.right-corner {


					display: flex;
					align-items: center;
					height: 36rpx;

					.rightCorner {
						width: 148rpx;
						margin-left: 8rpx;

					}

					.icon {
						width: 24rpx;
						height: 24rpx;
						margin-left: 8rpx;


					}

					.picc {
						width: 124rpx;
						height: 32rpx;
						margin-left: 8rpx;
					}
				}
			}

			// 右下角角标
			.bottom {
				position: absolute;
				bottom: 48rpx;
				right: 40rpx;


				.right-corner {

					display: flex;
					align-items: center;
					justify-content: flex-end;
					height: 32rpx;

					.rightCorner {
						width: 148rpx;

					}

					.icon {
						width: 24rpx;
						height: 24rpx;
						margin-left: 8rpx;


					}

					.picc {
						width: 124rpx;

						margin-left: 8rpx;
					}
				}
			}
		}

		.cardCover {

			width: 100%;
			height: 70rpx;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0rpx;
			z-index: 999;
		}
	}

	.header2 {
		padding: 24rpx 32rpx 0;
		opacity: 0.9;
		background: linear-gradient(30deg, rgba(59, 182, 254, 1) 13.4%, rgba(0, 185, 98, 1) 85.87%);
		position: relative;

		.discount-card {
			background: url(@/assets/img/cardDetail.png);
			background-size: 686rpx 400rpx;
			border-radius: 8px 8px 0 0;
			background-color: #1D1F2A;

			padding: 24rpx;
			margin-top: 24rpx;
			height: 400rpx;
			position: relative;

			.corner-mark {
				width: 128rpx;
				height: 128rpx;
				position: absolute;
				top: 0;
				right: 0;
			}

			.img {
				margin: 82rpx auto 0;
				width: 486rpx;
				height: 104rpx;


				img {
					width: 100%;
				}
			}





			.top {



				.right-corner {


					display: flex;
					align-items: center;
					height: 36rpx;

					.rightCorner {
						width: 148rpx;
						margin-left: 8rpx;

					}

					.icon {
						width: 24rpx;
						height: 24rpx;
						margin-left: 8rpx;


					}

					.picc {
						width: 124rpx;
						height: 32rpx;
						margin-left: 8rpx;
					}
				}
			}
		}

		.cardCover {

			width: 100%;
			height: 70rpx;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0rpx;
			z-index: 999;
		}

		.card-number {
			color: rgba(209, 178, 121, 1);
			text-align: center;
			margin-top: 8rpx;
		}
		
	}

	// 卡片信息
	.main {
		background-color: #fff;
		padding: 32rpx;
		padding-bottom: 60px;

		.headline {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 32rpx;

			.title {
				color: rgba(16, 16, 16, 1);

			}

			.show,
			.hide {
				color: rgba(119, 119, 119, 1);



			}
		}

		.title {
			color: rgba(16, 16, 16, 1);
			font-size: 32rpx;
		}

		.details {
			margin-top: 16rpx;
			border-radius: 12px;
			padding: 32rpx 24rpx;
			background-color: rgba(255, 255, 255, 1);
			text-align: center;
			border: 1px solid rgba(226, 226, 226, 1);
			margin-bottom: 40rpx;

			.item {
				display: flex;
				margin-top: 24rpx;

				.item-title {
					min-width: 128rpx;
					color: #777777;
					text-align: left;
				}

				.item-value {
					margin-left: 16rpx;
					color: #101010;
					text-align: start;
				}
			}
		}

		.btn2 {
			margin-top: 32rpx;

			.get {
				border-radius: 50px;
				background: linear-gradient(90deg, rgba(0, 171, 91, 1) 0%, rgba(0, 209, 66, 1) 100%);
				color: rgba(255, 255, 255, 1);
				font-size: 16px;
				text-align: center;
			}
		}

		//按钮
		.btn {
			margin-top: 32rpx;
			display: flex;
			justify-content: space-between;

			.share {
				width: 328rpx;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 50px;
				background-color: rgba(255, 255, 255, 1);
				text-align: center;
				border: 1px solid rgba(255, 150, 0, 1);
				color: rgba(255, 150, 0, 1);
				font-size: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.icon {

					width: 36rpx;
					height: 36rpx;

				}
			}

			.activate {
				width: 328rpx;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 50px;
				background: linear-gradient(90deg, rgba(0, 171, 91, 1) 0%, rgba(0, 209, 66, 1) 100%);
				color: rgba(255, 255, 255, 1);
				font-size: 32rpx
			}
		}
	}

	// 查看
	.check {
		position: fixed;
		bottom: 32rpx;
		left: 32rpx;
		right: 32rpx;
		font-size: 32rpx;
		border-radius: 50px;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(0, 185, 98, 1);
		border: 1px solid rgba(0, 185, 98, 1);
	}
</style>