NFT/pages/set/set.vue

<template>
	<view class="center">
		<view class="tt">
			<view class="tt-box" @click="nav('/pages/user/approve')">
				<image src="../../static/img/real_name.png" class="tt-icon1" mode=""></image>
				<view class="tt-txt">实名认证</view>
				<image src="../../static/img/jiantou.png" class="next-icon" mode=""></image>
			</view>
			<view class="tt-box" @click="nav('/pages/set/password')">
				<image src="../../static/img/pwd.png" class="tt-icon1" mode=""></image>
				<view class="tt-txt">登录密码</view>
				<image src="../../static/img/jiantou.png" class="next-icon" mode=""></image>
			</view>
			<view class="tt-box" @click="nav('/pages/money/payment')">
				<image src="../../static/img/zfpwd.png" class="tt-icon4" mode=""></image>
				<view class="tt-txt">交易密码</view>
				<image src="../../static/img/jiantou.png" class="next-icon" mode=""></image>
			</view>
		</view>
		<view class="out" @click="toLogout">退出登录</view>
	</view>
</template>

<script>
import { logout } from '@/api/set.js';
export default {
	methods: {
		toLogout() {
			let obj = this;
			uni.showModal({
				content: '确定要退出登录么',
				success: e => {
					if (e.confirm) {
						logout({})
							.then(e => {
								uni.navigateBack();
							})
							.catch(e => {
								console.log(e);
							});
						obj.logout();
					}
				}
			});
		},
		nav(url) {
			uni.navigateTo({
				url
			});
		}
	}
};
</script>

<style lang="scss">
.center,
page {
	background: #f7f7fb;
}
.tt {
	width: 750rpx;
	padding: 40rpx 70rpx 0;
	border-radius: 10rpx;
	background-color: #ffffff;
	.tt-box:last-child {
		border-bottom: none;
	}
	.tt-box {
		height: 100rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #f0f0f0;
		.tt-icon1 {
			width: 42rpx;
			height: 42rpx;
		}
		.tt-icon2 {
			width: 49rpx;
			height: 38rpx;
		}
		.tt-icon3 {
			width: 46rpx;
			height: 40rpx;
		}
		.tt-icon4 {
			width: 40rpx;
			height: 42rpx;
		}
		.tt-icon5 {
			width: 44rpx;
			height: 40rpx;
		}

		.tt-txt {
			margin-left: 36rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			flex: 1;
		}

		.next-icon {
			width: 16rpx;
			height: 25rpx;
		}
	}

	.border-b {
		border-bottom: 1px solid #f1f1f1;
	}
}
.out {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 158rpx auto 30rpx;
	width: 560rpx;
	height: 80rpx;
	background: linear-gradient(90deg, #58bab0, #60bab0, #45969b);
	border-radius: 40px;
	color: #ffffff;
}
</style>