my-setting.vue

<template>
	<view class="main">
		<view class="top">
			<image @click="goBack" class="back" src="/static/discover/back.png"></image>
			
		</view>
		<view class="profile">
			<view class="profile-title">
				<view class="profile-icon"></view>
				<view class="profile-name">我们的简介</view>
			</view>
			<view class="profile-content">
				<textarea :disabled="true" :value="profileContent"></textarea>
			</view>
		</view>
		<view class="about">
			<view class="about-title">
				<view class="about-icon"></view>
				<view class="about-name">我们的简介</view>
			</view>
			<view class="about-content">
				<textarea :disabled="true" :value="aboutContent"></textarea>
			</view>
		</view>
		<view class="exit">
			<button class="exit-btn" @click="confirmExit()">退出账号</button>
		</view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog cancelText="取消" confirmText="确定" title="提示" content="确定退出你的账号吗？"
				@confirm="dialogConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				profileContent:'      Must Go，本产品基于 Vue Uniapp开发，提供 Android 和iOS 端 APP，针对于“后疫情”时代的身体素质普遍下降的问题，恢复大学生们原有的朝气。该产品定位于帮助众多大学生，乃至更多青年人走出怠惰于运动的舒适圈，增强身体素质、培养积极向上的心理状态。通过该产品可以轻松且高效地搜集到周边、尤其是自身高校的赛事活动信息，及时报名参与，并突破现在运动类APP的圈子局限，不必局限于与远在天边的“朋友”分享运动成果，而可以召集小队发帖社交与近在咫尺的“队友”外出活动。',
				aboutContent:'有问题或反馈请致电我们\n联系电话：18960545221'
			}
		},
		methods:{
			dialogConfirm() {
				uni.reLaunch({
					url: '/pages/login/login',
					animationType: 'pop-in',
					animationDuration: 300
				})
				this.$refs.alertDialog.close();
			},
			
			dialogClose() {
				//console.log('点击关闭')
				this.$refsalertDialog.close();
			},
			confirmExit(){
				this.$refs.alertDialog.open();
				// uni.showModal({
				// 	title: '温馨提示',  //提示标题
				// 	content: '确认退出你的账号吗',  //提示内容
				// 	showCancel: true, //是否显示取消按钮
				// 	success: function (res) {
				// 		if (res.confirm) {  //confirm为ture，代表用户点击确定
				// 			// uni.navigateTo({
				// 			// 	url: '/pages/login/login'
				// 			// })
				// 			uni.reLaunch({
				// 				url: '/pages/login/login',
				// 				animationType: 'pop-in',
				// 				animationDuration: 300
				// 			})
				// 		} else if (res.cancel) {  //cancel为ture，代表用户点击取消
							
				// 		}
				// 	}
				// })
			},
			goBack(){
				uni.navigateBack({
						delta:1,//返回层数，2则上上页
					})
			},
			onload(){
				plus.navigator.setStatusBarBackground('#EDEEF0');
			}
		}
	}
</script>

<style>
	.main {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #EDEEF0;
	}
	.top {
		width: 100%;
		height: 50px;
		background-color: #EDEEF0;
		
	}
	.back {
		width: 40px;
		height: 30px;
		margin-top: 10px;
		margin-bottom: 10px;
		float: left;
		margin-left: 10px;
	}
	.profile{
		/* border: 2rpx solid #000; */
		width:80%;
		height: 55%;
		margin-top: 10rpx;
		margin-left: auto;
		margin-right: auto;
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}
	.profile-title{
		
		height: 12%;
		color: #F1992D;
		
	}
	.profile-icon{
		
		width: 60rpx;
		height: 60rpx;
		margin-top: 10rpx;
		margin-left: 20rpx;
		background-size:100% 100%;
		background-image:url("/static/my/my-setting/profile-icon.png");
		background-repeat:no-repeat;
		float: left;
	}
	.profile-name{
		
		width: 200rpx;
		height: 50rpx;
		margin-top: 10rpx;
		margin-right: 280rpx;
		
		font-size: 40rpx;
		text-align: left;
		float: right;
	}
	.profile-content{
		
		height: 88%;
	}
	.profile-content textarea{
		width: 80%;
		height: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	.about{
		
		width:80%;
		height: 15%;
		margin-top: 5%;
		margin-left: auto;
		margin-right: auto;
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}
	.about-title{
		
		height: 40%;
		color: #F1992D;
		
	}
	.about-icon{
		
		width: 60rpx;
		height: 60rpx;
		margin-top: 10rpx;
		margin-left: 20rpx;
		background-size:100% 100%;
		background-image:url("/static/my/my-setting/about-icon.png");
		background-repeat:no-repeat;
		float: left;
	}
	.about-name{
		
		width: 200rpx;
		height: 50rpx;
		margin-top: 10rpx;
		margin-right: 280rpx;
		
		font-size: 40rpx;
		text-align: left;
		float: right;
	}
	.about-content{
		
		height: 60%;
	}
	.about-content textarea{
		width: 80%;
		height: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	.exit{
		
		
	}
	.exit-btn{
		background-color:#F1992D ;
		color: #FFFFFF;
		width:70%;
		height: 85rpx;
		line-height: 85rpx;
		margin-top: 50rpx;
		margin-left: auto;
		margin-right: auto;
		border-radius: 20rpx;
	}
</style>