mp-ui-user/pages/user/index.vue

<template>
	<view class="wrap">
		<!-- 非H5撑高元素 -->
		<!-- <view class="status_bar"></view> -->
		<!-- 头部背景 -->
		<view class="user"></view>
		<!-- 账户信息 -->
		<view class="account">
			<view class="flex account-ava">
				<image :src="avatar" mode="aspectFill" v-if="loginState"></image>
				<view class="no-ava" v-else @click="toLogin"></view>
				<view class="account-ava-name" v-if="loginState">{{ userInfo.nickName }}</view>
				<view class="account-ava-no" @click="toLogin" v-else>登录</view>
			</view>
			<view class="flex account-info" v-if="loginState">
				<navigator url="/packagePrize/prize/index" class="flex account-info-item" hover-class="navigator-hover">
					<view>{{ initData.prizeNum }}</view>
					<view>我的仓库</view>
				</navigator>
				<navigator url="/packagePrize/ticket/index" class="flex account-info-item" hover-class="navigator-hover">
					<view>{{ initData.ticketNum }}</view>
					<view>我的盲票</view>
				</navigator>
				<navigator url="/packagePrize/bean/index" class="flex account-info-item" hover-class="navigator-hover">
					<view>{{ initData.coinNum }}</view>
					<view>我的盲豆</view>
				</navigator>
			</view>
			<view class="flex account-info" v-else @click="notLogin">
				<view class="flex account-info-item">
					<view>-</view>
					<view>我的仓库</view>
				</view>
				<view class="flex account-info-item">
					<view>-</view>
					<view>我的盲票</view>
				</view>
				<view class="flex account-info-item">
					<view>-</view>
					<view>我的盲豆</view>
				</view>
			</view>
		</view>
		<!-- 操作项 -->
		<view class="action">
			<!-- <u-cell-group :border="false">
				<u-cell icon="order" title="我的订单" :isLink="true" @click="toOrder" />
				<u-cell icon="map" title="我的地址" :isLink="true" @click="toAddress" />
				<u-cell icon="kefu-ermai" title="联系我们" :isLink="true" @click="contactService" />
				<u-cell icon="info-circle" title="关于我们" :border="false" :isLink="true" :url="'/packageOther/about/index'" />
			</u-cell-group> -->
			<view class="action-item flex">
				<view class="action-item-left flex" @click="toOrder">
					<image src="../../static/user/user_order.png" mode=""></image>
					<view class="title">我的订单</view>
				</view>
				<u-icon name="arrow-right" color="#666" size="16"></u-icon>
			</view>
			<view class="action-item flex" @click="contactService">
				<view class="action-item-left flex">
					<image src="../../static/user/user_kefu.png" mode=""></image>
					<view class="title">联系客服</view>
				</view>
				<u-icon name="arrow-right" color="#666" size="16"></u-icon>
			</view>
			<view class="action-item flex" @click="toAbout">
				<view class="action-item-left flex">
					<image src="../../static/user/user_about.png" mode=""></image>
					<view class="title">关于我们</view>
				</view>
				<u-icon name="arrow-right" color="#666" size="16"></u-icon>
			</view>
		</view>
		<view class="action">
			<!-- <u-cell icon="close-circle" title="退出登录" :isLink="true" :border="false" @click="logout" /> -->
			<view class="action-item flex" @click="logout">
				<view class="action-item-left flex">
					<image src="../../static/user/user_close.png" mode=""></image>
					<view class="title">退出登录</view>
				</view>
				<u-icon name="arrow-right" color="#666" size="16"></u-icon>
			</view>
		</view>
		
		<custom-tab-bar :activeValue="'user'" />
	</view>
</template>

<script>
	import env from '../../config/env.js'
	import $http from '@/utils/request.js'
	import CustomTabBar from '../../components/custom-tab-bar/custom-tab-bar.vue'
	import Auth from '../../components/auth/auth.vue'
	export default {
		components: {
			CustomTabBar,
			Auth,
		},
		data() {
			return {
				loginState: false, // 判断是否登录
				authState: false,
				userInfo: {}, //
				avatar: '',
				certifyStatus: {},
				info: {},
				authShow: false,
				initData: {},
			};
		},

		onShow() {
			this.loginState = uni.getStorageSync('token') ? true : false
			if (this.loginState) {
				this.getInit()
				this.getBaseInfo()
			}
		},

		methods: {
			// 我的数据
			getInit() {
				uni.showLoading({
					title: '加载中'
				});
				$http.post('/api/v1/mp/user/mine/init', {}).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						this.initData = res.data
					}
				}).catch(() => {
					uni.hideLoading();
				})
			},

			getBaseInfo() {
				$http.post('/api/v1/mp/user/getLoginUserinfo', {}).then(res => {
					if (res.code == 0) {
						this.userInfo = res.data
						this.avatar = env.filePublic + res.data.avatar
					}
				}).catch(() => {

				})
			},

			// 跳转登录
			toLogin() {
				uni.navigateTo({
					url: "/pages/login/index"
				})
			},

			// 我的订单
			toOrder() {
				if (!this.loginState) {
					uni.$u.toast('请登录');
					return
				}
				uni.navigateTo({
					url: '/packageGoods/order/index'
				})
			},

			// 我的地址
			toAddress() {
				if (!this.loginState) {
					uni.$u.toast('请登录');
					return
				}
				uni.navigateTo({
					url: '/packageOperate/address/index'
				})
			},
			
			// 关于我们
			toAbout() {
				uni.navigateTo({
					url: '/packageOther/about/index'
				})
			},

			// 没有登录
			notLogin() {
				uni.$u.toast('请登录');
			},

			// 注销登录
			logout() {
				let _this = this
				if (!this.loginState) {
					uni.$u.toast('已退出登录');
					return
				}
				uni.showModal({
					title: '退出登录',
					content: '确定要退出登录吗？',
					success(res) {
						if (res.confirm) {
							uni.clearStorage()
							_this.loginState = false
							_this.authState = false
						}
					}
				})
			},

			// 联系客服
			contactService() {
				// #ifdef MP-WEIXIN
				wx.openCustomerServiceChat({
					extInfo: {
						url: 'https://work.weixin.qq.com/kfid/kfc36c0d90028adbd24'
					},
					corpId: 'ww02da63d80c66284b',
				})
				// #endif
			},
		},
		onShareAppMessage(res) {
			return {
				title: '盲票，玩的就是有趣',
				path: '/pages/index/index'
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-cell__body {
		padding: 20rpx 0;
	}

	.status_bar {
		width: 100%;
		height: var(--status-bar-height);
	}
</style>

<style lang="scss" scoped>
	.wrap {
		padding-bottom: 200rpx;
	}
	.user {
		display: flex;
		align-items: center;
		height: 560rpx;
		background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/mine_bkg.png) center center no-repeat;
		background-size: 100vw 560rpx;
	}

	.account {
		margin-top: -350rpx;
		margin-bottom: 34rpx;

		// 头像
		&-ava {
			justify-content: flex-start;
			margin-bottom: 34rpx;
			padding: 0 30rpx;

			image {
				width: 170rpx;
				height: 170rpx;
				border-radius: 50%;
				border: 2px solid #FFFFFF;
				overflow: hidden;
			}

			.no-ava {
				width: 170rpx;
				height: 170rpx;
				border-radius: 50%;
				overflow: hidden;
				background: #C0C0C0;
			}

			&-name {
				margin-left: 20rpx;
				font-size: 34rpx;
				color: #FFFFFF;
			}

			&-no {
				margin-left: 20rpx;
				color: #FFFFFF;
				font-size: 34rpx;
			}
		}

		// 信息
		&-info {
			height: 216rpx;
			justify-content: space-around;
			background-color: #FFFFFF;
			border-radius: 18rpx;

			&-item {
				flex-direction: column;
				font-size: 34rpx;
				font-weight: bold;
				
				view {
					line-height: 52rpx;
				}

				view:first-child {
					color: #FD7B24;
					line-height: 60rpx;
					font-size: 52rpx;
				}
			}
		}
	}

	.action {
		margin: 0 34rpx;
		padding: 0 34rpx;
		background-color: #FFFFFF;
		border-radius: 18rpx;
		margin-bottom: 34rpx;
		
		&-item {
			justify-content: space-between;
			padding: 36rpx 0;
			border-bottom: 1px solid #eee;
			
			&-left {
				image {
					width: 40rpx;
					height: 44rpx;
					margin-right: 20rpx;
				}
				
				.title {
					font-size: 30rpx;
					line-height: 30rpx;
					font-weight: bold;
				}
			}
		}
		
		&-item:last-child {
			border-bottom: none;
		}
	}
</style>