hs-usedcar-miniapp/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.changinfo')"></uni-nav-bar>
		<view class="content">
			<view class="cell">
				<view>{{$t('mine.avatar')}}</view>
				<view class="right">
					<uni-file-picker  fileMediatype="image" limit="1" @select="select" @delete="delfn" :del-icon="false" disable-preview :imageStyles="imageStyles">
						<image :src="userinfo.avatar==''?'/static/image/mine/user.png':userinfo.avatar" mode="" class="addimg"></image>
					</uni-file-picker>
				</view>
			</view>
			<view class="cell1">
				<view>{{$t('mine.nickname')}}</view>
				<view class="right select">
					<input  :placeholder="$t('mine.nickinput')" v-model="userinfo.nickname"></input>
					<uni-icons type="right" size="18"></uni-icons>
				</view>
			</view>
			<view class="cell1">
				<view>{{$t('mine.phone')}}</view>
				<view class="right select">
					<input  :placeholder="$t('mine.phoneinput')"  type="number" v-model="userinfo.phone"></input>
					<uni-icons type="right" size="18"></uni-icons>
				</view>
			</view>
			<view class="cell1">
				<view>{{$t('mine.company')}}</view>
				<view class="right select">
					<input  :placeholder="$t('mine.companyinput')"  v-model="userinfo.company"></input>
					<uni-icons type="right" size="18"></uni-icons>
				</view>
			</view>
		</view>
		<view class="foot">
			<button class="btn"  @click="bcFn">{{$t('button.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:'user/info',
					method:'POST',
				}).then(res => {
					that.userinfo = res.data.data
				})
			},
			uploadfn(imgUrl){
				var that = this;
				uni.uploadFile({
					url: 'https://usedcar.server.hnxinyouhe.com/applet/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:'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>
	.uniui-right{
		position: absolute;
		top: 2px;
	}
	.content{
		margin: 20px 12px;
		background: #FFFFFF;
		border-radius: 10px;
	}
	.cell{
		display: flex;
		justify-content:space-between;
		padding: 10px 20px;
		/* border-bottom: 1px solid #C3C3C3; */
		align-items: center;
		font-weight: 500;
	}
	.cell1{
		display: flex;
		justify-content:space-between;
		padding: 18px 20px;
		align-items: center;
		font-weight: 500;
	}
	.right{
		text-align: right;
	}
	.select{
		display: flex;
		position: relative;
		margin-right: 10px;
	}
	.foot{
		position: fixed;
		bottom: 0px;
		width: 100%;
		height: 240rpx;
		background: #FFFFFF;
	}
	.btn{
		background-color: #3F435B;
		color: white;
		border-radius: 50px;
		width: 84%;
		margin-bottom: 40px;
		margin: 20px 8%;
	}
	.addimg{
		width: 35px;
		height: 35px;
		border-radius: 50%;
	}
</style>