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

<template>
	<view class="container">
		<!-- 机构信息区域 -->
		<template v-if="isRequest">
			<view class="ws-header">
				<!-- 用户信息 -->
				<view class="user-info">
					<image class="user_default" v-if="!hasLogin && isRequest" :src="StaticUrl+'icon-default-avatar.png'" mode="widthFix"></image>
					<image class="user_default" v-else :src="UserInfo.headImgUrl" mode="widthFix"></image>
					<view class="user-login" v-if="!hasLogin && isRequest" @click="navigator('/pages/login/login')">登录</view>
					<view class="user-text" v-else> 
						{{ UserInfo.userIdentity == 1 ? UserInfo.nickName : UserInfo.name }} 
					</view>
				</view>
				<!-- 背景图 -->
				<image class="user-bg" :src="StaticUrl+'icon-user-bg@2x.png'" mode="widthFix"></image>
			</view>
			<!-- 机构信息END -->
			<!-- 订单状态区域 -->
			<view class="order-wrap">
				<view class="more">
					<text class="title">我的订单</text>
					<view @click="OrderNavigator(0)">
						<text class="more-right">全部订单</text>
						<text class="iconfont icon-chakangengduo"></text>
					</view>
				</view>
				<view class="line"></view>
				<!-- 菜单选项 -->
				<view class="order-nav">
					<view
						class="order-nav-item"
						@click="OrderNavigator(1)"
					>
						<image :src="StaticUrl+'icon-order-1@2x.png'" mode="widthFix"></image>
						<text>待付款</text>
						<view class="tui-badge tui-badge-box" v-if="hasLogin && paymentCount > 0">
							<tui-badge :scaleRatio="0.8" type="danger">{{
								paymentCount | countNum
							}}</tui-badge>
						</view>
					</view>
					<view
						class="order-nav-item"
						@click="OrderNavigator(2)"
					>
						<image :src="StaticUrl+'icon-order-2@2x.png'" mode="widthFix"></image>
						<text>待发货</text>
						<view class="tui-badge tui-badge-box" v-if="hasLogin && waitShipmentsCount > 0">
							<tui-badge :scaleRatio="0.8" type="danger">{{
								waitShipmentsCount | countNum
							}}</tui-badge>
						</view>
					</view>
					<view
						class="order-nav-item"
						@click="OrderNavigator(3)"
					>
						<image :src="StaticUrl+'icon-order-3@2x.png'" mode="widthFix"></image>
						<text>已发货</text>
						<view class="tui-badge tui-badge-box" v-if="hasLogin && shipmentsCount > 0">
							<tui-badge :scaleRatio="0.8" type="danger">{{
								shipmentsCount | countNum
							}}</tui-badge>
						</view>
					</view>
					<view
						class="order-nav-item"
						@click="OrderNavigator(3)"
					>
						<image :src="StaticUrl+'icon-order-4@2x.png'" mode="widthFix"></image>
						<text>退货/款</text>
						<view class="tui-badge tui-badge-box" v-if="hasLogin && salesReturnCount > 0">
							<tui-badge :scaleRatio="0.8" type="danger">{{
								salesReturnCount | countNum
							}}</tui-badge>
						</view>
					</view>
				</view>
			</view>
			<!-- 订单状态区域END -->
			<!-- 菜单导航区域 -->
			<view class="place-menu-conten clearfix">
				<view class="place-menu-cell"  @click="navigator('/pages/user/activity/activity-list')" v-if="UserInfo.userIdentity == 2">
					<view class="place-left">
						<image class="place-menu-icon" :src="StaticUrl+'icon-user-h@2x.png'" mode=""></image>
						<text class="place-menu-title">活动专区</text>
					</view>
					<text class="iconfont icon-chakangengduo"></text>
				</view>
				<view class="place-menu-cell" @click="navigator('/pages/user/address/address')">
					<view class="place-left">
						<image class="place-menu-icon" :src="StaticUrl+'icon-user-d@2x.png'" mode=""></image>
						<text class="place-menu-title">收货地址</text>
					</view>
					<text class="iconfont icon-chakangengduo"></text>
				</view>
				<button class="place-menu-cell last" open-type="contact" @bindcontact="handleContact">
					<view class="place-left">
						<image class="place-menu-icon" :src="StaticUrl+'icon-user-c@2x.png'" mode=""></image>
						<text class="place-menu-title">在线客服</text>
					</view>
					<text class="iconfont icon-chakangengduo"></text>
				</button>
			</view>
			<!-- 菜单导航区域END -->
			<!-- 底部 -->
			<view class="user-support" :class="UserInfo.userIdentity == 2 ? 'top' : ''">
				<image class="user-support-image" :src="StaticUrl+'icon-logo@1x.png'" mode=""></image>
				<view class="user-support-text">采美365网提供商品技术服务</view>
			</view>
		</template>
	</view>
</template>

<script>
import nutBadge from '@/components/thorui/tui-badge/tui-badge.vue'
import { mapState, mapMutations } from 'vuex'
import authorize from '@/common/config/authorize.js'
import wxLogin from '@/services/wxLogin.js'

export default {
	components: {
		nutBadge
	},
	data() {
		return {
			StaticUrl:this.$Static,
			CustomBar: this.CustomBar, // 顶部导航栏高度
			UserInfo: {}, //用户信息
			isRequest: true,
			paymentCount: 1, //待付款角标
			waitShipmentsCount: 20, //待收货角标
			shipmentsCount: 123, //已发货角标
			salesReturnCount: 0, //退货/款角标
			userId:0
		}
	},
	onLoad() {
		
	},
	computed: {
		...mapState(['hasLogin', 'userInfo', 'isWxAuthorize'])
	},
	filters: {
		countNum(value) {
			return value > 99 ? '99+' : value
		}
	},
	onPullDownRefresh() {
		//下拉刷新
		if (this.hasLogin) {
			this.GetWxAuthorize()
		}else{
			uni.stopPullDownRefresh()
		}
	},
	methods: {
		...mapMutations(['login', 'logout']),
		GetUserInfo(){
			this.UserInfo = uni.getStorageSync('userInfo')
			this.$api.getStorage().then((resolve) => {
				this.userId = resolve.userId ? resolve.userId : '';	
				this.GetUserInfoPersonal()
			})
		},
		//初始化个人中心数据
		GetUserInfoPersonal() {
			this.UserService.GetUserOrderTotal({ userId: this.userId })
			.then(response => {
				const data = response.data
				this.paymentCount = data.paymentCount //待付款
				this.waitShipmentsCount = data.waitShipmentsCount //待收货
				this.shipmentsCount = data.shipmentsCount //已发货
				this.salesReturnCount = data.salesReturnCount //退货/款
			})
			.catch(error => {
				this.$util.msg(error.msg, 2000)
			})
		},
		handleContact(e) {// 客服
			console.log(e.detail.path)
			console.log(e.detail.query)
		},
		OrderNavigator(state){// 栏目跳转
			if(this.hasLogin){
				if(this.UserInfo.userIdentity == 2){
					this.$api.navigateTo(`/pages/user/order/order-list-retail?state=${state}`)
				}else{
					this.$api.navigateTo(`/pages/user/order/order-list?state=${state}`)
				}
			}else{
				this.$api.navigateTo('/pages/login/login')
			}
		},
		navigator(url) {
			if(this.hasLogin){
				this.$api.navigateTo(url)
			}else{
				this.$api.navigateTo('/pages/login/login')
			}
		},
	},
	onShow() {
		if(this.hasLogin){
			this.GetUserInfo()
		}
	}
}
</script>

<style lang="scss">
@import '@/uni.scss';
.container {
	box-sizing: border-box;
	background: #f7f7f7;
}
// 用户登录信息区域
.ws-title {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	font-size: 34rpx;
	text-align: center;
}
.ws-header {
	position: relative;
	height: 280rpx;
	.user-info {
		position: absolute;
		z-index: 10;
		width: 750rpx;
		height: 280rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.user_default {
			display: block;
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}
	}
	// 登录按钮
	.user-login {
		width: 184rpx;
		height: 56rpx;
		margin-top: 25rpx;
		border-radius: 28rpx;
		background: #ffffff;
		line-height: 56rpx;
		text-align: center;
		color: $color-system;
		font-size: $font-size-28;
	}
	// 公司名
	.user-text {
		width: 446rpx;
		margin-top: 25rpx;
		color: #fff;
		font-size: 28rpx;
		line-height: 40rpx;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.user-bg {
		width: 100%;
	}
}
.more {
	width: 750rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 23rpx 25rpx;
	box-sizing: border-box;
	background: #fff;
	.more-right {
		font-size: 26rpx;
		line-height: 37rpx;
		margin-right: 10rpx;
	}
	.title {
		font-size: 32rpx;
		line-height: 45rpx;
		color: #333333;
	}
	.iconfont {
		font-size: 20rpx;
		vertical-align: middle;
	}
}
.order-wrap {
	background: #fff;
	.line {
		width: 702rpx;
		height: 1px;
		margin: 0 auto;
		background: #f0f0f0;
	}
	.order-nav {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		padding: 40rpx 0;
		.order-nav-item {
			position: relative;
			display: flex;
			align-items: center;
			flex-direction: column;
			image {
				width: 64rpx;
				height: 64rpx;
			}
			text {
				font-size: 26rpx;
				line-height: 37rpx;
				margin-top: 8rpx;
			}
			.tui-badge {
				position: absolute;
				top: -15rpx;
				right: -25rpx;
				z-index: 999;
			}
		}
	}
}
.place-menu-conten{
	margin-top: 20rpx;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: 0 24rpx;
	background-color: #FFFFFF;
	.place-menu-cell{
		width: 100%;
		height: 110rpx;
		box-sizing: border-box;
		padding: 36rpx 0;
		text-align: left;
		float: left;
		border-bottom: 1px solid #E1E1E1;
		position: relative;
		&.last{
			border-bottom: none;
		}
		.place-left{
			width: 600rpx;
			height: 100%;
			.place-menu-icon{
				width: 36rpx;
				height: 36rpx;
				display: block;
				float: left;
			}
			.place-menu-title{
				width: 540rpx;
				margin-left: 16rpx;
				float: left;
				height: 36rpx;
				line-height: 36rpx;
				font-size: $font-size-28;
				color: #333333;
			}
		}
		.iconfont{
			width: 36rpx;
			height: 36rpx;
			display: block;
			line-height: 36rpx;
			text-align: center;
			font-size: $font-size-30;
			color: #cccccc;
			position: absolute;
			right: 0;
			top: 36rpx;
		}
	}
}
.user-support{
	width: 100%;
	float: left;
	margin-top: 340rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	&.top{
		margin-top: 240rpx;
	}
	.user-support-image{
		width: 54rpx;
		height: 46rpx;
		display: block;
		margin-bottom: 5rpx;
	}
	.user-support-text{
		font-size: 20rpx;
		line-height: 30rpx;
		color: #cccccc;
	}
}
</style>