cte-share/pages/UserCenter/userMsgMenager.vue

<template>
	<view>
		<customNav :shownav="true" :title="$t('index.usermsg')" titledetl=""></customNav>
		<view class="yzmctV">
			<yhdslCropper ref="yhdslCropper" :quality="1" mode="scale"  @uploadImg="uploadImg" :scale="scale"></yhdslCropper>
			<myImage class="imagV" :mysrc="userIcon" :isIcon="true" mymode="heightFix" v-on:Emyimageclick='imageUpdata' ></myImage>
		</view>
		<view class="yzmlist bottomline">
			<text class="tittext">{{$t('user.nicheng')}}:</text>
			<input class="noinputV" type="text" :placeholder="$t('user.qingshuryhnc')" :value="nikename"  @input="phoneinput">
		</view>
		<view class="yzmlist bottomline">
			<text class="tittext">e-mail:</text>
			<input class="noinputV" type="text" :placeholder="$t('user.qingtianxndyx')" :value="email"  @input="smsCodeinput">
		</view>
		<!-- <view class="yzmctV">
			<input class="noinputV" type="text" :placeholder="$t('user.qingtianxndyx')" :value="email" @input="smsCodeinput">
		</view> -->
		<view class="yzmctV">
			<radio-group @change="radioChange">
			  <radio value="0" :checked="sex==0" />
			  {{$t('index.xiansheng')}}
			  <radio value="1" :checked="sex==1"/>
			  {{$t('index.nvshi')}}
			  <radio value="2" :checked="sex==2"/>
			  {{$t('index.weizhi')}}
			</radio-group>
		</view>
		<view class="yzmctV">
			<text class="querenBt" @click="updata">{{$t('index.tijiao')}}</text>
		</view>
	</view>
</template>

<script>
 import api from "@/pages/api/api.js"
	
	import yhdslCropper from '@/components/yhdsl-cropper/yhdsl-cropper.vue';
	
	export default {
		components: {
		        yhdslCropper
		    },
		data() {
			return {
				token:'',
				nikename:'',
				email:'',
				sex:1,
				userIcon:'',
				userInfo:[],
				scale:1
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync("userInfo");
			this.nikename=this.userInfo.nickName;
			this.email = this.userInfo.email;
			this.sex = this.userInfo.sex;
			this.userIcon = this.userInfo.avatar;
			
		},
		methods: {
			radioChange(e){
				console.log(e.detail.value)
				this.sex=e.detail.value;
			},
			phoneinput(event){
				this.nikename = event.target.value;
			},
			smsCodeinput(event){
				this.email = event.target.value;
			},
			imageUpdata(){
				 this.$refs.yhdslCropper.chooseImage();
			},
			uploadImg(e) {
				console.log('------------uploadImg:',e)
				this.spImage = e;
				var that = this;
				uni.uploadFile({
					url: this.$upImagurl, //上传图片api
					filePath: e,
					name: 'file',
					header:{
						//"Authorization": userinfo.token
					},
					success: (res) => {
						let group =  JSON.parse(res.data);
						that.userIcon=group.data;
						uni.showToast({
							title:that.$t('mend.shangccg'),
							icon:"success"
						})
					}
				});
			},
			
			updata(){
				var pattern = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/;
				if (pattern.test(this.email)) {
				　　;
				} else {
				　　console.log("错误的邮箱地址！");
					if(this.email==''||null==this.email||undefined==this.email){
					}
					else{
						uni.showToast({
							title:'Nhầm địa chỉ email!',
							icon:"none"
						})
						return;
					}
				}
				this.updataUserMsg();
			},
			updataUserMsg(){
				api('updataUserMsg',{
					"nickName":this.nikename,
					"email":this.email, 
					"sex": this.sex, 
					"avatar": this.userIcon, 
					"status": 0
				},res=>{
					console.log(res.data)
					uni.navigateBack({
							delta:1,//返回层数，2则上上页
					})
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
			
		}
	}
</script>

<style>
	
	.imagV{
		margin-top: 30rpx;
		padding: 8rpx;
		width: 120rpx;
		height: 120rpx;
		border: 2rpx solid darkgray;
	}
	
	
	.yzmctV{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-top: 40rpx;
	}
	
	.yzmlist{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		margin-top: 40rpx;
		padding: 20rpx;
		
	}
	
	.bottomline{
		border: solid lightgray;
		border-width: 0px 0px 2rpx 0px;
	}
	
	.tittext{
		font-size: 26rpx;
		width: 20%;
		text-align: right;
	}
	.noinputV{
		width: 70%;
		margin-left: 2%;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 20rpx;
		border: 2rpx solid lightgray;
	}
	.querenBt{
		margin-top: 30rpx;
		width: 80%;
		height: 60rpx;
		line-height: 60rpx;
		padding: 10rpx;
		border-radius: 20rpx;
		border: solid crimson;
		border-width: 0px 0px 6rpx 0px;
		text-align: center;
		justify-content: center;
		background-color: #00A6FF;
		color: white;
		box-shadow: 0rpx 0rpx 10rpx 0rpx #00A6FF;
	}

</style>