<template>
	<view>
		<!-- #ifdef H5 -->
		<view  class="status"></view>
		<!-- #endif -->
		<view class="user">
			<!-- 头像 -->
			<view class="left">
				<image :src="imagewxUrl+imgadres" v-if="!user.headerImg"></image>
				<image :src="user.headerImg" v-else></image>
			</view>
			<!-- 昵称 -->
			<view class="right">
				<view class="username">{{user.name}}</view>
				<view class="font14 fcor333">{{userphone}}</view>
			</view>
		</view>
		<!-- 优惠券，卡券 -->
		<view class="headcoun width100">
			<view class="height80 alijus width92 border-8r backcorfff">
				<view class="width45 fotct" @click="jumppage(5)">
					<view class="width100 font12 fcor333"><text class="font20 marglerig">{{textnum}} </text> 张</view>
					<view class="width100 font18 fcor333 mart5">卡券</view>
				</view>
				<view style="width: 1px;height: 50px;background-color: #f6f6f6;">
				</view>
				<view class="width45 fotct" @click="jumppage(6)">
					<view class="width100 font12 fcor333"><text class="font20 marglerig">{{textSend}} </text> 张</view>
					<view class="width100 font18 fcor333 mart5">优惠券</view>
				</view>
			</view>
		</view>

		<!-- 订单-余额 -->
		<view class="order">
			<!-- 订单类型 -->
			<view class="title width94">
				<view class="width70 fontwig6">订单</view>
				<view class="width30 alijusend font14 fcor999" @click="toOrderList(-1)">全部订单<image class="icon15"
						mode="widthFix" src="../../../static/img/jt.png">
					</image>
				</view>
			</view>
			<view class="list">
				<view class="box" v-for="(row,index) in orderList" :key="index" @tap="toOrderList(index)">
					<uni-badge style="width: 20px;position: absolute; left: 18%;" v-if="row.text == '待支付' && therrNum "
						:text="therrNum" type="error" size="normal"></uni-badge>
					<uni-badge style="width: 20px;position: absolute; left: 42%;"
						v-if="row.text == '已支付' && orderPayNum " :text="orderPayNum" type="error" size="normal">
					</uni-badge>
					<view class="img">
						<image :src="row.icon" class="icon40" mode="widthFix"></image>
					</view>
					<view class="text mart10">{{row.text}}</view>
				</view>
			</view>
			<view class="width90 mart10 height60">
				<swiper circular="true" interval="3000" autoplay="true">
					<swiper-item v-for="(swiper,index) in nopaylist" :key="index">
						<view class="alijusstart  border-8r backcor9 height60 ">
							<image mode="widthFix" class="icon40 margle10" src="../../../static/img/user/user5.png">
							</image>
							<view class="width50  margle10">
								<view class="font15 fcor333 fontspec">等待付款</view>
								<view class="font12 fcor666 fontspec mart5">剩余时间: 13:44</view>
							</view>
							<view class="topay">
								去支付
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<!-- 我的资产 -->
		<view class="order">
			<view class="title width94">
				<view class="width70 fontwig6 alijusstart">我的资产
					<image mode="widthFix" class="icon30" v-if="assetsstu == 2" @click="updatestu(2)"
						src="../../../static/img/user/user6.png"></image>
					<image mode="widthFix" class="icon20 margle" v-if="assetsstu == 1" @click="updatestu(1)"
						src="../../../static/img/user/user14.png"></image>
				</view>
				<view class="width30 alijusend font14 fcor999" @click="jumppage(4)">进入卡包<image class="icon15"
						mode="widthFix" src="../../../static/img/jt.png">
					</image>
				</view>
			</view>
			<view class="mart15 width90 alijus fotct paddbotm10">
				<view class="width31">
					<view class="fontspec font20 fcor333 fontwig6" v-if="assetsstu == 2">****</view>
					<view class="fontspec font20 fcor333 fontwig6" v-if="assetsstu == 1">¥2400</view>
					<view class="fontspec font14 fcor333 mart5">积分余额</view>
				</view>
				<view class="width31">
					<view class="fontspec font20 fcor333 fontwig6" v-if="assetsstu == 2">****</view>
					<view class="fontspec font20 fcor333 fontwig6" v-if="assetsstu == 1">¥2400</view>
					<view class="fontspec font14 fcor333 mart5">油卡余额</view>
				</view>
				<view class="width31">
					<view class="fontspec font20 fcor333 fontwig6" v-if="assetsstu == 2">****</view>
					<view class="fontspec font20 fcor333 fontwig6" v-if="assetsstu == 1">¥2400</view>
					<view class="fontspec font14 fcor333 mart5">工会卡余额</view>
				</view>
			</view>
		</view>

		<!-- 商务中心 -->
		<view class="order">
			<view class="title width94">
				<view class="width70 fontwig6">商务中心</view>
			</view>
			<view class="width90 alijusstart fotct paddbotm10 mart10">
				<!-- <view class="width31" @click="jumppage(1)">
					<image mode="widthFix" class="icon45" src="../../../static/img/user/user7.png"></image>
					<view class="fontspec font14 fcor333 mart5">门店登陆</view>
				</view>
				<view class="width31" @click="jumppage(2)">
					<image mode="widthFix" class="icon45" src="../../../static/img/user/user8.png"></image>
					<view class="fontspec font14 fcor333 mart5">代理商登陆</view>
				</view> -->
				<view class="width30w" @click="jumppage(3)">
					<image mode="widthFix" class="icon45" src="../../../static/img/user/user9.png"></image>
					<view class="fontspec font14 fcor333 mart5">我的推广</view>
				</view>
			</view>
		</view>


		<!-- 其他 -->
		<view class="order">
			<view class="height20 width94">
			</view>
			<view class="list">
				<view class="box" v-for="(row,index) in czList" :key="index" @tap="toPage(row.url,row.text)">
					<view class="img" v-if="row.text != '客服' ">
						<image :src="row.img" class="icon40" mode="widthFix"></image>
					</view>
					<button open-type="contact" style="background-color: transparent;" class="img" show-message-card
						session-from send-message-path send-message-title v-if="row.text == '客服' ">
						<image class="icon40" mode="widthFix" :src="row.img"></image>
					</button>
					<view class="text mart10">{{row.text}}</view>
				</view>
			</view>
		</view>
		<view class="place-bottom"></view>
	</view>
</template>
<script>
	import {
		GetPhoneNumber,
		findUser
	} from "../../../Utils/Api.js";
	import uniBadge from "../../../components/uni-badge/components/uni-badge/uni-badge.vue";
	let app = getApp()
	export default {
		components: {
			uniBadge
		},
		data() {
			return {
				isfirst: true,
				imagewxUrl: app.globalData.imageWxImg,
				imgadres: 'head.png',
				textnum: '',
				textSend: '',
				therrNum: '',
				rechargeOrderNum:'', //话费待支付
				whetherCheckNum: '', //未查看数量
				orderPayNum: '', //支付订单数量
				//个人信息,
				user: "",
				// 订单类型
				orderList: [{
						text: '待支付',
						icon: "../../../static/img/user/user1.png"
					},
					{
						text: '已支付',
						icon: "../../../static/img/user/user2.png"
					},
					{
						text: '已完成',
						icon: "../../../static/img/user/user3.png"
					}, {
						text: '已退款',
						icon: "../../../static/img/user/user4.png"
					}
				],
				//操作列表
				czList: '',
				nopaylist: [1, 2, 3, 4, 5],
				assetsstu: 2,
				userphone:'' // 手机号
			}
		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad() {
			if (!app.globalData.userInfo) {
				this.findUser()
			}
		},
		onReady() {
			//此处，演示,每次页面初次渲染都把登录状态重置
			uni.setStorage({
				key: 'UserInfo',
				data: false,
				success: function() {},
				fail: function(e) {}
			});
		},
		onShow() {
			if (app.globalData.userInfo) {
				this.findUser();
			}
			if (!app.globalData.userInfo.isSetPayPwd) {
				this.czList = [{
						url: '/pages/goods/recording/recording',
						text: '积分记录',
						img: '../../../static/img/ghkpay.png'
					},
					{
						url: '../../login/updatePas/updatePas',
						text: '支付密码',
						img: '../../../static/img/user/user11.png'
					},  {
						url: '',
						text: '客服',
						img: '../../../static/img/user/user13.png'
					}
				]
				return;
			}
			this.czList = [{
					url: '../../../subPages/cardsList/cardsList',
					text: '卡包',
					img: '../../../static/img/ghkpay.png'
				},
				{
					url: '../../login/updatePas/resetPas',
					text: '支付密码',
					img: '../../../static/img/user/user11.png'
				},
				{
					url: '',
					text: '客服',
					img: '../../../static/img/user/user13.png'
				}
			]
		},
		methods: {
			findUser() {
				let params;
				findUser(params).then(res => {
					if (res.return_code == '000000') {
						app.globalData.userInfo = res.return_data;
						this.user = res.return_data;
						this.textnum = res.return_data.unusedCouponNum;
						this.textSend = res.return_data.unusedDiscount;
						this.therrNum = res.return_data.unpaid;
						this.whetherCheckNum = res.return_data.whetherCheckNum;
						this.orderPayNum = res.return_data.orderPayNum;
						this.rechargeOrderNum = res.return_data.rechargeOrderNum;
						this.geTel(this.user.phone);
						uni.setStorage({
							key: "user",
							data: res.return_data
						})
					}
				});
			},
			getPhoneNumber(PhoneNumber) {
				let params = {
					openId: app.globalData.openId,
					iv: PhoneNumber.detail.iv,
					encryptedData: PhoneNumber.detail.encryptedData
				}
				GetPhoneNumber(params).then(res => {
					if (res.return_code == '000000') {
						app.globalData.userInfo = res.return_data
							.object
							.highUser;
						uni.setStorage({
							key: "user",
							data: res.return_data
								.object
								.highUser
						})
						this.toDeposit();
					}
				});
			},
			// 隐藏手机号
			geTel(tel) {
				var reg = /^(\d{3})\d{4}(\d{4})$/;
				this.userphone = tel.replace(reg, "$1****$2");
			},
			// 资产查看状态
			updatestu(item) {
				if (item == 1) {
					this.assetsstu = 2;
				}
				if (item == 2) {
					this.assetsstu = 1;
				}
			},
			// 推广
			jumppage(item) {
				// if (item == 1) {
				// 	uni.navigateTo({
				// 		url: '../../login/login?id=1'
				// 	})
				// }
				// if (item == 2) {
				// 	uni.navigateTo({
				// 		url: '../../login/login?id=2'
				// 	})
				// }
				if (item == 3) {
					uni.navigateTo({
						url: '/pages/user/myPromotion/myPromotion'
					})
				}
				if (item == 4) {
					uni.navigateTo({
						url: '../../../subPages/cardsList/cardsList'
					})
				}
				if (item == 5) {
					uni.navigateTo({
						url: '/pages/user/mineCoupons/mineCoupons'
					})
				}
				if (item == 6) {
					uni.navigateTo({
						url: '../../user/coupon/coupon'
					})
				}
			},
			//跳转登录
			jumplogin() {
				uni.navigateTo({
					url: '../../userLogin/userLogin'
				})
			},
			// H5获取手机号
			jumpH5Bding() {
				uni.navigateTo({
					url: '/pages/login/register?id=2'
				})
			},
			//扫码
			toScan() {
				uni.scanCode({
					success: function(res) {
						uni.navigateTo({
							url: '../../goods/coupons-info-details/coupons-info-details?id=' + JSON
								.parse(res.result).code
						})
					},
					fail() {
						uni.showToast({
							title: '无法识别二维码',
							icon: 'none',
							duration: 2000
						})
					}
				});

			},
			//话费充值
			toOrdehuafeirList(index) {
				uni.navigateTo({
					url: '../../../subPages/unionPay-orderList/unionPay-orderList?tbIndex=' + index
				})
			},
			//消息列表
			toMsg() {
				uni.showToast({
					title: '暂未开通',
					icon: 'none'
				});
			},
			toOrderList(index) {
				uni.navigateTo({
					url: '../../user/order_list/order_list?tbIndex=' + index
				})
			},
			toLogin() {
				uni.showToast({
					title: '请登录',
					icon: "none"
				});
				uni.navigateTo({
					url: '../../login/login'
				})
				this.isfirst = false;
			},
			isLogin() {
				//实际应用中,用户登录状态应该用token等方法去维持登录状态.
				const value = uni.getStorageSync('UserInfo');
				if (value) {
					return true;
				}
				return false
			},
			toDeposit() {
				uni.navigateTo({
					url: '../../user/deposit/deposit'
				})
			},
			toPage(url, item) {
				if (item != '客服') {
					uni.navigateTo({
						url: url
					})
				} else {
					this.playPhone();
				}

			},
			//拨打客服电话
			playPhone() {
				uni.showModal({
					title: '客服',
					content: '4006780738',
					success: function(res) {
						if (res.confirm) {
							uni.makePhoneCall({
								phoneNumber: '4006780738', //电话号码
								success: function(e) {
									console.log(e);
								},
								fail: function(e) {
									console.log(e);
			
								}
							})
						}
					}
				})
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #f5f5f5;
	}
	.status {
		width: 100%;
		height: 44px;
		background-color: #6fbdee;
	}
	
	
	button::after {
		border: none
	}
	
	.headcoun {
		background: linear-gradient(to bottom, #e8eff4, #f5f5f5);
		height: 100px;
	}
	
	.topay {
		width: 70px;
		height: 25px;
		font-size: 14px;
		text-align: center;
		line-height: 25px;
		border-radius: 20px;
		border: 1px solid #009DFF;
		color: #009DFF;
	}
	
	.place-bottom {
		height: 200upx;
	}
	
	swiper {
		height: 60px !important;
	}
	
	swiper-item {
		height: 60px !important;
	}
	
	.user {
		width: 96%;
		padding: 0 4%;
		display: flex;
		align-items: center;
		// position: relative;
		padding-bottom: 40rpx;
		background: linear-gradient(to bottom, #6fbdee, #e8eff4);
	
		.left {
			width: 20vw;
			height: 20vw;
			flex-shrink: 0;
			margin-right: 20upx;
			border: solid 1upx #fff;
			border-radius: 100%;
	
			image {
				width: 20vw;
				height: 20vw;
				border-radius: 100%;
			}
	
		}
	
		.right {
			width: 100%;
	
			.username {
				font-size: 36upx;
				color: #333333;
			}
	
			.signature {
				color: #eee;
				font-size: 28upx;
			}
		}
	
		.erweima {
			flex-shrink: 0;
			width: 100px;
			height: 30px;
			border-radius: 15px 0px 0px 15px;
			padding: 0;
			margin-left: 5vw;
			background-color: #1391f6;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
	
			image {
				width: 30rpx;
				height: 30rpx;
			}
	
			.icon {
				color: #7b6335;
				font-size: 42upx;
			}
		}
	}
	
	.order {
		.title {
			padding-top: 10px;
			padding-bottom: 10px;
			font-size: 36upx;
			height: 80upx;
			display: flex;
			align-items: center;
		}
	
		width: 92%;
		margin: 30rpx 4% 30rpx 4%;
		padding: 0rpx 0% 40rpx 0%;
		background-color: #fff;
		box-shadow: 0rpx 0rpx 25rpx rgba(0, 0, 0, 0.1);
		border-radius: 15rpx;
	
		.list {
			display: flex;
			padding-bottom: 10upx;
	
			.box {
				width: 25%;
	
				.img {
					width: 100%;
					display: flex;
					justify-content: center;
				}
	
				.text {
					width: 100%;
					display: flex;
					justify-content: center;
					font-size: 28upx;
					color: #3d3d3d;
				}
			}
		}
	
		.balance-info {
			display: flex;
			padding: 10upx 0;
	
			.left {
				width: 75%;
				display: flex;
	
				.box {
					width: 50%;
					font-size: 28upx;
	
					.num {
						width: 100%;
						height: 50upx;
						display: flex;
						justify-content: center;
						align-items: flex-end;
						color: #f9a453;
					}
	
					.text {
						width: 100%;
						display: flex;
						justify-content: center;
						color: #3d3d3d;
						font-size: 28upx;
					}
				}
			}
	
			.right {
				border-left: solid 1upx #17e6a1;
				width: 25%;
	
				.box {
	
					.img {
						width: 100%;
						height: 50upx;
						display: flex;
						justify-content: center;
						align-items: flex-end;
	
						.icon {
							font-size: 45upx;
							color: #e78901;
						}
					}
	
					.text {
						width: 100%;
						display: flex;
						justify-content: center;
						font-size: 28upx;
						color: #3d3d3d;
					}
				}
			}
		}
	}
	
	.toolbar {
		width: 92%;
		margin: 0 4% 0 4%;
		padding: 0 0 20upx 0;
		background-color: #fff;
		box-shadow: 0upx 0upx 25upx rgba(0, 0, 0, 0.1);
		border-radius: 15upx;
	
		.title {
			padding-top: 10upx;
			margin: 0 0 10upx 3%;
			font-size: 30upx;
			height: 80upx;
			display: flex;
			align-items: center;
		}
	
		.list {
			display: flex;
			flex-wrap: wrap;
	
			.box {
				width: 25%;
				margin-bottom: 40upx;
	
				.img {
					width: 23vw;
					height: 10.5vw;
					display: flex;
					justify-content: center;
	
					image {
						width: 9vw;
						height: 9vw;
					}
				}
	
				.text {
					width: 100%;
					display: flex;
					justify-content: center;
					font-size: 26upx;
					color: #3d3d3d;
				}
			}
		}
	}
</style>
