smt-used-car-h5/pages/index/changinfo.vue

<template>
	<view>
		<uni-nav-bar leftText=" " :fixed="true" :border="false" leftIcon="back" @clickLeft="leftClick" color="#000000" backgroundColor="#fff" :statusBar="true" title="个人信息"></uni-nav-bar>
		<view class="content">
			<view class="topimg">
				<uni-file-picker fileMediatype="image" limit="1" :list-styles="imageStyles" :del-icon="false" disable-preview @select="select" @delete="delfn('picture')">
					<image class="user" :src="userinfo.avatar_pull"mode=""></image>
				</uni-file-picker>
				<view>点击更换头像</view>
			</view>
			<view class="cell1">
				<view class="item">英文名</view>
				<view class="right">
					<input placeholder="请输入英文名" type="text" v-model="userinfo.name_en"></input>
				</view>
			</view>
			<view class="cell1">
				<view class="item">手机号</view>
				<view class="right">
					<input placeholder="请输入手机号" type="number" v-model="userinfo.phone"></input>
				</view>
			</view>
			<u-divider text=""></u-divider>
			<view class="cell1">
				<view class="item">邮箱</view>
				<view class="right">
					<input placeholder="请输入邮箱" type="text" v-model="userinfo.email"></input>
				</view>
			</view>
			<u-divider text=""></u-divider>
			<view class="cell1">
				<view class="item">whatsapp</view>
				<view class="right">
					<input placeholder="请输入whatsapp" type="text" v-model="userinfo.whatsapp"></input>
				</view>
			</view>
			<u-divider text=""></u-divider>
			<view class="cell1">
				<view class="item">二维码</view>
				<view class="right">
					<u-radio-group v-model="userinfo.social">
					  <u-radio name="微信" class="m-r-10">微信</u-radio>
					  <u-radio name="WhatsApp">WhatsApp</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="cell">
				<view class="item">上传二维码</view>
				<view class="right">
					<uni-file-picker style="margin: 10px 0px;" fileMediatype="image" limit="1" :list-styles="imageStyles" :del-icon="false" disable-preview @select="selectewm" >
						<image class="user" :src="userinfo.social_code_pull==null?'/static/image/mine/erwm.png':userinfo.social_code_pull " mode=""></image>
					</uni-file-picker>
				</view>
			</view>
		</view>
		<view class="foot">
			<button class="btn"  @click="bcFn">保存</button>
		</view>	
	</view>
</template>
<script>
	import { nextTick } from "vue"
	import { request,showToast } from '@/api/apiT.js'
	export default {
		data() {
			return {
				imageStyles: {
					border: true,
				},
				userinfo:{},
				
			}
		},
		onLoad() {
			this.getinfo()
		},
		methods: {
			getinfo(){
				var that= this;
				request({
					url:'common/user/info',
					method:'get',
				}).then(res => {
					that.userinfo = res.data.data;
				})
			},
			uploadfn(imgUrl,name,name1){
				const that = this
				uni.showLoading({
					title: '上传中'
				});
				uni.uploadFile({
					url: 'https://userdcar-server.hnxinyouhe.com/upload?scene=usedCarimg', 
					filePath: imgUrl,
					name: 'file',
					header:{'Fdesk-Auth-Token': uni.getStorageSync('token'),'Fdesk-Login-Type': 'feishu','Fdesk-System-Code':'fdesk'},
					success: (uploadFileRes) => {
						const res = JSON.parse(uploadFileRes.data || '{}')
						uni.hideLoading();
						uni.showToast({
							title:res.message,
							icon:'none'
						})
						if(res && res.data && res.data.file_name){
							that.userinfo[name1] = res.data.file_url
							that.userinfo[name] = res.data.file_name
						}
					},
					fail: (err) => reject(err)
				});
			},
			selectewm(e){
				const tempFilePaths = e.tempFilePaths;
				const imgUrl=tempFilePaths[0]
				this.uploadfn(imgUrl,'social_code','social_code_pull')
			},
			select(e){
				const tempFilePaths = e.tempFilePaths;
				const imgUrl=tempFilePaths[0]
				this.uploadfn(imgUrl,'avatar','avatar_url')
			},
			leftClick(){
				uni.navigateBack({})
			},
			bcFn(){
				request({
					url:'common/user/edit',
					method:'POST',
					data:{
						avatar:this.userinfo.avatar,
						phone:this.userinfo.phone,
						email:this.userinfo.email,
						whatsapp:this.userinfo.whatsapp,
						social:this.userinfo.social,
						social_code:this.userinfo.social_code,
						name_en:this.userinfo.name_en
					}
				}).then(res => {
					uni.showToast({
						title: res.data.message,
						icon: 'none'
					});
					if(res.data.code ==0||res.data.code ==200){
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/index/mine',// 替换为你要跳转的页面路径
							});
						}, 1000);
						
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.uni-file-picker {
	    margin-left: 33.3%;
	}
	.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;
		padding-bottom: 100px;
		.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;
		}
	}
	.cell{
		padding: 18px 20px;
		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: #3F435B;
		color: white;
		border-radius: 50px;
		width: 84%;
		margin: 20px 8%;
	}
	.addimg{
		width: 35px;
		height: 35px;
		border-radius: 50%;
	}
	
	
	//
	.actives{
		background-color: #dfdfdf;
	}
	.text{
		display: flex;
		align-items: center;
		justify-content: space-between;
		line-height: 30px;
		padding: 10px 15px 0px;
		.qd{
			color: #3471FF;
		}
	}
	.popup-content {
	  padding: 20px;
	  background-color: #fff;
	}
	
	.option-list {
	  max-height: 400rpx;
	  margin-top: 20rpx;
	}
	
	.option-item {
	  padding: 20rpx;
	  border-bottom: 1rpx solid #eee;
	}
	
	.option-item:last-child {
	  border-bottom: none;
	}
	
	.no-data {
	  text-align: center;
	  padding: 20rpx;
	  color: #999;
	}
</style>