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 + 120 - StatusBar + 'px',
					paddingTop: CustomBar + 'px',
					background: 'linear-gradient(180deg, #E15616 0%, #F28F31 100%)',
					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">
							<view class="user-item-tips vip" v-if="userIdentity == 2">
								<image class="tips-icon" :src="userVipIcon" mode=""></image> {{ userType }}
							</view>
							<view
								class="user-item-tips"
								v-if="userIdentity == 4"
								:class="userVip.vipFlag == 0 ? 'none' : ''"
							>
								<image class="tips-icon" v-if="userVip.vipFlag == 1" :src="userVipIcon" mode=""></image>
								{{ userType }}
							</view>
						</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-member">
						<view class="main-member-none" v-if="!hasLogin" @click.stop="navigatorMember('/pages/login/login')">
							<view class="main-member-none-text">开通采美·超级会员，享专属特权</view>
							<view class="main-member-none-btn" @click.stop="navigatorMember('/pages/login/login')">立即开通</view>
						</view>
						<template v-else>
							<view
								class="main-member-svip"
								v-if="userVip.vipFlag == 1"
								@click="navigator('/pages/user/member/member')"
							>
								<view class="main-member-svip-h1">已开通采美·超级会员</view>
								<view class="main-member-svip-p">有效期至：{{ userVip.time }}</view>
								<view class="main-member-svip-icon"> <text class="iconfont icon-xiayibu"></text> </view>
							</view>
							<view
								class="main-member-svip"
								v-if="userVip.vipFlag == -1"
								@click="navigator('/pages/user/member/member')"
							>
								<view class="main-member-svip-h1 red">采美·超级会员已过期</view>
								<view class="main-member-svip-p">有效期至：{{ userVip.time }}</view>
								<view class="main-member-svip-icon"> <text class="iconfont icon-xiayibu"></text> </view>
							</view>
							<view
								class="main-member-none"
								v-if="userVip.vipFlag == 0"
								@click="navigatorUserMember('/pages/user/member/member')"
							>
								<view class="main-member-none-text">开通采美·超级会员，享专属特权</view>
								<view class="main-member-none-btn">立即开通</view>
							</view>
						</template>
					</view>
					<view class="main-account">
						<view class="main-cell">
							<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 account"
									@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 beans"
									@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 coupon"
									@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>
				<!-- 订单 -->
				<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,
			StaticUrl: this.$Static,
			userId: 0,
			beanNumber: 50,
			beansType: 0,
			isModify: false,
			isActivityBean: false,
			isCmcustom: false,
			userVipIcon: '',
			name: '',
			userType: '',
			headpic: '',
			userVip: {}, // 超级会员信息
			userBeans: 0,
			userMoney: '0.00',
			couponNum: 0,
			contactNumber: '',
			openid: '',
			aboutHtml: '',
			telPhone: '',
			bindMobile: '',
			isSvip: false,
			isSvipType: 2,
			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)
					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.userVip = data.vip // 超级会员信息
					if (this.userVip.vipFlag == 1) {
						this.userVipIcon = this.StaticUrl + '/icon/icon-member-svip@2x.png'
					} else {
						this.userVipIcon = this.StaticUrl + '/icon/icon-member-vip@2x.png'
					}
					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 // 联系电话
					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)
				})
		},
		UserClubOrderCount(){
			//获取订单状态数量
			this.OrderService.UserClubOrderCount({ userId: this.userId })
				.then(response => {
					let data = response.data
					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) //退货/款
				})
				.catch(error => {
					console.log('获取订单状态数量异常~')
				})
		},
		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.getNowTime(),
					Um_Key_PageName: '邀请码登录',
					Um_Key_SourcePage: '个人中心'
				})
			}
			this.$api.navigateTo(url)
		},
		navigatorMember(url) {
			// 友盟埋点游客立即开通点击事件
			if (process.env.NODE_ENV != 'development') {
				this.$uma.trackEvent('Um_Event_userVisitorMember', {
					Um_Key_Time: this.getNowTime(),
					Um_Key_PageName: '游客立即开通',
					Um_Key_SourcePage: '个人中心'
				})
			}
			this.$api.navigateTo(url)
		},
		navigatorUserMember(url) {
			// 友盟埋点机构立即开通点击事件
			if (process.env.NODE_ENV != 'development') {
				this.$uma.trackEvent('Um_Event_userClubMember', {
					Um_Key_Time: `${this.name}`,
					Um_Key_PageName: '机构立即开通',
					Um_Key_SourcePage: '个人中心'
				})
			}
			this.$api.navigateTo(url)
		},
		getNowTime () {
			  let dateTime
			  let yy = new Date().getFullYear()
			  let mm = new Date().getMonth() + 1
			  let dd = new Date().getDate()
			  let hh = new Date().getHours()
			  let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes()
				:
				new Date().getMinutes()
			  let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds()
				:
				new Date().getSeconds()
			  dateTime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
			  console.log(dateTime)
			  return dateTime
		},
		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()
			this.UserClubOrderCount()
			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.UserClubOrderCount()
					this.GetInitBeansInfo()
				})
				.catch(error => {
					console.log('异常处理=========>', error)
				})
		} 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;
			.user-item-tips {
				display: inline-block;
				float: left;
				width: 140rpx;
				height: 34rpx;
				background: #e7eaef;
				border-radius: 20rpx;
				line-height: 34rpx;
				font-size: $font-size-22;
				text-align: center;
				color: #627386;
				box-sizing: border-box;
				padding: 0 11rpx 0 41rpx;
				position: relative;
				&.none {
					width: 120rpx;
					padding: 0 11rpx 0 11rpx;
				}
				&.vip {
					background: #fff2d5;
					color: #e4aa43;
				}
				.tips-icon {
					width: 34rpx;
					height: 34rpx;
					display: block;
					position: absolute;
					left: 0;
					top: 0;
				}
			}
			.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, 0.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: #ffffff;
				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: 310rpx;
	box-sizing: border-box;
	padding: 24rpx 44.5rpx;
	position: relative;
	.main-member {
		width: 100%;
		height: 168rpx;
		background: url(https://static.caimei365.com/app/img/icon/icon-member-user@2x.png) no-repeat;
		background-size: cover;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 5rpx 24rpx 75rpx 104rpx;
		.main-member-none {
			width: 100%;
			height: 88rpx;
			box-sizing: border-box;
			padding: 28rpx 0 20rpx 0;
			line-height: 40rpx;
			.main-member-none-text {
				font-size: $font-size-26;
				color: #f0cb72;
				float: left;
			}
			.main-member-none-btn {
				width: 128rpx;
				height: 40rpx;
				background: linear-gradient(270deg, #fee9ba 0%, #f0cb72 100%);
				border-radius: 24rpx;
				line-height: 40rpx;
				text-align: center;
				font-size: $font-size-24;
				color: #333333;
				float: right;
			}
		}
		.main-member-svip {
			width: 100%;
			height: 88rpx;
			box-sizing: border-box;
			padding: 12rpx 0 9rpx 0;
			position: relative;
			.main-member-svip-h1 {
				width: 100%;
				height: 37rpx;
				line-height: 37rpx;
				color: #f0cb72;
				text-align: left;
				font-size: $font-size-26;
				&.red {
					color: #ff2a2a;
				}
			}
			.main-member-svip-p {
				width: 100%;
				height: 28rpx;
				line-height: 28rpx;
				color: #bcbcbc;
				text-align: left;
				font-size: $font-size-20;
			}
			.main-member-svip-icon {
				width: 88rpx;
				height: 88rpx;
				position: absolute;
				right: 0;
				top: 0;
				line-height: 88rpx;
				text-align: right;
				.iconfont {
					font-size: 30rpx;
					color: #f0cb72;
				}
			}
		}
	}
	.main-account {
		width: 100%;
		height: 168rpx;
		position: absolute;
		top: 118rpx;
		left: 0;
		box-sizing: border-box;
		padding: 0 24rpx;
		.main-cell {
			width: 100%;
			height: 168rpx;
			background-color: $bg-color;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 24rpx 0;
		}
		.main-account-le {
			width: 165rpx;
			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: 537rpx;
			height: 100%;
			float: right;
			.main-account-ri-view {
				height: 100%;
				float: left;
				&.account {
					width: 40%;
				}
				&.beans {
					width: 32%;
				}
				&.coupon {
					width: 28%;
				}
				.main-account-icon {
					width: 100%;
					height: 74rpx;
					line-height: 74rpx;
					text-align: center;
					font-size: $font-size-30;
					color: #f94b4b;
					&.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(0.8);
	-ms-transform: scale(0.8);
	transform: scale(0.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>