JP-ChargeTeam51/pages/user/index.vue

<template>
	<view>
		<ujp-navbar title="折扣卡购买" :show="false"></ujp-navbar>

		<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">
							{{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">
					<img src="@/assets/img/9-4/钻石会员.png" v-if="personInfo.memberLevel==4">

					<view class="rightText " :class="{
						 rightTextA:personInfo.memberLevel==1||personInfo.memberLevel==null,
						  rightTextB:personInfo.memberLevel==2,
						    rightTextC:personInfo.memberLevel==3,
							  rightTextD:personInfo.memberLevel==4
					 }">
						<view class="rightText1">{{personInfo.memberLevelStr}}</view>
						<view class="rightText2" @click="gotoUrl('pages/user/member/member')">查看详情</view>

					</view>

				</view>

			</view>
			<!-- 卡包入口 -->
			<view class="my-infos" v-if="(personInfo&&personInfo.userType==2)">
				<view class="item">
					<view class="item-value" v-if="personAccount.availableAmount ">
						{{personAccount.chargingFunds != null ? (personAccount.availableAmount+personAccount.chargingFunds).toFixed(2) : personAccount.availableAmount.toFixed(2)}}
						
					</view>
					<view class="item-value" v-else>
						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">

						{{cardNum}}
					</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 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>
		</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="toRecharge">
				<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="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="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="gotoUrl('pages/user/sharePicc')">
				<view class="item-icon">
					<img src="@/assets/img/gologin/antOutline-insurance.svg">
				</view>
				<view class="item-name " oldstyle="font-size: 16px;">
					车险报名
				</view>
			</view>
			
			<view class="item" @click="carClick">
				<view class="item-icon">
					<u-icon name="car" size="24px"></u-icon>

				</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="myAppointment">
				<view class="item-icon" style="line-height: 52rpx;">

					<u-icon name="hourglass" 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-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="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" @click="Subscribe">
				<view class="item-icon" style="line-height: 52rpx;">

					<u-icon name="weixin-circle-fill" size="24px"></u-icon>

				</view>
				<view class="item-name " oldstyle="font-size: 16px;">
					公众号
				</view>
			</view>
			<view class="item" @click="setOld">
				<view class="item-icon" style="line-height: 52rpx;">

					<u-icon name="man-add" size="24px"></u-icon>

				</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>
		<u-modal v-model="show1" @confirm="gotoGz" cancel-text="暂不关注" confirm-text="前往关注" confirm-color="#53b56b"
			:show-cancel-button="true" ref="uModal2" :asyncClose="true">
			<view style="padding: 15px;    text-align: center; ">前往关注<span
					style=" color:  #53b56b;">{{projectName}}</span>公众号</view>


		</u-modal>
		<u-mask :show="show2">

			<view class="wrap">


				<view class="shema" @tap.stop>
					<view class="title">
						设置浏览模式
					</view>
					<view class="">
						<u-radio-group v-model="value">
							<u-radio v-for="(item, index) in list" :key="index" :name="item.name"
								:disabled="item.disabled" active-color="#00B962">
								{{item.name}}
								<p v-if="item.name == '长辈模式'">字体更大 看的清楚</p>
								<p v-if="item.name == '标准模式'">信息丰富 功能全面</p>
							</u-radio>

						</u-radio-group>
					</view>
					<view class="hint">可在 {{""}}我的-设置 {{""}}页面中切换</view>
					<view class="btn-box">
						<u-button class="choice-btn" type="success" shape="circle" @click="elderClick">我选好了</u-button>
					</view>
				</view>
			</view>
		</u-mask>

		<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 {
				projectName: "",
				userCard: null,
				recordsTotal: 0,
				myCouponList: [],
				elderStatus: false,
				personAccount: {},
				userId: '',
				headImg: '',
				nickName: '',
				userPhone: '',
				personInfo: {},
				show: false,
				title: '联系客服',
				content: '400-8899-619',
				confirmText: '拨打电话',
				bannerList: [],
				businessVipList: [],

				list: [{
						name: '长辈模式',
						disabled: false
					},
					{
						name: '标准模式',
						disabled: false
					},
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '标准模式',

				show1: false,
				show2: false,
				background: {
					background: 'none'
				},
				cardNum:0,
			}
		},
		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 = "400-8899-619"
			// img="https://yktwechat.xiaoxinda.com/config/xxd2021.jpg"		
			if (consumerPhone) {
				this.content = consumerPhone
			}
			if (this.carhelp.get("getElderModeClass")) {
				this.value = this.carhelp.get("getElderModeClass");
			}

		},
		methods: {
			getChargeList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.personCardList({
				
				}).then((res) => {
					uni.hideLoading();
					this.cardNum=res.data.cardNum
					
					
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			carClick() {

				if (this.userId) {
					var url = '/pages/user/car/carDet'

					uni.navigateTo({
						url: url
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}



			},
			elderClick() {
				if (this.value == "长辈模式") {
					this.elderStatus = true;
					this.carhelp.set("getElderModeClass", "长辈模式");
					this.fontMode = '1';
				} else {
					this.elderStatus = false;
					this.carhelp.set("getElderModeClass", "标准模式");
					this.fontMode = '0';
				}
				if (this.userId) {
					API.changeFont({
						fontMode: this.fontMode
					}).then((res) => {
						this.show2 = false;
					}).catch(error => {
						uni.showToast({
							title: error,
							icon: "none"
						})
					})
				} else {
					this.show2 = false;
				}

			},
			gotoGz() {
				this.carhelp.setGzDate()
				var url = "https://mp.weixin.qq.com/s/mCHz1nNvg0xAICiBeIyKRQ";
				window.location.href = url

			},
			Subscribe() {
				this.projectName = process.car.ProjectName;
				this.show1 = true
			},
			setOld() {
				this.show2 = true;
			},

			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.getChargeList()
					//this.businessVipList = res.data.businessVipList;
				
					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() {
				uni.navigateTo({
					url: '/pages/user/freeInstallment?isback=1'
				})
				// if(this.userId) {

				// } else {
				// 	uni.navigateTo({
				// 		url: '/pages/login/login'
				// 	})
				// }
			},
			toJoin() {
				uni.navigateTo({
					url: '/pages/user/toJoin?isback=1'
				})
				// if(this.userId) {

				// } 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, #f3f4f4);

		.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-top: 4rpx;
				}

				.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%);
				}

				.rightTextD {
					background: linear-gradient(154.07deg, rgba(0, 81, 255, 1) -7.68%, rgba(61, 122, 255, 1) 32.44%, rgba(159, 123, 255, 1) 106.96%);

				}

				.rightText1 {
					margin-top: 2px;
					font-size: 24rpx;
					color: rgba(16, 16, 16, 1);

				}

				.rightText2 {
					margin-bottom: 2px;
					opacity: 0.7;
					color: rgba(0, 0, 0, 1);
					font-size: 20rpx;
				}

				.rightTextD {

					.rightText1,
					.rightText2 {
						color: #fff;
					}
				}
			}

		}

		.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;
			justify-content: space-between;
			color: rgba(119, 119, 119, 100);

			i {
				font-size: 24px
			}

			.item-name {
				font-size: 14px;
				margin-top: 8px;
			}
		}
	}


	.shema {
		width: 70%;
		padding-bottom: 20px;
		border-radius: 16px;
		background-color: #fff;
		position: fixed;
		top: 100px;
		left: 0;
		right: 0;
		margin: 0 auto;
		z-index: 9999;

		.title {
			height: 33px;
			color: rgba(16, 16, 16, 100);
			font-size: 24px;
			text-align: center;
			padding: 16px 0;
		}

		.u-radio-group {
			margin: 16px 5vw;
		}

		/deep/.u-radio {
			width: 60vw !important;

			padding: 24px 24px 40px;
			line-height: 20px;
			border-radius: 16px;
			text-align: center;
			border: #101010 1px solid;
			margin-top: 12px;

		}

		/deep/ .u-radio__label {
			text-align: left;
			height: 24px;
			// color: rgba(0, 185, 98, 100);
			font-size: 24px;

		}

		p {

			height: 22px;
			color: rgba(102, 102, 102, 100);
			font-size: 14px;
			margin-top: 12px;
			white-space: nowrap
		}

		.hint {
			text-align: center;

		}

		.btn-box {
			margin-top: 20px;

			.choice-btn {
				width: 80%;
			}
		}
	}

	.wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

	}
</style>