qjd-user-uniapp/pages/user/index.vue

<template>
	<view class="content">
		<view class="main-bg"></view>
		<view class="page-content">
			<view class="user-info-box" @click="gologin" v-if="!userData.userName">
				<image class="user-image" src="@/static/images/userDefaultHead.png" mode="widthFix"></image>
				<view class="user-info">
					<view class="user-logoin-title">点击登录</view>
					<view class="user-logoin-lable">登录后享受更多权益~</view>
				</view>
			</view>
			<view class="user-info-box" v-else>
				<image class="user-image" :src="userData.headImage" mode="widthFix" style="border-radius: 50%;"></image>
				<view class="user-info">
					<view class="user-logoin-title mb5">{{userData.userName}}</view>
					<view class="user-level" v-if="mainInfo.flag">
						<view class="iconfont iconVIP mr5"></view>
						<view>VIP用户</view>
					</view>
				</view>
				<image class="user-info-right" src="" mode=""></image>
			</view>
			<view class="user-activity">
				<view class="mr20" @click="entrustClick()">
					<view class="font18">{{mainInfo.entrustNo ? mainInfo.entrustNo : 0}}</view>
					<view class="font10">共享种植</view>
				</view>
				<view class="mr20">|</view>
				<view class="mr20" @click="integralClick()">
					<view class="font18">{{mainInfo.totalIntegral ? mainInfo.totalIntegral : 0}}</view>
					<view class="font10">我的积分</view>
				</view>
				<view class="mr20">|</view>
				<view @click="couponClick()">
					<view class="font18">{{mainInfo.memberCouponNo ? mainInfo.memberCouponNo : 0}}</view>
					<view class="font10">我的优惠券</view>
				</view>
			</view>
			<view class="order-box">
				<view class="order-item" @click="orderClick(2)">
					<view class="iconfont icondaifukuan order-item-icon">
						<view v-if="num.unPay" class="order-item-icon-num">{{num.unPay < 99 ? num.unPay : '99+'}}</view>
					</view>
					<view class="order-item-text">待付款</view>
				</view>
				<view class="order-item" @click="orderClick(3)">
					<view class="iconfont icondaifahuo order-item-icon">
						<view v-if="num.unSend" class="order-item-icon-num">{{num.unSend < 99 ? num.unSend : '99+'}}</view>
					</view>
					<view class="order-item-text">待发货</view>
				</view>
				<view class="order-item" @click="orderClick(4)">
					<view class="iconfont icondaishouhuo order-item-icon">
						<view v-if="num.unReceive" class="order-item-icon-num">{{num.unReceive < 99 ? num.unReceive : '99+'}}</view>
					</view>
					<view class="order-item-text">待收货</view>
				</view>
				<view class="order-item" @click="orderClick(5)">
					<view class="iconfont icondaipingjia order-item-icon">
						<view v-if="num.unComment" class="order-item-icon-num">{{num.unComment < 99 ? num.unComment : '99+'}}</view>
					</view>
					<view class="order-item-text">待评价</view>
				</view>
			</view>
			<view class="item-btn mt20" @click="addressClick()">
				<view class="iconfont icondizhiguanli item-btn-icon"></view>
				<view class="item-btn-text">收货地址</view>
				<view class="iconfont iconfangxiang"></view>
			</view>
			<view class="line-box">
				<view class="split-line"></view>
			</view>
			<view class="item-btn" @click="aboutUsClick()">
				<view class="iconfont iconguanyu item-btn-icon"></view>
				<view class="item-btn-text">关于我们</view>
				<view class="iconfont iconfangxiang"></view>
			</view>
			<view class="line-box" v-if="userData.userName">
				<view class="split-line"></view>
			</view>
			<view class="item-btn" @click="modalShow = true" v-if="userData.userName">
				<view class="iconfont iconguanyu item-btn-icon"></view>
				<view class="item-btn-text">退出登录</view>
				<view class="iconfont iconfangxiang"></view>
			</view>
			<u-modal v-model="modalShow" content="确定退出登录？" @confirm="loginOut()" :async-close="true" :show-cancel-button="true"></u-modal>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		data() {
			return {
				integral: '',
				userData: {
					userId: '',
					userName: '',
					headImage: '',
				},
				mainInfo: {
					flag: false,
					entrustNo: '',
					totalIntegral: '',
					memberCouponNo: '',
				},
				num: {
					unComment: 0, // 待评价
					unPay: 0,  // 待付款
					unReceive: 0, // 待收货
					unSend: 0 // 待发货
				},
				modalShow: false
			}
		},
		onShow() {
			this.userData = uni.getStorageSync("userData")
			this.getBaseData()
			this.getNum()
		},
		onPullDownRefresh() {
			this.getBaseData()
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 500)
		},
		methods: {
			// 注销
			loginOut() {
			    try {
			        uni.clearStorageSync();
					this.modalShow = false
					uni.reLaunch({
						url: '/pages/index/login'
					});
			    } catch (e) {
			        console.log(e, '退出登录')
			    }
			},
			gologin() {
				uni.reLaunch({
					url: '/pages/index/login'
				});
			},
			//  获取全部数据
			getBaseData() {
				NET.request(API.getMainInfo, {}, 'GET').then(res => {
					this.mainInfo = res.data
				}).catch(error => {
					this.$refs.uTips.show({
						title: '获取个人信息失败',
						type: 'warning',
					})
				})
			},
			// 获取订单数量
			getNum() {
				NET.request(API.getOrderNum, {}, 'GET').then(res => {
					if (res.isSuccess) {
					    this.num = res.data
					} else {
						this.$refs.uTips.show({
							title: res.msg,
							type: 'warning',
						})
					}
				}).catch(error => {
					this.$refs.uTips.show({
						title: '获取个人信息失败',
						type: 'warning',
					})
				})
			},
			//  我的种植
			entrustClick() {
				uni.navigateTo({
					url: '/pagesMain/plantList'
				});
			},
			//  我的积分
			integralClick() {
				uni.navigateTo({
					url: '/pagesMain/integralList'
				});
			},
			//  我的优惠券
			couponClick() {
				uni.navigateTo({
					url: '/pagesMain/couponList'
				});
			},
			// 地址管理
			addressClick() {
				uni.navigateTo({
					url: '/pagesMain/addressList?type=1'
				});
			},
			//  我的订单
			orderClick(type) {
				uni.navigateTo({
					url: '/pagesMain/orderList?type=' + type
				});
			},
			//  关于我们
			aboutUsClick() {
				uni.navigateTo({
					url: '/pagesMain/aboutUs'
				});
			},
		}
	}
</script>

<style lang='scss'>
	page {
		width: 100%;
		height: 100%;
	}

	.content {
		width: 100%;
		height: 100%;
		background-color: #F3F3F3;

		.main-bg {
			width: 100%;
			height: 195px;
			position: relative;
			background-size: 100% 195px;
			background-position: center top;
			background-repeat: no-repeat;
			background-image: url(@/static/images/userbackground.png)
		}

		.page-content {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			z-index: 10;
			margin-top: -200px;
			position: relative;

			.user-info-box {
				width: 100%;
				box-sizing: border-box;
				padding: 30upx;
				display: flex;
				flex-direction: row;
				align-items: center;

				.user-image {
					width: 130upx;
					height: 130upx;
				}

				.user-info {
					flex: 1;
					display: flex;
					flex-direction: column;
					padding-left: 20upx;
					box-sizing: border-box;
					z-index: 10;

					.user-logoin-title {
						font-size: 36upx;
						font-weight: 500;
						color: rgba(255, 255, 255, 1);
					}

					.user-level {
						width: 70px;
						height: 20px;
						background: #FFFFFF;
						color: #FF850C;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 12px;
					}

					.user-logoin-lable {
						font-size: 24upx;
						font-weight: 400;
						color: rgba(255, 255, 255, 1);
						margin-top: 20upx;
					}
				}

				.user-info-right {
					width: 30upx;
					height: 30upx;
				}
			}

			.user-activity {
				display: flex;
				text-align: center;
				align-items: center;
				justify-content: center;
				padding: 0 15px 15px 15px;
				color: #FFFFFF;
			}

			.order-box {
				width: 690upx;
				height: 170upx;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 0px 10upx 0px rgba(51, 51, 51, 0.1);
				border-radius: 10upx;
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-left: 30upx;
				z-index: 10;

				.order-line {
					width: 12upx;
					height: 106upx;
				}

				.order-item {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.order-item-icon {
						color: #52A63A;
						font-size: 30px;
						display: flex;
						position: relative;
						.order-item-icon-num {
							background: #ffffff;
							width: 22px;
							height: 20px;
							font-size: 12px;
							border-radius: 50%;
							color: #52A63A;
							text-align: center;
							position: absolute; 
							left: 20px;
							border: 1px solid #52A63A;
							line-height: 20px;
						}
					}

					.order-item-text {
						font-size: 28upx;
						margin-top: 10upx;
						font-weight: 500;
					}
				}
			}

			.item-btn {
				width: 100%;
				height: 100upx;
				display: flex;
				flex-direction: row;
				align-items: center;
				box-sizing: border-box;
				background-color: #fff;
				padding: 0 30upx;

				.item-btn-icon {
					color: #52A63A;
					font-size: 20px;
					/* width: 48upx;
					height: 48upx; */
				}

				.item-btn-text {
					font-size: 28upx;
					margin-left: 20upx;
					font-weight: 500;
					flex: 1;
					color: rgba(102, 102, 102, 1);
				}

			}

			.line-box {
				height: 5px;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #FFFFFF;

				.split-line {
					width: 100%;
					height: 1px;
					background: #EEEEEE;
				}
			}

			.mt20 {
				margin-top: 20upx;
			}

			.mb5 {
				margin-bottom: 5px;
			}

			.mr5 {
				margin-right: 5px;
			}

			.mr20 {
				margin-right: 20px;
			}

			.font18 {
				font-size: 18px;
			}

			.font10 {
				font-size: 10px;
			}
		}
	}
</style>