<template>
	<!--直客修改用户基础信息-->
	<view class="login-page">
		<view class="logo-head">
			<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1695262844000_280.png" mode="widthFix"></image>
			<view class="logo-text">旅小友</view>
		</view>
		<view class="login-form">
			<view class="login-title">基础资料</view>
			<view class="login-item">
				<input type="text" v-model="msg.Name" placeholder="请输入姓名" :class="{'focus':currentFocus=='Name'}" @blur="changeCurrentFocus('')"
				 @focus="changeCurrentFocus('Name')">
			</view>
			<view class="login-item">
				<input type="text" v-model="msg.Moblie" placeholder="请输入手机号码" :class="{'focus':currentFocus=='Moblie'}" @blur="changeCurrentFocus('')"
				 @focus="changeCurrentFocus('Moblie')">
			</view>
			<view class="login-item">
				<view @click="updateDirectUserInfo" class="login-btn" :class="{'disable':msg.Name==''||msg.Moblie==''}">修改</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				msg: {
					Name: '',
					Moblie: '',
					OpenId: ''
				},
				currentFocus: '',
				loginLoading: false
			}
		},
		mounted() {
			var b2b_user = uni.getStorageSync('b2b_user');
			if (b2b_user) {
				if (b2b_user.name) {
					this.msg.Name = b2b_user.name;
				}
				if (b2b_user.contactNumber) {
					console.log("22");
					this.msg.Moblie = b2b_user.contactNumber;
				}
			}
		},
		methods: {
			changeCurrentFocus(val) {
				this.currentFocus = val
			},
			updateDirectUserInfo() {
				this.loginLoading = true
				uni.showLoading({
					title: '修改中...'
				})
				let param = JSON.parse(JSON.stringify(this.msg))
				this.apipost("LvXiaoYouUpdateUserInfo_post", param, (res) => {
					uni.hideLoading();
					uni.showToast({
						title: res.message,
						icon: "none",
					});
					if (res.resultCode == 1) {
						//更新用户缓存信息
						var b2b_user_info = uni.getStorageSync('b2b_user');
						b2b_user_info.name = param.Name;
						b2b_user_info.contactNumber = param.Moblie
						uni.setStorageSync('b2b_user', b2b_user_info);
						uni.redirectTo({
							url: '/pages/user-center/userVip-center'
						})
					} else {
						this.loginLoading = false;
						uni.hideLoading();
					}
				}, (failed) => {
					this.loginLoading = false;
					uni.showToast({
						title: failed.message,
						icon: "none",
					});
				}, (error) => {
					this.loginLoading = false;;
					uni.hideLoading();
				})
			},
		}
	}
</script>

<style>
	/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
	.login-page {
		padding: 20px;
	}

	.login-page .logo-head {
		margin-top: 20px;
		display: flex;
		align-items: center;
	}

	.login-page .logo-head image {
		width: 50px;
		height: 50px;
		margin-right: 10px;
	}

	.login-page .logo-head .logo-text {
		font-size: 32px;
		font-family: logo-font;
		font-weight: 700;
	}

	.login-page .login-form {
		margin-top: 50px;
		padding: 20px;
	}

	.login-page .login-form .login-title {
		font-size: 20px;
		font-weight: 700;
		font-family: logo-font;
		margin-bottom: 30px;
	}

	.login-page .login-form .login-item {
		margin-top: 30px;
	}

	.login-page .login-form .login-item input {
		background-color: rgba(0, 0, 0, .05);
		padding: 0 12px;
		height: 46px;
		line-height: 46px;
		border-radius: 8px;
		color: #1d1d1d;
		font-family: nav-font;
	}

	.login-page .login-form .login-item input.focus {
		background: #1d1d1d;
		color: #FFF;
	}

	.login-page .login-form .login-btn {
		height: 80rpx;
		background-color: #111111;
		text-align: center;
		line-height: 80rpx;
		color: #fff;
		/* font-weight: 600; */
		font-size: 28rpx;
		border-radius: 16rpx;
		font-family: logo-font;
		font-size: 16px;
	}

	.login-page .login-form .login-btn.disable {
		/* background-color: #ecf1f4;
	  color: #111; */
		opacity: 0.5;
	}

	.login-page .login-form .wechat-login {
		background-color: none;
		height: 40px;
		width: 40px;
		/* border-radius: 40px; */
		overflow: hidden;
		/* box-shadow: 0px 0px 20px 0px rgba(76,87,125,0.2)!important; */
		padding: 0;
	}

	.login-page .login-form .wechat-login image {
		width: 38px;
		height: 38px;
		margin: 1px;
	}

	.login-page .login-form .wechat-login::after {
		border: none !important;
		height: auto !important;
	}
</style>
