JP-ChargeTeam51/pages/user/index.vue

<template>
	<view>
		<view class="header">
			<!-- 用户信息 -->
			<view class="userinfo" :class="{
				userinfo2:personInfo&&personInfo.userType==2
			}">
				<view class="infos" @click="toData"  >
					<view class="head-portrait"  >
						
						<u-avatar :src="userId ? headImg : '../../assets/img/head.png'" size="96"></u-avatar>
					</view>
					
					<view class="username" v-if="personInfo&&personInfo.userType==1" >
						<view class="name" style="font-size: 56rpx; width: 360rpx;line-height: 100rpx;">
							游客模式
						</view>
						
					</view>
					<view class=""  v-if="personInfo&&personInfo.userType==1" >
						
					</view>
					
					<view class="username" v-else >
						<view class="name" :style="elderStatus ? 'font-size: 28px;' : ''">
							{{userId ? nickName : '登录 / 注册'}}
						</view>
						<view class="change" :style="elderStatus ? 'font-size: 16px;' : ''">
							{{userId ? '点击修改个人信息' : '登录后享受更多优惠及服务'}}
						</view>
					</view>
				</view>
				<view class="right"  v-if="personInfo&&personInfo.userType==2" >
					<img src="@/assets/img/9-4/联盟会员.svg" v-if="personInfo.memberLevel==1||personInfo.memberLevel==null" >
					<img src="@/assets/img/9-4/黄金会员.svg" v-if="personInfo.memberLevel==2" >
					<img src="@/assets/img/9-4/铂金会员.svg" v-if="personInfo.memberLevel==3" >
					
					<view class="rightText rightTextA"  v-if="personInfo.memberLevel==1||personInfo.memberLevel==null">
						<view class="rightText1">{{personInfo.memberLevelStr}}</view>
						<view class="rightText2">可购买6折卡</view>
						
					</view>
					<view class="rightText rightTextB"  v-if="personInfo.memberLevel==2">
						<view class="rightText1">{{personInfo.memberLevelStr}}</view>
						<view class="rightText2">可购买月卡</view>
					</view>
					<view class="rightText rightTextC"  v-if="personInfo.memberLevel==3">
						<view class="rightText1">{{personInfo.memberLevelStr}}</view>
						<view class="rightText2">可购买月卡</view>
					</view>
				</view>
				
			</view>
<!-- 卡包入口 -->
      <view class="my-infos"   v-if="(personInfo&&personInfo.userType==2)">
      	<view class="item">
      		<view class="item-value">
      			{{personAccount.availableAmount != null ? personAccount.availableAmount.toFixed(2) : '0.00'}}
      		</view>
			<view class="item-title"  @click="toBalance">
				余额<u-icon name="arrow-right" color="#B8BDC4" size="2"></u-icon>
			</view>
      	</view>
		
		<view class="line">
			
		</view>
		<view class="item ">
			<view class="item-value">
				
				{{businessVipList.length+ ( userId&&userCardBool?1:0)}}
			</view>
			<view class="item-title"  @click="gotoUrl('pages/cardBag/cardBag')" >
				会员卡<u-icon name="arrow-right" color="#B8BDC4" size="2"></u-icon>
			</view>
		</view>
		
		<view class="line">
			
		</view>
		<view class="item">
			<view class="item-value">
				{{personAccount.couponAmount}}
			</view>
			<view class="item-title"  @click="toMyCoupon">
				优惠券<u-icon name="arrow-right" color="#B8BDC4" size="2"></u-icon>
			</view>
		</view>
      </view>

    
			<!-- 卡片 -->
			<view v-for="(item,i) in  businessVipList" :key="i"    v-if="false"
			 @click="gotoUrl('pages/user/company-vip?id='+item.platform)"
			 class="card" >
				<view  class="card2">
					
					<view class="title">
						<text class="img">
							<img src="../../assets/img/riFill-building-fill@4x.png" alt="">
						</text>
						{{item.platformN}}
						
					</view>
					<view class="view" >
						查看<text class="iconfont">&#xe600;</text>
					</view>
				</view>
				<view class="cardspan" v-if="item.entAccountEnabled&&item.enterpriseAccount!=null">
					企业余额：{{item.enterpriseAccount.totalAmount?item.enterpriseAccount.totalAmount.toFixed(2):'0.00'}}元
						
				</view>
			</view>
		 
		 <view  v-if="personInfo&&personInfo.userType==1" >
		 
		 </view>
		 
			<!-- 立即开通 -->
			<!-- <view class="open" v-else-if="false&&userId&&!userCardBool">
				<view class="title">
					<text class="img">
						<img src="../../assets/img/antFill-crown@3x.png" alt="">
					</text>充电月卡
				</view>
				<view class="open-btn" @click="gotoUrl('pages/monthlyCardActivity/monthlyCardBuy')">
					立即开通
					<text class="iconfont">&#xe632;</text>
				</view>
			</view> -->
			<!-- 开通后 -->
			<!-- <view class="opened" v-if="false&&userId&&userCardBool" @click="gotoUrl('pages/monthlyCardActivity/monthlyCardBuy')">
				<view class="title">
					<text class="img">
						<img src="../../assets/img/antFill-crown@3x.png" alt="">
					</text>充电月卡
				</view>
				<view class="date">
					{{userCard.endTime?userCard.endTime.slice(0,10):''}}到期
					<text class="iconfont">&#xe600;</text>
				</view>
			</view> -->
        
		
			<!-- 可用余额 -->
			<view class="balance"   v-if="false&&(personInfo&&personInfo.userType==2)" >
				<view class="item" @click="toBalance">
					<view class="num oldTextjp" oldstyle="font-size: 28px;">
						{{personAccount.availableAmount != null ? personAccount.availableAmount.toFixed(2) : '0.00'}}<span style="font-size: 16px;">元</span>
					</view>
					<view class="name" :style="elderStatus ? 'font-size: 16px;' : ''">
						可用余额{{" "}}
						<span class="userData-foot-look">查看</span>
					</view>
				</view>
				<view class="item" @click="toMyCoupon">
					<view class="num oldTextjp" oldstyle="font-size: 28px;">
						{{personAccount.couponNum}}<span style="font-size: 16px;    margin-right: 4px;">张</span>
						<!-- <text class="new">新券</text> -->
						<span style="font-size: 16px;">共</span>{{personAccount.couponAmount}}<span style="font-size: 16px;">元</span>
					</view>
					<view class="name" :style="elderStatus ? 'font-size: 16px;' : ''">
						优惠券{{" "}}
						<span class="userData-foot-look">查看</span>
					</view>
				</view>
				<!-- <view class="item">
					<view class="num oldTextjp" oldstyle="font-size: 28px;">
						0
					</view>
					<view class="name" :style="elderStatus ? 'font-size: 16px;' : ''">
						积分{{" "}}
						<span class="userData-foot-look">查看</span>
					</view>
				</view> -->
			</view>
		</view>
		<view class="carImg"  v-if="!personInfo||personInfo&&personInfo.userType!=2" >
			<img   @click="toData"  src="@/assets/img/gologin/img.png">
			
		</view>
	
		<!-- 优惠 -->
		<view class="discounts" v-else >
			<u-swiper bg-color="#fff" :img-mode="'scaleToFill'" height="160" :list="bannerList"  mode="none"  @click="clickBanner"
				:name="'picUrl'">
			</u-swiper>
		</view>
		<!-- 菜单 -->
		<view class="menu">
			<view class="item" @click="chargingRecord">
				<view class="item-icon">
					<img src="@/assets/img/gologin/img3.svg">
				</view>
				<view class="item-name " oldstyle="font-size: 16px;">
					充电记录
				</view>
			</view>
			<view class="item" @click="myAppointment">
				<view class="item-icon">
					
					<img src="@/assets/img/gologin/img4.svg">
				</view>
				<view class="item-name " oldstyle="font-size: 16px;">
					我的预约
				</view>
			</view>
			
			
			<view class="item" @click="toInvoice">
				<view class="item-icon">
						<img src="@/assets/img/gologin/img1.svg">
				</view>
				<view class="item-name " oldstyle="font-size: 16px;">
					我的发票
				</view>
			</view>
			<view class="item" @click="toMyorder">
				<view class="item-icon">
						<img src="@/assets/img/gologin/img6.svg">
				</view>
				<view class="item-name " oldstyle="font-size: 16px;">
					我的订单
				</view>
			</view>
		</view>
		<!-- 菜单 -->
		<view class="menu" style="margin-bottom:60px ;">
			
			<view class="item" @click="gotoUrl('pages/service/service')">
				<view class="item-icon">
					<i class="ri-customer-service-2-line"></i>
				</view>
				<view class="item-name " oldstyle="font-size: 16px;">
					联系客服
				</view>
			</view>
			<view class="item" @click="feedback">
				<view class="item-icon">
					<i class="ri-feedback-line"></i>
				</view>
				<view class="item-name " oldstyle="font-size: 16px;">
					意见反馈
				</view>
			</view>
			<view class="item" @click="gotoUrl('pages/user/help')">
				<view class="item-icon">
					<i class="ri-compass-3-line"></i>
				</view>
				<view class="item-name " oldstyle="font-size: 16px;">
					操作指南
				</view>
			</view>
			<view class="item" @click="gotoUrl('pages/user/about')">
				<view class="item-icon">
					<i class="ri-account-pin-box-line"></i>
				</view>
				<view class="item-name " oldstyle="font-size: 16px;">
					关于我们
				</view>
			</view>
			<!-- <view class="item">
				<view class="item-icon">
					<i class="ri-tools-line"></i>
				</view>
				<view class="item-name oldTextjp" oldstyle="font-size: 16px;">
					我要报修
				</view>
			</view> -->
			<view class="item" @click="toFreeInstallation">
				<view class="item-icon">
					<i class="ri-file-add-line"></i>
				</view>
				<view class="item-name " oldstyle="font-size: 16px;">
					免费安桩
				</view>
			</view>
			<view class="item" @click="toJoin">
				<view class="item-icon">
					<i class="ri-service-line"></i>
				</view>
				<view class="item-name " oldstyle="font-size: 16px;">
					我要加盟
				</view>
			</view>
			<view class="item"  @click="setUp">
					<view class="item-icon" style="line-height: 52rpx;">
						
						<u-icon name="setting" size="24px" ></u-icon>

					</view>
					<view class="item-name " oldstyle="font-size: 16px;">
						设置
					</view>
				</view>
		<!-- 	<view class="item">
				<view class="item-icon">
					<i class="ri-shield-user-line"></i>
				</view>
				<view class="item-name oldTextjp" oldstyle="font-size: 16px;">
					实名认证
				</view>
			</view> -->
		</view>
		<Tabbar :current="3" ref="tabbarMain" :elderStatus="elderStatus"></Tabbar>
	</view>
</template>

<script>
	import * as API from '@/apis/index.js'
	import * as userApi from '@/apis/user.js'
	import * as loginApi from '@/apis/login.js'
	import * as WxJsApi from '@/utils/wxJsApi.js'
	import Tabbar from '@/components/Tabbar.vue'
	import * as newsApi from '@/apis/news.js'
	
	import {
		newDate
		
	} from '@/utils'
	
	export default {
		components: {
			Tabbar
		},
		data() {
			return {
				userCard:null,
				recordsTotal: 0,
				myCouponList: [],
				elderStatus: false,
				personAccount: {},
				userId: '',
				headImg: '',
				nickName: '',
				userPhone: '',
				personInfo:{},
				show: false,
				title: '联系客服',
				content: '400-8899-619',
				confirmText: '拨打电话',
				bannerList:[],
				businessVipList:[],
				background:{
					background: 'none'
				},
			}
		},
		onShow() {
			if(this.bannerList.length==0){
				this.getBannerInfo("userinfo")
			}
			this.personInfo=this.carhelp.getPersonInfo()
			
			if(this.carhelp.getPersonInfo()) {
				
				this.userId = this.carhelp.getPersonInfo().id;
				
				this.getCarPersonAccount();
				this.getUserInfo();
				//this.getCouponList();
			}
			if(this.$refs.tabbarMain){
				this.$refs.tabbarMain.setcount(3);
			}
			
			if(this.carhelp.get("getElderModeClass") == "长辈模式") {
				this.elderStatus = true;
			} else {
				this.elderStatus = false;
			}
		},
		computed:{
			userCardBool(){
				if(this.userCard){
					var date=new Date().getTime()
					var reg=new RegExp('-','gi')
					var str=this.userCard.endTime;
					//console.log(str.replace(reg,'/'))
					var date2=newDate(str).getTime();
					if(date<date2){
						return true;
					}
				}
				return false
			}
		},
		onReady() {
			if(this.bannerList.length==0){
				this.getBannerInfo("userinfo")
			}
			
			
			WxJsApi.getWxConfig(['getLocation', 'addEventListener', 'scanQRCode']).then((res) => {
				// //(res)
			}).catch(error => {
				//(error)
			})
			
			var  consumerPhone=this.carhelp.getConfig().consumerPhone
			// img="https://yktwechat.xiaoxinda.com/config/xxd2021.jpg"		
			if(consumerPhone){
				this.content=consumerPhone
 			}
			
		},
		methods: {
			
			personalCenter(){
				API.personalCenter().then((res2) => {
					var entRegList=res2.data.entRegList;
					for(var i in this.businessVipList){
						var item1=this.businessVipList[i]
						for(var j in entRegList){
							var item2=entRegList[j].vipUser;
							
							if(item1.id==item2.id){
								item1.enterpriseAccount=entRegList[j].enterpriseAccount
							}
						}
					}
					this.$forceUpdate()
					
				}).catch(error => {
						uni.showToast({
							title: error
						})
					})
			},
			clickBanner(index){
				var mod= this.bannerList[index]
				
				if(mod.linkUrl.indexOf('http')==0){
				    window.location=mod.linkUrl;
				}
				else if(mod.linkUrl.indexOf('#/')==0){
					if(mod.linkUrl.indexOf("?")==-1){
						mod.linkUrl+='?';
					}
				    //window.location=mod.linkUrl;
					var url=mod.linkUrl.split("#")[1]
					//window.location = mod.clickUrl;
					uni.navigateTo({
						url: url
					})
				}
				else if(mod.linkUrl=='#'||mod.linkUrl==''){
				
				}
				else{
					uni.navigateTo({
						url:mod.linkUrl
					})
				}
				
			},
			getBannerInfo(code){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				newsApi.getBannerInfo(code).then((res) => {
					uni.hideLoading();
					this.bannerList =res.data;
					
					// document.getElementsByClassName("uni-swiper-wrapper")[0].parentNode.style="background-color: rgb(255, 255, 255); height: 300px;"
				 }).catch(error => {
						uni.showToast({
						
							title: error,icon: "none"
						})
				})
			},
			getCouponList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})		
				userApi.couponList({
					status: '0'
				}).then((res) => {
					uni.hideLoading();
					
					this.myCouponList = res.data.data;
					this.recordsTotal = res.data.recordsTotal;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			//微信扫二维码
			getScanCode() {
				if (this.userId) {
					WxJsApi.scanQRCode(1).then(res => {
						if(res) {
							API.scanCode(res).then((response) => {
						
							}).catch(error => {
								uni.showToast({
									title: error,
									icon: "none"
								})
							})
						}
					}).catch(error => {
			
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			toMyorder(){
				if (this.userId) {
					uni.navigateTo({
						url: '/pages/discountCard/myOrder'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
				
			},
			toInvoice(){
				if (this.userId) {
					uni.navigateTo({
						url: '/pages/MyInvoice/invoiceManagement'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			chargingRecord() {
				if (this.userId) {
					uni.navigateTo({
						url: '/pages/record/index'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			toSearchPile() {
				uni.navigateTo({
					url: '/pages/searchPile/searchPile'
				})
			},
			getUserInfo() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})		
				
				loginApi.findByOpenId({
					openId: this.carhelp.getOpenId()
				}).then((res) => {
					uni.hideLoading();
					
					this.businessVipList=res.data.businessVipList;
					// if(this.businessVipList.length){
					// 	var b=false;
					// 	for(var i in this.businessVipList){
					// 		var item=this.businessVipList[i];
					// 		if(item.entAccountEnabled){
					// 			b=true
					// 		}
					// 	}
					// 	if(b){
					// 		//this.personalCenter()
					// 	}
					// }
					this.headImg = res.data.regUser.headImg;
					this.nickName = res.data.regUser.nickName;
					this.userCard=res.data.userCard;
					var phone = res.data.regUser.phone;
					if(phone){
						var phone1 = phone.slice(0,3);
						var phone2 = phone.slice(-4);
						this.userPhone = phone1 + '****' + phone2;
					}
					
					
					if (res.code == 200&&res.result) {
						var token = res ? res.data.token : '';	
						this.personInfo=res.data.regUser
										
						this.carhelp.setPersonInfo(res.data.regUser );
						this.carhelp.setToken(token);
						this.carhelp.setPersonInfoPlus(res.data);
						console.log("setPersonInfoPlus")
					}
				}).catch(error => {
					this.carhelp.logoff()
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			toData() {
				if(this.personInfo&&this.personInfo.userType==1){
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}else if(this.userId) {
					uni.navigateTo({
						url: '/pages/user/dataSet'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
				
				
			},
			toBalance() {			
				if(this.userId) {
					uni.navigateTo({
						url: '/pages/user/finance/balance'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			toMyCoupon() {
				if(this.userId) {
					uni.navigateTo({
						url: '/pages/user/coupon/myCoupon'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			toRecharge() {	
				if(this.userId) {
					if(this.personInfo.userType==1){
						uni.showToast({
							title:"游客模式只支持“先付后退”"
						})
					}else{
						uni.navigateTo({
							url: '/pages/user/finance/recharge'
						})
					}
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			carManage() {
				if(this.userId) {
				
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			myAppointment() {
				if(this.userId) {
					uni.navigateTo({
						url: '/pages/user/myReservation/myReservation'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			toFreeInstallation() {
				if(this.userId) {
					uni.navigateTo({
						url: '/pages/user/freeInstallment?isback=1'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			toJoin() {
				if(this.userId) {
					uni.navigateTo({
						url: '/pages/user/toJoin?isback=1'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			feedback() {
				if(this.userId) {
					uni.navigateTo({
						url: '/pages/user/message'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}		
			},
			setUp() {
				if(this.userId) {
					uni.navigateTo({
						url: '/pages/user/setting'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			openModal() {
				this.show = true;
			},
			confirmPhone(){
				this.show = false;
				uni.makePhoneCall({
					phoneNumber:this.content //仅为示例
				});
			},
			getCarPersonAccount() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})		
				userApi.carPersonAccount().then((res) => {
					uni.hideLoading();
					
					this.personAccount = res.data;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>
<style>
	page{
		background-size: 100%;
	}
</style>
<style lang="scss" scoped>
	.carImg{
			margin: 0 40rpx;
			img{
				width: 100%;
			}
	}
	.btnuserType1{
		width: 160rpx;
		height: 64rpx;
		line-height: 60rpx;
		border-radius: 50px;
		background-color: rgba(0, 185, 98, 1);
		color: #fff;
		font-size: 28rpx;
		text-align: center;
		font-family: -apple-system;
		 margin-top: 20rpx;
	}
	.header {
		background: linear-gradient(#D6EEDC, #F6F8F8);

		.userinfo {

			display: flex;
			justify-content: space-between;
			padding: 40rpx 32rpx  32rpx 32rpx;

			.infos {
				display: flex;
			}

			.head-portrait {
				width: 48px;
				height: 48px;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.username {
				margin-left: 8px;

				.name {
					color: rgba(51, 51, 51, 100);
					font-size: 40rpx;
					line-height: 48rpx;
				}

				.change {
					color: rgba(166, 180, 173, 100);
					line-height: 14px;
					margin-top: 8px;
				}

			}

			
			
			.right {
				display: flex;
				align-items: center;
				
				img{
					width: 96rpx;
					height: 96rpx;
					position: relative;
					left: 48rpx;
				}
				.rightText{
					    padding-left: 28rpx;
					    display: flex;
					    align-items: center;
					    flex-wrap: wrap;
					    justify-content: space-evenly;
						align-content: center;
					width: 188rpx;
					height: 72rpx;
					text-align: center;
					//padding:12rpx 0;
				}
				.rightTextA{
					background: linear-gradient(134.91deg, rgba(220,232,255,1) 29.61%,rgba(176,202,255,1) 99.85%);
				}
				.rightTextB{
					background: linear-gradient(134.91deg, rgba(255,241,187,1) 29.61%,rgba(255,215,63,1) 99.85%);
				}
				.rightTextC{
					background: linear-gradient(134.91deg, rgba(229,234,255,1) 21.58%,rgba(180,176,255,1) 98.85%);
				}
				.rightText1{
					font-size: 24rpx;
				
				}
				.rightText2{
					opacity: 0.7;
					color: rgba(0, 0, 0, 1);
					font-size: 20rpx;
				}
			}
			
		}
		.userinfo2 {
			padding: 40rpx 0  32rpx 32rpx;
		}
		// 卡包入口
		.my-infos{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 96rpx;
			margin: 40rpx 0;
			.line{
				height: 56rpx;
				width: 1px;
				background-color: rgba(224, 224, 224, 1);
			}
			.item{
				text-align: center;
				.item-value{
					color: rgba(51, 51, 51, 1);
					font-size: 40rpx;
					font-weight: bold;
				
				}
				
				.item-title{
					color: rgba(85, 85, 85, 1);
					margin-top: 8rpx;
				}
			}
			/deep/.uicon-arrow-right{
				margin-left: 4rpx;
			}
		}

		// 卡片
		.card {
			background: linear-gradient(#405473, #536D96);
				border-radius: 8px;
				width: 91.4%;
				margin: 8rpx auto 0;
				padding: 24rpx 24rpx;
				
			.cardspan{
				margin-left: 48rpx;
				font-size: 24rpx;
				line-height:40rpx;
				color: rgba(255, 255, 255, 100);
				
			}
			.card2 {
				
				display: flex;
				justify-content: space-between;
			

				.title {
					line-height: 72rpx;
					color: rgba(255, 255, 255, 100);
					font-size: 36rpx;

					.img {
						display: inline-block;
						// width: 48rpx;
						// height: 48rpx;
						vertical-align: middle;
						margin-right: 8rpx;

						img {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}

				.view {

					line-height: 72rpx;
					color: rgba(208, 214, 226, 100);
					font-size: 36rpx;
				}
				.view2 {
				
					line-height: 144rpx !important;
					
				}
			}
		}
// 立即开通
		.openlogin {
			border: 1px solid rgba(187, 226, 189, 1);
			background: #F4FFF3 ;
			width: 91.4%;
			padding: 30rpx 24rpx 24rpx 24rpx;
			margin: 8rpx auto 0;
			margin-bottom: 10px;
			display: flex;
			justify-content: space-between;
			border-radius: 8px;
			.title {
				line-height: 72rpx;
				color: #101010;
				font-size: 36rpx;
					
				.img {
					display: inline-block;
					
					// width: 48rpx;
					// height: 48rpx;
					vertical-align: middle;
					margin-right: 8rpx;
					
					img {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
					
			.open-btn {
				    margin: auto;
				padding-left: 12px;
				padding-right: 4px;
				line-height: 28px;
				
				    height: 32px;
				// text-align: center;
				color: #ffffff;

				border-radius: 10px;
				background: linear-gradient(to right,#34BC58 , #00A39A );
					
				.iconfont {
					margin-left: 0px;
				}
			}
		}
		// 立即开通
		.open,.opened {
			background: linear-gradient(#4A4C62, #2C3145);
			width: 91.4%;
			padding: 30rpx 24rpx 24rpx 24rpx;
			margin: 8rpx auto 0;
			display: flex;
			justify-content: space-between;
			border-radius: 8px;
		
			.title {
				line-height: 72rpx;
				color: #E1C082;
				font-size: 36rpx;
		
				.img {
					display: inline-block;
					
					vertical-align: middle;
					margin-right: 8rpx;
		
					img {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		
			.open-btn {
				padding-left: 28rpx;
				padding-right: 8rpx;
				line-height: 76rpx;
				// text-align: center;
				font-size: 32rpx;
				border-radius: 100rpx;
				background: linear-gradient(to right,#F0E1C6, #ECC194);
		
				.iconfont {
					margin-left: 0px;
				}
			}
			.date{
				color: #d1b37a;
				line-height: 24px;
				font-size: 32rpx;
				.iconfont{
					color: #867668
				}
			}
		}


		// 余额
		.balance {
			background-color: #fff;
			width: 91.4%;
			margin: 12px auto;
			padding: 16px ;
			display: flex;
			// justify-content: space-between;
			justify-content: space-around;
			border-radius: 8px;

			.item {
				text-align: center;

				.num {
					line-height: 28px;
					color: rgba(51, 51, 51, 100);
					font-size: 24px;
					position: relative;

					.new {
						width: 40px;
						line-height: 20px;
						border-radius: 24px 24px 24px 0px;
						background-color: rgba(255, 94, 0, 100);
						color: rgba(255, 255, 255, 100);
						font-size: 12px;
						text-align: center;
						position: absolute;
						bottom: 20px;
						left: 36px;
					}

				}

				.name {
					height: 16px;
					color: rgba(134, 134, 134, 100);
					font-size: 14px;
					margin-top: 4px;
					.userData-foot-look {
						color: #00B962;
					}
				}
			}
		}

	}

	// 优惠
	.discounts {
		width: 91.4%;
		//height: 80px;
		margin: 0 auto;
		border-radius: 8px;
		overflow: hidden;

		img {
			width: 100%;
			height: 80px;
		}
	}

	// 菜单
	.menu {
		background-color: #fff;
		width: 91.4%;
		margin: 24rpx auto 0;
		padding: 0 24rpx 18rpx 24rpx;
		border-radius: 8px;
		display: flex;
		flex-wrap: wrap;


		.item {
			width: 25%;
			margin-top: 40rpx;
			margin-bottom: 22rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			color: rgba(119, 119, 119, 100);

			i {
				font-size: 24px
			}

			.item-name {
				font-size: 14px;
				margin-top: 8px;
			}
		}
	}
</style>