sport_pc/.svn/pristine/eb/eb2f54e484e9a8e5fca9603752b1b231e6497515.svn-base

<template>
	<div style="height:100vh">
		<yd-navbar title="个人资料" color="#fff">
			<router-link :to="{path: '/PersonalCenter' }" slot="left">
				<yd-navbar-back-icon style="color: #fff"></yd-navbar-back-icon>
			</router-link>
		</yd-navbar>
		<div class="tips">
			请完善您的个人资料，以便尽情享受我们网站提供的所有服务。
		</div>
		<div class="form">
			<ul>
				<li>
					<label for="user">账号</label>
					<input class="disabled" id="user" type="text" placeholder="账号不能修改" disabled="disabled">
				</li>

				<li>
					<label for="password">密码</label>
					<input class="disabled" id="password" type="text" placeholder="****" disabled="disabled">
				</li>

				<li>
					<label for="photo">头像</label>
					<img class="photo" v-if="imgSrc" :src="imgSrc" alt="">
					<yd-button id="photo"  @click.native="showImgs = true">上传图片</yd-button>
				</li>

				<li>
					<label for="name">昵称</label>
					<input @blur='sureinfor(102)' v-model="name" class="nodisabled" id="name"  type="text" placeholder="请输入昵称">
				</li>

				<li>
					<label for="qq">QQ号</label>
					<input @blur='sureinfor(100)' v-model="QQ" class="nodisabled" id="qq" type="text" placeholder="请输入QQ号">
				</li>

				<li>
					<label for="phone">手机号</label>
					<input @blur='sureinfor(1)' v-model="phone" class="nodisabled" id="phone" type="text" placeholder="请输入手机号">
				</li>

				<li>
					<label for="email">邮箱地址</label>
					<input @blur='sureinfor(10)' v-model="eMail" class="nodisabled" id="email" type="text" placeholder="请输入邮箱">
				</li>

			</ul>

		</div>

		<yd-tabbar slot="tabbar">
			<yd-button @click.native="onSubmit" size="large" type="primary">完善资料</yd-button>
		</yd-tabbar>

		<yd-popup v-model="showImgs" position="bottom" height="60%">
			<div class="closed">
				<yd-button @click.native="showImgs = false">关闭</yd-button>
			</div>

			<div class="imgBox">
				<ul>
					<li v-for="(item,index) in list" :key="index">
						<img @click="isImg(item,index)" :class="idx==index?'hover':''" :src="item.src" alt=""></li>
				</ul>
			</div>
		</yd-popup>
	</div>
</template>

<script>
	export default {
		name: "PersonInfo",
		data() {
			return {
				idx:0,
				name: '',
				photo:"",
				phone: '',
				eMail: '',
				QQ: "",
				imgSrc: '',
				showImgs:false,
				list: [
					{src:require("../../../assets/st-imges/1.jpg"),id:0},
					{src:require("../../../assets/st-imges/2.jpg"),id:1},
					{src:require("../../../assets/st-imges/3.jpg"),id:2}
				]
			}
		},
		mounted(){

		},

		methods: {
			// 上传图片
			isImg(item,index){
				this.imgSrc = item.src;
				this.imgSrcid = item.id;
				this.idx = index;
			},

			// 失去焦点时验证
			sureinfor(type) {
				if (type == 1) {
					if (!/^1[34578]\d{9}$/.test(this.phone)) {
						this.$dialog.alert({mes: '手机格式不正确！' });
						this.phone = '';
					}
				} else if (type == 10) {
					if (!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.eMail)) {
						this.$dialog.alert({mes: '邮箱格式不正确！' });
						this.eMail = '';
					}
				} else if (type == 100) {
					if (!(/^[0-9]+$/.test(this.QQ))) {
						this.$dialog.alert({mes: 'QQ格式不正确！' });
						this.QQ = '';
					}
				}else if (type == 102){
					if (this.name == '') {
						this.$dialog.alert({mes: '昵称不能为空！' });
						this.name = '';
					}
				}
			},

			onSubmit(){
				if (this.name == '') {
					this.$dialog.alert({mes: '请填写昵称'});
				} else if (this.phone == '') {
					this.$dialog.alert({mes: '请填写手机号!'});
				} else if(this.eMail == '') {
					this.$dialog.alert({mes: '请填写邮箱!'});
				}else if (this.imgSrc == ''){
					this.$dialog.alert({mes: '请上传头像!'});
				}else {
					this.$http.post(this.$ports.login.updateUserInfo, {
						token: localStorage.getItem('token'),
						email: this.eMail,
						phone: this.phone,
						img_id:this.imgSrcid,
						name: this.name
					}).then(res => {
						if(res.data.status == 1){
							console.log("ok")
							this.$dialog.alert({mes: '修改成功!'});
						}else {
							console.log(res)
						}
					})
				}

			}
		}

	}
</script>

<style scoped>

	.yd-btn-block {
		margin-top: 0.6rem;
	}

	.yd-navbar {
		background-image: linear-gradient(0deg, #565656 0%, #999999 100%);
	}

	.tips {
		text-align: center;
		color: #FF6600;
		height: 0.8rem;
		line-height: 0.8rem;
		background: rgba(255, 235, 196, 1);
	}

	.form {
		background: #E4E4E4;
		border-radius: 10px;
		padding: 0.3rem;
	}

	.form ul {
		padding: 0.3rem;
		background: #EFEFEF;
		border-radius: 10px;
	}

	.form ul li {
		height: 0.8rem;
		line-height: 0.8rem;
		margin-bottom: 0.2rem;
	}

	.form ul li label {
		width: 1.2rem;
		display: inline-block;
	}

	.form ul li input.disabled {
		width: 70%;
		height: 0.8rem;
		line-height: 0.8rem;
		border: none;
		outline: none;
		background: rgba(228, 228, 228, 1);
		border: 1px solid rgba(228, 228, 228, 1);
		padding-left: 0.2rem;
	}

	.form ul li input.nodisabled {
		width: 70%;
		height: 0.8rem;
		line-height: 0.8rem;
		border: none;
		outline: none;
		background: #fff;
		border: 1px solid rgba(228, 228, 228, 1);
		padding-left: 0.2rem;
	}

	.yd-tabbar {
		margin: 0 auto;
		width: 80%;
		background-color: transparent !important;
	}

	.yd-btn-block {
		margin-top: 0;
		border-radius: 10px;
		background: linear-gradient(0deg, rgba(90, 90, 90, 1) 0%, rgba(138, 138, 138, 1) 100%);
	}
	.yd-btn-block:hover {
		background: #0bb20c;
	}
	#photo {
		padding:0 10px;
		height:.8rem;
		border:.01rem solid #ddd;
		border-radius: .1rem;
		color:#fff;
		text-align: center;
		background:linear-gradient(0deg,rgba(90,90,90,1) 0%,rgba(138,138,138,1) 100%);
	}
	.files {
		height:.8rem;
		border:.01rem solid #ddd;
		border-radius: .1rem;
		color:#fff;
		text-align: center;
		background:linear-gradient(0deg,rgba(90,90,90,1) 0%,rgba(138,138,138,1) 100%);
	}
	.photo {
		width: 0.6rem;
		height: 0.6rem;
		border-radius: 50%;
		vertical-align: middle;
	}
	.listImg {
		width: 2rem;
	}
	.closed {
		padding-top: 10px;
		height: 20px;
		text-align: right;
	}
	.imgBox {
		margin-top: 0.5rem;
	}
	.imgBox ul {
		display: flex;
		flex-wrap: wrap-reverse;
		justify-content: flex-start;
	}
	.imgBox ul li img{
		width: 1rem;
		height: 1rem;
		margin: 0 0.2rem 0.2rem  0.2rem;
	}
	.imgBox ul li img.hover{
		border: 1px solid red;
	}
</style>