dengrui/pagesB/personalInfo/personalInfo.vue

<template>
    <view class="">
        <!-- 使用标题栏 -->
        <status-nav :statusBackw="true" :statusTitle="true" :title-val="'个人资料'" :tabcolor="'#ffffff'"></status-nav>
        <view class="margin-zy20 bacb radius10" :style="{marginTop:(statusHNH+10)+'px'}">
            <view @tap="chooseVal(index)" class="disba fon28 margin-zy20 borbot padding-sx20" v-for="(item,index) in dataArr" :key="index">
                <view class="" style="color: #292929;">{{item.title}}</view>
                <view class="disac">
                    <view v-if="item.content!=''" style="color: #a6a6a6;">{{item.content}}</view>
                    <image v-if="item.imgSrc!=''" style="width: 96rpx;height: 96rpx;border-radius: 100%;margin-left: 20rpx;" :src="item.imgSrc" mode="aspectFill"></image>
                    <image class="margin-z10 youj" src="/static/img/my/youj.png" mode=""></image>
                </view>
            </view>
        </view>
        <view class="margin20">
            <!-- <button class="fon32 color33" style="background-color: #FFFFFF;border: none;position: inherit;height: 120rpx;line-height: 120rpx;">退出登录</button> -->
			<navigator @tap="clearAll" class="fon32 color33" target="miniProgram" open-type="exit"style="background-color: #FFFFFF;height: 120rpx;line-height: 120rpx;text-align: center;border-radius: 10rpx;"> 退出登录</navigator>
        </view>
		<!-- 弹框输入 -->
		<view v-if="isInput" class="posiall disbcac" style="background-color: rgba(0,0,0,.5);z-index: 100;">
			<view :class="isClose ? '':'bounceOut'" class="animated bounceIn" style="background-color: #FFFFFF;width: 70%;padding: 20rpx;border-radius: 10rpx;">
				<view style="padding-bottom: 20rpx;font-size: 28rpx;">修改：{{xtitle}}</view>
				<input @input="inputEv" :focus="isfocus" :type="inputType" :value="inputVal" style="border: 1rpx solid #dddddd;border-radius: 10rpx;padding: 10rpx 20rpx;" />
				<view style="margin-top: 20rpx;display: flex;justify-content: space-between;align-items: center;font-size: 28rpx;">
					<view @tap="closeT" class="color9 width100" style="text-align: center;">取消</view>
					<view @tap="submit" class="colorf78 width100"style="text-align: center;">确认</view>
				</view>
			</view>
		</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                dataArr:[
                    {title:'昵称：',content:'',imgSrc:'/static/img/my/myhead.png'},
                    {title:'真实姓名：',content:'',imgSrc:''},
                    {title:'手机号码：',content:'',imgSrc:''},
                ],
				inputVal:'',
				isClose:true,
				isInput:false,
				isfocus:true,
				xtitle:'',
				field:'',
				inputType:'text',
				inputIndex:'',
				headImg:'',
				statusHNH:uni.getStorageSync('statusHNH')
            }
        },
		onLoad() {
			let obj = uni.getStorageSync('userInfoObj')
			this.dataArr[0].content = obj.nickname
			this.dataArr[0].imgSrc = obj.headimgurl
			if(obj.realname==null){
				this.dataArr[1].content = '未知'
			} else {
				this.dataArr[1].content = obj.realname
			}
			if(obj.mobile==''){
				this.dataArr[2].content = '未知'
			} else {
				this.dataArr[2].content = obj.mobile
				this.zanPhone = obj.mobile
			}
		},
		onShow(){
			this.$toolAll.tools.guoq()
		},
        methods: {
			inputEv(e){
				this.inputVal = e.target.value
			},
			chooseVal(index){
				if(index!=0) this.isInput = true
				this.inputIndex = index
				this.xtitle = this.dataArr[index].content
				if(index==0) {
					this.field = 'headimgurl'
					uni.chooseImage({
					    count:1,
					    sizeType:['original'],
					    success: (res) => {
							this.dataArr[0].imgSrc = res.tempFilePaths[0]
							this.$requst.upload('file/upload/image',{file: this.dataArr[0].imgSrc}).then(res=>{
								this.headImg = res.data.src
								this.submit()//调用提交事件
							},error=>{})
					    },
					    complete: (res) => {
					        // console.log(res);
					    }
					})
				}
				if(index==1) {
					this.field = 'realname'
					this.inputType = 'text'
				}
				if(index==2) {
					this.field = 'mobile'
					this.inputType = 'number'
				}
			},
			closeT(){
				this.isClose = false
				let ya = this
				setTimeout(function(){
					ya.isInput = false
					ya.isClose = true
				},1000)
			},
			submit(){//用户信息提交事件
				let ya = this
				if(this.inputIndex==2 && this.$toolAll.tools.isPhone(this.inputVal)){
					this.$toolAll.tools.showToast('请输入正确的手机号')
				} else {
					if(this.headImg!='') this.inputVal = this.headImg
					this.$requst.post('user/edit-info',{field:this.field,value:this.inputVal}).then(res=>{
						// console.log(res);
						if(res.code==0){
							let newObj = uni.getStorageSync('params')
							if(this.inputIndex==0) this.$toolAll.tools.showToast('头像修改成功')
							let newName = ''
							if(this.inputIndex==1) {
								this.$toolAll.tools.showToast('姓名修改成功')
								newName = this.inputVal
							} else {
								newName = newObj.nickname
							}
							if(this.inputIndex==2) this.$toolAll.tools.showToast('号码修改成功')
							this.isClose = false
							let objInfo = {
								avatar:this.$http + this.headImg,
								city:newObj.city,
								code:'',
								country:newObj.country,
								gender:newObj.gender,
								invite_code:newObj.invite_code,
								language:newObj.language,
								nickname:newName,
								province:newObj.province
							}
							uni.setStorageSync('params',objInfo)
							if(this.headImg=='') this.dataArr[this.inputIndex].content = this.inputVal
							setTimeout(function(){
								ya.isInput = false
								ya.isClose = true
								ya.inputVal = ya.headImg =''
							},1000)
						}
					},error=>{})
				}
			},
			clearAll(){//清除所以缓存
				// uni.clearStorageSync()
				uni.removeStorageSync('token')
			}
        }
    }
</script>

<style>

</style>