crm-uni/pages/mine/changinfo.vue

<template>
	<view>
		<uni-nav-bar leftText=" " :fixed="true" :border="false" leftIcon="back" @clickLeft="leftClick" color="#000000" backgroundColor="#fff" :statusBar="true" :title="$t('navbar.persondata')"></uni-nav-bar>
		<view class="content">
			<view class="topimg">
				 <image class="user" src="/static/image/mine/user.png" mode=""></image>
				 <image class="xj" src="/static/image/mine/xiangji.png" mode=""></image>
				 <view>{{$t('mine.changeavatar')}}</view>
			</view>
			<view class="cell1">
				<view class="item">{{$t('gender')}}</view>
				<view class="right">
					<u-radio-group v-model="userinfo.gender">
					  <u-radio name="1" class="m-r-10">{{$t('gender1')}}</u-radio>
					  <u-radio name="2">{{$t('gender2')}}</u-radio>
					</u-radio-group>
				</view>
			</view>
			<u-divider text=""></u-divider>
			<view class="cell1">
				<view class="item">{{$t('mine.nickname')}}</view>
				<view class="right">
					<input  :placeholder="$t('mine.nicknameinputhd')" v-model="userinfo.nickname"></input>
				</view>
			</view>
			<u-divider text=""></u-divider>
			<view class="cell1">
				<view class="item">{{$t('mine.lxcall')}}</view>
				<view class="right">
					<input  :placeholder="$t('mine.lxcallinputhd')" type="number" v-model="userinfo.phone"></input>
				</view>
			</view>
			<u-divider text=""></u-divider>
			<view class="cell1">
				<view class="item">{{$t('Region')}}</view>
				<view class="right select">
					<input  :placeholder="$t('Regioninputhd')" v-model="userinfo.company"></input>
					<u-icon class="arrowright" name="arrow-right" size="18" color="#747474"></u-icon>
				</view>
			</view>
		</view>
		<view class="foot">
			<button class="btn"  @click="bcFn">{{$t('save')}}</button>
		</view>	
	</view>
</template>
<script>
	import { request,showToast } from '@/api/apiT.js'
	export default {
		data() {
			return {
				imageStyles: {
					width: 40,
					height: 40,
					border: {
						radius: '50%'
					}
				},
				userinfo:{
					nickname:'',
					avatar:'',
					company:'',
					phone:'',
				},
				
			}
		},
		onLoad() {
			this.getinfo()
		},
		methods: {
			getinfo(){
				var that= this;
				request({
					url:'api/user/info',
					method:'POST',
				}).then(res => {
					that.userinfo = res.data.data
				})
			},
			uploadfn(imgUrl){
				var that = this;
				uni.uploadFile({
					url: 'https://api.collect.hs.hnzhwlkj.club/api/upload/image', 
					filePath: imgUrl,
					name: 'image',
					header:{'content-type': 'application/x-www-form-urlencoded','Authorization': 'Bearer ' +  uni.getStorageSync('token')},
					success: (uploadFileRes) => {
						const path=JSON.parse(uploadFileRes.data)
						that.userinfo.avatar = path.data.image_url
						console.log(that.carinfo)
					}
				});
			},
			delfn(){
				that.userinfo.avatar =''
			},
			select(e){
				const tempFilePaths = e.tempFilePaths;
				const imgUrl=tempFilePaths[0]
				this.uploadfn(imgUrl)
			},
			leftClick(){
				uni.navigateBack({})
			},
			bcFn(){
				request({
					url:'api/user/update',
					method:'POST',
					data:{
						nickname:this.userinfo.nickname,
						avatar:this.userinfo.avatar,
						company:this.userinfo.company,
						phone:this.userinfo.phone
					}
				}).then(res => {
					uni.showToast({
						title: res.data.message,
						icon: 'none'
					});
					if(res.data.code ==0){
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/index/mine',// 替换为你要跳转的页面路径
							});
						}, 1000);
						
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.m-r-10{
		margin-right: 10px;
	}
	.uniui-right{
		position: absolute;
		top: 2px;
	}
	.u-divider{
		margin: 0px 0px !important;
	}
	.arrowright{
		margin-right: -15px;
	}
	.content{
		background: #FFFFFF;
		.topimg{
			text-align: center;
			position: relative;
			padding: 20px 0px;
			color: #999999;
		}
		.user{
			width: 200rpx;
			height: 200rpx;
		}
		.xj{
			width: 60rpx;
			height: 52rpx;
			position: absolute;
			right: 46%;
			top: 33%;
		}
	}
	.cell1{
		display: flex;
		justify-content:space-between;
		padding: 18px 20px;
		align-items: center;
		font-weight: 500;
		.item{
			width: 90px;
		}
	}
	.right{
		text-align: right;
	}
	.select{
		display: flex;
		position: relative;
		margin-right: 10px;
	}
	.foot{
		position: fixed;
		bottom: 0px;
		width: 100%;
		height: 160rpx;
		background: #FFFFFF;
	}
	.btn{
		background: linear-gradient(to right, #3471FF, #6776FF);
		color: white;
		border-radius: 50px;
		width: 84%;
		margin: 20px 8%;
	}
	.addimg{
		width: 35px;
		height: 35px;
		border-radius: 50%;
	}
</style>