<template>
	<view class="main">
		<view class="main_content">
			<TopBar title="账号设置"/>
			<view class="account_base_info flex">
				<view class="flex flex_center">
					<image class="portrait" :src="data.portrait || $defaultPortrait" @click="uploadImage()"></image>
					<view class="flex flex_center base_info">
						<text class="customer_name">{{data.customer_name}}</text>
						<text class="custommer_integral">总积分:{{data.total_integral}}</text>
					</view>
				</view>
			</view>
			<view class="flex set_item" @click="changeAddress()">
				<text class="set_title">收货地址管理</text>
				<text class="eosfont right_icon">&#xe608;</text>
			</view>
			<view class="flex set_item" @click="changePass('phone')">
				<text class="set_title">更换绑定手机号</text>
				<view class="flex" style="align-items: center;">
					<text class="phone_num">{{data.phone_mob.replace(/(\d{3})\d*(\d{4})/,"$1****$2")}}</text>
					<text class="eosfont right_icon">&#xe608;</text>
				</view>
			</view>
			<view class="flex set_item" @click="changePass('pay')">
				<text class="set_title">修改支付密码</text>
				<text class="eosfont right_icon">&#xe608;</text>
			</view>
			<view class="flex set_item" @click="changePass('login')">
				<text class="set_title">修改登录密码</text>
				<text class="eosfont right_icon">&#xe608;</text>
			</view>
		</view>
		<view class="log_out" @click="logOut()">退出登录</view>
		<BottomBar />
	</view>
</template>

<script>
	import TopBar from '../../components/TopBar/TopBar';
	import BottomBar from "@/components/BottomBar/BottomBar.vue";
	import { php } from '../../common/host.js';
	export default {
		data() {
			return {
				data: {
					portrait: '',
					customer_name: '',
					total_integral: '',
					phone_mob: ''
				}
			}
		},
		onLoad() {
			uni.request({
				url: '/uni/api/member/profile',
				method: 'GET',
				dataType: 'json',
				success: (res) => {
					if(res.data.code === 0) {
						this.data = res.data.data
					} else {
						this.$jump('/pages/home/home', 2);
					}
				}
			})
		},
		methods: {
			changeAddress() {
				this.$jump(`${php}app=my_address`);
			},
			changePass(type) {
				this.$jump(`/pages/setinfo/setinfo?type=${type}&phone=${this.data.phone_mob}`, 2)
			},
			uploadImage() {
				uni.chooseImage({
					sizeType: ['compress'],
					count:1,
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						uni.showLoading({
							title: '上传中'
						})
						uni.uploadFile({
							url: '/uni/api/resources',
							filePath: tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								const data = JSON.parse(uploadFileRes.data)
								uni.request({
									url: '/uni/api/member/change_portrait',
									method: 'POST',
									data: {
										portrait: data.data
									},
									dataType: 'json',
									success: (result) => {
										if(result.data.code === 0) {
											uni.hideLoading();
											uni.showToast({
												title: '头像修改成功',
												icon: 'none'
											});
											this.data.portrait = data.data;
										}
									}
								})
							}
						});
					}
				})
			},
			logOut() {
				this.$jump(`${php}app=member&act=logout&synlogout=1`);
			}
		},
		components: {
			TopBar,
			BottomBar
		}
	}
</script>

<style lang="less" scoped>
	.main {
		padding-top: 80rpx;
		height: 1334rpx;
		box-sizing: border-box;
		background: #f5f5f5;
	}
	.flex {
		display: flex;
	}
	.flex_center {
		justify-content: center;
	}
	.right_icon {
		font-size: 24rpx;
		color: #7C7C7C;
	}
	.main_content {
		background-color: #fff;
		.account_base_info {
			height: 160rpx;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1Px solid #ECECEC;
			padding: 0 24rpx;
			.base_info {
				flex-direction: column;
			}
			.portrait {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			.customer_name {
				color: #16171C;
				font-size: 28rpx;
				line-height: 40rpx;
			}
			.custommer_integral {
				color: #7C7C7C;
				font-size: 22rpx;
				line-height: 32rpx;
			}
		}
		.set_item {
			height: 92rpx;
			justify-content: space-between;
			align-items: center;
			padding: 0 24rpx;
			border-bottom: 1Px solid #d5d5d5;
			.set_title {
				font-size: 28rpx;
				color: #212121;
				line-height: 40rpx;
			}
			.phone_num {
				color: #7C7C7C;
				font-size: 26rpx;
				line-height: 36rpx;
				margin-right: 16rpx;
			}
		}
		.set_item:last-child {
			border-bottom: none;
		}
	}
	.log_out {
		height: 92rpx;
		width: 100%;
		line-height: 92rpx;
		background-color: #fff;
		text-align: center;
		color: #212121;
		font-size: 28rpx;
		position: fixed;
		bottom: 98rpx;
		left: 0;
	}
</style>
