siyu_app/pages/user/index.vue

<template>
	<scroll-view
		@scrolltolower="scrollTolower"
		:scroll-top="userScrollTop"
		scroll-y="true" 
		class="container" 
		@scroll="userScroll">
		
		<view class="top-cont">
			<view :class="fixedTop?'inner fixed':'inner'">
				<!-- 状态栏 -->
				<view :class="fixedTop?'status-bar es-bc-theme':'status-bar'" :style="{ background:headerBG }"></view>
				<view class="top-title-box show" :style="{ background:headerBG }">
					<view>个人中心</view>
				</view>
			</view>
			
			<view class="my-header-right inner fixed">
				<image src="@/static/image/my/set_icon.png" mode="aspectFill" @tap="navTo('./userInfo')"></image>
				<image :class="isNew ? 'badge':''"  @tap="goToMsg()"  src="@/static/image/hall/new_hall_icon.png" mode="aspectFill"></image>
			</view>
			
			<!-- 用于顶部固定定位后占位 -->
			<view :class="fixedTop?'seat show':'seat'"></view>
		
		    <view class="mybox">
		    	<view class="mybox-info">
		    		<image class="heads es-br-ban" @tap="navToUserInfo('./userInfo')"  :src="!$isEmpty(user.avatar)?user.avatar:avatar"  mode="aspectFill"></image>
		    		<view>
		    			<view class="flex-center" @tap="navToUserInfo('./userInfo')">
		    				<text class="mybox-info-name">{{ isLogin&&user&&user.nickName || '请登录' }}</text>
		    				<image class="arrow_black" src="@/static/image/my/right_arrow_black_icon.png" mode="aspectFill"></image>
		    			</view>
		    			<view class="flex-center" style="margin-top: 22rpx;">
		    				<view class="flex-center vipbox" v-if="user.isVip==1" @click="loginNavTo('/pages/course/vipBuy')">
		    					<image class="arrow_black" src="@/static/image/my/lv_icon.png" mode="aspectFill"></image>
		    					<text>会员</text>
		    				</view>
		    				<view class="flex-center pointsbox" style="margin-left: 16rpx;" @click="loginNavTo('/pages/user/integral/points')">
		    					<image class="arrow_blacks" src="@/static/image/my/lv_icon16@2x.png" mode="aspectFill"></image>
		    					<text>{{user.integral}}积分</text>
		    				</view>
		    			</view>
		    		</view>
		    	</view>
				
		    	<!-- 芳华币，币，券信息 -->
		    	<!-- <view class="mybox-integral"  >
		    		<view class="mybox-integral-item" @click="loginNavTo('/pages/user/integral/points')">
		    			<view class="num">{{user.integral}}</view>
		    			<view>芳华币</view>
		    		</view>
		    		<view class="mybox-integral-item" @click="loginNavTo('/pages/user/coupon/myCouponList?type=0')">
		    			<view class="num">{{coupons.notUsedCount}}</view>
		    			<view>待用券</view>
		    		</view>
		    		<view class="mybox-integral-item"  @click="loginNavTo('/pages/user/coupon/myCouponList?type=1')">
		    			<view class="num">{{coupons.usedCount}}</view>
		    			<view>已用券</view>
		    		</view>
		    		<view class="mybox-integral-item" @click="loginNavTo('/pages/user/coupon/myCouponList?type=2')">
		    			<view class="num">{{coupons.expiredCount}}</view>
		    			<view>过期券</view>
		    		</view>
		    	</view> -->
				
		    	<!-- vip会员 -->
		    	<view class="vip-card" v-if="user.userId!=null">
		    		<view>
		    			<view class="flex-center vip-card-info">
		    				<image src="@/static/image/my/VIP_member.png" mode="aspectFill"></image>
		    				<text>{{getDayMix(user.vipEndDate)}}</text>
		    			</view>
		    			<view class="flex-center vip-card-price">续费享季卡会员约<text>6.5</text>折</view>
		    		</view>
		    		<view class="buyvip" @click="loginNavTo('/pages/course/vipBuy')" >立即续费</view>
		    	</view>
				
		    	<!-- 我的订单 医疗服务等 -->
		    	<view class="mybox-menu" v-for="(item, index) in menuList" :key="index">
		    		<view class="mybox-menu-title">{{item.menuTitle}}</view>
		    		<view class="mybox-menu-box">
		    			<view class="mybox-menu-item" v-for="(menu, idx) in item.menus" :key="idx" @click="handleMenu(menu)">
		    				<image :src="menu.icon" mode="aspectFill"></image>
		    				<text>{{menu.name}}</text>
		    			</view>
		    		</view>
		    	</view>
		    </view>
		    	
			<view class="btns" v-if="isLogin" >
			    <view class="login-btn" @click="showLogout">退出登录</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import {startDrugReport,getUserFollowDoctor} from '@/api/drugReport';
	import {getUserInfo,getMyCouponCount} from '@/api/user'
	
	// #ifdef APP-PLUS
	import permision1 from "@/utils/permission.js"
	// #endif
	
	
	const avatar="/static/image/hall/my_heads_icon.png";
	export default {
		data() {
			return {
				isLogin: false,
				coupons:{
					expiredCount:0,
					notUsedCount: 0,
					usedCount: 0
				},
				show:false,
				defUser:{
					avatar:avatar,
					nickName:"请登录",
					userName:"请登录",
					phone:"",
					integral:0,
					balance:0
				},
				user:{
					avatar:"/static/image/hall/my_heads_icon.png",
					userName:"",
					phone:"",
					nickName:"",
					integral:0,
					balance:0,
					userId:null
				},
				isNew:false,
				top:0,
				userScrollTop: 0,
				fixedTop: false, // 是否固定头部
				statusBarHeight: uni.getStorageSync('statusBarHeight'),
				menuList: 
				[
					{
							menuTitle: "我的订单",
							menus: [
									{
										name: '问诊订单',
										icon: "../../static/image/my/my_order_icon.png",
										pageUrl:"/pages/store/inquiryOrderList"
									},{
										name: '处方订单',
										icon: "../../static/image/my/my_cforder_icon.png",
										pageUrl:"/pages/store/storeOrderList"
									},{
										name: '课程订单',
										icon: "../../static/image/my/my_order_icon.png",
										pageUrl: "/pages/course/studyCenter/orderList?status=0"
									},{
										name: '健康疗法',
										icon: "../../static/image/my/my_health_therapy_icon.png",
										pageUrl:"/pages/store/packageOrderList"
									},{
										name: '售后服务',
										icon: "../../static/image/my/my_service_icon.png",
										pageUrl:"/pages/store/storeOrderRefundList"
									}
						    ]
					},
					{
						menuTitle: "医疗服务",
						menus: [
							{
								name: '我的处方',
								icon: "../../static/image/my/my_prescription_icon.png",
								pageUrl:"/pages/store/prescribeList"
							},{
								name: '我的医生',
								icon: "../../static/image/my/my_doctor_icon.png",
								pageUrl:"./myDoctorList"
							},{
								name: '随访服务',
								icon: "../../static/image/my/follow_up_icon.png",
								pageUrl:"/pages/user/followList"
							},{
								name: '用药咨询',
								icon: "../../static/image/my/medical_consultation_icon.png",
								pageUrl:"/pages/store/inquiryOrderList",
								isIm:true
							},{
								name: '用药报告',
								icon: "../../static/image/my/medication_report_icon.png",
								pageUrl:"/pages/user/drugReportList"
							}
							,{
								name: '健康档案',
								icon: "../../static/image/my/my_order_icon.png",
								pageUrl: "/pages/user/healthRecords/index"
							}
						]
					},
					{
						menuTitle: "我的应用",
						menus: [
								{
									name: '就诊管理',
									icon: "../../static/image/my/visit_icon.png",
									pageUrl:"./patient"
								}
								,{
									name: '地址管理',
									icon: "../../static/image/my/address_management_icon.png",
									pageUrl:"./address"
								}
								,{
									name: '芳华币商城',
									icon: "../../static/image/my/my_points_icon.png",
									pageUrl:"/pages/user/integral/integralGoodsList"
								}
								,{
									name: '会员中心',
									icon: "../../static/image/my/member_icon.png",
									isUserService:true,
									pageUrl:""
								}
								,{
									name: '舌苔报告',
									icon: "../../static/image/my/shetai.png",
									pageUrl: "/pages/user/tongue/tongueList"
								}
								,{
									name: '健康管家',
									icon: "../../static/image/my/my_doctor_icon.png",
									pageUrl: "/pages/user/addHealthButler"
								}
								,{
									name: '开票历史',
									icon: "../../static/image/my/invoicing_icon.png",
									pageUrl:"/pages/store/invoice/invoiceList",
								},{
									name: '客服中心',
									icon: "../../static/image/my/service_center_icon.png",
									pageUrl:""
								},{
									name: '看课通知',
									icon: "../../static/image/my/my_order_icon.png",
									pageUrl: "/pages/courseAnswer/list"
								},{
									name: '在学课程',
									icon: "../../static/image/my/my_points_icon.png",
									pageUrl: "/pages/course/learning"
								},{
									name: '学习笔记',
									icon: "../../static/image/my/study_notes.png",
									pageUrl: "/pages/course/noteList"
								},{
									name: '课程收藏',
									icon: "../../static/image/my/course_collection.png",
									pageUrl: "/pages/course/studyCenter/courseCollect"
								}
						]
					},
					{
						menuTitle: "我的视频",
						menus: [
							{
								name: '我的收藏',
								icon: "../../static/image/my/collect_icon.png",
								pageUrl:"./myFavoriteVideo"
							},{
								name: '我的评论',
								icon: "../../static/image/my/evaluate_icon.png",
								pageUrl:"/pages/store/inquiryOrderPingList"
							}
						]
					},
					{
						menuTitle: "管理应用",
						menus: [
								{
								name: '医生入驻',
								icon: "../../static/image/my/doctor_entrance_icon.png",
								pageUrl:"/pages/user/registerDoctor?type=1"
							},{
								name: '药师入驻',
								icon: "../../static/image/my/pharmacist_entrance_icon.png",
								pageUrl:"/pages/user/registerDoctor?type=2"
							}
							,{
								name: '达人主页',
								icon: "../../static/image/my/drzy_icon.png",
								pageUrl:"/pages/expert/index"
							}
							,{
								name: '客服登录',
								icon: "../../static/image/my/login_icon.png",
								isService:true,
								pageUrl:"",
							},{
								name: '关于我们',
								icon: "../../static/image/my/feedback_icon.png",
								pageUrl:"./about"
							}
						]
					}
				]
				
			}
		},
		onLoad(){
			let that=this;
			uni.$on('refreshUserInfo', function() {
				if(that.$isLogin()){
					that.getUserInfo();
					that.$updateMsgDot();
				} else {
					that.isLogin = that.$isLogin()
				}
			});
			
			if(!this.$qconfig.isAppStore){  //应用市场版本隐藏芳华币商城
				let integralMenus=(this.menuList[2]).menus;
				let integralSubMenu={name: '芳华币商城',icon: "../../static/image/my/my_points_icon.png",pageUrl:"/pages/user/integral/integralGoodsList"};
				integralMenus.splice(2, 0, integralSubMenu);
			}
			// #ifdef APP-PLUS
		        permision1.checkPush();
			// #endif
		},
		onUnload() {
			uni.$off('refreshUserInfo');
		},
		onShow() {
			this.isLogin = this.$isLogin()
			let token= uni.getStorageSync('AppToken');
     		if(this.$isLogin()){
				this.getUserInfo();
				this.getMyCouponCount();
				this.$updateMsgDot()
			}else{
				this.user=this.defUser;
				uni.navigateTo({
					url: '/pages/auth/loginIndex'
				})
				return;
			}
			
		},
		methods: {
			doIM(){
				uni.showLoading({
					title:"处理中..."
				})
				getUserFollowDoctor().then(res => {
						if(res.code==200){
							if(res.data!=null){
								var data={followId:res.data.followId};
								startDrugReport(data).then(
									res => {
										uni.hideLoading();
										// uni.switchTab({
										// 	url:"/pages/TUIKit/TUIPages/TUIConversation/index"
										// })
										var id="C2CD-"+data.followDoctorId;
										store.commit("timStore/setOrderId",data.orderId);
										store.commit("timStore/setFollowId",data.followId);
										store.commit("timStore/setImType", 2);
										store.commit("timStore/setConversationID", id);
										//uni.$TUIKit.TUIChatServer.updateStore(conversationId)
										uni.$TUIKit.TUIConversationServer.setMessageRead(id);
										uni.$TUIKit.TUIConversationServer.getConversationProfile(id).then((res) => {
												console.log(res)
												// uni.$TUIKit.TUIConversationServer.setConversationValue(id,that.orderId.toString())
												//   .then((res) => {
												// 	  console.log("更新order")
												// })
												// .catch((err) => {
												     
												// });
												//通知 TUIChat 关闭当前会话
												const { conversation } = res.data;
												store.commit("timStore/setConversation", conversation);
												let url = "/pages/TUIKit/TUIPages/TUIChat/index";
												const { nick: name } = conversation.userProfile;
												url = `${url}?conversationName=${
													conversation.userProfile.nick?.nick ||
													conversation.userProfile.userID
												}`;
												uni.redirectTo({ url });
												
											})
										.catch((err) => {
											uni.hideLoading()
										    console.warn("获取 group profile 异常 = ", err);
										});
									},
									rej => {}
								);
								
							}
							else{
								uni.hideLoading()
								uni.showToast({
									icon:'none',
									title: "当前没有药师为您服务",
								});
							}
						}else{
							uni.showToast({
								icon:'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			toIM(){
				if(this.$isLogin()){
					this.doIM();
				}
				else{
					this.$showLoginPage();
				}
			},
			toCompany(){
				if(this.$isLogin()){
					var token = uni.getStorageSync('CompanyUserToken');
					if (token) {
						 uni.navigateTo({
						 	url: '/pages/company/index'
						 })
					} else {
						uni.navigateTo({
							url: '/pages/company/login'
						})
					}
				}else{
					this.$showLoginPage();
				}
			},
			showLogout(){
				//this.show=true;
				let that = this;
				uni.showActionSheet({
					title:"确认退出吗",
					itemList: ["确定"],
					success: function(res) {
						that.logout()
						that.isLogin = that.$isLogin()
						// uni.navigateTo({
						// 	url: '/pages/auth/loginIndex'
						// })
					}
				});
			},
			hideLogout(){
				this.show=false;	
			},
			logout(){
			    this.$logout();
				uni.$TUIKit.logout();
				if(uni.$TUICallKit!=null){
				    uni.$TUICallKit.logout();
			    }
				this.user=this.defUser;
				this.coupons.expiredCount=0;
				this.coupons.notUsedCount=0;
				this.coupons.usedCount=0;
			},
			handleMenu(item) {
				 if(item.isIm!=undefined && item.isIm){
					 this.toIM();
				 }
				 else if(item.isService!=undefined && item.isService){
					 this.toCompany();
				 }
				 else if(item.isUserService!=undefined && item.isUserService){
					 this.loginNavTo('/pages/course/vipBuy')
				 }
				 else if(item.isServerCenter!=undefined && item.isServerCenter){
				 	  this.gotoMiniProgram("/page_user/service");
				 } else if(item.name == '客服中心') {
					const url = getApp().globalData.kfurl //企业微信客服链接
					const corpId = getApp().globalData.corpId //企业id
					this.openCustomerServiceChat(url,corpId)
				 } else{
					this.loginNavTo(item.pageUrl)
				 }
			},
			navTo(url){
				uni.navigateTo({
					url: url
				});
			},
			loginNavTo(url){
				if(!this.$isLogin()){
					this.$showLoginPage();
					return;
				}
				uni.navigateTo({
					url: url
				});
			},
			navToUserInfo(url){
				if(!this.$isLogin()){
					this.$showLoginPage();
					return;
				}
				uni.navigateTo({
					url: "./userInfo?userId="+this.user.userId
				});
			},
			navToServerCenter(){
				if(!this.$isLogin()){
					this.$showLoginPage();
					return;
				}
			},
			getUserInfo(){
				let that=this;
				getUserInfo().then(res => {
						if(res.code==200){
							if(res.user!=null){
								uni.setStorageSync('userInfo',JSON.stringify(res.user));
								this.user=res.user;
							}
							else{
								uni.showToast({
									icon:'none',
									title: res.msg,
								});
							}
						}
					},
					rej => {}
				);
			},
			getMyCouponCount(){
				let that=this;
				getMyCouponCount().then(res => {
						if(res.code==200){
							this.coupons=res.data;
						}
					},
					rej => {}
				);
			},
			getUserNickName(){
				let nickName="";
				 if(!this.$isLogin()){   //已登录
					 nickName="请登录";
					 return nickName;
				 }
				 nickName=this.$isEmpty(this.user.nickName)?"请登录":this.user.nickName;
				 return nickName;
			},
			userScroll(e) {
				if(e.detail.scrollTop >= 50) {
					this.fixedTop = true
				} else {
					this.fixedTop = false
				}
				this.top=e.detail.scrollTop;
			},
			scrollTolower(){
				
			},
			getDayMix(vipEndDate){
				// 假设 vipEndDate 字符串
				//let vipEndDate = "2024-09-06T14:43:36.000+0800";
				// 将 vipEndDate 解析为日期对象
				let endDate = new Date(vipEndDate);
				// 获取当前日期
				let currentDate = new Date();
				// 计算时间差（毫秒）
				let timeDiff = endDate - currentDate;
				// 计算天数差
				let dayDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
				let dayStr="";
				// 输出结果
				if (dayDiff > 0) {
				    dayStr=`VIP到期还有${dayDiff}天`;
				} else if (dayDiff === 0) {
				    dayStr="今天是VIP到期日";
				} else {
				     dayStr=`VIP已过期${Math.abs(dayDiff)}天`;
				}
				return dayStr;
			},
			goToMsg(){
				  uni.switchTab({
					  url: '/pages/TUIKit/TUIPages/TUIConversation/index' 
				  });
			},
			
			
			async openCustomerServiceChat(url,corpId) {
				// #ifdef H5
					window.location.href = url
				 // #endif 
					// #ifdef MP-WEIXIN 
					wx.openCustomerServiceChat({
						extInfo: {
							url
						},
						corpId,
						success(res) {
							console.log('成功');
						},
						fail(err) {
							console.log(err, '报错');
						}
					})
					// #endif 
			
					// #ifdef APP-PLUS 
							let shares = await this.getAppShare().catch(err => {
								throw Error(err)
							});
							shares['weixin'].openCustomerServiceChat({
								corpid: corpId,
								url
							}, suc => {
								console.log("客服打开成功", JSON.stringify(res))
							}, err => {
								console.log("error", JSON.stringify(err))
							})
					// #endif   
				},
				getAppShare() {
					   // #ifdef APP-PLUS
							return new Promise((re, rj) => {
								let shares = null;
								var pusher = plus.share.getServices(function(s) {
									shares = {};
									s.forEach(e => shares[e.id] = e);
									re(shares)
								}, function(e) {
									rj(e);
								});
							});
						// #endif 
					},
		         gotoMiniProgram(pageUrl){
					plus.share.getServices(function(res){
						var sweixin = null;  
						for(var i=0;i<res.length;i++){  
							var t = res[i];  
							if(t.id == 'weixin'){  
								sweixin = t;  
							}  
						} 
						if(sweixin){
							//唤起微信跳转小程序
							sweixin.launchMiniProgram({
								id:"gh_7a6a32e5ef61",
								path:pageUrl,
								type:0
							},function(){
								console.log("微信唤起成功");
								return true;
							},function(e){
								console.log("微信唤起失败",e);
								uni.showToast({
									title:'微信唤起失败，请检查是否有微信应用',
									icon:'none'
								})
								return false;
							})
							
						}
						else{
							uni.showToast({
								title:'微信唤起失败，请检查是否有微信应用',
								icon:'none',
								duration:3000
							})
							return false;
						}
						  
					},function(res){  
					   
					});
			}
		},
	    computed: {
	    	// 计算属性的 getter
	    	headerBG:function() {
	    		var top=this.top/88;
	    		return 'rgba(253,224,204, ' + top + ')';
	    	},
	    }
	   
	
	}
</script>


<style scoped lang="scss">
	page{
		height: 100%;
		background: #f7f7f7;
	}
	.top-cont{
		// height: 370rpx;
		position: relative;
		&::after{
			content: '';
			width: 100%;
			height: 370rpx;
			position: absolute;
			z-index: -1;
			left: 0;
			top: 0;
			border-radius: 0 0 50rpx 50rpx;
		}
		.inner.fixed{
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;
		}
		.seat{
			display: none;
			height: var(--status-bar-height);
			&.show{
				display: block;
			}
		}
		.status-bar{
			background-color:rgba(253,224,204,1) ;
			height: var(--status-bar-height);
		}
		.status-bar.main-bg {
			background-color: #fff;
		}
		.top-title-box{
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background-color: #fff;
			font-size: 18px;
			color: #333;
			font-weight: 550;
			display: none;
			&.show{
				display: block;
			}
		}
	}
	
	.top-section{
		.bg-img{
		    position: fixed;
		    width: 100%;
		    top: 0;
		    left: 0;
			right: 0;
			height: 524rpx;
			z-index: 0;
		}
	}
		
    @mixin u-flex($flexD, $alignI, $justifyC) {
    	display: flex;
    	flex-direction: $flexD;
    	align-items: $alignI;
    	justify-content: $justifyC;
    }
	
    .flex-center {
    	@include u-flex(row, center, flex-start);
    }
	
    .container {
    	background-image: url("@/static/image/hall/home_top_bg.png");
    	background-repeat: no-repeat;
    	background-size: 100%;
    	font-family: PingFang SC, PingFang SC;
    	// padding-top: var(--status-bar-height);
    	padding-bottom: 20rpx;
		height: 100%;
    }
	
    .my-header-right {
    	height: 88rpx;
     	padding-right: 28rpx;
		margin-top: var(--status-bar-height);
    	@include u-flex(row,center, flex-end);
    	image {
    		margin-left: 32rpx;
    		width: 48rpx;
    		height: 48rpx;
    		position: relative;
    	}
    	.badge::after {
    		content: "";
    		width: 16rpx;
    		height: 16rpx;
    		background: #FF5C03;
    		border-radius: 50%;
    		position: absolute;
    		right: 0;
    		top: 0;
    	}
    }
    .mybox {
    	padding: 12rpx 24rpx;
    	&-info {
    		@include u-flex(row, center, flex-start);
    		&-name {
    			font-weight: 600;
    			font-size: 40rpx;
    			color: #222222;
    		}
    		.heads {
    			width: 128rpx;
    			height: 128rpx;
				border-radius: 50%;
				margin-right: 16rpx;
    		}
    		.arrow_black {
    			width: 40rpx;
    			height: 40rpx;
    		}
			.arrow_blacks {
				width: 28rpx;
				height: 28rpx;
				margin-right: 8rpx;
			}
    		.vipbox {
    			background: linear-gradient( 90deg, #F26F00 0%, #FF9D1F 100%);
    			border-radius: 40rpx;
    			border: 1rpx solid #FEDDB9;
    			font-weight: 500;
    			font-size: 22rpx;
    			color: #FEF5EA;
    			padding: 0 24rpx;
    		}
			.pointsbox{
				background: linear-gradient( 90deg, #F5CE3C 0%, #E39414 100%);
				border-radius: 40rpx ;
				border: 1rpx solid #FEDDB9;
				font-weight: 500;
				font-size: 22rpx;
				color: #FEF5EA;
				padding: 4rpx 18rpx;
			}
    	}
    	&-integral {
    		margin-top: 48rpx;
    		@include u-flex(row, center, flex-start);
    		&-item {
    			width: 25%;
    			text-align: center;
    			font-weight: 400;
    			font-size: 24rpx;
    			color: #757575;
    		}
    		.num {
    			margin-bottom: 12rpx;
    			font-family: DIN, DIN;
    			font-weight: 500;
    			font-size: 40rpx;
    			color: #313131;
    		}
    	}
    	&-menu {
    		background: #FFFFFF;
    		border-radius: 16rpx 16rpx 16rpx 16rpx;
    		padding: 32rpx 32rpx 36rpx 32rpx;
    		margin: 20rpx 0;
    		&-title {
    			font-weight: 600;
    			font-size: 36rpx;
    			color: #222222;
    			margin-bottom: 42rpx;
    		}
    		&-box {
    			@include u-flex(row, center, flex-start);
				margin-bottom: -40rpx;
    			flex-wrap: wrap;
    		}
    		&-item {
    			width: 25%;
				margin-bottom: 40rpx;
    			@include u-flex(column, center, center);
    			font-weight: 400;
    			font-size: 24rpx;
    			color: #222222;
    			image {
    				height: 48rpx;
    				width: 48rpx;
    				margin-bottom: 10rpx;
    			}
    		}
    	}
    }
    .vip-card {
    	height: 172rpx;
    	margin-top: 28rpx;
    	background: url("@/static/image/my/vip_bg_left.png") no-repeat left / 128rpx 172rpx,
    	 url("@/static/image/my/vip_bg_right.png") no-repeat right / 324rpx 172rpx,
    	 linear-gradient( 90deg, #FFF3DF 0%, #FADBA9 100%);
    	border-radius: 16rpx 16rpx 16rpx 16rpx;
    	padding: 0 32rpx;
		
    	box-sizing: border-box;
    	@include u-flex(row, center, space-between);
    	&-info {
    		font-weight: 400;
    		font-size: 24rpx;
    		color: #834F00;
    		margin-bottom: 26rpx;
    		image {
    			width: 126rpx;
    			height: 30rpx;
    			margin-right: 34rpx;
    		}
    	}
    	&-price {
    		font-weight: 500;
    		font-size: 32rpx;
    		color: #885201;
    		line-height: 38rpx;
    		text {
    			font-family: Roboto, Roboto;
    			font-weight: bold;
    			font-size: 40rpx;
    			color: #EA8F07;
    			margin: 0 8rpx;
    		}
    	}
    	.buyvip {
    		height: 72rpx;
    		background: #885201;
    		border-radius: 36rpx 36rpx 36rpx 36rpx;
    		font-weight: 600;
    		font-size: 28rpx;
    		color: #FFF6E7;
    		line-height: 72rpx;
    		padding: 0 32rpx;
    		display: inline-block;
    	}
    }
	

	.btns{
		height: 110rpx;
	}
	
	.login-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		margin:0 30rpx;
		height: 80rpx;
		background: #fff;
		// box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
		border-radius: 40rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333;
	}
	
</style>