caimei-applets-mcare/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: 'url(https://static.caimei365.com/app/mini-mcare/icon/icon_header@2x.png)',
					backgroundSize: 'cover'
				}"
			>
				<view class="header-main" v-if="hasLogin">
					<view class="header-icon">
						<view class="header-logo">
							<image :src="headpic ? headpic : `${staticUrl}icon_default@3x.png`" mode=""></image>
						</view>
					</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 none" v-if="userIdentity == 2">
								审核未通过，请重新提交 >
							</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')">
						<view class="header-logo">
							<image :src="staticUrl + 'icon_default@2x.png'" mode=""></image>
						</view>
					</view>
					<view class="header-text">
						<view class="user-item" @click="navigator('/pages/login/login')"> 登录 / 注册 </view>
					</view>
				</view>
				<!-- 订单 -->
				<view class="header-main-order">
					<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-xiangyou"></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="staticUrl + 'icon_order_1@2x.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="staticUrl + 'icon_order_2@2x.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="staticUrl + 'icon_order_3@2x.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="staticUrl + 'icon_order_4@2x.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="staticUrl + 'icon_order_5@2x.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">
						<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="staticUrl + item.icon" mode=""></image>
							</view>
							<text class="cell-tit"> {{ item.name }} </text>
							<text class="cell-more iconfont icon-xiangyou"></text>
						</view>
						<!-- #ifdef MP-WEIXIN -->
						<button class="list-cell" open-type="contact" @bindcontact="handleContact">
							<view class="cell-icon">
								<image class="cell-icon-image" :src="staticUrl + 'icon_club_5@2x.png'" mode=""></image>
							</view>
							<text class="cell-tit"> 官方客服 </text>
							<text class="cell-more iconfont icon-xiangyou"></text>
						</button>	
						<!-- #endif -->
					</view>
				</view>
			</view>
		</view>
		<!-- 技术支持 -->
		<view class="copyright">
			<image class="image" :src="staticUrl + 'icon_caimei@2x.png'"></image>
			<view class="text">由采美365网提供技术服务</view>
		</view>
	</view>
</template>
<script>
import authorize from '@/common/config/authorize.js'
import { mapState, mapMutations } from 'vuex'

export default {
	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,
			isModify: false,
			isCmcustom: false,
			name: '',
			userType: '',
			headpic: '',
			userVip: {}, // 超级会员信息
			userBeans: 0,
			userMoney: '0.00',
			couponNum: 0,
			bankNum: 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/collection/collection',
					icon: 'icon_club_1@2x.png'
				},
				{
					name: '收货地址管理',
					path: '/pages/user/address/address',
					icon: 'icon_club_2@2x.png'
				},
				{
					name: '机构资料',
					path: '/pages/login/information',
					icon: 'icon_club_3@2x.png'
				},
				{
					name: '账户设置',
					path: '/pages/user/setting/setting',
					icon: 'icon_club_4@2x.png'
				}
			]
		}
	},
	onLoad(option) {},
	computed: {
		...mapState(['hasLogin', 'userInfo', 'isWxAuthorize'])
	},
	methods: {
		...mapMutations(['updateNoticeNum']),
		getClubObtainCenter() {
			// 获取个人中心数据
			this.UserService.GetClubObtainCenter({ userId: this.userId })
				.then(response => {
					let data = response.data
					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.bankNum = data.bankNum // 银行卡数量
					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('获取订单状态数量异常~')
				})
		},
		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 //仅为示例
			})
		},
		navigator(url) {
			if (this.hasLogin) {
				this.$api.navigateTo(url)
			} else {
				this.$api.navigateTo('/pages/login/login?type=0')
			}
		},
		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
		},
		async initUserData() {
			const userInfo = await this.$api.getComStorage('userInfo')
			this.userId = userInfo.userId ? userInfo.userId : 0
			this.getClubObtainCenter()
			this.UserClubOrderCount()
		}
	},
	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.initUserData()
		} 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;
				height: 40rpx;
				background: #FCC120;
				border-radius: 20rpx;
				line-height: 40rpx;
				font-size: $font-size-22;
				text-align: center;
				color: #FFFFFF;
				box-sizing: border-box;
				padding: 0 20rpx;
				position: relative;
				&.none {
					background: #F85050;
				}
			}
			.u-none {
				font-size: $font-size-32;
				line-height: 120rpx;
				color: #ffffff;
				text-align: left;
			}
			.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;
		display: flex;
		margin-right: 20rpx;
		align-items: center;
		justify-content: center;
		.header-logo {
			width: 120rpx;
			height: 120rpx;
			box-sizing: border-box;
			padding: 21rpx;
			background-color: #fff;
			border-radius: 100%;
			image {
				width: 78rpx;
				height: 78rpx;
				display: block;
			}
		}
	}
}
.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-item {
			flex: 1;
			height: 120rpx;
			line-height: 120rpx;
			font-size: $font-size-32;
			color: #ffffff;
			text-align: left;
		}
	}
	.header-icon {
		flex: 2;
		display: flex;
		margin-right: 20rpx;
		align-items: center;
		justify-content: center;
		.header-logo {
			width: 120rpx;
			height: 120rpx;
			box-sizing: border-box;
			padding: 21rpx;
			background-color: #fff;
			border-radius: 100%;
			image {
				width: 78rpx;
				height: 78rpx;
				display: block;
			}
		}
	}
}
.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;
		color: #b2b2b2;
	}
}
.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: #b2b2b2;
		&.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;
		text-align: left;
		&.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;
}
.copyright {
	width: 100%;
	position: absolute;
	bottom: 40rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	image{
		width: 180rpx;
		height: 60rpx;
	}
	.text {
		font-size: 20rpx;
		color: #cccccc;
	}
}
</style>