customerapp-H5/pages/user/user.vue

<template>
	<view class="content">
		<view class="content_top">
			<view class="flexV">
				<image :src="userInfo.headimgurl"></image>
				<text>{{ userInfo.nickname }}</text>
			</view>
		</view>
		<view v-if="login" class="setList">
			<view v-for="(item, i) in setList" :key="i" class="setItem flexB" @click="getUrl(i)">
				<view class="setItem-left flexV">
					<image mode="widthFix" :src="`../../static/index/${item.icon}`" class="icon" />
					<view>{{ item.name }}</view>
				</view>
				<view class="setItem-right flexV">
					<image mode="widthFix" src="../../static/Buy_soap_tape/arrow.png" class="right" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { logout } from '@/api/index.js'
	export default {
		data() {
			return {
				login: false,
				userInfo: {},
				openid: '',
				setList: [
					{
						name: '购买记录',
						icon: 'jilu.png'
					},
					{
						name: '退出登录',
						icon: 'logout.png'
					}
				]
			}
		},
		onShow() {
			// 有token
			if (uni.getStorageSync('token') && uni.getStorageSync('userInfo')) {
				this.userInfo = uni.getStorageSync('userInfo')
				this.login = true
				this.openid = this.userInfo.openid
			}
		},
		methods: {
			// 跳转微信授权
			toWxchatLogin(url, state) {
				url = url || '/pages/index/index';
				state = state || 'cli';
				const redirect_uri = encodeURIComponent(`${this.$config.redirect_uri}/#${url}`);
				const auth = () =>
					(window.location.href = `${this.$config.wxURL}?appid=${
					this.$config.appid
				}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=${state}#wechat_redirect`);
				auth();
			},
			// 跳转页面
			getUrl(i) {
				if (i == 0) {
					uni.navigateTo({
						url: '../Buy_soap_tape/purchase_history'
					})
				} else {
					uni.showModal({
						content: '确定要退出登录么？',
						success: res => {
							if (res.confirm) {
								uni.showLoading({ title: '加载中', mask: true })
								logout().then(res => {
									uni.hideLoading()
									uni.removeStorageSync('token')
									uni.removeStorageSync('userInfo')
									uni.reLaunch({
										url: '../login/login?openid=' + this.openid
									})
								})
							}
						}
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;
		&_top {
			padding: 80rpx 0 40rpx 24rpx;
			background: linear-gradient(88deg, #FF232C 0%, #FF571B 100%);
			image {
				width: 126rpx;
				height: 126rpx;
				border-radius: 50%;
				border: 2rpx solid #fff;
				background-color: #999;
				margin-right: 25rpx;
			}
			text {
				font-size: 44rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
		.setList {
			width: calc(100% - 60rpx);
			margin: 24rpx auto 0;
			padding: 0 16rpx 0 30rpx;
			box-sizing: border-box;
			background-color: #ffffff;
			margin-bottom: 30rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			.setItem {
				width: 100%;
				height: 120rpx;
				border-bottom: 2rpx solid #eeeeee;
				color: #333333;
				font-size: 30rpx;
		
				&-left {
					font-size: 30rpx;
					font-weight: bold;
				}
		
				&-right {
					.right {
						width: 48rpx;
						height: 48rpx;
					}
				}
		
				.icon {
					width: 48rpx;
					max-height: 48rpx;
					display: block;
					margin-right: 20rpx;
				}
		
				&:nth-last-of-type(1) {
					border-bottom: 0;
				}
			}
		}
	}
</style>