<template>
	<view style="padding: 0 40rpx;font-size: 28upx;">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view style="height: 50rpx;"></view>
		<view class="per_mes">
			<image :src="userMes.avatar" v-if="userMes.avatar!=null" class="per_mes_img"></image>
			<image src="../../static/icon/home_icon_1.png" v-if="userMes.avatar==null" class="per_mes_img"></image>
			<view>
				<text class="name" v-if="userMes.nickname!=null">{{userMes.nickname}}</text>
				<text class="name" v-if="userMes.nickname==null">未设置</text>
				<image v-if="userMes.vip==1" src="../../static/icon/mine_v.png" alt="" class="per_user_img"></image>
				<text style="margin-left: 20rpx;font-size: 22rpx;color: #888;">({{userMes.tel}})</text>

				<!-- <text class="tong">累计读书5本
					<span style="margin: 0 20upx;">|</span> 今日读50分钟
				</text> -->
			</view>
			<br clear="both">
		</view>
		<!-- <view class="now_vip" v-if="userMes.vip==0">
			<text>
				<image src="../../static/icon/mine_p.png" style="height: 44rpx;"></image>
				开通会员畅享海量内容
			</text>
			<b class="kt_btn" @click="onPageJump('./opeVip')">开通VIP</b>
		</view> -->

		<!-- <view class="now_vip" v-if="userMes.vip==1">
			<text>
				<image src="../../static/icon/mine_v.png"></image>
				尊贵的VIP会员
				<font style="font-size: 14rpx;margin-left: 20rpx;">{{userMes.vipValidtime}}到期</font>
			</text>
			<b class="kt_btn" @click="onPageJump('./opeVip')">立即续费</b>
		</view> -->

		<view class="chong_zhi">
			<view class="zhanghu" @click="onPageJump('../user/persCount')">
				我的账户
				<text style="float: right;line-height: 85rpx;"> > </text>
			</view>
			<view class="chong_list">
				<view>
					<b>{{userMes.peanutCoin}}</b>
					天医币
				</view>
				<view>
					<b>{{userMes.conponsCount}}</b>
					优惠券
				</view>
				<!-- <b class="chong_btn" @click="onPageJump('../sdkDemo/pay')">充 值</b> -->
				<b class="chong_btn" @click="onPageJump('./reCharge')">充 值</b>
			</view>
		</view>

		<view class="xiugai">
			<view class="nav_list" @click="switchTab('../bookShop/orderList')">
				<text>我的订单</text>
			</view>			
			<view class="nav_list" @click="onPageJump('../clock/clockList')">
				<text>我的打卡</text>
			</view>
			<view class="nav_list" @click="onPageJump('../listen/home')">
				<text>我的听书</text>
			</view>
			<view class="nav_list" @click="onPageJump('../listen/setListen')">
				<text>听书设置</text>
			</view>
			<view class="nav_list" @click="onPageJump('../peanut/myComments')">
				<text>我的评价</text>
			</view>
			<view class="nav_list" @click="onPageJump('../peanut/shopping')">
				<text>购物车</text>
			</view>
			<!-- <view v-if="showEbook" class="nav_list" @click="onPageJump('../eBook/bookBuy')">
				<text>电子书购买记录</text>
			</view> -->
			<!-- <view v-if="showEbook" class="nav_list" @click="onPageJump('../eBook/bookRecord')">
				<text>阅读记录</text>
			</view> -->
			<view class="nav_list" @click="onPageJump('../user/persData')">
				<text>修改个人资料</text>
			</view>
			<view class="nav_list" @click="onPageJump('../user/address')">
				<text>地址管理</text>
			</view>
			
			<!-- <view class="nav_list" @click="onGoing()">
				<text>帮助与反馈11111</text>
			</view> -->			
			<view class="nav_list" @click="onShare">
				<text>分享App</text>
			</view>
			<view class="nav_list" @click="onPageJump('../peanut/aboutUs')">
				<text>关于我们</text>
			</view>
			<view class="nav_list" @click="signShow=true">
				<text>退出登录</text>
			</view>
			<view class="nav_list" @click="logout">
				<text>注销帐号</text>
			</view>
			
		</view>

		<u-modal :show="signShow" :content="signContent" :showCancelButton="true" @cancel="signShow=false"
			@confirm="signOut">
		</u-modal>
		<music-play :playData="playData"></music-play>
		<z-navigation></z-navigation>
	</view>
</template>

<script>
	import musicPlay from '@/components/music.vue'
	import $http from '@/config/requestConfig.js';
	import appShare, { closeShare } from '@/uni_modules/zhouWei-APPshare/js_sdk/appShare';
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				showEbook:false,    // 显示电子书相关
				userMes: {},
				signShow: false,
				signContent: '是否要退出登录？',
				playData:{}
			};
		},
		//第一次加载
		onLoad(e) {
			// 隐藏原生的tabbar
			uni.hideTabBar();
		},
		computed: {
			...mapState(['userInfo'])
		},
		//页面显示
		onShow() {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			this.getData();
		},
		components: {			
			musicPlay
		},
		//方法
		methods: {
			switchTab(url){
				uni.switchTab({
					url: url
				});
			},
			getData() {
				// 获取个人信息
				if (this.userInfo.id != undefined) {
					this.$http
						.post('book/user/info/' + this.userInfo.id)
						.then(res => {
							this.userMes = res.user
							if (this.userMes.vip == 1) {
								this.userMes.vipValidtime = this.userMes.vipValidtime.substring(0, this.userMes
									.vipValidtime
									.indexOf(' '))
							}
						});
				}

			},
			
			
			//分享app
			onShare(){
				let shareData = {
					 shareUrl:"https://www.nuttyreading.com/nuttyreading.apk",
					shareTitle:"疯子读书",
					type:'0',
					shareContent:"疯子读书,请使用浏览器打开本链接，自动下载安装包",
					shareImg:"static/fengziIcon.jpg",
					appId : "wx47134a8f15083734", // 默认不传type的时候，必须传appId和appPath才会显示小程序图标
					appPath : "https://www.nuttyreading.com/nuttyreading.apk",
					appWebUrl : "https://www.nuttyreading.com/nuttyreading.apk",
				};
				// 调用
				let shareObj = appShare(shareData,res => {
					console.log("疯子读书",res);
					// 分享成功后关闭弹窗
					// 第一种关闭弹窗的方式					
					closeShare();
				});
				setTimeout(() => {
					// 第二种关闭弹窗的方式
					shareObj.close();
				},5000);
			},
			
			// 注销账户
			logout(){
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定要注销当前账户吗？',
					success: function (res) {
						if (res.confirm) {
							uni.showModal({
								title: '提示',
								showCancel:false,
								content: `注销申请已提交成功,请联系客服进行后续操作：022-24142321`,
								success: function (res1) {
									if (res1.confirm) {
										that.signOut()
									}
								}
							});
						} else if (res.cancel) {
							// 取消操作
						}
					}
				});
			},
			// 跳转
			onGoing() {
				uni.showToast({
					icon: 'none',
					title: '开发中，敬请期待...'
				})
			},
			onPageJump(url) {
				console.log(url,'url')
				uni.navigateTo({
					url: url
				});
			},


			// 退出登录
			signOut() {
				this.signShow = false
				uni.reLaunch({
					url: '../user/login'
				});
			},
		},

	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.per_mes {
		margin: 50rpx 0 50rpx 0;
		align-items: center;

		.per_mes_img {
			width: 120upx;
			height: 120upx;
			background-color: #fff;
			border-radius: 120upx;
			margin: 0 30upx 0 0;
			float: left;
		}

		view {
			float: left;
			margin-top: 20rpx;

			.name {
				display: inline-block;
				font-weight: bold;
				font-size: 38upx;
				margin-bottom: 10rpx;
			}

			.tong {
				color: #999;
				font-size: 25upx;
			}

			.per_user_img {
				display: inline-block;
				width: 40upx;
				height: 40upx;
				margin-left: 10rpx;
				vertical-align: super;
			}
		}


	}

	.now_vip {
		background-color: #fff;
		// border-radius: 20upx;
		margin: 0 0 30upx 0;
		padding: 0 30upx;
		height: 120upx;
		background-image: linear-gradient(90deg, #feeed6 0%, #f5ce99 100%);

		image {
			width: 46rpx;
			height: 50rpx;
			display: inline-block;
			vertical-align: text-bottom;
			margin: 0 10rpx 0 0;
		}

		text {
			font-size: 30upx;
			line-height: 120upx;
			color: #977749;
			font-weight: bold;
		}

		.kt_btn {
			font-size: 26upx;
			display: block;
			float: right;
			border-radius: 50rpx;
			color: #fffbf6;
			padding: 12rpx 26rpx;
			margin: 33rpx 0 0 0;
			background-image: linear-gradient(90deg, #dfa964 0%, #7f5218 100%);
		}
	}

	.chong_zhi {
		background-color: #fff;
		margin: 0 0 30upx 0;
		padding: 0 30upx;
		height: 240upx;

		.zhanghu {
			font-size: 32upx;
			line-height: 100upx;
			font-weight: bold;
		}

		.chong_list {
			view {
				width: 25%;
				text-align: center;
				display: inline-block;
				color: #a3a1a1;

				b {
					font-size: 45rpx;
					display: block;
					margin: 0 0 10rpx 0;
					color: #76757b;
				}
			}

			.chong_btn {
				font-size: 26upx;
				display: block;
				float: right;
				border-radius: 50rpx;
				color: #fffbf6;
				padding: 12rpx 42rpx;
				margin: 20rpx 0 0 0;
				background: #815219;
			}
		}
	}

	.xiugai {

		.nav_list {
			background-color: #fff;
			padding: 30upx 0 30upx 20upx;
			display: flex;
			align-items: center;
			position: relative;
			font-weight: bold;
			border-bottom: 1px solid #e5e5e5;

			&:active {
				background-color: #f5f5f5;
			}

			text {
				color: #333;
				margin-left: 10rpx;
			}

			&::after {
				content: '';
				position: absolute;
				right: 20upx;
				top: 50%;
				transform: translateY(-50%);
				width: 40upx;
				height: 40upx;
				background-image: url('../../static/icon/icon_right.png');
				background-position: center center;
				background-repeat: no-repeat;
				background-size: cover;
			}
		}

		.nav_list:nth-last-child(1) {
			border-bottom: 0;
		}
	}
</style>
