xxdj1/user/pages/setting.vue

<template>
	<view class="mine-pages-setting">
		<view class="topContainer">
			<view class="topitem" style="padding: 20rpx 0">
				<text>头像</text>
				<view class="">
					<image class="avatar radius" :src="user_info.avatarUrl"></image>
					<i class="iconfont icon-right"></i>
				</view>
			</view>
			<view class="topitem">
				<view class="left">
					<view>昵称</view>
					<view style="margin-left:40rpx;">{{user_info.nickName}}</view>
				</view>
				<i class="iconfont icon-right"></i>
			</view>
			<view class="topitem" style="border-bottom:none">
				<view class="left">
					<view>手机号</view>
					<view style="margin-left:40rpx;">{{user_info.split_phone}}</view>
				</view>
				<i class="iconfont icon-right"></i>
			</view>
		</view>
		
		
		<!-- <view class="flex-center flex-column pd-lg fill-base">
			<view class="space-lg"></view>
			<view class="space-lg"></view>
			<image class="avatar radius" :src="user_info.avatarUrl"></image>
			<view class="f-title c-caption mt-md" v-if="user_info.phone"> {{user_info.split_phone}} </view>
		</view> -->
		<!-- <view class="flex-between pd-lg fill-base f-paragraph" v-for="item in userInfoList">
			<view>{{item.text}}</view>
			<view class="c-caption">{{user_info[item.key]}}</view>
		</view> -->
		<!-- <view class="space-md"></view> -->
		<view class="bottomContent">
			<view @tap.stop="goDetail(index,'infoList')" 
			style="border-bottom:1px solid #EAEAEA;margin: 0 15px;padding: 15px 0;"
			class="flex-between fill-base f-paragraph"
				v-for="(item,index) in infoList" :key="index">
				<view>{{item.text}}</view>
				<i class="iconfont icon-right"></i>
			</view>
		</view>
		
		<view class="space-max-footer"></view>
		
		<!-- #ifdef APP-PLUS -->
		
		<!-- #endif -->
		<!-- <fix-bottom-button @confirm="toLoginOut" 
		:text="[{ text: '退出登录', type: 'confirm' }]" bgColor="#fff">
		</fix-bottom-button> -->
		<view class="logoutBtn" @confirm="toLoginOut" >
			退出登录
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	export default {
		data() {
			return {
				isLoad: false,
				options: {},
				userInfoList: [{
					text: '昵称',
					key: 'nickName'
				}, {
					text: '注册时间',
					key: 'create_date'
				}],
				infoList: [{
					text: '用户隐私协议',
					url: 1
				}, {
					text: '个人信息保护指引',
					url: 2
				}],
				user_info: {}
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			userInfo: state => state.user.userInfo,
		}),
		async onLoad() {
			this.initIndex()
		},
		methods: {
			...mapActions(['getUserInfo']),
			...mapMutations(['updateUserItem']),
			async initIndex() {
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				this.user_info = this.$util.deepCopy(this.userInfo)
			},
			goDetail(index, key) {
				let {
					siteroot
				} = siteInfo
				let {
					url
				} = this[key][index]
				if (key == 'infoList') {
					// #ifdef MP-WEIXIN
					this.$util.goUrl({
						url: `/user/pages/info?type=${url}`
					})
					// #endif
					// #ifndef MP-WEIXIN

					let href = siteroot.split('index.php')[0]
					let page = url == 1 ? 'protocol' : 'information'
					url = `${href}${page}.html`
					this.$util.goUrl({
						url,
						openType: 'web'
					})
					// #endif


				}

			},
			toLoginOut() {
				let arr = ['autograph', 'userInfo', 'location', 'appLogin']
				arr.map(key => {
					uni.setStorageSync(key, '')
					this.updateUserItem({
						key,
						val: ''
					})
				})
				this.$util.showToast({
					title: `退出登录`
				})
				setTimeout(() => {
					let url = `/pages/service`
					// #ifdef APP-PLUS
					url = `/pages/login`
					// #endif
					this.$util.goUrl({
						url,
						openType: `reLaunch`
					})
				}, 1000)
			}

		}
	}
</script>


<style lang="scss">
	.mine-pages-setting {
		.topContainer{
			background: #FFFFFF;
			border-radius: 30rpx;
			overflow: hidden;
			margin:0 24rpx;
			margin-top:40rpx;
		}
		.topitem{
			margin:0 30rpx;
			border-bottom:1px solid #EAEAEA; 
			display:flex;
			padding:30rpx 0;
			align-items: center;
			justify-content: space-between;
			.left{
				display:flex;
			}
		}
		.iconfont {
			color: #999
		}
	}
	.bottomContent{
		background: #FFFFFF;
		border-radius: 30rpx;
		margin:0 24rpx;
		overflow: hidden;
		margin-top:20rpx;
	}
	.logoutBtn{
		width:66%;
		margin: 0 auto;
		text-align: center;
		background: rgba(8,191,119,0);
		border: 1px solid #08BF77;
		border-radius: 45px;
		padding: 31rpx 0;
		font-size: 30upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #08BF77;
	}
</style>