<template>
	<view class="container">

		<view class="header">
			<image src="../../static/images/my_bg.png" mode="widthFix" class="bg-img"></image>
			<navigator hover-class="none" url="../personal/personal" class="info flex-row">
				<view class="avatar_content">
					<image :src="info.logo?URL+info.logo:'../../static/images/avatar.png'" mode="aspectFill"
						class="avatar"></image>
					<image v-if="info.time_out!=1" class="avatar_content_vip" src="../../static/images/vip.png" mode="">
					</image>
				</view>
				<view class="man">
					<view class="nick-name">{{info.nick_name}}</view>
					<view class="time">有效期：{{info.is_live==1?info.live_time:'账号未激活'}}</view>
					<view class="time">收款码{{$test.$test}}剩余次数：{{info.youbi}}</view>
				</view>
			</navigator>
		</view>

		<view class="main">
			<view class="block-title">我的应用</view>
			<view class="menu-list">
				<navigator url="../createRecords/createRecords" class="item">
					<i class="iconfont iconshengchengjilu" style="color:#439dfb"></i>
					<view class="name">{{$test.$test}}记录</view>
				</navigator>

				<navigator url="../information/information" class="item" v-if="info.is_live==1">
					<i class="iconfont iconjihuozhanghao" style="color:#439dfb"></i>
					<view class="name">代理信息</view>
				</navigator>

				<navigator url="../jihuo/jihuo" class="item" v-else>
					<i class="iconfont iconjihuozhanghao" style="color:#439dfb"></i>
					<view class="name">激活账号</view>
				</navigator>

				<navigator url="../text/text?title=隐私协议" class="item">
					<i class="iconfont iconyinsixieyi" style="color:#439dfb"></i>
					<view class="name">隐私协议</view>
				</navigator>


				<navigator url="../text/text?title=关于我们" class="item">
					<i class="iconfont iconguanyuwomen" style="color:#439dfb"></i>
					<view class="name">关于我们</view>
				</navigator>

				<view @click="Call" class="item">
					<i class="iconfont iconlianxikefu" style="color:#439dfb"></i>
					<view class="name">联系客服</view>
				</view>

				<navigator url="../replace/record" class="item">
					<i class="iconfont icontihuanjilu" style="color:#439dfb"></i>
					<view class="name">智能替换记录</view>
				</navigator>

				<!-- #ifdef H5 -->
				<navigator :url="'../personal/weixin?openid='+info.openid_gzh" class="item">
					<i class="iconfont iconzhanghaobangding" style="color:#439dfb"></i>
					<view class="name">账号绑定</view>
				</navigator>
				<!-- #endif -->

				<!--  #ifdef MP-WEIXIN -->
				<navigator :url="'../personal/weixin?openid='+info.openid" class="item">
					<i class="iconfont iconzhanghaobangding" style="color:#439dfb"></i>
					<view class="name">账号绑定</view>
				</navigator>
				<!-- #endif -->

				<navigator v-if="info.is_recharge==1&&info.is_live==1" url="../recharge/recharge" class="item">
					<i class="iconfont iconzixunxuanzhong" style="color:#439dfb"></i>
					<view class="name">充值中心</view>
				</navigator>


				<navigator v-if="info.is_recharge==1&&info.is_live==1" url="../recharge/recharge_log" class="item">
					<i class="iconfont iconshengchengjilu" style="color:#439dfb"></i>
					<view class="name">充值记录</view>
				</navigator>
				
				<navigator :url="'../personal/password?tel='+info.tel" class="item">
					<i class="iconfont iconxiugaimima" style="color:#439dfb"></i>
					<view class="name">修改密码</view>
				</navigator>

				<navigator v-if="info.is_xcx==1" url="../personal/xcx" class="item">
					<i class="iconfont iconxiaochengxu" style="color:#439dfb"></i>
					<view class="name">小程序设置</view>
				</navigator>

				<!-- v-if="info.is_exchange==0" -->
				<navigator url="../union/index" class="item">
					<i class="iconfont iconhuanlianglianmeng" style="color:#439dfb"></i>
					<view class="name">换量联盟</view>
				</navigator>

				<navigator url="../union/flow" class="item">
					<i class="iconfont iconliuliangzhu" style="color:#439dfb"></i>
					<view class="name">流量主</view>
				</navigator>

				<navigator url="../public/index?is_check=2" class="item">
					<i class="iconfont iconhexiaojilu" style="color:#439dfb"></i>
					<view class="name">流量池列表</view>
				</navigator>

				<navigator url="../union/form" class="item">
					<i class="iconfont iconfunengchenggongcishutongji" style="color:#439dfb"></i>
					<view class="name">数据统计</view>
				</navigator>

	<!-- 			<navigator url="../home/shortVideo" class="item">
					<i class="iconfont iconshanghuguanli" style="color:#439dfb"></i>
					<view class="name">视频交流区</view>
				</navigator> -->

				<navigator :url="`../../merchant/merchant?admin_id=${info.admin_id}`" class="item">
					<i class="iconfont iconshipinjiaoliuqu" style="color:#439dfb"></i>
					<view class="name">商户管理</view>
				</navigator>


			</view>

		</view>
		<view class="btm-btn" @click="loginOut">退出登录</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				$test: this.$test.$test,
				tel: "",
				info: {
					nick_name: "",
					live_time: "",
					is_xcx: 0,
				},
				URL: getApp().globalData.URL,
			}
		},
		onShareAppMessage(e) {

		},
		onShow(e) {
			this.servers();
			this.request({
				url: "Spread/index",
				data: {
					token: uni.getStorageSync("token"),
				},
				showLoading: true,
			}).then(res => {
				console.log(res, "res")
				if (res.code === '200') {
					this.info = res.data;
					uni.setStorage({
						key: 'my_uerInfo',
						data: res.data,
						success: function() {
							console.log('success');
						}
					});

				}
			}).catch((res) => {});
		},
		onShareAppMessage(e) {

		},

		methods: {
			servers() {
				//请求验证码
				this.request({
					url: "user/servers",
					data: {},
					showLoading: true,
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						this.tel = res.data.tel;
					}
				}).catch((res) => {});
			},

			Call(e) {
				uni.makePhoneCall({
					phoneNumber: this.tel, //仅为示例
				});
			},

			loginOut() {
				uni.removeStorageSync("token")
				uni.removeStorage({
					key: 'login',
					success: (res) => {
						uni.reLaunch({
							url: "../login/login"
						})
					}
				})
			},

		},
	}
</script>

<style>
	.header {
		position: relative;
		height: 438rpx;
		overflow: hidden;
	}

	.avatar_content {
		position: relative;
	}

	.avatar_content_vip {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		bottom: 0;
		right: 22rpx;
	}

	.header .bg-img {
		display: block;
		width: 100%;
		position: absolute;
		z-index: -1;
	}

	.header .info {
		padding: 146rpx 48rpx 0;
	}

	.header .info .avatar {
		display: block;
		width: 113rpx;
		min-width: 113rpx;
		height: 113rpx;
		border-radius: 50%;
		margin-right: 30rpx;
		box-sizing: border-box;
		border: 3rpx solid #fff;
	}

	.header .info .man .nick-name {
		font-size: 40rpx;
		font-weight: 500;
		color: #ffffff;
		line-height: 56rpx;
	}

	.header .info .man .time {
		font-size: 28rpx;
		font-weight: 400;
		color: #ffffff;
		line-height: 40rpx;
		margin-top: 10rpx;
	}

	.main {
		border-radius: 20rpx 20rpx 0 0;
		margin-top: -20rpx;
		background-color: #fff;

	}

	.main .block-title {
		height: 98rpx;
		line-height: 98rpx;
		font-size: 38rpx;
		font-weight: 500;
		color: #2c2c2c;
		border-bottom: 2rpx solid #f5f5f5;
		margin: 0 40rpx;
	}

	.main .menu-list {
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
	}

	.main .menu-list .item {
		flex: none;
		display: block;
		width: 25%;
		height: 154rpx;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
	}

	.main .menu-list .item .iconfont {
		font-size: 46rpx;
	}

	.main .menu-list .item .name {
		font-size: 24rpx;
		color: #2c2c2c;
		line-height: 33rpx;
		margin-top: 16rpx;
		text-align: center;
	}

	.btm-btn {
		width: 670rpx;
		height: 98rpx;
		background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
		border-radius: 8rpx;
		box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
		font-size: 32rpx;
		font-weight: 500;
		text-align: center;
		color: #fff;
		line-height: 98rpx;
		margin: 0 auto;
		margin-top: 100rpx;
		margin-bottom: 30rpx;
	}
</style>
