<template>
	<!-- 我的 -->
	<view class="my">
		<!-- 头背景 -->
		<view class="headerbgd">
			<!-- 头信息 -->
			<view class="headerMessage">
				<!-- 头像 -->
				<view class="headPortrait" @click="navLogin">
					<image class="Portrait" :src="require('@/static/rentouxiang.png')" mode=""></image>
					<p class="name" v-if="userName">
						{{userName}}
					</p>
					<p class="name" v-if="!userName">
						请登录
					</p>
				</view>
				<!-- 财产 -->
				<view class="property" v-if="userName">
					<view class="propertyNum">
						<span>我的幸运石</span>
						<view class="num">
							<image class="numImg" :src="require('@/static/Bitmap.png')" mode=""></image>
							<span>{{integration}}</span>
						</view>
					</view>
					<!-- 查看财产 -->
					<view class="examine" @click="navDespoti">
						查看明细
					</view>
				</view>
			</view>
		</view>

		<!-- 选项 -->
		<view class="option">
			<!-- 幸运石明细 -->
			<view class="detail" @click="navDespoti">
				<view class="left">
					<image class="iconImg" :src="require('@/static/xys.png')" mode=""></image>
					<span>幸运石明细</span>
				</view>
				<view class="right">
					<image class="iconImg" :src="require('@/static/jt.png')" mode=""></image>
				</view>
			</view>
			<!-- 提货订单 -->
			<view class="order">
				<view class="left">
					<image class="iconImg" :src="require('@/static/dd.png')" mode=""></image>
					<span>提货订单</span>
				</view>
				<view class="right">
					<image class="iconImg" :src="require('@/static/jt.png')" mode=""></image>
				</view>
			</view>
			<!-- 客服 -->
			<view class="service" @click="servicePhone">
				<view class="left">
					<image class="iconImg" :src="require('@/static/kf.png')" mode=""></image>
					<span>联系客服</span>
				</view>
				<view class="right">
					<image class="iconImg" :src="require('@/static/jt.png')" mode=""></image>
				</view>
			</view>
			<!-- 建议 -->
			<view class="suggest" v-if="false">
				<view class="left">
					<image class="iconImg" :src="require('@/static/ts.png')" mode=""></image>
					<span>投诉与建议</span>
				</view>
				<view class="right">
					<image class="iconImg" :src="require('@/static/jt.png')" mode=""></image>
				</view>
			</view>
			<!-- 设置 -->
			<view class="setting" @click="navSetting">
				<view class="left">
					<u-icon class="setImg" size='60' name="setting"></u-icon>
					<span>退出登录</span>
				</view>
				<view class="right">
					<image class="iconImg" :src="require('@/static/jt.png')" mode=""></image>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<u-modal @confirm="confirm" v-model="show" :content="content" :show-cancel-button="true"></u-modal>
		
		<u-modal  v-model="showPhone" :content="contentPhone" ></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userName: "",
				integration: "",
				
				// 退出登录
				show: false,
				content: '不再多看看吗',
				
				// 客服电话
				showPhone: false,
				contentPhone: '19124351491',
			};
		},
		methods: {

			// 跳转登录页
			navLogin() {
				// 判断登录了没

				this.$Router.push({
					name: "login",

				})
			},
			//跳转财产页
			navDespoti() {

				this.$Router.push('/pages/my/deposit/deposit')


				// 判断登录没
				// if (this.$store.state.code.isToken == "") {
				// 	this.$refs.uToast.show({
				// 		title: '请先登录',
				// 		type: 'error'
				// 	})
				// 	setTimeout(()=>{
				// 		this.$Router.push('/pages/my/login/login')
				// 		// this.$Router.push('/pages/my/deposit/deposit')
				// 	},500)

				// } else {
				// 	this.$Router.push('/pages/my/deposit/deposit')
				// }
			},

			// 退出登录
			navSetting() {
				// this.$Router.push('/pages/my/setting/setting')
				
				if(uni.getStorageSync("isToken")){
					this.show = true;
				}else{
					this.$refs.uToast.show({
						title: '请登录',
						type: 'errorC'
					})
				}
				
			},
			confirm(){
				this.$store.dispatch("quit")
				this.userName=""
				this.$refs.uToast.show({
					title: '退出成功',
					type: 'success'
				})
			},
			
			//客服电话
				
			servicePhone(){
				uni.makePhoneCall({
					phoneNumber: '400-600-0603'
				});
			}
		},
		computed: {
			// 用户名
			// userName(){
			// 	return uni.getStorageSync("username")
			// },
			// // 幸运石
			// integration(){
			// 	return uni.getStorageSync("integration")
			// }

		},
		onShow() {
			uni.getStorage({
				key: 'username',
				success: res => {
					console.log(res);
					this.userName = res.data

				},
				fail: err => {
					this.userName = ""
				}
			});
			uni.getStorage({
				key: 'integration',
				success: res => {
					console.log(res);
					this.integration = res.data
				},
				fail: err => {
					this.integration = ""
				}
			});
			//更新
			this.$store.dispatch("gainInfo", uni.getStorageSync("isToken"))
		},
	}
</script>

<style lang="scss" scoped>
	.my {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 750rpx;

		// 头背景
		.headerbgd {
			width: 750rpx;
			height: 470rpx;
			// background-image: url("~@/static/luckyLogo.png");
			// background-repeat:no-repeat;
			// background-size: contain;
			background: url("@/static/mybanner.png") 0 0 /100% no-repeat;
			border-radius: 0 0 20rpx 20rpx;
			display: flex;
			justify-content: center;

			// 头信息
			.headerMessage {
				width: 710rpx;
				height: 365rpx;
				background-color: white;
				position: absolute;
				top: 160rpx;
				border-radius: 15rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				// 头像
				.headPortrait {
					width: 620rpx;
					height: 150rpx;
					display: flex;
					align-items: center;

					.Portrait {
						width: 150rpx;
						height: 150rpx;
						border-radius: 50%;
						margin-right: 25rpx;
						background-color: gray;
					}

					.name {
						font-size: 17px;
					}
				}

				// 财产
				.property {
					width: 620rpx;
					height: 120rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					// 幸运石数量
					.propertyNum {
						padding-top: 22rpx;
						
						span {
							font-size: 15px;
						}

						.num {
							display: flex;
							align-items: center;
							width: 200rpx;
							height: 70rpx;
							line-height: 70rpx;
							span {
								font-size: 26px;
							}

							.numImg {
								width: 30rpx;
								height: 65rpx;
								margin-right: 17rpx;
							}
						}
					}

					// 财产明细
					.examine {
						width: 200rpx;
						height: 80rpx;
						border: 1px solid #DCDCDC;
						border-radius: 15rpx;
						line-height: 80rpx;
						text-align: center;
						font-size: 14px;
					}
				}

			}
		}


		%option {
			width: 620rpx;
			height: 140rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;
				font-size: 17px;
				font-weight: 600;

				// 图标
				.iconImg {
					width: 48rpx;
					height: 48rpx;
					margin-right: 20rpx;
				}
			}

			.right {

				// 图标
				.iconImg {
					width: 15rpx;
					height: 25rpx;
				}
			}
		}

		// 选项
		.option {
			margin-top: 70rpx;
			width: 710rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			// 幸运石明细
			.detail {
				@extend %option;
			}

			// 提货订单
			.order {
				@extend %option;
			}

			// 客服
			.service {
				@extend %option;
			}

			// 投诉与建议
			.suggest {
				@extend %option;
				transform-origin: center;

			}

			//设置
			.setting {
				@extend %option;
				transform-origin: center;

				.setImg {

					margin-right: 20rpx;
				}
			}

		}
	}
</style>