MeiMeiZhuan/pages/set/set.vue

<template>
	<view class="container">
		<!-- #ifdef APP-PLUS -->
		<view class="top_bar" @click="switchTab('/pages/user/user')">
			<view class="top_img" >
				<image src="../../static/img/img30.png" ></image>
			</view>
			<view class="top_tit">
				设置
			</view>
		</view>
		<!-- #endif -->
		
		<uni-list class="margin-top20">
			<uni-list-item class="item-1" title="个人资料" @click="navTo('/pages/userinfo/userinfo')"></uni-list-item>
			<uni-list-item class="item-1" title="修改密码" @click="navTo('/pages/set/password')"></uni-list-item>
			<!-- <uni-list-item title="绑定手机" @click="navTo('/pages/set/phone')"></uni-list-item> -->
		</uni-list>
		<view class="list-cell" @click="toLogout">
			<text class="cell-tit">退出登录</text>
		</view>
	</view>
</template>
<script>
import uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
import { logout } from '@/api/set.js';
import { mapMutations } from 'vuex';
export default {
	components: {
		uniList,
		uniListItem
	},
	data() {
		return {};
	},
	methods: {
		...mapMutations(['logout']),
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		},
		switchTab(url) {
			uni.switchTab({
				url: url
			});
		},
		//退出登录
		toLogout() {
			uni.showModal({
				content: '确定要退出登录么',
				success: e => {
					console.log(e);
					if (e.confirm) {
						this.logout();
						logout({})
							.then(e => {
								uni.navigateBack();
							})
							.catch(e => {
								this.$api.msg(e.message);
								console.log(e);
							});
					}
				}
			});
		},
		//switch切换触发方法
		switchChange(e) {
			console.log(e);
			let statusTip = e.value ? '打开' : '关闭';
			this.$api.msg(`${statusTip}消息推送`);
		}
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
}
.top_bar{
	width: 750rpx;
	overflow: hidden;
	background-color: #FFFFFF;
	padding: 15rpx 15rpx;
	.top_img{
		float: left;
		width: 40rpx;
		height: 40rpx;
		image{
		width: 40rpx;
		height: 40rpx
		}
	}
	.top_tit{
		color: #333333;
		float: left;
		width:90%;
		text-align: center;
		font-size:32rpx;
		line-height: 50rpx;
	}

}
.margin-top20{
	margin-top: 20rpx;
	.item-1{
		padding-left: 0;
	}
}
.uni-list-item__container{
	padding: 11px 14px;
}
.list-cell {
	margin-top: 55rpx;
	.cell-tit {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		width: 100%;
		height: 95rpx;
		color: #333333;
		background:#FFFFFF;
		font-size: $font-lg;
		margin: 0 auto;
	}
	// .cell-tit {
	// 	flex: 1;
	// 	font-size: $font-base + 2rpx;
	// 	color: $font-color-dark;
	// 	margin-right: 10rpx;
	// }
	// .cell-tip {
	// 	font-size: $font-base;
	// 	color: $font-color-light;
	// }
	// switch {
	// 	transform: translateX(16rpx) scale(0.84);
	// }
}
</style>