sx/pages/user/user.vue

<template>
	<view class="container">
		<view class="top-image">
			<image src="../../static/img/user-top.png" mode="widthFix"></image>
			<view class="user-wrap">
				<image :src="userInfo.avatar" mode="" v-if="userInfo.avatar" class="user-avatar"></image>
				<image src="../../static/error/missing-face.png" mode="" class="user-avatar" v-else></image>
				<view class="user-name clamp" v-if="userInfo.nickname">
					{{ userInfo.nickname}}
				</view>
				<view class="user-name clamp" v-else>
					游客
				</view>
				<view class="user-level" v-if="userInfo.nickname">
					{{userInfo.level == 0? '普通用户': '会员'}}
				</view>
			</view>
		</view>
		<!-- <view class="u-up" @click="navTo('/pages/user/menber')">
			<image src="../../static/img/u-up.png" mode="" class="u-up-bg"></image>
			<view class="u-up-tit">
				开通会员享受更多权益
			</view>
			<view class="u-up-btn">
				去申请
			</view>
		</view> -->
		<!-- <view class="my-box" @click="navTo('/pages/user/mytimes')">
			<view class="box-tit flex">
				<image src="../../static/icon/u1.png" mode="" class="left-img"></image>
				<view class="">
					我的次数
				</view>
				<image src="../../static/icon/back.png" mode="" class="right-img"></image>
			</view>
			<view class="box-msg flex">
				<view class="msg-item flex">
					<view class="msg-val">
						0
					</view>
					<view class="msg-name">
						获得次数
					</view>
				</view>
				<view class="msg-item flex">
					<view class="msg-val">
						0
					</view>
					<view class="msg-name">
						使用次数
					</view>
				</view>
				<view class="msg-item flex">
					<view class="msg-val">
						0
					</view>
					<view class="msg-name">
						可用次数
					</view>
				</view>
			</view>
		</view> -->
		<view class="user-list flex" @click="navTo('/pages/user/myjslis')">
			<image src="../../static/icon/ul1.png" mode="" class="left-img"></image>
			<view class="">
				计算记录
			</view>
			<image src="../../static/icon/back.png" mode="" class="right-img"></image>
		</view>
		<!-- <view class="user-list flex">
			<image src="../../static/icon/ul2.png" mode="" class="left-img"></image>
			<view class="">
				关于我们
			</view>
			<image src="../../static/icon/back.png" mode="" class="right-img"></image>
		</view> -->
		<view class="user-list flex" @click="navTo('/pages/set/userinfo')">
			<image src="../../static/icon/ul3.png" mode="" class="left-img"></image>
			<view class="">
				设置
			</view>
			<image src="../../static/icon/back.png" mode="" class="right-img"></image>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import uniList from '@/components/uni-list/uni-list.vue';
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
	import {
		orderData,
		getUserInfo
	} from '@/api/user.js';
	import {
		saveUrl,
		interceptor
	} from '@/utils/loginUtils.js';
	let startY = 0,
		moveY = 0,
		pageAtTop = true;
	export default {
		components: {
			uniList,
			uniListItem
		},
		data() {
			return {
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
			};
		},
		onShow() {
			// 判断是否已经登录
			if (this.hasLogin) {
				this.loadBaseData();
			}else {
				this.loadBaseData();
			}
		},
		computed: {
			...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
		},
		methods: {
			...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
			// 加载初始数据
			loadBaseData() {
				getUserInfo({})
					.then(({
						data
					}) => {
						this.setUserInfo(data);
						// 获取用户数据完毕后在获取订单数据防止多次跳转到登录页
						orderData({})
							.then(({
								data
							}) => {
								this.setOrderInfo(data);
							})
							.catch(e => {
								this.setOrderInfo({
									complete_count: 0, //完成
									received_count: 0, //待收货
									unshipped_count: 0, //待发货
									order_count: 0, //订单总数
									unpaid_count: 0 //待付款
								});
							});
					})
					.catch(e => {
						console.log(e);
					});
			},
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url) {
				if (!this.hasLogin) {
					// 保存地址
					saveUrl();
					// 登录拦截
					interceptor();
				} else {
					uni.navigateTo({
						url
					});
				}
			},

			/**
			 *  会员卡下拉和回弹
			 *  1.关闭bounce避免ios端下拉冲突
			 *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
			 *    transition设置0.1秒延迟，让css来过渡这段空窗期
			 *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
			 */
			coverTouchstart(e) {
				// console.log(e);
				if (pageAtTop === false) {
					return;
				}

				this.coverTransition = 'transform .1s linear';
				startY = e.touches[0].clientY;
			},
			coverTouchmove(e) {
				// console.log(e);
				moveY = e.touches[0].clientY;
				let moveDistance = moveY - startY;
				let maxDowm = this.userMaxDowm;
				let Dowm = this.userDowm;
				if (moveDistance < 0) {
					this.moving = false;
					return;
				}
				this.moving = true;
				if (moveDistance >= Dowm && moveDistance < maxDowm) {
					moveDistance = Dowm;
				}

				if (moveDistance > 0 && moveDistance <= Dowm) {
					this.coverTransform = `translateY(${moveDistance}px)`;
				}
			},
			coverTouchend() {
				if (this.moving === false) {
					return;
				}
				this.moving = false;
				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
				this.coverTransform = 'translateY(0px)';
			}
		}
	};
</script>
<style lang="scss">
	page {
		height: 100%;
	}

	.top-image {
		position: relative;
		// height: 230rpx;
		height: 370rpx;
		width: 750rpx;

		image {
			width: 100%;
			// height: 100%;
		}
	}

	.user-wrap {
		position: absolute;
		width: 692rpx;
		height: 293rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
		border-radius: 28rpx;
		top: 83rpx;
		left: 0;
		right: 0;
		margin: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.user-avatar {
			width: 132rpx;
			height: 132rpx;
			border-radius: 50%;
		}
		.user-name {
			text-align: center;
			width: 300rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
			padding: 15rpx 0 ;
		}
		.user-level {
			font-size: 20rpx;
			font-weight: 500;
			color: #FF7E3E;
		}
	}

	.u-up {
		width: 690rpx;
		height: 90rpx;
		margin: 20rpx auto;
		position: relative;

		image {
			width: 690rpx;
			height: 90rpx;
		}

		.u-up-tit {
			font-size: 30rpx;
			font-weight: bold;
			color: #6A4714;
			line-height: 90rpx;
			position: absolute;
			top: 0;
			left: 80rpx;
		}

		.u-up-btn {
			position: absolute;
			right: 20rpx;
			top: 0;
			bottom: 0;
			margin: auto;
			width: 148rpx;
			height: 50rpx;
			line-height: 50rpx;
			border-radius: 25rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #F0E1C9;
			text-align: center;
			background: linear-gradient(-90deg, #8C5F1D 0%, #8C5F1C 77%, #875916 99%);
		}
	}
	.my-box {
		width: 690rpx;
		height: 246rpx;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 13rpx 0px rgba(229,229,229,0.46);
		border-radius: 20rpx;
		margin: 20rpx auto;
		.box-tit {
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
			padding: 0 25rpx;
			height: 80rpx;
			.left-img {
				width: 33rpx;
				height: 32rpx;
			}
			view {
				padding-left: 20rpx;
				flex-grow: 1;
			}
			.right-img {
				width: 13rpx;
				height: 23rpx;
			}
		}
		.box-msg {
			height: 165rpx;
			.msg-item {
				width: 33%;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.msg-val {
					font-size: 36px;
					font-weight: bold;
					color: #333333;
				}
				.msg-name {
					font-size: 22rpx;
					font-weight: 500;
					color: #666666;
				}
			}
		}
		
	}
	.user-list {
		width: 691rpx;
		height: 104rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 20rpx 0px rgba(50,50,52,0.06);
		border-radius: 28rpx;
		margin:20rpx  auto;
		padding: 0 25rpx;
		.left-img {
			width: 40rpx;
			height: 40rpx;
		}
		view {
			padding-left: 20rpx;
			flex-grow: 1;
			font-size: 29rpx;
			font-weight: bold;
			color: #5D5D5D;
		}
		.right-img {
			width: 13rpx;
			height: 23rpx;
		}
	}
</style>