caimei-applets-caimei/pages/tabBar/user/user.vue

<template>
	<view class="container user clearfix">
		<cm-custom :navbar-data='nvabarData' v-if="isCmcustom"></cm-custom>
		<view class="user-section">
			<view class="header" 
				  :style="{height:(CustomBar+90)-StatusBar+'px',paddingTop:CustomBar+'px',background:'url('+ bgImgUrl +')',backgroundSize:'cover'}">
				<view class="header-main" v-if="hasLogin">
					<view class="header-icon">
						<image :src="headpic ? headpic : 'https://static.caimei365.com/app/img/icon/icon-club@3x.png' " mode=""></image>
					</view>
					<view class="header-text">
						<view class="user-item"><text class="u-h1">{{name}}</text></view>
						<view class="user-item">
							<text class="u-viptips" v-if="userIdentity == 2">{{userType}}</text>
							<text class="u-tips" v-if="userIdentity == 4">{{userType}}</text>
						</view>
					</view>
				</view>
				<view class="header-main-none" v-else>
					<view class="header-icon" @click="navigator('/pages/login/login')">
						<image src="https://static.caimei365.com/app/img/icon/icon-club@3x.png" mode=""></image>
					</view>
					<view class="header-text">
						<view class="user-item">
							<text class="u-h1" @click="navigatorRegirst('/pages/login/login')">账号登录/注册></text>
						</view>
						<view class="user-item">
							<text class="u-p" @click="navigator('/pages/login/login')">登录采美商城更多惊喜等着您~</text>
						</view>
						<view class="user-code" @click="navigatorLoginCode('/pages/login/logincode')">邀请码登录></view>
					</view>
				</view>
				<!-- 我的资产 -->
				<view class="header-main-account">
					<view class="main-account">
						<view class="main-account-le">
							<view class="main-account-icon">
								<text class="iconfont icon-zichan"></text>
							</view>
							<view class="main-account-text">我的资产</view>
						</view>
						<view class="main-account-ri">
							<view class="main-account-ri-view" @click="navigator('/pages/user/account/account')">
								<view class="main-account-icon" v-if="hasLogin">{{ userMoney }}</view>
								<view class="main-account-icon none" v-else>-</view>
								<view class="main-account-text">账户余额</view>
							</view>
							<view class="main-account-ri-view" @click="navigator('/pages/user/account/account-bean')">
								<view class="main-account-icon" v-if="hasLogin">{{ userBeans ? userBeans : 0  }}</view>
								<view class="main-account-icon none" v-else>-</view>
								<view class="main-account-text">采美豆</view>
							</view>
							<view class="main-account-ri-view" @click="navigator('/pages/user/coupon/coupon')">
								<view class="main-account-icon" v-if="hasLogin">{{ couponNum ? couponNum : 0  }}</view>
								<view class="main-account-icon none" v-else>-</view>
								<view class="main-account-text">优惠券</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 订单 -->
				<view class="header-main-order" :style="{ marginTop: hasLogin ? '0rpx': '0rpx' }">
					<view class="user-order">
						<view class="tab-title" @click="navigator('/pages/user/order/order-list?state=0')">
							<text class="cell-tit">我的订单</text>
							<text class="cell-more">全部订单</text>
							<text class="iconfont icon-xiayibu"></text>
						</view>
						<view class="order-section">
							<view class="order-item" 
								  @click="navigator('/pages/user/order/order-list?state=1')" 
								  hover-class="common-hover"  
								  :hover-stay-time="50">
								<view class="order-icon">
									<image src="https://static.caimei365.com/app/img/icon/order5@3x.png" mode=""></image>
									<text 	v-if="confirmedCount>0 && hasLogin" 
											class="uni-badge uni-badge-error uni-small uni-badge--small icon-num" 
											:class="[confirmedCount < 10 ? 'goleft':'']">
											{{confirmedCount >= 99? '99+' : confirmedCount}}
									</text>
								</view>
								<text class="order-t">待确认</text>
							</view>
							<view class="order-item" 
								  @click="navigator('/pages/user/order/order-list?state=2')"  
								  hover-class="common-hover" 
								  :hover-stay-time="50">
								<view class="order-icon">
									<image src="https://static.caimei365.com/app/img/icon/order1@3x.png" mode=""></image>
									<text  v-if="paymentCount >0 && hasLogin" 
										   class="uni-badge uni-badge-error uni-small uni-badge--small icon-num " 
										   :class="[paymentCount < 10 ? 'goleft':'']">
										   {{paymentCount >= 99? '99+' : paymentCount}}
									</text>
								</view>
								<text class="order-t">待付款</text>
							</view>
							<view class="order-item" 
								  @click="navigator('/pages/user/order/order-list?state=3')" 
								  hover-class="common-hover"  
								  :hover-stay-time="50">
								<view class="order-icon">
									<image src="https://static.caimei365.com/app/img/icon/order2@3x.png" mode=""></image>
									<text   v-if="waitShipmentsCount >0 && hasLogin" 
											class="uni-badge uni-badge-error uni-small uni-badge--small icon-num" 
											:class="[waitShipmentsCount < 10 ? 'goleft':'']">
											{{waitShipmentsCount >= 99? '99+' : waitShipmentsCount}}
									</text>
								</view>
								<text class="order-t">待发货</text>
							</view>
							<view class="order-item" 
								  @click="navigator('/pages/user/order/order-list?state=4')" 
								  hover-class="common-hover"  
								  :hover-stay-time="50">
								<view class="order-icon">
									<image src="https://static.caimei365.com/app/img/icon/order3@3x.png" mode=""></image>
									<text 	v-if="shipmentsCount>0 && hasLogin" 
											class="uni-badge uni-badge-error uni-small uni-badge--small icon-num" 
											:class="[shipmentsCount < 10 ? 'goleft':'']">
											{{shipmentsCount >= 99? '99+' : shipmentsCount}}
									</text>
								</view>
								<text class="order-t">已发货</text>
							</view>
							<view class="order-item" 
								  @click="navigator('/pages/user/order/order-list?state=5')" 
								  hover-class="common-hover"  
								  :hover-stay-time="50">
								<view class="order-icon">
									<image src="https://static.caimei365.com/app/img/icon/order4@3x.png" mode=""></image>
									<text 	v-if="salesReturnCount >0 && hasLogin"
											class="uni-badge uni-badge-error uni-small uni-badge--small icon-num" 
											:class="[salesReturnCount < 10 ? 'goleft':'']">
											{{salesReturnCount >= 99? '99+' : salesReturnCount}}
									</text>
								</view>
								<text class="order-t">退货/款</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 底部跳转 -->
				<view class="header-main-listcell">
					<view class="list-cell-item" v-show="hasLogin">
						<view class="list-cell" 
							  v-show="userIdentity == 4" 
							  @click="navigatorClubUpgrade(`/pages/login/apply?clubStatus=${clubStatus}`)" 
							  hover-class="cell-hover" 
							  :hover-stay-time="50">
							<view class="cell-icon">
								<image class="cell-icon-image" src="https://static.caimei365.com/app/img/icon/icon_club_8@2x.png" mode=""></image>
							</view>
							<text class="cell-tit">
								升级会员机构
								<text class="cell-tips">采美豆</text>
							</text>
							<text class="cell-more">
								<text class="txt">{{clubStatusText(clubStatus)}}</text>
								<text class="iconfont icon-xiayibu"></text>
							</text>
						</view>
						<view class="list-cell" 
							  @click="navigator('/pages/user/regularPurchase/regularPurchase')" 
							  hover-class="cell-hover" 
							  :hover-stay-time="50">
							<view class="cell-icon">
								<image class="cell-icon-image" src="https://static.caimei365.com/app/img/icon/icon_club_9@2x.png" mode=""></image>
							</view>
							<text class="cell-tit">再次购买</text>
							<text class="cell-more iconfont icon-xiayibu"></text>
						</view>
						<view class="list-cell" 
							  @click="navigator('/pages/user/collection/collection')" 
							  hover-class="cell-hover" 
							  :hover-stay-time="50">
							<view class="cell-icon">
								<image class="cell-icon-image" src="https://static.caimei365.com/app/img/icon/icon_club_13@2x.png" mode=""></image>
							</view>
							<text class="cell-tit">收藏商品</text>
							<text class="cell-more iconfont icon-xiayibu"></text>
						</view>
					</view>
					<view class="list-cell-item">
						<view class="list-cell"  
							  v-for="(item, index) in firstList" 
							  :key="index" 
							  @click="navigator(item.path)" 
							  hover-class="cell-hover" 
							  :hover-stay-time="50">
							<view class="cell-icon">
								<image class="cell-icon-image" :src="item.icon" mode=""></image>
							</view>
							<text class="cell-tit">
								{{item.name}}
								<text class="cell-tips" v-if="index == 2 && isModify">采美豆</text>
							</text>
							<text class="cell-more iconfont icon-xiayibu"></text>
						</view>
					</view>
					<view class="list-cell-item">
						<view class="list-cell" hover-class="cell-hover" :hover-stay-time="50">
							<view class="cell-icon">
								<image class="cell-icon-image" src="https://static.caimei365.com/app/img/icon/icon_club_5@2x.png" mode=""></image>
							</view>
							<text class="cell-tit cont">联系我们</text>
							<text class="cell-more cont" @click="toPhone">{{contactNumber}}</text>
						</view>
						<view class="list-cell" 
							  @click="this.$api.navigateTo('/pages/user/about/about')" 
							  hover-class="cell-hover" 
							  :hover-stay-time="50">
							<view class="cell-icon">
								<image class="cell-icon-image" src="https://static.caimei365.com/app/img/icon/icon_club_6@2x.png" mode=""></image>
							</view>
							<text class="cell-tit">关于我们</text>
							<text class="cell-more iconfont icon-xiayibu"></text>
						</view>
						<view class="list-cell last" 
							  @click="this.$api.navigateTo('/pages/h5/article/page?linkType=99')" 
							  hover-class="cell-hover" 
							  :hover-stay-time="50">
							<view class="cell-icon">
								<image class="cell-icon-image" src="https://static.caimei365.com/app/img/icon/icon_club_7@2x.png" mode=""></image>
							</view>
							<text class="cell-tit">帮助中心</text>
							<text class="cell-more iconfont icon-xiayibu"></text>
						</view>
					</view>	
				</view>
				<view class="header-main-last"></view>
			</view>		
		</view>	
		<!-- 采美豆提示弹窗 -->
		<activityBean v-if="isActivityBean" :show="isActivityBean" :beansType="beansType" :beanNumber="beanNumber"  @cancel="handleBeanlClick"></activityBean>
	</view>
</template>
<script>
	import uniBadge from '@/components/uni-badge/uni-badge.vue'
	import activityBean from '@/components/cm-module/activity/activityBean.vue'
	import authorize from '@/common/config/authorize.js'
	import { mapState,mapMutations } from 'vuex'
	
	
	export default{
		components: {
			uniBadge,
			activityBean
		},
		data() {
			return{	
				nvabarData: {				// 顶部自定义导航
					showCapsule: 1, 		// 是否显示左上角图标  1表示显示  0表示不显示,
					showSearch: 0,
					title: '个人中心', 		// 导航栏中间的标题
					haveBack:false,
					textLeft:this.$store.state.isIphone,
					textColor:'#333333',
					bgColor:''
				},
				CustomBar:this.CustomBar,	// 顶部导航栏高度
				StatusBar: this.StatusBar,
				userId:0,
				beanNumber:50,
				beansType:0,
				isModify:false,
				isActivityBean:false,
				isCmcustom:false,
				bgImgUrl:'https://img.caimei365.com/group1/M00/03/B0/Cmis217Z_i6ASHobAAhl69yz3SM078.png',
				name:'',
				userType:'',
				headpic:'',
				userBeans:0,
				userMoney:'0.00',
				couponNum:0,
				contactNumber:'',
				openid:'',
				aboutHtml:'',
				telPhone:'',
				bindMobile:'',
				clubStatus:'',			// 机构升级会员机构审核状态1:待审核  91:审核失败
				userIdentity:'', 		// 机构等级
				confirmedCount:0,		// 待确认
				paymentCount:0, 		// 待付款角标
				waitShipmentsCount:0, 	// 待收货角标
				shipmentsCount:0,  		// 已发货角标
				salesReturnCount:'',	// 退货/款角标
				firstList:[
					{
						name:'运营人员管理',
						path:'/pages/user/operator/list',
						icon:'https://static.caimei365.com/app/img/icon/icon_club_1@2x.png',
					},
					{
						name:'收货地址管理',
						path:'/pages/user/address/address',
						icon:'https://static.caimei365.com/app/img/icon/icon_club_2@2x.png',
					},
					{
						name:'机构资料',
						path:'/pages/login/information',
						icon:'https://static.caimei365.com/app/img/icon/icon_club_3@2x.png',
					},
					{
						name:'账户设置',
						path:'/pages/user/setting/setting',
						icon:'https://static.caimei365.com/app/img/icon/icon_club_4@2x.png',
					},
				]
			}
		},
		onLoad(option){
			
		},
		computed: {
			...mapState(['hasLogin','userInfo','isWxAuthorize'])
		},
		methods:{
			getClubObtainCenter(){// 获取个人中心数据
				this.UserService.GetClubObtainCenter({userId:this.userId}).then(response =>{
					let data = response.data
					this.userMoney = this.filtersMoney(data.user.ableUserMoney)
					console.log('userMoney',this.userMoney)
					this.userIdentity = data.user.userIdentity //机构等级
					if(this.userIdentity == 2){
						this.name = data.club.name //会员机构名称
						this.userType = '会员机构'
					}else{
						this.name = data.user.userName //普通机构名称
						this.userType = '普通机构'
					}		
					this.userBeans =data.user.userBeans// 采美豆数量
					this.headpic = data.user.image // 会所头像
					this.bindMobile = data.user.bindMobile// 登录手机号
					this.clubStatus = data.user.clubStatus // 机构审核状态
					this.couponNum =data.couponNum// 优惠券数量
					this.isModify =  data.isModify // 是否显示采美豆
					this.contactNumber = data.contactNumber // 联系电话		
					this.confirmedCount = this.showBadge(data.confirmedCount)//待确认
					this.paymentCount = this.showBadge(data.paymentCount)//待付款
					this.waitShipmentsCount = this.showBadge(data.waitShipmentsCount)//待收货		
					this.shipmentsCount = this.showBadge(data.shipmentsCount)//已发货	
					this.salesReturnCount = this.showBadge(data.salesReturnCount)//退货/款	
					let clubInfo ={name:this.name,image:this.headpic,userId:data.user.userId}
					uni.setStorage({key: 'clubInfo',data: clubInfo}) 
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			GetInitBeansInfo(){//初始化采美豆信息
				this.UserService.GetHomeObtainBeans({userId:this.userId}).then(response =>{
					this.beansType = response.data.beansType
					this.beanNumber = response.data.num
					this.isActivityBean = true
				}).catch(error =>{
					console.log('用户暂无采美豆推送~')
				})
			},
			getPhone(){// 获取联系我们电话
				this.CommonService.QueryAfterSale().then(response =>{
					this.contactNumber = response.data.contactNumber
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			toPhone(){// 拨号
				uni.makePhoneCall({
				    phoneNumber:this.contactNumber //仅为示例
				})
			},
			filtersMoney(param){
				let moneyText
				if( param == 0 ){
					moneyText = '0.00'
				}else{
					let i =  param.toString().lastIndexOf('.')
					let money
					if(i==-1){
						money = this.$api.FormatMoney(param) //会所剩余余额
						moneyText = money +'.00'
					}else{
						money = this.$api.FormatMoney(param) //会所剩余余额
						moneyText = money
					}
				}
				console.log('moneyText',moneyText)
				return moneyText
			},
			handleBeanlClick(){//关闭采美豆弹窗
				this.isActivityBean = false
			},
			navigator(url){
				if(this.hasLogin){
					this.$api.navigateTo(url)
				}else{
					this.$api.navigateTo('/pages/login/login?type=0')
				}
			},	
			navigatorRegirst(url){
				if(!this.hasLogin){
					// 友盟埋点注册入口点击事件
					if(process.env.NODE_ENV != 'development'){
						this.$uma.trackEvent('Um_Event_totalLoginAndRegister', {
							Um_Key_PageName: '登录注册统一入口',
							Um_Key_SourcePage: '个人中心',
						})
					}
					this.$api.navigateTo(url)
				}
			},
			navigatorClubUpgrade(url){
				// 友盟埋点普通机构升级点击事件
				if(process.env.NODE_ENV != 'development'){
					this.$uma.trackEvent('Um_Event_ClubUpgrade', {
						Um_Key_ClubName: `${this.name}`,
						Um_Key_PageName: '普通机构升级入口',
						Um_Key_SourcePage: '个人中心',
					})
				}
				this.$api.navigateTo(url)
			},
			navigatorLoginCode(url){
				// 友盟埋点普通机构升级点击事件
				if(process.env.NODE_ENV != 'development'){
					this.$uma.trackEvent('Um_Event_LoginCodeBtn', {
						Um_Key_ClubName: `${this.name}`,
						Um_Key_PageName: '邀请码登录',
						Um_Key_SourcePage: '个人中心',
					})
				}
				this.$api.navigateTo(url)
			},
			navigatorNex(url){
				if(!this.hasLogin){
					this.$api.navigateTo(url)
				}
			},		
			showBadge(n){
				let num =''
				if(n>100){num = 99}else{num = n}
				return num
			},	
			clubStatusText(state){
				let stateText
				switch(state){
					case 90:
						 stateText = ''
						 break
					case 1:
						 stateText = '正在审核中'
						 break
					case 92:
						 stateText = '审核不通过'
						 break
				}
				return stateText
			}
		},
		onPageScroll(e){//实时获取到滚动的值
			if(e.scrollTop>20){
				this.isCmcustom = true
				this.nvabarData.bgColor = '#FFFFFF'
				this.nvabarData.textColor = '#333333'
			}else{
				this.isCmcustom = false
				this.nvabarData.bgColor = ''
				this.nvabarData.textColor = '#FFFFFF'
			}	
		},
		onPullDownRefresh() {//下拉刷新
			if(this.hasLogin){
				this.getClubObtainCenter()
				uni.stopPullDownRefresh()
			}else{
				uni.stopPullDownRefresh()
			}
		},
		onShow(){
			if(this.hasLogin){
				this.$api.getComStorage('userInfo').then((resolve) =>{
					this.userId = resolve.userId ? resolve.userId : 0
					this.getClubObtainCenter()
					this.GetInitBeansInfo()
				}).catch(reject =>{
					console.log('异常处理=========>',reject)
				})
			}else{
				this.getPhone()
				this.$store.commit('updateAllNum',0)
			}
		}	
	}
</script>

<style lang="scss">
	@import "@/uni.scss";
	page{
		background-color: #F7F7F7;
	}
	.user{
		width: 100%;
		height: 100%;
		position:relative;
		background: rgba(247, 247, 247, 1);
	}	
	.header{
		width: 100%;
		position: relative;
		background-size: cover;
	}	
	.header-main{
		width: 702rpx;
		height: 130rpx;
		padding: 12rpx 24rpx;
		display: flex;
		.header-text{
			flex: 8;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			padding: 10rpx 0 0 20rpx;
			.user-item{
				flex: 1;
				height: 64rpx;
				line-height: 64rpx;
				.u-tips{
					display: inline-block;
					float: left;
					width: 98rpx;
					height: 30rpx;
					border: 1px solid #FFFFFF;
					background: linear-gradient(128deg,rgba(242,143,49,1) 0%,rgba(225,86,22,1) 100%);
					border-radius: 16rpx;
					line-height: 30rpx;
					font-size: $font-size-20;
					text-align: center;
					color: #FFFFFF;
				}
				.u-viptips{
					display: inline-block;
					float: left;
					width: 98rpx;
					height: 30rpx;
					border: 1px solid #FFE600;
					background: linear-gradient(128deg,rgba(242,143,49,1) 0%,rgba(225,86,22,1) 100%);
					border-radius: 16rpx;
					line-height: 30rpx;
					font-size: $font-size-20;
					text-align: center;
					color: #FFE600;
				}
				.u-h1{
					width: 400rpx;
					float: left;
					font-size: $font-size-30;
					color: #FFFFFF;
					text-align: left;
					-o-text-overflow: ellipsis;
					text-overflow: ellipsis;
					display: -webkit-box;
					word-break: break-all;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
				.u-p{
					font-size: $font-size-24;
					line-height: 30rpx;
					color: #FFFFFF;
					text-align: left;
				}
			}
		}
		.header-icon{
			flex: 2;
			image{
				float: right;
				width: 128rpx;
				height: 128rpx;
				border-radius: 100%;
				border: 2rpx solid #FFFFFF;
			}
		}
	}
	.header-main-none{
		width: 702rpx;
		height: 152rpx;
		padding: 0 24rpx;
		display: flex;
		.header-text{
			flex: 8;
			display: flex;
			flex-direction: column;
			position: relative;
			box-sizing: border-box;
			padding: 20rpx 0;
			.user-code{
				width: 193rpx;
				height: 56rpx;
				background: rgba(255,255,255,.2);
				color: #FFFFFF;
				line-height: 56rpx;
				font-size: $font-size-26;
				padding: 0 20rpx 0 23rpx;
				box-sizing: border-box;
				border-radius: 28rpx 0 0 28rpx;
				position: absolute;
				right: -24rpx;
				top: 46rpx;
			}
			.user-item{
				flex: 1;
				height: 50rpx;
				line-height: 50rpx;
				.line{
					margin: 0 10rpx;
				}
				.u-h1{
					float: left;
					font-size: $font-size-28;
					color: #FFFFFF;
					text-align: left;
					-o-text-overflow: ellipsis;
					text-overflow: ellipsis;
					display: -webkit-box;
					word-break: break-all;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
				.u-p{
					font-size: $font-size-24;
					line-height: 50rpx;
					color: #EFEFEF;
					text-align: left;
				}
			}
		}
		.header-icon{
			flex: 2;
			display: flex;
			margin-right: 20rpx;
			align-items: center;
			justify-content: center;
			image{
				float: right;
				width: 128rpx;
				height: 128rpx;
				border-radius: 100%;
				border: 2rpx solid #FFFFFF;
			}
		}
	}
	.header-main-account{
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding:24rpx;
		.main-account{
			width: 100%;
			height: 168rpx;
			background-color: $bg-color;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding:24rpx 0;
			.main-account-le{
				width: 200rpx;
				height: 100%;
				position: relative;
				float: left;
				&::before{
					content: '';
					width: 2rpx;
					height: 64rpx;
					background-color: #c4c4c4;
					position: absolute;
					right: 0;
					top: 30rpx;
				}
				.main-account-icon{
					width: 100%;
					height: 74rpx;
					line-height: 74rpx;
					text-align: center;
					.icon-zichan{
						font-size: 50rpx;
						color: #f94b4b;
					}
				}
				.main-account-text{
					width: 100%;
					height: 44rpx;
					line-height: 44rpx;
					font-size: $font-size-28;
					text-align: center;
					color: #333333;
				}
			}
			.main-account-ri{
				width: 502rpx;
				height: 100%;
				float: right;
				.main-account-ri-view{
					width: 33.33%;
					height: 100%;
					float: left;
					.main-account-icon{
						width: 100%;
						height: 74rpx;
						line-height: 74rpx;
						text-align: center;
						font-size: $font-size-32;
						color: #f94b4b;
						font-weight: bold;
						&.none{
							color: #333333;
							font: $font-size-36;
							font-weight: normal;
						}
					}
					.main-account-text{
						width: 100%;
						height: 44rpx;
						line-height: 44rpx;
						font-size: $font-size-28;
						text-align: center;
						color: #333333;
					}
				}
			}
		}
	}
	.header-main-order{
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 0 24rpx;
		margin-top: 26rpx;
		.user-order{
			width: 100%;
			height: auto;
			background-color: $bg-color;
			margin-bottom: 24rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 0 24rpx;
		}	
	}
	.tab-title{
		font-size: $font-size-28;
		line-height: 80rpx;
		color: #333333;
		text-align:left;
		border-bottom: 1px solid #F8F8F8;
		position: relative;
		.cell-tit{
			font-size: $font-size-28;
			color: $text-color;
		}
		.cell-more{
			float: right;
			line-height: 80rpx;
			font-size: $font-size-24;
			color: $text-color;
			padding-right: 30rpx;
		}
		.iconfont{
			width: 30rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			position: absolute;
			right: 0;
			top: 0;
			display: block;
			font-size: $font-size-28;
		}
	}
	.order-section{
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap:wrap;
		height: 99rpx;
		padding: 24rpx 0;
	}
	.order-item{
		flex:1;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		&:last-child{
			margin-right: 0;
		}
		.order-icon{
			width: 52rpx;
			height: 52rpx;
			position: relative;
			image{
				width: 52rpx;
				height: 52rpx;
			}
			.icon-num{
				position: absolute;
				right:-24rpx;
				top: -9rpx;
			}
			.icon-num.goleft{
				right: -12rpx;
			}
		}
		.order-t{
			line-height: 50rpx;
			font-size: $font-size-24;
			color: $text-color;
		}
	}
	.header-main-last{
		width: 100%;
		height: 20rpx;
		float: left;
		box-sizing: border-box;
	}
	.header-main-listcell{
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 0 24rpx;
		margin-bottom: 60rpx;
	}	
	.list-cell-item{
		width: 654rpx;
		height: auto;
		margin-bottom: 24rpx;
		padding:0 24rpx;
		background: $bg-color;
		border-radius: 20rpx;
	}
	.list-cell{
		width: 100%;
		line-height:100rpx;
		position:relative;
		background: $bg-color;
		border-bottom: 1px solid #EBEBEB;
		height: 100rpx;
		&:last-child{
			border-bottom: none;
		}
		&.cell-hover{
			background:#fafafa;
		}
		.cell-icon{
			width: 60rpx;
			height: 100rpx;
			text-align: center;
			box-sizing: border-box;
			padding: 32rpx 12rpx;
			float: left;
			.cell-icon-image{
				width: 36rpx;
				height: 36rpx;
				display: block;
			}
		}
		.cell-more{
			height: 100rpx;
			line-height: 100rpx;
			text-align: right;
			position: absolute;
			right: 0;
			top: 0;
			font-size:$font-size-28;
			color:#666666;
			&.cont{
				width: 250rpx;
			}
			.txt{
				color: #FB4343;
				padding-right: 10rpx;
			}
		}
		.cell-tit{
			width: 465rpx;
			display: block;
			float: left;
			font-size: $font-size-28;
			color: #666666;
			margin-right:10rpx;
			&.cont{
				width: 300rpx;
			}
			.cell-tips{
				width: 74rpx;
				height: 32rpx;
				line-height: 32rpx;
				padding: 0 7rpx;
				border-radius: 16rpx;
				background-color: #ffe6dc;
				color: $color-system;
				text-align: center;
				font-size: $font-size-20;
				margin-left: 8rpx;
			}
		}
		.cell-tip{
			font-size: $font-size-28;
			color: $text-color;
		}
	}	
	.list-cell.last{
		border-bottom: none;
	}
	.uni-badge--small {
		-webkit-transform: scale(.8);
		-ms-transform: scale(.8);
		transform: scale(.8);
		-webkit-transform-origin: center center;
		-ms-transform-origin: center center;
		transform-origin: center center;
	}
	.uni-badge {
		font-family: 'Helvetica Neue', Helvetica, sans-serif;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		font-size: 12px;
		line-height: 1;
		display: inline-block;
		padding: 3px 6px;
		color: #333;
		border-radius: 100px;
		background-color: #f1f1f1;
	}
	.uni-badge-error {
		color: #fff;
		background-color: #dd524d;
	}
</style>