JP-ChargeTeam51/pages/user/setting.vue

<template>
	<view>
		<ujp-navbar title="设置"></ujp-navbar>		<view class="group">
			<view class="userCell-item">
				<view class="userCell-title">
					<p class="oldTextjp" oldstyle="font-size: 18px;">长辈模式</p>
				</view>
				<view class="userCell-content " >
					<view class="value">
						<view class="text oldTextjp2" oldstyle="font-size: 16px;">
							字体更大 看得清
						</view>
						<u-switch v-model="checked" active-color="#00E266" @change="checkedChange"></u-switch>
					</view>
				</view>
			</view>
			<view class="userCell-item" v-if="personInfo.memberLevel==3||personInfo.memberLevel==4">
				<view class="userCell-title">
					<p class="oldTextjp" oldstyle="font-size: 18px;">快捷充电</p>
				</view>
				<view class="userCell-content " >
					<view class="value">
						<view class="text oldTextjp2" oldstyle="font-size: 16px;" @click="quickChargingBl=true">
							扫码即充 充满自停<u-icon name="question-circle"></u-icon>
						</view>
						<u-switch v-model="checked2" active-color="#00E266" @change="checkedChange2"></u-switch>
					</view>
				</view>
			</view>
			<view class="userCell-item" @click="gotoUrl('pages/user/logout')">
				<view class="userCell-title">
					<p class="oldTextjp" oldstyle="font-size: 18px;">注销账号</p>
				</view>
				<view class="userCell-content " >
					<text class="ff oldTextjp2" oldstyle="font-size: 16px;">注销后无法恢复，请谨慎操作	</text>
					<text class="iconfont">&#xe600;</text>
				</view>
			</view>
		</view>
			
		<view class="logout-btn oldTextjp" oldstyle="font-size:18px" @click="signOut">
			退出帐号
		</view>
		
		<view>
			
			<u-modal v-model="show" @confirm="confirm" confirm-color="#FF3D00" :show-cancel-button="true" ref="uModal" :asyncClose="true" :title="title" 
				:content="content" :content-style="{color: '#333333'}"></u-modal>
		</view>
		
		<u-modal v-model="quickChargingBl" :mask-close-able="true" class="quickMain" confirm-text="注册会员" cancel-text="先不注册" :show-title="false" width="650"
		
			border-radius="30" title="" :show-cancel-button="false" :show-confirm-button="false">
			<view class="quickMain-slot-content">
				<!-- :show-title="false" -->
		
				<view class="quickMain-img">
					<img src="@/assets/img/member/10.png" ></img>
				</view>
				<view  class="quickMain-bodyMain" >
					<view  class="quickMain-body">
						<view  class="quickMain-text1">快捷充电功能上线!</view>
						<view  class="quickMain-text2">
							恭喜您达到
							<img src="@/assets/img/9-4/白金会员.svg" ></img>
							<span style="color:#3F51B5;">白金会员</span>等级，您已获得<span style="color: #19be6b;">【快捷充电】</span>功能体验资格。
							
						</view>
						<view  class="quickMain-text2">
							当您插枪扫码后，在个人账户余额充足的情况下，自动帮您选择充满自停模式并开始充电。如需关闭此功能，可在“我的”-“设置”中修改。
						</view>
					</view>
					<view class="btnview">
					
							
						<view class="btnview2" @click="quickChargingBl=false">关闭弹窗</view>
					</view>
				</view>
				
			</view>
		</u-modal>
	</view>
</template>

<script>
	import * as userApi from '@/apis/user.js'
	import * as API from '@/apis/index.js'
	import * as loginApi from '@/apis/login.js'
	
	export default {
		data() {
			return {
				show: false,
				title: '退出账号',
				content: '是否退出当前账号?',
				userId: '',
				userPhone: '',
				quickChargingBl:false,
				checked:false,
				checked2:false,
				valueStyle: {
					color:'#ff3300',
				},
				valueStyle2: {
					color: '#777777',
					textAlign: 'left',
					marginLeft: '8px'
				},
				titleStyle: {
					fontWeight: 'bold',
					fontSize: '18px',
				},
				fontMode: '',
				personInfo:{}
			}
		},
		onReady() {
			if(this.carhelp.get("getElderModeClass") == "长辈模式") {
				this.checked = true;
			} else {
				this.checked = false;
			}
			this.personInfo = this.carhelp.getPersonInfo()
			this.$forceUpdate()
			if(this.personInfo.fontMode=="1"){
					this.checked = true;
					this.carhelp.set("getElderModeClass","长辈模式") 
			}
			if(this.personInfo.quickCharging){
				this.checked2 = true;
			}
		},
		methods: {
			getUserInfo() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})		
				
				loginApi.findByOpenId({
					openId: this.carhelp.getOpenId()
				}).then((res) => {
					uni.hideLoading();
					
					if (res.code == 200&&res.result) {
						var token = res ? res.data.token : '';	
						this.personInfo=res.data.regUser
										
						this.carhelp.setPersonInfo(res.data.regUser );
						this.carhelp.setToken(token);
						this.carhelp.setPersonInfoPlus(res.data);
						console.log("setPersonInfoPlus")
					}
				}).catch(error => {
					this.carhelp.logoff()
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			checkedChange2() {
			
				
				
				API.changeQuickCharging({qucikStatus: this.checked2?1:0}).then((res) => {
					this.getUserInfo()
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			checkedChange() {
				if(this.checked) {
					this.carhelp.set("getElderModeClass", "长辈模式");
					this.fontMode = '1';
				} else {
					this.carhelp.set("getElderModeClass", "标准模式");
					this.fontMode = '0';
				}
				
				API.changeFont({fontMode: this.fontMode}).then((res) => {
					this.getUserInfo()
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			signOut() {
				this.show = true;
			},
			confirm() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})		
				userApi.logout().then((res) => {
					uni.hideLoading();
					this.show = false;
					this.carhelp.logoff()
					uni.redirectTo({
						url: '/pages/login/login'
					})
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.quickMain{
		::v-deep.u-mode-center-box{
			background-color: transparent;
		}
		::v-deep.u-model{
			background-color: transparent;
		}
		.quickMain-slot-content{
			.quickMain-img{
				    position: relative;
				    top: 120rpx;
				    text-align: center;
				img{
					width: 160rpx;
					height: 240rpx;
				}
			}
			.quickMain-bodyMain{
				background-color:#fff;
				border-radius: 15px;
				padding-bottom:20rpx;
			}
			.quickMain-body{
				
				margin:0 56rpx ;
				color: rgba(51, 51, 51, 1);
	
				.quickMain-text1{
					font-size: 48rpx;
					text-align: center;
					padding: 132rpx 0 32rpx 0;
				}
				.quickMain-text2{
					margin-bottom: 20rpx ;
					//color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
					img{
						width: 40rpx;
						//height: 120px;
					}
				}
				
			}
			
			
		}
	}
	.logout-btn{
		background-color: #fff;
		padding: 12px 0;
		text-align: center;
		margin-top: 12px;
	}
	.group{
		background-color: #fff;
		margin-top: 12px;
	}
 
  .ff{
	  color: #FF0000;
  }
	.userCell-item {
		display: flex;
		border-bottom: 1px solid rgba(241, 241, 241, 100);
		align-items: center;
		padding: 8px 16px 8px 0px;
	  margin-left: 8px;
		.userCell-title {
			
			font-size: 16px;
			display: flex;
			margin-right: 8px;
	
			p {
				margin-left: 8px;
				font-size: 16px;
				line-height: 28px;
				color: #1a1a1a;
			}
		}
	
		.userCell-content {
			display: flex;
			flex: 1;
			justify-content: space-between;
			//margin-left: 20rpx;
			color: #777777;
			font-size: 12px;
			line-height: 20px;
			.iconfont{
				font-size: 24px;
				 margin: auto 0;
				color: #b3b3b3
			}
	
		}
	
		.value {
			display: flex;
			justify-content: space-between;
			flex: 1;
	
			.text {
				line-height: 28px;
				// margin-right: 20vw;
			}
	
		}
	
		.u-switch {
			float: right;
			width: 48px;
			height: 24px;
			vertical-align: middle;
			margin-left: 8px;
		}
	
		::v-deep.u-switch__node {
			width: 24px !important;
			height: 24px !important;
		}
	
		
	}
	.switcher-mode{
		background-color: #fff;
		height: 44px;
		line-height: 44px;
		display: flex;
		justify-content: space-between;
		padding: 0 14px;
		text{
			font-size: 12px;
			color: rgba(119, 119, 119, 100);
			margin-left: 8px;
			}
			.switch-box{
				padding-top: 8px;
			}
			.switch{
				width: 40px;
				height: 22px;
				
			}
			::v-deep.u-switch__node{
				width: 20px !important;
				height: 20px !important;
			}
	}
	.btnview {
	
		display: flex;
		flex-direction: column;
		align-items: center;
	
		.btnview1 {}
	
		.btnview2 {
			color: #999999;
			margin-top: 20rpx;
			padding-bottom: 48rpx;
		}
	}
</style>