security_center.vue 3.0 KB
<template>
	<view style="background-color: #f5f5f5; height: 100vh;">
		<view class="title_bg" :style="'padding-top:' + (common.statusBarH + 10)+ 'px; '">

			<image style="width: 40rpx; height: 40rpx;" src='../../static/common/icon_back.png' @click="onBack()">
			</image>

			<text style="color: white; font-size: 36rpx; font-weight: 700; margin-left: 15rpx;">安全中心</text>

			<image style="width: 40rpx; height: 40rpx;">
			</image>

		</view>

		<view :style="'height: ' + titleHeight + 'px'"></view>

		<view class="data-item" @click="goToShare()">

			<text>身份证</text>

			<view style="display: flex; justify-content: center; align-items: center;">

				<text :class="userInfo.IdCard ? 'text2' : 'text1'">{{userInfo.Mobile ? "已绑定" : "绑定身份证,账号更安全"}}</text>

				<image style="width: 28rpx; height: 28rpx; margin-left: 15rpx;" src="../../static/arrow_right.png">
				</image>

			</view>

		</view>
		
		<view class="data-item" @click="goToShare()">
		
			<text>手机</text>
		
			<view style="display: flex; justify-content: center; align-items: center;">
		
				<text :class="userInfo.Mobile ? 'text2' : 'text1'">{{userInfo.Mobile ? "已绑定" : "绑定手机"}}</text>
		
				<image style="width: 28rpx; height: 28rpx; margin-left: 15rpx;" src="../../static/arrow_right.png">
				</image>
		
			</view>
		
		</view>
		
		<view class="data-item" @click="goToShare()">
		
			<text>修改密码</text>
		
			<view style="display: flex; justify-content: center; align-items: center;">
		
				<text class="text1">修改登录密码</text>
		
				<image style="width: 28rpx; height: 28rpx; margin-left: 15rpx;" src="../../static/arrow_right.png">
				</image>
		
			</view>
		
		</view>


	</view>
</template>

<script>
	import common from '@/utils/common.js'
	import loginHelper from "../../utils/loginHelper.js"
	export default {
		data() {
			return {
				titleHeight: 80,
				common,
				userInfo: {}
			}
		},
		onReady() {

			var this_ = this
			uni.createSelectorQuery()
				.in(this)
				.select('.title_bg')
				.boundingClientRect((rect) => {
					if (rect) {
						this_.titleHeight = rect.height
						console.log("rect.height:" + rect.height)
					}
				})
				.exec();

			this.userInfo = loginHelper.getUserInfo()
		},
		onShow() {

		},
		methods: {

		}
	}
</script>

<style>
	.title_bg {
		background: linear-gradient(90deg, #FF6F38 0%, #FFA04B 100%);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 24rpx;
		padding-right: 24rpx;
		padding-bottom: 20rpx;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}

	.data-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 110rpx;
		background-color: white;
		margin-top: 3rpx;
		margin-bottom: 3rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.text1 {
		font-size: 30rpx;
		color: #B0B0B0;
	}

	.text2 {
		font-size: 30rpx;
		color: #666666;
	}
</style>