<template>
	<view class="page">
		<u-navbar :is-back="false"  title="个人中心" :border-bottom="false" back-icon-color="000" :background="bgc" title-color='#000' title-size='36'
			height='40'	id="navbar">
		</u-navbar>
        <view class="top" v-if="false">
        	<view class="name">
        		<image src="https://api.ccttiot.com/smartmeter/img/static/uXS4EUkAFWcBXE4WJFSL" mode=""></image> 账户余额
        	</view>
			<view class="chongzhi">
				<view class=""></view><view class="cz" @click="btncz">立即充值</view>
			</view>
			<view class="chakan">
				<text class="price">{{user.balance == null ? '0.00' : user.balance}}</text> 
				<view class="" @click="btncha">
					（查看可用门店）<image src="https://api.ccttiot.com/smartmeter/img/static/upPch6htDedjB6rREtdV" mode=""></image>
				</view>
			</view>
        </view>
		<view class="top" style="padding: 0;">
			<image style="" src="https://api.ccttiot.com/smartmeter/img/static/unOSDXbaM4kbZH0gElDy" mode=""></image>
		</view>
		
		<view class="bd">
			<view class="name">
				常用功能
			</view>
			<view class="gongneng" @click="btnpage(1)">
				<view class="lt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uagSCuoY0LglNeH4SJWW" mode=""></image> 全部门店
				</view>
				<view class="rt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/u76gy7cgZARhNXV3b91k" mode=""></image>
				</view>
			</view>
			<view class="gongneng" @click="btnpage(2)">
				<view class="lt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uUa7yevmLyiGkiKO13iy" mode=""></image> 扫一扫
				</view>
				<view class="rt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/u76gy7cgZARhNXV3b91k" mode=""></image>
				</view>
			</view>
			<view class="gongneng" @click="btnpage(3)">
				<view class="lt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uXhCHFfh3D0GL0mLf7DP" mode=""></image> 客服电话
				</view>
				<view class="rt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/u76gy7cgZARhNXV3b91k" mode=""></image>
				</view>
			</view>
			<view class="gongneng" @click="btnpage(4)">
				<view class="lt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/u0PuPY00UK9n11mCd9yQ" mode=""></image> 常见问题
				</view>
				<view class="rt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/u76gy7cgZARhNXV3b91k" mode=""></image>
				</view>
			</view>
			<view class="gongneng" @click="btnpage(6)">
				<view class="lt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uOCSSTWTBdtVooHEElwD" mode=""></image> 意见反馈
				</view>
				<view class="rt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/u76gy7cgZARhNXV3b91k" mode=""></image>
				</view>
			</view>
			<!-- <view class="gongneng" @click="btnluru">
				<view class="lt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uXtWTZ3ETnC7w23VxEWs" mode=""></image> 设备录入
				</view>
				<view class="rt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/u76gy7cgZARhNXV3b91k" mode=""></image>
				</view>
			</view> -->
			<view class="gongneng" @click="btnpage(7)">
				<view class="lt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/ueYTUVgfbibGCeLgLcMc" mode=""></image> 退出登录
				</view>
				<view class="rt">
					<image src="https://api.ccttiot.com/smartmeter/img/static/u76gy7cgZARhNXV3b91k" mode=""></image>
				</view>
			</view>
			<view class="jiameng" @click="btnjiameng">
				<image src="https://api.ccttiot.com/smartmeter/img/static/usIK790XacHJ1pXUbbfW" mode=""></image>
			</view>
		</view>
		<view class="luru" @click="btnluru">
			录入
		</view>
		<view class="kfimg" v-if="flag">
			<image src="https://api.ccttiot.com/smartmeter/img/static/uc8dAVNneEshmNJjPW3w" mode=""></image>
			<view class="boda">
                <view class="btntel" @click="call(1)">
                	<image src="https://api.ccttiot.com/smartmeter/img/static/uvq3hTmgx4aK8lkhzvf3" mode=""></image> 商家电话
                </view>
				<view class="btntel" @click="call(2)">
					<image src="https://api.ccttiot.com/smartmeter/img/static/ulZS2x5zQDrBPjWiH8Gn" mode=""></image> 平台电话
				</view>
			</view>
			<image class="yic" @click="flag = false" src="https://api.ccttiot.com/smartmeter/img/static/uPhDN73dFXTe31yvnHhP" mode=""></image>
		</view>
		<view class="mask" v-if="flag"></view>
		<view class="chadianp" v-if="mendianflag">
			<image src="https://api.ccttiot.com/smartmeter/img/static/uQ9Lap86n7hzNGtzAVIV" mode=""></image>
			<view class="name">
				余额适用门店
			</view>
			<view class="list">
				<view class="list_item" v-for="(item,inde) in 10" :key="index">
					【宁德-某某路店】
				</view>
			</view>
			<view class="anniu" @click="mendianflag = false">
				我知道了
			</view>
		</view>
		<view class="mask" v-if="mendianflag"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "",
				},
                flag:false,
                mendianflag:false,
				user:{},
				telobj:{}
			}
		},
		onLoad() {
			this.getinfo()
			this.getkefutel()
		},
		methods: {
			// 点击进行设备录入
			btnluru(){
				uni.navigateTo({
					url:'/page_user/luru'
				})
			},
			// 点击拨打电话
			call(num){
				if(num == 1){
					uni.makePhoneCall({
						phoneNumber: this.telobj.storePhone,
						success: function(res) {
							console.log('拨打电话成功', res)
						},
						fail: function(err) {
							console.error('拨打电话失败', err)
							uni.showToast({
								title: '取消拨打电话',
								icon: 'none'
							})
						}
					})
				}else if(num == 2){
					uni.makePhoneCall({
						phoneNumber: this.telobj.platformPhone,
						success: function(res) {
							console.log('拨打电话成功', res)
						},
						fail: function(err) {
							console.error('拨打电话失败', err)
							uni.showToast({
								title: '取消拨打电话',
								icon: 'none'
							})
						}
					})
				}
			},
			// 查询客服电话
			getkefutel(){
				this.$u.get(`/app/store/getServicePhone?storeId=1`).then(res => {
					if (res.code == 200) {
						this.telobj = res.data
					}
				})
			},
			// 查询个人信息
			getinfo(){
				this.$u.get(`/getAppInfo`).then(res => {
					if (res.code == 200) {
						this.user = res.user
					}
				})
			},
            // 点击跳转到加盟合作页
            btnjiameng(){
            	uni.navigateTo({
            		url:'/page_user/zhaoshang'
            	})
            },
			// 点击立即充值跳转到充值页
			btncz(){
				uni.navigateTo({
					url:'/page_user/chongzhi'
				})
			},
			// 点击查看可用门店
			btncha(){
				this.mendianflag = true
			},
			// 功能列表点击事件
			btnpage(num){
				if(num == 3){
					this.flag = true
				}else if(num == 6){
					uni.navigateTo({
						url:'/page_user/yijian'
					})
				}else if(num == 4){
					uni.navigateTo({
						url:'/page_user/changjian'
					})
				}else if(num == 1){
					uni.reLaunch({
						url:'/pages/nearbystores/index'
					})
				}else if(num == 2){
					uni.navigateTo({
						url:'/page_user/huogui'
					})
					// uni.scanCode({
					// 	onlyFromCamera: true,
					// 	scanType: ['qrCode'],
					// 	success: res => {
     //                         console.log(res);
					// 	},
					// 	fail: err => {
					// 		console.error('扫描失败：', err)
					// 		uni.showToast({
					// 			title: '扫描失败',
					// 			icon: 'none'
					// 		})
					// 	}
					// })
				}else if(num == 7){
					uni.showModal({
						    title: '温馨提示',  
						    content: '您确定要退出登录吗?',  
						    success: function (res) {  
						        if (res.confirm) {
									uni.clearStorage({
									    success: function () {
									        uni.showToast({
									               title: '退出成功',
									               icon: 'success',
									               duration:2000
									        })
									        setTimeout(()=>{
									        	uni.reLaunch({
									        		url:'/pages/login/index'
									        	})
									        },1000)
									    },
									    fail: function (err) {
									        console.error('清除本地存储失败：', err)
									    }
									})
						        } else if (res.cancel) {
						          
						    }  
						}  
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
		.luru{
			width: 100rpx;
			height: 100rpx;
			background-color: #48893B;
			color: #fff;
			border-radius: 50%;
			position: fixed;
			bottom: 230rpx;
			right: 30rpx;
			text-align: center;
			line-height: 100rpx;
		}
		.chadianp{
			width: 674rpx;
			height: 880rpx;
			background: linear-gradient( 180deg, #DEF1DA 18%, #FFFFFF 20%, #FFFFFF 100%);
			border-radius: 36rpx 36rpx 36rpx 36rpx;
			position: fixed;
			top: 352rpx;
			left: 50%;
			transform: translateX(-50%);
			z-index: 9;
			padding: 0 40rpx;
			box-sizing: border-box;
			.name{
				font-weight: 600;
				font-size: 48rpx;
				color: #48893B;
				height: 164rpx;
				line-height: 164rpx;
			}
			.anniu{
				width: 406rpx;
				height: 86rpx;
				line-height: 86rpx;
				background: #48893B;
				border-radius: 43rpx 43rpx 43rpx 43rpx;
				position: fixed;
				left: 50%;
				transform: translateX(-50%);
				bottom: 54rpx;
				text-align: center;
				font-weight: 600;
				font-size: 40rpx;
				color: #FFFFFF;
			}
			image{
				width: 166rpx;
				height: 164rpx;
				position: fixed;
				top: 0;
				right: 0;
			}
			.list{
				width: 100%;
				height: 520rpx;
				overflow: scroll;
				.list_item{
					margin-top: 40rpx;
					font-weight: 600;
					font-size: 36rpx;
					color: #3D3D3D;
				}
			}
		}
		.kfimg{
			width: 590rpx;
			height: 706rpx;
			position: fixed;
			top: 380rpx;
			left: 50%;
			transform: translateX(-50%);
			z-index: 1;
			.yic{
				position: fixed;
				top: 750rpx;
				left: 50%;
				transform: translateX(-50%);
				z-index: 1;
				width: 60rpx !important;
				height: 60rpx !important; 
			}
			.boda{
				text-align: center;
				position: fixed;
				left: 50%;
				transform: translateX(-50%);
				bottom:60rpx;
				.tel{
					font-size: 36rpx;
					color: #3D3D3D;
					font-weight: 600;
					margin-bottom: 62rpx;
				}
				.btntel{
					margin: auto;
					width: 436rpx;
					height: 68rpx;
					background: #48893B;
					border-radius: 40rpx 40rpx 40rpx 40rpx;
					border-radius: 50rpx;
					font-size: 32rpx;
					color: #FFFFFF;
					font-weight: 600;
					text-align: center;
					line-height: 68rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 40rpx;
					image{
						width: 44rpx;
						height: 44rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
		.mask{
			width: 100%;
			height: 100vh;
			background-color: #000;
			opacity: .5;
			position: fixed;
			top: 0;
			left: 0;
		}
		.bd{
			height: 970rpx;
			padding: 0 40rpx;
			box-sizing: border-box;
			padding-top: 42rpx;
			box-shadow: 0rpx -6rpx 20rpx 0rpx rgba(0,0,0,0.3);
			.jiameng{
				width: 100%;
				text-align: center;
				background-color: #fff;
				margin: auto;
				position: fixed;
				bottom: 0;
				left: 0;
				image{
					width: 710rpx;
					height: 220rpx;
				}
			}
			.name{
				font-weight: 600;
				font-size: 36rpx;
				color: #3D3D3D;
				border-left: 8rpx solid #48893B;
				padding-left: 12rpx;
				box-sizing: border-box;
			}
			.gongneng{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 44rpx;
				.rt{
					image{
						width: 20rpx;
						height: 46rpx;
					}
				}
				.lt{
					display: flex;
					align-items: center;
					font-size: 36rpx;
					color: #3D3D3D;
					image{
						width: 50rpx;
						height: 50rpx;
						margin-right: 18rpx;
					}
				}
			}
		}
		.top{
			width: 674rpx;
			height: 252rpx;
			background: #3D3D3D;
			border-radius: 20rpx 20rpx 0 0;
			margin: auto;
			margin-top: 60rpx;
			padding: 26rpx 18rpx;
			box-sizing: border-box;
			.chakan{
				display: flex;	
				align-items: center;
				padding-left: 10rpx;
				box-sizing: border-box;
				view{
				   display: flex;
				   align-items: center;
				}
				.price{
					font-weight: 600;
					font-size: 48rpx;
					color: #FFFFFF;
				}
				font-size: 24rpx;
				color: #D8D8D8;
				image{
					width: 14rpx;
					height: 36rpx;
					margin-left: 10rpx;
					margin-top: 4rpx;
				}
			}
			.name{
				display: flex;
				align-items: center;
				font-weight: 600;
				font-size: 36rpx;
				color: #FFDB24;
				image{
					width: 78rpx;
					height: 78rpx;
					margin-right: 8rpx;
				}
			}
			.chongzhi{
				width: 100%;
				display: flex;
				justify-content: space-between;
				.cz{
					width: 218rpx;
					height: 62rpx;
					background: linear-gradient( 90deg, #FFDB24 0%, #FFF7CD 100%);
					border-radius: 38rpx 38rpx 38rpx 38rpx;
					font-size: 32rpx;
					color: #5D5320;
					text-align: center;
					line-height: 62rpx;
				}
			}
		}
	}

	
</style>