Anti-fraud-mobile/pages/me/index.vue

<template>
	<view class="me">
		<view class="headerBox">
			<view :style="{height: statusBarHeight + 'px'}"></view>
			<view class="title">我的</view>
			<u-line margin="60rpx 0"></u-line>
			<view class="avatorBox">
				<view class="leftBox">
					<image src="@/static/logo.png"></image>
					<view v-if="false">
						<view class="name">XXXX</view>
						<view class="greet">188****8888</view>
					</view>
					<view v-else @click="onLogin">
						点击登录
					</view>
				</view>
				<view class="rightBox">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<view class="settings">
			<view class="settingItem" v-for="item in settingList" :key="item.id">
				<view class="left">
					<i :class="['custom-icon', `custom-icon-${item.icon}`]"></i>
					<span>{{item.name}}</span>
				</view>

				<u-icon name="arrow-right"></u-icon>
			</view>

		</view>


		<!-- 底部导航 -->
		<Tabbar :current-page="3" />
	</view>
</template>

<script>
	import Tabbar from "@/components/Tabbar/index.vue";
	import {login} from '@/utils/login.js'
	export default {
		components: {
			Tabbar
		},
		data() {
			return {
				statusBarHeight:getApp().globalData.statusBarHeight,
				settingList: [{
						id: 1,
						name: '浏览历史',
						icon: 'history',
						target: ''
					},
					{
						id: 2,
						name: '喜欢',
						icon: 'collected',
						target: ''
					},
					{
						id: 3,
						name: '收藏',
						icon: 'shoucang',
						target: ''
					},
					{
						id: 4,
						name: '积分',
						icon: 'jifen',
						target: ''
					},
					{
						id: 5,
						name: '排行榜',
						icon: 'charts',
						target: ''
					},
					{
						id: 6,
						name: '设置',
						icon: 'shezhi',
						target: ''
					},
				]
			}
		},
		onLoad() {
			
		},
		methods: {
			onLogin() {
				uni.getUserProfile({
					desc:'用于绑定资料',
					success:infoRes=>{
						console.log(1111,infoRes)
						login()
					},
					fail:()=>{
						console.log(222)
					}
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f9f9f9;
		height: 100%;
	}

	.me {
		// padding-top: 40rpx;
		height: 100%;

		.headerBox {
			width: 100%;
			height: 30%;
			background: linear-gradient(to right, #ffd6a7, #fff8ee);
			padding: 40rpx;

			.title {
				font-size: 60rpx;
				font-weight: 900;
			}

			.avatorBox {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.leftBox {
					display: flex;
					align-items: center;

					.greet {
						font-size: 20rpx;
						margin-top: 6rpx;
					}

					.name {
						font-size: 32rpx;
						font-weight: 900;
					}

					image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 32rpx;
						margin-right: 20rpx;
					}
				}

				.rightBox {
					image {
						width: 50rpx;
						height: 50rpx;
					}
				}
			}
		}

		.settings {
			// padding: 0 40rpx;
			padding-bottom: 180rpx;

			.settingItem {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 90%;
				height: 100rpx;
				background-color: #fff;
				margin: 20rpx auto;
				padding: 40rpx;
				border-radius: 20rpx;
				box-shadow: 0 0 12rpx 2rpx rgba(0, 0, 0, 0.2);

				.custom-icon {
					font-size: 40rpx;
					margin-right: 30rpx;

					&::before {
						background: -webkit-linear-gradient(bottom, #f84a1a, #ffa53e);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						font-weight: bold;
					}
				}

				.custom-icon-collected {
					font-size: 46rpx;
				}

				.custom-icon-jifen {
					font-size: 60rpx;
					margin-left: -10rpx;
				}

				.left {
					display: flex;
					align-items: center;
				}
			}
		}
	}
</style>