maishidaSJ/pages/UserCenter/userMsgMenager.vue

<template>
	<view>
		<customNav :shownav="true" :title="$t('index.usermsg')" titledetl=""></customNav>
		<view class="yzmctV" style="margin-top: 26rpx;">
			<text style="font-size: 28rpx;color: darkgray;">{{$t('goods.xiugaishx')}}</text>
		</view>
		<view class="yzmctV">
			<yhdslCropper ref="yhdslCropper" :quality="1" mode="scale"  @uploadImg="uploadImg" :scale="scale"></yhdslCropper>
			<netImage style="margin-top: 30rpx;"  width="120" height="120" bradius="60" :mysrc="userIcon" mymode="scaleToFill"></netImage>
		</view>
		<view class="yzmlist">
			<text class="textfontS1 tittext">{{$t('user.nicheng')}}:</text>
			<input class="noinputV" type="text" :placeholder="$t('user.qingshuryhnc')" :value="nikename"  @input="phoneinput">
		</view>
		<view class="yzmlist">
			<text class="textfontS1 tittext">{{$t('schema.name')}}:</text>
			<input class="noinputV" type="text" :placeholder="$t('index.qingshuru')" :value="fullName"  @input="fullNameinput">
		</view>
		<view class="yzmlist">
			<text class="textfontS1 tittext">Email:</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 bottomline" style="line-height: 60rpx;">
			<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" style="margin-top: 20rpx;">
			<text class="textfontS1" style="width: 90%;">{{$t('user.shenfenzh')}}</text>
		</view>
		<view class="yzmctV">
			<input class="lginputV" type="text" :placeholder="$t('index.qingshuru')" :value="idNumber"  @input="idNumberinput">
		</view> -->
		<view class="yzmctV" style="margin-top: 30rpx;">
			<text class="textfontS1" style="width: 90%;">{{$t('user.shenfentupian')}} A</text>
		</view>
		<view class="yzmctV" @click="passportImage(11)">
			<netImage  width="610" height="610" bradius="4" :mysrc="passportPTA" mymode="scaleToFill"></netImage>
		</view>
		<view class="yzmctV">
			<text class="textfontS1" style="width: 90%;">{{$t('user.shenfentupian')}} B</text>
		</view>
		<view class="yzmctV" @click="passportImage(12)">
			<netImage  width="610" height="610" bradius="4" :mysrc="passportPTB" mymode="scaleToFill"></netImage>
		</view>
		<!-- <view class="yzmctV" style="margin-top: 30rpx;">
			<text class="textfontS1">{{$t('user.yinhangxinx')}}:</text>
		</view>
		<view class="yzmctV">
			<input class="lginputV" type="text" :placeholder="$t('index.qingshuru')" :value="bankAccount"  @input="bankinput">
		</view>
		<view class="yzmctV">
			<text class="textfontS1" style="width: 90%;">{{$t('user.yinghangtupian')}}</text>
		</view>
		<view class="yzmctV" @click="bankImage">
			<netImage  width="610" height="610" bradius="4" :mysrc="bankPT" mymode="scaleToFill"></netImage>
		</view> -->
		<view class="yzmctV bottomline" style="line-height: 60rpx;">
			<radio-group @change="mcTypeChange">
			  <radio value="0" :checked="merchantType==0" />
			  {{$t('user.gerensj')}}
			  <radio value="1" :checked="merchantType==1"/>
			  {{$t('user.qiye')}}
			</radio-group>
		</view>
		<view class="yzmctV">
			<label class="querenBt" @click="updata">{{$t('index.tijiao')}}</label>
		</view>
		<view style="height: 40rpx;"></view>
	</view>
</template>

<script>	
	import ApibaseUrl from "@/config/urlConfig.js"
	
	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,
				merchantType:0,
				fullName:'',
				idNumber:'',
				passportPTA:'',
				passportPTB:'',
				bankPT:'',
				bankAccount:'',
				imgeState:0
			}
		},
		onLoad() {
			var temp = uni.getStorageSync("userInfo");
			this.userInfo = JSON.parse(temp);
			console.log('11',this.userInfo)
			this.nikename=this.userInfo.nickName;
			this.email = this.userInfo.email;
			this.sex = this.userInfo.sex;
			this.userIcon = this.userInfo.avatar;
			if(this.userInfo.passportPhoto){
				var pts = this.userInfo.passportPhoto.split(",");
				if(pts&&pts.length==2){
					this.passportPTA = pts[0];
					this.passportPTB = pts[1];
				}
			}
			this.bankPT = this.userInfo.bankPhoto;
			this.fullName=this.userInfo.fullName;
			this.idNumber=this.userInfo.idNumber;
			this.bankAccount=this.userInfo.bankAccount;
			this.merchantType=this.userInfo.merchantType;
			
		},
		methods: {
			radioChange(e){
				console.log(e.detail.value)
				this.sex=e.detail.value;
			},
			mcTypeChange(e){
				console.log(e.detail.value)
				this.merchantType=e.detail.value;
			},
			phoneinput(event){
				this.nikename = event.target.value;
			},
			fullNameinput(event){
				this.fullName = event.target.value;
			},
			smsCodeinput(event){
				this.email = event.target.value;
			},
			idNumberinput(event){
				this.idNumber = event.target.value;
			},
			bankinput(event){
				this.bankAccount = event.target.value;
			},
			imageUpdata(){
				this.imgeState=0;
				this.scale=1;
				this.$refs.yhdslCropper.chooseImage();
			},
			passportImage(index){
				this.imgeState=index;
				this.selectImage();
			},
			bankImage(){
				this.imgeState=2;
				this.selectImage();
			},
			
			selectImage(){
				var that = this;
				var ulUrl = ApibaseUrl.getUploadUrl();
				console.log(ulUrl)
				uni.chooseImage({
					count: 1,  // 图片数量
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择或者拍照
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						uni.showLoading({
							mask:true
						})
						uni.uploadFile({
							url:ulUrl, //上传图片api
							filePath: tempFilePaths[0],
							name: 'file',
							header:{
								//"Authorization": userinfo.token
							},
							success: (res) => {
								uni.hideLoading();
								let group =  JSON.parse(res.data);
								if(that.imgeState==11){
									that.passportPTA=group.data;
								}
								if(that.imgeState==12){
									that.passportPTB=group.data;
								}
								if(that.imgeState==2){
									that.bankPT=group.data;
								}
							},
							fail() {
								uni.hideLoading();
							}
						});
					}
				});
			},
			
			uploadImg(e) {
				var ulUrl = ApibaseUrl.getUploadUrl();
				console.log('------------uploadImg:',ulUrl)
				this.spImage = e;
				var that = this;
				uni.uploadFile({
					url: ulUrl, //上传图片api
					filePath: e,
					name: 'file',
					header:{
						//"Authorization": userinfo.token
					},
					success: (res) => {
						console.log(res)
						let group =  JSON.parse(res.data);
						if(that.imgeState==0){
							that.userIcon=group.data;
						}
						
						uni.showToast({
							title:that.$t('mend.shangccg'),
							icon:"success"
						})
					},
					fail(err) {
						console.log(err)
					}
				});
			},
			
			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(){
				var passportPT=[this.passportPTA,this.passportPTB];
				
				api('updataUserMsg',{
					"nickName":this.nikename,
					"email":this.email, 
					"sex": this.sex, 
					"avatar": this.userIcon,
					"passportPhoto": passportPT+'', 
					"bankPhoto": this.bankPT, 
					"merchantType":this.merchantType,
					"idNumber":this.idNumber,
					"fullName":this.fullName,
					"bankAccount":this.bankAccount,
					"status": 0
				},
				res=>{
					console.log(res)
					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: 6rpx;
	}
	
	.yzmlist{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		margin-top: 6rpx;
		padding:10rpx 0 10rpx; 
		
	}
	
	.bottomline{
		width: 100%;
		border: solid lightgray;
		border-width: 0px 0px 2rpx 0px;
	}
	
	.tittext{
		width: 20%;
		text-align: right;
	}
	.noinputV{
		width: 70%;
		margin-left: 2%;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 20rpx;
		border: 2rpx solid lightgray;
	}
	.lginputV{
		width:610rpx;
		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 #006AFF;
		border-width: 0px 0px 6rpx 0px;
		text-align: center;
		justify-content: center;
		background-color: #006AFF;
		color: white;
		box-shadow: 0rpx 0rpx 10rpx 0rpx #006AFF;
	}

</style>