zc_saas_h5/pages2/wd/info.vue

<template>
	<view >
	<image mode="widthFix" src="/static/wd_bg_login.jpg" class="login_full_img"></image>
	
	
	<view  class="loginBox">
		<view style="display: flex;height: 160rpx;justify-content: center;" >
			<view style="text-align: center;">
				<image @click="editAvatar"  :src="form.avatar?$method.splitImgHost(form.avatar, true):''" class="avatar"></image>
				<view class="nick">{{form.realname}}</view>
				<view>
					<view class="item" @click="editNickName">
						<view>我的昵称</view>
						<view>{{form.nickname}}<u-icon name="arrow-right" color="#999999" size="28"></u-icon></view>
					</view>
					<view>
						<picker @change="bindPickerChangeSex" :value="form.sex" :range="array_sex">
							<view class="item">
								<view>性别</view>
								<view class="rBox">
									<view class="picker">{{ array_sex[form.sex] }}</view>
									<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
								</view>
							</view>
						</picker>
					</view>
					<view>
						<picker mode="date" :end="$method.getDate()" :value="form.userBirth" @change="bindDateChange">
							<view class="item">
								<view>年龄</view>
								<view class="rBox">
									<view class="picker">{{ $method.getYears(form.userBirth) }} 岁</view>
									<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
								</view>
							</view>
						</picker>
					</view>
					<view class="item" @click="editIdCard">
						<view>关联学员身份</view>
						<view style="display: flex;">
							<view style="text-align: right;">
								<view>{{ form.realname }}</view>
								<view>{{ form.idCard }}</view>
							</view>
							<u-icon name="arrow-right" color="#999999" size="28"></u-icon></view>
					</view>
					<view>
						<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion2">
							<view class="item">
								<view>所在城市</view>
								<view class="rBox">
									<view class="picker">{{ form.province || '-' }} {{ form.city || '-' }} {{ form.district || '-' }}</view>
									<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
								</view>
							</view>
						</pick-regions>
					</view>
					<view class="item">
						<view>手机号码</view>
						<view>{{ form.telphone }}<u-icon name="arrow-right" color="#999999" size="28"></u-icon></view>
					</view>
				<!--	<view class="item">
						<view>微信绑定</view>
						<view>{{ form.gzh_open_id }}<u-icon name="arrow-right" color="#999999" size="28"></u-icon></view>
					</view> -->
				</view>
			</view>
		</view>
		
	</view>
	<u-modal v-model="n_show" @confirm="confirmNick" :show-cancel-button="true" title="修改昵称">
		<view class="slot-content">
			<u-input v-model="nickname" type="nickname" placeholder="请输入昵称" />
		</view>
	</u-modal>
	<u-modal v-model="id_show" @confirm="confirmId" :show-cancel-button="true" title="修改关联信息">
		<view class="slot-content">
			<u-input v-model="realname" type="nickname" placeholder="请输入真实姓名" />
			<u-input v-model="idCard" type="idcard" placeholder="请输入身份证" />
		</view>
	</u-modal>
	
	<u-popup v-model="showPhoneModal" mode="bottom" class="modal" border-radius="32">
		<view class="modal__content">
			<view class="top">
				<view class="top__line"></view>
				<view class="top__text">更换手机号码</view>
			</view>
			<view class="form">
				<u-form :model="telForm" ref="telForm">
					<view class="input-wrap">
						<u-form-item ref="tel" prop="tel"><u-input placeholder="手机号码" v-model="telForm.tel" /></u-form-item>
						<u-form-item prop="code">
							<u-input placeholder="验证码" v-model="telForm.code" />
							<view  slot="right" @click="getCode" class="getcode">{{codeTips}}</view>
						</u-form-item>
					</view>
					<view class="btns">
						<view class="cancel" @click="showPhoneModal = false">取消</view>
						<view class="submit" :class="{able:canSubmit()}" @click="bindNewSubmit">确认更换</view>
					</view>
				</u-form>
			</view>
		</view>
	</u-popup>
	<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
	<u-navbar   title="我的资料" :border-bottom="false" background="{ background: '#ffffff',opacity:0.4; }" title-color="#ffffff" back-icon-color="#ffffff">
		
	</u-navbar>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex';
export default {
	data() {
		return {
			showPhoneModal:false,
			form:{
				avatar:'',
				userBirth:''
			},
			telForm:{
				tel:'',
				code:'',
			},
			array_sex: ['男', '女'],
			n_show:false,
			defaultRegionCode: '440112',
			id_show:false,
			nickname:'',
			realname:'',
			idCard:'',
			codeTips:'',
			avatarUrl:'',
			avatarOssKey:'',
			rules: {
				tel: [
					{ 
						required: true, 
						message: '请输入手机号', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change']
					},
					{
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						message: '手机号码格式不正确',
						// 触发器可以同时用blur和change
						trigger: ['change'],
					}
				],
				code: [
					{ 
						required: true, 
						message: '请输入验证码', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change'],
					}
				],
			},
			
		};
	},
	onShow(){
		this.form = this.userInfo
		console.log(this.form,'0999')
	},
	onLoad(option) {
	},
	methods: {
		bindPickerChangeSex(e) {
			let data = {sex:e.detail.value}
			this.submitForm(data)
		},
		uploadFile(options, int) {
			var self = this;
			return new Promise((resolve, reject) => {
				var data = {
					imageStatus: int
				};
				self.$api.aliyunpolicy(data).then(res => {
					console.log(res.data,6)
					if(res.data.code!=200){
						self.$method.showToast('签名错误'+JSON.stringify(res.data))
						return
					}
					var ossToken = res.data.data.resultContent;
					if(ossToken.host==null||ossToken.host==undefined){
						self.$method.showToast('上传路径报错'+JSON.stringify(res.data))
						return
					}
					uni.uploadFile({
						url: ossToken.host,
						name: 'file',
						filePath: options,
						fileType: 'image',
						header: {
							AuthorizationToken: 'WX ' + uni.getStorageSync('token')
						},
						formData: {
							key: ossToken.dir,
							OSSAccessKeyId: ossToken.accessid,
							policy: ossToken.policy,
							Signature: ossToken.signature,
							callback: ossToken.callback,
							success_action_status: 200
						},
						success: result => {
							if (result.statusCode === 200) {
								self.avatarOssKey = ossToken.dir;
								resolve();
							} else {
								uni.showToast({
									title: '上传失败',
									icon: 'none'
								});
								return;
							}
						},
						fail: error => {
							uni.showToast({
								title: '上传接口报错'+error,
								icon: 'none'
							});
							return;
						}
					});
				});
			});
		},
		imageInfos(){
			var self = this
			return new Promise((resolve, reject) => {
				uni.getImageInfo({
					src: self.avatarUrl,
					success: async res => {
						let canvasWidth = res.width; //图片原始长宽
						let canvasHeight = res.height;
						if (canvasWidth > 1000 || canvasHeight > 1000) {
							uni.compressImage({
								src: self.avatarUrl,
								quality: 75,
								width: '50%',
								height: '50%',
								success: async rest => {
									const waitUpload = await self.uploadFile(rest.tempFilePath, 0);
									resolve()
								} 
							});
						} else {
							console.log('无需压缩');
							const waitUpload = await self.uploadFile(self.avatarUrl, 0);
							resolve()
						}
					}
				});
			});
		},
		async submitAvatar(){
			const waitYS = await this.imageInfos();
			 let data = {avatar:this.avatarOssKey}
			this.submitForm(data) 
		},
		editAvatar(){
			let that = this
			uni.chooseImage({
			    count: 1, //默认9
			    sizeType: [  'compressed'], //可以指定是原图还是压缩图，默认二者都有
			    success: function (res) {
					that.avatarUrl = res.tempFilePaths[0]
					that.submitAvatar()
			    }
			});
		},
		//城市
		handleGetRegion2(region) {
			let data = {province:region[0].name,city:region[1].name,district:region[2].name}
			this.submitForm(data)
		},
		bindDateChange(e) {
			let data = {userBirth:e.detail.value}
			this.submitForm(data)
		},
		editIdCard(){
			this.id_show = true
			this.realname = this.form.realname
			this.idCard = this.form.idCard
		},
		confirmId(){
			if(this.realname==''){
				uni.showModal({
					title: "提示",
					content: '真实姓名不能为空',
					showCancel: false
				})
				return
			}
			if(this.idCard==''){
				
				
				uni.showModal({
					title: "提示",
					content: '身份证ID不能为空',
					showCancel: false
				})
				return
			}
			let idCardRe18 = /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
			let idCardre15 =  /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/
			if(!idCardRe18.test(this.idCard) && !idCardRe15.test(this.idCard)){
				
				uni.showModal({
					title: "提示",
					content: '身份证ID不正确',
					showCancel: false
				})
				return
			}
			let data = {realname:this.realname,idCard:this.idCard}
			this.submitForm(data)
		},
		confirmNick(){
			if(this.nickname==''){
				uni.showModal({
					title: "提示",
					content: '昵称不能为空',
					showCancel: false
				})
				return
			}
			let data = {nickname:this.nickname}
			this.submitForm(data)
		},
		editNickName(){
			this.n_show = true
			this.nickname = this.form.nickname
		},
		submitForm(data){
			let self = this
			this.$api.appuserInfo(data).then(res => {
				if (res.data.code === 200) {
					setTimeout(()=>{
						uni.showToast({
							title: '提交成功',
							icon: 'none'
						});
					},500);
					self.$api.refreshUserInfo() 
				}else{
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
				}
			});
		},
		showPhone() {
			this.showPhoneModal = true;
			this.$refs.telForm.setRules(this.rules)
		},
		canSubmit() {
			if(this.telForm.tel && this.telForm.code) {
				return true;
			}
			return false;
		},
		
		codeChange(text) {
			this.codeTips = text;
		},
		getCode() {
			let that = this
			if(that.$refs.uCode.canGetCode) {
				if(that.$refs.tel.validateState == 'success') {
					let datas = {tel:this.telForm.tel}
					that.$api.bindNewSms(datas).then(
						res => {
							if (res.data.code == 200) {
								that.$u.toast('验证码已发送');
								// 通知验证码组件内部开始倒计时
								that.$refs.uCode.start();
							} else {
								that.$u.toast(res.data.msg);
							}
						},
						err => {
							console.log(err);
						}
					);	
				} else {
					this.$refs.tel.onFieldChange()
				}
			}
		},
		bindNewSubmit() {
			let that = this
			this.$refs.telForm.validate(valid => {
				if(valid) {
					let datas = {
						tel:this.telForm.tel,
						code:this.telForm.code,
					}
					that.$api.bindNewTel(datas).then(
						res => {
							if (res.data.code == 200) {
								uni.showModal({
									title: '提示',
									content: '绑定成功',
									showCancel:false,
									success: function(resst) {
										this.showPhoneModal = false;
									}
								});
							} else {
								that.$u.toast(res.data.msg);
							}
						},
						err => {
							
						}
					);
				}
			})
		}
	},
	computed: {...mapGetters(['userInfo'])},
	watch:{
		userInfo(val, oldVal){//普通的watch监听
		     if(val){
				 this.form = this.userInfo
			 }
		 },
	}
	
};
</script>
<style >
	page{
		background-color: #F0F1F5;
	}
	
</style>

<style scope lang="scss">
	.slot-content{
		margin: 30rpx;
		color: #606266;
	}
	.rBox{
		display: flex;
	}
	.item{
		width: 686rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		display: flex;
		color: #666666;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		margin-top: 30rpx;
		font-size: 24rpx;
	}
	.nick{
		font-size: 36rpx;
		font-weight: bold;
		color: #007AFF;
		margin-top: 20rpx;
	}
	.loginBox{
		position: relative;
		top: -80rpx;
	}
	.avatar{
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
	}
	.login_full_img {
		display: block;
		width: 100%;
		height: 140px !important;
		z-index: -999;
		top: 0;
	}
	.full_img {
		display: block;
		width: 100%;
		z-index: -999;
		top: 0;
	}
	.loginBtn{
		width: 526rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #015EEA, #00C0FA);
		box-shadow: 0rpx 10rpx 16rpx 4rpx rgba(1, 99, 235, 0.04);
		border-radius: 40rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		margin: 0 auto;
		margin-top: 50rpx;
	}
	
	.modal {
		&__content {
			position:relative;
			width: 750rpx;
			height: 1208rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 16rpx 4rpx #919CB2;
			border-radius: 32rpx 32rpx 0rpx 0rpx ;
			overflow: hidden;
			
			.top {
				border-bottom: 1rpx solid #eee;
				&__line {
					position: absolute;
					top: 10rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 80rpx;
					height: 8rpx;
					background-color: #999;
					border-radius: 4rpx;
				}
				
				&__text {
					height: 77rpx;
					text-align: center;
					line-height: 90rpx;
					font-size: 24rpx;
					color: #999;
					position: relative;
				}
			}
			
			.form {
				margin: 24rpx auto 0;
				width: 686rpx;
				height: 360rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				
				.input-wrap {
					padding:20rpx 80rpx;
					
					.getcode {
						color:#007AFF;
						font-size: 30rpx;
					}
				}
				
				.btns {
					display: flex;
					justify-content: space-between;
					margin-top:160rpx;
					.cancel {
						font-weight: bold;
						text-align: center;
						line-height: 80rpx;
						color:#007AFF;
						width: 200rpx;
						height: 80rpx;
						font-size: 30rpx;
						background: #F5F5F5;
						border-radius: 40rpx 40rpx 40rpx 40rpx;
					}
					
					.submit {
						font-weight: bold;
						opacity: 0.6;
						text-align: center;
						line-height: 80rpx;
						color:#fff;
						font-size: 30rpx;
						width: 438rpx;
						height: 80rpx;
						background: #007AFF;
						border-radius: 40rpx 40rpx 40rpx 40rpx;
						
						&.able {
							opacity: 1;
						}
					}
				}
			}
		}
	}
</style>