wangluohuoyun-huozhuapp/pages/mine/set.vue

<template>
	<view class="content">
		<view class='avatar'  @click="switchPicture">
			<image :src="headUrl" class="picture"></image>
			<view class='setavatar'>
				<image style='width:39px;height:39px;' src="../../static/mine/set/setavatar.png"></image>
			</view>
			<view style='font-size:12px;color:#999;margin-bottom:20px;' class="" v-if="!headUrl">
				未上传头像
			</view>
		</view>
		<view class='wrap'>
			<view class='flex flex-space-between  wrap-item' @click="nickname(username)">
				<view>
					<text>姓名</text>
				</view>
				<view @click='editname' style='align-items: center;' class="flex">
					<view class="username">
						{{name}}
					</view>
					<image src="../../static/images/myimg/gengduo1@3x.png" class="arrow"></image>
				</view>
			</view>
			<!-- <view class='flex flex-space-between  wrap-item' @click='UpdataPassword'>
				<view>
					<text>修改账号</text>
				</view>
				<image src="../../static/images/myimg/gengduo1@3x.png" class="arrow"></image>
			</view> -->
		</view>
		<view class='wrap'>
			<view class='flex flex-space-between wrap-item' @click='UpdataPassword'>
				<view>
					<text>修改密码</text>
				</view>
				<image src="../../static/images/myimg/gengduo1@3x.png" class="arrow"></image>
			</view>
		</view>
		<view class='wrap'>
			<view class='flex flex-space-between wrap-item' @click='fankui'>
				<view>
					<text>意见反馈</text>
				</view>
				<image src="../../static/images/myimg/gengduo1@3x.png" class="arrow"></image>
			</view>
			<!-- <u-line color="#EEEEEE" class="line"></u-line>
			<view class='flex flex-space-between wrap-item' @click='clearStorage'>
				<view>
					<text>清除缓存</text>
				</view>
				<image src="../../static/images/myimg/gengduo1@3x.png" class="arrow"></image>
			</view> -->
		</view>
		<view class='exitloginwrap'>
			<button @click='logoutAlert()' class='exitlogin'>退出登录</button>
		</view>
		<u-modal :show="isShowAlert" :title-style="{fontSize: '18px',fontWeight:'500'}"
			:content-style="{fontSize: '14px',fontWeight:'400'}" confirm-color='#2772FB' confirm-text='确定' :title='title'
			:showCancelButton='true' :content="content" @confirm="logout" @cancel="cancelClick"></u-modal>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				isShowAlert: false,
				content: '您确定要退出吗?',
				show:false,
				title:'温馨提示',
				// content:'uView的目标是成为uni-app生态最优秀的UI框架',
				headUrl: "@/static/mine/avatar1.png",
				username: "",
				name:'',
				gridList: [{
					num: 0,
					name: '退出登录',
					// icon:'cuIcon-exit',
					src: '../../static/images/sign/return@3x.png',
					tips: 0,
					url: '',
					show: true
				}, ],
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onShow() {
			this.getList()
		},
		onLoad() {
			uni.showLoading({
				title: '加载中',
				mask: true
			})
			this.$request.baseRequest('get', '/cargoOwnerInfo/selectCargoOwner', {
					commonId: this.userInfo.id
				}).then(res => {
					uni.hideLoading()
					if (res.data) {
						this.name=res.data.call+'**'
			
					}
				})
				.catch(res => {
					uni.hideLoading()
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 2000
					})
				});
		},
		methods: {
			editname(){
				uni.$u.toast('可在 货主认证-身份信息 中修改')
			},
			UpdataPassword() {
				console.log(1111)
				uni.navigateTo({
					url: `/pages/mine/settings/editPassword?phone=${this.userInfo.phone}`
				})
			},
			clearStorage() {
				let that = this
				uni.clearStorage({
					success: function(res) {
						console.log('success');
						that.logout()
					}
				})
			},
			cancelClick() {
				this.isShowAlert = false
			},
			logout() {
				uni.hideTabBarRedDot({
					index: 3
				})
				uni.clearStorageSync();
				var that = this
				this.$request.baseRequest('post', '/auth/api/logout').then(res => {
				})
				this.$store.commit('logout')
				this.$helper.logout()
				uni.navigateTo({
					url: `/pages/public/login`
				})
			},
			getList() {
				this.userInfo = uni.getStorageSync('userInfo')
				this.headUrl = this.userInfo.avatarUrl
				if (this.headUrl == null || this.headUrl == "") {
					this.headUrl = "../../static/mine/avatar1.png"
				}
				this.username = this.userInfo.userName
			},
		switchPicture() {
			uni.navigateTo({
				url: `/pages/mine/settings/editAvatar`
			})
		},
			nickname(username) {
				uni.navigateTo({
					url: `/pages/user/set_nickname?nickname=${username}`
				})
			},
			exitlogin() {

			},
			fankui() {
				uni.navigateTo({
					url: `/pages/mine/settings/fankui`
				})
			},
			logoutAlert() {
				this.show=true
				// const that = this
				this.isShowAlert = true
				// uni.showModal({
				// 	title: '询问',
				// 	content: '您确定要退出吗？',
				// 	cancelText: '取消',
				// 	confirmText: '确定',
				// 	success: (e) => {
				// 		if (e.confirm) {
				// 			uni.hideTabBarRedDot({
				// 				index: 3
				// 			})
				// 			uni.clearStorageSync();
				// 			that.$store.commit('logout')
				// 			that.$api.logout()
				// 			uni.navigateTo({
				// 				url: `/pages/public/login`
				// 			})
				// 		}
				// 	}
				// })
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F5F6FA;
	}
	.wrap{
		background:#fff;
		padding:10px 15px;
		border-radius:5px;
		margin:10px 0;
		font-size:14px;
		.wrap-item{
			padding:10px 0;
		}
	}
	.avatar{
		text-align:center;
	}
	.container {
		padding: 10px 0 0px;
	}
	.content{
		padding:0 20px;
		height: calc(100vh - 7vh);
	}
	.pictures {
		justify-content: flex-end;
		width: 35px;
		height: 35px;
		background-color: #E0FAF6;
		border-radius: 18px;
	}
	.picture {
		width: 60px;
		height: 60px;
		border-radius: 30px;
	}
	.arrow {
		margin-left: 15px;
		width: 8px;
		height: 12px;
		// justify-content: flex-end
	
	}

	.exitloginwrap {
		width: 100%;
		padding-bottom: 20px;
	}

	.exitlogin {
		background: #fff;
		border-radius: 10px;
		color: #2772FB;
		font-size: 17px;
	}

	.exitlogin:after {
		border: none;
	}
	.setavatar{
		position:relative;
		margin:0 auto;
		width:58px;
		height:10px;
		image{
			position:absolute;
			bottom:1px;
			left:50%;
			transform: translateX(-50%);
		}
	}
</style>