jinjian1.1/pages/mine/index.vue

<template>
	<view>
		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">
			<view class="u-m-r-10">
				<u-avatar :src="pic" size="140"></u-avatar>
			</view>
			<view class="u-flex-1">
				<view class="u-font-18 u-p-b-20">{{userInfo.name}}</view>
				<view class="u-font-14 u-tips-color">{{tel}}</view>
			</view>
		</view>
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell icon="file-text" title="进件历史" :isLink="true" @click="goHistory"></u-cell>
			</u-cell-group>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell icon="star" title="去进件" @click="goAdd"></u-cell>
				<u-cell icon="photo" title="修改昵称" @click="isShow=true"></u-cell>
				<u-cell icon="coupon" title="修改密码" @click="isMima=true"></u-cell>
			</u-cell-group>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell @click="back" icon="setting" title="退出登录"></u-cell>
			</u-cell-group>
		</view>
		<u-popup :show="isShow" mode="center" @close="close">
			<u--input placeholder="请输入新昵称" border="surround" type='text' v-model="value" @change="change"></u--input>
			<u-button type="primary" text="确定" @click="changeVal"></u-button>
		</u-popup>
		<u-popup :show="isMima" mode="center" @close="close">
			<u--input placeholder="请输入原密码" border="surround" type='password' v-model="oldMima" @change="change2"></u--input>
			<u--input placeholder="请输入新密码" border="surround" type='password' v-model="newMima" @change="change3"></u--input>
			<u-button type="primary" text="确定" @click="changeValmima"></u-button>
		</u-popup>
	</view>
</template>

<script>
	import {edit} from '@/utils/api.js'
	export default {
		data() {
			return {
				pic: 'http://yuledui.oss-cn-qingdao.aliyuncs.com/img/logo/merch.png',
				tel: '',
				isShow: false, //修改昵称
				isMima: false, //修改密码
				value: '',
				oldMima:'',
				newMima:'',
				userInfo:'',
			}
		},
		onLoad() {
			this.tel = uni.getStorageSync('phone')
			this.userInfo = uni.getStorageSync('userInfo');
		},
		methods: {
			changeValmima(){
				if(uni.getStorageSync('userInfo').password==this.oldMima){
					this.changeVal()
				}else{
					this.$u.toast("原密码输入错误，请重新输入")
				}
			},
			//修改昵称、密码
			changeVal() {
				const data={
					promoter_id:uni.getStorageSync('userInfo').promoter_id||'',
					...(this.value ? { name: this.value } : {}),  //昵称
					...(this.newMima ? { password: this.newMima } : {})  //密码
				}
				edit(data).then(res=>{
					if(res.code==200){
						if(this.value!=''){
							this.userInfo.name=this.value
						}
						if(this.newMima!=''){
							this.userInfo.password=this.newMima
						}
						uni.setStorageSync('userInfo',this.userInfo)
						this.$u.toast(res.msg)
						this.close()
					}
				})
			},
			change(e) {
				this.value = e
			},
			change2(e) {
				this.oldMima = e
			},
			change3(e) {
				this.newMima = e
			},
			close() {
				this.isMima = false;
				this.isShow = false;
				this.value='';
				this.oldMima='';
				this.newMima='';
			},
			//进件历史
			goHistory() {
				uni.navigateTo({
					url: '/pages/mine/history'
				})
			},
			goAdd() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			//退出登录
			back() {
				uni.clearStorage();
				uni.reLaunch({
					url: '/pages/login/index'
				});
			}
		}
	}
</script>
<style>
	page {
		background-color: #ededed !important;
	}	
</style>
<style lang="scss" scoped>


	/deep/.u-popup__content {
		padding: 60rpx 40rpx !important;
		border-radius: 20rpx !important;
	}
	/deep/ .u-input{
		margin-bottom: 40rpx;
	}

	.user-box {
		background-color: #fff;
		padding-top: 120rpx;
	}

	.u-p-b-30 {
		padding-bottom: 30rpx !important;
	}

	.u-p-l-30 {
		padding-left: 30rpx !important;
	}

	.u-p-r-20 {
		padding-right: 20rpx !important;
	}

	.u-m-r-10 {
		margin-right: 20rpx;
	}

	.u-m-t-20 {
		margin-top: 20rpx;
		background-color: #fff;
	}

	.u-flex-1 {
		flex: 1;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}

	/deep/.u-cell__body {
		padding: 32rpx 30rpx !important;
	}

	.u-font-14 {
		font-size: 28rpx;
	}
</style>